/* Calm studio visual layer. Functional geometry and interaction remain in styles.css. */
:root, html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0d0e10; --bg-elevated:#121417; --panel:#17191d; --panel-2:#1c1f24; --panel-3:#24282e;
  --text:#f2f0e9; --muted:#aaa9a3; --muted-2:#7d7f82;
  --line:rgba(242,240,233,.10); --line-strong:rgba(242,240,233,.18);
  --root:#c9a765; --root-ink:#17120a; --scale:#6f8fa8; --chord:#9a7f88; --focus:#72ae8d; --danger:#c86d66; --outside:#474b52; --wood:#664c35;
  --fretboard-surface:#493727; --fretboard-label:#17191d; --fret-note:#25272b; --fret-note-ink:#f2f0e9; --fret-inlay:#b8aa92;
  --game-card:var(--panel); --game-card-active:var(--panel-2); --game-console:var(--panel); --game-hud:var(--panel-2); --game-stage:#111317; --game-stage-raised:#1a1d22; --game-stage-line:rgba(201,167,101,.46); --game-control:var(--panel-2);
  --radius-sm:8px; --radius:14px; --radius-lg:18px; --shadow:0 12px 32px rgba(0,0,0,.20);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px;
  --transition:140ms ease; --focus-ring:0 0 0 3px rgba(201,167,101,.34);
}
html[data-theme="light"] {
  color-scheme:light;
  --bg:#eceae5; --bg-elevated:#f4f2ed; --panel:#faf9f6; --panel-2:#f1efea; --panel-3:#e7e4de;
  --text:#202226; --muted:#65686d; --muted-2:#85878a;
  --line:rgba(32,34,38,.11); --line-strong:rgba(32,34,38,.19);
  --root:#9a7435; --root-ink:#fffdf8; --scale:#4f718a; --chord:#80646d; --focus:#39785a; --danger:#a74742; --outside:#c5c3be; --wood:#806044;
  --fretboard-surface:#856548; --fretboard-label:#e8e2d8; --fret-note:#f8f4eb; --fret-note-ink:#292722; --fret-inlay:#e4d9c8;
  --game-card:#faf9f6; --game-card-active:#f0ece4; --game-console:#faf9f6; --game-hud:#eeeae2; --game-stage:#f5f2eb; --game-stage-raised:#fffdf8; --game-stage-line:rgba(154,116,53,.48); --game-control:#eeeae2;
  --shadow:0 10px 28px rgba(39,35,28,.10);
}

html,body { max-width:100%; }
body { min-width:0; background:var(--bg); line-height:1.65; }
button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--root); outline-offset:3px; box-shadow:var(--focus-ring); }
.kicker { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:none; }
.screen-heading h2 { font-size:clamp(26px,3vw,38px); font-weight:700; }

.button { min-height:42px; border-radius:10px; font-weight:700; transition:color var(--transition),border-color var(--transition),background var(--transition); }
.button:hover,.button:active { transform:none; border-color:var(--root); }
.button:hover { background:var(--panel-2); }
.button.primary,.brand-mark,.instrument-index,.skip-link,.tap-pad,.falling-note,.demo-guitar button.is-active strong,.theory-syllabus-item.is-complete>span { color:var(--root-ink); border-color:var(--root); background:var(--root); background-image:none; box-shadow:none; }
.button.primary:hover { background:color-mix(in srgb,var(--root) 86%,var(--text)); }
.button.subtle { background:var(--panel-3); }.button.ghost{color:var(--muted);border-color:transparent}.button.danger{background:var(--danger)}
.button.large { min-height:50px; border-radius:10px; }
.icon-button,.sound-status,select,input[type="number"],.toggle-label { border-radius:10px; background:var(--panel-2); box-shadow:none; }
button:disabled,select:disabled,input:disabled { opacity:.52; cursor:not-allowed; }

.sidebar { background:var(--bg-elevated); background-image:none; box-shadow:none; border-inline-start:1px solid var(--line); }
.brand-mark,.instrument-index { transform:none; border-radius:10px; }
.nav-item { border-radius:8px; font-weight:650; }.nav-item:hover{background:var(--panel)}
.nav-item.is-active { background:var(--panel-2); background-image:none; box-shadow:inset -2px 0 var(--root); }
.sidebar-progress { border-radius:10px; background:transparent; }
.topbar { border-bottom-color:var(--line); background:color-mix(in srgb,var(--bg) 94%,transparent); }

.welcome { color:var(--text); background:var(--bg); background-image:none; gap:clamp(28px,5vw,72px); padding:clamp(28px,6vw,78px); }
.welcome-glow{display:none}.welcome h1{font-size:clamp(40px,6vw,68px);line-height:1.02}
.welcome-demo { padding:20px; border-color:var(--line-strong); border-radius:var(--radius-lg); background:var(--panel); box-shadow:var(--shadow); backdrop-filter:none; }
.live-dot,.mic-pulse{box-shadow:none;animation:none}
.onboarding{background:rgba(13,14,16,.88);backdrop-filter:blur(8px)}
.onboarding-panel{border-radius:var(--radius-lg);background:var(--panel);background-image:none;box-shadow:var(--shadow)}
.onboarding-panel h2{font-size:clamp(30px,5vw,46px)}

.control-card,.instrument-card,.info-card,.data-card,.explanation-card,.analysis-card,.formula-card,.chord-builder-card,.recognizer-result,.exercise-card,.lesson-content,.settings-card,.danger-zone,.amp-card,.game-console,.theory-lesson,.rhythm-console {
  border-color:var(--line); border-radius:var(--radius); background:var(--panel); background-image:none; box-shadow:none;
}
.dashboard-hero { min-height:250px; border-radius:var(--radius-lg); background:var(--panel); background-image:none; box-shadow:none; }
.dashboard-hero h2{font-size:clamp(36px,5vw,58px);line-height:1.05}
.level-dial{width:128px;border:1px solid var(--line-strong);background:var(--panel-2);background-image:none;box-shadow:none}
.level-dial strong{color:var(--text);font-size:42px}
.dashboard-metrics article,.stat-card{min-height:104px;border-radius:var(--radius);background:var(--panel)}
.week-chart i,.bar-track i,.mastery-radar b{background:var(--root);background-image:none}
.pick-badge{border-radius:var(--radius-sm);background:var(--panel-3);color:var(--text)}

.theory-level-card,.lesson-item,.theory-syllabus,.theory-syllabus-item,.theory-application section,.lesson-theory article,.pedagogy-brief section,.mastery-check,.diagnostic-question,.diagnostic-result,.glossary-card {
  border-radius:10px; background:var(--panel); background-image:none; box-shadow:none;
}
.theory-level-card:hover,.theory-level-card.is-active,.theory-syllabus-item:hover,.theory-syllabus-item.is-active { transform:none; border-color:var(--line-strong); background:var(--panel-2); background-image:none; box-shadow:none; }
.theory-lesson-head h3{font-size:clamp(30px,4vw,46px);line-height:1.1}
.theory-progress-ring{border:1px solid var(--line-strong);background:var(--panel-2)}.theory-progress-ring strong{color:var(--text)}
.theory-prose section{border-inline-start:2px solid var(--line-strong);border-inline-end:0;background:transparent}
.lesson-discovery,.lesson-outcome,.source-panel{border-color:var(--line)!important;border-radius:var(--radius);background:var(--panel-2)!important;background-image:none!important;box-shadow:none}
.lesson-quiz,.lesson-completion,.returning-offer{border-radius:var(--radius);background:var(--panel-2)}
.option-button{border-radius:10px;background:var(--panel-2);font-weight:700}
.option-button:hover{transform:none;border-color:var(--root);box-shadow:none}
.option-button.is-correct{color:var(--text);border-color:var(--focus);background:color-mix(in srgb,var(--focus) 16%,var(--panel))}
.option-button.is-wrong{color:var(--text);border-color:var(--danger);background:color-mix(in srgb,var(--danger) 16%,var(--panel))}
.hint-text:not(:empty){background:var(--panel-3)}

.instrument-card{overflow:hidden}.guitar-board{background:var(--fretboard-surface);background-image:none}
.guitar-string-label,.guitar-fret-labels,.guitar-fret-labels span:first-child{color:var(--fret-note-ink);background:var(--fretboard-label)}
.note-marker{width:38px;min-width:38px;height:38px;color:var(--fret-note-ink);border-radius:50%;border-color:color-mix(in srgb,var(--fret-note-ink) 18%,transparent);background:var(--fret-note);box-shadow:0 2px 6px rgba(0,0,0,.20);transition:border-color var(--transition),background var(--transition),opacity var(--transition)}
.guitar-note:hover .note-marker,.guitar-note:focus-visible .note-marker{transform:none;border-color:var(--root);box-shadow:0 2px 6px rgba(0,0,0,.20)}
.guitar-note.is-focus .note-marker,.guitar-note.is-user-selected .note-marker{transform:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent)}
.guitar-note.is-correct .note-marker,.guitar-note.is-wrong .note-marker{box-shadow:none}.guitar-note.is-question .note-marker{animation:none}
.guitar-note.is-ringing .note-marker,.piano-key.is-ringing{animation:visualRing 280ms ease}@keyframes visualRing{50%{filter:brightness(1.18)}}
.fret-inlay{z-index:0;left:50%;display:block;width:20px;height:20px;border:1px solid color-mix(in srgb,var(--fret-note-ink) 18%,transparent);background:var(--fret-inlay);background-image:none;box-shadow:0 1px 2px rgba(0,0,0,.18);pointer-events:none}
.fret-inlay.is-single,.fret-inlay.is-double{bottom:-10px;transform:translateX(-50%)}
.piano-board{border-radius:10px;box-shadow:inset 0 -8px 16px rgba(0,0,0,.16)}
.piano-key.is-white{background:#f1f0eb;background-image:none}.piano-key.is-black{background:#202226;background-image:none;box-shadow:0 5px 8px rgba(0,0,0,.24)}
.piano-key.is-scale,.piano-key.is-chord,.piano-key.is-root,.piano-key.is-focus,.piano-key.is-user-selected{box-shadow:inset 0 -5px 0 rgba(0,0,0,.10)}

.exercise-card::before{content:none}.practice-dashboard,.metric-strip{border-radius:var(--radius)}
.game-card{min-height:210px;border-radius:var(--radius);background:var(--game-card);background-image:none;box-shadow:0 8px 20px color-mix(in srgb,var(--text) 7%,transparent)}
.game-card:hover,.game-card.is-active{transform:none;border-color:var(--root);background:var(--game-card-active);background-image:none;box-shadow:0 10px 24px color-mix(in srgb,var(--text) 9%,transparent)}
.game-card i{color:var(--root);font-size:26px}.game-card strong{font-size:20px}.game-number{color:var(--muted-2);font-size:24px}
.game-console{border-radius:var(--radius-lg);background:var(--game-console);box-shadow:0 12px 30px color-mix(in srgb,var(--text) 8%,transparent)}
.game-settings select{background:var(--game-control)}
.game-hud{border-color:var(--line-strong);border-radius:10px;background:var(--game-hud)}
.game-hud span{color:var(--muted)}.game-hud strong{color:var(--text)}
.game-stage{color:var(--text);border-color:var(--line-strong);border-radius:var(--radius);background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--root) 10%,transparent),transparent 52%),var(--game-stage);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 5%,transparent)}
.game-empty span,.game-prompt p,.game-summary p{color:var(--muted)}
.structure-row span,.game-summary>div span{border:1px solid var(--line);background:var(--game-stage-raised)}
.game-summary>div span{padding:10px 14px;border-radius:10px}.game-summary b{color:var(--text)}
.game-actions .button.ghost{border-color:var(--line);background:var(--game-control);color:var(--text)}
.game-instrument{border-color:var(--line-strong);background:var(--game-console)}
.falling-note{box-shadow:0 6px 18px rgba(0,0,0,.24)}
.hit-line{color:var(--root);border-color:var(--game-stage-line)}
.game-feedback>div{border:1px solid var(--line);border-radius:10px}
.game-feedback .success,.game-feedback .feedback-success{color:var(--focus);border-color:color-mix(in srgb,var(--focus) 45%,var(--line));background:color-mix(in srgb,var(--focus) 12%,var(--game-console))}
.game-feedback .failure,.game-feedback .feedback-error{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:color-mix(in srgb,var(--danger) 12%,var(--game-console))}
.game-feedback .feedback-retry{color:var(--root);border-color:color-mix(in srgb,var(--root) 45%,var(--line));background:color-mix(in srgb,var(--root) 12%,var(--game-console))}
.rhythm-score{color:var(--text);border-color:var(--line-strong);background:var(--panel-2);background-image:none}
.rhythm-results{color:var(--muted);border-color:var(--line);background:var(--panel)}
.rhythm-settings select,.rhythm-settings input{color:var(--text);border-color:var(--line);background:var(--panel-2)}
.piano-key.is-dimmed{opacity:.18;filter:saturate(.35)}

.glossary-card h3{font-size:21px}.glossary-search input{min-height:48px;border-radius:10px}.bar-track{height:6px}
.settings-card label{font-weight:600}.about-dialog{border-radius:var(--radius-lg);background:var(--panel);box-shadow:var(--shadow)}
.global-legend,.mobile-bottom-nav{border-radius:var(--radius);background:color-mix(in srgb,var(--bg-elevated) 94%,transparent);box-shadow:var(--shadow);backdrop-filter:blur(10px)}

@media(max-width:700px){.dashboard-hero{min-height:0;padding:24px}.dashboard-hero h2{font-size:clamp(32px,10vw,46px)}.level-dial{width:96px}.game-card{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}