/* Six palettes share contrast-safe component colors. Layout style is independent. */
:root,[data-theme=sage]{color-scheme:light;--bg:#f5f6f0;--ink:#293c32;--muted:#65715f;--line:#d8dfd1;--green:#48694e;--surface:#fafbf7;--active:#e9efdf;--accent:#3e5c40;--accent-ink:#fff;--track:#ced9c4;--soft:#e7ecdf;--player:#fffef9ed;--glow:#b5c8a0;--border-active:#a7ba96;--radius:17px}
[data-theme=midnight]{color-scheme:dark;--bg:#111820;--ink:#e0e9ed;--muted:#a4b4bd;--line:#34434e;--green:#a4c5bd;--surface:#1a242e;--active:#253d3e;--accent:#aed3c5;--accent-ink:#132420;--track:#405f60;--soft:#283b44;--player:#1b2731ed;--glow:#476874;--border-active:#7caaa0}
[data-theme=ocean]{color-scheme:light;--bg:#eef5f8;--ink:#1d4054;--muted:#587382;--line:#cbdde6;--green:#346b84;--surface:#f7fbfd;--active:#deedf5;--accent:#2d607b;--accent-ink:#fff;--track:#b8d0df;--soft:#e0edf4;--player:#f8fcfeed;--glow:#9fc8e2;--border-active:#89b5cc}
[data-theme=lavender]{color-scheme:light;--bg:#f4f1f8;--ink:#443653;--muted:#776783;--line:#dfd5e9;--green:#79608d;--surface:#fcfaff;--active:#eae1f3;--accent:#705181;--accent-ink:#fff;--track:#d1bfdf;--soft:#eae2f2;--player:#fdfaffed;--glow:#cbb2df;--border-active:#b29ac6}
[data-theme=sand]{color-scheme:light;--bg:#f8f3e9;--ink:#4c4030;--muted:#7e6e56;--line:#e2d7c4;--green:#8a7047;--surface:#fffcf5;--active:#efe5cf;--accent:#7b5c31;--accent-ink:#fff;--track:#dbcaab;--soft:#eee4d1;--player:#fffdf7ed;--glow:#dac193;--border-active:#baa277}
[data-theme=rose]{color-scheme:light;--bg:#faf1f1;--ink:#54393e;--muted:#86666e;--line:#e8d2d7;--green:#976473;--surface:#fffafa;--active:#f3e0e5;--accent:#905567;--accent-ink:#fff;--track:#dec0c9;--soft:#f3e2e6;--player:#fffafaed;--glow:#e5bac9;--border-active:#cb9cac}
body{background-color:var(--bg);transition:background-color .3s,color .3s}.brand span{color:var(--muted)!important}.eyebrow,.tag,.footnote{color:var(--muted)}h1 em{color:var(--green)}.card{background:var(--surface);border-color:var(--line);border-radius:var(--radius)}.card.on{background:var(--active);border-color:var(--border-active)}.icon,.slider{color:var(--green)}.toggle{border-color:var(--line);color:var(--muted)}.on .toggle{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}input[type=range]{background:var(--track);accent-color:var(--accent)}input[type=range]::-webkit-slider-thumb{background:var(--accent)}input[type=range]::-moz-range-thumb{background:var(--accent);border:0;width:10px;height:10px;border-radius:50%}.preset,.mode button,.filter{color:var(--muted)}.preset:hover,.preset.active,.mode button.active{background:var(--soft);border-color:var(--border-active);color:var(--ink)}.filter.active,.play,.visual-switch[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.visual-switch{background:var(--surface)}.player{background:var(--player);border-color:var(--line);border-radius:calc(var(--radius) + 2px)}.reset:hover{background:var(--soft)}.reset:active{background:var(--active)}.timer select{color:var(--ink)}.timer select option{background:var(--surface);color:var(--ink)}.bars i{background:var(--green)}button:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--green)}
.header-tools{display:flex;align-items:center;gap:25px}.appearance-button{border:1px solid var(--line);border-radius:25px;padding:9px 14px;background:var(--surface);color:var(--ink);font-size:12px;display:flex;align-items:center;gap:8px}.appearance-button svg{width:16px;height:16px}.appearance-button:hover{background:var(--soft)}
.appearance-dialog{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:24px;padding:28px;width:min(500px,calc(100% - 28px));max-height:85dvh;overflow:auto;box-shadow:0 30px 120px #0003}.appearance-dialog::backdrop{background:#11232670;backdrop-filter:blur(6px)}.appearance-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.appearance-heading h2{font:600 24px Manrope,sans-serif;letter-spacing:-.8px;margin:0}.appearance-dialog p{font-size:12px;color:var(--muted);line-height:1.7}.close-appearance{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:50%;width:31px;height:31px;font-size:20px}.appearance-dialog h3{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;font-weight:600;color:var(--muted);margin:25px 0 12px}.theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.theme-choice{border:1px solid var(--line);border-radius:13px;background:var(--bg);color:var(--ink);text-align:left;padding:10px;position:relative}.theme-choice[aria-pressed=true]{outline:2px solid var(--green);outline-offset:1px}.theme-choice span{display:block;font-size:11px;font-weight:500;margin-top:8px}.theme-choice[aria-pressed=true]:after{content:'✓';position:absolute;right:14px;bottom:11px;font-size:11px;color:var(--green)}.palette-preview{height:47px;border-radius:7px;background:var(--sample-bg);display:flex;align-items:center;padding:8px;gap:5px}.palette-preview i{display:block;height:24px;flex:1;background:var(--sample-surface);border:1px solid var(--sample-line);border-radius:4px}.palette-preview i:last-child{background:var(--sample-accent)}.style-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.style-choice{font-size:12px;padding:12px 4px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px}.style-choice[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.style-choice small{display:block;font-size:9px;margin-top:5px;opacity:.78}.appearance-dialog .appearance-saved{margin:23px 0 0;font-size:10px}.appearance-done{width:100%;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);padding:12px;margin-top:15px;font-size:12px}
/* Three design treatments can be combined with every palette. */
[data-style=minimal]{--radius:4px}[data-style=minimal] .card{box-shadow:none;border-width:0 0 1px;background:transparent}[data-style=minimal] .card.on{background:var(--active);border-width:1px}[data-style=minimal] .preset,[data-style=minimal] .filter,[data-style=minimal] .mode button,[data-style=minimal] .visual-switch,[data-style=minimal] .reset,[data-style=minimal] .appearance-button{border-radius:5px}[data-style=minimal] .scene{border-radius:5px}[data-style=minimal] .player{box-shadow:0 5px 20px #00000008}
[data-style=glass]{--radius:23px}[data-style=glass] body{background-image:radial-gradient(ellipse at 15% 10%,color-mix(in srgb,var(--glow) 35%,transparent),transparent 55%),radial-gradient(ellipse at 88% 75%,color-mix(in srgb,var(--glow) 30%,transparent),transparent 50%);background-attachment:fixed}[data-style=glass] .card{background:color-mix(in srgb,var(--surface) 65%,transparent);backdrop-filter:blur(14px);box-shadow:0 6px 25px #122a3110;border-color:color-mix(in srgb,var(--line) 65%,var(--surface))}[data-style=glass] .card.on{background:color-mix(in srgb,var(--active) 85%,transparent);border-color:var(--border-active);box-shadow:0 5px 25px color-mix(in srgb,var(--glow) 35%,transparent)}[data-style=glass] .player{backdrop-filter:blur(24px);background:color-mix(in srgb,var(--surface) 80%,transparent);box-shadow:0 12px 45px #0002}
@media(max-width:580px){.header-tools{gap:10px}.appearance-button{font-size:11px;padding:9px 12px}.appearance-dialog{padding:22px}.theme-options{gap:8px}.theme-choice{padding:8px}.theme-choice[aria-pressed=true]:after{right:9px;bottom:9px}}@media(prefers-reduced-motion:reduce){body{transition:none}}