/* Metsärinne Piano. The Metsärinne design system, family theme, light screen mode always
   (README: a site uses one screen mode, no switch). Square corners, hairlines, ink as the accent.
   App-specific additions, outside the system: the feedback colours below (--cue, --cue-lh, --ok, --miss),
   used only on the keyboard and on notes, never on panels or text blocks. */

@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/Jost-Wordmark.woff2") format("woff2"); font-weight: 100 900; font-display: block; }

:root {
  /* family-light */
  --surface: #f3f2ef; --surface-raised: #fbfbf9; --surface-sunken: #eae8e4;
  --line: #1a19171f; --line-strong: #1a19178c;
  --ink: #1a1917; --ink-2: #4d4a45; --ink-3: #67635e;
  --accent: #1a1917; --accent-hi: #3a3733; --on-accent: #f3f2ef; --focus-ring: #1a1917;
  --brass: #8a6428; --silver: #5d656d;
  --shadow-float: 0 24px 64px #16181b24;
  /* Feedback (app-specific) */
  --cue: #8a6428;      /* what to play, right hand: the system's light-mode brass */
  --cue-lh: #40474e;   /* what to play, left hand: the system's deep silver */
  --ok: #2e6b4b;
  --miss: #a5402c;
  --font-wordmark: Jost, "Futura PT", "Century Gothic", sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-40: 40px; --space-48: 48px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 2px; --control: 48px; --control-s: 44px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--surface); color: var(--ink); }
body { font: 400 17px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; min-height: 100vh; overscroll-behavior-y: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
img, svg { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--surface-raised); padding: 8px 12px; }

/* ---------- Type */
.display-hero { font: 400 clamp(3.25rem, 8vw, 6.5rem)/0.95 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.display { font: 400 clamp(2.25rem, 4.6vw, 3.75rem)/1.02 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.heading { font: 400 26px/1.15 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.statement { font: 400 clamp(1.875rem, 3.6vw, 3rem)/1.12 var(--font-display); letter-spacing: -0.012em; text-wrap: balance; }
.lead { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.caption { font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.02em; color: var(--ink-3); }
.spec { font: 400 13px/1.5 var(--font-mono); letter-spacing: 0.01em; color: var(--accent); }
.note { font-size: 15px; color: var(--ink-3); max-width: 62ch; }
.note .ic, .drill-fb .ic, .toast .ic { vertical-align: -3px; }
.card-text { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.mr-eyebrow { margin: 0; font: 500 12px/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.mr-eyebrow--accent { color: var(--accent); }

/* ---------- Wordmark (Metsärinne bundle.css, family) */
.mr-wm { display: inline-flex; align-items: center; font-family: var(--font-wordmark); font-size: 17px; line-height: 1; color: var(--ink); white-space: nowrap; text-decoration: none; --mr-acc: var(--ink); padding: 12px 0; }
.mr-wm__name { font-weight: 300; letter-spacing: 0.32em; }
.mr-wm__sep { flex: none; width: max(1px, 0.035em); height: 0.88em; margin: 0 0.62em 0 0.3em; background: var(--mr-acc); }
.mr-wm__desc { font-size: 0.63em; font-weight: 400; letter-spacing: 0.32em; margin-right: -0.32em; color: var(--mr-acc); }

/* ---------- Header */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-24); min-height: 72px; padding: env(safe-area-inset-top, 0px) max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px)); background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { display: inline-flex; align-items: center; min-height: var(--control-s); padding: 0 12px; font-size: 15px; color: var(--ink-2); text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.who { min-height: var(--control-s); min-width: var(--control-s); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; font-size: 14px; cursor: pointer; }
.who:hover { border-color: var(--ink); }
body.is-welcome .nav, body.is-welcome .who { display: none; }
@media (max-width: 760px) {
  .top { flex-wrap: wrap; gap: 0 var(--space-16); }
  .nav { order: 3; width: 100%; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .who { margin-left: auto; }
}

/* ---------- Page */
main { outline: none; }
.page { max-width: 1280px; margin: 0 auto; padding: var(--space-40) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(96px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); display: grid; gap: var(--space-40); align-content: start; }
.page--narrow { max-width: 880px; }
.page--lesson { max-width: 1040px; gap: var(--space-24); }
.page--wide { max-width: 1480px; gap: var(--space-24); }
.page-head { display: grid; gap: var(--space-16); }
.page-head--row { grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 760px) { .page-head--row { grid-template-columns: 1fr; } }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-s); justify-self: start; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.back:hover { color: var(--ink); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-24); }

.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic-fill { fill: currentColor; stroke: none; }

/* ---------- Controls (Metsärinne bundle.css) */
.mr-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--control); padding: 0 var(--space-24); border: 1px solid transparent; border-radius: var(--radius); font: 500 15px/1 var(--font-sans); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background .25s, border-color .25s, color .25s; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.mr-btn--primary { background: var(--accent); color: var(--on-accent); }
.mr-btn--primary:hover { background: var(--accent-hi); }
.mr-btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.mr-btn--ghost:hover { border-color: var(--accent); color: var(--accent-hi); }
.mr-btn--sm { min-height: var(--control-s); padding: 0 var(--space-16); font-size: 14px; }
.mr-btn[disabled] { opacity: .45; cursor: default; }
.mr-btn[aria-pressed="true"] { border-color: var(--ink); }
.linkbtn { min-height: var(--control-s); padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.linkbtn:hover { color: var(--ink); }
.mr-field { display: grid; align-content: start; gap: var(--space-8); min-width: 0; }
.mr-field__label { font: 500 12px/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.mr-field__control { width: 100%; min-height: var(--control-s); padding: var(--space-8) 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); font: 400 16px/1.5 var(--font-sans); transition: border-color .25s; }
.mr-field__control::placeholder { color: var(--ink-3); }
.mr-field__control:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.mr-field__control--select { appearance: none; -webkit-appearance: none; padding-right: var(--space-24); background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.mr-field__control--select option { background: var(--surface-raised); color: var(--ink); }
input[type="range"] { width: 100%; min-height: var(--control-s); accent-color: var(--ink); }
.file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-btn { position: relative; }

.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.seg-btn { min-height: 40px; min-width: 44px; padding: 0 14px; border: 0; border-right: 1px solid var(--line); background: transparent; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.seg-btn:last-child { border-right: 0; }
.seg-btn[aria-checked="true"] { background: var(--ink); color: var(--on-accent); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--surface-raised); }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px; font: 400 12px/1.4 var(--font-mono); color: var(--ink-3); }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink-3); }
.pill.is-on { color: var(--ink-2); }
.pill.is-on::before { background: var(--ok); border-color: var(--ok); animation: pulse 2s var(--ease) infinite; }
.pill.is-off::before { background: var(--miss); border-color: var(--miss); }
@keyframes pulse { 50% { opacity: .35; } }

.progress { position: relative; display: flex; align-items: center; gap: 12px; }
.progress > span:first-child { display: block; height: 2px; flex: 1; background: linear-gradient(var(--ink), var(--ink)) no-repeat left / var(--w, 0) 100%, var(--line); }
.progress > span:first-child { background: var(--line); }
.progress > span:first-child { position: relative; }
.progress-v { flex: none; min-width: 44px; text-align: right; }
.progress span[style] { position: relative; }
.progress { --track: var(--line); }
.progress > span:first-child { height: 2px; background: var(--ink); max-width: 100%; }
.progress::before { content: ""; position: absolute; left: 0; right: 56px; height: 2px; background: var(--line); }
.progress > span:first-child { flex: none; z-index: 1; }
.progress-v { margin-left: auto; }

/* ---------- Welcome */
.welcome { max-width: 1040px; padding-top: clamp(40px, 8vw, 96px); }
.welcome-form { display: grid; gap: var(--space-24); max-width: 880px; }
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.level-card { display: grid; gap: 6px; align-content: start; text-align: left; padding: 16px; min-height: 150px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; cursor: pointer; transition: border-color .25s, background .25s; }
.level-card:hover { border-color: var(--ink); }
.level-card[aria-checked="true"] { border-color: var(--ink); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--ink); }
.level-name { font: 400 22px/1.15 var(--font-display); }
.level-blurb { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Today */
.resume { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; }
.resume-title { font: 400 22px/1.2 var(--font-display); }
.plan { list-style: none; display: grid; border-top: 1px solid var(--line); }
.plan li { border-bottom: 1px solid var(--line); }
.plan-item { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-24); align-items: center; padding: 22px 0; text-decoration: none; transition: background .25s; }
.plan-item:hover .plan-go { border-color: var(--ink); }
.plan-n { align-self: start; padding-top: 4px; }
.plan-body { display: grid; gap: 4px; }
.plan-title { font: 400 clamp(22px, 2.6vw, 30px)/1.15 var(--font-display); letter-spacing: -0.01em; }
.plan-text { font-size: 15px; color: var(--ink-2); max-width: 70ch; }
.plan-go { display: inline-flex; align-items: center; min-height: var(--control-s); padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); font: 500 14px/1 var(--font-sans); }
.plan li:first-child .plan-go { }
@media (max-width: 600px) { .plan-item { grid-template-columns: 36px 1fr; } .plan-go { grid-column: 2; justify-self: start; } }
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-24); }
.card { display: grid; gap: 12px; align-content: start; padding: var(--space-24); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
a.card:hover { border-color: var(--line-strong); }
.card-title { font: 400 26px/1.15 var(--font-display); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 96px; align-items: end; }
.week-day { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; justify-items: center; }
.week-bar { position: relative; width: 100%; max-width: 28px; height: 100%; border-bottom: 1px solid var(--line-strong); }
.week-bar span { position: absolute; left: 0; right: 0; bottom: 0; min-height: 0; background: var(--ink); border-radius: 1px 1px 0 0; }
.week-l { font: 400 12px/1 var(--font-mono); color: var(--ink-3); }

/* ---------- Learn */
.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-24); }
.track-card { display: grid; gap: 12px; align-content: start; padding: var(--space-24); border: 1px solid var(--line-strong); border-radius: var(--radius); text-decoration: none; min-height: 240px; transition: border-color .25s, background .25s; }
.track-card:hover { border-color: var(--ink); background: var(--surface-raised); }
.track-title { font: 400 32px/1.05 var(--font-display); letter-spacing: -0.012em; }
.track-next { font-size: 14px; color: var(--ink-2); margin-top: auto; }
.level-block { display: grid; gap: var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--line); }
.level-head { display: grid; gap: 6px; }
.unit { display: grid; gap: 8px; }
.unit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.unit-title { font: 500 15px/1.4 var(--font-sans); letter-spacing: 0.01em; }
.lessons { list-style: none; border-top: 1px solid var(--line); }
.lessons li { border-bottom: 1px solid var(--line); }
.lesson-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) 2fr 64px 72px; gap: 16px; align-items: baseline; padding: 14px 0; text-decoration: none; }
.lesson-row:hover .lesson-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.lesson-title { font: 400 21px/1.2 var(--font-display); }
.lesson-sum { font-size: 15px; color: var(--ink-2); }
.lesson-meta { color: var(--ink-3); }
.lesson-status { font: 500 12px/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.lesson-row.is-next .lesson-status { color: var(--ink); }
.lesson-row.is-done .lesson-title { color: var(--ink-2); }
@media (max-width: 760px) { .lesson-row { grid-template-columns: 1fr auto; } .lesson-sum { grid-column: 1 / -1; } .lesson-meta { display: none; } }

/* ---------- Lesson */
.lesson-head { display: grid; gap: 12px; }
.goals { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.goals li { font-size: 15px; color: var(--ink-2); padding-left: 16px; position: relative; }
.goals li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 8px; height: 1px; background: var(--ink-3); }
.steps { display: flex; gap: 4px; }
.steps span { flex: 1; height: 2px; background: var(--line); transition: background .3s; }
.steps span.is-done { background: var(--ink-3); }
.steps span.is-now { background: var(--ink); }
.lesson-stage { display: grid; gap: var(--space-24); min-height: 320px; align-content: start; }
.lesson-nav { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--line); z-index: 5; }
.step-text { display: grid; gap: 16px; max-width: 68ch; }
.step-text p, .tip p, .piece-text p { font-size: 18px; line-height: 1.65; color: var(--ink); }
.step-text ul, .step-text ol, .tip ul { padding-left: 1.2em; display: grid; gap: 6px; font-size: 18px; line-height: 1.6; }
.step-text strong { font-weight: 600; }
.tip { display: grid; gap: 10px; max-width: 68ch; padding: 20px var(--space-24); border-left: 1px solid var(--ink); background: var(--surface-raised); }
.tip p { font-size: 16px; color: var(--ink-2); }
.fig { margin: 0; display: grid; gap: 12px; }
.fig-cap { font-size: 15px; color: var(--ink-2); max-width: 68ch; }
.fig-cap--top { order: -1; }
.keys-fig { max-width: 760px; }
.step-quiz { display: grid; gap: 16px; max-width: 760px; }
.quiz-opts { display: grid; gap: 8px; }
.done { display: grid; gap: var(--space-24); padding: var(--space-40) 0; max-width: 760px; }

/* ---------- Choices and drills */
.stage { display: grid; gap: var(--space-24); }
.drill { display: grid; gap: 16px; }
.drill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.drill-show { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; min-height: 120px; }
.drill-show .score { max-width: 100%; }
.drill-show .kb { max-width: 640px; }
.drill-big { font: 400 clamp(30px, 4vw, 44px)/1.1 var(--font-display); }
.drill-sub { font-size: 16px; color: var(--ink-2); width: 100%; }
.drill-prompt { font-size: 16px; color: var(--ink-2); }
.drill-hint { font-size: 14px; color: var(--ink-3); }
.drill-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-width: 900px; }
.drill-choices.is-many { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.choice { min-height: 56px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-raised); font-size: 17px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; touch-action: manipulation; }
.choice:hover { border-color: var(--ink); }
.choice--wide { text-align: left; font-size: 16px; line-height: 1.45; padding: 14px 16px; }
.choice--acc { font-size: 20px; }
.choice--acc[aria-pressed="true"] { background: var(--ink); color: var(--on-accent); }
.choice--score { display: grid; gap: 4px; justify-items: start; text-align: left; }
.choice-score { display: block; width: 100%; }
.choice.is-ok { border-color: var(--ok); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.choice.is-wrong { border-color: var(--miss); color: var(--miss); box-shadow: inset 0 0 0 1px var(--miss); }
.choice.is-answer { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.drill-fb { min-height: 1.6em; font-size: 16px; color: var(--ink-2); max-width: 72ch; }
.drill-fb.is-ok { color: var(--ok); }
.drill-fb.is-wrong { color: var(--ink); }
.drill-fb.is-wrong .ic { color: var(--miss); }
.drill-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.drill-kb { max-width: 900px; }
.drill-done { display: grid; gap: 12px; padding: 16px 0; }
.drill-score { font: 400 56px/1 var(--font-display); }
.tap-pad { width: min(100%, 420px); min-height: 140px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-raised); font: 500 15px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; touch-action: manipulation; transition: background .08s; }
.tap-pad.is-hit { background: var(--ink); color: var(--on-accent); }
.prog { display: flex; flex-wrap: wrap; gap: 8px; }
.prog-cell { min-width: 72px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); font: 400 24px/1 var(--font-display); text-align: center; transition: background .2s, color .2s, border-color .2s; }
.prog-cell.is-now { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
.prog-cell.is-ok { border-color: var(--ok); color: var(--ok); }
.prog-cell.is-fixed { border-color: var(--cue); color: var(--cue); }

/* ---------- Keyboard */
.lesson-stage > *, .stage > *, .drill > *, .pr > *, .imp > *, .tool > *, .fig > * { min-width: 0; }
.kb { display: block; min-width: 0; width: 100%; height: auto; max-height: 30vh; touch-action: none; -webkit-user-select: none; user-select: none; }
.kb-white rect { fill: #fdfdfc; stroke: var(--line-strong); stroke-width: 0.8; }
.kb-black rect { fill: var(--ink); stroke: var(--ink); stroke-width: 0.6; }
.kb-key { cursor: pointer; }
.kb-label { font: 500 7px var(--font-sans); text-anchor: middle; fill: var(--ink-3); pointer-events: none; }
.kb-black .kb-label { fill: var(--surface); font-size: 5.5px; }
.kb-finger { font: 400 10px var(--font-mono); text-anchor: middle; fill: #fff; pointer-events: none; }
.kb-key.scale.kb-white rect { fill: var(--surface-sunken); }
.kb-key.scale.kb-black rect { fill: #4d4a45; }
.kb-key.chord rect { fill: #c9b48f; }
.kb-key.chord.kb-black rect { fill: #9a7b45; }
.kb-key.root rect { fill: var(--cue); }
.kb-key.cue rect { fill: var(--cue); stroke: var(--cue); }
.kb-key.cue-lh rect { fill: var(--cue-lh); stroke: var(--cue-lh); }
.kb-key.cue .kb-label, .kb-key.cue-lh .kb-label, .kb-key.root .kb-label { fill: #fff; }
.kb-key.heard rect { fill: #b9b5ad; }
.kb-key.heard.kb-black rect { fill: #67635e; }
.kb-key.ok rect { fill: var(--ok); stroke: var(--ok); }
.kb-key.wrong rect { fill: var(--miss); stroke: var(--miss); }
.kb-key.ok .kb-label, .kb-key.wrong .kb-label { fill: #fff; }
.kb-key.is-down rect { filter: brightness(0.85); }
.kb-key .kb-finger { display: none; }
.kb-key.cue .kb-finger, .kb-key.cue-lh .kb-finger { display: block; }

/* ---------- Notation */
.score { width: 100%; overflow: hidden; }
.score-svg { display: block; }
.score-chord { font: 500 15px var(--font-sans); fill: var(--ink); }
.score-mark { font: 400 15px var(--font-display); fill: var(--ink-2); }
.score-barno { font: 400 10px var(--font-mono); fill: var(--ink-3); }
.score-bar { fill: transparent; stroke: none; cursor: pointer; }
.score-chord, .score-barno { stroke: none; }
.score-mark { paint-order: stroke; stroke: var(--surface-raised); stroke-width: 5px; stroke-linejoin: round; }
.score-bar.is-loop { fill: var(--surface-sunken); }
.vf-stavenote.is-now path, .vf-stavenote.is-now rect { fill: var(--cue); stroke: var(--cue); }
.vf-stavenote.is-ok path, .vf-stavenote.is-ok rect { fill: var(--ok); stroke: var(--ok); }
.vf-stavenote.is-fixed path { fill: var(--cue); stroke: var(--cue); opacity: .7; }
.vf-stavenote.is-wrong path, .vf-stavenote.is-wrong rect { fill: var(--miss); stroke: var(--miss); }
.vf-stavenote.is-miss path { fill: var(--miss); stroke: var(--miss); opacity: .55; }
.vf-annotation text, .vf-annotation { font-family: var(--font-sans); }

/* ---------- Practice surface */
.pr { display: grid; gap: 12px; }
.pr-bar { position: sticky; top: 72px; z-index: 6; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 0; background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.pr--compact .pr-bar { position: static; }
.pr-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-group--end { margin-left: auto; }
.pr-tempo-box { display: flex; align-items: center; gap: 10px; }
.pr-tempo { width: 140px; }
.pr-tempo-val { font: 400 12px/1 var(--font-mono); color: var(--ink-2); min-width: 92px; white-space: nowrap; }
.pr-section { min-width: 220px; width: auto; }
.pr-score { min-height: 120px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 8px; }
.pr-status { min-height: 1.6em; font-size: 16px; color: var(--ink-2); }
.pr-kb { position: sticky; bottom: 0; z-index: 4; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
.pr--compact .pr-kb { position: static; border-top: 0; }
.piece-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-24); flex-wrap: wrap; }
.piece-head > div:first-child { display: grid; gap: 10px; }
.piece-details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.piece-details > summary { min-height: var(--control-s); display: flex; align-items: center; cursor: pointer; font-size: 15px; color: var(--ink-2); list-style: none; }
.piece-details > summary::-webkit-details-marker { display: none; }
.piece-details > summary::after { content: ""; width: 7px; height: 7px; margin-left: 10px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.piece-details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.piece-details[open] { display: grid; gap: var(--space-24); padding-bottom: var(--space-24); }
.piece-about { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-40); }
@media (max-width: 860px) { .piece-about { grid-template-columns: 1fr; } }
.piece-text { display: grid; gap: 12px; max-width: 68ch; }
.piece-text p { font-size: 17px; }
.focus { list-style: none; display: grid; gap: 6px; margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.sections { list-style: none; border-top: 1px solid var(--line); margin-top: 8px; }
.sections li { border-bottom: 1px solid var(--line); }
.section-row { display: grid; grid-template-columns: 72px minmax(140px, 1fr) 2fr 120px; gap: 16px; width: 100%; align-items: baseline; padding: 12px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.section-row:hover .section-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.section-title { font: 400 19px/1.2 var(--font-display); }
.section-tip { font-size: 14px; color: var(--ink-2); }
.section-st { font: 400 12px/1.4 var(--font-mono); color: var(--ink-3); text-align: right; }
@media (max-width: 760px) { .section-row { grid-template-columns: 64px 1fr; } .section-tip, .section-st { grid-column: 2; text-align: left; } }

/* ---------- Pieces */
.level-sub { display: flex; gap: 12px; align-items: baseline; font: 400 26px/1.15 var(--font-display); padding-top: var(--space-24); border-top: 1px solid var(--line); }
.piece-list { display: grid; gap: var(--space-24); }
.pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-24); }
.piece-card { display: grid; gap: 8px; align-content: start; padding: 20px var(--space-24) var(--space-24); border: 1px solid var(--line-strong); border-radius: var(--radius); text-decoration: none; min-height: 168px; transition: border-color .25s, background .25s; }
.piece-card:hover { border-color: var(--ink); background: var(--surface-raised); }
.piece-title { font: 400 26px/1.1 var(--font-display); letter-spacing: -0.01em; }

/* ---------- Improvise */
.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.recipe { display: grid; gap: 4px; justify-items: start; padding: 14px 16px; min-height: 76px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; text-align: left; cursor: pointer; }
.recipe:hover { border-color: var(--ink); }
.recipe[aria-pressed="true"] { border-color: var(--ink); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--ink); }
.recipe-title { font: 400 20px/1.15 var(--font-display); }
.custom > summary { min-height: var(--control-s); display: flex; align-items: center; cursor: pointer; font-size: 15px; color: var(--ink-2); }
.custom[open] { display: grid; gap: 16px; padding-bottom: 8px; }
.imp { display: grid; gap: 16px; }
.imp-what { font: 400 12px/1.4 var(--font-mono); color: var(--ink-3); }
.imp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink-3); }
.sw { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--line-strong); margin-left: 8px; }
.sw:first-child { margin-left: 0; }
.sw-chord { background: #c9b48f; }
.sw-scale { background: var(--surface-sunken); }
.sw-root { background: var(--cue); border-color: var(--cue); }
.imp-coach { display: grid; gap: 16px; }
.imp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.stat-v { font: 400 34px/1 var(--font-display); }
.imp-notes { display: grid; gap: 8px; padding-left: 1.1em; font-size: 16px; color: var(--ink-2); max-width: 72ch; }

/* ---------- Goals */
.milestone { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: var(--space-40); padding-top: var(--space-24); border-top: 1px solid var(--line); }
.milestone.is-current { border-top-color: var(--ink); }
.milestone-head { display: grid; gap: 12px; align-content: start; }
.milestone-head .mr-btn { justify-self: start; }
.milestone-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
@media (max-width: 860px) { .milestone, .milestone-cols { grid-template-columns: 1fr; } }
.checklist { list-style: none; border-top: 1px solid var(--line); margin-top: 8px; }
.checklist li { display: flex; gap: 8px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.checklist a { font: 400 19px/1.2 var(--font-display); text-decoration: none; }
.checklist a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.checklist .check { margin-left: auto; font: 500 11px/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.checklist li.is-done a { color: var(--ink-2); }

/* ---------- Tools */
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--space-24); }
@media (max-width: 520px) { .tools { grid-template-columns: 1fr; } }
.tool { display: grid; gap: 16px; align-content: start; padding: var(--space-24); border: 1px solid var(--line); background: var(--surface-raised); border-radius: var(--radius); }
.metro { display: flex; align-items: baseline; gap: 12px; }
.big-num { font: 400 72px/1 var(--font-display); }
.beats { display: flex; gap: 8px; }
.beats span { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background .06s; }
.beats span:first-child { border-color: var(--ink); }
.beats span.is-on { background: var(--ink); }
.circle { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 16px; align-items: center; }
@media (max-width: 600px) { .circle { grid-template-columns: 1fr; } }
.cof { width: 100%; height: auto; }
.cof-ring { fill: none; stroke: var(--line-strong); }
.cof-maj { font: 400 22px var(--font-display); text-anchor: middle; dominant-baseline: central; fill: var(--ink); pointer-events: none; }
.cof-min { font: 400 12px var(--font-mono); text-anchor: middle; dominant-baseline: central; fill: var(--ink-3); pointer-events: none; }
.cof-hit { fill: transparent; stroke: transparent; cursor: pointer; }
.cof-key.is-on .cof-hit { fill: var(--ink); }
.cof-key.is-on .cof-maj { fill: var(--on-accent); }
.cof-key:focus-visible { outline: none; }
.cof-key:focus-visible .cof-hit { stroke: var(--ink); stroke-width: 2; }
.cof-info { display: grid; gap: 8px; }

/* ---------- Settings */
.set-sec { display: grid; gap: var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--line); }
.set-sub { margin-top: 8px; }
.profiles { list-style: none; border-top: 1px solid var(--line); }
.profiles li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.prof-name { font: 400 22px/1.2 var(--font-display); min-width: 120px; }
.profiles li.is-current .prof-name::after { content: ""; }
.listen-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-24); align-items: start; }
.meter { height: 8px; background: var(--line); margin-top: 12px; }
.meter span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .08s linear; }
.heard { font: 400 34px/1.1 var(--font-display); min-height: 1.2em; }

/* ---------- Modal, toast */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: #1a191766; }
.modal-panel { position: relative; width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: var(--space-40) var(--space-24) var(--space-24); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.modal-close { position: absolute; right: 16px; top: 8px; }
.import { display: grid; gap: 16px; }
.import-kinds { display: grid; gap: 8px; padding-left: 1.1em; font-size: 15px; color: var(--ink-2); }
.import-kinds strong { color: var(--ink); font-weight: 600; }
.import-preview { background: var(--surface-raised); border: 1px solid var(--line); }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 8px; max-width: min(560px, calc(100% - 32px)); padding: 12px 16px; background: var(--ink); color: var(--on-accent); border-radius: var(--radius); font-size: 15px; transform: translate(-50%, 16px); opacity: 0; transition: transform .3s var(--ease), opacity .3s; }
.toast.is-in { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }