/* Paired skin variants. The stored theme and skin preserve existing preferences. */
:root{--control:#e2e2d0;--control-hover:#dddcc7;--selected:#163c42;--selected-ink:#e5b654;--warm-ink:#163c42}
.header-controls{display:flex;align-items:center;gap:9px;flex-shrink:0}
.appearance-button{min-width:60px;height:44px;display:grid;place-items:center;border:1px solid #99a89b;background:transparent;padding:0 10px;font-size:.75rem;font-weight:700;line-height:1;white-space:nowrap}
.appearance-button:hover,.appearance-button[aria-expanded=true]{background:var(--control)}
.appearance-dialog{position:fixed;inset:84px max(12px,calc((100vw - 736px)/2)) auto auto;margin:0;width:min(348px,calc(100vw - 24px));padding:18px;color:var(--text);background:var(--surface);border:1.5px solid var(--text);border-radius:3px;max-height:calc(100dvh - 108px);overflow:auto;box-shadow:0 12px 35px #102e3526}
.appearance-dialog::backdrop{background:#102e3533}
.appearance-dialog .dialog-heading{margin-bottom:18px}
.appearance-dialog h2{font-family:inherit;font-size:1rem;font-weight:750;text-transform:none;letter-spacing:0;mask-image:none;-webkit-mask-image:none}
.appearance-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:16px}
.appearance-options button{min-width:0;padding:6px 6px 8px;border:1px solid var(--line);background:transparent;display:flex;flex-direction:column;gap:7px;position:relative;border-radius:3px;text-align:left}
.appearance-options button:hover{background:var(--control)}
.appearance-options button[aria-pressed=true]{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.appearance-option-label{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:.75rem;width:100%;padding:0 3px;line-height:1.35}
.appearance-option-label strong{font-weight:700}
.appearance-variant{display:block;font-size:.6875rem;color:var(--muted);margin-top:2px}
.choice-check{visibility:hidden;font-size:.9rem;color:var(--text)}
[aria-pressed=true]>.appearance-option-label>.choice-check{visibility:visible}
/* Preview colours are fixed to their own variant, not the active page theme. */
.skin-grid button{--sample-bg:#f0ecdf;--sample-ink:#163c42;--sample-line:#bdc3b8;--sample-frame:#e6e2d5;--sample-panel:var(--sample-bg)}
.skin-grid [data-appearance-theme=dark]{--sample-bg:#213437;--sample-ink:#eee7d4;--sample-line:#4d6361;--sample-frame:#182628}
.skin-grid [data-appearance-skin=miami][data-appearance-theme=light]{--sample-bg:#b7c7d6;--sample-ink:#343956;--sample-line:#a197b5;--sample-frame:#d8e6ea;--sample-panel:linear-gradient(125deg,#a0c4d5,#d7adbf)}
.skin-grid [data-appearance-skin=miami][data-appearance-theme=dark]{--sample-bg:#d995a0;--sample-ink:#4a3150;--sample-line:#ac7088;--sample-frame:#674966;--sample-panel:linear-gradient(125deg,#ce8bae,#efb578)}
.skin-grid [data-appearance-skin=la][data-appearance-theme=light]{--sample-bg:#efb936;--sample-ink:#512c78;--sample-line:#ae7f29;--sample-frame:#eee8dc}
.skin-grid [data-appearance-skin=la][data-appearance-theme=dark]{--sample-bg:#512c78;--sample-ink:#f8c64c;--sample-line:#9e7cb8;--sample-frame:#30233f}
.skin-preview{height:57px;width:100%;padding:5px 8px;display:grid;grid-template-columns:17px minmax(0,1fr);align-items:center;gap:3px 6px;border-radius:2px;color:var(--sample-ink);background:var(--sample-panel);border:3px solid var(--sample-frame)}
.mini-meter{height:24px;background:repeating-linear-gradient(to top,transparent 0 3px,var(--sample-bg) 3px 5px),linear-gradient(to top,#769783 60%,#e5b654 60% 82%,#bd563d 82%);clip-path:polygon(0 40%,25% 40%,25% 10%,55% 10%,55% 30%,80% 30%,80% 60%,100% 60%,100% 100%,0 100%)}
.preview-value{font:900 30px/1 'Arial Black',Arial,sans-serif;letter-spacing:-.07em;text-align:center;min-width:0}
.preview-value svg{display:block;width:100%;height:31px;overflow:visible}
[data-appearance-skin=miami] .preview-value{font:400 35px/1 'Miami Display',Impact,sans-serif;letter-spacing:.005em}
[data-appearance-skin=la] .preview-value{font:400 27px/1 'LA Display',serif;letter-spacing:-.05em;-webkit-text-stroke:1px #fff7e8;paint-order:stroke fill}
.mini-rule{height:2px;grid-column:1/-1;background:linear-gradient(to right,var(--sample-ink) 40%,#e5b654 40% 46%,var(--sample-line) 46%)}
.appearance-hint{font-size:.6875rem;line-height:1.5;color:var(--muted);margin:0}
@media(max-width:619px){.header-controls{gap:6px}.site-header{gap:9px}.appearance-dialog{top:66px;max-height:calc(100dvh - 82px);padding:15px}}

/* Dark uses the same cream/teal/ochre family. The original VU canvas is unchanged. */
html[data-theme=dark]{color-scheme:dark;--bg:#182628;--surface:#213437;--text:#eee7d4;--muted:#b1bfb5;--line:#4d6361;--coral:#ee9275;--asmm-link:#83baff;--control:#2c4243;--control-hover:#364e4e;--selected:#e5b654;--selected-ink:#182e32;--warm-ink:#182e32}
.brand .logo-dark{display:none}
html[data-theme=dark] .brand .logo-light{display:none}
html[data-theme=dark] .brand .logo-dark{display:block}
html[data-theme=dark] :is(.language-switch button,.appearance-button,.mode-switch button,.signatures button,.sounds button,select,.poly-choices button,.poly-speed-actions button,#backbeat,.swing-labels button,#swing-reset,.practice-fields input,.preset-form input,.share-link-label input,.preset-form button,.small-buttons button,.preset-row button,#install-app){border-color:var(--line)}
html[data-theme=dark] :is(.language-switch button[aria-pressed=true],.mode-switch button[aria-pressed=true],.signatures button[aria-pressed=true],.sounds button[aria-pressed=true],.preset-form button){background:var(--selected);color:var(--selected-ink);border-color:var(--selected)}
html[data-theme=dark] .sounds button[aria-pressed=true]:after{background:var(--selected-ink)}
html[data-theme=dark] .workspace{border-color:#7f9188}
html[data-theme=dark] .settings-details{background:#24383a;border-color:var(--line)}
html[data-theme=dark] :is(.signatures button,.sounds button,.subdivision-button,.subdivision-options button){background:var(--control);border-color:var(--line)}
html[data-theme=dark] :is(.subdivision-button:hover,.subdivision-options button:hover){background:var(--control-hover)}
html[data-theme=dark] .subdivision-button.swung{background:#3c4135}
html[data-theme=dark] #swing-reset.at-center{background:var(--control);border-color:var(--line)}
html[data-theme=dark] .pixel-beats .beat{background:#2e4847;border-color:#637e74}
html[data-theme=dark] .beat.accent .beat-meta{background:#483e33;color:#f0ae83}
html[data-theme=dark] .pixel-beats .beat.muted{background:#293b3b;border-color:var(--line)}
html[data-theme=dark] .beat.muted .meter-face{background:#293c3b}
html[data-theme=dark] .beat.muted .beat-caption{color:var(--coral)}
html[data-theme=dark] .pixel-beats .beat.active .beat-meta{color:var(--warm-ink);background:var(--ochre);border-bottom-color:var(--ochre)}
html[data-theme=dark] .pixel-beats .beat.muted.active .beat-meta{background:#504b39;color:var(--text);border-bottom-color:var(--coral)}
html[data-theme=dark] .play-btn{background:var(--ochre);color:var(--warm-ink);border-color:var(--ochre)}
html[data-theme=dark] .tap-btn{color:var(--text);background:var(--control);border-color:#779285}
html[data-theme=dark] .tap-btn.tapped{background:var(--ochre);color:var(--warm-ink)}
html[data-theme=dark] :is(.step-btn:hover:not(:disabled),.swing-labels button:hover:not(:disabled),.subdivision-button:active,.subdivision-options button[aria-pressed=true],.poly-speed-actions button[aria-pressed=true],#backbeat[aria-pressed=true],.grouping-row button:hover,.preset-row button:hover,.small-buttons button:hover){background:var(--ochre);color:var(--warm-ink)}
html[data-theme=dark] .switch{background:var(--control);border-color:var(--line)}
html[data-theme=dark] .switch[aria-checked=true]{background:#547568;border-color:#8caa96}
html[data-theme=dark] .switch span{background:var(--muted)}
html[data-theme=dark] .switch[aria-checked=true] span{background:var(--ochre)}
html[data-theme=dark] .poly-mute{background:#10383e;border-color:#637e74}
html[data-theme=dark] .poly-voice.muted .poly-mute{background:transparent}
html[data-theme=dark] :is(.error,.practice-status.silent){color:var(--coral)}
html[data-theme=dark] .check-label input{accent-color:var(--ochre)}
html[data-theme=dark] input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#a8bbac 0 var(--fill),#48615b var(--fill) 100%)}
html[data-theme=dark] input[type=range]::-webkit-slider-thumb{border-color:#182e32;outline:1px solid #8caa96}
html[data-theme=dark] input[type=range]::-moz-range-track{background:#48615b}
html[data-theme=dark] input[type=range]::-moz-range-progress{background:#a8bbac}
html[data-theme=dark] input[type=range]::-moz-range-thumb{border-color:#182e32;outline:1px solid #8caa96}
html[data-theme=dark] :is(.subdivision-dialog,.appearance-dialog)::backdrop{background:#07141666}
html[data-theme=dark] .school-link:hover,html[data-theme=dark] .school-link:focus-visible{color:#142e39}

@media(max-width:359px){.skin-preview{padding:5px;gap:3px 5px}.preview-value{font-size:26px}[data-appearance-skin=la] .preview-value{font-size:23px}}

/* Same rhythmic timeline in every skin; keep Flat light's original colours. */
html[data-theme=dark] .subdivision-track,
html[data-skin=miami] .subdivision-track,
html[data-skin=la] .subdivision-track {
  --subdivision-line: var(--line);
  --subdivision-dot: var(--muted);
}

/* Billie preview swatches follow their own light/dark palette. */
.skin-grid [data-appearance-skin=billie][data-appearance-theme=light]{--sample-bg:#c9ed6b;--sample-ink:#17200c;--sample-line:#81994c;--sample-frame:#dce7c7}
.skin-grid [data-appearance-skin=billie][data-appearance-theme=dark]{--sample-bg:#10160c;--sample-ink:#b6ef20;--sample-line:#526633;--sample-frame:#0b0e09}
[data-appearance-skin=billie] .preview-value{font:800 italic 33px/1 'Court Condensed','Arial Black',Arial,sans-serif;letter-spacing:-.045em}