/* Theme overrides change colour only; piano note surfaces keep their identity. */
:root[data-theme=dark]{color-scheme:dark;--bg:#000000;--panel:#141414;--panel2:#202020;--stroke:#343434;--text:#ffffff;--muted:#b8b8b8;--green:#45ce88;--green2:#62dca0;--amber:#efbb71}
:root[data-theme=dark] :is(.panel,.setting,.install-card,.chord-card,.degree-option,select,.mode){background:var(--panel);border-color:var(--stroke);color:var(--text)}
:root[data-theme=dark] :is(.result,.note,.transpose-card,.source-picker,.chord-mode,.chord-inversions,.install-platforms){background:var(--panel2);border-color:var(--stroke);color:var(--text)}
:root[data-theme=dark] :is(.intro p,.page-intro p,.small-label,.confidence,.footer,.source-help,.chord-context,.chord-audio-note,.install-heading p,.install-card>p,.install-note,.install-steps small,.setting small){color:var(--muted)}
:root[data-theme=dark] :is(.note strong,.install-heading h2,.install-steps li,.setting strong,.chord-card-head h2){color:var(--text)}
:root[data-theme=dark] :is(.listen-button,.source-option[aria-pressed=true],.install-native,.install-platforms button[aria-pressed=true],.chord-mode button[aria-pressed=true],.chord-inversions button[aria-pressed=true],.chord-play,.degree-option[aria-pressed=true]){background:#087a43;color:#fff;border-color:#248f57}
:root[data-theme=dark] :is(.listen-button.secondary,.secondary,.chord-use-detected,.chord-result-link){background:var(--panel2);color:var(--green);border-color:var(--stroke)}
:root[data-theme=dark] .desktop-dock{background:#141414c9;border-color:#ffffff30;box-shadow:0 12px 36px #0006}
:root[data-theme=dark] .desktop-dock a{color:var(--muted)}
:root[data-theme=dark] .desktop-dock a.active{background:#087a43;color:white}
:root[data-theme=dark] .progress{background:#343434}
:root[data-theme=dark] .hint{background:var(--panel);color:#e0e0e0;border-color:#343434}
:root[data-theme=dark] .transpose{background:#087a43;color:#fff}
:root[data-theme=dark] .mode{color:#e8e8e8}
:root[data-theme=dark] [data-sileo-description]{color:#c8c8c8!important}
:root[data-theme=dark] .vk-update-title{color:#ffffff!important}
:root[data-theme=dark] [data-sileo-description]:before{background:#252525;color:#f0f0f0}
:root[data-theme=dark] [data-sileo-badge]{background:#292929;color:#8ce8ae}
:root[data-theme=dark] .update-backdrop{background:#0005}
:root[data-theme=dark] :is(.outline,.chord-link){background:var(--panel);color:var(--text);border-color:var(--stroke)}
:root[data-theme=dark] .tag{color:var(--green)}
:root[data-theme=dark] .desktop-dock a[aria-current]{background:#087a43;color:#fff}
:root[data-theme=dark] .vk-launch{background:var(--bg);color:var(--text)}
:root[data-theme=dark] :is(.capture-card,.settings){background:var(--panel);border-color:var(--stroke);color:var(--text)}
:root[data-theme=dark] .source-option:not([aria-pressed=true]){color:var(--muted)}

/* One rounded Settings frame on phones; rows are separated without nested boxes. */
@media(max-width:959px){
 .page-content .settings{padding:20px 18px;background:var(--panel);border:1px solid var(--stroke);border-radius:24px;overflow:hidden}
 .settings .section-header{gap:12px;margin-bottom:3px}
 .settings .section-header h2{margin:0;font-size:16px;letter-spacing:-.025em}
 .settings .setting{gap:14px;padding:18px 0;margin:0;background:transparent;border:0;border-bottom:1px solid var(--stroke);border-radius:0}
 .settings .setting:last-child{border-bottom:0;padding-bottom:0}
 .settings .setting>div{min-width:0;flex:1}
 .settings .setting strong{font-size:13px}
 .settings .setting small{font-size:11px;line-height:1.5}
 .settings .setting select{flex:0 0 auto;min-width:112px;max-width:46%;min-height:44px;padding:10px;font-size:13px}
}
@media(max-width:359px){
 .page-content .settings{padding:18px 16px}
 .settings .setting{align-items:stretch;flex-direction:column;gap:10px}
 .settings .setting select{width:100%;max-width:none}
}
/* CSS glass material works across browsers; this is not native iOS Liquid Glass. */
.desktop-dock{isolation:isolate;background:linear-gradient(145deg,#ffffffb8,#eff8f37a 52%,#ffffffa3);border:1px solid #ffffffc9;box-shadow:0 10px 32px #123b2426,inset 0 1px 0 #ffffffed,inset 0 -1px 0 #ffffff78;-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%)}
.desktop-dock:before{content:'';position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(165deg,#ffffff52,transparent 45%,#ffffff0d 70%,#ffffff2e)}
:root[data-theme=dark] .desktop-dock{background:linear-gradient(145deg,#ffffff24,#141414b3 52%,#ffffff14);border-color:#ffffff38;box-shadow:0 12px 36px #0006,inset 0 1px 0 #ffffff42,inset 0 -1px 0 #ffffff16}
:root[data-theme=dark] .desktop-dock:before{background:linear-gradient(160deg,#ffffff24,transparent 45%,#ffffff05 70%,#ffffff16)}
:root[data-theme=dark] .desktop-dock a{color:#e5e5e5}
:root[data-theme=dark] .desktop-dock a:hover:not([aria-current]){background:#ffffff12;color:#fff}
.desktop-dock a[aria-current]{background:linear-gradient(145deg,#149457,#087a43);box-shadow:inset 0 1px 0 #ffffff45,0 2px 6px #063d2421;color:#fff}
:root[data-theme=dark] .desktop-dock a[aria-current]{background:linear-gradient(145deg,#15995a,#087a43);color:#fff;box-shadow:inset 0 1px 0 #ffffff38,0 2px 8px #0002}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .desktop-dock{background:#f0f7f2}
 :root[data-theme=dark] .desktop-dock{background:#202020}
}
@media(prefers-reduced-transparency:reduce){.desktop-dock{background:#f0f7f2;-webkit-backdrop-filter:none;backdrop-filter:none}:root[data-theme=dark] .desktop-dock{background:#202020}}

/* Keep the listening action close to its heading, without repeated onboarding copy. */
#view-listen>.intro{display:block;margin-bottom:18px}
#view-listen>.intro h1{margin:0;font-size:clamp(30px,5vw,40px);line-height:1.12}
#view-listen>.source-picker{margin-bottom:20px}