:root {
  --bg: #0b0b0e;
  --bg2: #111116;
  --card: #15151b;
  --card2: #1b1b23;
  --line: var(--track);
  --line2: #363644;
  --text: var(--ink);
  --muted: #8d8a85;
  --gold: #d9b56f;
  --gold2: #f3dc9b;
  --gold-deep: #9c7438;
  --perfect: #45d49a;
  --good: #b9d95b;
  --fair: #f2d04b;
  --poor: #f59a3c;
  --bad: #ff5f5f;
  --off: #ff5f5f;
  --miss: #5c5c6a;
  --serif: "Cormorant Garamond", "Cambria", Georgia, serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --r: 14px;
  --glow1: #1c1913; --glow2: #13151c; --nav1: #101015; --nav2: #0c0c10; --card-end: #121217;
  --shade: #0006; --veil: #0b0b0ecc; --btn: #1c1c24; --btn-hover: #22222b; --track: #2a2a35;
  --text2: #bdb9b1; --text3: #cfc9bd; --ink: #ece8df; --thumb: #2c2c38; --th: #16161c;
  --tint: #ffffff14; --tint-weak: #ffffff05; --tint-strong: #ece8df55;
  --staff-theme: #6a6672; --staff: var(--staff-user, var(--staff-theme)); --staff-w: var(--staff-w-user, 1.1px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 700px at 85% -10%, var(--glow1) 0%, transparent 60%),
              radial-gradient(900px 600px at -10% 110%, var(--glow2) 0%, transparent 60%), var(--bg);
  color: var(--text); font: 14px/1.45 var(--sans); display: flex; overflow: hidden;
  -webkit-font-smoothing: antialiased; user-select: none;
}
button, select, input, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }
.spacer { flex: 1; }
.mt { margin-top: 18px; }
code { background: var(--btn-hover); padding: 1px 6px; border-radius: 5px; color: var(--gold2); font-size: 12px; }
label, .eyebrow { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
label.inline { margin: 0 8px 0 0; }

/* ---------- splash ---------- */
#splash { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; place-items: center; transition: opacity .6s; }
#splash.gone { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; }
.splash-inner h1 { font: 400 46px/1 var(--serif); margin: 22px 0 8px; letter-spacing: .02em; }
.splash-inner p { color: var(--muted); margin: 0 0 26px; }
.bar { width: 240px; height: 2px; background: var(--line); margin: 0 auto; overflow: hidden; border-radius: 2px; }
.bar span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: slide 1.4s infinite ease-in-out; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------- nav ---------- */
#nav { width: 236px; flex: none; background: linear-gradient(180deg, var(--nav1), var(--nav2)); border-right: 1px solid var(--line); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 26px; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font: 500 24px var(--serif); color: #1a140a; background: linear-gradient(135deg, var(--gold2), var(--gold-deep)); box-shadow: 0 6px 22px #d9b56f33, inset 0 1px 0 #fff6; }
.brand-mark.big { width: 74px; height: 74px; border-radius: 20px; font-size: 46px; margin: 0 auto; }
.brand-name { font: 500 21px/1 var(--serif); letter-spacing: .02em; }
em { font-style: italic; color: var(--gold2); }
.brand-sub { font-size: 10.5px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; color: var(--text2); text-align: left; transition: background .15s, color .15s; }
.nav-item .ico { width: 20px; text-align: center; color: var(--muted); font-size: 15px; }
.nav-item:hover:not(:disabled) { background: var(--btn); color: var(--text); }
.nav-item.active { background: linear-gradient(90deg, #d9b56f1f, #d9b56f05); color: var(--gold2); box-shadow: inset 2px 0 0 var(--gold); }
.nav-item.active .ico { color: var(--gold); }
.nav-item:disabled { opacity: .35; cursor: default; }
.nav-foot { margin-top: auto; padding: 0 10px; }
.led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-right: 8px; box-shadow: 0 0 8px var(--good); vertical-align: 1px; }
.led.ok { background: var(--perfect); box-shadow: 0 0 8px var(--perfect); }
.led.err { background: var(--off); box-shadow: 0 0 8px var(--off); }

/* ---------- layout ---------- */
main { flex: 1; overflow-y: auto; padding: 22px 28px 40px; }
.view { display: none; flex-direction: column; gap: 16px; animation: fade .35s ease; }
.view.active { display: flex; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card { background: linear-gradient(180deg, var(--card), var(--card-end)); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 40px var(--shade); }
.pad { padding: 20px 22px; }
.topbar { display: flex; align-items: flex-end; gap: 16px; padding-bottom: 4px; }
.field { display: flex; flex-direction: column; }
.field.grow { flex: 1; min-width: 0; }
.title { font: 400 26px/1.15 var(--serif); letter-spacing: .01em; }
select, input[type=number], textarea { background: var(--card2); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 12px; outline: none; }
select:focus, input:focus, textarea:focus { border-color: var(--gold-deep); }
#ex-select { font: 400 20px var(--serif); padding: 7px 12px; max-width: 520px; }
select.wide { width: 100%; }
textarea { width: 100%; resize: vertical; font-family: Consolas, monospace; font-size: 13px; margin: 6px 0 14px; user-select: text; }
.num { width: 86px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

button.ghost, .stepper button { background: var(--btn); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 15px; cursor: pointer; transition: border-color .15s, background .15s; }
button.ghost:hover, .stepper button:hover { border-color: var(--gold-deep); background: var(--btn-hover); }
button.gold { background: linear-gradient(135deg, var(--gold2), var(--gold) 50%, var(--gold-deep)); color: #1b140a; border: 0; border-radius: 10px; padding: 10px 18px; cursor: pointer; font-weight: 600; box-shadow: 0 6px 20px #d9b56f33; }
button.record { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--gold2), var(--gold) 55%, var(--gold-deep)); color: #1b140a; font-weight: 700; letter-spacing: .04em; border: 0; border-radius: 999px; padding: 12px 26px 12px 20px; cursor: pointer; box-shadow: 0 8px 28px #d9b56f40, inset 0 1px 0 #fff7; transition: transform .1s; }
button.record:active { transform: scale(.97); }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #b3261e; box-shadow: 0 0 0 3px #b3261e33; }
button.record.live { background: #241a1a; color: #ffb4ab; box-shadow: 0 0 0 1px #ff6f6f55, 0 8px 28px #ff6f6f22; }
button.record.live .rec-dot { border-radius: 3px; background: var(--off); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.stepper { display: flex; align-items: center; gap: 8px; background: var(--card2); border: 1px solid var(--line2); border-radius: 10px; padding: 3px; }
.stepper button { padding: 5px 11px; border: 0; }
.stepper span { min-width: 74px; text-align: center; color: var(--muted); }
.stepper b { color: var(--text); font: 500 19px var(--serif); }

.toggle { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text2); font-weight: 400; }
.toggle input { display: none; }
.toggle span { width: 32px; height: 18px; background: var(--track); border-radius: 99px; position: relative; transition: background .2s; }
.toggle span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #aaa; transition: transform .2s, background .2s; }
.toggle input:checked + span { background: #d9b56f55; }
.toggle input:checked + span::after { transform: translateX(14px); background: var(--gold2); }

/* ---------- stage ---------- */
.stage { padding: 18px 0 8px; overflow: hidden; }
.stage-head { display: flex; align-items: center; gap: 22px; padding: 0 24px 12px; }
.count { font: 400 64px/1 var(--serif); color: var(--gold2); min-width: 70px; text-align: center; text-shadow: 0 0 30px #d9b56f55; }
.stage-info { flex: 1; }
.vu { width: 160px; height: 6px; background: var(--btn-hover); border-radius: 99px; overflow: hidden; }
.vu.wide { width: 360px; margin: 18px auto; }
.vu div { height: 100%; width: 0; background: linear-gradient(90deg, var(--perfect), var(--good) 70%, var(--off)); transition: width .08s; border-radius: 99px; }
.center-stage { text-align: center; padding: 60px 20px; }
.big-timer { font: 300 84px/1 var(--serif); letter-spacing: .02em; color: var(--text); }
.hint { margin: -4px 4px 0; }

.tl-scroll { overflow-x: auto; overflow-y: hidden; padding: 0 0 6px; scroll-behavior: auto; }
.tl-scroll::-webkit-scrollbar { height: 8px; }
.tl-scroll::-webkit-scrollbar-thumb { background: var(--thumb); border-radius: 99px; }
svg.tl { display: block; will-change: transform; }
svg.tl text { font-family: var(--sans); }
.tl .staff line { stroke: var(--staff); stroke-width: var(--staff-w); }
.tl .bar-line { stroke: var(--staff); stroke-width: max(1px, var(--staff-w)); }
.tl .beat { stroke: var(--tint); }
.tl .beat.down { stroke: #d9b56f33; }
.tl .note-head { fill: var(--text); }
.tl .note-head.hollow { fill: none; stroke: var(--text); stroke-width: 1.6; }
.tl .stem { stroke: var(--text); stroke-width: 1.3; }
.tl .exp-label { fill: var(--text3); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-anchor: middle; }
.tl .sung-label { font-size: 12.5px; font-weight: 700; text-anchor: middle; letter-spacing: .04em; }
.tl .dev-label { font-size: 10.5px; text-anchor: middle; fill: var(--muted); }
.tl .playhead { stroke: var(--gold2); stroke-width: 1.5; filter: drop-shadow(0 0 6px var(--gold2)); }
.tl .lane-bg { fill: var(--tint-weak); }
.tl .note-hit { cursor: pointer; }
.tl .note-hit:hover .blk { filter: brightness(1.25); }
.tl .sec { fill: var(--muted); font-size: 10px; }
.tl .clef { fill: var(--text3); font-family: "Segoe UI Symbol", serif; }

/* ---------- review ---------- */
.stats { display: grid; grid-template-columns: 170px repeat(4, 1fr); gap: 14px; }
.ring-card { position: relative; display: grid; place-items: center; padding: 12px; }
.ring { width: 132px; height: 132px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--track); stroke-width: 7; }
.ring-fg { fill: none; stroke: url(#gold); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.ring-val { position: absolute; text-align: center; }
.ring-val span { font: 400 44px/1 var(--serif); color: var(--gold2); }
.ring-val small { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.stat { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; }
.stat-val { font: 400 40px/1.05 var(--serif); margin: 2px 0 4px; }
.transport { display: flex; align-items: center; gap: 16px; padding: 0 24px 14px; }
.play { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--gold2), var(--gold-deep)); color: #1b140a; font-size: 16px; box-shadow: 0 6px 22px #d9b56f44; }
.time b { font: 500 20px var(--serif); font-variant-numeric: tabular-nums; }
.seg { display: flex; background: var(--card2); border: 1px solid var(--line2); border-radius: 10px; padding: 3px; }
.seg button { background: none; border: 0; padding: 5px 10px; border-radius: 7px; cursor: pointer; color: var(--muted); }
.seg button.on { background: var(--track); color: var(--gold2); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend .sw { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 6px; }
.sw.perfect { background: var(--perfect); } .sw.good { background: var(--good); } .sw.fair { background: var(--fair); }
.sw.poor { background: var(--poor); } .sw.bad { background: var(--bad); } .sw.off { background: var(--off); }
.sw.cons { background: repeating-linear-gradient(45deg, var(--tint-strong) 0 2px, transparent 2px 4px); border: 1px solid var(--tint-strong); }
.sw.att { background: var(--gold2); width: 8px; height: 8px; transform: rotate(45deg); }
.insight { padding: 6px 24px 10px; color: var(--text3); font: italic 17px var(--serif); min-height: 20px; }

.table-card { padding: 16px 0 6px; }
.table-head { display: flex; align-items: center; justify-content: space-between; padding: 0 22px 8px; }
.tbl-scroll { max-height: 380px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
th { position: sticky; top: 0; background: var(--th); text-align: left; font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 9px 14px; border-bottom: 1px solid var(--line); }
td { padding: 9px 14px; border-bottom: 1px solid var(--line); }
tbody tr { cursor: pointer; transition: background .12s; }
tbody tr:hover { background: var(--btn); }
tbody tr.now { background: #d9b56f14; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; }
.pill.perfect { background: #45d49a1f; color: var(--perfect); }
.pill.good { background: #b9d95b1f; color: var(--good); }
.pill.fair { background: #f2d04b1f; color: var(--fair); }
.pill.poor, .pill.unsure { background: #f59a3c1f; color: var(--poor); }
.pill.bad, .pill.wrong { background: #ff5f5f1f; color: var(--bad); }
.pill + .pill { margin-left: 6px; }
.pill.missed { background: var(--tint); color: var(--muted); }
.syl { font-weight: 700; letter-spacing: .05em; }
.syl.bad { color: var(--off); }
.conf { display: inline-block; width: 52px; height: 4px; background: var(--track); border-radius: 9px; vertical-align: middle; margin-right: 6px; overflow: hidden; }
.conf i { display: block; height: 100%; background: var(--gold); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
input[type=range] { width: 100%; accent-color: var(--gold); }

/* ---------- overlays ---------- */
.modal { position: fixed; inset: 0; background: var(--veil); display: grid; place-items: center; z-index: 30; backdrop-filter: blur(4px); }
.modal-card { width: min(680px, 92vw); }
.err { color: var(--off); margin-top: 8px; min-height: 16px; }
.busy { position: fixed; inset: 0; z-index: 40; background: var(--veil); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; font: italic 22px var(--serif); color: var(--gold2); }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--track); border-top-color: var(--gold); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(30px); background: var(--card2); border: 1px solid var(--line2); padding: 11px 20px; border-radius: 12px; opacity: 0; transition: all .3s; z-index: 60; box-shadow: 0 12px 40px var(--shade); }
.toast.on { opacity: 1; transform: translateX(-50%); }
/* a message never blocks what is under it (on a phone it sits over the bottom bar) */
.toast { pointer-events: none; }
.menu-wrap { position: relative; display: inline-flex; }
.pop-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 250px; display: flex; flex-direction: column;
  background: var(--card2); border: 1px solid var(--line2); border-radius: 12px; padding: 6px; box-shadow: 0 14px 40px var(--shade); }
.pop-menu button { text-align: left; background: none; border: 0; color: var(--ink); padding: 8px 12px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.pop-menu button:hover:not(:disabled) { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.pop-menu button:disabled { opacity: .4; cursor: default; }
.pm-head { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 3px; }
.free-meter select { min-width: 92px; }
/* instruments */
.inst-opts { flex-wrap: wrap; }
.inst-badge { font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.det-panel { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 8px 0 2px; border-top: 1px dashed var(--line2); }
.det-panel.hidden { display: none; }
.det-val { font-size: 12px; color: var(--ink); min-width: 48px; font-variant-numeric: tabular-nums; }
.det-btn.on { border-color: var(--gold); color: var(--gold); }
.det-tip { flex-basis: 100%; }
.tuner { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line2); min-width: 220px; }
.tuner.hidden { display: none; }
.tuner .tu-note { font-size: 22px; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.tuner .tu-scale { position: relative; flex: 1; height: 10px; border-radius: 5px; min-width: 110px;
  background: linear-gradient(90deg, var(--bad) 0%, var(--fair) 30%, var(--perfect) 42%, var(--perfect) 58%, var(--fair) 70%, var(--bad) 100%); opacity: .85; }
.tuner .tu-zero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .6; }
.tuner .tu-needle { position: absolute; top: -6px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--card2); transition: left .08s linear; left: 50%; }
.tuner .tu-cents { font-size: 12px; min-width: 44px; font-variant-numeric: tabular-nums; color: var(--muted); }
.tuner[data-tier="ok"] .tu-note { color: var(--perfect); }
.tuner[data-tier="near"] .tu-note { color: var(--fair); }
.tuner[data-tier="off"] .tu-note { color: var(--bad); }
.tuner.idle .tu-needle { opacity: .25; }
.center-stage .tuner { margin: 10px auto 0; max-width: 360px; }
.rv-tune-card .table-head { gap: 12px; }
.tune-strip { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.tune-note { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 6px 5px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); cursor: pointer; width: 92px; }
.tune-note:hover { border-color: var(--gold); }
.tune-note svg { width: 74px; height: 52px; }
.tune-note b { font-size: 12.5px; white-space: nowrap; }
.tn-played { font-style: normal; color: var(--bad); font-weight: 600; font-size: 11px; white-space: nowrap; }
.tune-note.wrong { border-color: color-mix(in srgb, var(--bad) 60%, var(--line)); }
.tune-note.missed { opacity: .5; }
.tn-band { fill: color-mix(in srgb, var(--perfect) 18%, transparent); }
.tn-zero { stroke: var(--line2); stroke-width: 1; }
.tn-curve { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.tn-curve.ok { stroke: var(--perfect); } .tn-curve.near { stroke: var(--fair); } .tn-curve.off { stroke: var(--bad); }
.tn-c { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); }
.tn-c.ok { color: var(--perfect); } .tn-c.near { color: var(--fair); } .tn-c.off { color: var(--bad); }
svg .acc { fill: var(--ink); font-size: 15px; font-family: 'Segoe UI Symbol', 'Noto Music', serif; }
/* zoom of the screen: 🔍 lets a pinch / Ctrl + wheel zoom it, "100 %" gives it back */
#zoom-pill { position: fixed; right: 14px; bottom: 14px; z-index: 70; display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--card2) 88%, transparent); border: 1px solid var(--line2); box-shadow: 0 6px 22px var(--shade); opacity: .75; transition: opacity .2s; }
#zoom-pill:hover, body.zoom-mode #zoom-pill { opacity: 1; }
#zoom-pill button { border: 0; background: transparent; color: var(--ink); font-size: 12px; padding: 5px 9px; border-radius: 999px; cursor: pointer; min-width: 34px; }
body.zoom-mode main { touch-action: pan-x pan-y; }

.guide { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid var(--line2); }
.guide input[type=range] { width: 96px; }
.guide.off input[type=range] { opacity: .35; }
.tl .timesig { fill: var(--ink); font: 700 19px var(--serif); text-anchor: middle; }
.tl .rest { fill: var(--ink); font-family: "Segoe UI Symbol", serif; font-size: 24px; }

.modal-card { width: min(860px, 94vw); max-height: 92vh; overflow-y: auto; }
.pat-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.pat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.pat { position: relative; background: var(--card2); border: 1px solid var(--line2); border-radius: 12px; padding: 6px 6px 4px; cursor: pointer; transition: border-color .15s, background .15s, opacity .15s; opacity: .55; }
.pat:hover { border-color: var(--gold-deep); }
.pat.on { opacity: 1; border-color: var(--gold); background: linear-gradient(180deg, #d9b56f14, transparent); }
.pat .beats { text-align: center; font-size: 10px; color: var(--muted); letter-spacing: .08em; margin-top: 2px; }
.pat svg { display: block; margin: 0 auto; }
.pat .staff line, .builder .staff line { stroke: var(--staff); stroke-width: var(--staff-w); }
.pat .note-head, .builder .note-head { fill: var(--text); }
.pat .note-head.hollow, .builder .note-head.hollow { fill: none; stroke: var(--text); stroke-width: 1.6; }
.pat .stem, .builder .stem { stroke: var(--text); stroke-width: 1.3; }
.pat .rest, .builder .rest { fill: var(--ink); font-family: "Segoe UI Symbol", serif; font-size: 24px; }
button.link { background: none; border: 0; color: var(--gold2); cursor: pointer; padding: 0; font-size: 12px; }

/* ---- i18n / language */
.tg-text { font-weight: inherit; }
.lang-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
select.mini-select { padding: 4px 8px; font-size: 12px; border-radius: 8px; }

/* ---- practice: multi-line score with slow vertical motion */
.score-scroll { height: calc(100vh - 328px); min-height: 220px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; padding: 0 6px 0 0; }
.score-scroll.live { overflow: hidden; }
.score-scroll::-webkit-scrollbar { width: 8px; }
.score-scroll::-webkit-scrollbar-thumb { background: var(--thumb); border-radius: 99px; }
.tl .final-bar { fill: var(--ink); }
.tl .note-now { fill: var(--gold2); filter: drop-shadow(0 0 5px var(--gold2)); }

/* ---- review: expected name coloured by the syllable verdict */
.tl .exp-label.w-ok { fill: var(--perfect); }
.tl .exp-label.w-unsure { fill: var(--poor); }
.tl .exp-label.w-wrong { fill: var(--bad); }
.tl .exp-label.w-missed { fill: var(--miss); }
.tl .heard-label { font-size: 11px; font-weight: 700; text-anchor: middle; letter-spacing: .05em; }
td.syl.unsure { color: var(--poor); } td.syl.wrong, td.syl.bad { color: var(--bad); } td.syl.ok { color: var(--perfect); }

/* ---- rhythm levels + builder */
#pat-levels { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.lvl-head { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 6px; font-size: 12px; }
.lvl-head b { color: var(--gold2); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.lvl-head .link { margin-left: auto; }
.pat .del { position: absolute; left: 7px; top: 3px; font-size: 13px; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 0; }
.pat .del:hover { color: var(--bad); }
.builder { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.small-seg button { padding: 4px 10px; font-size: 12px; }
.b-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.b-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.b-cap { width: 64px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.b-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.b-btns button { width: 50px; height: 46px; background: var(--card2); border: 1px solid var(--line2); border-radius: 10px; cursor: pointer;
  color: var(--text); padding: 2px 4px; transition: border-color .15s, opacity .15s; }
.b-btns button svg { display: block; pointer-events: none; }
.b-btns button:hover:not(:disabled) { border-color: var(--gold); }
.b-btns button:disabled { opacity: .25; cursor: default; }
.b-preview { background: var(--card2); border: 1px solid var(--line2); border-radius: 12px; padding: 8px 10px; }
#b-svg { min-height: 60px; }
.b-fill { height: 4px; background: var(--track); border-radius: 99px; margin: 4px 0 8px; overflow: hidden; }
.b-fill i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold2)); transition: width .15s; }
.row.tight { gap: 6px; }
button.sm { padding: 5px 11px; font-size: 12px; }
button.gold:disabled { opacity: .35; cursor: default; box-shadow: none; }
.tl .note-head.hollow.note-now { fill: none; stroke: var(--gold2); }

/* practice follow box (bar / beat) */
.tl .follow-box { fill: color-mix(in srgb, var(--gold2) 9%, transparent); stroke: color-mix(in srgb, var(--gold2) 55%, transparent); stroke-width: 1.2; pointer-events: none; }
.tl .follow-box.waiting { fill: none; stroke: color-mix(in srgb, var(--gold2) 30%, transparent); stroke-dasharray: 4 4; }
.tl .follow-box.flash { animation: beat-flash .45s ease-out; }
@keyframes beat-flash { from { fill: color-mix(in srgb, var(--gold2) 26%, transparent); stroke: var(--gold2); } }

/* practice display options strip */
.view-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: -6px 2px 12px; }
.view-opts .vo-field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); }
.view-opts select { padding: 4px 8px; font-size: 13px; }
.score-scroll.hide-names .exp-label { display: none; }

/* ---- themes (data-theme on <html>); dark is the default above */
:root[data-theme="light"] {
  --bg: #f5f2ec; --bg2: #ece8e0; --card: #fffdf9; --card2: #f3efe7; --card-end: #faf7f1; --line: #e2dccf; --line2: #d3ccbd;
  --text: #24211c; --muted: #7a7468; --gold: #b0842f; --gold2: #8f6418; --gold-deep: #7a5414;
  --perfect: #1e9a66; --good: #6f9a12; --fair: #b58f00; --poor: #d9700c; --bad: #d93636; --off: #d93636; --miss: #9a96a0;
  --glow1: #f7ead0; --glow2: #e9edf5; --nav1: #fbf8f2; --nav2: #f3efe6; --shade: #6b5a3a22; --veil: #f5f2eccc;
  --btn: #f0ebe1; --btn-hover: #e8e1d4; --track: #e2dccf; --text2: #4a453c; --text3: #3a362f; --ink: #1d1b17;
  --thumb: #d3ccbd; --th: #f3efe7; --tint: #0000000f; --tint-weak: #00000006; --tint-strong: #1d1b1755; --staff-theme: #8c8579;
}
:root[data-theme="sepia"] {
  --bg: #efe4cc; --bg2: #e6d8bb; --card: #f7eed9; --card2: #efe3c8; --card-end: #f3e8cf; --line: #dccaa5; --line2: #cdb88e;
  --text: #3b2a17; --muted: #86704f; --gold: #9c6b22; --gold2: #7d5212; --gold-deep: #6a440e;
  --perfect: #2e8a52; --good: #6d8a17; --fair: #a88300; --poor: #c3650d; --bad: #c4372b; --off: #c4372b; --miss: #a3927a;
  --glow1: #f3e2bd; --glow2: #e8dcc3; --nav1: #f3e8d0; --nav2: #eadcc0; --shade: #5a3d1a26; --veil: #efe4cccc;
  --btn: #ecdfc2; --btn-hover: #e4d4b2; --track: #dccaa5; --text2: #5a4528; --text3: #4a361d; --ink: #33230f;
  --thumb: #cdb88e; --th: #efe3c8; --tint: #3b2a1712; --tint-weak: #3b2a1708; --tint-strong: #33230f55; --staff-theme: #8a7553;
}
:root[data-theme="contrast"] {
  --bg: #000; --bg2: #000; --card: #000; --card2: #0d0d0d; --card-end: #000; --line: #ffffff; --line2: #ffffff;
  --text: #ffffff; --muted: #e0e0e0; --gold: #ffd400; --gold2: #ffe14d; --gold-deep: #c9a800;
  --perfect: #00ff7f; --good: #c6ff00; --fair: #ffee00; --poor: #ff9900; --bad: #ff3b3b; --off: #ff3b3b; --miss: #a0a0a0;
  --glow1: #000; --glow2: #000; --nav1: #000; --nav2: #000; --shade: #0000; --veil: #000000e6;
  --btn: #111; --btn-hover: #222; --track: #444; --text2: #fff; --text3: #fff; --ink: #fff;
  --thumb: #fff; --th: #000; --tint: #ffffff2a; --tint-weak: #ffffff10; --tint-strong: #ffffffaa; --staff-theme: #ffffff;
  --staff-w: var(--staff-w-user, 1.6px);
}
:root[data-theme="contrast"] .tl .note-now { fill: #ffd400; }
:root[data-theme="contrast"] .card { border-width: 2px; }
:root:not([data-theme="dark"]):not([data-theme="contrast"]) button.record.live { background: #fde8e6; color: #a3261c; }
.tl .ink { fill: var(--ink); }
.tl .ledger, .pat .ledger, .builder .ledger { stroke: var(--staff); stroke-width: max(1px, var(--staff-w)); }
.pat .ink, .builder .ink { fill: var(--ink); }
.tl .tuplet { stroke: var(--ink); stroke-width: 1.1; fill: none; }
.tl .tuplet-num { fill: var(--ink); font: italic 700 11px var(--serif); text-anchor: middle; }
.tl .timesig.groups { font-size: 14px; }
.tl .beat-mark { fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tl .beat-mark.down { stroke-width: 2.3; }
.tl .sub-mark { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.tempo-unit { font-family: "Segoe UI Symbol", var(--sans); color: var(--text); font-size: 17px; }

/* appearance settings */
.swatches { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.swatches button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line2); cursor: pointer; padding: 0; }
.swatches button.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.swatches input[type=color] { width: 34px; height: 28px; padding: 0; border: 1px solid var(--line2); border-radius: 8px; background: none; cursor: pointer; }
.theme-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.theme-cards button { border: 1px solid var(--line2); border-radius: 10px; padding: 10px 6px 8px; cursor: pointer; font-size: 12px; }
.theme-cards button.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.theme-cards i { display: block; height: 22px; border-radius: 6px; margin-bottom: 6px; }
.swatches button.auto { background: var(--card2); color: var(--muted); font-size: 11px; font-weight: 700; }
.meter-ctl { display: inline-flex; align-items: center; gap: 4px; }
.num.tiny { width: 58px; }
.kind-head { font: 500 18px var(--serif); color: var(--text); border-bottom: 1px solid var(--line); padding: 8px 0 4px; margin-top: 4px; }
.b-btns button.tup-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.tup-btn b { font: italic 700 17px var(--serif); }
.tup-btn small { font-size: 9.5px; color: var(--muted); }
.tup-btn.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
#b-kind button { font-family: "Segoe UI Symbol", var(--sans); font-size: 15px; }
#b-kind { margin-right: 8px; }
.pat-head > div { display: flex; }
.tl .beat-mark.held { stroke-dasharray: 2.2 1.6; opacity: .8; }
.pat .tuplet, .builder .tuplet { stroke: var(--ink); stroke-width: 1.1; fill: none; }
.pat .tuplet-num, .builder .tuplet-num { fill: var(--ink); font: italic 700 11px var(--serif); text-anchor: middle; }

/* ---- notes judged live (reading drill) */
.tl .note-head.res-ok { fill: var(--perfect); }
.tl .note-head.res-unsure { fill: var(--poor); }
.tl .note-head.res-wrong, .tl .note-head.res-missed { fill: var(--bad); }
.tl .note-head.hollow.res-ok { fill: none; stroke: var(--perfect); }
.tl .note-head.hollow.res-wrong, .tl .note-head.hollow.res-missed { fill: none; stroke: var(--bad); }
.tl .rd-next { opacity: .45; }
.rd-staff { padding: 6px 12px 10px; }
.rd-feedback { font: 500 22px/1.2 var(--serif); min-height: 28px; color: var(--text2); animation: rd-pop .35s ease-out; }
.rd-feedback.ok { color: var(--perfect); } .rd-feedback.wrong, .rd-feedback.missed { color: var(--bad); } .rd-feedback.unsure { color: var(--poor); }
@keyframes rd-pop { from { transform: scale(1.12); opacity: .4; } }
.rd-acc { text-align: center; min-width: 70px; } .rd-acc b { display: block; font: 400 30px var(--serif); color: var(--gold2); }
.rd-acc small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-chip { display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: 5px 8px; border-radius: 9px; background: var(--card2); border: 1px solid var(--line2); font-size: 12px; }
.rd-chip b { font-size: 12px; letter-spacing: .04em; } .rd-chip span { font-size: 11.5px; font-weight: 600; }
.rd-chip.locked { opacity: .35; } .rd-chip.newest { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 18px; }
.glyph-select { font-family: "Segoe UI Symbol", var(--sans); }
.ex-melody { margin: 8px 0 0; }

.rd-speedbox { display: flex; flex-direction: column; align-items: center; } .rd-speedbox small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.rd-lane { overflow: hidden; }
.tl .rd-active .note-head { filter: drop-shadow(0 0 6px var(--gold2)); }
.tl .rd-done { opacity: .55; transition: opacity .4s; }
.rd-chip small { font-size: 10px; color: var(--muted); }
.rd-heard { font-size: 12.5px; color: var(--muted); letter-spacing: .04em; min-height: 18px; margin-top: 2px; }
.tl .rd-gone { opacity: 0; transform: translateY(-10px); transition: opacity .25s, transform .25s; }

/* reading drill: read notes drop into the lower staff */
.tl .rd-drop { opacity: 0; transform: translateY(46px); transition: opacity .28s ease-in, transform .28s ease-in; }
.tl .rd-new { animation: rd-in .3s ease-out; }
@keyframes rd-in { from { opacity: 0; transform: translateY(-30px); } }
.tl .rd-hist-label { fill: var(--muted); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.tl .rd-fix-mark { fill: var(--perfect); font-size: 13px; font-weight: 700; }
.tl .rd-fixed .note-head { stroke: var(--perfect); stroke-width: 1.5; }
.rd-feedback.fixed { color: var(--perfect); }

/* reading drill, still notes on two staves: the next row moves up, a new one comes in below */
.tl .rd-rise { animation: rd-rise .3s cubic-bezier(.2, .7, .3, 1); }
@keyframes rd-rise { from { transform: translateY(var(--dy)); } }
.tl .rd-appear { animation: rd-appear .35s ease-out .1s backwards; }
@keyframes rd-appear { from { opacity: 0; transform: translateX(28px); } }

/* review: the whole score first, with verdicts; manual corrections */
.rv-score-card { padding-top: 14px; margin-bottom: 16px; }
.rv-score-card .table-head { gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
.rv-score-card .rv-legend { flex: 1; min-width: 200px; }
.rv-score { padding: 0 6px; }
.tl .rv-tmark { font-size: 11px; text-anchor: middle; letter-spacing: -2px; }
.tl .cx-hit { fill: transparent; cursor: pointer; }
.tl .cx-sel { fill: color-mix(in srgb, var(--gold) 16%, transparent); stroke: var(--gold); stroke-width: 1.2; }
.tl .cx-mark { fill: #6fb6ff; font-size: 12px; font-weight: 700; text-anchor: middle; }
.tl .cx-mark.ok { fill: var(--perfect); }
.cx-toggle.on { border-color: #6fb6ff; color: #6fb6ff; background: color-mix(in srgb, #6fb6ff 12%, transparent); }
.cx-panel { margin: 6px 16px 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #6fb6ff 45%, transparent); border-radius: 12px;
  background: color-mix(in srgb, #6fb6ff 6%, var(--card2)); display: flex; flex-direction: column; gap: 9px; }
.cx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.cx-head b { font-size: 15px; }
.cx-nav { margin-left: auto; display: flex; gap: 6px; }
.cx-nav button { padding: 5px 11px; }
.cx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cx-row > label { min-width: 150px; font-size: 12px; color: var(--muted); }
.cx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cx-chip { background: var(--btn); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; color: var(--text2); }
.cx-chip.prog { border-style: dashed; border-color: var(--muted); }
.cx-chip.on { background: #6fb6ff; border-color: #6fb6ff; color: #0b1622; font-weight: 600; }
.cx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cx-allok.on { border-color: var(--perfect); color: var(--perfect); }
.cx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 16px 12px; font-size: 13px; }
.cx-bar #cx-comment { flex: 1; min-width: 180px; }
tr.cx-row-sel td { background: color-mix(in srgb, #6fb6ff 12%, transparent); }
.cx-tag { color: #6fb6ff; font-weight: 700; }
@media (max-width: 760px) { .cx-row > label { min-width: 100%; } .cx-panel { margin: 6px 4px 10px; } }
.cx-panel .wide-in, .cx-bar .wide-in { background: var(--card2); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 12px; outline: none; min-width: 0; flex: 1; color: var(--text); }
.tl .rv-arrow { stroke: var(--bg, #000); stroke-width: .6; stroke-opacity: .35; }
.tl .note-head.res-missed { fill: var(--muted); }
.tl .note-head.hollow.res-missed { fill: none; stroke: var(--muted); }

/* correction mode on the timeline: every box can be picked; selected / corrected ones marked */
.tl.cx-mode .note-hit, .tl.cx-mode .ghost-hit { cursor: pointer; }
.tl.cx-mode .note-hit:hover .blk { stroke: #6fb6ff; stroke-width: 1.2; stroke-opacity: 1; }
.tl .note-hit.cx-tsel .blk, .tl .ghost-hit.cx-tsel { stroke: #6fb6ff; stroke-width: 2.4; stroke-opacity: 1; }
.tl .note-hit.cx-tdone .blk { stroke-dasharray: none; filter: drop-shadow(0 0 3px #6fb6ff); }
.tl .ghost-hit.cx-tdone { filter: drop-shadow(0 0 3px #6fb6ff); }
.rv-debug.on { border-color: #e0a14a; color: #e0a14a; background: color-mix(in srgb, #e0a14a 12%, transparent); }

/* tempo: typed number, metronome preview button */
.stepper input.bpm-in { width: 2.6em; background: transparent; border: 0; border-bottom: 1px dashed var(--line2); color: var(--text);
  font: 500 19px var(--serif); text-align: center; padding: 0; outline: none; }
.stepper input.bpm-in:focus { border-bottom-color: var(--gold); }
.stepper button.metro-btn { border-left: 1px solid var(--line2); border-radius: 8px; color: var(--muted); min-width: 34px; }
.stepper button.metro-btn.on { color: var(--gold2); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.stepper button.metro-btn.beat .mp-ico { display: inline-block; animation: mp-beat .18s ease-out; }
.stepper button.metro-btn.acc .mp-ico { color: var(--gold); }
@keyframes mp-beat { from { transform: scale(1.45); } }
.stepper > span { white-space: nowrap; min-width: 0; }
.topbar { flex-wrap: wrap; row-gap: 10px; } .topbar .field.grow { min-width: 200px; }

/* exercise editor: live preview, rest frequency */
.ex-preview { margin: 8px 0 4px; padding: 4px 6px; border: 1px solid var(--line2); border-radius: 10px; background: var(--card2);
  max-height: 210px; overflow-y: auto; overflow-x: hidden; }
.ex-preview.stale svg { opacity: .35; }
.ex-preview .ex-prev-msg { padding: 2px 6px 4px; }
.ex-preview .ex-prev-msg:empty { display: none; }
.ex-rest { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ex-rest input.num.tiny { width: 3.2em; }

/* results: two scores in one compact line */
/* results: two score rings (notes, rhythm) in one compact card; the technical line last, small */
.rv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; padding: 10px 20px; margin-bottom: 14px; }
.rv-score-item { display: flex; align-items: center; gap: 12px; }
.rv-ring { position: relative; width: 66px; height: 66px; flex: none; display: grid; place-items: center; }
.rv-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rv-ring .ring-bg { fill: none; stroke: var(--track); stroke-width: 5.5; }
.rv-ring .ring-fg { fill: none; stroke: currentColor; stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 169.65; stroke-dashoffset: 169.65;
  transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.rv-ring b { position: relative; font: 400 25px/1 var(--serif); }
.rv-ring.sc-perfect { color: var(--perfect); } .rv-ring.sc-good { color: var(--good); }
.rv-ring.sc-fair { color: var(--fair); } .rv-ring.sc-bad { color: var(--bad); }
.rv-sc-text { display: flex; flex-direction: column; gap: 2px; max-width: 300px; }
.rv-sc-text label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.rv-sc-text > span { font-size: 13px; color: var(--ink2, var(--ink)); }
.rv-sc-text > span:empty { display: none; }
.rv-sc-text small { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.rv-sc-text .rv-remark { font-style: italic; }
.rv-sync { flex-basis: 100%; font-size: 10.5px; opacity: .8; margin-top: -4px; }
.rv-sync:empty { display: none; }
@media (max-width: 760px) { .rv-head { padding: 10px 14px; gap: 10px 18px; } .rv-ring { width: 58px; height: 58px; } .rv-ring b { font-size: 22px; } }
/* the sung staff under each line of the score */
.tl .sung-band { fill: color-mix(in srgb, #6fb6ff 8%, transparent); stroke: color-mix(in srgb, #6fb6ff 30%, transparent); stroke-width: 1; }
.tl .sung-staff .note-head, .tl .sung-staff .ink, .tl .sung-staff .rest { fill: #7fb8f0; }
.tl .sung-staff .stem, .tl .sung-staff .ink { stroke: #7fb8f0; }
.tl .sung-staff .note-head.hollow { fill: none; }
.tl .sung-staff .acc-shape { stroke: none; }      /* the .ink stroke above made the accidentals fat */
.tl .sung-staff .exp-label { fill: #8fc2f2; }
.tl .sung-label { text-anchor: start; fill: #8fc2f2; font-size: 9.5px; letter-spacing: .16em; font-weight: 600; }
.rv-sung-tg { margin-left: auto; }

/* ---- rehearsal page */
.rh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 16px; margin-bottom: 12px; }
.rh-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rh-bars label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rh-range { font: 400 19px/1 var(--serif); color: var(--gold2); min-width: 64px; }
.chip-btn { border: 1px solid var(--line2); background: var(--card2); color: var(--ink); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
.chip-btn:hover { border-color: var(--gold); }
.chip-btn.warn { border-color: color-mix(in srgb, var(--poor) 55%, var(--line2)); }
.rh-actions { gap: 8px; }
.rh-act { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line2); background: var(--card2); color: var(--ink);
  border-radius: 12px; padding: 9px 15px; font-size: 14px; font-weight: 600; cursor: pointer; }
.rh-act .ico { font-size: 14px; color: var(--gold2); }
.rh-act:hover:not(:disabled) { border-color: var(--gold); }
.rh-act.on { background: color-mix(in srgb, var(--gold) 22%, var(--card2)); border-color: var(--gold); }
.rh-act.rec .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.rh-act.rec.on .rec-dot { animation: pulse 1s infinite; }
.rh-act:disabled { opacity: .4; cursor: default; }
.rh-opts { margin-left: auto; gap: 14px; }
.rh-more { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-top: 10px; border-top: 1px solid var(--line); }
.rh-more.hidden { display: none; }
.rh-slider { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.rh-slider input[type=range] { width: 110px; accent-color: var(--gold); }
#rh-more-btn.on { border-color: var(--gold); color: var(--gold); }
.score-scroll.rh-scroll { height: auto; min-height: 140px; max-height: calc(100vh - 330px); overflow-y: auto; }
.rh-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 6px 16px 12px; }
.rh-foot #rh-legend { flex: 1; min-width: 220px; }
.rh-hist { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.rh-h i, .rh-prev i, .rh-sc { font-style: normal; font-weight: 600; }
i.sc-perfect, .rh-sc.sc-perfect { color: var(--perfect); } i.sc-good, .rh-sc.sc-good { color: var(--good); }
i.sc-fair, .rh-sc.sc-fair { color: var(--fair); } i.sc-bad, .rh-sc.sc-bad { color: var(--bad); }
.rh-result { margin: 0 14px 8px; padding: 8px 12px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line2); }
.rh-res-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.rh-res-range { font: 400 17px/1 var(--serif); color: var(--gold2); }
.rh-sc { font-size: 16px; } .rh-sc small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-right: 3px; }
.rh-res-text { font-size: 13px; color: var(--ink); }
.rh-prevs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.rh-prev { border: 1px solid var(--line2); background: transparent; color: var(--muted); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; }
/* score marks: chosen bars, tappable bars, bar numbers, notes to watch */
svg .bar-sel { fill: var(--gold); fill-opacity: .09; }
svg .bar-sel.first { rx: 6px; }
svg .bar-hit { fill: transparent; cursor: pointer; }
svg .bar-hit:hover { fill: var(--gold); fill-opacity: .05; }
svg .bar-num { font-size: 9px; fill: var(--muted); font-family: var(--sans, sans-serif); }
svg .bar-num.weak { fill: var(--poor); font-weight: 700; }
svg .weak-ring { fill: none; stroke: var(--poor); stroke-width: 1.6; stroke-dasharray: 3 2; pointer-events: all; }
svg .weak-ring.strong { stroke: var(--bad); stroke-width: 2; stroke-dasharray: none; }
svg .weak-arrow { fill: var(--poor) !important; opacity: .85; }
@media (max-width: 760px) {
  .rh-bar { padding: 8px 10px; gap: 8px 12px; }
  .rh-opts { margin-left: 0; }
  .rh-actions { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 6px; }
  .rh-act { flex-direction: column; justify-content: center; gap: 3px; padding: 7px 4px; font-size: 12px; line-height: 1.15; text-align: center; }
  .rh-opts { width: 100%; gap: 6px 12px; }
  .rh-opts .tg-text { font-size: 12.5px; }
  #view-rehearse .stage-head { padding-top: 8px; padding-bottom: 6px; }
  #view-rehearse #rh-sub { font-size: 12px; line-height: 1.35; }
  .score-scroll.rh-scroll { height: auto; max-height: none; }
}
/* exercise picker and the Take / View popovers (ui/picker.js) */
.pick-row { display: flex; gap: 6px; align-items: stretch; }
.pick-row select { flex: 1; min-width: 0; }
button.pick-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; white-space: nowrap; }
.pick-btn .ico, .pop-btn .ico { font-size: 15px; line-height: 1; }
.pop-wrap { position: relative; display: inline-flex; align-self: flex-end; }
button.pop-btn { display: inline-flex; align-items: center; gap: 7px; }
button.pop-btn .caret { font-size: 10px; color: var(--muted); }
button.pop-btn.on { border-color: var(--gold); color: var(--gold2); }
.pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; width: 330px; max-width: calc(100vw - 24px);
  background: var(--card2); border: 1px solid var(--line2); border-radius: 14px; padding: 12px 14px 10px;
  box-shadow: 0 18px 50px var(--shade); display: flex; flex-direction: column; gap: 2px; }
.pop-title { font: 600 15px/1.2 var(--serif); color: var(--gold2); letter-spacing: .02em; padding: 0 0 8px; border-bottom: 1px solid var(--line2); margin-bottom: 4px; }
.pop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 3px 0; }
.pop-row > span:first-child { color: var(--text2); font-size: 13px; }
.pop-row select { min-width: 150px; }
.pop-row .toggle { width: 100%; }
.pop-row.dim { opacity: .45; }
.pop-note { padding: 0 0 6px; line-height: 1.35; }
/* options the teacher fixed (locked) or hid */
.locked { position: relative; }
.locked > span:first-child::after, .field.locked > label::after { content: " 🔒"; font-size: 11px; }
.pol-hidden { display: none !important; }
/* rhythm builder: tie */
.tie-btn svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Students page (admin) */
.pol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; overflow: auto; padding-bottom: 20px; }
.pol-card { display: flex; flex-direction: column; gap: 8px; }
.pol-card.wide { grid-column: 1 / -1; }
.pol-head { font: 600 17px/1.2 var(--serif); color: var(--gold2); }
.pol-table { width: 100%; border-collapse: collapse; }
.pol-table td { padding: 6px 8px; border-top: 1px solid var(--line2); }
.pol-table td:first-child { color: var(--text2); width: 34%; }
.pol-table tr.on td:first-child { color: var(--gold); }
.pol-table select { width: 100%; }
.topbar .ex-pick { flex: 1 1 360px; min-width: 300px; }
.pick-row select { min-width: 160px; }
.pop-row select { width: 175px; min-width: 0; }
/* tap tempo */
.tap-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 50px; height: 34px; margin-left: 4px;
  background: var(--btn); border: 1px solid var(--line2); border-radius: 10px; cursor: pointer; padding: 0 8px; line-height: 1; touch-action: manipulation; }
.tap-btn b { font-size: 11.5px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.tap-btn small { font-size: 9.5px; color: var(--muted); margin-top: 2px; }
.tap-btn.on { border-color: var(--gold-deep); }
.tap-btn.on b { color: var(--gold2); letter-spacing: 0; font-size: 13px; }
.tap-btn.hit { animation: tapHit .18s ease-out; }
@keyframes tapHit { from { background: color-mix(in srgb, var(--gold) 45%, var(--btn)); transform: scale(.94); } to { background: var(--btn); transform: none; } }
.tap-btn:disabled { opacity: .4; cursor: default; }
/* administration panels (ui/admin.js) and the server's control window (control.html) */
.mono { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; }
.adm-tabs { display: inline-flex; margin-bottom: 14px; }
.adm-body { display: flex; flex-direction: column; gap: 12px; }
.adm-list { display: flex; flex-direction: column; gap: 10px; }
.adm-h { font: 600 16px/1.2 var(--serif); color: var(--gold2); margin-bottom: 8px; }
.adm-add .row { flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-user, .adm-code { display: flex; flex-direction: column; gap: 8px; }
.adm-user.off, .adm-code.off { opacity: .6; }
.adm-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.adm-name { font-size: 15px; }
.adm-acts { flex-wrap: wrap; }
.pill.gold-pill { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold2); }
.adm-codetxt { font-size: 18px; letter-spacing: .08em; color: var(--gold2); margin-right: 8px; }
.adm-qr { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.adm-qr svg { border-radius: 8px; }
.adm-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-tbl th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11.5px; letter-spacing: .04em; padding: 8px; position: sticky; top: 0; background: var(--card); }
.adm-tbl td { padding: 7px 8px; border-top: 1px solid var(--line2); vertical-align: middle; }
.adm-tbl tr.lg-bad td:first-child { box-shadow: inset 3px 0 var(--bad); }
.adm-filter { align-items: center; gap: 12px; flex-wrap: wrap; }
body.control-page { overflow: auto; display: block; }
.ctl-main { max-width: 1240px; margin: 0 auto; padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 16px; }
.ctl-head { display: flex; align-items: center; gap: 18px; }
.ctl-head .brand { margin: 0; padding: 0; border: 0; }
.ctl-status { flex: 1; color: var(--text2); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.ctl-status.off { color: var(--bad); }
.ctl-grid { display: grid; grid-template-columns: 1.4fr auto 1fr; gap: 14px; align-items: stretch; }
.ctl-link { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.ctl-url { font-size: 19px; color: var(--gold2); word-break: break-all; user-select: all; }
.ctl-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: center; }
.ctl-qr svg { border-radius: 10px; }
.ctl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; align-content: center; }
.ctl-stat { display: flex; flex-direction: column; }
.ctl-stat b { font: 600 26px/1.1 var(--serif); color: var(--ink); }
.ctl-stat span { color: var(--muted); font-size: 12px; }
.ctl-stat.warn b { color: var(--poor); }
.ctl-online, .ctl-data { grid-column: 1 / -1; }
.ctl-data { align-items: center; }
@media (max-width: 900px) { .ctl-grid { grid-template-columns: 1fr; } }
/* Exam and Rehearse: the page itself doesn't scroll; the score box takes the rest of the screen
   and scrolls on its own, so the controls above always stay in view */
main { display: flex; flex-direction: column; }
.view.fit.active { flex: 1 1 auto; min-height: 0; }
.view.fit > * { flex: none; }
.view.fit > .stage { flex: 1 1 auto; min-height: 200px; display: flex; flex-direction: column; }
.view.fit .stage > .score-scroll, .view.fit .stage > .score-scroll.rh-scroll { flex: 1 1 auto; height: auto; max-height: none; min-height: 110px; }
/* top bar buttons: one height, on one line with the fields' boxes */
.topbar .menu-wrap, .topbar .pop-wrap { align-self: flex-end; }
.topbar > button, .topbar .menu-wrap > button, .topbar .pop-wrap > button.pop-btn { height: 40px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; gap: 7px; }
/* strips wider than the screen: scroll sideways, an arrow shows where more is hidden (ui/overflow.js) */
.ofl-strip { scrollbar-width: none; }
.ofl-strip::-webkit-scrollbar { display: none; }
.ofl-arrow { position: fixed; z-index: 26; width: 26px; display: none; align-items: center; justify-content: center; border: 0; padding: 0;
  color: var(--gold2); font-size: 22px; line-height: 1; cursor: pointer; pointer-events: auto; }
.ofl-arrow.on { display: flex; }
.ofl-arrow.l { background: linear-gradient(90deg, var(--bg) 35%, transparent); justify-content: flex-start; padding-left: 3px; }
.ofl-arrow.r { background: linear-gradient(270deg, var(--bg) 35%, transparent); justify-content: flex-end; padding-right: 3px; }
.adm-tabs { overflow-x: auto; max-width: 100%; }
.adm-tabs button { white-space: nowrap; }
/* recognition training (ui/training.js) */
.tr-status { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.tr-st { display: flex; flex-direction: column; }
.tr-st b { font: 600 24px/1.1 var(--serif); }
.tr-st b.warn { color: var(--poor); }
.tr-st span { color: var(--muted); font-size: 12px; }
.tr-model { display: flex; flex-direction: column; gap: 4px; }
.tr-built { margin-left: auto; text-align: right; }
.tr-prog { height: 5px; background: var(--track); border-radius: 9px; margin: 4px 0; overflow: hidden; width: 220px; margin-left: auto; }
.tr-prog i { display: block; height: 100%; background: var(--gold); }
.tr-bar { align-items: center; gap: 12px; flex-wrap: wrap; }
.tr-main { display: flex; gap: 14px; align-items: flex-start; min-height: 0; }
.tr-body { flex: 1; min-width: 0; }
.tr-side { width: 380px; flex: none; position: sticky; top: 0; max-height: calc(100vh - 90px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.tr-sh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-sh #tr-close { margin-left: auto; }
.tr-big { font: 600 28px/1 var(--serif); color: var(--gold2); }
.tr-warn { background: color-mix(in srgb, var(--poor) 15%, transparent); color: var(--poor); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; }
.tr-ctx { width: 100%; height: 120px; border-radius: 8px; touch-action: none; cursor: crosshair; }
.tr-score { background: var(--card2); border-radius: 8px; padding: 6px 8px; max-height: 70px; overflow: auto; word-break: break-word; }
.tr-h { font-weight: 600; color: var(--text2); margin-top: 6px; font-size: 13px; }
.tr-guess { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.tr-side .tr-bar { display: grid; grid-template-columns: 34px 1fr 42px; gap: 8px; align-items: center; font-size: 12px; }
.tr-side .tr-bar i { height: 8px; background: var(--track); border-radius: 9px; overflow: hidden; display: block; }
.tr-side .tr-bar i b { display: block; height: 100%; }
.tr-tri { padding: 8px; }
.tr-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 0 4px 6px; }
.tr-leg { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: 8px; }
.tr-leg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tr-leg i.ring { background: none; border: 2px solid var(--bad); }
.tr-leg i.dash { background: none; border: 2px dashed var(--poor); }
#tr-svg { width: 100%; height: min(64vh, 640px); background: var(--card2); border-radius: 10px; touch-action: none; cursor: grab; }
#tr-svg .tr-grid { stroke: var(--line2); stroke-width: .6; }
#tr-svg .tr-ax { fill: var(--muted); font-size: 11px; }
#tr-svg .tr-ell { fill: none; stroke-width: 2; stroke-dasharray: 6 4; opacity: .8; }
#tr-svg .tr-vlab { font: 700 22px var(--serif); text-anchor: middle; dominant-baseline: middle; opacity: .7; }
#tr-svg .tr-pt { stroke: #0008; stroke-width: 1; opacity: .85; cursor: pointer; }
#tr-svg .tr-pt.unlab { opacity: .35; }
#tr-svg .tr-pt.err { stroke: var(--bad); stroke-width: 2.5; }
#tr-svg .tr-pt.doubt { stroke: var(--poor); stroke-dasharray: 2 2; stroke-width: 2; }
#tr-svg .tr-pt.excl { opacity: .15; }
#tr-svg .tr-pt.sel { stroke: #fff; stroke-width: 3; r: 8; opacity: 1; }
.tr-note { padding: 4px 6px 0; }
.tr-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tr-col { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.tr-colh { display: flex; justify-content: space-between; align-items: baseline; }
.tr-colh b { font: 600 18px var(--serif); color: var(--gold2); }
.tr-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.tr-row { display: grid; grid-template-columns: 38px 42px 1fr; grid-template-rows: auto auto; gap: 0 6px; text-align: left; background: var(--card2);
  border: 1px solid transparent; border-radius: 8px; padding: 5px 7px; cursor: pointer; font-size: 12px; color: var(--text); }
.tr-row .tr-p { font-weight: 700; color: var(--gold2); }
.tr-row .tr-nn { grid-column: 2 / 4; font-size: 11px; }
.tr-row.err { border-color: var(--bad); }
.tr-row.doubt { border-style: dashed; border-color: var(--poor); }
.tr-row.excl { opacity: .4; }
.tr-row.sel { border-color: #fff; }
.tr-cmp { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.tr-cmprow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tr-cmpc { display: flex; flex-direction: column; background: var(--card2); border-radius: 10px; padding: 10px 16px; min-width: 150px; }
.tr-cmpc b { font: 600 30px/1.1 var(--serif); }
.tr-arrow { font-size: 26px; color: var(--muted); }
.tr-cmpn { line-height: 1.6; }
.good { color: var(--perfect); } .bad { color: var(--bad); }
.tr-cmpr { cursor: pointer; }
@media (max-width: 900px) {
  .tr-main { flex-direction: column; }
  .tr-side { width: 100%; position: static; max-height: none; }
  .tr-built { margin-left: 0; text-align: left; }
}
#tr-svg .tr-pt.new { stroke: #fff; stroke-width: 3; animation: trPulse 1.2s ease-in-out infinite; opacity: 1; }
@keyframes trPulse { 50% { stroke-width: 7; stroke-opacity: .4; } }
.tr-probe { background: color-mix(in srgb, var(--gold) 12%, transparent); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
/* score parts (ui/parts.js) */
.pt-how { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 6px; border-bottom: 1px solid var(--line2); margin-bottom: 4px; }
.pt-opt { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.pt-opt.off { opacity: .45; cursor: default; }
.pt-parts { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 6px 6px; }
#pt-vol { width: 120px; }
.pt-opt, .pt-opt span { text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--text); font-size: 13px; }

/* zoom: the 🔍 panel (interface / score) and "score only" (ui/zoom.js) */
#zm-open { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
#zm-open.changed #zm-val { color: var(--gold); font-weight: 700; }
#zm-open.on { background: var(--gold); color: #111; }
#zm-panel { position: absolute; right: 0; bottom: calc(100% + 8px); width: 270px; background: var(--card2); border: 1px solid var(--line2);
  border-radius: 14px; padding: 12px; box-shadow: 0 18px 50px var(--shade); display: flex; flex-direction: column; gap: 8px; }
#zoom-pill { position: fixed; }
#zm-panel.hidden { display: none; }
.zm-h { display: flex; justify-content: space-between; align-items: baseline; }
.zm-h b { font: 600 15px var(--serif); color: var(--gold2); }
.zm-row { display: grid; grid-template-columns: 1fr 34px 64px 34px; align-items: center; gap: 4px; }
#zoom-pill .zm-row button { background: var(--btn); border: 1px solid var(--line2); border-radius: 8px; height: 32px; cursor: pointer; color: var(--ink); font-size: 15px; }
#zoom-pill .zm-row .zm-v { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.zm-tip { line-height: 1.35; }
body.focus-score #nav, body.focus-score .ofl-arrow, body.focus-score .hw-chip { display: none !important; }
body.focus-score main { padding: 8px 10px 64px !important; }
body.focus-score .view.fit.active > :not(.stage) { display: none !important; }
body.focus-score .view.fit.active > .stage { margin: 0; }
#focus-bar { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 66; display: flex; gap: 6px; align-items: center;
  background: color-mix(in srgb, var(--card2) 92%, transparent); border: 1px solid var(--line2); border-radius: 999px; padding: 6px 8px;
  box-shadow: 0 12px 40px var(--shade); backdrop-filter: blur(6px); max-width: calc(100vw - 16px); overflow-x: auto; }
#focus-bar.hidden { display: none; }
.fb-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--btn); color: var(--ink); cursor: pointer; white-space: nowrap; font-size: 13.5px; }
.fb-btn.sm { padding: 0 11px; }
.fb-btn.on { background: var(--gold); color: #111; border-color: var(--gold); }
.fb-btn:disabled { opacity: .4; }
.fb-ico { font-size: 15px; }
.fb-sep { width: 1px; height: 24px; background: var(--line2); }
#zoom-pill #zm-focus { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #111; font-weight: 600; padding: 8px 12px; border-radius: 10px; font-size: 13px; }
#zoom-pill #zm-open { font-size: 12.5px; padding: 6px 11px; }
body.focus-score #zoom-pill { display: none; }
/* instrument tuning marks (ui/instrument.js) */
.tl .tune-arrow { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tl .tune-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.tune-note.flash { animation: tnFlash 1.4s ease-out; }
@keyframes tnFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* zoom mode: the areas with a zoom of their own are outlined */
body.zoom-mode .view.active .score-scroll, body.zoom-mode #review-scroll, body.zoom-mode #rv-score-box, body.zoom-mode #tr-svg {
  outline: 2px dashed var(--gold); outline-offset: -2px; }
body.zoom-mode main { touch-action: pan-x pan-y; }
#zm-done { margin-top: 4px; }
/* ⛶ score only: on the score box itself */
.stage { position: relative; }
.focus-btn { position: absolute; top: 10px; right: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--gold) 22%, var(--btn)); color: var(--gold2); border: 1px solid var(--gold-deep);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 600; }
.focus-btn span:first-child { font-size: 16px; }
body.focus-score .focus-btn { display: none; }
@media (max-width: 760px) { .focus-btn .fo-txt { display: none; } .focus-btn { padding: 6px 10px; } }
.view.fit .stage-head { padding-right: 170px; } @media (max-width: 760px) { .view.fit .stage-head { padding-right: 56px; } }
#tr-svg .tr-axis { fill: var(--text2); font-size: 13px; text-anchor: middle; opacity: .8; }
#tr-svg .tr-live { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 10px #fff); }
#tr-svg .tr-live-t { fill: #fff; }
.tr-livebox { font-size: 18px; padding: 6px 4px; }
.tr-livebox b { font: 700 28px var(--serif); margin-right: 8px; }
.tr-nudge { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; align-items: center; }
.tr-nudge i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.tr-nudge button { padding: 2px 8px; }
/* Rehearse | Exam, and how (ui/modes.js) */
.mode-field { display: flex; flex-direction: column; gap: 4px; }
.mode-field .seg { width: max-content; }
.mode-seg button { font-weight: 600; padding: 6px 14px; }
.how-seg button { display: inline-flex; gap: 4px; align-items: center; }
@media (max-width: 760px) { .mode-field { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; } .mode-field > label { display: none; } }
#btn-rehearse, #rh-exam { display: none !important; }
.hf-opts summary { cursor: pointer; color: var(--gold2); font-weight: 600; }
.hf-opts .pol-table td:first-child { width: 40%; }
.nav-item.nav-merged { display: none !important; }

/* areas with their own zoom take a pinch always (one finger still scrolls): never the browser's zoom */
.view.fit .score-scroll, #rv-score-box, #review-scroll { touch-action: pan-x pan-y; }

/* play-along audio (ui/playalong.js) */
.pop-btn.lit { border-color: var(--gold); color: var(--gold); }
#pop-pa { min-width: 280px; }
.pa-file { display: flex; gap: 8px; align-items: baseline; margin: 4px 0 8px; }
.pa-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.pa-card { width: min(1100px, 96vw); max-width: 96vw; }
.pa-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.pa-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-tools { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#pa-tap.on { background: var(--gold); color: #111; }
.pa-cv { width: 100%; height: 230px; border-radius: 10px; touch-action: none; display: block; cursor: crosshair; }
.pa-tapbig { width: 100%; margin-top: 8px; padding: 22px; font-size: 20px; font-weight: 700; border-radius: 14px; border: 2px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--ink); touch-action: manipulation; user-select: none; }
.pa-tapbig:active { background: var(--gold); color: #111; }
.pa-foot { margin-top: 10px; }
.pa-foot .grow { flex: 1; }

/* alignment editor: waveform over the score, pairs numbered on both */
.pa-cv { height: 150px; }
.pa-hint { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, #6fb6ff 12%, transparent); font-size: 13px; }
.pa-score { height: auto; min-height: 120px; max-height: min(46vh, 520px); overflow: auto; border-radius: 10px; cursor: crosshair; }
.pa-mk line { stroke-width: 2; }
.pa-mk circle { stroke: none; }
.pa-mk text { font: bold 11px sans-serif; text-anchor: middle; fill: #111; }
.pa-mk.pair line { stroke: #d9b56f; } .pa-mk.pair circle { fill: #d9b56f; }
.pa-mk.sel line, .pa-mk.pend line { stroke: #6fb6ff; } .pa-mk.sel circle, .pa-mk.pend circle { fill: #6fb6ff; }
.pa-mk { cursor: pointer; }

/* score marks (app.js scoreMarks / artShapes): sizes in staff spaces like MuseScore (sp = 9 px) */
.tl .acc-shape { stroke: none; }
.tl .art-line { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: miter; }
.tl .art-line.thin { stroke-width: 1; }
.tl .art-line.dashed { stroke-dasharray: 4 3; }
.tl .mk-dyn { fill: var(--ink); font: italic 700 21px "Times New Roman", "Georgia", serif; text-anchor: middle; letter-spacing: -0.5px; }
.tl .mk-text { fill: var(--ink); font: 16px "Times New Roman", "Georgia", serif; }
.tl .mk-text.tempo { font-weight: 700; font-size: 19px; }
.tl .mk-text.expr { font-style: italic; }
.tl .mk-text.reh { font-weight: 700; }
.tl .mk-box { fill: none; stroke: var(--ink); stroke-width: 1; }
.tl .mk-volta { fill: var(--ink); font: 700 15px "Times New Roman", "Georgia", serif; }
.tl .mk-ott { fill: var(--ink); font: italic 700 16px "Times New Roman", "Georgia", serif; }
.tl .mk-breath { fill: var(--ink); font: 700 26px "Times New Roman", serif; }

.tl .mk-lyr { fill: var(--ink); font: 17px "Times New Roman", "Georgia", serif; text-anchor: middle; }
.tl .mk-text.right { text-anchor: end; }
.tl .mk-text.fine { font-style: italic; font-weight: 700; }
.tl .mk-segno { fill: var(--ink); font: italic 700 22px "Times New Roman", serif; text-anchor: middle; }

.guide .guide-l { font-size: 11px; color: var(--muted); margin-left: 6px; }

.pa-score { touch-action: pan-x pan-y; }

/* beside "🎺 Instrument": which one and its octave */
.inst-pick { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inst-pick select { font-size: 12px; padding: 3px 6px; max-width: 46vw; }

/* the pitch view (pitchview.js): full window on the review, docked at the bottom live */
.pv-card { width: min(1280px, 98vw); max-width: 98vw; height: min(86vh, 900px); max-height: none; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.pv-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pv-time { font-variant-numeric: tabular-nums; min-width: 54px; }
.pv-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pv-vols { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.pv-vol { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.pv-vol input { width: 90px; }
.pv-zoom { display: inline-flex; gap: 2px; align-items: center; }
.pv-cv { flex: 1; min-height: 160px; width: 100%; border-radius: 10px; touch-action: none; display: block; cursor: grab; }
.pv-cv:active { cursor: grabbing; }
.pv-hint { text-align: center; }
.pv-modal.pv-dock { inset: auto 0 0 0; height: 46vh; background: none; backdrop-filter: none; place-items: end center; pointer-events: none; }
.pv-modal.pv-dock .pv-card { pointer-events: auto; height: 46vh; width: 100vw; max-width: 100vw; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px var(--shade); }
@media (max-width: 640px) { .pv-vol input { width: 70px; } .pv-hint { display: none; } }

/* history (history.js): filters, the takes table in its own scrolling / zooming box, the practice tab */
#view-history { --hz: 1; }
.hy-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; padding: 10px 12px; }
.hy-filters select, .hy-filters input { font-size: 13px; padding: 5px 8px; max-width: 46vw; }
.hy-filters input[type=search] { min-width: 150px; }
.hy-dates { display: inline-flex; gap: 6px; align-items: center; }
.hy-zoom { display: inline-flex; gap: 2px; }
.hy-box { padding: 0; overflow: hidden; }
.hy-scroll { overflow: auto; max-height: calc(100dvh - 250px); min-height: 260px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.hy-scroll.act { max-height: calc(100dvh - 200px); }
.hy-table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--hz)); }
.hy-table th { position: sticky; top: 0; z-index: 1; background: var(--th); text-align: left; white-space: nowrap; cursor: pointer; user-select: none;
  padding: calc(8px * var(--hz)) calc(10px * var(--hz)); font-size: calc(11px * var(--hz)); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.hy-table th.sorted { color: var(--gold); }
.hy-table td { padding: calc(6px * var(--hz)) calc(10px * var(--hz)); border-top: 1px solid var(--line); vertical-align: middle; }
.hy-table tbody tr { cursor: pointer; }
.hy-table tbody tr:hover { background: var(--tint-weak); }
.hy-table .num { text-align: right; white-space: nowrap; }
.hy-table .pill { font-size: calc(12px * var(--hz)); min-width: calc(30px * var(--hz)); text-align: center; }
.hy-when { white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.2; }
.hy-when b { display: block; font-weight: 600; }
.hy-when span { display: block; padding-left: 1.6em; color: var(--muted); font-size: .92em; }
.hy-ex div:first-child { font-weight: 500; }
.hy-hw { font-size: .85em; color: var(--gold); margin-top: 2px; }
.hy-tag { white-space: nowrap; font-size: .9em; color: var(--text2); }
.hy-tag.inst { color: var(--gold2); }
.hy-foot { padding: 8px 12px; border-top: 1px solid var(--line); }
.hy-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--hz)), 1fr)); gap: 10px; margin-bottom: 10px; }
.hy-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.hy-stat span { font-size: calc(11px * var(--hz)); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hy-stat b { font-size: calc(24px * var(--hz)); font-family: var(--serif); color: var(--ink); }
.hy-stat i { font-style: normal; font-size: calc(11.5px * var(--hz)); color: var(--gold); }
.hy-sec { margin-bottom: 10px; overflow-x: auto; }
.hy-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.hy-cal-wrap { overflow-x: auto; padding-bottom: 4px; }
.hy-months { display: grid; grid-template-columns: repeat(var(--wk), calc(15px * var(--hz))); font-size: calc(10px * var(--hz)); color: var(--muted); height: 1.4em; }
.hy-months span { white-space: nowrap; }
.hy-cal { display: flex; gap: calc(3px * var(--hz)); }
.hy-week { display: flex; flex-direction: column; gap: calc(3px * var(--hz)); }
.hy-cell { display: inline-block; width: calc(12px * var(--hz)); height: calc(12px * var(--hz)); border-radius: 3px; background: var(--tint); cursor: pointer; }
.hy-cell.out { background: none; cursor: default; }
.hy-cell.l1 { background: color-mix(in srgb, var(--gold) 28%, transparent); }
.hy-cell.l2 { background: color-mix(in srgb, var(--gold) 50%, transparent); }
.hy-cell.l3 { background: color-mix(in srgb, var(--gold) 75%, transparent); }
.hy-cell.l4 { background: var(--gold); }
.hy-cell.sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.hy-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: 8px; font-size: calc(12px * var(--hz)); color: var(--text2); }
.hy-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.hy-legend .hy-cell { cursor: default; }
.hy-bar { display: flex; height: calc(14px * var(--hz)); border-radius: 7px; overflow: hidden; background: var(--tint); }
.hy-mini th { position: static; }
.rv-when { margin-top: 2px; letter-spacing: .02em; }
@media (max-width: 760px) { .hy-scroll { max-height: calc(100dvh - 300px); } .hy-filters select { max-width: 44vw; } }
.hy-filters input[type=search], .hy-filters input[type=date] { background: var(--btn); color: var(--ink); border: 1px solid var(--line2); border-radius: 8px; color-scheme: dark; }

/* logos: the shape comes from the image, the colour from the theme */
.logo-word, .logo-mark { background: var(--ink); -webkit-mask: url(logo-word.png) left center / contain no-repeat; mask: url(logo-word.png) left center / contain no-repeat; width: 128px; height: 56px; }
.logo-mark { -webkit-mask-image: url(logo-mark.png); mask-image: url(logo-mark.png); width: 42px; height: 44px; }
.logo-word.big { width: 240px; height: 106px; margin: 0 auto 8px; -webkit-mask-position: center; mask-position: center; }
.brand .brand-sub { margin-top: 2px; }
.login-banned { background: color-mix(in srgb, var(--bad) 14%, transparent); border: 1px solid var(--bad); color: var(--bad); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-bottom: 8px; }
.login-note { margin-top: 10px; line-height: 1.35; font-size: 11.5px; }

/* the options form's layers: where each row comes from */
.pol-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pol-hwnote { flex-basis: 100%; }
.pol-sw { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pol-src { border: 1px solid var(--line2); background: var(--tint-weak); color: var(--muted); border-radius: 999px; padding: 1px 9px; font-size: 11px; line-height: 1.5; cursor: pointer; white-space: nowrap; }
.pol-src[data-src="own"] { background: var(--gold); border-color: var(--gold); color: var(--card); font-weight: 600; }
.pol-src[data-src="pupil"] { color: var(--good); border-color: var(--good); }
.pol-srcc { width: 1%; text-align: right; }
.pol-sw.inh .tg-text, .pol-ctl.inh td:first-child { opacity: .62; }
.pol-ctl.inh select { opacity: .62; }
.hf-opts .pol-grid { grid-template-columns: 1fr; overflow: visible; }

/* a user's file, the password check */
.sudo-modal { z-index: 90; }
.sudo-modal .modal-card { max-width: 380px; }
.sudo-modal h3 { margin: 0 0 6px; font: 600 19px var(--serif); }
.uf-card { width: min(900px, 96vw); max-width: 96vw; height: min(88dvh, 780px); display: flex; flex-direction: column; gap: 10px; }
.uf-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.uf-name { font: 600 20px var(--serif); }
.uf-tabs { display: flex; overflow-x: auto; max-width: 100%; flex: none; }
.uf-tabs button { white-space: nowrap; }
.uf-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.uf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.uf-kv { background: var(--tint-weak); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.uf-kv span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.uf-dev, .uf-ban { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.uf-raw { max-height: 240px; overflow: auto; font-size: 11px; background: var(--tint-weak); padding: 8px; border-radius: 6px; white-space: pre-wrap; word-break: break-all; }
.uf-link { cursor: pointer; }
.uf-link:hover { background: var(--tint-weak); }
.warn-txt { color: var(--fair); }
#adm-root .adm-filter input { flex: 1 1 160px; min-width: 130px; }
button.gold.danger { background: var(--bad); border-color: var(--bad); color: #fff; }

/* the tutorial */
#tu { position: fixed; inset: 0; z-index: 95; }
#tu.hidden { display: none; }
#tu.dim { background: #0007; }
.tu-hole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 3px var(--gold), 0 0 0 100vmax #0007; transition: all .25s; pointer-events: none; }
.tu-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 92vw); max-height: 92dvh; overflow: auto; padding: 18px 20px 14px; text-align: center; box-shadow: 0 18px 50px #0006; }
.tu-card.top { top: 12px; transform: translateX(-50%); }
.tu-card.bottom { top: auto; bottom: 12px; transform: translateX(-50%); }
.tu-card h2 { font: 600 24px var(--serif); margin: 8px 0 6px; color: var(--ink); }
.tu-card p { margin: 0 0 8px; line-height: 1.4; color: var(--text2); }
.tu-card ul { list-style: none; margin: 0 0 8px; padding: 0; text-align: left; display: inline-block; color: var(--text2); }
.tu-card li { padding: 3px 0; }
.tu-art { min-height: 96px; display: grid; place-items: center; }
.tu-svg { width: 100%; max-width: 280px; height: auto; }
.tu-emoji { font-size: 44px; letter-spacing: .08em; }
.tu-logo { width: 88px; height: 92px; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.tu-swatches { display: flex; gap: 10px; }
.tu-swatches i { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line2); }
.tu-chips { display: flex; gap: 8px; font-size: 18px; }
.tu-chips .pol-src { font-size: 15px; padding: 3px 13px; cursor: default; }
.tu-dots { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin: 6px 0 10px; }
.tu-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); }
.tu-dots i.on { background: var(--gold); }
.tu-btns { align-items: center; gap: 8px; }
#rd-task { display: flex; gap: 10px; align-items: center; }
#rd-task.hidden { display: none; }
.tl .mk-text.eq { font-size: 13px; font-weight: 600; }


/* ---------- windows: foot always on screen, sheets (ui/layers.js) */
.modal-card { scroll-padding-bottom: 72px; }
.sx-foot { position: sticky; bottom: -20px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end;
  margin: 14px -22px -20px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, color-mix(in srgb, var(--card) 88%, transparent), var(--card) 30%); border-top: 1px solid var(--line); }
.ly-ask { z-index: 90; }
.ly-ask .modal-card { width: min(400px, 92vw); }
.ly-ask h3 { margin: 0 0 6px; font: 500 22px/1.2 var(--serif); }
.ly-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--bg, var(--card)); animation: sheet-in .18s ease-out; }
@keyframes sheet-in { from { transform: translateY(14px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--card); }
.sheet-back { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--btn); font-size: 24px; line-height: 1; cursor: pointer; color: var(--gold2); }
.sheet-title { font: 500 22px/1.15 var(--serif); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-tools { display: flex; gap: 6px; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.sheet-body > * { width: 100%; max-width: 980px; margin-inline: auto; flex-shrink: 0; }
.sheet-body section { display: flex; flex-direction: column; gap: 12px; }
.sheet-body section.hidden { display: none; }
.sheet-foot { display: flex; gap: 8px; align-items: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }
.sheet-foot.hidden { display: none; }
.sheet-foot .spacer, .row .spacer { flex: 1; }

/* ---------- tasks and groups */
.tk-tabs { position: sticky; top: -14px; z-index: 2; justify-content: stretch; }
.tk-tabs button { flex: 1; padding: 8px 6px; }
.task-sheet h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold2); font-weight: 600; }
.tk-prev { margin-top: 10px; max-height: 240px; overflow: auto; }
.tk-src { flex-wrap: wrap; }
.tk-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 12px; }
.tk-rules label { display: flex; flex-direction: column; gap: 5px; }
.tk-gk { margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { background: var(--card2); border: 1px solid var(--line2); border-radius: 99px; padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--text2); min-height: 34px; }
.chip.on { background: color-mix(in srgb, var(--gold) 22%, var(--card2)); border-color: var(--gold-deep); color: var(--gold2); font-weight: 600; }
.rc-part { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
.rc-part[disabled] { opacity: .62; }
.rc-fixed { margin-top: 4px; }
.rc-meter { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.rc-meter b { font: 500 19px var(--serif); min-width: 46px; }
.rc-gr { flex: 1; }
.rc-gin { width: 150px; }
.rc-every { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-level { margin: 12px 0 6px; font-size: 13px; }
.rc-pats { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.rc-pat { background: var(--card2); border: 1px solid var(--line2); border-radius: 10px; padding: 3px; cursor: pointer; overflow: hidden; }
.rc-pat.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--card2)); }
.gp-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gp-kind h3 { margin: 0; font: 500 21px var(--serif); }
.gp-item { padding: 8px 0 0; border-top: 1px solid var(--line); margin-top: 8px; }
.gp-kids { margin-left: 18px; }
.pol-was { flex-basis: 100%; }
.pol-was:empty { display: none; }
.pol-src[data-src="pupil"] { color: var(--gold2); }
@media (max-width: 760px) { .rc-gin { width: 100%; } }


/* ---------- the tap editor (ui/scoreeditor.js) */
.se-sheet .sheet-body { padding: 0; gap: 0; overflow: hidden; }
.se-sheet .sheet-body > * { max-width: none; }
.se-sheet .sheet-title { font-size: 18px; }
.se-sheet .sheet-tools .ghost, .se-sheet .sheet-tools .gold { padding: 7px 10px; }
.se-mini { position: relative; height: 84px; flex: none; border-bottom: 1px solid var(--line); background: var(--card2); touch-action: none; overflow: hidden; }
.se-mini svg { width: 100%; height: 100%; display: block; }
.se-main { position: relative; flex: 1; min-height: 120px; touch-action: none; overflow: hidden; user-select: none; -webkit-user-select: none; }
.se-main svg { width: 100%; height: 100%; display: block; }
.se-slot { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(to bottom, transparent, var(--gold) 15%, var(--gold) 85%, transparent); opacity: .55; pointer-events: none; }
.se-sheet.armed .se-slot { opacity: 1; }
.se-pitch { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 3px 12px; border-radius: 99px; background: var(--gold); color: #1b140a; font-weight: 700; font-size: 14px; pointer-events: none; }
.se-foot { position: absolute; left: 10px; bottom: 6px; pointer-events: none; }
.se-zoom { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; }
.se-zoom button { width: 30px; height: 30px; border: 1px solid var(--line2); border-radius: 8px; background: color-mix(in srgb, var(--card) 85%, transparent); cursor: pointer; font-size: 16px; line-height: 1; color: var(--text2); }
.se-keys { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
.se-row { display: flex; gap: 4px; }
.se-k { flex: 1; min-width: 0; height: 46px; border: 1px solid var(--line2); border-radius: 10px; background: var(--btn); cursor: pointer; font-size: 21px; color: var(--ink); display: grid; place-items: center; padding: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.se-k svg { width: 24px; height: 28px; }
.se-k.wide { flex: 3; font-size: 14px; font-weight: 600; }
.se-k.on { background: linear-gradient(135deg, var(--gold2), var(--gold) 55%, var(--gold-deep)); color: #1b140a; border-color: var(--gold-deep); }
.se-k:disabled { opacity: .35; }
.se-glyph { font-family: "Noto Music", "Bravura Text", "Segoe UI Symbol", serif; font-size: 22px; line-height: 1; }
.se-pal { flex: none; max-height: 46vh; display: flex; flex-direction: column; background: var(--card); border-top: 1px solid var(--line); }
.se-pal.hidden { display: none; }
.se-cats { display: flex; gap: 2px; overflow-x: auto; padding: 6px; flex: none; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.se-cats button { flex: none; border: 0; border-radius: 8px; padding: 7px 11px; background: none; cursor: pointer; font-size: 13px; color: var(--muted); white-space: nowrap; }
.se-cats button.on { background: var(--track); color: var(--gold2); font-weight: 600; }
.se-pbody { overflow-y: auto; padding: 10px; min-height: 80px; }
.se-textp { flex: none; padding: 8px; background: var(--card); border-top: 1px solid var(--line); }
.se-textp.hidden { display: none; }
.se-textp textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.tl .se-sel { fill: color-mix(in srgb, var(--gold) 26%, transparent); stroke: var(--gold); stroke-width: 1.2; }
.tl .se-ghost { fill: var(--gold-deep); }
.tl .se-beat { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.tl .se-faint { opacity: .35; }
.se-box { fill: color-mix(in srgb, var(--gold) 16%, transparent); stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.se-wbox { overflow: auto; touch-action: pan-x pan-y; flex: 1; min-height: 0; }
.se-whole .sheet-body > .se-wbox { max-width: none; }
@media (min-width: 900px) {
  .se-keys { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .se-row { flex: 0 1 auto; }
  .se-k { flex: 0 0 48px; }
  .se-k.wide { flex: 0 0 120px; }
}
body:has(.sheet) #zoom-pill { display: none; }
.tk-prev:has(svg:empty) { display: none; }
input.num.tiny { width: 58px; text-align: center; -moz-appearance: textfield; appearance: textfield; }
input.num.tiny::-webkit-outer-spin-button, input.num.tiny::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.se-sheet .ico-only { display: none; }
@media (max-width: 760px) { .se-sheet .ico-only { display: inline; } .se-sheet .lab-only { display: none; } .se-sheet .sheet-title { font-size: 16px; } }

/* ---------- second round: cards, previews, editor rows, the ball */
.rc-pats { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-pat.pat { padding: 4px 6px; width: auto; }
.rc-meter { flex-wrap: wrap; }
.rc-ts { font: 500 19px var(--serif); min-width: 58px; padding: 4px 10px; border: 1px solid var(--line2); border-radius: 10px; background: var(--card2); cursor: pointer; color: var(--ink); }
.rc-ts.on { border-color: var(--gold); color: var(--gold2); }
.rc-gr { flex-basis: 100%; margin: 6px 0 2px; }
.rc-gr.hidden { display: none; }
.tk-prev { position: relative; max-height: 280px; overflow: auto; }
.tk-prev.hidden { display: none; }
.sb-tools { position: sticky; top: 0; left: 100%; float: right; z-index: 2; display: flex; gap: 4px; padding: 2px; }
.sb-tools button { width: 32px; height: 32px; border: 1px solid var(--line2); border-radius: 8px; background: var(--card); cursor: pointer; font-size: 16px; color: var(--text2); }
.tl .acc-par { fill: var(--ink); font: 400 16px "Times New Roman", serif; text-anchor: middle; }
.tl .se-beat.b { stroke-width: 1.6; }
.tl .se-beat.s { stroke-width: 1.1; }
.tl .se-beat.t { stroke-width: .8; }
.tl .se-beat { opacity: 1; stroke: var(--gold-deep); }
.tl .se-rubber { fill: none; stroke: var(--gold-deep); stroke-width: 2; stroke-dasharray: 5 4; }
.se-names-row { align-items: stretch; }
.se-arrows { width: 14px; flex: none; font-size: 9px; line-height: 1; color: var(--gold2); display: flex; align-items: center; justify-content: center; word-break: break-all; }
.se-names { flex: 1; min-width: 0; display: flex; gap: 3px; touch-action: none; }
.se-names.scroll { overflow-x: auto; touch-action: pan-x; scrollbar-width: thin; }
.se-n { position: relative; flex: 1 0 0; min-width: 38px; min-height: 44px; border: 1px solid var(--line2); border-radius: 10px; background: var(--card2); cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ink); padding: 2px 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; touch-action: none; }
.se-names.scroll .se-n { flex: 0 0 44px; touch-action: pan-x; }
.se-n small { position: absolute; right: 3px; bottom: 1px; font-size: 8.5px; font-weight: 500; color: var(--muted); }
.se-tiny { width: 26px; height: 34px; color: var(--text2); }
.se-k.se-small { flex: 0 0 34px; font-size: 15px; }
#ball { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 25; pointer-events: none; }
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; }
.bl-grid .rh-slider { display: flex; flex-direction: column; align-items: stretch; gap: 3px; font-size: 13px; }
@media (min-width: 900px) { .se-names-row { flex: 1 0 100%; } }
.se-n { min-width: 0; flex: 1 1 0; }
.se-names:not(.scroll) .se-n { overflow: hidden; }
.se-tiny { width: 100%; max-width: 26px; }
@media (max-width: 760px) { .se-n { font-size: 10.5px; } .se-k.se-small { flex: 0 0 26px; } }

/* ---------- no browser zoom anywhere: every pinch is ours */
html, body { touch-action: pan-x pan-y; }
.rx-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rx-filters .chip { min-height: 30px; padding: 3px 10px; font-size: 12.5px; }
.tl .tune-zero { stroke: var(--muted); stroke-width: .8; stroke-dasharray: 3 3; }
.rd-staff { position: relative; touch-action: none; }
.rd-tools { position: absolute; top: 4px; right: 4px; float: none; left: auto; }
.rd-tools button { width: auto; min-width: 34px; font-size: 12.5px; padding: 0 5px; }
.view.fit .score-scroll, #rv-score-box, .tk-prev, .se-wbox { touch-action: pan-x pan-y; }

/* ---------- waveform tools, syllables by hand, the waveform in the tuning window, task dates */
#review-scroll { touch-action: pan-y; }
.tl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }
.tk-dates { text-align: center; }
.tl .note-hit.sy-sel .blk { stroke: var(--gold2); stroke-width: 2; stroke-opacity: 1; }
.rx-side.tr-side { width: auto; position: static; max-height: none; margin: 10px 12px 4px; }
.pv-card .rx-side.tr-side { flex: none; margin: 0; }
.pv-card.pv-edit { overflow-y: auto; }
.pv-card.pv-edit .pv-cv { flex: none; height: 260px; }
.rx-nav { display: inline-flex; gap: 4px; margin-left: auto; }
.rx-side .tr-sh .rx-close { margin-left: 0; }
.pv-wave { position: relative; flex: none; overflow: hidden; border-radius: 10px; background: var(--card2); touch-action: none; }
.pv-wave.hidden, .pv-split.hidden { display: none; }
.pv-wave svg { display: block; }
.pv-split { flex: none; height: 12px; margin: 1px 0; cursor: ns-resize; touch-action: none; position: relative; }
.pv-split::after { content: ""; position: absolute; left: 50%; top: 4px; width: 56px; height: 4px; margin-left: -28px; border-radius: 99px; background: var(--line2); }
.pv-cv { min-height: 120px; }

/* the Scan tab */
#view-omr, #om-body, #om-body > .card { min-width: 0; max-width: 100%; }
#om-body { display: flex; flex-direction: column; gap: 16px; }
.om-task { overflow: hidden; }
.om-start .om-go { gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.om-start .om-go button { flex: 1 1 200px; padding: 16px; font-size: 16px; }
.om-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.om-job { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; text-align: left; background: var(--card2); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); cursor: pointer; }
.om-job img { width: 44px; height: 60px; object-fit: cover; border-radius: 4px; flex: none; background: #fff; }
.om-jt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.om-jt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-job .pill.om-done { color: var(--perfect); }
.om-job .pill.om-failed { color: var(--bad); }
.om-sel { margin-top: 10px; flex-wrap: wrap; }
.om-sel input { flex: 1 1 180px; min-width: 0; }
.om-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.om-page { display: flex; flex-direction: column; gap: 6px; }
.om-pic { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px; background: #fff; border: 3px solid transparent; opacity: .5; cursor: pointer; }
.om-page.on .om-pic { border-color: var(--gold); opacity: 1; }
.om-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.om-n { position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; }
.om-tick { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: var(--gold); color: #fff; display: none; }
.om-page.on .om-tick { display: block; }
.om-acts { display: flex; gap: 4px; justify-content: space-between; }
.om-acts [data-a="adj"] { flex: 1; }
.om-add { justify-content: center; gap: 8px; min-height: 120px; }
.om-foot { display: flex; justify-content: flex-start; padding-right: 130px; }
.om-foot button { flex: 1; }
.om-stage { display: flex; justify-content: center; margin: 10px 0; }
.om-stage canvas { touch-action: none; display: block; border-radius: 6px; }
.om-adj { display: flex; flex-direction: column; gap: 8px; }
.om-run .om-msg { font-size: 16px; margin: 8px 0; }
.om-dl { gap: 10px; flex-wrap: wrap; margin-top: 10px; }
a.btn-a { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; }
a.btn-a.gold { background: var(--gold); color: #fff; }
a.btn-a.ghost { border: 1px solid var(--line2); color: var(--text); }
.om-see { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.om-see img { width: 100%; height: auto; background: #fff; border-radius: 6px; }
.om-prev { max-height: 340px; max-width: 100%; overflow: auto; margin: 6px 0; border-radius: 8px; }