/* Layout: panel header over a two-column working deck — drill stage left, live meter rail right; report and settings swap in as full-width views. */
:root{
  --paper:#f3f1ec; --panel:#fbfaf7; --panel-2:#efece4;
  --ink:#16150f; --ink-2:#57544b; --ink-3:#8a8679;
  --rule:#ddd9ce; --rule-2:#c9c4b6;
  --signal:#a2500d; --signal-ink:#ffffff; --signal-soft:#f7ead8;
  --good:#146c43; --good-soft:#e2f2e9;
  --bad:#b02a1f; --bad-soft:#fae7e4;
  --s1:#2a78d6; --s2:#eb6834;
  --shadow:0 1px 2px rgba(22,21,15,.06), 0 8px 24px -12px rgba(22,21,15,.18);
  --f-disp:"IBM Plex Sans Condensed","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121211; --panel:#1b1a18; --panel-2:#232220;
    --ink:#f1efe8; --ink-2:#b6b2a6; --ink-3:#858175;
    --rule:#302e29; --rule-2:#403d36;
    --signal:#f0a44f; --signal-ink:#1b1206; --signal-soft:#36280f;
    --good:#3fb27d; --good-soft:#15291f;
    --bad:#e8695c; --bad-soft:#2e1613;
    --s1:#3987e5; --s2:#d95926;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121211; --panel:#1b1a18; --panel-2:#232220;
  --ink:#f1efe8; --ink-2:#b6b2a6; --ink-3:#858175;
  --rule:#302e29; --rule-2:#403d36;
  --signal:#f0a44f; --signal-ink:#1b1206; --signal-soft:#36280f;
  --good:#3fb27d; --good-soft:#15291f;
  --bad:#e8695c; --bad-soft:#2e1613;
  --s1:#3987e5; --s2:#d95926;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.shell{
  min-height:100%; display:flex; flex-direction:column;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-block:0 28px; max-width:1180px; margin:0 auto; width:100%;
}
h1,h2,h3{font-family:var(--f-disp); font-weight:700; margin:0; text-wrap:balance; letter-spacing:-.01em}
button{font:inherit; color:inherit}
.lbl{font-family:var(--f-disp); font-weight:600; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* header */
.bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-block:16px 14px; border-bottom:1px solid var(--rule)}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.brand h1{font-size:19px; letter-spacing:.02em}
.logo{font-family:var(--f-mono); font-weight:600; font-size:15px; color:var(--signal); border:1px solid var(--rule-2); border-radius:3px; padding:3px 7px; letter-spacing:.14em; white-space:nowrap}
.modes{display:flex; gap:2px; background:var(--panel-2); border-radius:7px; padding:3px; flex-wrap:wrap}
.modes button{border:0; background:transparent; padding:6px 11px; border-radius:5px; font-family:var(--f-disp); font-weight:600; font-size:13px; letter-spacing:.02em; color:var(--ink-2); cursor:pointer}
.modes button:hover{color:var(--ink)}
.modes button[aria-pressed="true"]{background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12)}
.bar-actions{display:flex; gap:8px}
.btn{border:1px solid var(--rule-2); background:var(--panel); border-radius:6px; padding:7px 13px; font-family:var(--f-disp); font-weight:600; font-size:13px; cursor:pointer; letter-spacing:.02em}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--signal); border-color:var(--signal); color:var(--signal-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.sm{padding:5px 10px; font-size:12px}
.btn[aria-pressed="true"]{background:var(--signal-soft); border-color:var(--signal)}
:focus-visible{outline:2px solid var(--signal); outline-offset:2px}

/* views */
.view{padding-block:20px 0}
.deck{display:grid; grid-template-columns:minmax(0,1fr) 288px; gap:18px; align-items:start}
@media (max-width:720px){ .deck{grid-template-columns:minmax(0,1fr)} }

/* stage */
.stage{
  background:var(--panel); border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow);
  min-height:clamp(210px,48vh,430px); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:30px 20px; text-align:center; position:relative; min-width:0;
}
.stage-status{font-family:var(--f-disp); font-weight:600; font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.stage-status[data-tone="go"]{color:var(--good)}
.stage-status[data-tone="miss"]{color:var(--bad)}
.glyph-wrap{display:flex; flex-direction:column; align-items:center; gap:10px; min-height:clamp(86px,21vh,168px); justify-content:center}
.glyph{
  font-family:var(--f-disp); font-weight:700; font-size:clamp(54px,min(18vw,25vh),132px); line-height:1;
  letter-spacing:.02em; color:var(--ink); opacity:0; transition:opacity .12s ease;
}
.glyph.show{opacity:1}
.glyph.flash{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:0;transform:scale(.94)} 14%{opacity:1;transform:scale(1)} 70%{opacity:1} 100%{opacity:.34}}
.glyph[data-state="ok"]{color:var(--good)} .glyph[data-state="bad"]{color:var(--bad)}
.pattern{font-family:var(--f-mono); font-size:clamp(18px,4vh,26px); letter-spacing:.3em; color:var(--signal); min-height:34px; opacity:0; transition:opacity .12s}
.pattern.show{opacity:1}
.beacon{width:11px; height:11px; border-radius:50%; background:var(--rule-2); transition:background .05s}
.beacon.on{background:var(--signal); box-shadow:0 0 0 5px var(--signal-soft)}
.stage-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.keys{margin:0; font-size:12px; color:var(--ink-3); font-family:var(--f-mono)}
.restnote{margin:0; font-size:12px; color:var(--ink-3); font-family:var(--f-mono); letter-spacing:.14em; max-width:430px; line-height:1.7}
.keys kbd{font:inherit; border:1px solid var(--rule-2); border-bottom-width:2px; border-radius:4px; padding:0 4px; color:var(--ink-2)}
.stage.bad{border-color:var(--bad)}
@keyframes okpulse{0%{border-color:var(--good); box-shadow:inset 0 0 0 1px var(--good), var(--shadow)} 100%{border-color:var(--rule); box-shadow:var(--shadow)}}
.stage.okpulse{animation:okpulse .5s ease-out}
@media (prefers-reduced-motion:reduce){ .stage.okpulse{animation:none} }
@media (prefers-reduced-motion:reduce){ .glyph.flash{animation:none; opacity:1} *{transition-duration:.01ms !important} }

@media (max-height:620px){
  .shell{padding-block:0 14px}
  .bar{padding-block:10px 8px}
  .view{padding-block:12px 0}
  .stage{padding:16px; gap:12px}
  .card{padding:11px}
  .meter .v{font-size:30px}
  .meter.alt .v{font-size:23px}
  .rail{gap:10px}
}

/* copy box for stream modes */
.copybox{width:100%; max-width:640px; text-align:left; display:flex; flex-direction:column; gap:8px}
.copyline{
  font-family:var(--f-mono); font-size:clamp(15px,3.4vw,21px); letter-spacing:.14em; line-height:1.8;
  background:var(--panel-2); border:1px solid var(--rule); border-radius:7px; padding:12px 14px;
  min-height:64px; overflow-wrap:anywhere; min-width:0;
}
.caret{border-bottom:2px solid var(--signal); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{border-color:transparent}}
.diff span.hit{color:var(--good)} .diff span.sub{color:var(--bad); text-decoration:underline wavy} .diff span.gap{color:var(--bad); opacity:.65}

/* rail */
.rail{display:flex; flex-direction:column; gap:12px; min-width:0}
.card{background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:14px; box-shadow:var(--shadow); min-width:0}
.card > .lbl{display:block; margin-bottom:8px}
.meter{display:flex; align-items:baseline; gap:7px}
.meter .v{font-family:var(--f-mono); font-weight:600; font-size:38px; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.meter .u{font-family:var(--f-disp); font-weight:600; font-size:12px; letter-spacing:.09em; color:var(--ink-3)}
.meter.alt .v{font-size:28px}
.sub{font-size:12px; color:var(--ink-3); margin-top:4px}
.minis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.mini .v{font-family:var(--f-mono); font-weight:600; font-size:19px; font-variant-numeric:tabular-nums}
.strip{display:flex; flex-wrap:wrap; gap:3px}
.strip i{font-family:var(--f-mono); font-style:normal; font-size:12px; width:19px; height:19px; display:grid; place-items:center; border-radius:3px; background:var(--good-soft); color:var(--good)}
.strip i.bad{background:var(--bad-soft); color:var(--bad)}
.sendrow{display:flex; justify-content:space-between; gap:8px; font-size:13px; padding:3px 0}
.sendrow + .sendrow{border-top:1px dashed var(--rule)}
.sendrow b{font-family:var(--f-mono); font-weight:500}
@media (max-width:720px){
  .bar{gap:10px}
  .bar-actions{order:2}
  .modes{order:3; width:100%; justify-content:space-between}
  .brand h1{font-size:17px}
  .rail{flex-direction:row; flex-wrap:wrap; align-items:flex-start}
  .rail > .card:nth-child(-n+2){flex:1 1 140px}
  .rail > .card:nth-child(n+3){flex:1 1 230px}
  .meter .v{font-size:30px}
  .meter.alt .v{font-size:24px}
}

/* brief: the report in miniature, under the drill */
.brief{display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:12px; margin-top:14px}
.brief-card{background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:13px 14px; min-width:0; box-shadow:var(--shadow); display:flex; flex-direction:column}
.brief-head{display:flex; justify-content:space-between; align-items:baseline; gap:4px 8px; margin-bottom:9px; flex-wrap:wrap}
.brief-head .lbl{white-space:nowrap}
.brief-note{font-size:11px; color:var(--ink-3); font-family:var(--f-mono); white-space:nowrap}
.mini-table{width:100%; border-collapse:collapse; font-size:12px}
.mini-table td{padding:4px 6px 4px 0; border-bottom:1px solid var(--rule)}
.mini-table tr:last-child td{border-bottom:0}
.mini-table td.k{font-family:var(--f-mono); font-weight:600; font-size:14px; width:1%; white-space:nowrap}
.mini-table td.dits{font-family:var(--f-mono); color:var(--signal); letter-spacing:.16em; white-space:nowrap}
.mini-table td.r{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); white-space:nowrap}
.mini-table td.r b{font-weight:600; color:var(--ink)}
.mini-table td.r.warn b{color:var(--bad)}
.mini-table td.none{color:var(--ink-3); text-align:center; padding:16px 6px}
.brief-empty{font-size:12px; color:var(--ink-3); padding:14px 0; text-align:center; margin:auto 0}
.brief-foot{margin-top:11px; display:flex; justify-content:flex-end}

/* settings */
.drawer{background:var(--panel); border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow); padding:18px; margin-top:18px}
.setgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:18px 24px}
fieldset{border:0; padding:0; margin:0; min-width:0}
fieldset > legend{font-family:var(--f-disp); font-weight:700; font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:var(--signal); padding:0 0 9px; border-bottom:1px solid var(--rule); width:100%; margin-bottom:11px}
.field{display:grid; gap:4px; margin-bottom:12px}
.field label{font-size:13px; color:var(--ink-2); display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.field label .now{font-family:var(--f-mono); font-size:12px; color:var(--ink)}
input[type=range]{width:100%; accent-color:var(--signal)}
select,input[type=text],input[type=number]{width:100%; padding:6px 8px; border:1px solid var(--rule-2); border-radius:6px; background:var(--panel-2); color:var(--ink); font:inherit; font-size:14px}
.check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); margin-bottom:9px}
.check input{accent-color:var(--signal); width:16px; height:16px}
.hint-note{font-size:12px; color:var(--ink-3); margin:2px 0 0}
.chips{display:flex; flex-wrap:wrap; gap:5px}
.chip{border:1px solid var(--rule-2); background:var(--panel-2); border-radius:20px; padding:3px 10px; font-size:12px; font-family:var(--f-mono); cursor:pointer}
.chip[aria-pressed="true"]{background:var(--signal-soft); border-color:var(--signal); color:var(--ink)}

/* report */
.rep-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); gap:12px; margin-bottom:18px}
.tile{background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:13px 14px}
.tile .v{font-family:var(--f-mono); font-weight:600; font-size:29px; line-height:1.1; font-variant-numeric:tabular-nums; margin-top:5px}
.panels{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:14px}
.panel-card{background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:16px; min-width:0; box-shadow:var(--shadow)}
.panel-card h3{font-size:15px; margin-bottom:3px}
.panel-card .cap{font-size:12px; color:var(--ink-3); margin:0 0 12px}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-bottom:8px}
.legend span{display:flex; align-items:center; gap:6px}
.swatch{width:11px; height:3px; border-radius:2px; display:inline-block}
.chartwrap{position:relative; width:100%; overflow-x:auto}
svg{display:block; max-width:100%}
.tip{position:absolute; pointer-events:none; background:var(--ink); color:var(--paper); font-family:var(--f-mono); font-size:11px; padding:5px 7px; border-radius:5px; white-space:nowrap; transform:translate(-50%,-125%); opacity:0; transition:opacity .08s; z-index:5}
.tip.on{opacity:1}
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-family:var(--f-disp); font-weight:600; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); padding:0 8px 7px 0; border-bottom:1px solid var(--rule); white-space:nowrap}
td{padding:6px 8px 6px 0; border-bottom:1px solid var(--rule); font-variant-numeric:tabular-nums}
td.k{font-family:var(--f-mono); font-weight:600; font-size:15px}
td.dits{font-family:var(--f-mono); color:var(--signal); letter-spacing:.18em}
.bar-cell{min-width:90px}
.bar-track{height:7px; border-radius:4px; background:var(--panel-2); overflow:hidden}
.bar-fill{height:100%; border-radius:4px; background:var(--s1)}
.scroll{max-height:330px; overflow:auto}
.empty{color:var(--ink-3); font-size:13px; padding:18px 0; text-align:center}
.pill{display:inline-block; font-family:var(--f-disp); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:20px; border:1px solid var(--rule-2); color:var(--ink-2)}
.pill.warn{background:var(--bad-soft); border-color:var(--bad); color:var(--bad)}
.pill.ok{background:var(--good-soft); border-color:var(--good); color:var(--good)}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:9px 15px; border-radius:7px; font-size:13px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40}
.toast.on{opacity:1}
.foot{margin-top:22px; padding-top:14px; border-top:1px solid var(--rule); font-size:12px; color:var(--ink-3); display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between}
.foot code{font-family:var(--f-mono)}

/* contests: leaderboard and tug-of-war */
.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:14px; align-items:start}
.pick{display:flex; flex-wrap:wrap; gap:12px 22px; align-items:flex-end; margin-bottom:14px}
.pick .field{margin:0; flex:1 1 200px; min-width:0}
.pick .field.wide{flex:2 1 320px}
.rankcard{background:var(--panel); border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow); padding:16px; display:grid; gap:12px; margin-bottom:14px; min-width:0}
.rank-top{display:flex; justify-content:space-between; align-items:center; gap:8px 14px; flex-wrap:wrap}
.rank-nums{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:10px}
.rank-nums .v{font-family:var(--f-mono); font-weight:600; font-size:28px; line-height:1.15; font-variant-numeric:tabular-nums}
.rank-nums .v small{font-size:13px; color:var(--ink-3); font-weight:500}
.prog{height:8px; border-radius:4px; background:var(--panel-2); overflow:hidden}
.prog i{display:block; height:100%; width:0; background:var(--signal); transition:width .12s}
.rank-actions{display:flex; gap:10px 14px; align-items:center; flex-wrap:wrap}
.rank-actions .sub{margin:0; flex:1 1 220px}
.chip:disabled,.chips button:disabled{opacity:.5; cursor:default}
select:disabled{opacity:.5}
tr.me td{background:var(--signal-soft)}
td.who{font-weight:500; overflow-wrap:anywhere}
th.r,td.num{text-align:right}
.mlist{list-style:none; margin:0; padding:0}
.mrow{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--rule)}
.mrow:last-child{border-bottom:0}
.minfo{display:grid; gap:1px; min-width:0}
.minfo b{overflow-wrap:anywhere}
.minfo .sub{margin:0}
.arena{background:var(--panel); border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow); padding:18px; display:grid; gap:18px; min-width:0}
.arena-head{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; align-items:end}
.ar-side{display:grid; gap:2px; min-width:0}
.ar-side.r{text-align:right}
.ar-side b{font-family:var(--f-disp); font-size:19px; line-height:1.2; overflow-wrap:anywhere}
.ar-side .num{font-size:12px; color:var(--ink-2)}
.ar-side.flag .num{color:var(--bad)}
.ar-clock{font-family:var(--f-mono); font-weight:600; font-size:28px; line-height:1; text-align:center; min-width:3ch}
.rope{position:relative; height:76px; border-radius:8px; border:1px solid var(--rule-2); overflow:hidden;
  background:linear-gradient(90deg,var(--signal-soft) 0 50%,color-mix(in srgb,var(--s1) 16%,var(--panel)) 50% 100%)}
.rope::before{content:""; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1px; background:var(--ink-3); opacity:.55}
.rope .goal{position:absolute; top:0; bottom:0; width:7%}
.rope .goal.l{left:0; border-right:2px solid var(--signal); background:color-mix(in srgb,var(--signal) 18%,transparent)}
.rope .goal.r{right:0; border-left:2px solid var(--s1); background:color-mix(in srgb,var(--s1) 22%,transparent)}
.rope .mid{position:absolute; left:50%; top:10px; bottom:10px; border-left:1px dashed var(--ink-3)}
.knot{position:absolute; top:50%; left:50%; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; background:var(--ink); border:3px solid var(--panel); box-shadow:0 0 0 2px var(--ink); transition:left .18s ease-out}
.ar-mid{display:grid; justify-items:center; gap:12px; text-align:center}
.ar-result{background:var(--panel-2); border-radius:8px; padding:12px 14px}
.ar-result h3{font-size:20px; margin-bottom:4px}
.ar-result p{margin:0; font-size:14px; color:var(--ink-2)}
.ar-edge{display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--ink-3); font-family:var(--f-disp); font-weight:600; letter-spacing:.09em; text-transform:uppercase; margin-top:-10px}
@media (prefers-reduced-motion:reduce){ .knot{transition:none} }
@media (max-width:420px){ .ar-side b{font-size:16px} .arena{padding:14px} }
@media (max-width:480px){ .col-date{display:none} }

/* self-hosted additions: operator strip and settings */
:root{color-scheme:light}
[hidden]:not([hidden=until-found i]){display:none!important}
.acct{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:14px; padding:10px 12px; background:var(--panel); border:1px solid var(--rule); border-radius:10px; font-size:13px; color:var(--ink-2)}
.acct .acct-in{width:min(190px,100%); flex:0 1 190px; font-family:var(--f-mono); text-transform:uppercase}
.acct .hint-note{flex:1 1 100%; margin:0}
.acct b{color:var(--ink)}
#opKeyIn,#opCall{font-family:var(--f-mono)}
.btn:disabled{opacity:.5; cursor:default}
.btn:disabled:hover{border-color:var(--rule-2)}
#setOperator .hint-note{margin:6px 0 10px}
.acct .acct-at{font-size:15px; color:var(--ink-3); margin-right:-6px}
.acct .acct-in{text-transform:none}
.acct-err{color:var(--bad)}
.keycard{flex:1 1 100%; display:grid; gap:8px; padding:11px 12px; background:var(--signal-soft); border:1px solid var(--signal); border-radius:8px; color:var(--ink); min-width:0}
.keycard .hint-note{margin:0; color:var(--ink-2)}
.keybox{font-family:var(--f-mono); font-size:12px; width:100%; min-width:0; flex:1 1 220px}
.keyrow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex:1 1 100%; min-width:0}
#opAdopt .keycard,#opKeyCard .keycard{margin-bottom:12px}
#opKeyReveal{margin:8px 0 0}

/* typing tutor. Finger hues are validated (server/test/tutor.test.js): at least 4.5:1 text on every fill and a minimum
   pairwise distance under normal, protan, deutan and tritan vision. Shape, not colour alone, marks the states. */
:root{
  --fg-index:#005FC5; --fg-index-ink:#ffffff; --fg-middle:#E67008; --fg-middle-ink:#16150f;
  --fg-ring:#CB80B9; --fg-ring-ink:#16150f; --fg-pinky:#10B16D; --fg-pinky-ink:#16150f;
  --fg-thumb:#b9b4a6; --fg-thumb-ink:#16150f;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fg-index:#409DF7; --fg-index-ink:#14130f; --fg-middle:#EC8C49; --fg-middle-ink:#14130f;
    --fg-ring:#CA8FC9; --fg-ring-ink:#14130f; --fg-pinky:#40E6B4; --fg-pinky-ink:#14130f;
    --fg-thumb:#5a564c; --fg-thumb-ink:#f1efe8;
  }
}
:root[data-theme="dark"]{
  --fg-index:#409DF7; --fg-index-ink:#14130f; --fg-middle:#EC8C49; --fg-middle-ink:#14130f;
  --fg-ring:#CA8FC9; --fg-ring-ink:#14130f; --fg-pinky:#40E6B4; --fg-pinky-ink:#14130f;
  --fg-thumb:#5a564c; --fg-thumb-ink:#f1efe8;
}
[data-hue="index"]{--hue:var(--fg-index); --hue-ink:var(--fg-index-ink)}
[data-hue="middle"]{--hue:var(--fg-middle); --hue-ink:var(--fg-middle-ink)}
[data-hue="ring"]{--hue:var(--fg-ring); --hue-ink:var(--fg-ring-ink)}
[data-hue="pinky"]{--hue:var(--fg-pinky); --hue-ink:var(--fg-pinky-ink)}
[data-hue="thumb"]{--hue:var(--fg-thumb); --hue-ink:var(--fg-thumb-ink)}

.tutor{margin-top:14px; background:var(--panel); border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow); padding:12px 14px; min-width:0}
.tutor-head{display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap}
.tutor-note{font-size:12px; color:var(--ink-3); margin:8px 0 0}
.kbd{display:grid; gap:4px; margin-top:12px; font-size:clamp(8px,2.6vw,13px); user-select:none; -webkit-user-select:none}
.kbd-row{display:flex; gap:4px; min-width:0}
.kbd-gap{flex:var(--w,1) 1 0; min-width:0}
.key{position:relative; flex:var(--w,1) 1 0; min-width:0; height:clamp(26px,7.2vw,40px); border:1px solid var(--rule-2); border-radius:5px;
  background:var(--panel-2); color:var(--ink-2); display:grid; place-items:center; font-family:var(--f-mono); font-weight:500; line-height:1;
  overflow:hidden}
.key .lb{max-width:100%; overflow:hidden; text-overflow:clip; white-space:nowrap}
.key .sh{position:absolute; top:2px; left:3px; font-size:.72em; font-style:normal; color:var(--ink-3)}
/* the finger zone: the same stripe on every key, so it says nothing about which key is the target */
.key::before,.pad::before{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--hue)}
.pad::before{top:0; bottom:auto}
/* the highlight fades IN with the glyph (same .12s) but goes out at once: no afterglow of an old target while the next tone plays */
.key.target{background:var(--hue); color:var(--hue-ink); border-color:var(--ink); outline:3px solid var(--ink); outline-offset:-3px; font-weight:700; transition:background .12s, color .12s}
.key.target .sh{color:inherit}
/* the key you pressed: a border style and a mark as well as a colour, so right and wrong differ without colour */
.key.p-ok::after,.key.p-bad::after,.key.p-n::after{content:""; position:absolute; inset:0; border-radius:4px; display:grid; place-items:center; font-size:1.5em; font-weight:700}
.key.p-ok::after{content:"\2713"; border:3px solid var(--good); color:var(--good); background:color-mix(in srgb,var(--good) 20%,transparent)}
.key.p-bad::after{content:"\2715"; border:3px dashed var(--bad); color:var(--bad); background:color-mix(in srgb,var(--bad) 20%,transparent)}
.key.p-n::after{border:3px dotted var(--ink-2)}

.hands{display:flex; justify-content:center; gap:clamp(8px,4vw,40px); margin-top:10px; align-items:flex-end}
.hand{display:flex; gap:4px; align-items:flex-end; flex:1 1 0; max-width:330px; min-width:0}
.pad{position:relative; flex:1 1 0; min-width:0; height:var(--ph,56px); border:1px solid var(--rule-2); border-radius:999px 999px 7px 7px;
  background:var(--panel-2); color:var(--ink-3); display:grid; align-items:end; justify-items:center; padding-bottom:5px; overflow:hidden;
  font-family:var(--f-disp); font-weight:600; font-size:clamp(7px,2.2vw,11px); letter-spacing:.03em; text-transform:uppercase}
.pad[data-hue="pinky"]{--ph:44px} .pad[data-hue="ring"]{--ph:58px} .pad[data-hue="middle"]{--ph:68px} .pad[data-hue="index"]{--ph:60px} .pad[data-hue="thumb"]{--ph:38px}
.pad.lit{background:var(--hue); color:var(--hue-ink); border-color:var(--ink); outline:3px solid var(--ink); outline-offset:-3px; transition:background .12s, color .12s}
.pad.pp-ok{box-shadow:inset 0 0 0 3px var(--good)} .pad.pp-bad{box-shadow:inset 0 0 0 3px var(--bad)} .pad.pp-n{box-shadow:inset 0 0 0 3px var(--ink-2)}
.pad.pp-ok::after,.pad.pp-bad::after{position:absolute; top:6px; font-size:12px; font-weight:700}
.pad.pp-ok::after{content:"\2713"; color:var(--good)} .pad.pp-bad::after{content:"\2715"; color:var(--bad)}
.kbd-legend{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:10px; font-size:11px; color:var(--ink-3)}
.kbd-legend .lg{display:inline-flex; align-items:center; gap:6px}
.kbd-legend .sw{width:12px; height:12px; border-radius:3px; background:var(--hue); border:1px solid var(--rule-2)}
@media (max-width:480px){ .key .sh{display:none} .tutor{padding:10px} .kbd{gap:3px} .kbd-row{gap:3px} .hand{gap:3px} .pad{font-size:7px; letter-spacing:0; text-transform:none; padding-bottom:4px} }
@media (prefers-reduced-motion:reduce){ .key.target,.pad.lit{transition:none} }