/* Hide only page scrollbars; preserve native scrolling and panel scrollbars. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Each skin shares the same layout and controls. Purple is the default. */
.result-duration-group { white-space: nowrap; }
.result-duration-group[hidden] { display: none; }
.result-duration-divider { margin: 0 .25em; opacity: .65; }
.result-duration { font-variant-numeric: tabular-nums; }
:root {
  --canvas: #291047; --ink: #fff; --soft-ink: #ede9fe; --muted: #c4b5fd;
  --accent: #ddd6fe; --accent-ink: #4c1d95; --edge: rgb(221 214 254 / 25%);
  --wash: rgb(255 255 255 / 8%); --wash-hover: rgb(255 255 255 / 18%);
  --drawer: rgb(31 14 62 / 97%); --opaque: #291047;
  --live-label: #bbf7d0; --live-fill: #bbf7d0; --live-ink: #14532d;
  --clear-fill: var(--accent); --clear-ink: var(--accent-ink);
}
:root[data-theme="pearl-white"] {
  --canvas: #faf6ef; --sky: linear-gradient(#faf6ef, #f4efe7 55%, #eae4da);
  --ink: #0d0c0b; --soft-ink: #2c2c2b; --muted: #57534d;
  --accent: #0d0c0b; --accent-ink: #faf6ef;
  --edge: #a5a29e; --wash: rgb(44 44 43 / 4%); --wash-hover: rgb(44 44 43 / 8%);
  --card: #fcf9f3; --current: #e9dfce; --glass: #e6dac5;
  --drawer: #f4efe7; --panel: #f4efe7; --opaque: #f4efe7;
  --field: #f1ece4; --field-hover: #e8e1d7; --shadow: rgb(35 29 20 / 11%);
  --live-label: #2c2c2b; --live-fill: #0d0c0b; --live-ink: #faf6ef;
  --clear-fill: #0d0c0b; --clear-ink: #faf6ef;
  --champagne: linear-gradient(125deg, #bfa47c, #e4d3b6 35%, #d0b88e 60%, #e8d9c0);
  --obsidian-gloss: linear-gradient(120deg, #11100f 0%, #47433f 18%, #6b655e 38%, #211f1c 54%, #514c45 76%, #11100f 100%);
  --pearl-finish: repeating-linear-gradient(118deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 18% 0%, rgb(255 255 255 / 58%), transparent 58%), radial-gradient(ellipse at 90% 20%, rgb(218 209 235 / 22%), transparent 62%), radial-gradient(ellipse at 35% 100%, rgb(210 231 224 / 18%), transparent 65%);
}
:root[data-theme="sage"] {
  --canvas: #e8e6d8; --sky: radial-gradient(ellipse at 10% 90%, rgb(135 153 93 / 12%), transparent 62%), linear-gradient(#f4f1e6, #e8e6d8 52%, #d9deca);
  --ink: #283225; --soft-ink: #424c36; --muted: #515b43;
  --accent: #435238; --accent-ink: #f6f3e6;
  --edge: #a3ad8b; --wash: rgb(68 82 48 / 5%); --wash-hover: rgb(68 82 48 / 10%);
  --card: #f3f0e4; --current: #303b2c; --glass: #252e22;
  --drawer: #ebe9dc; --panel: #f0eee0; --opaque: #f0eee0;
  --field: #f8f5e9; --field-hover: #e7ebd7; --shadow: rgb(36 44 28 / 15%);
  --live-label: #435238; --live-fill: #d6e0a2; --live-ink: #252d20;
  --clear-fill: #d6e0a2; --clear-ink: #252d20;
  --olive-accent: #d6e0a2; --olive-accent-ink: #252d20; --olive-accent-edge: #89965d;
  --olive-ceramic: repeating-linear-gradient(115deg, rgb(255 255 234 / 8%) 0 1px, transparent 1px 4px), linear-gradient(125deg, #adb879, #dfe7b3 34%, #c8d49b 65%, #e8edc9);
  --olive-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .55 0 0 0 0 .60 0 0 0 0 .45 0 0 0 .10 0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  --olive-paper: var(--olive-grain), repeating-linear-gradient(0deg, rgb(68 82 48 / 1%) 0 1px, transparent 1px 4px);
  --olive-linen: var(--olive-grain), repeating-linear-gradient(0deg, rgb(244 243 216 / 2%) 0 1px, transparent 1px 4px);
  --olive-depth: radial-gradient(ellipse at 12% 0%, rgb(181 197 147 / 14%), transparent 68%), linear-gradient(135deg, #303b2c, #252e22 58%, #1f281d);
}
:root[data-theme="midnight"] {
  --canvas: #0d1018; --sky: radial-gradient(ellipse at 75% 78%, rgb(89 103 148 / 7%), transparent 60%), linear-gradient(#070a11, #111723 38%, #1b2435 70%, #101723);
  --ink: #d7deea; --soft-ink: #bfc9db; --muted: #a5b2ca; --accent: #abb5d9; --accent-ink: #101726;
  --edge: rgb(145 161 194 / 27%); --wash: rgb(145 161 194 / 6%); --wash-hover: rgb(145 161 194 / 10%);
  --card: rgb(10 16 27 / 74%); --current: #222b40; --glass: rgb(14 20 32 / 92%);
  --drawer: #111824; --panel: #182131; --opaque: #182131;
  --field: #1d2738; --field-hover: #253146; --shadow: rgb(2 5 11 / 72%);
  --live-label: #afbddc; --live-fill: #8d9fc7; --live-ink: #101726;
  --clear-fill: #abb5d9; --clear-ink: #101726;
}
:root[data-theme="blue"] {
  --canvas: #080f26; --sky: radial-gradient(ellipse at 88% 44%, rgb(92 65 215 / 8%), transparent 58%), radial-gradient(ellipse at 8% 85%, rgb(49 92 195 / 6%), transparent 62%), linear-gradient(#050a1b, #101c3b 35%, #172a4b 68%, #0a142c);
  --ink: #f3f4ff; --soft-ink: #dee3ff; --muted: #b8c3e7; --accent: #a99bff; --accent-ink: #0b1029;
  --edge: rgb(143 132 255 / 34%); --wash: rgb(143 132 255 / 7%); --wash-hover: rgb(143 132 255 / 12%);
  --card: rgb(8 16 39 / 65%); --current: rgb(59 52 119 / 40%); --glass: rgb(8 16 38 / 88%);
  --drawer: #0a132d; --panel: #111c3b; --opaque: #111c3b;
  --field: #182545; --field-hover: #223257; --shadow: rgb(2 5 18 / 72%);
  --live-label: #b9b0ff; --live-fill: #8b7aff; --live-ink: #080d22;
  --clear-fill: #a99bff; --clear-ink: #0b1029;
}
:root[data-theme="green"] {
  --canvas: #0a221c; --sky: radial-gradient(ellipse at 18% 78%, rgb(197 160 89 / 5%), transparent 58%), linear-gradient(#061914, #0a221c 35%, #113329 70%, #081e19);
  --ink: #f5f2eb; --soft-ink: #e6ded0; --muted: #c4bba9; --accent: #c5a059; --accent-ink: #0a221c;
  --edge: rgb(197 160 89 / 30%); --wash: rgb(197 160 89 / 5%); --wash-hover: rgb(197 160 89 / 8%);
  --card: rgb(6 24 19 / 72%); --current: #15352b; --glass: rgb(10 34 28 / 92%);
  --drawer: rgb(8 28 23 / 98%); --panel: #102a23; --opaque: #102a23;
  --field: #133127; --field-hover: #183c30; --shadow: rgb(2 12 9 / 70%);
  --live-label: #d4b777; --live-fill: #c5a059; --live-ink: #0a221c;
  --clear-fill: #c5a059; --clear-ink: #0a221c;
}
:root[data-theme="pearl"] {
  --canvas: #31485c; --sky: linear-gradient(#25374a, #3a5369 45%, #445f75 70%, #364e63);
  --ink: #f4f9fd; --soft-ink: #e8f1f9; --muted: #dce9f4; --steel: #b2cde4; --accent: #8fc5ff; --accent-ink: #10243a;
  --edge: rgb(183 213 247 / 45%); --wash: rgb(173 206 237 / 5%); --wash-hover: rgb(173 206 237 / 8%);
  --card: rgb(20 39 56 / 90%); --current: #304b62; --glass: rgb(24 43 61 / 96%);
  --drawer: #243d53; --panel: #294359; --opaque: #294359;
  --field: #2b465e; --field-hover: #354f68; --shadow: rgb(15 23 42 / 32%);
  --live-label: #d1e9ff; --live-fill: #2563eb; --live-ink: #ffffff;
  --clear-fill: #2563eb; --clear-ink: #ffffff;
}
:root[data-theme="gold"] {
  --canvas: #0b0b0c; --sky: radial-gradient(ellipse at 85% 42%, rgb(88 24 69 / 12%), transparent 60%), linear-gradient(#050506, #0b0b0c 40%, #151215 70%, #0b0b0c);
  --ink: #f5f5f0; --soft-ink: #e7e0d3; --muted: #c4b9a6; --accent: #cba358; --accent-ink: #0b0b0c;
  --velvet: #581845; --velvet-ink: #f5f5f0;
  --metal: linear-gradient(120deg, #b58a38 0%, #e1c273 18%, #fff0b5 38%, #cba358 54%, #f1d98c 76%, #b58a38 100%);
  --edge: rgb(203 163 88 / 30%); --wash: rgb(203 163 88 / 6%); --wash-hover: rgb(203 163 88 / 11%);
  --card: #101011; --current: #24151f; --glass: rgb(14 14 15 / 92%);
  --drawer: #101011; --panel: #171416; --opaque: #171416;
  --field: #171617; --field-hover: #1d1720; --shadow: rgb(0 0 0 / 75%);
  --live-label: #d9ba7a; --live-fill: #cba358; --live-ink: #0b0b0c;
  --clear-fill: #cba358; --clear-ink: #0b0b0c;
}
:root[data-theme="erebus"] {
  --canvas: #000000; --sky: #000000;
  --ink: #bdbdbd; --soft-ink: #aaaaaa; --muted: #999999; --accent: #909090; --accent-ink: #000000;
  --edge: #555555; --wash: #000000; --wash-hover: #191919;
  --card: #000000; --current: #0a0a0a; --glass: #000000;
  --drawer: #000000; --panel: #000000; --opaque: #000000;
  --field: #000000; --field-hover: #080808; --shadow: transparent;
  --live-label: #aaaaaa; --live-fill: #151515; --live-ink: #bdbdbd;
  --clear-fill: #191919; --clear-ink: #bdbdbd;
}
:root[data-theme="yellow"] {
  --canvas: #111417; --sky: radial-gradient(ellipse at 15% 82%, rgb(227 197 55 / 6%), transparent 60%), linear-gradient(#0b0d10, #1b1e20 38%, #30302a 72%, #141719);
  --ink: #f3f0e5; --soft-ink: #dfdac8; --muted: #c2baa2; --accent: #e3c537; --accent-ink: #10110d;
  --edge: rgb(227 197 55 / 28%); --wash: rgb(227 197 55 / 5%); --wash-hover: rgb(227 197 55 / 10%);
  --card: rgb(15 18 21 / 82%); --current: #34321f; --glass: rgb(17 21 24 / 94%);
  --drawer: #14191c; --panel: #202426; --opaque: #202426;
  --field: #262a2b; --field-hover: #303430; --shadow: rgb(3 5 7 / 70%);
  --live-label: #e3c537; --live-fill: #e3c537; --live-ink: #10110d;
  --clear-fill: #e3c537; --clear-ink: #10110d;
}
:root[data-theme="cola"] {
  --canvas: #260910; --sky: radial-gradient(ellipse at 82% 78%, rgb(194 53 80 / 8%), transparent 60%), linear-gradient(#18060c, #38101b 38%, #521827 72%, #2b0b14);
  --ink: #fff6f7; --soft-ink: #f3dfe4; --muted: #d5b4be; --accent: #ffffff; --accent-ink: #681724;
  --edge: rgb(245 208 218 / 28%); --wash: rgb(245 208 218 / 5%); --wash-hover: rgb(245 208 218 / 10%);
  --card: rgb(30 7 14 / 78%); --current: #562030; --glass: rgb(35 9 17 / 94%);
  --drawer: #290d16; --panel: #35111e; --opaque: #35111e;
  --field: #401521; --field-hover: #4b1a29; --shadow: rgb(14 2 7 / 65%);
  --live-label: #ffffff; --live-fill: #ffffff; --live-ink: #681724;
  --clear-fill: #ffffff; --clear-ink: #681724;
}
:root[data-theme="autumn"] {
  --canvas: #24151d; --sky: radial-gradient(ellipse at 85% 80%, rgb(151 79 34 / 15%), transparent 65%), linear-gradient(#170f1c, #35202b 35%, #3b2325 70%, #291b17);
  --ink: #fff2df; --soft-ink: #efd8c4; --muted: #d5bba6; --accent: #efbc7c; --accent-ink: #352018;
  --edge: rgb(239 188 124 / 28%); --wash: rgb(239 188 124 / 8%); --wash-hover: rgb(239 188 124 / 17%);
  --card: rgb(31 19 26 / 65%); --current: rgb(94 53 35 / 50%); --glass: rgb(37 22 28 / 86%);
  --drawer: rgb(36 22 29 / 97%); --panel: rgb(43 27 32 / 98%); --opaque: #2b1b20;
  --field: rgb(239 188 124 / 12%); --field-hover: rgb(239 188 124 / 18%); --shadow: rgb(14 6 10 / 60%);
  --live-label: #f2b77f; --live-fill: #efad70; --live-ink: #3b2015;
  --clear-fill: #efbc7c; --clear-ink: #352018;
}
html[data-theme]:not([data-theme="purple"]) body { background: var(--canvas); color: var(--ink); }
html[data-theme]:not([data-theme="purple"]) body::before { background: var(--sky); }
html[data-theme]:not([data-theme="purple"]) p,
html[data-theme]:not([data-theme="purple"]) .saved-label,
html[data-theme]:not([data-theme="purple"]) .empty-result { color: var(--soft-ink); }
html[data-theme]:not([data-theme="purple"]) #search-input { background: var(--field); color: var(--ink); caret-color: var(--ink); border-color: var(--edge); box-shadow: 0 8px 24px var(--shadow), inset 0 1px 0 rgb(255 255 255 / 40%); }
html[data-theme]:not([data-theme="purple"]) #search-input::placeholder { color: var(--muted); }
html[data-theme]:not([data-theme="purple"]) #search-input:focus { background: var(--field-hover); border-color: var(--accent); outline-color: var(--edge); }
html[data-theme]:not([data-theme="purple"]) .search-clear { color: var(--clear-ink); }
html[data-theme]:not([data-theme="purple"]) .search-clear svg { background: var(--clear-fill); color: var(--clear-ink); }
html[data-theme]:not([data-theme="purple"]) :is(.search-clear, #search-form > button):focus-visible { outline-color: var(--accent); }
html[data-theme]:not([data-theme="purple"]) :is(.search-bubble, .remove-bubble) { color: var(--ink); }
html[data-theme]:not([data-theme="purple"]) .saved-bubble { background: var(--wash); border-color: var(--edge); }
html[data-theme]:not([data-theme="purple"]) .saved-bubble.is-selected { background: var(--accent); border-color: var(--accent); }
html[data-theme]:not([data-theme="purple"]) .saved-bubble.is-selected :is(.search-bubble, .remove-bubble) { color: var(--accent-ink); }
html[data-theme]:not([data-theme="purple"]) .result-summary { background: var(--card); }
html[data-theme]:not([data-theme="purple"]) :is(.results-filter, .clear-results) { background: var(--wash); border-color: var(--edge); color: var(--soft-ink); }
html[data-theme]:not([data-theme="purple"]) :is(.result-count, .results-filter button) { color: var(--soft-ink); }
html[data-theme]:not([data-theme="purple"]) .results-filter button[data-filter="all"][aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
html[data-theme]:not([data-theme="purple"]) .results-filter button[data-filter="live"][aria-pressed="true"] { background: var(--live-fill); color: var(--live-ink); }
html[data-theme]:not([data-theme="purple"]) .result { background: var(--card); border-color: var(--edge); }
html[data-theme]:not([data-theme="purple"]) .result.is-current { background: var(--current); border-color: var(--accent); box-shadow: 0 0 0 1px var(--edge), 0 6px 24px var(--shadow); }
html[data-theme]:not([data-theme="purple"]) :is(.result-date, .result-space-id, .playback-label, .library-note, .library-empty, .library-status, .library-entry-info span, .player-title span, .player-status, .player-time, .player-settings .settings-hint) { color: var(--muted); }
html[data-theme]:not([data-theme="purple"]) .playback-action.is-live .playback-label { color: var(--live-label); }
html[data-theme]:not([data-theme="purple"]) .listen-button.is-live { background: var(--live-fill); border-color: var(--live-fill); color: var(--live-ink); }
html[data-theme]:not([data-theme="purple"]) .listen-button:not(.is-live) { color: var(--ink); background: var(--wash-hover); border-color: var(--edge); }
html[data-theme]:not([data-theme="purple"]) :is(.library-launcher, .space-save, .player .space-save) { color: var(--accent); }
html[data-theme]:not([data-theme="purple"]) .player { background: var(--glass); border-color: var(--edge); color: var(--ink); box-shadow: 0 28px 38px -10px var(--shadow), 0 14px 68px 12px var(--shadow), inset 0 1px 0 rgb(255 255 255 / 45%); }
html[data-theme]:not([data-theme="purple"]) .player button { color: var(--ink); background: var(--wash-hover); }
html[data-theme]:not([data-theme="purple"]) .player[data-playback-mode="replay"] :is(.player-play-button, .player-skip-button) { background: var(--wash-hover); color: var(--ink); }
html[data-theme]:not([data-theme="purple"]) .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button) { background: var(--live-fill); color: var(--live-ink); }
html[data-theme]:not([data-theme="purple"]) .player :is(.player-settings-toggle, .player-close, .player-mode-switch button) { background: transparent; }
html[data-theme]:not([data-theme="purple"]) .player-settings-toggle::before { background: var(--edge); }
html[data-theme]:not([data-theme="purple"]) .player .player-close { color: #422006; }
html[data-theme]:not([data-theme="purple"]) .player-settings { background: var(--panel); border-color: var(--edge); box-shadow: 0 14px 48px var(--shadow); }
html[data-theme]:not([data-theme="purple"]) .player-settings button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html[data-theme]:not([data-theme="purple"]) .player-settings .settings-choices button { border-color: var(--edge); }
html[data-theme]:not([data-theme="purple"]) .player .settings-reset { color: var(--soft-ink); }
html[data-theme]:not([data-theme="purple"]) .player-mode-switch { background: var(--wash); border-color: var(--edge); }
html[data-theme]:not([data-theme="purple"]) .player-mode-switch::before { background: var(--accent); }
html[data-theme]:not([data-theme="purple"]) .player .player-mode-switch button { color: var(--soft-ink); }
html[data-theme]:not([data-theme="purple"]) .player .player-mode-switch button[aria-pressed="true"] { color: var(--accent-ink); }
html[data-theme]:not([data-theme="purple"]) .player[data-playback-mode="live"] .player-mode-switch::before { background: var(--live-fill); }
html[data-theme]:not([data-theme="purple"]) .player[data-playback-mode="live"] .player-mode-switch button[aria-pressed="true"] { color: var(--live-ink); }
html[data-theme]:not([data-theme="purple"]) .player-progress { background: repeating-linear-gradient(to right, transparent 0 calc(10% - 1px), var(--opaque) calc(10% - 1px) 10%), linear-gradient(to right, var(--accent) 0 var(--progress), var(--edge) var(--progress) 100%); }
html[data-theme]:not([data-theme="purple"]) .player-progress::-webkit-slider-thumb { background: var(--accent); }
html[data-theme]:not([data-theme="purple"]) .player-progress::-moz-range-thumb { background: var(--accent); }
html[data-theme]:not([data-theme="purple"]) :is(.player button, .library-launcher, .space-save, .space-library button):focus-visible { outline-color: var(--accent); }
html[data-theme]:not([data-theme="purple"]) .space-library { background: var(--drawer); color: var(--ink); border-color: var(--edge); box-shadow: 12px 0 45px var(--shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
html[data-theme]:not([data-theme="purple"]) .library-entry { background: var(--wash); border-color: var(--edge); }
html[data-theme]:not([data-theme="purple"]) :is(.library-entry-controls button, .library-clear) { color: var(--ink); background: var(--wash); border-color: var(--edge); }
/* Ice: Nordic twilight slate and a visible icy sky. The legacy pearl ID preserves saved choices. */
html[data-theme="pearl"] h1 { color: #e4f0fb; text-shadow: none; }
html[data-theme="pearl"] .stars { opacity: .85; }
html[data-theme="pearl"] .star { background: #d5e9ff; box-shadow: 0 0 7px rgb(173 216 255 / 30%); }
html[data-theme="pearl"] .result { box-shadow: 0 5px 16px rgb(15 23 42 / 12%); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="pearl"]:not([data-theme="purple"]) .player { box-shadow: 0 20px 48px rgb(15 23 42 / 35%), 0 6px 16px rgb(15 23 42 / 18%), inset 0 1px 0 rgb(213 233 255 / 18%); }
html[data-theme="pearl"] .library-close { color: var(--accent); }
html[data-theme="pearl"]:not([data-theme="purple"]) .player .player-close { color: var(--accent-ink); }
html[data-theme="pearl"] .player-close span { background: var(--accent); }
html[data-theme="pearl"]:not([data-theme="purple"]) .listen-button.is-live { border-color: var(--accent); }
html[data-theme="pearl"] .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button),
html[data-theme="pearl"] .results-filter button[data-filter="live"][aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--accent); }
html[data-theme="pearl"] :is(.space-save[aria-pressed="true"], .library-launcher.has-saved) svg path { fill: var(--accent); stroke: var(--accent); }
/* Keep the page sharp when choosing skins; frosting belongs to playback settings. */
html[data-theme="pearl"] .space-library::backdrop { background: rgb(15 23 42 / 24%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="pearl"] .settings-backdrop { background: rgb(15 23 42 / 36%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-theme="pearl"] .ufo-icon { filter: drop-shadow(0 3px 4px rgb(15 23 42 / 16%)); }
html[data-theme="pearl"] .ufo-dome { fill: #7ba7cc; fill-opacity: 1; stroke: #c8e6ff; }
html[data-theme="pearl"] .ufo-highlight { stroke: #ffffff; }
html[data-theme="pearl"] .ufo-hull { fill: #347ee8; stroke: #cae8ff; }
html[data-theme="pearl"] .ufo-rim { stroke: #143d69; }
html[data-theme="pearl"] .ufo-light { fill: #e0f2fe; }
html[data-theme="pearl"] .ufo-beam { fill: #8fc5ff; }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="pearl"] .listen-button.is-live:hover,
  html[data-theme="pearl"] .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button):hover { background: var(--live-fill); color: var(--live-ink); }
  html[data-theme="pearl"] .player-close:hover span { background: #b3d9ff; }
}
/* Gold: obsidian and satin champagne, with royal velvet for key interactions. */
html[data-theme="gold"] h1 { color: #cba358; text-shadow: 0 2px 22px rgb(203 163 88 / 8%); }
html[data-theme="gold"] .star { background: #e3cfaa; box-shadow: 0 0 6px rgb(203 163 88 / 20%); }
html[data-theme="gold"] .library-launcher { filter: drop-shadow(0 0 6px rgb(203 163 88 / 15%)); }
html[data-theme="gold"] .ufo-icon { filter: drop-shadow(0 3px 7px rgb(203 163 88 / 18%)); }
html[data-theme="gold"] .ufo-dome { fill: #581845; fill-opacity: 1; stroke: #cba358; }
html[data-theme="gold"] .ufo-highlight { stroke: #f5f5f0; }
html[data-theme="gold"] .ufo-hull { fill: #cba358; stroke: #ead5ac; }
html[data-theme="gold"] .ufo-rim { stroke: #6d542f; }
html[data-theme="gold"] .ufo-light { fill: #f5f5f0; }
html[data-theme="gold"] .ufo-beam { fill: #cba358; }
html[data-theme="gold"] .library-close { color: var(--accent); }
html[data-theme="gold"]:not([data-theme="purple"]) .player .player-close { color: var(--accent-ink); }
html[data-theme="gold"] .player-close span { background: var(--accent); }
html[data-theme="gold"] :is(.space-save[aria-pressed="true"], .library-launcher.has-saved) svg path { fill: var(--accent); stroke: var(--accent); }
html[data-theme="gold"] .space-library::backdrop { background: rgb(3 3 4 / 30%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="gold"] .settings-backdrop { background: rgb(3 3 4 / 48%); }
html[data-theme="gold"]:not([data-theme="purple"]) .saved-bubble.is-selected { background: var(--velvet); border-color: var(--accent); }
html[data-theme="gold"]:not([data-theme="purple"]) .saved-bubble.is-selected :is(.search-bubble, .remove-bubble) { color: var(--velvet-ink); }
html[data-theme="gold"]:not([data-theme="purple"]) .results-filter button[data-filter="all"][aria-pressed="true"],
html[data-theme="gold"] .space-library .theme-choice[aria-pressed="true"] { background: var(--velvet); color: var(--velvet-ink); box-shadow: inset 0 0 0 1px var(--accent); }
html[data-theme="gold"]:not([data-theme="purple"]) .player-settings button[aria-pressed="true"] { background: var(--velvet); color: var(--velvet-ink); border-color: var(--accent); }
html[data-theme="gold"]:not([data-theme="purple"]) .player[data-playback-mode="replay"] .player-mode-switch::before { background: var(--velvet); box-shadow: inset 0 0 0 1px var(--accent); }
html[data-theme="gold"]:not([data-theme="purple"]) .player[data-playback-mode="replay"] .player-mode-switch button[aria-pressed="true"] { color: var(--velvet-ink); }
html[data-theme="gold"]:not([data-theme="purple"]) .listen-button:not(.is-live),
html[data-theme="gold"]:not([data-theme="purple"]) .player[data-playback-mode="replay"] .player-play-button { background: var(--velvet); color: var(--velvet-ink); box-shadow: inset 0 0 0 1px var(--accent); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="gold"] .listen-button.is-live:hover,
  html[data-theme="gold"] .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button):hover { background: var(--live-fill); color: var(--live-ink); }
  html[data-theme="gold"]:not([data-theme="purple"]) .listen-button:not(.is-live):hover,
  html[data-theme="gold"]:not([data-theme="purple"]) .player[data-playback-mode="replay"] .player-play-button:hover { background: #6b2457; color: var(--velvet-ink); }
  html[data-theme="gold"] .player-close:hover span { background: #ddbb7b; }
}
/* Only the history list scrolls inside this drawer; Appearance stays at its foot. */
.space-library { overflow: hidden; }
.space-library[open] { display: flex; flex-direction: column; }
.space-library > header, .space-library > .library-note, .space-library > footer { flex-shrink: 0; }
.space-library > .library-note { margin: 6px 0 14px; }
/* Mirror the reserved scrollbar lane so short and long lists stay centred.
   Equal padding also protects cards from overlay scrollbars on touch browsers. */
.library-items { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline: 10px; scrollbar-gutter: stable both-edges; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.space-library footer { margin-top: 8px; position: relative; flex: 0 0 56px; min-height: 56px; z-index: 1; background: transparent; border: 0; box-shadow: none; }
.library-history-actions { padding: 14px 0 6px; }
.space-library .library-entry-controls .library-remove { margin-left: auto; align-self: end; flex: 0 0 40px; width: 40px; min-height: 40px; padding: 8px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted, #bdb0d7); border-radius: 10px; }
.library-remove svg { display: block; pointer-events: none; }
.space-library .library-entry-controls .library-remove:hover { color: var(--ink, #ede9fe); background: var(--wash-hover, rgb(255 255 255 / 12%)); }
.library-remove:focus-visible { outline: 2px solid var(--accent, #c4b5fd); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .library-entry .library-remove { opacity: 0; pointer-events: none; }
  .library-entry:hover .library-remove, .library-entry:focus-within .library-remove { opacity: 1; pointer-events: auto; }
}
.library-history-actions .library-clear { min-height: 40px; }
.library-history-actions > .library-status { margin: 8px 0 0; }
.library-history-actions > .library-status:empty { display: none; }
.library-appearance {
  --themes-texture: repeating-linear-gradient(115deg, var(--wash) 0 1px, transparent 1px 4px), radial-gradient(ellipse at 15% 0%, var(--wash-hover), transparent 70%);
  position: absolute; inset: auto 0 0; border-top: 0; padding: 4px 10px 8px; border-radius: 14px;
  background: var(--themes-texture), var(--panel, var(--drawer));
  box-shadow: 0 6px 18px var(--shadow, rgb(8 2 20 / 18%));
  transition: box-shadow .18s ease;
}
html[data-theme="sage"] .library-appearance { --themes-texture: var(--olive-paper); }
html[data-theme="pearl-white"] .library-appearance { --themes-texture: var(--pearl-finish); }
/* Shadow follows the rounded card, never a full-width rectangular backing. */
.library-appearance:has(.appearance-picker[open]) { box-shadow: 0 -12px 28px -5px rgb(0 0 0 / 65%), 0 6px 18px var(--shadow, rgb(8 2 20 / 18%)); }
/* The footer reserves only the collapsed toggle height. Its card overlays
   the list upwards without changing the list viewport or scroll position.
   Keep the toggle at the foot while choices scroll on short screens. Native
   details/summary keeps Enter, Space and collapsed-content accessibility. */
.appearance-picker { position: relative; }
.appearance-picker[open] { padding-bottom: 44px; }
.appearance-picker[open] > summary { position: absolute; inset: auto 0 0; }
.appearance-picker summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: .8rem; color: var(--soft-ink); -webkit-tap-highlight-color: transparent; }
.appearance-picker summary::-webkit-details-marker { display: none; }
.appearance-picker summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.appearance-current { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .75rem; }
.appearance-chevron { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; margin-left: 3px; border-radius: 50%; border: 1px solid var(--edge); background: var(--wash); color: var(--soft-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%); }
.appearance-chevron svg { display: block; width: 18px; height: 18px; transition: transform .2s ease; }
.appearance-picker[open] .appearance-chevron svg { transform: rotate(180deg); }
.theme-dot { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgb(150 137 169 / 50%); box-shadow: inset 0 1px 2px rgb(255 255 255 / 35%); }
.theme-dot[data-theme="purple"] { background: linear-gradient(135deg, #321069, #985be3); }
.theme-dot[data-theme="midnight"] { background: linear-gradient(135deg, #070a11 15%, #29374f 60%, #abb5d9); border-color: #73809d; }
.theme-dot[data-theme="blue"] { background: linear-gradient(135deg, #080f26 15%, #273f8f 50%, #8b7aff); border-color: #8b7aff; }
.theme-dot[data-theme="green"] { background: linear-gradient(135deg, #0a221c 0% 55%, #c5a059 55% 100%); border-color: #9b8354; }
.theme-dot[data-theme="pearl"] { background: linear-gradient(135deg, #293d50 0% 55%, #8fc5ff 55% 100%); border-color: #94a3b8; }
.theme-dot[data-theme="gold"] { background: linear-gradient(120deg, #19130b 0%, #b58a38 20%, #fff0b5 42%, #cba358 60%, #f1d98c 78%, #6d4c1e 100%); border-color: #d6b568; }
.theme-dot[data-theme="yellow"] { background: linear-gradient(135deg, #111417 0% 45%, #e3c537 45% 80%, #10110d 80% 100%); border-color: #a28e30; }
.theme-dot[data-theme="cola"] { background: linear-gradient(135deg, #320c18 0% 40%, #a02c47 40% 70%, #fff 70% 100%); border-color: #be8695; }
.theme-dot[data-theme="autumn"] { background: linear-gradient(135deg, #482837 0%, #bd6a3b 55%, #efbc7c 100%); border-color: #d7a56f; }
.theme-dot:is([data-theme="yellow"], [data-theme="cola"]) { background-origin: border-box; background-clip: border-box; background-size: 100% 100%; box-shadow: none; }
.appearance-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 0 2px; }
.appearance-choices { max-height: min(320px, max(88px, calc(100vh - 220px))); max-height: min(320px, max(88px, calc(100dvh - 220px))); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.space-library .theme-choice { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 44px; padding: 4px 6px; border: 1px solid var(--edge); border-radius: 12px; background: var(--wash); color: var(--soft-ink); font-size: .75rem; font-weight: 650; }
.space-library .theme-choice[aria-pressed="true"] { background: var(--wash-hover); border-color: var(--accent); color: var(--ink); }
.theme-choice > span:not(.theme-dot) { min-width: 0; line-height: 1.2; }
.appearance-notice { margin: 8px 0 0; font-size: .7rem; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme]:not([data-theme="purple"]) #search-input:hover { background: var(--field-hover); }
  html[data-theme]:not([data-theme="purple"]) .result:hover { background: var(--current); border-color: var(--accent); }
  html[data-theme]:not([data-theme="purple"]) :is(.clear-results, .library-entry-controls button, .library-clear):hover { background: var(--wash-hover); }
  .space-library .theme-choice:hover { background: var(--wash-hover); }
  .appearance-picker summary:hover .appearance-chevron { background: var(--wash-hover); border-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .appearance-chevron svg, .library-appearance { transition: none; } }
@media (forced-colors: active) { .library-appearance { box-shadow: none; } }
@media (prefers-reduced-transparency: reduce) {
  html[data-theme]:not([data-theme="purple"]) :is(.result, .player, .space-library, .player-settings) { background: var(--opaque); backdrop-filter: none; -webkit-backdrop-filter: none; }
  html[data-theme]:not([data-theme="purple"]) #search-input { background: var(--opaque); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme]:not([data-theme="purple"]) :is(.player, .space-library, .player-settings) { background: var(--opaque); }
}
@media (max-height: 430px) and (orientation: landscape) {
  /* Short landscape screens scroll the whole pane; its outer padding provides
     clearance, so do not reserve a second scrollbar inside the list. */
  .space-library { overflow-y: auto; scrollbar-gutter: stable both-edges; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
  .space-library footer { position: sticky; bottom: 0; }
  .library-items { flex: 0 0 auto; overflow: visible; padding-inline: 0; scrollbar-gutter: auto; }
}
@media (max-width: 360px) {
  .appearance-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Midnight: quiet graphite, moonstone lavender and dusky-blue Live controls. */
html[data-theme="midnight"] h1 { color: #c3cadb; text-shadow: none; }
html[data-theme="midnight"] .star { background: #a6b4ce; box-shadow: 0 0 5px rgb(166 180 206 / 12%); opacity: .55; animation: none; }
html[data-theme="midnight"]:not([data-theme="purple"]) .player { box-shadow: 0 28px 42px -10px var(--shadow), 0 12px 48px var(--shadow), inset 0 1px 0 rgb(171 181 217 / 18%); }
html[data-theme="midnight"] .ufo-icon { filter: drop-shadow(0 3px 5px rgb(2 5 11 / 40%)); }
html[data-theme="midnight"] .ufo-dome { fill: #3b4b68; fill-opacity: 1; stroke: #abb5d9; }
html[data-theme="midnight"] .ufo-highlight { stroke: #c5d1e4; }
html[data-theme="midnight"] .ufo-hull { fill: #7f8dad; stroke: #b5bddb; }
html[data-theme="midnight"] .ufo-rim { stroke: #26334b; }
html[data-theme="midnight"] .ufo-light { fill: #c5d1e4; }
html[data-theme="midnight"] .ufo-beam { fill: #8d9fc7; }
html[data-theme="midnight"] .library-close { color: var(--accent); }
html[data-theme="midnight"]:not([data-theme="purple"]) .player .player-close { color: var(--accent-ink); }
html[data-theme="midnight"] .player-close span { background: var(--accent); }
html[data-theme="midnight"] :is(.space-save[aria-pressed="true"], .library-launcher.has-saved) svg path { fill: var(--accent); stroke: var(--accent); }
html[data-theme="midnight"] .space-library::backdrop { background: rgb(2 5 11 / 28%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="midnight"] .settings-backdrop { background: rgb(2 5 11 / 50%); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="midnight"] .listen-button.is-live:hover,
  html[data-theme="midnight"] .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button):hover { background: var(--live-fill); color: var(--live-ink); }
  html[data-theme="midnight"] .player-close:hover span { background: #bec8e5; }
}
/* Blue: deep navy, with electric purple-blue accents instead of pastel blue/green. */
html[data-theme="blue"] h1 { color: #dadfff; text-shadow: 0 2px 26px rgb(139 122 255 / 17%); }
html[data-theme="blue"] .star { background: #b9c5ff; box-shadow: 0 0 7px rgb(139 122 255 / 35%); }
html[data-theme="blue"]:not([data-theme="purple"]) .player {
  background: radial-gradient(ellipse at 85% 0%, rgb(139 122 255 / 10%), transparent 68%), var(--glass);
}
html[data-theme="blue"] .ufo-icon { filter: drop-shadow(0 3px 7px rgb(139 122 255 / 25%)); }
html[data-theme="blue"] .ufo-dome { fill: #304c86; fill-opacity: 1; stroke: #b8aaff; }
html[data-theme="blue"] .ufo-highlight { stroke: #f3f4ff; }
html[data-theme="blue"] .ufo-hull { fill: #7e6be8; stroke: #b8aaff; }
html[data-theme="blue"] .ufo-rim { stroke: #283369; }
html[data-theme="blue"] .ufo-light { fill: #d6d0ff; }
html[data-theme="blue"] .ufo-beam { fill: #9b8cff; }
html[data-theme="blue"] .library-close { color: var(--accent); }
html[data-theme="blue"]:not([data-theme="purple"]) .player .player-close { color: var(--accent-ink); }
html[data-theme="blue"] .player-close span { background: var(--accent); }
html[data-theme="blue"] :is(.space-save[aria-pressed="true"], .library-launcher.has-saved) svg path { fill: var(--accent); stroke: var(--accent); }
html[data-theme="blue"] .space-library::backdrop { background: rgb(2 5 18 / 30%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="blue"] .settings-backdrop { background: rgb(2 5 18 / 45%); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="blue"] .listen-button.is-live:hover,
  html[data-theme="blue"] .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button):hover { background: var(--live-fill); color: var(--live-ink); }
  html[data-theme="blue"] .player-close:hover span { background: #b4a8ff; }
}
/* Green: rich emerald and ivory, with restrained matte champagne-gold details. */
html[data-theme="green"] h1 { color: #f5f2eb; text-shadow: 0 2px 24px rgb(197 160 89 / 7%); }
html[data-theme="green"] .star { background: #d9c7a3; box-shadow: 0 0 6px rgb(197 160 89 / 12%); }
/* Tile stencils: emerald and antiqued gold, using Autumn's bottom framing. */
html[data-theme="green"] body::after {
  content: ""; position: fixed; inset: auto 0 0; z-index: 0; height: clamp(140px, 24vh, 240px);
  background: url("/icons/green-tiles.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none; opacity: .5;
}
html[data-theme="green"] .player::before {
  content: ""; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 112px; height: 34px;
  background: url("/icons/green-player-tiles.svg") center / contain no-repeat; opacity: .85; pointer-events: none;
}
html[data-theme="green"]:not([data-theme="purple"]) .player {
  --green-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .55 0 0 0 0 .60 0 0 0 0 .45 0 0 0 .08 0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  background: var(--green-grain), repeating-linear-gradient(0deg, rgb(230 222 208 / 1.5%) 0 1px, transparent 1px 4px), radial-gradient(ellipse at 18% 0%, rgb(197 160 89 / 7%), transparent 70%), var(--glass);
  box-shadow: 0 16px 38px var(--shadow), inset 0 1px 0 rgb(197 160 89 / 18%), inset 0 -1px 0 rgb(2 12 9 / 30%);
}
html[data-theme="green"] .ufo-icon { filter: drop-shadow(0 3px 6px rgb(2 14 8 / 35%)); }
html[data-theme="green"] .ufo-dome { fill: #264c3e; fill-opacity: 1; stroke: #d9c397; }
html[data-theme="green"] .ufo-highlight { stroke: #f5f2eb; }
html[data-theme="green"] .ufo-hull { fill: #c5a059; stroke: #e3cfaa; }
html[data-theme="green"] .ufo-rim { stroke: #725c35; }
html[data-theme="green"] .ufo-light { fill: #f5f2eb; }
html[data-theme="green"] .ufo-beam { fill: #c5a059; }
html[data-theme="green"] .library-close { color: var(--accent); }
html[data-theme="green"]:not([data-theme="purple"]) .player .player-close { color: var(--accent-ink); }
html[data-theme="green"] .player-close span { background: var(--accent); }
html[data-theme="green"] :is(.space-save[aria-pressed="true"], .library-launcher.has-saved) svg path { fill: var(--accent); stroke: var(--accent); }
html[data-theme="green"] .space-library::backdrop { background: rgb(2 14 8 / 28%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="green"] .settings-backdrop { background: rgb(2 14 8 / 42%); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="green"] .listen-button.is-live:hover,
  html[data-theme="green"] .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button):hover { background: var(--live-fill); color: var(--live-ink); }
  html[data-theme="green"] .player-close:hover span { background: #d4b777; }
}
@media (max-width: 600px) {
  html[data-theme="green"] body::after { height: 140px; opacity: .4; background-size: 100% auto; }
  html[data-theme="green"] .player::before { width: 88px; height: 28px; top: -16px; }
}
@media (forced-colors: active) {
  html[data-theme="green"] body::after, html[data-theme="green"] .player::before { display: none; }
}
/* Hornet: smoked graphite, honey-yellow highlights and black details, not olive. */
html[data-theme="yellow"] h1 { color: #ead46d; text-shadow: 0 2px 22px rgb(227 197 55 / 7%); }
html[data-theme="yellow"] .star { background: #d3c999; box-shadow: 0 0 5px rgb(227 197 55 / 12%); opacity: .5; }
html[data-theme="yellow"]:not([data-theme="purple"]) .player {
  background: radial-gradient(ellipse at 50% 0%, rgb(227 197 55 / 7%), transparent 70%), var(--glass);
  box-shadow: 0 24px 44px var(--shadow), inset 0 1px 0 rgb(227 197 55 / 17%);
}
html[data-theme="yellow"] :is(.library-launcher, .ufo-icon) { filter: drop-shadow(0 3px 5px rgb(0 0 0 / 20%)); }
html[data-theme="yellow"] .ufo-dome { fill: #353c3f; fill-opacity: 1; stroke: #e3c537; }
html[data-theme="yellow"] .ufo-highlight { stroke: #f7e8a2; }
html[data-theme="yellow"] .ufo-hull { fill: #e3c537; stroke: #10110d; }
html[data-theme="yellow"] .ufo-rim { stroke: #10110d; }
html[data-theme="yellow"] .ufo-light { fill: #10110d; }
html[data-theme="yellow"] .ufo-beam { fill: #e3c537; }
html[data-theme="yellow"] .space-library::backdrop { background: rgb(0 0 0 / 32%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="yellow"] .settings-backdrop { background: rgb(0 0 0 / 48%); }
html[data-theme="yellow"] .library-close { color: var(--accent); }
html[data-theme="yellow"]:not([data-theme="purple"]) .player .player-close { color: var(--accent-ink); }
html[data-theme="yellow"] .player-close span { background: var(--accent); border: 1px solid var(--edge); }
html[data-theme="yellow"] :is(.space-save[aria-pressed="true"], .library-launcher.has-saved) svg path { fill: var(--accent); stroke: var(--accent); }
/* Red: ruby velvet surfaces with crisp white accents and silver-rose starlight. */
html[data-theme="cola"] h1 { color: #f9e8ed; text-shadow: 0 2px 24px rgb(242 182 200 / 8%); }
html[data-theme="cola"] .star { background: #e9bdc9; box-shadow: 0 0 6px rgb(233 189 201 / 18%); }
html[data-theme="cola"]:not([data-theme="purple"]) .player {
  background: radial-gradient(ellipse at 50% 0%, rgb(194 53 80 / 9%), transparent 70%), var(--glass);
  box-shadow: 0 24px 44px var(--shadow), inset 0 1px 0 rgb(245 208 218 / 18%);
}
html[data-theme="cola"] .space-library::backdrop { background: rgb(14 2 7 / 28%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="cola"] .settings-backdrop { background: rgb(14 2 7 / 48%); }
html[data-theme="cola"] .ufo-icon { filter: drop-shadow(0 3px 6px rgb(14 2 7 / 35%)); }
html[data-theme="cola"] .ufo-dome { fill: #8c334a; fill-opacity: 1; stroke: #ffffff; }
html[data-theme="cola"] .ufo-highlight { stroke: #ffffff; }
html[data-theme="cola"] .ufo-hull { fill: #ffffff; stroke: #ffffff; }
html[data-theme="cola"] .ufo-rim { stroke: #681724; }
html[data-theme="cola"] .ufo-light { fill: #681724; }
html[data-theme="cola"] .ufo-beam { fill: #ffffff; }
html[data-theme="cola"] .library-close { color: #ffffff; }
html[data-theme="cola"]:not([data-theme="purple"]) .player .player-close { color: var(--accent-ink); }
html[data-theme="cola"] .player-close span { background: #ffffff; border: 1px solid #ffffff; }
html[data-theme="cola"] :is(.space-save[aria-pressed="true"], .library-launcher.has-saved) svg path { fill: #ffffff; stroke: #ffffff; }
/* These two skins use their own accents even while hovering live controls. */
@media (hover: hover) and (pointer: fine) {
  html:is([data-theme="yellow"], [data-theme="cola"]) .listen-button.is-live:hover,
  html:is([data-theme="yellow"], [data-theme="cola"]) .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button):hover { background: var(--live-fill); color: var(--live-ink); }
  html:is([data-theme="yellow"], [data-theme="cola"]) .player-close:hover span { background: var(--clear-fill); color: var(--clear-ink); }
}
/* Erebus: unlit black surfaces, monochrome controls, no glow or decorative motion. */
html[data-theme="erebus"] .stars { display: none; }
html[data-theme="erebus"] h1 { color: #858585; text-shadow: none; }
html[data-theme="erebus"] :is(.result, .player, .space-library, .player-settings, #search-input) {
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-theme="erebus"] :is(.library-launcher, .ufo-icon) { filter: none; }
html[data-theme="erebus"] .ufo-dome { fill: #161616; fill-opacity: 1; stroke: #999999; }
html[data-theme="erebus"] .ufo-highlight { stroke: #aaaaaa; }
html[data-theme="erebus"] .ufo-hull { fill: #232323; stroke: #999999; }
html[data-theme="erebus"] .ufo-rim { stroke: #777777; }
html[data-theme="erebus"] .ufo-light { fill: #aaaaaa; }
html[data-theme="erebus"] .ufo-beam { display: none; }
html[data-theme="erebus"] :is(.is-launching .ufo-icon, #results.is-updating, .is-playing .equaliser span) { animation: none; }
html[data-theme="erebus"] .is-playing .equaliser span { transform: scaleY(.65); }
html[data-theme="erebus"] .is-playing .equaliser span:nth-child(2) { transform: scaleY(1); }
html[data-theme="erebus"] .space-library::backdrop { background: rgb(0 0 0 / 20%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="erebus"] .settings-backdrop { background: rgb(0 0 0 / 70%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="erebus"] .space-library :is(.library-close, .theme-choice) { color: var(--ink); }
html[data-theme="erebus"] :is(.space-save[aria-pressed="true"], .library-launcher.has-saved) svg path { fill: #909090; stroke: #909090; }
html[data-theme="erebus"] .theme-dot { background: #161616; border-color: #666666; box-shadow: none; }
.theme-dot[data-theme="erebus"] { background: #000; border-color: #666666; }
html[data-theme="erebus"]:not([data-theme="purple"]) .player .player-close { color: var(--ink); }
html[data-theme="erebus"] .player-close span { background: #191919; border: 1px solid #666666; }
html[data-theme="erebus"] .search-clear svg { box-shadow: none; border: 1px solid #666666; }
html[data-theme="erebus"]:not([data-theme="purple"]) .listen-button.is-live { border-color: #777777; }
html[data-theme="erebus"]:not([data-theme="purple"]) .listen-button:not(.is-live) { background: #000; }
html[data-theme="erebus"] .playback-action.is-live .playback-label { font-weight: 800; }
html[data-theme="erebus"] .listen-button.is-active { box-shadow: 0 0 0 1px #777777; }
html[data-theme="erebus"]:not([data-theme="purple"]) .result.is-current { background: #000; border-color: #909090; box-shadow: none; }
/* Match the shared selector specificity so selected controls cannot turn bright. */
html[data-theme="erebus"]:not([data-theme="purple"]) .player-mode-switch::before { background: #191919; }
html[data-theme="erebus"]:not([data-theme="purple"]) .player .player-mode-switch button[aria-pressed="true"] { color: var(--ink); }
html[data-theme="erebus"]:not([data-theme="purple"]) .player[data-playback-mode="live"] .player-mode-switch::before { background: var(--live-fill); }
html[data-theme="erebus"]:not([data-theme="purple"]) .player-settings button[aria-pressed="true"],
html[data-theme="erebus"]:not([data-theme="purple"]) .results-filter button[data-filter="all"][aria-pressed="true"] { background: #191919; color: var(--ink); border-color: #909090; }
html[data-theme="erebus"]:not([data-theme="purple"]) .saved-bubble.is-selected { background: #191919; }
html[data-theme="erebus"]:not([data-theme="purple"]) .saved-bubble.is-selected :is(.search-bubble, .remove-bubble) { color: var(--ink); }
html[data-theme="erebus"] .player-progress { height: 6px; }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="erebus"] #search-form > button:hover .ufo-icon { filter: none; }
  html[data-theme="erebus"] .player-close:hover span { background: #242424; }
  html[data-theme="erebus"] .search-clear:hover svg { background: #242424; }
}
/* Purple's midnight sky: static celestial texture, with no extra layout or animation. */
html[data-theme="purple"] body::before {
  background: radial-gradient(ellipse at 70% 78%, rgb(129 77 195 / 9%), transparent 62%),
    linear-gradient(to bottom, #120721 0%, #24103f 32%, #3d1d68 65%, #291144 100%);
}
html[data-theme="purple"] body::after {
  content: ""; position: fixed; inset: auto 0 0; z-index: 0;
  height: clamp(180px, 28vh, 320px);
  background: url("/icons/purple-stardust.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none; opacity: .72;
}
html[data-theme="purple"] .player {
  background: radial-gradient(ellipse at 50% 0%, rgb(143 100 207 / 12%), transparent 68%), rgb(24 9 46 / 84%);
  border-color: rgb(216 192 255 / 28%);
}
html[data-theme="purple"] .player::before {
  content: ""; position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 32px;
  background: url("/icons/purple-player-orbit.svg") center / contain no-repeat;
  opacity: .88; pointer-events: none;
}
@media (max-width: 600px) {
  html[data-theme="purple"] body::after { height: 180px; opacity: .52; background-size: 100% auto; }
  html[data-theme="purple"] .player::before { width: 110px; height: 26px; top: -13px; }
}
@media (forced-colors: active) {
  html[data-theme="purple"] body::after, html[data-theme="purple"] .player::before { display: none; }
}
/* Ice stencils sit behind content or above the player's edge, never in its layout. */
html[data-theme="pearl"] body::after {
  content: ""; position: fixed; inset: auto 0 0; z-index: 0; height: clamp(140px, 24vh, 240px);
  background: url("/icons/ice-frost.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none; opacity: .65;
}
html[data-theme="pearl"] .player::before {
  content: ""; position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
  width: 112px; height: 34px;
  background: url("/icons/ice-player-crystals.svg") center / contain no-repeat;
  pointer-events: none; opacity: .85;
}
@media (max-width: 600px) {
  html[data-theme="pearl"] body::after { height: 140px; opacity: .45; background-size: 100% auto; }
  html[data-theme="pearl"] .player::before { width: 90px; height: 28px; top: -16px; }
}
@media (forced-colors: active) {
  html[data-theme="pearl"] body::after, html[data-theme="pearl"] .player::before { display: none; }
}
/* Midnight lunar stencils: subdued, static and outside the interactive layout. */
html[data-theme="midnight"] body::after {
  content: ""; position: fixed; inset: auto 0 0; z-index: 0; height: clamp(140px, 24vh, 240px);
  background: url("/icons/midnight-constellations.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none; opacity: .55;
}
html[data-theme="midnight"] .player::before {
  content: ""; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 32px;
  background: url("/icons/midnight-player-moon.svg") center / contain no-repeat;
  pointer-events: none; opacity: .75;
}
@media (max-width: 600px) {
  html[data-theme="midnight"] body::after { height: 140px; opacity: .35; background-size: 100% auto; }
  html[data-theme="midnight"] .player::before { width: 86px; height: 26px; top: -15px; }
}
@media (forced-colors: active) {
  html[data-theme="midnight"] body::after, html[data-theme="midnight"] .player::before { display: none; }
}
/* Autumn ornament stays behind content and never affects geometry or touch input. */
html[data-theme="autumn"] body::after {
  content: ""; position: fixed; inset: auto 0 0; z-index: 0; height: clamp(140px, 24vh, 260px);
  background: url("/icons/autumn-leaves.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none; opacity: .65;
}
html[data-theme="autumn"] h1 { color: #f6ddbb; text-shadow: 0 2px 26px rgb(239 188 124 / 13%); }
html[data-theme="autumn"] .star { background: #f4d4a7; box-shadow: 0 0 7px rgb(239 188 124 / 35%); }
html[data-theme="autumn"] .ufo-icon { filter: drop-shadow(0 3px 6px rgb(239 188 124 / 22%)); }
html[data-theme="autumn"] .ufo-dome { fill: #956e54; fill-opacity: 1; stroke: #f3d2a4; }
html[data-theme="autumn"] .ufo-highlight { stroke: #fff2df; }
html[data-theme="autumn"] .ufo-hull { fill: #e7b57e; stroke: #f3d2a4; }
html[data-theme="autumn"] .ufo-rim { stroke: #864b37; }
html[data-theme="autumn"] .ufo-light { fill: #fff2df; }
html[data-theme="autumn"] .ufo-beam { fill: #efbc7c; }
html[data-theme="autumn"] :is(.space-save[aria-pressed="true"], .library-launcher.has-saved) svg path { fill: var(--accent); stroke: var(--accent); }
html[data-theme="autumn"] .library-close { color: var(--accent); }
html[data-theme="autumn"] .space-library::backdrop { background: rgb(21 12 16 / 24%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="autumn"] .settings-backdrop { background: rgb(21 12 16 / 38%); }
html[data-theme="autumn"] .player-close span { background: var(--accent); }
html[data-theme="autumn"] .player::before {
  content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px;
  background: url("/icons/autumn-player-leaves.svg") center / contain no-repeat; opacity: .85; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="autumn"] .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button):hover,
  html[data-theme="autumn"] .listen-button.is-live:hover { background: var(--live-fill); }
  html[data-theme="autumn"] .player-close:hover span { background: #f6cd99; }
}
@media (max-width: 600px) {
  html[data-theme="autumn"] body::after { height: 140px; opacity: .4; background-size: 100% auto; }
  html[data-theme="autumn"] .player::before { width: 76px; height: 22px; top: -10px; }
}
@media (forced-colors: active) {
  html[data-theme="autumn"] body::after, html[data-theme="autumn"] .player::before { display: none; }
}
/* Hornet honeycomb stencils: static geometry, never over interactive controls. */
html[data-theme="yellow"] body::after {
  content: ""; position: fixed; inset: auto 0 0; z-index: 0; height: clamp(140px, 24vh, 240px);
  background: url("/icons/hornet-honeycomb.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none; opacity: .6;
}
html[data-theme="yellow"] .player::before {
  content: ""; position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  width: 112px; height: 30px;
  background: url("/icons/hornet-player-crest.svg") center / contain no-repeat;
  pointer-events: none; opacity: .85;
}
@media (max-width: 600px) {
  html[data-theme="yellow"] body::after { height: 140px; opacity: .38; background-size: 100% auto; }
  html[data-theme="yellow"] .player::before { width: 90px; height: 24px; top: -14px; }
}
@media (forced-colors: active) {
  html[data-theme="yellow"] body::after, html[data-theme="yellow"] .player::before { display: none; }
}
/* Gold atelier: static metal reflections, brushed obsidian and fine engraved fans. */
html[data-theme="gold"] h1 { color: #e1c273; text-shadow: none; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  html[data-theme="gold"] h1 {
    background: var(--metal); background-clip: text; -webkit-background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}
html[data-theme="gold"]:not([data-theme="purple"]) .result {
  background: linear-gradient(135deg, rgb(203 163 88 / 3%), transparent 55%), var(--card);
  box-shadow: inset 0 1px 0 rgb(241 217 140 / 12%), 0 6px 22px rgb(0 0 0 / 25%);
}
html[data-theme="gold"]:not([data-theme="purple"]) .result.is-current { background: var(--current); box-shadow: 0 0 0 1px var(--edge), inset 0 1px 0 rgb(241 217 140 / 20%); }
html[data-theme="gold"]:not([data-theme="purple"]) .player {
  background: repeating-linear-gradient(0deg, rgb(241 217 140 / 2%) 0 1px, transparent 1px 4px), var(--glass);
  box-shadow: 0 24px 50px var(--shadow), inset 0 1px 0 rgb(255 240 181 / 30%), inset 0 -1px 0 rgb(133 94 37 / 25%);
}
html[data-theme="gold"]:not([data-theme="purple"]) .listen-button.is-live,
html[data-theme="gold"]:not([data-theme="purple"]) .results-filter button[data-filter="live"][aria-pressed="true"],
html[data-theme="gold"]:not([data-theme="purple"]) .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button),
html[data-theme="gold"]:not([data-theme="purple"]) .player[data-playback-mode="live"] .player-mode-switch::before,
html[data-theme="gold"]:not([data-theme="purple"]) .search-clear svg,
html[data-theme="gold"] .player-close span {
  background: var(--metal); color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgb(255 246 210 / 65%), inset 0 -1px 0 rgb(87 55 14 / 45%);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="gold"]:not([data-theme="purple"]) .listen-button.is-live:hover,
  html[data-theme="gold"]:not([data-theme="purple"]) .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button):hover,
  html[data-theme="gold"] .player-close:hover span { background: var(--metal); }
}
html[data-theme="gold"] body::after {
  content: ""; position: fixed; inset: auto 0 0; z-index: 0; height: clamp(140px, 24vh, 240px);
  background: url("/icons/gold-engraved-fans.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none; opacity: .6;
}
html[data-theme="gold"] .player::before {
  content: ""; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 32px;
  background: url("/icons/gold-player-fan.svg") center / contain no-repeat;
  pointer-events: none; opacity: .85;
}
@media (max-width: 600px) {
  html[data-theme="gold"] body::after { height: 140px; opacity: .38; background-size: 100% auto; }
  html[data-theme="gold"] .player::before { width: 92px; height: 26px; top: -15px; }
}
@media (forced-colors: active) {
  html[data-theme="gold"] h1 { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  html[data-theme="gold"] body::after, html[data-theme="gold"] .player::before { display: none; }
}
/* Red ruby stencils: static cut-gem facets, behind content and clear of controls. */
html[data-theme="cola"] body::after {
  content: ""; position: fixed; inset: auto 0 0; z-index: 0; height: clamp(140px, 24vh, 240px);
  background: url("/icons/red-ruby-facets.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none; opacity: .6;
}
html[data-theme="cola"] .player::before {
  content: ""; position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 30px;
  background: url("/icons/red-player-ruby.svg") center / contain no-repeat;
  pointer-events: none; opacity: .8;
}
@media (max-width: 600px) {
  html[data-theme="cola"] body::after { height: 140px; opacity: .4; background-size: 100% auto; }
  html[data-theme="cola"] .player::before { width: 88px; height: 24px; top: -14px; }
}
@media (forced-colors: active) {
  html[data-theme="cola"] body::after, html[data-theme="cola"] .player::before { display: none; }
}
/* Blue orbital stencils share Autumn's complete, bottom-centred desktop framing. */
html[data-theme="blue"] body::after {
  content: ""; position: fixed; inset: auto 0 0; z-index: 0; height: clamp(140px, 24vh, 240px);
  background: url("/icons/blue-orbits.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none; opacity: .6;
}
html[data-theme="blue"] .player::before {
  content: ""; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 112px; height: 32px;
  background: url("/icons/blue-player-planet.svg") center / contain no-repeat;
  pointer-events: none; opacity: .85;
}
@media (max-width: 600px) {
  html[data-theme="blue"] body::after { height: 140px; opacity: .4; background-size: 100% auto; }
  html[data-theme="blue"] .player::before { width: 90px; height: 26px; top: -15px; }
}
@media (forced-colors: active) {
  html[data-theme="blue"] body::after, html[data-theme="blue"] .player::before { display: none; }
}
/* Sage: Olive atelier — woven limestone, warm olive and one pistachio accent. */
.theme-dot[data-theme="sage"] { background: linear-gradient(135deg, #e8e6d8 0% 35%, #303b2c 35% 70%, #d6e0a2 70%); border-color: #7b8759; }
html[data-theme="sage"]:not([data-theme="purple"]) body::before { background: var(--olive-paper), var(--sky); }
html[data-theme="sage"] h1 { color: #35432b; text-shadow: 0 1px 0 rgb(255 255 244 / 65%); }
html[data-theme="sage"] .star { background: #6b7c4c; box-shadow: none; opacity: .35; animation: none; }
html[data-theme="sage"] :is(.library-launcher, .ufo-icon) { filter: none; }
html[data-theme="sage"] .ufo-dome { fill: #8c9c68; fill-opacity: 1; stroke: #435238; }
html[data-theme="sage"] .ufo-highlight { stroke: #f6f3e6; }
html[data-theme="sage"] .ufo-hull { fill: var(--olive-accent); stroke: #435238; }
html[data-theme="sage"] .ufo-rim { stroke: #435238; }
html[data-theme="sage"] .ufo-light { fill: #35432b; }
html[data-theme="sage"] .ufo-beam { fill: var(--olive-accent); }
html[data-theme="sage"]:not([data-theme="purple"]) :is(.library-launcher, .space-save, .player .space-save),
html[data-theme="sage"] .library-close { color: #435238; }
html[data-theme="sage"] :is(.space-save[aria-pressed="true"], .library-launcher.has-saved) svg path { fill: #435238; stroke: #435238; }
html[data-theme="sage"]:not([data-theme="purple"]) .result { background: var(--olive-paper), var(--card); box-shadow: 0 4px 16px rgb(36 44 28 / 7%), inset 0 1px 0 rgb(255 255 244 / 70%); }
html[data-theme="sage"]:not([data-theme="purple"]) .result:not(.is-current):focus-within { background: var(--olive-paper), #dfe5cc; border-color: #6b7b4c; }
html[data-theme="sage"]:not([data-theme="purple"]) #search-input { background: var(--olive-paper), var(--field); box-shadow: 0 8px 24px var(--shadow), inset 0 1px 0 rgb(255 255 244 / 80%); }
html[data-theme="sage"]:not([data-theme="purple"]) .result-summary { background: var(--olive-paper), #dce2c9; border-color: #b7c19b; }
html[data-theme="sage"]:not([data-theme="purple"]) .space-library { background: var(--olive-paper), var(--drawer); }
html[data-theme="sage"]:not([data-theme="purple"]) :is(.player, .result.is-current) {
  --ink: #f7f3e4; --soft-ink: #e6e8d4; --muted: #d0d5ba;
  --accent: var(--olive-accent); --accent-ink: var(--olive-accent-ink); --edge: #869367;
  --wash: rgb(214 224 162 / 7%); --wash-hover: rgb(214 224 162 / 13%);
  --panel: #2c3828; --opaque: #2c3828; --live-label: #dce5b5;
  background: var(--olive-linen), var(--olive-depth);
  color: var(--ink); border-color: #97a774;
  box-shadow: 0 16px 38px rgb(30 38 24 / 25%), inset 0 1px 0 rgb(220 230 179 / 35%), inset 0 -1px 0 rgb(10 17 8 / 30%);
}
html[data-theme="sage"]:not([data-theme="purple"]) :is(.player, .result.is-current) .space-save { color: var(--olive-accent); }
html[data-theme="sage"]:not([data-theme="purple"]) :is(.player, .result.is-current) .space-save[aria-pressed="true"] svg path { fill: var(--olive-accent); stroke: var(--olive-accent); }
html[data-theme="sage"]:not([data-theme="purple"]) :is(.listen-button.is-live, .listen-button:not(.is-live)),
html[data-theme="sage"]:not([data-theme="purple"]) .results-filter button[data-filter][aria-pressed="true"],
html[data-theme="sage"]:not([data-theme="purple"]) .saved-bubble.is-selected,
html[data-theme="sage"]:not([data-theme="purple"]) .player[data-playback-mode] :is(.player-play-button, .player-skip-button),
html[data-theme="sage"]:not([data-theme="purple"]) .player[data-playback-mode] .player-mode-switch::before,
html[data-theme="sage"]:not([data-theme="purple"]) .player-settings button[aria-pressed="true"],
html[data-theme="sage"] .space-library .theme-choice[aria-pressed="true"] {
  background: var(--olive-ceramic); color: var(--olive-accent-ink); border-color: var(--olive-accent-edge);
  box-shadow: inset 0 1px 0 rgb(250 252 224 / 75%), inset 0 -1px 0 rgb(67 82 40 / 22%), 0 2px 5px rgb(36 44 28 / 12%);
}
html[data-theme="sage"]:not([data-theme="purple"]) .saved-bubble.is-selected :is(.search-bubble, .remove-bubble),
html[data-theme="sage"]:not([data-theme="purple"]) .player[data-playback-mode] .player-mode-switch button[aria-pressed="true"] { color: var(--olive-accent-ink); }
html[data-theme="sage"]:not([data-theme="purple"]) .player .player-settings-toggle { color: var(--olive-accent); }
html[data-theme="sage"]:not([data-theme="purple"]) .player .player-close { color: var(--accent-ink); }
html[data-theme="sage"] .player-close span { background: var(--olive-ceramic); }
html[data-theme="sage"] .space-library::backdrop { background: rgb(63 65 44 / 14%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="sage"] .settings-backdrop { background: rgb(63 65 44 / 23%); }
html[data-theme="sage"]:not([data-theme="purple"]) :is(.player button, .library-launcher, .space-save, .space-library button):focus-visible,
html[data-theme="sage"] .appearance-picker summary:focus-visible { outline-color: var(--accent); }
html[data-theme="sage"]:not([data-theme="purple"]) #search-input:focus { border-color: #6b7b4c; outline-color: #6b7b4c; }
html[data-theme="sage"] .player-progress { --accent: var(--olive-accent); --edge: #78865d; }
html[data-theme="sage"]:not([data-theme="purple"]) .player-settings { background: var(--olive-linen), var(--panel); scrollbar-color: var(--olive-accent) var(--panel); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="sage"]:not([data-theme="purple"]) .result:not(.is-current):hover { background: var(--olive-paper), #dfe5cc; border-color: #6b7b4c; }
  html[data-theme="sage"]:not([data-theme="purple"]) :is(.listen-button.is-live, .listen-button:not(.is-live)):hover,
  html[data-theme="sage"]:not([data-theme="purple"]) .player[data-playback-mode] :is(.player-play-button, .player-skip-button):hover { background: var(--olive-ceramic); color: var(--olive-accent-ink); box-shadow: inset 0 1px 0 #f6f8dd, 0 0 0 1px var(--olive-accent-edge); }
  html[data-theme="sage"] :is(.library-launcher, .space-save, .library-close):hover { color: #35432b; }
  html[data-theme="sage"]:not([data-theme="purple"]) :is(.player, .result.is-current) .space-save:hover { color: #f0f4cf; }
  html[data-theme="sage"] .player-close:hover span { background: var(--olive-ceramic); }
}
/* Sage olive stencils follow Autumn's bottom framing and out-of-flow player crest. */
html[data-theme="sage"] body::after {
  content: ""; position: fixed; inset: auto 0 0; z-index: 0; height: clamp(140px, 24vh, 260px);
  background: url("/icons/sage-olive-leaves.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none; opacity: .65;
}
html[data-theme="sage"] .player::before {
  content: ""; position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 30px;
  background: url("/icons/sage-player-olive.svg") center / contain no-repeat;
  pointer-events: none; opacity: .8;
}
@media (max-width: 600px) {
  html[data-theme="sage"] body::after { height: 140px; opacity: .4; background-size: 100% auto; }
  html[data-theme="sage"] .player::before { width: 88px; height: 24px; top: -14px; }
}
@media (forced-colors: active) {
  html[data-theme="sage"] body::after, html[data-theme="sage"] .player::before { display: none; }
}
/* Pearl White is separate from Ice's legacy pearl storage ID. */
.theme-dot[data-theme="pearl-white"] { background: linear-gradient(135deg, #faf6ef 0% 40%, #0d0c0b 40% 70%, #d0b88e 70%); border-color: #a5a29e; }
html[data-theme="pearl-white"] h1 { color: #0d0c0b; text-shadow: none; }
html[data-theme="pearl-white"] .star { background: #a5a29e; opacity: .45; box-shadow: none; animation: none; }
html[data-theme="pearl-white"] :is(.library-launcher, .ufo-icon) { filter: none; }
html[data-theme="pearl-white"] .ufo-dome { fill: #d7d2ca; fill-opacity: 1; stroke: #2c2c2b; }
html[data-theme="pearl-white"] .ufo-highlight { stroke: #faf6ef; }
html[data-theme="pearl-white"] .ufo-hull { fill: #d0b88e; stroke: #2c2c2b; }
html[data-theme="pearl-white"] .ufo-rim { stroke: #2c2c2b; }
html[data-theme="pearl-white"] .ufo-light { fill: #0d0c0b; }
html[data-theme="pearl-white"] .ufo-beam { fill: #d0b88e; }
html[data-theme="pearl-white"] .library-close { color: #2c2c2b; }
html[data-theme="pearl-white"] :is(.space-save[aria-pressed="true"], .library-launcher.has-saved) svg path { fill: #0d0c0b; stroke: #0d0c0b; }
html[data-theme="pearl-white"]:not([data-theme="purple"]) :is(.listen-button:not(.is-live), .player[data-playback-mode="replay"] .player-play-button, .player[data-playback-mode="replay"] .player-skip-button) {
  background: var(--champagne); color: #0d0c0b; border-color: #aa9271; box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%);
}
html[data-theme="pearl-white"]:not([data-theme="purple"]) .player[data-playback-mode="replay"] .player-mode-switch::before { background: var(--champagne); }
html[data-theme="pearl-white"]:not([data-theme="purple"]) .player[data-playback-mode="replay"] .player-mode-switch button[aria-pressed="true"] { color: #0d0c0b; }
html[data-theme="pearl-white"]:not([data-theme="purple"]) .player {
  background: var(--pearl-finish), linear-gradient(135deg, #eee4d2, #e6dac5 48%, #e0d1b8);
  border-color: #b6a488;
  box-shadow: 0 14px 40px var(--shadow), inset 0 1px 0 rgb(255 255 255 / 70%), inset 0 -1px 0 rgb(165 139 99 / 20%);
}
html[data-theme="pearl-white"]:not([data-theme="purple"]) .result.is-current {
  background: var(--pearl-finish), var(--current);
  box-shadow: 0 0 0 1px var(--edge), 0 6px 24px var(--shadow), inset 0 1px 0 rgb(255 255 255 / 70%);
}
html[data-theme="pearl-white"]:not([data-theme="purple"]) .player .player-close { color: #faf6ef; }
html[data-theme="pearl-white"] .player-close span { background: #0d0c0b; }
html[data-theme="pearl-white"] .space-library::backdrop { background: rgb(35 29 20 / 14%); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="pearl-white"] .settings-backdrop { background: rgb(35 29 20 / 23%); }
html[data-theme="pearl-white"] .space-library .theme-choice[aria-pressed="true"] { background: #0d0c0b; color: #faf6ef; box-shadow: inset 0 0 0 1px #0d0c0b; }
html[data-theme="pearl-white"]:not([data-theme="purple"]) .saved-bubble.is-selected,
html[data-theme="pearl-white"]:not([data-theme="purple"]) .results-filter button[data-filter="all"][aria-pressed="true"],
html[data-theme="pearl-white"]:not([data-theme="purple"]) .player-settings button[aria-pressed="true"],
html[data-theme="pearl-white"] .space-library .theme-choice[aria-pressed="true"],
html[data-theme="pearl-white"] .player-close span,
html[data-theme="pearl-white"]:not([data-theme="purple"]) .listen-button.is-live,
html[data-theme="pearl-white"]:not([data-theme="purple"]) .results-filter button[data-filter="live"][aria-pressed="true"],
html[data-theme="pearl-white"]:not([data-theme="purple"]) .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button),
html[data-theme="pearl-white"]:not([data-theme="purple"]) .player[data-playback-mode="live"] .player-mode-switch::before {
  background: var(--obsidian-gloss); color: var(--live-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), inset 0 -1px 0 rgb(0 0 0 / 65%), 0 2px 5px rgb(13 12 11 / 18%);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="pearl-white"]:not([data-theme="purple"]) .listen-button.is-live:hover,
  html[data-theme="pearl-white"]:not([data-theme="purple"]) .player[data-playback-mode="live"] :is(.player-play-button, .player-skip-button):hover { background: var(--obsidian-gloss); color: var(--live-ink); }
  html[data-theme="pearl-white"]:not([data-theme="purple"]) :is(.listen-button:not(.is-live), .player[data-playback-mode="replay"] .player-play-button, .player[data-playback-mode="replay"] .player-skip-button):hover { background: var(--champagne); color: #0d0c0b; }
  html[data-theme="pearl-white"] :is(.library-launcher, .space-save, .library-close):hover { color: #2c2c2b; }
  html[data-theme="pearl-white"] .player-close:hover span { background: var(--obsidian-gloss); }
}
/* Pearl botanical stencils: champagne and pumice ginkgo leaves, framed like Autumn. */
html[data-theme="pearl-white"] body::after {
  content: ""; position: fixed; inset: auto 0 0; z-index: 0; height: clamp(140px, 24vh, 260px);
  background: url("/icons/pearl-ginkgo.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none; opacity: .65;
}
html[data-theme="pearl-white"] .player::before {
  content: ""; position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 30px;
  background: url("/icons/pearl-player-ginkgo.svg") center / contain no-repeat;
  pointer-events: none; opacity: .85;
}
@media (max-width: 600px) {
  html[data-theme="pearl-white"] body::after { height: 140px; opacity: .4; background-size: 100% auto; }
  html[data-theme="pearl-white"] .player::before { width: 86px; height: 24px; top: -14px; }
}
@media (forced-colors: active) {
  html[data-theme="pearl-white"] body::after, html[data-theme="pearl-white"] .player::before { display: none; }
}