/* Piano Lab — stylesheet aligned with the Music Fundamentals design system
   (DESIGN-stripe.md visual language): indigo CTA #533afd used sparingly,
   ink-navy text #0d253d (never black), cream background, gradient-mesh header
   band, pill buttons, 12px hairline cards with blue-tinted shadows, Inter.
   RH = indigo (primary), LH = amber (accent) — consistent everywhere. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;800&display=swap');

:root{
  --primary:#533afd; --primary-dark:#4434d4; --primary-press:#2e2b8c; --primary-soft:#665efd;
  --primary-subtle:#b9b9f9; --brand-dark:#1c1e54;
  --ink:#0d253d; --ink-2:#273951; --muted:#64748d;
  --accent:#E8A33D; --accent-dark:#cf8f2e;
  --correct:#2E8B57; --wrong:#ea2261; --done:#9aa6b8;
  --bg:#f6f0e2; --card:#ffffff; --cream:#f1e2c4; --hairline:#e7ddc8; --hairline-input:#c9b98f;
  --rh:var(--primary); --lh:var(--accent-dark);
  --radius:12px;
  --shadow:0 1px 3px rgba(0,55,112,.08);
  --shadow-2:0 8px 24px rgba(0,55,112,.08), 0 2px 6px rgba(0,55,112,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,"SF Pro Display",-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  background:var(--bg);color:var(--ink);font-size:15.5px;line-height:1.55}
b,strong{font-weight:600}

/* header — same hero art as the studio's lesson index: deep navy-indigo
   gradient, big diagonal piano keys entering from the right, faint tilted
   staff + notes, glow + vignette (artwork shared from the v2 design system) */
.pl-header{color:#fff;position:relative;overflow:hidden;
  /* Piano Lab identity: GREEN (matches the front door) */
  background:linear-gradient(135deg,#0a2618 0%,#155e38 55%,#27ae60 100%)}
.pl-header::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='260' viewBox='0 0 900 260' preserveAspectRatio='xMaxYMid slice'><defs><radialGradient id='glow' cx='0.68' cy='0.2' r='0.55'><stop offset='0' stop-color='%237fb4ff' stop-opacity='0.10'/><stop offset='1' stop-color='%237fb4ff' stop-opacity='0'/></radialGradient><radialGradient id='vig' cx='0.42' cy='0.4' r='0.85'><stop offset='0.6' stop-color='%23070926' stop-opacity='0'/><stop offset='1' stop-color='%23070926' stop-opacity='0.38'/></radialGradient><linearGradient id='wk' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23767cbe'/><stop offset='0.45' stop-color='%23c3c8ef'/><stop offset='1' stop-color='%23f0f2ff'/></linearGradient><linearGradient id='bk' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%2305060f'/><stop offset='0.18' stop-color='%23343a68'/><stop offset='0.4' stop-color='%230b0d24'/><stop offset='1' stop-color='%2305060f'/></linearGradient><linearGradient id='amb' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%230a0c2e' stop-opacity='0.6'/><stop offset='0.55' stop-color='%230a0c2e' stop-opacity='0.15'/><stop offset='1' stop-color='%230a0c2e' stop-opacity='0'/></linearGradient><linearGradient id='fadeG' x1='0' y1='0' x2='1' y2='0.6'><stop offset='0' stop-color='%23000000' stop-opacity='0'/><stop offset='0.35' stop-color='%23ffffff' stop-opacity='0.3'/><stop offset='0.7' stop-color='%23ffffff' stop-opacity='0.9'/><stop offset='1' stop-color='%23ffffff'/></linearGradient><mask id='fade'><rect x='330' y='-80' width='700' height='420' fill='url(%23fadeG)'/></mask></defs><rect width='900' height='260' fill='url(%23glow)'/><g stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1.4' transform='rotate(-6 400 130)'><line x1='20' y1='96' x2='740' y2='96'/><line x1='20' y1='107' x2='740' y2='107'/><line x1='20' y1='118' x2='740' y2='118'/><line x1='20' y1='129' x2='740' y2='129'/><line x1='20' y1='140' x2='740' y2='140'/></g><g fill='%23ffffff' fill-opacity='0.09' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='2.2' transform='rotate(-6 400 130)'><ellipse cx='130' cy='108' rx='8' ry='5.6' transform='rotate(-18 130 108)'/><line x1='137' y1='106' x2='137' y2='72'/><ellipse cx='240' cy='130' rx='8' ry='5.6' transform='rotate(-18 240 130)'/><line x1='247' y1='128' x2='247' y2='94'/><ellipse cx='330' cy='96' rx='8' ry='5.6' transform='rotate(-18 330 96)'/><line x1='323' y1='98' x2='323' y2='132'/><ellipse cx='470' cy='118' rx='8' ry='5.6' transform='rotate(-18 470 118)'/><line x1='477' y1='116' x2='477' y2='82'/><ellipse cx='600' cy='104' rx='8' ry='5.6' transform='rotate(-18 600 104)'/><line x1='593' y1='106' x2='593' y2='140'/><ellipse cx='690' cy='126' rx='8' ry='5.6' transform='rotate(-18 690 126)'/><line x1='697' y1='124' x2='697' y2='90'/></g><g transform='rotate(-30 900 320)' mask='url(%23fade)'><rect x='470' y='-30' width='46' height='360' rx='4' fill='url(%23wk)'/><rect x='519' y='-30' width='46' height='360' rx='4' fill='url(%23wk)'/><rect x='568' y='-30' width='46' height='360' rx='4' fill='url(%23wk)'/><rect x='617' y='-30' width='46' height='360' rx='4' fill='url(%23wk)'/><rect x='666' y='-30' width='46' height='360' rx='4' fill='url(%23wk)'/><rect x='715' y='-30' width='46' height='360' rx='4' fill='url(%23wk)'/><rect x='764' y='-30' width='46' height='360' rx='4' fill='url(%23wk)'/><rect x='813' y='-30' width='46' height='360' rx='4' fill='url(%23wk)'/><rect x='862' y='-30' width='46' height='360' rx='4' fill='url(%23wk)'/><rect x='911' y='-30' width='46' height='360' rx='4' fill='url(%23wk)'/><rect x='960' y='-30' width='46' height='360' rx='4' fill='url(%23wk)'/><rect x='1009' y='-30' width='46' height='360' rx='4' fill='url(%23wk)'/><rect x='503' y='-30' width='29' height='215' rx='3.5' fill='url(%23bk)'/><rect x='552' y='-30' width='29' height='215' rx='3.5' fill='url(%23bk)'/><rect x='650' y='-30' width='29' height='215' rx='3.5' fill='url(%23bk)'/><rect x='699' y='-30' width='29' height='215' rx='3.5' fill='url(%23bk)'/><rect x='748' y='-30' width='29' height='215' rx='3.5' fill='url(%23bk)'/><rect x='846' y='-30' width='29' height='215' rx='3.5' fill='url(%23bk)'/><rect x='895' y='-30' width='29' height='215' rx='3.5' fill='url(%23bk)'/><rect x='993' y='-30' width='29' height='215' rx='3.5' fill='url(%23bk)'/><rect x='1042' y='-30' width='29' height='215' rx='3.5' fill='url(%23bk)'/><rect x='460' y='-30' width='640' height='380' fill='url(%23amb)'/></g><rect width='900' height='260' fill='url(%23vig)'/></svg>") right center/cover no-repeat}
.pl-header::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(40% 90% at 85% 10%,rgba(249,107,238,.22),transparent 65%),
  radial-gradient(35% 80% at 12% 100%,rgba(255,209,102,.14),transparent 60%)}
.pl-header .inner{max-width:1180px;margin:0 auto;padding:30px 20px 34px;position:relative;z-index:1;
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.pl-header h1{margin:0;font-size:2rem;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.pl-header h1::after{content:"";display:block;width:64px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,#ffd166,#f96bee);margin-top:10px}
.pl-header .sub{color:rgba(255,255,255,.85);font-size:14px}
.crumbs{width:100%;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:2px}
.crumbs a{color:rgba(255,255,255,.92);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.hdr-link{margin-left:auto;color:#fff;font-size:13.5px;font-weight:700;
  background:rgba(255,255,255,.13);padding:6px 16px;border-radius:9999px;text-decoration:none}
.hdr-link:hover{background:rgba(255,255,255,.24);text-decoration:none}
/* header identity + Sign out (shared-device essential) */
.hdr-auth{display:inline-flex;align-items:center;gap:10px}
.hdr-user{color:rgba(255,255,255,.92);font-size:13px;font-weight:700;white-space:nowrap;
  max-width:180px;overflow:hidden;text-overflow:ellipsis}
.hdr-signout{font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;color:#1c1e54;
  background:#ffd166;border:0;padding:7px 18px;border-radius:9999px;
  box-shadow:0 4px 12px rgba(255,209,102,.35)}
.hdr-signout:hover{background:#ffc247}
/* language selector (mounted in the header by i18n.js — same look as Aural Lab) */
.lang-sel{font:600 13px/1.2 Inter,"Noto Sans KR","Malgun Gothic",sans-serif;color:#fff;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.35);
  border-radius:9999px;padding:6px 12px;cursor:pointer}
.lang-sel option{color:var(--ink)}
.midi-chip{font-size:12.5px;background:rgba(10,12,46,.5);color:#fff;
  padding:5px 14px;border-radius:9999px;font-feature-settings:"tnum"}
.pl-main{max-width:1180px;margin:0 auto;padding:14px 20px 60px}

.card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px;margin-top:16px}

/* lesson framing */
.lesson-head .crumb{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary-dark);background:rgba(185,185,249,.35);
  border-radius:9999px;padding:3px 10px;margin-bottom:8px}
.lesson-head h2{margin:0 0 6px;font-size:1.45rem;font-weight:800;letter-spacing:-.3px;color:var(--brand-dark)}
.lesson-head .goal{margin:0;font-weight:600}
.lesson-head .desc{margin:3px 0 0;color:var(--muted);font-size:13.5px}
.mia-strip-sm{margin:12px 0 0}
.mia-strip-sm .mia-avatar{width:50px;height:62px}
.mia-strip-sm .mia-bubble{background:var(--cream);border-color:#ded1b0;flex:0 1 auto;
  font-size:13.5px;color:var(--ink-2)}
.mia-strip-sm .mia-bubble::before{background:var(--cream);border-color:#ded1b0}
.mia-strip-sm .mia-bubble b{color:var(--brand-dark);font-size:15px;letter-spacing:1.5px}
.pattern-long{color:var(--muted)}

/* controls */
.pl-controls{display:flex;flex-direction:column;gap:12px}
/* every control row spreads edge-to-edge: first item flush left, last item
   flush right, even spacing between */
.ctl-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
/* row 1: Lesson left, Key dead-center, Exercise right (center holds even
   when the Exercise selector is hidden) */
.ctl-row-3col{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.ctl-row-3col label:first-child{justify-self:start}
.ctl-row-3col .mid{justify-self:center}
.ctl-row-3col #exWrap{justify-self:end}
/* row 2: hand + mode segments gathered in the center */
.ctl-row-center{justify-content:center;gap:26px}
.ctl-row label{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.ctl-row select{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--hairline-input);
  border-radius:9px;background:#fff;color:var(--ink)}
.seg{display:flex;border:1px solid var(--hairline);border-radius:9999px;overflow:hidden;background:#fff}
.seg button{border:0;border-radius:0;background:#fff;color:var(--muted);padding:8px 16px;
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;min-height:36px;transition:background .15s}
.seg button+button{border-left:1px solid var(--hairline)}
.seg button.on{background:linear-gradient(135deg,#533afd,#665efd);color:#fff}
.seg button:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px}
.tempo input[type=range]{width:150px;accent-color:var(--primary)}
.tempo b{font-feature-settings:"tnum";color:var(--ink)}
.chk input{width:16px;height:16px;accent-color:var(--primary)}
.transport{display:flex;align-items:center;gap:10px}
/* playback controls + hand/mode segments live between the score and the
   keyboard, centered on one line */
.play-strip{display:flex;align-items:center;justify-content:center;gap:20px;
  flex-wrap:wrap;margin:14px 0 0}
.transport button,.util-btn{font:inherit;font-weight:700;cursor:pointer;border:1px solid var(--hairline);
  border-radius:9999px;background:#fff;color:var(--primary);min-width:46px;min-height:42px;
  font-size:17px;transition:transform .12s,box-shadow .2s}
.transport button:hover,.util-btn:hover{background:var(--bg);box-shadow:var(--shadow)}
.transport button:active,.util-btn:active{transform:scale(.97)}
.transport button.big{min-width:64px;font-size:19px;color:#fff;border:none;
  background:linear-gradient(135deg,#1c1e54,#2e2b8c)}
.transport button.big:hover{background:linear-gradient(135deg,#23265f,#3a37a8);
  box-shadow:0 4px 14px rgba(28,30,84,.4)}
.transport button.start{background:linear-gradient(135deg,#533afd,#665efd);font-size:15.5px;padding:0 24px}
.transport button.start:hover{background:linear-gradient(135deg,#4434d4,#533afd);
  box-shadow:0 4px 14px rgba(83,58,253,.35)}
.transport button:disabled{opacity:.4;cursor:default;box-shadow:none;transform:none}

.ex-title{margin:18px 2px 8px;font-size:1.2rem;font-weight:800;letter-spacing:-.2px;color:var(--brand-dark)}

/* score */
.score-wrap{overflow-x:auto;padding:12px 16px}
.pl-score{display:block;min-width:640px;max-width:980px;width:100%;height:auto;margin:0 auto}
.pl-score .staffline,.pl-score .ledger{stroke:#2a3b55;stroke-width:1.1}
.pl-score .ledger{stroke-width:1.6}
.pl-score .stem{stroke:#16263e;stroke-width:1.7}
.pl-score .barline{stroke:#2a3b55;stroke-width:1.4}
.pl-score .barfinal{fill:#2a3b55}
.pl-score .brace{fill:none;stroke:#2a3b55;stroke-width:3.4}
.pl-score .clef-stroke{fill:none;stroke:#16263e;stroke-width:3.1;stroke-linecap:round}
.pl-score .clef-path{fill:#16263e}
.pl-score .clefdot{fill:#16263e}
.pl-score .acc,.pl-score .tsig{fill:#16263e;font-family:"Segoe UI Symbol","Times New Roman",serif}
.pl-score .tsig{font-weight:800;font-family:Georgia,serif}
.pl-score .note{fill:#16263e;stroke:#16263e;stroke-width:1.6}
/* hollow (half/whole) noteheads: transparent center so staff lines show
   through the hole, as in engraved notation */
.pl-score .note.hollow{fill:transparent;stroke-width:2.2}
.pl-score .beam{fill:#16263e}
.pl-score .flag{fill:none;stroke:#16263e;stroke-width:2.6;stroke-linecap:round}
.pl-score .rest{fill:#16263e}
.pl-score .rest-stroke{fill:none;stroke:#16263e;stroke-width:2}
.pl-score .tie{fill:none;stroke:#16263e;stroke-width:1.8}
.pl-score .dot{fill:#16263e}
.nstep.st-current .flag{stroke:var(--primary)}
.nstep.st-done .flag{stroke:var(--done)}
.pl-score .fing{font:800 15px Inter,"Segoe UI",sans-serif}
.pl-score .fing-rh{fill:var(--rh)}
.pl-score .fing-lh{fill:var(--lh)}
.pl-score .fing.editable{cursor:pointer;text-decoration:underline}
.pl-score .roman{font:700 19px Georgia,serif;fill:var(--ink-2)}
/* hollow noteheads stay TRANSPARENT in every state — staff lines must show
   through the hole; states color the ring (stroke) only */
.nstep.st-current .note{fill:var(--primary);stroke:var(--primary)}
.nstep.st-current .note.hollow{fill:transparent}
.nstep.st-current .stem{stroke:var(--primary)}
.nstep.st-cursor .note{stroke:var(--primary);stroke-width:2.6}
.nstep.st-correct .note{fill:var(--correct);stroke:var(--correct)}
.nstep.st-correct .note.hollow{fill:transparent}
.nstep.st-wrong .note{fill:var(--wrong);stroke:var(--wrong)}
.nstep.st-wrong .note.hollow{fill:transparent}
.nstep.st-done .note{fill:var(--done);stroke:var(--done)}
.nstep.st-done .note.hollow{fill:transparent}
.nstep.st-done .stem{stroke:var(--done)}
.nstep.st-done .fing{opacity:.45}

/* keyboard */
.kbd-wrap{margin-top:16px}
.pl-kbd{border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow);background:#fff;overflow-x:auto;
  user-select:none;touch-action:pan-x;padding:0 2px}
.pl-kbd-inner{position:relative;margin:0 auto}
.pl-fall{display:block;width:100%;height:170px}
.pl-keys{position:relative;height:212px}
.pk{position:absolute;top:0;cursor:pointer;
  /* touch play: no scroll/zoom gestures on the keys, no tap highlight,
     no long-press text selection or callout */
  touch-action:none;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pk-w{height:100%;background:#fff;border:1px solid #cfc4a6;border-top:0;border-radius:0 0 5px 5px}
.pk-b{height:61%;background:#232748;border:1px solid #101228;border-radius:0 0 4px 4px;z-index:2}
.pk-lbl{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:10.5px;color:#9aa6b8;pointer-events:none}
.pk-fing{position:absolute;left:0;right:0;text-align:center;font-weight:800;pointer-events:none;
  font-feature-settings:"tnum"}
.pk-w .pk-fing{bottom:22px;font-size:15px}
.pk-b .pk-fing{bottom:6px;font-size:13.5px}
.pk-w .pk-fing-rh{color:var(--rh)}
.pk-w .pk-fing-lh{color:var(--lh)}
.pk-b .pk-fing-rh{color:#b9b9f9}
.pk-b .pk-fing-lh{color:#f5cf8e}
.pk-w.k-target-rh{background:#e6e2ff;box-shadow:inset 0 -5px 0 var(--primary)}
.pk-b.k-target-rh{background:#665efd;box-shadow:inset 0 -5px 0 var(--primary-press)}
.pk-w.k-target-lh{background:#fdeed3;box-shadow:inset 0 -5px 0 var(--accent)}
.pk-b.k-target-lh{background:#cf8f2e;box-shadow:inset 0 -5px 0 #8a5f1e}
.pk-w.k-correct{background:#cfe9da}
.pk-b.k-correct{background:#2E8B57}
.pk-w.k-wrong{background:#fbd3e0}
.pk-b.k-wrong{background:#ea2261}
.pk-w.k-pressed{background:#e9ecf2}
.pk-b.k-pressed{background:#4a5170}
.pk-w.k-pressed.k-target-rh{background:#d6d0ff}
.pk-w.k-pressed.k-target-lh{background:#f8e2b8}

/* Mia + feedback bubble (between score and keyboard) */
.mia-strip{display:flex;align-items:center;gap:12px;margin:14px 2px 0}
.mia-avatar{width:64px;height:78px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,55,112,.18))}
.mia-bubble{position:relative;flex:1;background:#fff;border:1px solid var(--hairline);
  border-radius:12px;box-shadow:var(--shadow);padding:11px 16px;
  font-size:14px;color:var(--muted);min-height:20px}
.mia-bubble::before{content:"";position:absolute;left:-7px;top:50%;
  transform:translateY(-50%) rotate(45deg);width:12px;height:12px;background:#fff;
  border-left:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.mia-bubble b{color:var(--ink)}

/* progress card — full width */
.prog-card h3{margin:0;font-size:1.05rem;font-weight:800;color:var(--brand-dark)}
.prog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.prog-clear{font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--muted);
  background:#fff;border:1px solid var(--hairline);padding:6px 15px;border-radius:9999px}
.prog-clear:hover{background:var(--bg);color:var(--wrong);border-color:var(--wrong)}
.prog-note{margin:0 0 10px;font-size:12.5px;color:var(--muted)}
.ps{width:100%;border-collapse:collapse;font-size:13.5px;font-feature-settings:"tnum"}
.ps th,.ps td{border-bottom:1px solid #f0ead8;padding:8px 10px;text-align:center;color:var(--muted)}
.ps th{color:var(--ink);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.ps td:first-child,.ps th:first-child{text-align:left}
.ps-key{font-weight:600;color:var(--ink)}
.ps tr.ps-active td{background:rgba(185,185,249,.14)}
.ps tr:last-child td{border-bottom:0}
.pill{display:inline-block;min-width:34px;padding:4px 12px;border-radius:9999px;font-weight:700;font-size:12.5px}
.pill-completed{background:#d9efe2;color:#1d6b42}
.pill-progress{background:#fdeed3;color:var(--accent-dark)}
.pill-none{background:#f3eedd;color:#b6ac8e}

/* All Lessons index (Music Fundamentals style) */
.toc-progress{margin:18px 2px 4px;font-weight:600;color:var(--ink-2)}
.unit-group{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-top:14px;overflow:hidden}
.unit-head{display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  padding:14px 18px;font-weight:800;color:var(--brand-dark)}
.unit-head span:last-child{transition:transform .15s;color:var(--muted)}
.unit-group.open .unit-head span:last-child{transform:rotate(180deg)}
.unit-body{display:none;border-top:1px solid var(--hairline)}
.unit-group.open .unit-body{display:block}
.lesson-link{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 18px;color:var(--ink);text-decoration:none;border-bottom:1px solid #f0ead8;
  transition:transform .12s,box-shadow .15s}
.lesson-link:last-child{border-bottom:0}
.lesson-link:hover{background:var(--bg);text-decoration:none}
.lnum{display:inline-block;min-width:44px;font-weight:800;color:var(--primary)}
.toc-done{color:var(--correct);font-weight:800;font-size:13px}
.toc-part{color:var(--accent-dark);font-weight:800;font-size:13px}

/* teacher & setup */
.pl-setup{margin-top:16px;color:var(--muted);font-size:13.5px}
.pl-setup summary{cursor:pointer;font-weight:700;color:var(--brand-dark)}
.pl-setup p{margin:8px 0 0}
.tkeys{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px}
.tkeys label{display:flex;gap:6px;align-items:center;font-size:13.5px;color:var(--ink)}
.tkeys input{accent-color:var(--primary)}
.local-note{font-weight:700;color:var(--ink)}

@media(max-width:900px){
  .pl-keys{height:160px}
  .pl-fall{height:130px}
}

/* ===== Full-screen practice (⛶ button) — instructor 2026-07-23.
   Hide the setup chrome and give the score + keyboard the whole screen.
   CSS-only fill so it works on every device incl. iPhone (no Fullscreen API
   needed); the button also tries the real Fullscreen API as a bonus. The
   keyboard grows vertically on its own because the white keys are height:100%
   of .pl-keys. The waterfall canvas is hidden in fill mode (kept in normal
   view) so the layout fits any screen without canvas math. ===== */
.fill-only{display:none}
body.pl-fill .fill-only{display:inline-flex}
body.pl-fill{overflow:hidden}
body.pl-fill .pl-header,
body.pl-fill .lesson-head,
body.pl-fill .pl-setup,
body.pl-fill .pl-controls,
body.pl-fill .prog-card,
body.pl-fill .ex-title{display:none}
body.pl-fill .pl-main{position:fixed;inset:0;z-index:50;max-width:none;margin:0;
  padding:6px 12px calc(6px + env(safe-area-inset-bottom));background:var(--bg);
  display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
body.pl-fill #score{flex:0 1 auto;min-height:0;max-height:38vh;margin:0}
body.pl-fill .play-strip{flex:none;margin:6px 0}
body.pl-fill .mia-strip{flex:none;margin:4px 0 0}
body.pl-fill .mia-strip .mia-avatar{width:40px;height:48px}
body.pl-fill .mia-bubble{padding:7px 12px;font-size:13px}
body.pl-fill .kbd-wrap{flex:1 1 auto;min-height:0;margin:6px 0 0;display:flex;align-items:center}
body.pl-fill .kbd-wrap .pl-kbd{width:100%}
body.pl-fill .pl-fall{display:none}
body.pl-fill .pl-keys{height:clamp(150px,44vh,300px)}
/* utility buttons in fill mode: bigger, clearly tappable (instructor: the
   settings gear was too small) — ✕ = primary, ⚙ = solid gold so it stands out */
body.pl-fill #btnFull,
body.pl-fill #btnFillCog{min-width:58px;min-height:52px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0}
body.pl-fill #btnFull{font-size:28px}
body.pl-fill #btnFillCog{font-size:34px}   /* gear reads bigger than the ✕ */
/* the pair FLOATS at the fixed top-right corner (out of the play-strip flow so
   the transport row never wraps and the keyboard keeps full height): ⛶ in the
   corner, ⚙ just before it */
body.pl-fill #btnFull,
body.pl-fill #btnFillCog{position:fixed;top:8px;z-index:55;box-shadow:0 3px 10px rgba(13,37,61,.25)}
body.pl-fill #btnFull{right:10px}
body.pl-fill #btnFillCog{right:78px}
body.pl-fill #btnFull{background:var(--primary);color:#fff;border-color:var(--primary)}
body.pl-fill #btnFillCog{background:var(--accent);color:#fff;border:none}
body.pl-fill #btnFillCog:hover{background:var(--accent-dark);box-shadow:0 4px 14px rgba(232,163,61,.4)}

/* ⚙ opens the controls card as a modal over the fill view.
   The dim backdrop MUST live on .pl-main, not body: .pl-main is a fixed
   stacking context (z-index:50), so a body-level backdrop (z-index:59) would
   render ABOVE .pl-main and cover the modal inside it — the bug where the
   settings showed only a gray, unclickable screen. */
body.pl-fill.pl-settings .pl-main::before{content:"";position:fixed;inset:0;z-index:59;
  background:rgba(13,37,61,.42)}
/* keep the corner ⛶/⚙ tappable above the modal (⚙ closes it, ✕ exits) */
body.pl-fill.pl-settings #btnFull,
body.pl-fill.pl-settings #btnFillCog{z-index:62}
body.pl-fill.pl-settings .pl-controls{display:flex;position:fixed;z-index:60;
  left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,92vw);
  max-height:86vh;overflow-y:auto;overflow-x:hidden;background:var(--card);
  border:1px solid var(--hairline);border-radius:16px;box-shadow:var(--shadow-2);padding:18px}
/* stack the controls vertically in the modal so nothing overflows sideways —
   Lesson / Key / Exercise each on its own full-width row, sliders + checkboxes
   pack from the left and wrap (instructor: reach every key without exiting) */
body.pl-fill.pl-settings .ctl-row-3col{display:flex;flex-direction:column;gap:12px;align-items:stretch}
body.pl-fill.pl-settings .ctl-row-3col select{flex:1;min-width:0}
body.pl-fill.pl-settings .ctl-row-3col label{font-size:14px;font-weight:600;color:var(--ink)}
body.pl-fill.pl-settings .ctl-row{justify-content:flex-start;gap:12px 18px}