/* The shared garden palette follows the visitor through every page. Image
   surfaces and semantic warning/error colors deliberately keep their own rules. */
:root[data-site-theme] {
  --bg: color-mix(in srgb, var(--site-paper) 76%, white);
  --surface: color-mix(in srgb, var(--site-paper) 18%, white);
  --ink: color-mix(in srgb, var(--site-ink) 72%, #25302c);
  --text: var(--ink);
  --muted: color-mix(in srgb, var(--site-caption) 88%, var(--ink));
  --green: var(--site-accent);
  --green-dark: color-mix(in srgb, var(--site-accent) 82%, #17251e);
  --green-pale: var(--site-accent-soft);
  --line: color-mix(in srgb, var(--site-edge) 74%, white);
  --border: var(--line);
  --site-soft-surface: color-mix(in srgb, var(--site-paper) 64%, white);
  --site-faint-ink: color-mix(in srgb, var(--site-ink) 12%, transparent);
  --site-shadow: 0 8px 26px color-mix(in srgb, var(--site-ink) 6%, transparent);
  --site-card-radius: 16px;
  --site-panel-radius: 20px;
  --site-page-pattern: radial-gradient(circle at 7px 9px, color-mix(in srgb, var(--site-ink) 4%, transparent) .55px, transparent .85px), radial-gradient(circle at 31px 25px, color-mix(in srgb, var(--site-ink) 3%, transparent) .45px, transparent .8px);
  --site-page-pattern-size: 46px 42px;
  --site-panel-pattern: none;
  --site-panel-pattern-size: auto;
  --site-heading-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 110'%3E%3Cg fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 98C51 88 67 76 84 58S115 26 151 13M58 80C52 64 39 51 26 49M83 60C83 41 78 29 65 20M108 36C121 39 136 38 148 30'/%3E%3Cpath d='M48 72C33 76 24 66 21 57C36 56 43 61 48 72ZM59 81C53 94 43 99 32 96C38 86 44 82 59 81ZM74 68C66 56 65 47 68 39C79 45 83 55 74 68ZM91 54C96 68 107 68 116 65C112 54 104 50 91 54ZM104 41C96 30 98 20 103 14C112 22 114 31 104 41ZM120 28C132 30 140 23 144 15C130 14 124 19 120 28Z'/%3E%3Cpath d='M28 50L19 44M65 20L61 13M149 30L157 26M151 13L160 9'/%3E%3Ccircle cx='17' cy='42' r='3'/%3E%3Ccircle cx='60' cy='10' r='2.7'/%3E%3Ccircle cx='160' cy='25' r='2.5'/%3E%3Ccircle cx='163' cy='8' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --site-paper-stroke: solid;
  color-scheme: light;
  accent-color: var(--site-accent);
}

:root[data-site-theme] body {
  background-color: var(--bg);
  background-image: var(--site-page-pattern);
  background-size: var(--site-page-pattern-size);
  color: var(--ink);
}
:root[data-site-theme] ::selection { background: var(--site-tint); color: var(--site-ink); }
:root[data-site-theme] .workspace,
:root[data-site-theme] main { background: transparent; }

/* A calm navigation frame leaves the imagery as the visual center. */
:root[data-site-theme] .sidebar {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 3px 0 24px color-mix(in srgb, var(--site-ink) 3%, transparent);
  scrollbar-color: var(--site-edge) transparent;
}
:root[data-site-theme] .sidebar::-webkit-scrollbar-thumb { background: var(--site-edge); }
:root[data-site-theme] .brand { color: var(--site-ink); }
:root[data-site-theme] .brand-mark i { background: var(--site-accent); border-radius: 4px; }
:root[data-site-theme] .brand-mark i:nth-child(2) { background: var(--site-petal); }
:root[data-site-theme] .brand-mark i:nth-child(3) { background: var(--site-alt-tint); }
:root[data-site-theme] .brand-mark i:nth-child(4) { background: var(--site-tint); }
:root[data-site-theme] :is(.brand small,.nav-label,.sidebar-help,.sidebar-footer,.main-footer) { color: var(--muted); }
:root[data-site-theme] .nav-item { color: var(--muted); border-radius: 10px; }
:root[data-site-theme] .nav-item:hover { color: var(--site-ink); background: var(--site-soft-surface); }
:root[data-site-theme] .nav-item.active {
  color: var(--site-ink);
  background: var(--site-tint);
  box-shadow: inset 3px 0 var(--site-accent);
}
:root[data-site-theme] .tiny-badge { background: var(--site-soft-surface); color: var(--site-caption); }
:root[data-site-theme] .keyword-list button {
  color: var(--site-caption); background: var(--site-soft-surface); border-color: var(--line); border-radius: 6px;
}
:root[data-site-theme] .keyword-list button:hover { color: var(--site-ink); border-color: var(--site-petal); }
:root[data-site-theme] .api-invite {
  background-color: var(--site-paper);
  background-image: var(--site-panel-pattern);
  background-size: var(--site-panel-pattern-size);
  border-color: var(--line); border-radius: var(--site-card-radius);
}
:root[data-site-theme] .invite-icon { color: var(--site-ink); background: var(--site-tint); border-radius: 9px; }
:root[data-site-theme] .api-invite p { color: var(--site-caption); }
:root[data-site-theme] .topbar {
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  border-color: var(--line);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--site-ink) 2%, transparent);
}
:root[data-site-theme] .search-box { background: var(--site-soft-surface); border-color: var(--line); border-radius: 10px; color: var(--site-caption); }
:root[data-site-theme] .search-box kbd { background: var(--surface); border-color: var(--site-edge); color: var(--site-caption); }
:root[data-site-theme] .search-box input::placeholder { color: var(--muted); opacity: .85; }
:root[data-site-theme] .login-button { color: var(--site-ink); }
:root[data-site-theme] .login-button>[data-icon] { color: var(--site-ink); background: var(--site-tint); }
:root[data-site-theme] .connection-status { color: var(--site-caption); }
:root[data-site-theme] .connection-status i { background: var(--site-accent); }

/* A pressed botanical specimen and fine inner rule frame a quiet paper sheet. */
:root[data-site-theme] .page-heading {
  position: relative;
  isolation: isolate;
  padding: 23px 26px;
  border: 1px var(--site-paper-stroke) var(--line);
  border-radius: var(--site-panel-radius);
  background-color: color-mix(in srgb, var(--site-paper) 46%, white);
  background-image: var(--site-panel-pattern);
  background-size: var(--site-panel-pattern-size);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 85%, transparent), 0 3px 12px color-mix(in srgb, var(--site-ink) 3%, transparent);
}
:root[data-site-theme] .page-heading>div { position: relative; z-index: 1; }
:root[data-site-theme] .page-heading::before {
  content: '';
  position: absolute; inset: 6px;
  border: 1px solid color-mix(in srgb, var(--site-edge) 38%, transparent);
  border-radius: inherit;
  pointer-events: none; z-index: -1;
}
:root[data-site-theme] .page-heading::after {
  content: '';
  position: absolute; right: 15%; top: 50%; width: 174px; height: 100px;
  pointer-events: none; z-index: -1; opacity: .22;
  background: var(--site-ink);
  -webkit-mask: var(--site-heading-ornament) center / contain no-repeat;
  mask: var(--site-heading-ornament) center / contain no-repeat;
  transform: translateY(-50%);
}
:root[data-site-theme] .page-heading h1 { color: var(--ink); letter-spacing: .6px; }
:root[data-site-theme] :is(.eyebrow,.title-dot) { color: var(--site-accent); }
:root[data-site-theme] .page-heading p { color: var(--muted); line-height: 1.8; }
:root[data-site-theme] .heading-stat>[data-icon] { color: var(--site-ink); background: var(--site-tint); border-radius: 13px; }
:root[data-site-theme] .heading-stat div>span { color: var(--muted); }
:root[data-site-theme] .hero {
  background-color: color-mix(in srgb, var(--site-ink) 40%, var(--site-alt-tint));
  border-radius: var(--site-panel-radius);
  box-shadow: var(--site-shadow), 0 0 0 1px color-mix(in srgb, var(--site-ink) 9%, transparent);
}
:root[data-site-theme] .hero-shade {
  background: linear-gradient(90deg, color-mix(in srgb, var(--site-ink) 54%, #182720) 0%, color-mix(in srgb, var(--site-ink) 60%, #1e2c24) 20%, color-mix(in srgb, var(--site-ink) 76%, transparent) 39%, transparent 80%);
}
:root[data-site-theme] .hero-label,
:root[data-site-theme] .hero-content p { color: #f5f5ec; }
:root[data-site-theme] .hero-button { background: var(--site-paper); color: var(--site-ink); border-color: var(--site-petal-light); border-radius: 8px; }
:root[data-site-theme] .hero-button:hover { background: white; }
:root[data-site-theme] :is(.section-label>span,.section-label>a,.section-label svg,.shelf-summary,.collection-order) { color: var(--site-caption); }

/* Surface shapes never change image dimensions, transforms, or object fitting. */
:root[data-site-theme] :is(.image-card,.collection-mini,.api-card,.shelf-card,.source-card,.preference-card,.moderation-card,.platform-panel,.sync-library,.sync-create-card,.translation-library,.related-collection,.gallery-settings-style,.gallery-settings-playback) {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--site-card-radius);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--site-ink) 2%, transparent);
}
:root[data-site-theme] :is(.image-card:hover,.collection-mini:hover,.api-card:hover,.shelf-card:hover,.gallery-settings-style:hover) {
  border-color: color-mix(in srgb, var(--site-petal) 80%, var(--site-edge));
  box-shadow: var(--site-shadow);
}
:root[data-site-theme] .card-info { background: var(--surface); }
:root[data-site-theme] .card-info h3 { color: var(--ink); }
:root[data-site-theme] :is(.card-tags,.card-id,.card-likes,.collection-mini small,.api-body p,.api-meta,.api-meta .api-owner,.shelf-body p,.collection-badges,.collection-identity p,.collection-order span) { color: var(--muted); }
:root[data-site-theme] .collection-mini small span { color: var(--site-caption); background: var(--site-tint); }
:root[data-site-theme] .official-card { border-color: color-mix(in srgb, var(--site-alt-tint) 60%, var(--site-edge)); }
:root[data-site-theme] .official-card .api-body { background: var(--surface); }
:root[data-site-theme] .shelf-card::before { border-color: var(--site-edge); background: var(--site-tint); }
:root[data-site-theme] :is(.shelf-cover,.api-preview) { background-color: var(--site-soft-surface); }
:root[data-site-theme] .shelf-cover { border-radius: calc(var(--site-card-radius) - 1px) calc(var(--site-card-radius) - 1px) 0 0; }
:root[data-site-theme] .shelf-empty-cover { background: var(--site-paper); color: var(--site-caption); }
:root[data-site-theme] .create-shelf-card { border-color: var(--site-edge); background: var(--site-soft-surface); border-radius: var(--site-card-radius); }
:root[data-site-theme] .create-shelf-card:hover { border-color: var(--site-petal); background: var(--site-paper); }
:root[data-site-theme] .create-shelf-card>span { color: var(--site-ink); background: var(--site-tint); }
:root[data-site-theme] .create-shelf-card :is(strong,small) { color: var(--site-caption); }
:root[data-site-theme] :is(.cover-badge:not(.official),.shelf-privacy) { background: var(--surface); color: var(--site-ink); }
:root[data-site-theme] :is(.shelf-actions,.metadata-filters,.collection-nav,.gallery-toolbar,.gallery-search-form,.editor-submit,.editor-divider,.image-picker,.save-footer,.related-collection>.text-button,.collection-context-actions,.main-footer,.sidebar-footer) { border-color: var(--line); }
:root[data-site-theme] :is(.collection-context,.sync-connection,.preference-discovery,.gallery-search-form,.translation-example,.inspiration-note,.site-garden-preview-panel) {
  background-color: var(--site-paper);
  background-image: var(--site-panel-pattern);
  background-size: var(--site-panel-pattern-size);
  border-color: var(--line);
  border-radius: var(--site-panel-radius);
}
:root[data-site-theme] :is(.context-banner,.gallery-filter-chip,.channel-badge:not(.official)) { color: var(--site-ink); background: var(--site-tint); border-color: var(--site-edge); }

/* Actions keep a clear, consistent hierarchy across customer and admin pages. */
:root[data-site-theme] .button:not(.danger) { color: var(--site-ink); background: var(--surface); border-color: var(--site-edge); border-radius: 9px; }
:root[data-site-theme] .button:not(.danger):hover { background: var(--site-paper); border-color: var(--site-petal); }
:root[data-site-theme] .button.primary:not(.danger) { color: white; background: var(--site-accent); border-color: var(--site-accent); box-shadow: 0 3px 8px color-mix(in srgb, var(--site-accent) 12%, transparent); }
:root[data-site-theme] .button.primary:not(.danger):hover { background: var(--green-dark); border-color: var(--green-dark); }
:root[data-site-theme] .text-button:not(.sync-delete-button,.sync-revoke-button) { color: var(--site-accent); }
:root[data-site-theme] .icon-button { color: var(--site-caption); }
:root[data-site-theme] .icon-button:hover { color: var(--site-ink); background: var(--site-tint); }
:root[data-site-theme] .gallery-shuffle { color: var(--site-ink)!important; background: var(--surface)!important; }
:root[data-site-theme] :is(.filter-button,.density-control,.tag-chip,.pill-tabs button,.tag-sort-toggle button) { background: var(--surface); color: var(--site-caption); border-color: var(--line); }
:root[data-site-theme] :is(.tag-chip:hover,.filter-button:hover) { color: var(--site-ink); border-color: var(--site-petal); }
:root[data-site-theme] :is(.tag-chip.active,.pill-tabs button.active,.density-control button.active,.button.saved,.vote-button.active) { color: var(--site-ink); background: var(--site-tint); border-color: var(--site-edge); }
:root[data-site-theme] .tag-chip small { color: var(--site-caption); }
:root[data-site-theme] .sort-tabs button { color: var(--muted); }
:root[data-site-theme] .sort-tabs button.active { color: var(--site-accent); }
:root[data-site-theme] .sort-tabs button.active::after { background: var(--site-accent); }
:root[data-site-theme] .hot-dot { background: var(--site-petal); }
:root[data-site-theme] :is(.view-controls>span,.discovery-toolbar p,.discovery-toolbar label,.gallery-search-details summary,.gallery-search-details summary>span,.gallery-search-help small,.gallery-search-status>small,.gallery-count-range legend) { color: var(--muted); }
:root[data-site-theme] :is(button,a,input,select,textarea):focus-visible { outline-color: var(--site-accent); }
:root[data-site-theme] :is(input,textarea,select):focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-accent) 13%, transparent); }

/* Form palette excludes actual color swatches and hidden selection inputs. */
:root[data-site-theme] :is(.form-stack,.filter-panel,.gallery-search-fields,.preference-field,.sync-copy-field,.sync-secret-card,.gallery-settings-interval,.discovery-toolbar) :is(input:not([type=checkbox],[type=radio],[type=color]),textarea,select),
:root[data-site-theme] :is(.search-box,.gallery-search-input,.translation-search) input,
:root[data-site-theme] .sync-path-toolbar input,
:root[data-site-theme] #color-picker-value {
  color: var(--ink); background-color: var(--surface); border-color: var(--site-edge);
}
:root[data-site-theme] :is(.search-box,.gallery-search-input,.translation-search) input { background-color: transparent; }
:root[data-site-theme] :is(.form-stack label,.form-stack small,.filter-panel label,.filter-tag-input small,.filter-color-field,.preference-field,.preference-field small,.gallery-search-fields>label,.color-picker-label,.color-picker-preview-row label) { color: var(--muted); }
:root[data-site-theme] .form-stack :is(input,textarea)::placeholder { color: var(--muted); opacity: .75; }
:root[data-site-theme] #filter-panel { background: var(--site-soft-surface); border-color: var(--line); border-radius: var(--site-panel-radius); }
:root[data-site-theme] #filter-panel .metadata-filters { border-color: var(--line); }
:root[data-site-theme] :is(.filter-color-control,.gallery-search-input,.translation-search label) { background: var(--surface); border-color: var(--site-edge); }
:root[data-site-theme] .gallery-search-input:focus-within { outline-color: var(--site-accent); }
:root[data-site-theme] #moderation-keywords,
:root[data-site-theme] #translation-form textarea[readonly] { background: var(--site-soft-surface); color: var(--site-caption); border-color: var(--site-edge); }
:root[data-site-theme] :is(.source-options,.privacy-options) label>span,
:root[data-site-theme] :is(.preference-choice>span,.preference-check,.gc-inherit,.gc-style-option>span,.save-shelf-row) { background: var(--surface); color: var(--muted); border-color: var(--line); }
:root[data-site-theme] :is(.source-options,.privacy-options) input:checked+span,
:root[data-site-theme] .preference-choice>input:checked+span,
:root[data-site-theme] .preference-check:has(input:checked),
:root[data-site-theme] .gc-style-option input:checked+span,
:root[data-site-theme] :is(.gc-inherit,.save-shelf-row):has(input:checked) {
  background: var(--site-paper); border-color: var(--site-accent); color: var(--site-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--site-accent) 12%, transparent);
}
:root[data-site-theme] :is(.privacy-options strong,.preference-choice strong,.preference-choice small,.preference-enable,.preference-color strong,.preference-color p,.preference-color small,.preference-balance,.preference-balance>small,.preference-footer small,.gc-style-option strong,.gc-preview-heading,.save-shelf-name strong,.save-shelf-name small) { color: var(--site-caption); }
:root[data-site-theme] :is(.preferences-form,.preference-check,.gc-inherit) :is(input[type=checkbox],input[type=radio]) { accent-color: var(--site-accent); }
:root[data-site-theme] :is(.preference-heading>span,.moderation-card-heading>span,.translation-editor-heading>span,.sync-connection-icon) { background: var(--site-tint); color: var(--site-ink); border-color: var(--site-edge); }

/* Detail dialogs retain neutral image mats and themed, readable information. */
:root[data-site-theme] .modal { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--site-panel-radius); }
:root[data-site-theme] .modal::backdrop { background: color-mix(in srgb, var(--site-ink) 58%, transparent); }
:root[data-site-theme] .modal-close { background: var(--surface); color: var(--site-ink); }
:root[data-site-theme] .detail-art { background: #eef0ed; }
:root[data-site-theme] :is(.dialog-eyebrow,.detail-id,.detail-meta,.detail-section-label,.image-specs span,.image-specs strong,.comment-content strong,.comment-content time,.comment-content p,.comment-empty,.comment-form-footer small,.inspiration-note-label,.inspiration-note-footer,.related-heading>span,.related-subheading,.related-collection small,.related-collection strong,.related-collection em) { color: var(--site-caption); }
:root[data-site-theme] :is(.dialog-body>p,.dialog-body>small,.inspiration-note p,.guide-item h3,.guide-item p,.preference-tip) { color: var(--muted); }
:root[data-site-theme] :is(.image-specs,.guide-item,.code-block,.preference-tip,.color-picker-preview-row,.editorial-preview,.private-interaction-note,.local-paths,.moderation-metrics>div,.moderation-explainer article,.translation-live-preview,.sync-guide) { background: var(--site-soft-surface); color: var(--site-caption); border-color: var(--line); }
:root[data-site-theme] :is(.detail-tags button,.translated-tag,.detail-tags .tag-original) { color: var(--site-caption); border-color: var(--site-edge); background: var(--site-soft-surface); }
:root[data-site-theme] .detail-tags .translated-tag-labels button { color: var(--site-ink); background: transparent; }
:root[data-site-theme] .detail-tags button:hover { color: var(--site-ink); background: var(--site-tint); }
:root[data-site-theme] .comment-avatar { color: var(--site-ink); background: var(--site-tint); }
:root[data-site-theme] .comment-form textarea { color: var(--ink); border-color: var(--site-edge); background: var(--surface); }
:root[data-site-theme] :is(.toast:not(.error),.back-to-top) { background: var(--surface); color: var(--site-ink); border-color: var(--site-edge); box-shadow: var(--site-shadow); }

/* Management pages share the same stationery without recoloring statuses. */
:root[data-site-theme] :is(.platform-stats>div,.translation-metrics>div) { background: var(--site-soft-surface); border-color: var(--line); border-radius: var(--site-card-radius); }
:root[data-site-theme] :is(.platform-panel h2,.platform-panel h3,.preference-heading h2,.moderation-card-heading h2,.moderation-explainer h3,.moderation-metrics strong,.sync-library-heading h2,.sync-create-card h2,.sync-guide h3,.sync-empty h3,.translation-library-heading h2,.translation-editor-heading h2,.translation-example h3,.translation-metrics strong,.translation-live-preview strong) { color: var(--site-ink); }
:root[data-site-theme] :is(.preference-heading p,.moderation-card-heading p,.moderation-explainer p,.moderation-tip,.moderation-metrics span,.sync-connection p,.sync-connection small,.sync-key-name code,.sync-key-row dt,.sync-key-row dd,.sync-library-note,.sync-guide p,.sync-loading,.sync-empty,.translation-library-heading p,.translation-pagination,.translation-english code,.translation-english>small,.translation-editor-heading small,.translation-live-preview small,.translation-example p,.translation-example>small,.translation-example-map,.source-card dl,.source-card dt) { color: var(--muted); }
:root[data-site-theme] :is(.sync-library-note,.sync-path-summary,.sync-path-table th,.translation-table-head,.translation-search label) { background: var(--site-soft-surface); border-color: var(--line); }
:root[data-site-theme] :is(.sync-path-table tbody tr,.sync-key-row,.translation-row):hover { background: var(--site-soft-surface); }
:root[data-site-theme] :is(.sync-path-details code,.sync-path-id,.sync-path-filename,.sync-key-name strong) { color: var(--ink); }
:root[data-site-theme] .sync-key-row.is-revoked strong { color: var(--muted); }
:root[data-site-theme] #sync-active-count { color: var(--site-caption); background: var(--site-tint); }
:root[data-site-theme] #translation-editor { border-color: var(--line); background: var(--surface); border-radius: var(--site-card-radius); }
:root[data-site-theme] .translation-chinese>span { color: var(--site-ink); background: var(--site-tint); border-color: var(--site-edge); }
:root[data-site-theme] .translation-chinese i { background: var(--site-accent); }
:root[data-site-theme] :is(.moderation-save,.moderation-status,.sync-guide,.translation-row,.translation-library-heading,.translation-editor-heading,.translation-example,.translation-live-preview) { border-color: var(--line); }

/* Theme thumbnails retain their individual palettes inside the shared frame. */
:root[data-site-theme] :is(.site-theme-group-card,.site-settings-mode,.site-theme-choice) { background: var(--surface); border-color: var(--line); }
:root[data-site-theme] :is(.site-theme-group-card:hover,.site-theme-choice:hover) { border-color: var(--site-petal); box-shadow: var(--site-shadow); }
:root[data-site-theme] :is(.site-theme-overview-heading h2,.site-theme-group-title strong,.site-appearance-heading h2,.site-theme-library-heading h3,.site-settings-mode strong,.site-garden-preview-copy h3) { color: var(--site-ink); }
:root[data-site-theme] :is(.site-theme-overview-heading p,.site-theme-overview-heading>span,.site-theme-group-description,.site-theme-group-footer,.site-appearance-heading p,.site-theme-library-heading p,.site-settings-mode small,.site-garden-preview-copy p,.site-garden-preview-copy .site-garden-preview-hint,.site-theme-choice>small,.site-settings-kicker,.gallery-settings-intro p,.gallery-settings-legend small,.gallery-settings-style-description,.gallery-settings-playback p,.gallery-settings-interval small,.gallery-settings-autoplay small,.gallery-settings-updated) { color: var(--muted); }
:root[data-site-theme] :is(.site-theme-group-cover,.site-theme-group-title small,.site-theme-group-meta>span,.site-appearance-icon) { background: var(--site-soft-surface); color: var(--site-caption); border-color: var(--line); }
:root[data-site-theme] :is(.site-theme-breadcrumb,.site-theme-group-footer) { border-color: var(--line); }
:root[data-site-theme] .site-theme-breadcrumb :is(button,strong) { color: var(--site-ink); }
:root[data-site-theme] .site-settings-mode:has(input:checked) { background: var(--site-paper); border-color: var(--site-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-accent) 8%, transparent); }
:root[data-site-theme] .site-settings-mode input { accent-color: var(--site-accent); }
:root[data-site-theme] .site-settings-mode svg { color: var(--site-accent); }
:root[data-site-theme] .site-theme-choice[aria-pressed=true] { border-color: var(--site-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-accent) 13%, transparent); }
:root[data-site-theme] .site-theme-categories button { color: var(--site-caption); background: var(--surface); border-color: var(--line); }
:root[data-site-theme] .site-theme-categories button[aria-pressed=true] { color: white; background: var(--site-accent); border-color: var(--site-accent); }
:root[data-site-theme] .site-settings-savebar { background: color-mix(in srgb, var(--surface) 97%, transparent); border-color: var(--site-edge); box-shadow: var(--site-shadow); }
:root[data-site-theme] .site-settings-savebar strong { color: var(--site-ink); }
:root[data-site-theme] .site-settings-savebar p:not(.is-error) { color: var(--muted); }
:root[data-site-theme] #site-theme-count { color: var(--muted); }

/* Ten coherent treatments: palette changes also change the materials. */
:root[data-site-style=classic] {
  --site-card-radius: 16px;
  --site-panel-pattern: linear-gradient(0deg, color-mix(in srgb, var(--site-tint) 18%, transparent) 0 1px, transparent 1px 4px, color-mix(in srgb, var(--site-tint) 12%, transparent) 4px 5px, transparent 5px);
}
:root[data-site-style=classic] .page-heading { border-bottom: 2px solid var(--site-tint); }
:root[data-site-style=classic] .api-body { border-top: 3px solid var(--site-tint); }

:root[data-site-style=collage] {
  --site-card-radius: 18px;
  --site-panel-radius: 25px 10px 25px 10px;
  --site-page-pattern: radial-gradient(ellipse 1px .5px at 17px 22px, color-mix(in srgb, var(--site-ink) 5%, transparent) 90%, transparent), radial-gradient(ellipse .5px 1px at 67px 53px, color-mix(in srgb, var(--site-ink) 4%, transparent) 90%, transparent);
  --site-page-pattern-size: 91px 79px;
  --site-panel-pattern: linear-gradient(90deg, transparent calc(100% - 9px), color-mix(in srgb, var(--site-alt-tint) 30%, transparent) calc(100% - 9px) calc(100% - 8px), transparent calc(100% - 8px));
}
:root[data-site-style=collage] :is(.collection-mini,.api-card,.source-card,.preference-card) { border-radius: 20px 7px 20px 7px; }
:root[data-site-style=collage] .page-heading { border-left: 3px solid color-mix(in srgb, var(--site-petal) 68%, var(--site-paper)); }
:root[data-site-style=collage] .nav-item.active { border-radius: 12px 5px 12px 5px; }

:root[data-site-style=meadow] {
  --site-card-radius: 13px;
  --site-panel-radius: 21px;
  --site-page-pattern: radial-gradient(ellipse .7px 2px at 18px 20px, color-mix(in srgb, var(--site-ink) 4%, transparent) 90%, transparent), radial-gradient(ellipse 1.4px .5px at 22px 23px, color-mix(in srgb, var(--site-ink) 4%, transparent) 90%, transparent);
  --site-page-pattern-size: 94px 88px;
  --site-panel-pattern: linear-gradient(0deg, color-mix(in srgb, var(--site-tint) 25%, transparent) 0 2px, transparent 2px 6px, color-mix(in srgb, var(--site-tint) 15%, transparent) 6px 7px, transparent 7px);
}
:root[data-site-style=meadow] .page-heading { border-radius: 12px 28px 12px 28px; }
:root[data-site-style=meadow] :is(.collection-mini,.api-card,.platform-stats>div) { border-bottom: 3px solid var(--site-tint); }

:root[data-site-style=stripes] {
  --site-card-radius: 10px;
  --site-panel-radius: 14px;
  --site-page-pattern: linear-gradient(90deg, transparent 23px, color-mix(in srgb, var(--site-ink) 3%, transparent) 23px 24px, transparent 24px);
  --site-page-pattern-size: 48px 100%;
  --site-panel-pattern: linear-gradient(90deg, transparent 31px, color-mix(in srgb, var(--site-alt-tint) 14%, transparent) 31px 32px, transparent 32px);
  --site-panel-pattern-size: 64px 100%;
}
:root[data-site-style=stripes] .page-heading { border-top: 2px solid var(--site-petal); }
:root[data-site-style=stripes] .card-info { border-top: 2px solid var(--site-tint); }

:root[data-site-style=journal] {
  --site-card-radius: 10px;
  --site-panel-radius: 8px 18px 18px 8px;
  --site-paper-stroke: dashed;
  --site-page-pattern: linear-gradient(0deg, color-mix(in srgb, var(--site-ink) 3%, transparent) .6px, transparent .6px);
  --site-page-pattern-size: 100% 38px;
  --site-panel-pattern: linear-gradient(90deg, transparent 17px, color-mix(in srgb, var(--site-petal) 28%, transparent) 17px 18px, transparent 18px 21px, color-mix(in srgb, var(--site-petal) 15%, transparent) 21px 22px, transparent 22px);
}
:root[data-site-style=journal] .page-heading { padding-left: 34px; }
:root[data-site-style=journal] :is(.api-card,.collection-mini,.source-card) { border-style: dashed; }
:root[data-site-style=journal] .nav-item.active { box-shadow: inset 3px 0 var(--site-petal); border-radius: 4px 10px 10px 4px; }
:root[data-site-style=journal] :is(.api-body,.shelf-body) { border-top: 1px dashed var(--site-edge); }

:root[data-site-style=window] {
  --site-card-radius: 20px;
  --site-panel-radius: 28px 28px 14px 14px;
  --site-page-pattern: linear-gradient(90deg, color-mix(in srgb, var(--site-ink) 2%, transparent) 1px, transparent 1px);
  --site-page-pattern-size: 192px 100%;
  --site-panel-pattern: linear-gradient(90deg, transparent calc(100% - 164px), color-mix(in srgb, var(--site-edge) 22%, transparent) calc(100% - 164px) calc(100% - 163px), transparent calc(100% - 163px));
}
:root[data-site-style=window] .page-heading { box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--site-paper) 60%, white), inset 0 0 0 5px color-mix(in srgb, var(--site-edge) 65%, transparent), 0 3px 12px color-mix(in srgb, var(--site-ink) 3%, transparent); }
:root[data-site-style=window] :is(.api-card,.preference-card,.platform-panel) { border-radius: 25px 25px 12px 12px; }
:root[data-site-style=window] .nav-item.active { border-radius: 16px 16px 7px 7px; }

:root[data-site-style=postcard] {
  --site-card-radius: 7px;
  --site-panel-radius: 10px;
  --site-page-pattern: radial-gradient(circle at 3px 3px, color-mix(in srgb, var(--site-ink) 4%, transparent) .5px, transparent .8px);
  --site-page-pattern-size: 19px 23px;
  --site-panel-pattern: repeating-linear-gradient(135deg, color-mix(in srgb, var(--site-petal) 35%, transparent) 0 9px, transparent 9px 21px, color-mix(in srgb, var(--site-alt-tint) 62%, transparent) 21px 30px, transparent 30px 42px);
  --site-panel-pattern-size: 100% 3px;
}
:root[data-site-style=postcard] :is(.page-heading,.api-invite,.collection-context,.sync-connection,.preference-discovery,.gallery-search-form,.translation-example,.inspiration-note,.site-garden-preview-panel) { background-repeat: no-repeat; background-position: bottom; }
:root[data-site-style=postcard] .page-heading { border: 5px solid var(--surface); outline: 1px solid var(--line); }
:root[data-site-style=postcard] .api-card { padding: 5px; }
:root[data-site-style=postcard] .api-body { padding: 15px 13px; }
:root[data-site-style=postcard] .hero { border: 5px solid var(--surface); }

:root[data-site-style=lattice] {
  --site-card-radius: 12px;
  --site-panel-radius: 18px;
  --site-page-pattern: linear-gradient(45deg, transparent calc(50% - .35px), color-mix(in srgb, var(--site-ink) 3%, transparent) 50%, transparent calc(50% + .35px)), linear-gradient(-45deg, transparent calc(50% - .35px), color-mix(in srgb, var(--site-ink) 3%, transparent) 50%, transparent calc(50% + .35px));
  --site-page-pattern-size: 112px 112px;
  --site-panel-pattern: linear-gradient(90deg, color-mix(in srgb, var(--site-edge) 12%, transparent) .6px, transparent .6px), linear-gradient(0deg, color-mix(in srgb, var(--site-edge) 12%, transparent) .6px, transparent .6px);
  --site-panel-pattern-size: 76px 76px;
}
:root[data-site-style=lattice] .page-heading { border: 3px double var(--site-edge); }
:root[data-site-style=lattice] :is(.api-card,.platform-panel,.preference-card) { box-shadow: 3px 3px 0 color-mix(in srgb, var(--site-tint) 55%, transparent); }

:root[data-site-style=polka] {
  --site-card-radius: 20px;
  --site-panel-radius: 24px;
  --site-page-pattern: radial-gradient(circle, color-mix(in srgb, var(--site-petal) 12%, transparent) .8px, transparent 1.2px), radial-gradient(circle, color-mix(in srgb, var(--site-alt-tint) 26%, transparent) .8px, transparent 1.2px);
  --site-page-pattern-size: 68px 68px, 68px 68px;
  --site-panel-pattern: radial-gradient(circle, color-mix(in srgb, var(--site-petal) 12%, transparent) 1px, transparent 1.5px);
  --site-panel-pattern-size: 38px 38px;
}
:root[data-site-style=polka] body { background-position: 0 0, 34px 34px; }
:root[data-site-style=polka] .page-heading { border-bottom: 3px solid var(--site-tint); }
:root[data-site-style=polka] :is(.nav-item,.button:not(.danger),.filter-button) { border-radius: 20px; }

:root[data-site-style=scallop] {
  --site-card-radius: 22px;
  --site-panel-radius: 23px;
  --site-page-pattern: radial-gradient(circle at 50% 0, transparent 35px, color-mix(in srgb, var(--site-ink) 3%, transparent) 35.3px 35.7px, transparent 36px);
  --site-page-pattern-size: 76px 68px;
  --site-panel-pattern: radial-gradient(circle at 10px -3px, transparent 8px, color-mix(in srgb, var(--site-edge) 38%, transparent) 8.3px 9px, transparent 9.3px);
  --site-panel-pattern-size: 20px 12px;
}
:root[data-site-style=scallop] :is(.page-heading,.api-invite,.collection-context,.sync-connection,.preference-discovery,.gallery-search-form,.translation-example,.inspiration-note,.site-garden-preview-panel) { background-repeat: repeat-x; background-position: top; }
:root[data-site-style=scallop] .page-heading { padding-top: 28px; }
:root[data-site-style=scallop] .api-body { border-bottom: 4px solid var(--site-tint); }
:root[data-site-style=scallop] .nav-item.active { border-radius: 18px 18px 18px 5px; }

/* Small screens keep the same materials with lighter ornament and framing. */
@media (min-width: 901px) and (max-height: 950px) {
  :root[data-site-theme] .page-heading { padding: 17px 23px; margin-bottom: 20px; }
  :root[data-site-theme] .page-heading::after { height: 92px; }
}
@media (max-width: 900px) {
  :root[data-site-theme] .page-heading::after { right: 12px; width: 132px; opacity: .17; }
  :root[data-site-theme] .page-heading>div:first-child { max-width: 100%; }
  :root[data-site-theme] .hero-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--site-ink) 55%, #17251d) 0%, color-mix(in srgb, var(--site-ink) 78%, transparent) 42%, transparent 100%); }
}
@media (max-width: 650px) {
  :root[data-site-theme] .sidebar { box-shadow: none; }
  :root[data-site-theme] .sidebar.open { box-shadow: 0 0 35px color-mix(in srgb, var(--site-ink) 20%, transparent); }
  :root[data-site-theme] .page-heading { padding: 18px 17px; margin-bottom: 20px; border-radius: 16px; }
  :root[data-site-theme] .page-heading h1 { font-size: 24px; letter-spacing: 0; }
  :root[data-site-theme] .page-heading::after { width: 106px; height: 72px; right: 8px; opacity: .12; }
  :root[data-site-theme] .page-heading p { max-width: 33em; }
  :root[data-site-theme] .hero { border-radius: 15px; }
  :root[data-site-theme] .hero-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--site-ink) 50%, #17251d) 0%, color-mix(in srgb, var(--site-ink) 88%, transparent) 37%, color-mix(in srgb, var(--site-ink) 26%, transparent) 100%); }
  :root[data-site-style=journal] .page-heading { padding-left: 28px; }
  :root[data-site-style=scallop] .page-heading { padding-top: 25px; }
  :root[data-site-theme] .modal { border-radius: 16px; }
}
@media (forced-colors: active) {
  :root[data-site-theme] body,
  :root[data-site-theme] .page-heading { background-image: none; }
  :root[data-site-theme] .page-heading::before,
  :root[data-site-theme] .page-heading::after { display: none; }
  :root[data-site-theme] .nav-item.active { outline: 1px solid Highlight; }
}