/* Jazzlab — palette "Босса" (sand + sea green), light and dark. */
:root {
  --bg: #f3efe6; --panel: #fffdf8; --sub: #e9e3d6; --fg: #1f2421; --muted: #59605a; --line: #e0d9cb;
  --accent: #0f766e; --accent-fg: #ffffff; --hero: #0f4f4a; --hero-fg: #ffffff;
  --rh: #1f5fbf; --rh-soft: #dce6f6; --lh: #c2410c; --lh-soft: #f7dccb;
  --ok: #15803d; --ok-soft: #dcf0e1; --meh: #9a5b00; --meh-soft: #f6e7c8; --bad: #be123c; --bad-soft: #fbe0e6; --none: #e0d9cb;
  --paper: #fffdf8; --staff: #7a7f78; --band: rgba(31, 95, 191, .12);
  --ivory: #fffdf6; --ivory-edge: #cfc8b8; --ebony: #1f2421; --ebony-top: #3b403d;
  --shadow: 0 1px 3px rgba(31, 36, 33, .14);
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --music: "Noto Music", "Bravura", "Segoe UI Symbol", serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0f1514; --panel: #171f1e; --sub: #212b2a; --fg: #ebefe9; --muted: #a3aca6; --line: #2b3634;
  --accent: #2dd4bf; --accent-fg: #0b1413; --hero: #163a37; --hero-fg: #ffffff;
  --rh: #7aa7f5; --rh-soft: #213a5e; --lh: #fb8a4c; --lh-soft: #57301a;
  --ok: #4ade80; --ok-soft: #14331f; --meh: #eab308; --meh-soft: #40351a; --bad: #fb7185; --bad-soft: #4a1d27; --none: #2f3a38;
  --paper: #131a19; --staff: #85908b; --band: rgba(122, 167, 245, .16);
  --ivory: #e9e6dc; --ivory-edge: #8d8a80; --ebony: #070a0a; --ebony-top: #2a302e;
  --shadow: 0 1px 3px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ---- other palettes: "Студия" (graphite + orange) and "Клуб" (navy + brass) ---- */
:root[data-scheme="studio"]:not([data-theme="dark"]) {
  --bg: #eef0f4; --panel: #ffffff; --sub: #e4e7ed; --fg: #191c25; --muted: #596072; --line: #d6dae3;
  --accent: #c25e0a; --accent-fg: #ffffff; --hero: #232836; --hero-fg: #ffffff;
  --rh: #2563c9; --rh-soft: #dbe6fa; --lh: #b4520a; --lh-soft: #f8e0c4;
  --ok: #15803d; --ok-soft: #dff2e5; --meh: #a86200; --meh-soft: #fbecd0; --bad: #c81e24; --bad-soft: #fbe1e2; --none: #d6dae3;
  --paper: #ffffff; --staff: #7b8190; --band: rgba(37, 99, 201, .12);
  --ivory: #ffffff; --ivory-edge: #c9ced8; --ebony: #191c25; --ebony-top: #3a3f4c;
}
:root[data-scheme="studio"][data-theme="dark"] {
  --bg: #12141a; --panel: #1b1e26; --sub: #252935; --fg: #e8eaf0; --muted: #a0a7b6; --line: #2e3340;
  --accent: #f39a45; --accent-fg: #12141a; --hero: #262b38; --hero-fg: #ffffff;
  --rh: #6aa0f5; --rh-soft: #1d2b45; --lh: #f0a050; --lh-soft: #5a3a1a;
  --ok: #45c46f; --ok-soft: #173826; --meh: #e9ad40; --meh-soft: #45351a; --bad: #f26166; --bad-soft: #4a1d22; --none: #343a48;
  --paper: #161921; --staff: #8a91a1; --band: rgba(106, 160, 245, .16);
  --ivory: #e6e8ee; --ivory-edge: #8a8f9c; --ebony: #08090c; --ebony-top: #2b2f3a;
}
:root[data-scheme="club"]:not([data-theme="dark"]) {
  --bg: #e9ecf2; --panel: #ffffff; --sub: #dde2eb; --fg: #0f1a2e; --muted: #4f5b73; --line: #cfd6e2;
  --accent: #1e3a6e; --accent-fg: #ffffff; --hero: #0f1a2e; --hero-fg: #f3d58a;
  --rh: #2f5fd0; --rh-soft: #dbe4f8; --lh: #b5591d; --lh-soft: #f3dcc8;
  --ok: #167a3e; --ok-soft: #ddf0e3; --meh: #9a6300; --meh-soft: #f7e9cc; --bad: #c0262d; --bad-soft: #f8dfe0; --none: #cfd6e2;
  --paper: #ffffff; --staff: #75809a; --band: rgba(47, 95, 208, .12);
  --ivory: #ffffff; --ivory-edge: #c3cbd9; --ebony: #0f1a2e; --ebony-top: #2c3a57;
}
:root[data-scheme="club"][data-theme="dark"] {
  --bg: #0a1120; --panel: #111a2d; --sub: #1a2540; --fg: #eef1f7; --muted: #9aa6bd; --line: #24314a;
  --accent: #e6b85c; --accent-fg: #0a1120; --hero: #16223b; --hero-fg: #f3d58a;
  --rh: #7aa7ff; --rh-soft: #15233f; --lh: #f2a65e; --lh-soft: #4d3218;
  --ok: #4cc77a; --ok-soft: #14331f; --meh: #ecb24a; --meh-soft: #41321a; --bad: #ff6b6b; --bad-soft: #4a1d24; --none: #26324b;
  --paper: #0d1526; --staff: #8693ad; --band: rgba(122, 167, 255, .16);
  --ivory: #e8ebf2; --ivory-edge: #8790a3; --ebony: #04070e; --ebony-top: #212c45;
}
.schemes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.schemes button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); cursor: pointer; font-weight: 700; font-size: 13px; min-height: 44px; }
.schemes button[aria-pressed="true"] { border-color: var(--accent); }
.schemes .sw3 { display: flex; } .schemes .sw3 i { width: 18px; height: 18px; border-radius: 50%; margin-left: -5px; border: 2px solid var(--panel); }
.schemes .sw3 i:first-child { margin-left: 0; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font: 15px/1.5 var(--body); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
h1 { font: 700 24px/1.2 var(--display); letter-spacing: -.01em; margin: 0; }
.muted { color: var(--muted); margin: 0; }
.grow { flex: 1 1 0; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; }
#app { min-height: 100%; display: flex; flex-direction: column; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.accent { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.xl { min-height: 56px; padding: 0 24px; font-size: 17px; font-weight: 800; border-radius: 16px; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; text-decoration: none; list-style: none; }
.iconbtn::-webkit-details-marker { display: none; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 13px; background: var(--sub); flex: none; }
.seg button { min-height: 40px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--panel); color: var(--fg); box-shadow: var(--shadow); font-weight: 800; }
.seg button:disabled { opacity: .55; cursor: not-allowed; }
.seg.big button { min-height: 44px; font-size: 15px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 260px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.chip.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; }

/* ---------- header ---------- */
header.top { display: flex; align-items: center; gap: 12px; padding: 12px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
  background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: nowrap; min-width: 0; }
header.top > * { flex: none; }
header.top > .titles { flex: 0 1 auto; min-width: 80px; }
header.top > .grow { flex: 1 1 0; min-width: 0; }
header.top .chip { max-width: 210px; }
header.top .chip svg { flex: none; }
.brand { display: flex; align-items: center; gap: 10px; }
.brandname { font: 700 24px var(--display); letter-spacing: -.02em; white-space: nowrap; }
/* the red "black key" between jazz and lab — same mark as the favicon */
.brandname .key { display: inline-block; width: .27em; height: .64em; margin: 0 .12em; border-radius: .06em; background: #e5383b; vertical-align: .27em; }
.titles { display: flex; flex-direction: column; min-width: 0; }
.kicker { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.titles .title { font: 700 18px/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stages button { display: inline-flex; align-items: center; gap: 8px; }
.stages .num { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--none); color: var(--muted); }
.stages button[aria-pressed="true"] .num { background: var(--accent); color: var(--accent-fg); }
.stages button.done { color: var(--ok); }
.stages button.done .num { background: var(--ok-soft); color: var(--ok); }
.settings { position: relative; flex: none; }
.settings[open] > summary { background: var(--sub); }
.settings .pop { position: absolute; right: 0; top: 52px; z-index: 20; width: 340px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 84px); overflow-y: auto;
  padding: 6px 18px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.popsec { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; }
.popsec + .popsec { border-top: 1px solid var(--line); }
.pophead { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pop .seg { display: flex; width: 100%; }
.pop .seg button { flex: 1 1 0; min-width: 0; padding: 0 6px; }
.pop .schemes button { background: var(--panel); }
.popbtn { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; line-height: 1.3; min-height: 48px; padding: 8px 14px; font-size: 14px; }
.popbtn svg { flex: none; }
label.chk { display: flex; align-items: center; gap: 12px; min-height: 40px; font-weight: 600; line-height: 1.3; cursor: pointer; }
label.chk input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }

/* ---------- course ---------- */
main.course { flex: 1; display: flex; gap: 24px; padding: 24px max(24px, env(safe-area-inset-right)) 32px max(24px, env(safe-area-inset-left)); align-items: flex-start; }
.coursemain { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.coursemain > .row { flex-wrap: wrap; }
.stepgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stepcard { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 18px; min-height: 172px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--fg); }
a.stepcard:hover { border-color: var(--accent); }
.stepcard[data-kind="now"] { border: 2px solid var(--accent); }
.stepcard[data-kind="lock"] { opacity: .62; }
.stepcard .row { justify-content: space-between; }
.steptitle { font: 700 18px/1.25 var(--display); }
.badge { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--sub); color: var(--muted); }
.badge.done { background: var(--ok-soft); color: var(--ok); }
.badge.now { background: var(--accent); color: var(--accent-fg); }
.bars { display: flex; gap: 5px; }
.bars span { flex: 1 1 0; height: 8px; border-radius: 4px; background: var(--none); }
.bars .ok { background: var(--ok); } .bars .meh { background: var(--meh); }
.meta { font-size: 13px; color: var(--muted); }
.courseside { width: 320px; flex: none; display: flex; flex-direction: column; gap: 14px; }
.hero { background: var(--hero); color: var(--hero-fg); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.hero .kicker { color: inherit; opacity: .75; }
.herotitle { font: 700 21px/1.25 var(--display); }
.hero .btn { margin-top: 6px; }
.stats { padding: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.stats div { display: flex; flex-direction: column; }
.stats b { font: 700 20px var(--display); }
.stats small { font-size: 13px; color: var(--muted); }
.stats span { font-size: 12px; color: var(--muted); }
.tip { padding: 16px 18px; }
.tip p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- exercise ---------- */
.exscreen { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
main.ex { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 12px max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
.staffpanel { flex: 1 1 0; min-height: 150px; display: flex; flex-direction: column; padding: 10px 16px 8px; background: var(--paper); }
.staffhead { display: flex; align-items: center; gap: 14px; min-height: 36px; }
.barno { font: 500 13px var(--display); color: var(--muted); white-space: nowrap; }
.counts { display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; }
.counts span { text-align: center; border-radius: 8px; font: 500 17px/30px var(--display); color: var(--muted); }
.counts .beat { color: var(--fg); }
.counts .cur { background: var(--fg); color: var(--bg); }
.fb { font-size: 14px; font-weight: 700; color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.fb b { color: var(--fg); }
.fb .ok { color: var(--ok); } .fb .meh { color: var(--meh); } .fb .bad { color: var(--bad); }
.fb svg { vertical-align: -3px; }
.staffwrap { flex: 1 1 0; min-height: 0; display: flex; overflow: hidden; }
svg.staff { width: 100%; height: 100%; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .about { flex: 1 1 100%; font-weight: 500; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot.rh { background: var(--rh); } .dot.lh { background: var(--lh); } .dot.ok { background: var(--ok); } .dot.meh { background: var(--meh); } .dot.bad { background: var(--bad); }
.exscreen[data-stage="memory"] .staffwrap { visibility: hidden; }
.exscreen[data-stage="memory"] .legend .about { display: none; }

.staff .ln { stroke: var(--staff); stroke-width: 1.1; }
.staff .bl { stroke: var(--staff); stroke-width: 1.4; }
.staff .ledger { stroke: currentColor; stroke-width: 1.2; }
.staff .ink { fill: var(--fg); stroke: var(--fg); }
.staff .ink-s { fill: none; stroke: var(--fg); }
.staff .clef { fill: var(--fg); font-family: var(--music); }
.staff .ts { fill: var(--fg); font: 700 22px Georgia, "Times New Roman", serif; }
.staff .acc { fill: currentColor; } .staff .acc-s { fill: none; stroke: currentColor; stroke-linecap: butt; }
.staff .nt { color: var(--fg); cursor: pointer; }
.staff .nt.r.cur { color: var(--rh); } .staff .nt.l.cur { color: var(--lh); }
.staff .nt.ok { color: var(--ok); } .staff .nt.meh { color: var(--meh); } .staff .nt.bad { color: var(--bad); }
.staff .fg { font: 700 11px var(--body); fill: var(--fg); } .staff .fg.sug { fill: var(--muted); font-weight: 500; }
.staff .nm { font: 700 11px var(--body); text-anchor: middle; opacity: .55; }
.staff .nm .nma { font-size: 1.3em; font-weight: 400; }
.staff .nm.r { fill: var(--rh); } .staff .nm.l { fill: var(--lh); } .staff .nm.cur { opacity: 1; font-size: 12px; }
.staff .dy { font: italic 700 16px Georgia, serif; fill: var(--fg); }
.staff .band { fill: var(--band); }
.staff .ghost { color: var(--muted); transition: opacity .4s; }
.staff .ghost text { font: 700 12px var(--body); fill: var(--fg); }

.kbpanel { flex: none; padding: 12px 16px; }
.kb { position: relative; height: clamp(120px, 24dvh, 210px); display: flex; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.key { position: relative; cursor: pointer; }
.white { flex: 1; background: var(--ivory); border: 1px solid var(--ivory-edge); border-top: none; border-radius: 0 0 8px 8px; margin-right: -1px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 8px; gap: 6px; z-index: 1; }
.black { position: absolute; top: 0; height: 60%; background: linear-gradient(var(--ebony-top), var(--ebony) 18%); border-radius: 0 0 6px 6px; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 6px; gap: 4px; box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.lbl { font-size: 11px; font-weight: 700; color: #6b6f68; line-height: 1.1; text-align: center; }
.black .lbl { display: none; }
.mid::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--muted); }
.badge:empty { display: none; }
.key .badge { width: 30px; height: 30px; border-radius: 50%; display: none; align-items: center; justify-content: center; padding: 0;
  font: 700 15px var(--display); color: #fff; background: transparent; }
.key.on-r { background: var(--rh-soft); } .key.on-l { background: var(--lh-soft); }
.black.on-r { background: var(--rh); } .black.on-l { background: var(--lh); }
.key.on-r .badge:not(:empty) { display: flex; background: var(--rh); } .key.on-l .badge:not(:empty) { display: flex; background: var(--lh); }
.black.on-r .badge, .black.on-l .badge { box-shadow: 0 0 0 2px #fff; }
.key.sug .badge { outline: 2px dashed currentColor; outline-offset: 2px; }
.key.on-r.sug .badge { outline-color: var(--rh); } .key.on-l.sug .badge { outline-color: var(--lh); }
.key.acc.on-r .badge { box-shadow: 0 0 0 3px var(--rh-soft), 0 0 0 5px var(--rh); }
.key.acc.on-l .badge { box-shadow: 0 0 0 3px var(--lh-soft), 0 0 0 5px var(--lh); }
.key.nx-r { box-shadow: inset 0 -6px 0 var(--rh); } .key.nx-l { box-shadow: inset 0 -6px 0 var(--lh); }
.key.muted { opacity: .45; }
.key.press, .key.down { transform: translateY(2px); }
.key::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 3; }
.key.ok::before { background: var(--ok); opacity: .55; transition: none; }
.key.meh::before { background: var(--meh); opacity: .55; transition: none; }
.key.bad::before { background: var(--bad); opacity: .6; transition: none; }

footer.actions { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.pair { display: flex; gap: 6px; }
.stepper { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 13px; background: var(--sub); }
.stepper button { width: 42px; height: 42px; border: 0; border-radius: 10px; background: var(--panel); font-size: 20px; font-weight: 800; cursor: pointer; }
.bpm { min-width: 92px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.bpm small { color: var(--muted); font-weight: 600; }
.exscreen.playing .pair, .exscreen[data-stage="tempo"] .pair, .exscreen[data-stage="memory"] .pair { display: none; }

.msg { margin: auto; padding: 40px 24px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }

/* ---------- responsive ---------- */
/* ---- Rhythm stage ---- */
.rhythmpanel, .tappad, .rbar, .rstats { display: none; }
.exscreen[data-stage="rhythm"] .staffpanel, .exscreen[data-stage="rhythm"] .kbpanel, .exscreen[data-stage="rhythm"] .hands-seg { display: none; }
.exscreen[data-stage="rhythm"] .rhythmpanel { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; flex: none; }
.exscreen[data-stage="rhythm"] .tappad, .exscreen[data-stage="rhythm"] .rbar { display: flex; }
.exscreen[data-stage="rhythm"][data-rmode="practice"] .rstats { display: grid; }
.exscreen[data-stage="rhythm"][data-rmode="practice"] .tappad { min-height: 64px; padding: 8px; }
.exscreen[data-stage="rhythm"][data-rmode="practice"] .padicon { width: 52px; height: 52px; }
.exscreen[data-stage="rhythm"][data-rmode="practice"] .padtext b { font-size: 21px; }
.exscreen[data-stage="rhythm"] .pair, .exscreen[data-stage="rhythm"] .listen-b, .exscreen[data-stage="rhythm"][data-rmode="practice"] .lsteps { display: none; }
.exscreen[data-stage="rhythm"][data-rmode="learn"] .phint { display: none; }
.rbar { align-items: center; gap: 12px; flex-wrap: wrap; flex: none; }
.rbar .seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.lsteps { display: flex; gap: 8px; }
.lsteps button { font: inherit; font-weight: 800; font-size: 14px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lsteps button .n { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--sub); color: var(--fg); }
.lsteps button[aria-pressed="true"] { color: var(--fg); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lsteps button[aria-pressed="true"] .n { background: var(--accent); color: var(--panel); }
.phint { color: var(--muted); font-size: 15px; }
.rhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rhead h2 { margin: 0; font: 700 21px/1.2 var(--display); letter-spacing: -.01em; }
.rhead .sub { color: var(--muted); font-size: 15px; flex: 1 1 320px; }
/* lane */
.lane { position: relative; height: 196px; border-radius: 16px; background: var(--sub); overflow: hidden; --top-n: 78px; --top-t: 156px; }
.lane[data-mode="practice"] { height: 190px; --top-n: 52px; --top-t: 130px; }
.strip { position: absolute; inset: 0 auto 0 0; will-change: transform; }
.lane[data-mode="learn"] .strip { left: 3%; width: 94% !important; }
.bline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.bline.bar { width: 3px; background: var(--muted); opacity: .45; }
.bnum { position: absolute; top: 10px; width: 48px; margin-left: -24px; text-align: center; font: 700 28px/1 var(--display); color: var(--muted); transition: color .08s; }
.bnum.and { top: 18px; font-size: 18px; font-weight: 500; }
.lane[data-mode="practice"] .bnum { font-size: 20px; top: 8px; margin-left: -18px; width: 36px; }
.bnum.cur { color: var(--accent); }
.lnote { position: absolute; top: var(--top-n); height: 60px; margin-left: 4px; border-radius: 14px; background: var(--rh); color: var(--panel); box-sizing: border-box; border: 2px solid var(--rh); display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 22px var(--display); overflow: hidden; white-space: nowrap; transition: transform .08s, box-shadow .08s; }
.lane[data-mode="practice"] .lnote { height: 56px; border-radius: 12px; }
.lnote i { font-style: normal; font-size: 18px; opacity: .85; }
.lnote.now { transform: scale(1.04); box-shadow: 0 0 0 4px var(--accent); }
.lnote.past { opacity: .45; }
.lnote.ok { box-shadow: inset 0 -6px 0 var(--ok); } .lnote.meh { box-shadow: inset 0 -6px 0 var(--meh); } .lnote.bad { box-shadow: inset 0 -6px 0 var(--bad); }
.lrest { position: absolute; top: var(--top-n); height: 60px; margin-left: 4px; border-radius: 14px; border: 2px dashed var(--muted); box-sizing: border-box; opacity: .6; display: flex; align-items: center; justify-content: center; color: var(--muted); font: italic 500 18px var(--display); }
.lane[data-mode="practice"] .lrest { height: 56px; }
.tline { position: absolute; left: 0; right: 0; top: var(--top-t); height: 2px; background: var(--line); }
.tick { position: absolute; top: calc(var(--top-t) - 10px); width: 6px; height: 22px; margin-left: -3px; border-radius: 3px; background: var(--ok); }
.tick.meh { background: var(--meh); } .tick.bad { background: var(--bad); }
.tick span { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 800; color: var(--ok); }
.tick.meh span { color: var(--meh); } .tick.bad span { color: var(--bad); }
.head { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: var(--fg); display: none; }
.ball { position: absolute; top: 48px; width: 22px; margin-left: 0; height: 22px; border-radius: 50%; background: var(--accent); display: none; }
.lane[data-mode="learn"] .head, .lane[data-mode="learn"] .ball { display: block; }
.lane[data-mode="practice"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: 22%; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--fg); }
.lbadge { position: absolute; bottom: 10px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 800; font-size: 14px; white-space: nowrap; }
.sw { display: inline-block; width: 24px; height: 14px; border-radius: 4px; box-sizing: border-box; vertical-align: -2px; }
.sw.n { background: var(--rh); } .sw.r { border: 2px dashed var(--muted); }
.tk { display: inline-block; width: 6px; height: 16px; border-radius: 3px; vertical-align: -3px; background: var(--ok); }
.tk.meh { background: var(--meh); } .tk.bad { background: var(--bad); }
/* practice panels */
.rstats { grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; flex: none; }
.rstat { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.rstat h3 { margin: 0; font-size: 15px; font-weight: 800; }
.rstat p { margin: 0; font-size: 14px; }
.gauge { position: relative; height: 40px; }
.gauge::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 4px; border-radius: 2px; background: var(--sub); }
.gzone { position: absolute; left: 40%; width: 20%; top: 10px; height: 20px; border-radius: 6px; background: var(--ok-soft); }
.gmid { position: absolute; left: 50%; top: 4px; width: 2px; height: 32px; background: var(--ok); }
.gdots i { position: absolute; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ok); opacity: .8; }
.gdots i.meh { background: var(--meh); }
.gavg { position: absolute; top: 0; width: 4px; height: 40px; margin-left: -2px; border-radius: 2px; background: var(--fg); }
.gscale { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--muted); }
.gscale b { color: var(--fg); }
.ladder { display: flex; align-items: flex-end; gap: 5px; height: 70px; }
.ladder i { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--sub); }
.ladder i.done { background: var(--accent); opacity: .55; } .ladder i.cur { background: var(--accent); }
.runs { display: flex; gap: 10px; align-items: center; }
.runs i { width: 34px; height: 34px; border-radius: 50%; border: 2px dashed var(--muted); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; color: var(--panel); }
.runs i.on { background: var(--ok); border: 0; }
.tappad { flex: 1 1 0; min-height: 120px; font: inherit; border: 2px dashed var(--rh); background: var(--rh-soft); border-radius: 24px; color: var(--fg); align-items: center; justify-content: center; gap: 22px; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; padding: 16px; }
.tappad.hit { animation: padhit .18s ease-out; }
@keyframes padhit { from { transform: scale(.985); filter: brightness(.94); } to { transform: none; filter: none; } }
.padicon { flex: none; width: 84px; height: 84px; border-radius: 50%; background: var(--rh); color: var(--panel); display: flex; align-items: center; justify-content: center; }
.padtext { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.padtext b { font: 700 26px/1.2 var(--display); }
.padtext span { color: var(--muted); font-size: 16px; }
.runs { gap: 8px; align-items: center; }
.runs i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--none); box-sizing: border-box; }
.runs i.on { background: var(--ok); border-color: var(--ok); }

@media (max-width: 1100px) {
  .stepgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  header.top { gap: 8px; }
  header.top .chip { max-width: 150px; }
  .exscreen .stages button { padding: 0 10px; }
}
/* narrow landscape / iPad split view: icon-only MIDI chip (full name stays in its tooltip) */
@media (min-width: 901px) and (max-width: 1060px) {
  header.top .chip { padding: 0; width: 44px; justify-content: center; }
  header.top .chip span { display: none; }
}
@media (max-width: 900px) {
  main.course { flex-direction: column; }
  .courseside { width: 100%; }
  .stages button { padding: 0 10px; }
  header.top { flex-wrap: wrap; row-gap: 10px; }
  header.top .chip { max-width: 220px; }
  header.top > .titles { flex: 1 1 0; }
  .exscreen .stages { order: 9; width: 100%; justify-content: center; }
  .exscreen .stages button { flex: 1 1 0; justify-content: center; }
  .exscreen header.top > .grow { display: none; }
}
@media (max-width: 640px) {
  .lane { height: 220px; } .bnum { font-size: 20px; } .lnote { font-size: 14px; height: 56px; border-radius: 10px; } .lrest { height: 56px; } .rstats { grid-template-columns: 1fr; }
  .lsteps button { padding: 0 10px; font-size: 13px; }
  .padicon { width: 56px; height: 56px; } .padtext b { font-size: 19px; } .padtext span { font-size: 14px; }
  .exscreen[data-stage="rhythm"] .tappad { min-height: 200px; flex: none; }
  .stepgrid { grid-template-columns: 1fr; }
  .counts { grid-template-columns: repeat(8, 26px); }
  .counts span { font-size: 14px; }
  .fb { flex-basis: 100%; text-align: left; }
  .staffhead { flex-wrap: wrap; }
  .exscreen { height: auto; min-height: 100dvh; overflow: visible; }
  main.ex { flex: none; }
  .staffpanel { flex: none; }
  .staffwrap { flex: none; overflow-x: auto; }
  svg.staff { min-width: 760px; height: 250px; }
  .kb { height: 150px; }
  .btn span { display: none; }
  .btn.xl span { display: inline; }
  .stages .num { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tappad.hit { animation: none; } .key.press, .key.down { transform: none; } .staff .ghost { transition: none; } }

/* ---------- course: improvisation link on a step card ---------- */
.stepcard { position: relative; }
.stepcard .stretch { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.stepcard:has(.stretch:hover) { border-color: var(--accent); }
.stepcard .stretch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.stepcard .row { position: relative; align-items: center; }
.impchip { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--sub); color: var(--fg); font-weight: 800; font-size: 13px; text-decoration: none; white-space: nowrap; }
.impchip:hover { border-color: var(--accent); }
.impchip.done { color: var(--ok); }

/* ---------- improvisation screen ---------- */
.chordchip { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); font-weight: 800; font-size: 14px; white-space: nowrap; }
main.imp { gap: 12px; }
.improw { display: flex; gap: 12px; flex: 1 1 0; min-height: 0; }
.imppanel { flex: 1 1 0; min-width: 0; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.cycle { display: flex; gap: 8px; }
.cyc { flex: 1 1 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); color: var(--muted); }
.cyc b { font-size: 12px; letter-spacing: .06em; } .cyc span { font-size: 13px; }
.cyc.on.you { background: var(--hero); color: var(--hero-fg); border-color: var(--accent); }
.cyc.on.piano, .cyc.on.rest { border-color: var(--muted); color: var(--fg); }
.cbeats { display: flex; gap: 4px; width: 90px; }
.cbeats i { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--none); }
.cbeats i.on { background: var(--accent); }
.roll { position: relative; height: 252px; border-radius: 16px; background: var(--sub); overflow: hidden; --top-n: 40px; --top-t: 128px; --rows: 4; --row-top: 92px; --row-h: 38px; }
.roll[data-rows="3"] { --row-h: 48px; }
.roll[data-rows="0"] { height: 190px; }
.rinner { position: absolute; inset: 0 2% 0 6%; }
.roll .bnum { top: 8px; font-size: 20px; width: 36px; margin-left: -18px; }
.roll .bnum.and { top: 12px; font-size: 14px; }
.roll .lnote, .roll .lrest { height: 40px; border-radius: 10px; font-size: 16px; }
.roll[data-rows="0"] .lnote, .roll[data-rows="0"] .lrest { height: 64px; font-size: 20px; top: 46px; }
.roll[data-rows="0"] { --top-t: 140px; }
.roll .lnote { background: var(--rh-soft); color: var(--rh); }
.roll[data-rows="0"] .lnote { background: var(--rh); color: var(--panel); }
.roll .lnote.ok { box-shadow: inset 0 -5px 0 var(--ok); } .roll .lnote.meh { box-shadow: inset 0 -5px 0 var(--meh); } .roll .lnote.bad { box-shadow: inset 0 -5px 0 var(--bad); }
.prow { position: absolute; left: -6.4%; right: 0; top: calc(var(--row-top) + var(--row) * var(--row-h)); height: var(--row-h); border-top: 1px dashed var(--line); }
.prow b { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); min-width: 30px; height: 30px; padding: 0 6px; box-sizing: border-box; border-radius: 15px; background: var(--rh); color: var(--panel); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.pnote { position: absolute; top: calc(var(--row-top) + var(--row) * var(--row-h) + 5px); height: calc(var(--row-h) - 10px); margin-left: 4px; border-radius: 8px; box-sizing: border-box; border: 2px solid var(--ok); background: var(--ok-soft); }
.pnote.ghost { border: 2px dashed var(--muted); background: transparent; }
.pnote.meh { border-color: var(--meh); background: var(--meh-soft); }
.pnote.other { border-style: dotted; }
.pnote.off { opacity: .6; }
.contour { position: absolute; left: 0; right: 0; top: var(--row-top); height: calc(var(--rows) * var(--row-h)); width: 100%; pointer-events: none; }
.roll[data-rows="3"] .contour { height: calc(3 * var(--row-h)); }
.roll .head { display: block; position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: var(--fg); }
.impside { width: 290px; flex: none; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
.impside .panel { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.impside h3 { margin: 0; font-size: 15px; font-weight: 800; }
.rlist { display: flex; flex-direction: column; gap: 6px; }
.rpick { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; border-radius: 12px; background: var(--panel); color: var(--fg); border: 2px solid var(--line); cursor: pointer; }
.rpick[aria-pressed="true"] { border-color: var(--accent); }
.rpick .cells { display: flex; gap: 3px; }
.rpick .cells i { height: 12px; border-radius: 4px; background: var(--rh); }
.rpick .cells i.r { background: transparent; border: 2px dashed var(--muted); box-sizing: border-box; }
.rpick small { font-size: 12px; font-weight: 700; color: var(--muted); }
.ideas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.idea { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 12px; background: var(--sub); color: var(--muted); }
.idea .ic svg { display: block; height: 20px; }
.idea b { display: block; font-size: 13px; color: var(--fg); } .idea small { font-size: 11px; line-height: 1.2; }
.idea.on { background: var(--ok-soft); color: var(--ok); }
.impscreen .kbpanel { flex: none; }
.impscreen .kb { height: clamp(100px, 18dvh, 170px); }
.foothint { color: var(--muted); font-size: 14px; flex: 1 1 200px; }
@media (max-width: 900px) {
  .improw { flex-direction: column; }
  .impside { width: auto; }
  .chordchip { display: none; }
}
@media (max-width: 640px) {
  .roll .lnote, .roll .lrest { font-size: 12px; }
  .foothint { display: none; }
}

/* rhythm pattern in notation (like the book) + loop history */
.patbox { display: flex; flex-direction: column; gap: 2px; }
.patlabel { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
svg.rnote { width: 100%; height: auto; max-height: 104px; display: block; }
.rnote .staffline { stroke: var(--fg); stroke-width: 2; }
.rnote .tsig { font: 700 24px var(--display); fill: var(--fg); }
.rnote .fill { fill: var(--fg); } .rnote .stem { stroke: var(--fg); stroke-width: 2.5; }
.rnote .glyph { fill: none; stroke: var(--fg); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.rnote .rn.now .fill { fill: var(--accent); } .rnote .rn.now .stem, .rnote .rn.now .glyph { stroke: var(--accent); }
.rnote .count { font: 500 20px var(--display); fill: var(--muted); text-anchor: middle; }
.rnote .count.beat { font-weight: 700; fill: var(--fg); }
.rnote .count.now { fill: var(--accent); }
.loops { display: flex; gap: 5px; align-items: center; }
.loops i { width: 14px; height: 14px; border-radius: 50%; background: var(--ok); }
.loops i.meh { background: var(--meh); } .loops i.bad { background: var(--bad); }
.lane[data-mode="loop"] .head, .lane[data-mode="loop"] .ball { display: block; }
.lane[data-mode="loop"] .strip { left: 3%; width: 94% !important; }
.lane[data-mode="loop"] { height: 170px; --top-n: 60px; --top-t: 136px; }
.lane[data-mode="loop"] .ball { top: 34px; }
.lane[data-mode="loop"] .bnum { font-size: 20px; top: 6px; }
/* rhythm stage: fit one iPad screen */
.exscreen[data-stage="rhythm"] .rhythmpanel { gap: 8px; padding: 14px 20px; }
.exscreen[data-stage="rhythm"] .rhead .sub { font-size: 14px; }
.exscreen[data-stage="rhythm"] .tappad { min-height: 84px; }
.exscreen[data-stage="rhythm"][data-rmode="practice"] .rhythmpanel .legend { display: none; }
.exscreen[data-stage="rhythm"][data-rmode="practice"] svg.rnote { max-height: 84px; }
.exscreen[data-stage="rhythm"][data-rmode="practice"] .patlabel { display: none; }
.lane[data-mode="loop"] { height: 132px; --top-n: 46px; --top-t: 116px; }
.lane[data-mode="loop"] .ball { top: 26px; }
.lane[data-mode="loop"] .lnote, .lane[data-mode="loop"] .lrest { height: 50px; }
.rstat { padding: 10px 16px; gap: 6px; }
.ladder { height: 48px; }
.exscreen[data-stage="rhythm"][data-rmode="practice"] .tappad { min-height: 56px; }

/* ---------- chords mode ---------- */
:root { --ext: #7c3aed; --ext-soft: #ece4fb; --bassc: #6b7280; }
:root[data-theme="dark"] { --ext: #b393f7; --ext-soft: #2e2346; --bassc: #a8b0bd; }
.kbpanel[hidden] { display: none; }
.k-root, .k-base { --kc: var(--accent); } .k-third { --kc: var(--rh); } .k-seventh { --kc: var(--lh); } .k-tension { --kc: var(--ext); } .k-bass { --kc: var(--bassc); }
.navtabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; color: var(--muted); font-weight: 700; text-decoration: none; white-space: nowrap; }
.navtabs a[aria-current="page"] { background: var(--panel); color: var(--fg); box-shadow: var(--shadow); font-weight: 800; }
.ltabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; color: var(--muted); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ltabs a[aria-current="page"] { background: var(--panel); color: var(--fg); box-shadow: var(--shadow); font-weight: 800; }
.ltabs a.done { color: var(--ok); }
.cscreen { min-height: 100dvh; display: flex; flex-direction: column; }
.cscreen main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; padding: 18px max(24px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); min-height: 0; }
.cscreen h2, .chub h2 { font: 500 19px/1.25 var(--display); margin: 0; }
.cscreen .kbpanel { margin-top: auto; }
.bigkb .kb { height: clamp(150px, 27dvh, 230px); }

/* key marks */
.key[class*=" mk-"] .badge:not(:empty) { display: flex; background: rgba(255, 255, 255, .24); width: 26px; height: 26px; font-size: 13px; }
.key.mk-base, .key.mk-third, .key.mk-seventh, .key.mk-tension, .key.mk-bass, .key.mk-hit, .key.mk-wrong { color: #fff; }
.key.mk-base { background: var(--accent); } .key.mk-third { background: var(--rh); } .key.mk-seventh { background: var(--lh); }
.key.mk-tension { background: var(--ext); } .key.mk-bass { background: var(--bassc); }
.key.mk-hit { background: var(--ok); } .key.mk-wrong { background: var(--bad); }
.key.mk-miss { outline: 3px dashed var(--meh); outline-offset: -6px; }
.black.mk-miss { outline-color: #eab308; }
.key[class*=" mk-"] .lbl { color: inherit; }
:root[data-theme="dark"] .key.mk-base .badge, :root[data-theme="dark"] .key.mk-bass .badge { color: var(--bg); }
:root[data-theme="dark"] .key.mk-base, :root[data-theme="dark"] .key.mk-bass, :root[data-theme="dark"] .key.mk-third, :root[data-theme="dark"] .key.mk-seventh, :root[data-theme="dark"] .key.mk-tension, :root[data-theme="dark"] .key.mk-hit, :root[data-theme="dark"] .key.mk-wrong { color: var(--bg); }
.dot.k-base, .dot.k-root, .dot.k-third, .dot.k-seventh, .dot.k-tension, .dot.k-bass { background: var(--kc); }

/* hub */
main.chub { flex: 1; display: grid; grid-template-columns: minmax(340px, 460px) minmax(0, 1fr); gap: 22px; align-items: start;
  padding: 22px max(24px, env(safe-area-inset-right)) 28px max(24px, env(safe-area-inset-left)); }
.cpath { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.cpath ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cprow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; text-decoration: none; color: var(--fg); min-height: 44px; }
.cprow:hover { background: var(--sub); }
.cprow.now { outline: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.pnum { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: var(--sub); color: var(--muted); }
.cprow.now .pnum { background: var(--accent); color: var(--accent-fg); }
.cprow.done .pnum { background: var(--ok-soft); color: var(--ok); }
.ptext { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ptext b { font-size: 15px; } .ptext span { font-size: 13px; color: var(--muted); }
.psym { font: 500 14px var(--display); color: var(--accent); white-space: nowrap; }
.cside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.chero { gap: 14px; padding: 24px; }
.chero p { margin: 0; opacity: .85; }
.chero label { font-size: 13px; opacity: .8; margin-bottom: -8px; }
.symform { display: flex; gap: 10px; }
.symin { flex: 1 1 0; min-width: 0; height: 56px; border-radius: 14px; border: 1px solid var(--line); padding: 0 18px; font: 500 24px var(--display); background: var(--panel); color: var(--fg); }
.symform.small .symin { height: 48px; font-size: 20px; }
.decodebtn { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.chero .decodebtn { background: var(--hero-fg); color: var(--hero); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips > span { font-size: 13px; opacity: .8; margin-right: 2px; }
.schip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font: 500 14px var(--display); text-decoration: none; cursor: pointer;
  background: var(--panel); color: var(--fg); border: 1px solid var(--line); }
.chero .schip { background: rgba(255, 255, 255, .14); color: var(--hero-fg); border-color: transparent; }
.ctiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.ctile { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--fg); min-height: 140px; }
.ctile:hover { border-color: var(--accent); }
.cticon { font: 500 24px var(--display); color: var(--accent); }
.ctile span:last-child { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* symbol with coloured parts */
.csym { font: 700 clamp(48px, 9vw, 84px)/1 var(--display); letter-spacing: -.03em; display: inline-flex; align-items: baseline; white-space: nowrap; }
.csym span { color: var(--kc); }

/* decoder */
.drow { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.drow .symform { flex: 0 1 360px; }
.dout { display: flex; flex-direction: column; gap: 16px; }
.dhead { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dname { display: flex; flex-direction: column; gap: 2px; } .dname b { font-size: 18px; }
.dcards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
.dcard { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--kc); border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.dcard p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.dtag { min-width: 34px; height: 30px; padding: 0 8px; box-sizing: border-box; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  font: 500 14px var(--display); color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, var(--panel)); }
.drow2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dtones, .ppills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; font-size: 15px; color: var(--kc); background: color-mix(in srgb, var(--kc) 13%, var(--panel)); }
.tpill b { font: 500 15px var(--display); } .tpill small { font-size: 12px; opacity: .85; }
.tpill.opt { opacity: .6; border: 1px dashed var(--kc); }
.tpill.got { background: var(--ok-soft); color: var(--ok); }
.dstatus { font-weight: 700; font-size: 14px; color: var(--muted); }
.dstatus.ok { color: var(--ok); } .dstatus.meh { color: var(--meh); }
.derr { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .derr b { font: 700 28px var(--display); } .derr p { margin: 0; color: var(--muted); }
.dkb .kb { height: clamp(140px, 24dvh, 210px); }

/* keys trainer + practice feedback */
.krow, .prow2 { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.kask { display: flex; flex-direction: column; gap: 4px; }
.ktarget { font: 700 clamp(64px, 11vw, 104px)/1 var(--display); color: var(--accent); }
.kru { font-size: 34px; font-weight: 700; }
.kfb { width: 380px; max-width: 100%; box-sizing: border-box; border-radius: 18px; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; background: var(--sub); }
.kfb b { font-size: 18px; } .kfb span { font-size: 15px; line-height: 1.45; }
.kfb.ok { background: var(--ok-soft); color: var(--ok); } .kfb.meh { background: var(--meh-soft); color: var(--meh); }
.lms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lm { padding: 12px 16px; border-radius: 16px; } .lm p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.kfoot { flex-wrap: wrap; }

/* lesson */
.lgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; }
.lrule { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; } .lrule p { margin: 0; line-height: 1.5; }
.stair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.snode { min-width: 62px; height: 62px; padding: 0 8px; box-sizing: border-box; border-radius: 14px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: var(--kc); color: #fff; }
:root[data-theme="dark"] .snode { color: var(--bg); }
.snode b { font: 500 21px var(--display); } .snode small { font-size: 11px; font-weight: 800; opacity: .85; }
.snode.opt { opacity: .55; }
.sarrow { font-weight: 800; color: var(--muted); white-space: nowrap; }
.lsound { gap: 10px; } .lsound p { margin: 0; opacity: .88; line-height: 1.5; } .lsound .row { margin-top: auto; flex-wrap: wrap; }
.lsound .decodebtn { background: var(--hero-fg); color: var(--hero); }
.ghostbtn { background: transparent; color: inherit; border: 1px solid currentColor; }
.prog { display: flex; gap: 10px; flex-wrap: wrap; }
.progchip { min-height: 56px; padding: 0 18px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel); font: 500 22px var(--display); color: var(--fg); cursor: pointer; }
.progchip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.kbhead { margin-bottom: 8px; font-weight: 600; }
.clegend { margin: 0; }
.lcta { flex-wrap: wrap; }

/* practice */
.pbody { display: flex; flex-direction: column; gap: 14px; }
.pbody > .pq { display: flex; padding: 0; min-height: 0; flex-wrap: wrap; align-items: center; gap: 24px; }
.pask { display: flex; flex-direction: column; gap: 2px; }
.pmid { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.psymbig .csym { font-size: clamp(56px, 10vw, 104px); }
.ptools { flex-wrap: wrap; }
.pdone { padding: 22px; display: flex; flex-direction: column; gap: 10px; } .pdone b { font: 700 22px var(--display); color: var(--ok); } .pdone p { margin: 0; color: var(--muted); }
.pdone[hidden], .pbody[hidden] { display: none; }

@media (max-width: 1100px) {
  main.chub { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); }
  .lgrid { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
  main.chub { grid-template-columns: 1fr; }
  .lgrid { grid-template-columns: 1fr; }
  .dcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ltabs { order: 9; width: 100%; justify-content: center; } .ltabs a { flex: 1 1 0; justify-content: center; padding: 0 8px; }
  .cscreen header.top > .grow { display: none; } .cscreen header.top > .titles { flex: 1 1 0; }
}
@media (max-width: 640px) {
  .ctiles, .lms, .dcards { grid-template-columns: 1fr; }
  .kfb { width: 100%; }
  .symform { flex-wrap: wrap; } .symform .btn { flex: 1 1 100%; }
  .drow .symform { flex: 1 1 100%; }
  .navtabs a { padding: 0 10px; }
}
.cscreen main.practice .bigkb .kb, .cscreen main.keys .bigkb .kb, .cscreen main.lesson .kb { height: clamp(170px, 30dvh, 300px); }
.csym { max-width: 100%; overflow: hidden; }
.drow > * { min-width: 0; max-width: 100%; }