/* This block used to restate the entire old palette at :root — every colour,
     both fonts, the shadow. All of it was already dead: studio.css declares the
     same names on `html:root` (0,1,1), which beats a bare `:root` (0,1,0), so
     none of these values had reached the page since the token sheet landed. They
     were left as a trap for the next person to read this file and believe them.
     Only the one genuine lesson-specific choice survives — a softer card corner
     than the site default — and it is written at a specificity that actually
     applies rather than one that silently loses. */
  html:root{ --radius:18px; }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
  body{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:clamp(14px,3vw,30px);line-height:1.6}
  .wrap{width:100%;max-width:640px}
  .brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
  .mark{display:flex;align-items:center;gap:11px}
  .glyph{width:28px;height:28px}
  .wordmark{font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
  .lang{display:flex;gap:2px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px}
  .lang button{border:0;background:transparent;font-size:12px;font-weight:700;color:var(--muted);padding:6px 12px;border-radius:999px;cursor:pointer}
  .lang button.on{background:var(--ink);color:var(--paper)}

  .lhead{text-align:center;margin-bottom:18px}
  .sample{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--R);background:var(--chip-green);border:1px solid var(--line-2);border-radius:999px;padding:5px 14px;margin-bottom:12px}
  .modtag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
  h1{font-family:var(--serif);font-weight:600;font-size:clamp(26px,5vw,38px);line-height:1.1}

  .steps{display:flex;gap:6px;justify-content:center;margin:20px 0 24px;flex-wrap:wrap}
  .sd{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;opacity:.5;transition:opacity .2s}
  .sd.on{opacity:1} .sd.done{opacity:.85}
  .sd .ring{width:11px;height:11px;border-radius:50%;background:var(--line)}
  .sd.on .ring{background:var(--ink)} .sd.done .ring{background:var(--R);color:var(--on-accent)}
  .sd .nm{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted)}
  .sd.on .nm{color:var(--ink)}

  .block{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(22px,4vw,34px)}
  .block .phase{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
  .block h2{font-family:var(--serif);font-weight:600;font-size:clamp(20px,3.6vw,27px);margin-bottom:14px;line-height:1.2}
  .block p{font-size:16px;color:var(--ink);margin-bottom:14px}
  .block p:last-child{margin-bottom:0}
  .block b{color:var(--ink)} .block .em{color:var(--muted);font-style:italic}
  .pattern{font-family:var(--mono);font-size:clamp(15px,3vw,19px);letter-spacing:.08em;text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;margin:6px 0 16px;font-weight:700}
  .pattern .h{color:var(--T)} .pattern .w{color:var(--ink)}
  .callout{border-left:3px solid var(--T);background:var(--chip-amber);border-radius:0 10px 10px 0;padding:14px 16px;font-size:15px;margin:6px 0}
  .callout.warn{border-color:var(--T);background:var(--chip-amber)}
  .toollink{display:inline-flex;align-items:center;gap:8px;background:var(--chip-green);border:1px solid var(--line-2);border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;color:var(--R);text-decoration:none;margin-top:6px}

  /* piano */
  .piano{position:relative;height:130px;user-select:none;border-radius:8px;overflow:hidden;background:var(--bkey);margin:14px 0}
  .whites{display:flex;height:100%}
  .wk{position:relative;flex:1 1 0;background:var(--wkey);border-right:1px solid var(--wkey-bd);border-radius:0 0 5px 5px;cursor:pointer;transition:background .08s}
  .wk:last-child{border-right:0}
  .wk.shake{animation:shk .3s}
  @keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
  .blacks{position:absolute;inset:0;pointer-events:none}
  .bk{position:absolute;top:0;height:60%;width:3.3%;background:var(--bkey);border-radius:0 0 4px 4px;cursor:pointer;pointer-events:auto;box-shadow:0 3px 4px rgba(0,0,0,.35)}
  /* held = note currently sounding (mouse, touch or computer keyboard).
     Pressed-in look so it's obvious which notes are ringing in a chord. */
  .wk.held{background:#cfe0d6;/* fixed: a white key is white in both themes */box-shadow:inset 0 3px 7px rgba(20,40,30,.22)}
  .bk.held{background:#3f6e55;box-shadow:inset 0 3px 7px rgba(0,0,0,.45)}
  .gfret.held{filter:brightness(1.45)}
  /* Which QWERTY letter plays this key. Pointer devices only — a phone has no
     keyboard and the badge would just be clutter on an already-small key. */
  .qwerty{position:absolute;left:50%;transform:translateX(-50%);top:5px;
    font-family:var(--mono);font-size:10px;font-weight:700;line-height:1;
    color:#6a6f7d;pointer-events:none;text-transform:uppercase}  /* on a white key: fixed, and darkened from #a49d92 (2.4:1) */
  .bk .qwerty{top:4px;font-size:9px;color:#c8cdd8}  /* on a black key: fixed light */
  .wk.held .qwerty{color:#4a6a58}
  /* Octave shifter above the practice keyboard */
  .octctl{display:flex;align-items:center;justify-content:center;gap:7px;margin:8px 0 -4px}
  .octctl button{width:30px;height:26px;border:1px solid var(--line);background:var(--bg);
    color:var(--ink);border-radius:8px;font-size:15px;font-weight:800;line-height:1;
    cursor:pointer;font-family:inherit;padding:0}
  .octctl button:hover:not(:disabled){background:var(--paper);border-color:var(--muted)}
  .octctl button:disabled{opacity:.32;cursor:default}
  .octctl .oclab{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);
    min-width:86px;text-align:center}
  .octctl .ochint{font-size:11px;color:var(--muted)}
  @media (hover:none),(pointer:coarse){ .qwerty,.octctl{display:none !important} }
  /* Hint that the computer keyboard works. Pointer-based devices only — useless on a phone. */
  .kbdhint{text-align:center;font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
  .kbdhint kbd{display:inline-block;background:var(--bg);border:1px solid var(--line);border-bottom-width:2px;
    border-radius:5px;padding:1px 5px;font-family:var(--mono);font-size:11px;margin:0 1px;color:var(--ink)}
  @media (hover:none),(pointer:coarse){ .kbdhint{display:none} }
  .bk.shake{animation:shk .3s}
  .klabel{position:absolute;left:50%;transform:translateX(-50%);bottom:7px;font-family:var(--serif);font-weight:700;font-size:12px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
  .do-status{text-align:center;font-size:15px;font-weight:600;min-height:1.6em;margin-top:4px}
  .do-status.good{color:var(--R)} .do-status.bad{color:var(--rough)}
  /* "Catch the Note" arcade block */
  .catch-key{text-align:center;font-size:13.5px;color:var(--muted);background:var(--bg);
    border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:2px 0 8px}
  .catch-key b{color:var(--ink)}
  .catch-hud{display:flex;justify-content:space-between;align-items:center;font-weight:800;
    font-size:13px;color:var(--muted);margin:6px 2px 4px}
  .catch-hud #catchScore{color:var(--T)}
  .catch-lane{position:relative;height:92px;border-radius:12px;overflow:hidden;
    background:linear-gradient(180deg,var(--bg),var(--paper));border:1px solid var(--line);margin-bottom:6px}
  .catch-note{position:absolute;left:50%;transform:translateX(-50%);top:0;
    width:38px;height:38px;border-radius:50%;background:var(--T);color:var(--on-accent);
    display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;
    box-shadow:0 4px 14px rgba(224,169,46,.45)}
  @media(prefers-reduced-motion:reduce){.catch-note{transition:none !important}}
  /* Fixed-Do / letters switch — sits above the practice keyboard */
  .notaswitch{display:flex;gap:4px;justify-content:center;margin:2px 0 10px}
  .notaswitch button{border:1px solid var(--line);background:var(--bg);color:var(--muted);
    border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
  .notaswitch button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  /* The step formula, made concrete: letter AND number on every gap, and in the
     live version under the DO piano the step you just played lights up. */
  .stepformula{margin:12px 0 6px}
  .stepformula .sfrow{display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap}
  .stepformula .sfdot{color:var(--muted);opacity:.5;font-size:12px}
  .stepchip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    min-width:38px;padding:5px 4px;border-radius:9px;background:var(--bg);border:1.5px solid var(--line);
    transition:background .15s,border-color .15s,transform .15s}
  .stepchip b{font-family:var(--mono);font-size:14px;font-weight:800;line-height:1.1;color:var(--ink)}
  .stepchip i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted);line-height:1.2}
  .stepchip.leap b{font-size:15px}
  .stepchip.half{background:var(--chip-amber);border-color:var(--line-2)}
  .stepchip.half b{color:var(--T)}
  .stepchip.done{opacity:.55}
  .stepchip.on{background:var(--R);border-color:var(--R);transform:translateY(-2px);color:var(--on-accent)}
  .stepchip.on b,.stepchip.on i{color:#fff}
  .stepformula .sfnote{text-align:center;font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.45}
  @media(prefers-reduced-motion:reduce){.stepchip{transition:none}}

  /* combo meter — fills as the streak grows, glows once it's "hot" (3+) */
  .combo-meter{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin:10px 0 2px}
  .combo-meter>i{display:block;height:100%;width:0;border-radius:999px;transition:width .25s ease-out;
    background:linear-gradient(90deg,var(--R),var(--T))}
  .combo-meter.hot>i{box-shadow:0 0 12px var(--T)}
  @media(prefers-reduced-motion:reduce){.combo-meter>i{transition:none}}
  .do-ctrls{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}
  .do-ctrls button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
  .do-ctrls button:hover{background:var(--chip-blue)}
  .keychips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
  .keychips button{border:1px solid var(--line);background:var(--bg);border-radius:8px;font-family:var(--serif);font-weight:600;font-size:15px;width:38px;height:36px;cursor:pointer}
  .keychips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

  .gfret.shake{animation:shk .3s}
  .quiz-opt{display:block;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--bg);border-radius:12px;padding:13px 16px;font-size:15px;font-family:inherit;color:var(--ink);cursor:pointer;margin-bottom:9px;transition:.12s}
  .quiz-opt:hover{border-color:var(--R)}
  .quiz-opt.correct{border-color:var(--R);background:var(--chip-green);font-weight:700}
  .quiz-opt.wrong{border-color:var(--T);background:var(--chip-amber)}
  .quiz-opt:disabled{cursor:default}
  .quiz-fb{min-height:22px;margin-top:8px;font-weight:700;font-size:14.5px}
  .quiz-fb.good{color:var(--R)} .quiz-fb.bad{color:var(--rough)}
  .sched{margin-top:16px}
  .sched .sched-h{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);text-align:center;margin-bottom:14px}
  .sched .track{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;position:relative;max-width:400px;margin:0 auto}
  .sched .track::before{content:"";position:absolute;top:13px;left:12%;right:12%;height:2px;background:var(--line);z-index:0}
  .sched .stop{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;flex:1}
  .sched .stop .d{width:26px;height:26px;border-radius:50%;background:var(--R);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;border:3px solid var(--paper)}
  .sched .stop .lb{font-size:12px;font-weight:600;color:var(--ink);text-align:center;line-height:1.25}

  .nav{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:12px}
  .nav .back{border:0;background:transparent;color:var(--muted);font-weight:600;font-size:15px;cursor:pointer}
  .nav .back:hover{color:var(--ink)}
  .nav .next{border:0;background:var(--ink);color:var(--bg);font-weight:700;font-size:15.5px;padding:14px 28px;border-radius:999px;cursor:pointer;transition:.14s}
  .nav .next:hover{filter:brightness(1.15)} .nav .next:disabled{opacity:.4;cursor:not-allowed}

  /* completion / paywall */
  .done-card{background:var(--ink);color:var(--bg);border-radius:22px;padding:clamp(26px,5vw,40px);text-align:center;margin-top:4px}
  .done-card .chk{font-size:34px;margin-bottom:8px}
  .done-card h2{font-family:var(--serif);font-weight:600;font-size:clamp(22px,3.8vw,30px);color:var(--bg);margin-bottom:12px}
  .done-card p{color:var(--bg);opacity:.78;font-size:15px;max-width:420px;margin:0 auto 20px}
  .done-card .next-lessons{display:flex;flex-direction:column;gap:8px;max-width:360px;margin:0 auto 22px}
  .done-card .nl{display:flex;align-items:center;gap:10px;background:rgba(127,127,127,.22);border:1px solid rgba(127,127,127,.34);border-radius:12px;padding:12px 15px;text-align:left;font-size:14px}
  .done-card .nl .lock{margin-left:auto;opacity:.6}
  .done-card .nl svg{width:14px;height:14px}
  .done-card a.join{display:inline-block;background:var(--T);color:var(--on-accent);text-decoration:none;font-weight:700;font-size:15.5px;padding:15px 34px;border-radius:999px}
  footer{margin-top:22px;font-size:12px;color:var(--muted);text-align:center}
  @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}