/* Mix Chops: shell, exercises and library. Colour tokens live in :root. */
/* ═══════════ Mix Chops — rackmount console shell ═══════════ */
:root{
  --bg:#0c0a08; --panel:#13100c; --module:#15120e; --screen:#0d0b09;
  --ink:#eef2f0; --ink-dim:#a3aaa9; --ink-faint:#808685;  /* worst case on any panel: 15.9 / 7.6 / 4.85 : 1 */
  --line:rgba(190,165,130,.13); --line-soft:rgba(190,165,130,.07);
  /* accent: the one colour that is Mix Chops' own. Gold, red and the warm
     black are shared with danmurtagh.com and StemConsole. */
  --signal:#2dd4bf; --signal-rgb:45,212,191; --signal-dim:#178a7d; --on-signal:#04130f; --signal-deep:#0c1614;
  /* meaning: signal = your band / correct, peak = the problem / wrong, level = what's left / streak */
  --level:#d8ad4e; --level-rgb:216,173,78; --on-level:#1a1405;
  --peak:#ff5d5d; --peak-rgb:255,93,93; --on-peak:#1a0806;
  --rail-h:74px; --rail-b:44px;
  --metal:linear-gradient(180deg,#1c1813 0%,#151109 42%,#100d09 60%,#17130d 100%);
}
*{box-sizing:border-box}
html,body{height:100%}
body.app{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  overflow-x:hidden;
  padding-top:var(--rail-h); padding-bottom:var(--rail-b);
}
.led{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal);display:inline-block}
.led--pulse{animation:pulse 2.4s infinite}
.sq{width:8px;height:8px;background:var(--on-signal)}
@keyframes pulse{0%,90%,100%{opacity:1}94%{opacity:.25}}
@keyframes vu{from{transform:scaleY(.06)}to{transform:scaleY(1)}}

/* atmosphere */
.grain,.vign{position:fixed;inset:0;pointer-events:none;z-index:60}
.grain{opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.vign{background:radial-gradient(120% 90% at 50% 38%,transparent 38%,rgba(0,0,0,.55) 100%)}

/* ── rails ── */
.rail{position:fixed;left:0;right:0;z-index:50;background:var(--metal);
  display:flex;align-items:center;
  box-shadow:0 1px 0 rgba(255,235,200,.05) inset, 0 -1px 0 rgba(0,0,0,.6) inset;}
.rail--top{top:0;height:var(--rail-h);border-bottom:1px solid var(--line);
  animation:railDown .55s cubic-bezier(.2,.8,.2,1) both}
.rail--btm{bottom:0;height:var(--rail-b);border-top:1px solid var(--line);
  padding:0 clamp(12px,3vw,26px);justify-content:space-between;
  animation:railUp .55s .08s cubic-bezier(.2,.8,.2,1) both}
@keyframes railDown{from{transform:translateY(-100%)}to{transform:none}}
@keyframes railUp{from{transform:translateY(100%)}to{transform:none}}

/* rack ears + screws */
.ear{width:34px;align-self:stretch;display:flex;flex-direction:column;
  justify-content:space-around;align-items:center;padding:10px 0;
  background:linear-gradient(180deg,#221d16,#14100b);flex:none}
.ear--l{border-right:1px solid var(--line)}
.ear--r{border-left:1px solid var(--line)}
.ear i{width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#5b5145,#241f18 62%,#0e0b08);
  box-shadow:0 1px 1px rgba(0,0,0,.8),0 0 0 1px rgba(255,235,200,.05);position:relative}
.ear i::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:1.5px;
  background:rgba(0,0,0,.65);transform:rotate(32deg)}

.rail__in{flex:1;min-width:0;display:flex;align-items:center;gap:clamp(12px,2.6vw,30px);
  padding:0 clamp(12px,2.4vw,24px)}

/* brand */
.brand{display:flex;flex-direction:column;gap:3px;text-decoration:none;flex:none}
.brand__mark{font-family:'Saira Condensed',sans-serif;font-weight:800;
  font-size:clamp(20px,2.5vw,27px);letter-spacing:.055em;line-height:1;
  text-transform:uppercase;color:var(--ink)}
.brand__mark em{font-style:normal;color:var(--signal);
  text-shadow:0 0 16px rgba(var(--signal-rgb),.45)}
.brand__unit{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}

/* discipline tabs */
.disc{display:flex;gap:6px;flex:none}
.disc__t{font-family:'Space Mono',monospace;font-weight:700;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;cursor:pointer;
  border:1px solid var(--line);background:#0e0b07;color:var(--ink-faint);
  position:relative;transition:.18s}
.disc__t.is-on{color:var(--signal);border-color:rgba(var(--signal-rgb),.45);
  background:rgba(var(--signal-rgb),.08);box-shadow:0 0 18px -6px rgba(var(--signal-rgb),.6)}
.disc__t[disabled]{cursor:not-allowed;color:var(--ink-faint)}
.disc__t small{display:block;font-size:8px;letter-spacing:.16em;margin-top:2px}

/* meters */
.meters{margin-left:auto;display:flex;align-items:center;gap:clamp(8px,1.6vw,18px);flex:none}
.meter{text-align:right;min-width:52px}
.meter u{display:block;font-family:'Space Mono',monospace;font-size:9.5px;
  letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;text-decoration:none}
.meter b{display:block;font-family:'Space Mono',monospace;font-weight:700;font-size:16px;
  color:var(--signal);margin-top:3px;text-shadow:0 0 14px rgba(var(--signal-rgb),.5);
  font-variant-numeric:tabular-nums}
.meter.gold b{color:var(--level);text-shadow:0 0 14px rgba(var(--level-rgb),.5)}
.meter.rank{min-width:auto;text-align:right}
.meter.rank b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);text-shadow:none}
.pwr{display:flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;
  font-size:9.5px;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase}
.pwr i{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);
  animation:boot 1.1s .2s steps(1) both}
@keyframes boot{0%,18%{background:var(--ink-faint);box-shadow:none}
  22%,32%{background:var(--peak);box-shadow:0 0 10px var(--peak)}
  36%{background:var(--ink-faint);box-shadow:none}
  100%{background:var(--signal);box-shadow:0 0 10px var(--signal)}}

/* spectrum ribbon */
.ribbon{position:absolute;left:0;right:0;bottom:-1px;height:3px;display:flex;
  gap:1px;padding:0 34px;opacity:.5;pointer-events:none}
.ribbon i{flex:1;background:var(--signal-dim);transform-origin:bottom;
  transform:scaleY(.14);transition:transform .2s}
body.live .ribbon{opacity:1}
body.live .ribbon i{animation:vu 1s ease-in-out infinite alternate}

/* the bottom rail carries the key legend now */
.eqt__hint{display:none;font-size:10.5px}

/* ── stage ── */
.stage{min-height:calc(100vh - var(--rail-h) - var(--rail-b));
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(20px,4vw,52px) clamp(12px,3vw,32px);
  background:
    radial-gradient(90% 60% at 50% 0%,rgba(var(--signal-rgb),.045),transparent 62%),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(190,165,130,.022) 39px 40px);}
.stage__in{width:100%;max-width:860px;
  animation:rise .6s .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.994)}to{opacity:1;transform:none}}

/* bottom rail */
.keys,.sig{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.keys b{color:var(--ink-dim);font-weight:400;border:1px solid var(--line);
  padding:2px 6px;margin:0 3px}
.sig{color:var(--signal)}

@media (max-width:860px){
  :root{--rail-h:64px}
  .disc,.meter.rank{display:none}
  .brand__unit{display:none}
  .ear{width:20px}
  .ribbon{padding:0 20px}
}
@media (max-width:560px){
  .meter{min-width:42px}
  .meter b{font-size:14px}
  /* keyboard shortcuts mean nothing on a phone and wrap the rail */
  .keys{display:none}
  .rail--btm{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .rail--top,.rail--btm,.stage__in{animation:none}
  .pwr i{animation:none;background:var(--signal);box-shadow:0 0 10px var(--signal)}
  body.live .ribbon i{animation:none;transform:scaleY(.5)}
}


/* ═══════════ trainer module (ported) ═══════════ */
/* ── EQ Ear Trainer module ── */
.eqt{max-width:820px;margin:0 auto;background:var(--module);border:1px solid var(--line);position:relative}
.eqt::before{content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-top:2px solid var(--signal);border-left:2px solid var(--signal);z-index:3}
.eqt__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:#0a0c0f}
.eqt__id{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--signal);text-transform:uppercase}
.eqt__nm{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase}
.eqt__io{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:10.5px;color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase}

.eqt__stats{display:flex;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
.eqt__stat{flex:1;min-width:90px;padding:10px 14px;border-right:1px solid var(--line-soft)}
.eqt__stat:last-child{border-right:none}
.eqt__stat u{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase;text-decoration:none}
.eqt__stat b{display:block;font-family:'Space Mono',monospace;font-size:15px;color:var(--signal);margin-top:4px;font-weight:700}
.eqt__stat.gold b{color:var(--level)}

.eqt__screen{position:relative;background:var(--screen);padding:clamp(20px,3.5vw,34px);border-bottom:1px solid var(--line);overflow:hidden}
.eqt__screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 50%,rgba(0,0,0,.05) 50%);background-size:100% 3px;opacity:.5}
.eqt__lvl{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal)}
.eqt__prompt{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:800;font-size:clamp(19px,3vw,27px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;color:var(--ink);margin:10px 0 4px}
.eqt__sub{font-size:14px;color:var(--ink-dim);max-width:56ch}

/* cosmetic VU strip (never shows the answer — same motion whatever the band) */
.eqt__vu{height:38px;display:flex;align-items:flex-end;gap:2px;margin:20px 0 4px}
.eqt__vu i{flex:1;height:100%;transform-origin:bottom;border-radius:1px;background:var(--signal);opacity:.55;transform:scaleY(.06);min-width:1px}
.eqt.playing .eqt__vu i{animation:vu 1.1s ease-in-out infinite alternate}
.eqt__vuscale{display:flex;justify-content:space-between;font-family:'Space Mono',monospace;font-size:10px;color:var(--ink-faint);letter-spacing:.05em;margin-bottom:2px}

.eqt__transport{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;position:relative;z-index:2}
.tbtn{display:inline-flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding:13px 22px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-dim);transition:.2s}
.tbtn:hover{border-color:var(--signal);color:var(--signal)}
.tbtn--main{background:var(--signal);border-color:var(--signal);color:var(--on-signal);clip-path:polygon(0 0,100% 0,100% 70%,calc(100% - 10px) 100%,0 100%)}
.tbtn--main:hover{color:var(--on-signal);box-shadow:0 0 0 1px var(--signal),0 10px 34px -12px rgba(var(--signal-rgb),.6)}
.tbtn--ab.in{border-color:var(--signal);color:var(--signal);background:rgba(var(--signal-rgb),.08)}
.tbtn--ab.out{border-color:var(--level);color:var(--level);background:rgba(var(--level-rgb),.07)}
.tbtn[disabled]{color:var(--ink-faint);border-color:var(--line-soft);pointer-events:none}
.tbtn--main[disabled]{background:transparent;border-color:var(--line);color:var(--ink-faint)}
.eqt__hint{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.08em;color:var(--ink-faint);text-transform:uppercase;margin-top:14px}
.eqt__hint b{color:var(--ink-dim);font-weight:400;border:1px solid var(--line);padding:1px 5px}

.eqt__answers{padding:clamp(18px,3vw,26px);display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px;border-bottom:1px solid var(--line)}
.fbtn{font-family:'Space Mono',monospace;font-weight:700;font-size:14.5px;letter-spacing:.02em;padding:16px 6px;cursor:pointer;border:1px solid var(--line);background:var(--screen);color:var(--ink);transition:.15s;text-align:center}
.fbtn small{display:block;font-size:10px;font-weight:400;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase;margin-top:4px}
.fbtn:hover{border-color:var(--signal);color:var(--signal)}
.fbtn[disabled]{pointer-events:none}
.fbtn.dim{color:var(--ink-faint);border-color:var(--line-soft)}
.fbtn.dim small{color:var(--ink-faint)}
.fbtn--none{border-style:dashed;color:var(--ink-dim)}
.fbtn.hit{border-color:var(--signal);background:rgba(var(--signal-rgb),.14);color:var(--signal)}
.fbtn.miss{border-color:var(--peak);background:rgba(var(--peak-rgb),.1);color:var(--peak)}

.eqt__fb{padding:clamp(18px,3vw,26px);border-bottom:1px solid var(--line);display:none}
.eqt__fb.show{display:block}
.eqt__verdict{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:-.01em}
.eqt__verdict.good{color:var(--signal)}
.eqt__verdict.bad{color:var(--peak)}
.eqt__bandstrip{display:flex;gap:3px;margin:16px 0 10px}
.eqt__bandstrip span{flex:1;padding:8px 2px;text-align:center;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.02em;color:var(--ink-faint);border:1px solid var(--line-soft);background:var(--screen)}
.eqt__bandstrip span.ans{border-color:var(--signal);color:var(--signal);background:rgba(var(--signal-rgb),.12);box-shadow:0 0 10px rgba(var(--signal-rgb),.25)}
.eqt__bandstrip span.picked{border-color:var(--peak);color:var(--peak);background:rgba(var(--peak-rgb),.08)}
.eqt__blurb{font-size:14px;color:var(--ink-dim);line-height:1.6;max-width:62ch}
.eqt__blurb b{color:var(--ink);font-weight:600}

.eqt__result{padding:clamp(22px,4vw,38px);text-align:center;display:none;border-bottom:1px solid var(--line)}
.eqt__result.show{display:block}
.eqt__result .big{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:900;font-size:clamp(34px,6vw,54px);line-height:1;color:var(--ink)}
.eqt__result .big i{font-style:normal;color:var(--signal)}
.eqt__result p{color:var(--ink-dim);font-size:14.5px;max-width:48ch;margin:12px auto 20px}

.eqt__levels{display:flex;flex-wrap:wrap;gap:7px;padding:16px;background:var(--panel)}
.lchip{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 11px;border:1px solid var(--line);color:var(--ink-dim);cursor:pointer;background:transparent;transition:.15s}
.lchip:hover{border-color:var(--signal);color:var(--signal)}
.lchip.on{border-color:var(--signal);color:var(--signal);background:rgba(var(--signal-rgb),.08)}
.lchip.done::after{content:" ✓";color:var(--signal)}
.lchip.lock{opacity:.7}
.lchip.lock::before{content:"🔒 ";font-size:9px}

/* email gate */
.eqt__gate{display:none;padding:clamp(24px,4vw,40px);border-bottom:1px solid var(--line);background:linear-gradient(120deg,var(--signal-deep),var(--module))}
.eqt__gate.show{display:block}
.eqt__gate h3{font-family:'Archivo Expanded','Archivo',sans-serif;font-weight:800;font-size:clamp(19px,2.6vw,26px);text-transform:uppercase;margin:8px 0 10px;color:var(--ink)}
.eqt__gate p{color:var(--ink-dim);font-size:14.5px;max-width:56ch;margin-bottom:18px}
.eqt__gate form{display:flex;gap:10px;flex-wrap:wrap;max-width:460px}
.eqt__gate input[type="email"]{flex:1;min-width:200px;padding:14px 16px;background:var(--screen);border:1px solid var(--line);color:var(--ink);font-family:'Archivo',sans-serif;font-size:15px}
.eqt__gate input[type="email"]:focus{outline:none;border-color:var(--signal)}
.eqt__gate .gmsg{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.04em;margin-top:12px;color:var(--ink-faint)}
.eqt__gate .gmsg.err{color:var(--peak)}
.eqt__gate .gmsg.ok{color:var(--signal)}

@media(max-width:640px){
  .eqt__answers{grid-template-columns:repeat(3,1fr)}
  .eqt__bandstrip span{font-size:8.5px;padding:7px 1px}
  .eqt__stat{min-width:72px;padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){.eqt.playing .eqt__vu i{animation:none;transform:scaleY(.5)}}

/* ── Help me hear it ── */
.eqt__help{display:none;margin-top:18px;padding:18px;border:1px solid var(--line);background:#0a0f0e;position:relative}
.eqt__help.show{display:block}
.eqt__help::before{content:"";position:absolute;top:-1px;left:-1px;width:12px;height:12px;border-top:2px solid var(--level);border-left:2px solid var(--level)}
.hlp__ey{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.16em;color:var(--level);text-transform:uppercase}
.eqt__help .hlp__cue{font-size:14.5px;color:var(--ink-dim);max-width:60ch;margin:10px 0 16px;line-height:1.55}
.eqt__help .hlp__cue b{color:var(--ink);font-weight:600}
.hlp__row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hbtn{font-family:'Space Mono',monospace;font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:11px 16px;cursor:pointer;border:1px solid var(--line);background:var(--screen);color:var(--ink-dim);transition:.15s}
.hbtn:hover{border-color:var(--signal);color:var(--signal)}
.hbtn.on{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.hbtn.yours.on{background:var(--peak,#e06c5a);border-color:var(--peak,#e06c5a);color:var(--on-peak)}
.hbtn--gold.on{background:var(--level);border-color:var(--level);color:var(--on-level)}
.eqt__help .hlp__hint{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--ink-faint);text-transform:uppercase;margin-top:12px}
.hlp__drill{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.eqt__help .hlp__dq{font-size:14.5px;color:var(--ink);margin-bottom:12px}
.eqt__help .hlp__dv{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;margin-top:12px}
.hlp__dv.ok{color:var(--signal)}
.hlp__dv.no{color:var(--peak,#e06c5a)}

/* ═══════════ mode tabs + Restore ═══════════ */
[hidden]{display:none!important}
.rst__graph{margin:18px 0 8px;border:1px solid var(--line);background:#080706;position:relative;z-index:2}
.rst__graph svg{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}
.rst__graph.locked svg{cursor:default}
.rg-line{stroke:rgba(190,165,130,.07);stroke-width:1}
.rg-zero{stroke:rgba(190,165,130,.2);stroke-width:1}
.rg-lab{fill:var(--ink-faint);font-family:'Space Mono',monospace}
.rc{fill:none;stroke-width:2.5;stroke-linejoin:round}
.rc--user{stroke:var(--signal)}
.rc--app{stroke:var(--peak);stroke-dasharray:6 5;opacity:.85}
.rc--res{stroke:var(--level);stroke-width:2;opacity:.9}
.rnode{fill:var(--signal);stroke:var(--on-signal);stroke-width:3;cursor:grab;filter:drop-shadow(0 0 8px rgba(var(--signal-rgb),.6))}
.rnode:focus{outline:none;stroke:var(--ink)}
.rst__graph.locked .rnode{cursor:default;opacity:.8}
.rst__readout{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);position:relative;z-index:2}
.rst__readout b{color:var(--signal);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.rst__readout i{font-style:normal}
.rst__legend{margin-left:auto;display:flex;gap:12px}
.lg{font-style:normal}
.lg::before{content:"";display:inline-block;width:14px;height:0;border-top:2.5px solid;vertical-align:middle;margin-right:5px}
.lg--app{color:var(--peak)} .lg--app::before{border-top-style:dashed}
.lg--user{color:var(--signal)}
.lg--res{color:var(--level)}
.rst__listen{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;position:relative;z-index:2}
.rst__listen span{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);align-self:center;margin-right:4px}
.rst__act{padding:clamp(16px,3vw,24px);border-bottom:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rst__verdict{flex-basis:100%;margin-top:6px}
.rst__verdict .eqt__verdict{display:flex;align-items:baseline;gap:12px}
.rst__verdict .eqt__verdict i{font-style:normal;font-family:'Space Mono',monospace;font-size:13px}
.rst__verdict p{color:var(--ink-dim);font-size:14.5px;line-height:1.55;max-width:62ch;margin:8px 0 0}
.rst__verdict p b{color:var(--ink)}
.eqt__verdict.mid{color:var(--level)}
.rg-mark{stroke:var(--signal);stroke-width:1.5;stroke-dasharray:3 4;opacity:.7}
.rnode.sweep{fill:var(--level);filter:drop-shadow(0 0 8px rgba(var(--level-rgb),.65))}
.hn-stage{display:flex;gap:6px;margin:0 0 4px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.hn-stage span{padding:4px 8px;border:1px solid var(--line);color:var(--ink-faint)}
.hn-stage span.on{color:var(--level);border-color:rgba(var(--level-rgb),.5)}
.hn-stage span.ok{color:var(--signal);border-color:rgba(var(--signal-rgb),.4)}

/* ═══════════ library ═══════════ */
.stage__in--wide{max-width:1080px}
.lib__head{margin:4px 0 30px}
.lib__ey{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal)}
.lib__title{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:clamp(34px,5.4vw,58px);line-height:.95;
  text-transform:uppercase;letter-spacing:.01em;margin:10px 0 12px}
.lib__title em{font-style:normal;color:var(--signal)}
.lib__sub{color:var(--ink-dim);font-size:15.5px;max-width:58ch;line-height:1.55;margin:0}
.xgroup{margin:0 0 30px}
.xgroup__head{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:14px}
.xgroup__head h2{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:.06em;margin:0}
.xgroup__head p{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.xgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.xcard{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 18px 14px;min-height:190px;
  background:var(--module);border:1px solid var(--line);color:var(--ink);text-decoration:none;
  transition:border-color .18s,transform .18s,box-shadow .18s;animation:rise .5s calc(.25s + var(--d,0) * 45ms) cubic-bezier(.2,.8,.2,1) both}
.xcard::before{content:"";position:absolute;top:-1px;left:-1px;width:12px;height:12px;border-top:2px solid var(--signal);border-left:2px solid var(--signal)}
a.xcard:hover,a.xcard:focus-visible{border-color:rgba(var(--signal-rgb),.5);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(var(--signal-rgb),.45);outline:none}
.xcard__code{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal)}
.xcard__name{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.02em;margin:0}
.xcard__blurb{color:var(--ink-dim);font-size:14px;line-height:1.5;margin:0;flex:1}
.xcard__bar{height:3px;background:var(--line-soft)}
.xcard__bar i{display:block;height:100%;background:var(--signal);box-shadow:0 0 8px rgba(var(--signal-rgb),.5)}
.xcard__foot{display:flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.xcard__go{margin-left:auto;color:var(--signal);font-weight:700}
.pips{display:inline-flex;gap:3px}
.pips i{width:6px;height:6px;border:1px solid var(--ink-faint)}
.pips i.on{background:var(--level);border-color:var(--level)}
.xcard--soon{border-style:dashed}
.xcard--soon::before{border-color:var(--ink-faint)}
.xcard--soon .xcard__code{color:var(--ink-faint)}
.xcard__soon{margin-left:auto}

/* ═══════════ exercise page header ═══════════ */
.crumb{display:flex;align-items:center;gap:14px;max-width:820px;margin:0 auto 14px;font-family:'Space Mono',monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.crumb__back{color:var(--ink-dim);text-decoration:none;border:1px solid var(--line);padding:7px 11px;transition:.15s}
.crumb__back:hover{color:var(--signal);border-color:rgba(var(--signal-rgb),.45)}
.crumb__here{color:var(--ink-faint)}
.crumb__here b{color:var(--ink);font-weight:700}
.xcard--soon .xcard__name{color:var(--ink-dim)}
.xcard--soon .xcard__blurb{color:var(--ink-faint)}

/* graph labels live in SVG units, so they shrink with the graph: size them up on phones */
.rg-lab{font-size:13px}
@media (max-width:560px){.rg-lab{font-size:24px}}
.lg{white-space:nowrap}
@media (max-width:560px){.rst__legend{margin-left:0;flex-basis:100%;flex-wrap:wrap;gap:6px 14px}}


/* ═══════════ daily banner + your ears ═══════════ */
.daily{position:relative;display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:end;margin:0 0 26px;padding:22px 22px 20px;
  background:linear-gradient(120deg,var(--signal-deep),var(--module) 70%);border:1px solid rgba(var(--signal-rgb),.35);color:var(--ink);
  text-decoration:none;transition:border-color .18s,box-shadow .18s;animation:rise .5s .2s cubic-bezier(.2,.8,.2,1) both}
.daily::before{content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-top:2px solid var(--signal);border-left:2px solid var(--signal)}
.daily:hover,.daily:focus-visible{border-color:var(--signal);box-shadow:0 16px 36px -20px rgba(var(--signal-rgb),.6);outline:none}
.daily__code{grid-column:1/-1;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal)}
.daily__title{grid-column:1;font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:clamp(26px,3.6vw,36px);line-height:1;text-transform:uppercase}
.daily__sub{grid-column:1;color:var(--ink-dim);font-size:14.5px}
.daily__meta{grid-column:1;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px}
.daily__streak{color:var(--level);font-size:14px}
.daily__go{grid-column:2;grid-row:2/5;align-self:center;font-family:'Space Mono',monospace;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-signal);background:var(--signal);padding:12px 16px;white-space:nowrap}
@media (max-width:620px){.daily{grid-template-columns:1fr}.daily__go{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}}

.ears{margin:0 0 30px}
.ears__grid{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.eb{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 8px;background:var(--module);border:1px solid var(--line)}
.eb__val{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.eb__bar{width:10px;height:74px;background:var(--screen);border:1px solid var(--line-soft);display:flex;align-items:flex-end}
.eb__bar i{display:block;width:100%;background:var(--signal);box-shadow:0 0 8px rgba(var(--signal-rgb),.5)}
.eb__hz{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--ink-dim)}
.eb.is-thin .eb__bar i{background:repeating-linear-gradient(0deg,var(--ink-faint) 0 2px,transparent 2px 4px);box-shadow:none}
.eb.is-thin .eb__val{color:var(--ink-faint)}
.eb.is-weak{border-color:rgba(var(--peak-rgb),.5)}
.eb.is-weak .eb__bar i{background:var(--peak);box-shadow:0 0 8px rgba(var(--peak-rgb),.5)}
.eb.is-weak .eb__val{color:var(--peak)}
.eb.is-strong .eb__val{color:var(--signal)}
.ears__note{color:var(--ink-dim);font-size:14px;line-height:1.55;margin:12px 0 0;max-width:70ch}
.ears__note b{color:var(--ink)}
.ears__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ears__go{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--peak);
  border:1px solid rgba(var(--peak-rgb),.45);padding:9px 12px;text-decoration:none}
.ears__go:hover{background:rgba(var(--peak-rgb),.08)}
@media (max-width:560px){.ears__grid{gap:3px}.eb__bar{height:56px;width:8px}.eb__val{font-size:9.5px}.eb__hz{font-size:9.5px}}

/* ═══════════ navigation ═══════════ */
.mainnav{display:flex;gap:2px;flex:none}
.mainnav__a{font-family:'Space Mono',monospace;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;padding:8px 11px;border:1px solid transparent;transition:.15s}
.mainnav__a:hover{color:var(--ink);border-color:var(--line)}
.mainnav__a.is-on{color:var(--signal);border-color:rgba(var(--signal-rgb),.35);background:rgba(var(--signal-rgb),.06)}
a.meters{text-decoration:none;color:inherit;padding:4px 6px;border:1px solid transparent;transition:border-color .15s}
a.meters:hover,a.meters:focus-visible{border-color:var(--line);outline:none}
.menubtn{display:none;align-items:center;gap:8px;flex:none;font-family:'Space Mono',monospace;font-weight:700;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);background:#0e0b07;border:1px solid var(--line);padding:8px 10px;cursor:pointer}
.menubtn span{width:14px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.menubtn span::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor}
.menubtn:hover{color:var(--ink);border-color:var(--ink-faint)}
@media (max-width:1180px){.mainnav{display:none}.menubtn{display:inline-flex}}
@media (max-width:560px){.menubtn{padding:8px}.menubtn{font-size:0;gap:0}.menubtn span{margin:0}}

.drawer{position:fixed;inset:0;z-index:80}
.drawer__scrim{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);overflow:auto;background:var(--panel);
  border-left:1px solid var(--line);padding:14px 14px 30px;display:flex;flex-direction:column;gap:2px;animation:slideIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes slideIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-family:'Space Mono',monospace;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.drawer__x{background:none;border:1px solid var(--line);color:var(--ink-dim);font-size:22px;line-height:1;width:36px;height:36px;cursor:pointer}
.drawer__a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 12px;text-decoration:none;color:var(--ink);
  font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:21px;text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent}
.drawer__a small{font-family:'Space Mono',monospace;font-weight:400;font-size:10px;letter-spacing:.14em;color:var(--ink-faint)}
.drawer__a:hover,.drawer__a:focus-visible{border-color:var(--line);outline:none}
.drawer__a.is-on{color:var(--signal);border-color:rgba(var(--signal-rgb),.35)}
.drawer__a--ex{font-size:18px;padding:9px 12px}
.drawer__g{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin:14px 12px 2px}
body.drawer-open{overflow:hidden}

.toasts{position:fixed;top:calc(var(--rail-h) + 12px);right:12px;z-index:90;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:min(340px,calc(100vw - 24px))}
.toast{pointer-events:auto;display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--level);box-shadow:0 18px 40px -18px rgba(0,0,0,.9);animation:slideIn .3s cubic-bezier(.2,.8,.2,1);transition:opacity .4s,transform .4s}
.toast--rank{border-left-color:var(--signal)}
.toast__k{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--level)}
.toast--rank .toast__k{color:var(--signal)}
.toast b{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.03em}
.toast span:last-child:not(.toast__k){color:var(--ink-dim);font-size:13.5px}
.toast.out{opacity:0;transform:translateX(20px)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ═══════════ profile ═══════════ */
.me-rank{margin:4px 0 22px}
.me-rank__name{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:clamp(40px,6.4vw,70px);line-height:.95;text-transform:uppercase;margin:8px 0 6px;color:var(--ink)}
.me-rank__xp{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 12px}
.me-rank__xp b{color:var(--signal);font-size:18px}
.me-rank__bar{height:6px;background:var(--screen);border:1px solid var(--line)}
.me-rank__bar i{display:block;height:100%;background:var(--signal);box-shadow:0 0 10px rgba(var(--signal-rgb),.55)}
.me-ladder{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.me-ladder li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line-soft);font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--ink-faint)}
.me-ladder b{font-weight:700;text-transform:uppercase;color:var(--ink-dim)}
.me-ladder li.is-past b{color:var(--ink)}
.me-ladder li.is-now{border-color:rgba(var(--signal-rgb),.45)}
.me-ladder li.is-now b{color:var(--signal)}
@media (max-width:620px){.me-ladder{grid-template-columns:repeat(2,1fr)}}

.me-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 14px}
.me-tile{display:flex;flex-direction:column;gap:4px;padding:14px;background:var(--module);border:1px solid var(--line)}
.me-tile u{text-decoration:none;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.me-tile b{font-family:'Space Mono',monospace;font-size:24px;color:var(--signal);font-variant-numeric:tabular-nums}
.me-tile.gold b{color:var(--level)}
.me-tile span{color:var(--ink-dim);font-size:12.5px}
@media (max-width:820px){.me-tiles{grid-template-columns:repeat(2,1fr)}}

.me-share{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 28px}
.me-share span{color:var(--ink-faint);font-size:13px}
.me-link{color:var(--signal)}

.me-hist{margin:0 0 30px}
.me-hist__plot{position:relative;background:var(--module);border:1px solid var(--line);padding:12px 12px 6px}
.me-hist__plot svg{display:block;width:100%;height:auto}
.hg-line{stroke:var(--line);stroke-width:1}
.hg-lab{fill:var(--ink-faint);font-family:'Space Mono',monospace;font-size:11px}
.hg-val{fill:var(--ink);font-family:'Space Mono',monospace;font-size:11px;font-weight:700}
.hbar__hit{fill:transparent}
.hbar__fill{fill:var(--signal)}
.hbar__zero{stroke:var(--ink-faint);stroke-width:2}
.hbar:hover .hbar__fill,.hbar:focus .hbar__fill{fill:var(--ink)}
.hbar:focus{outline:none}
.hg-tip{position:absolute;top:6px;width:110px;text-align:center;padding:5px 6px;background:var(--bg);border:1px solid var(--line);
  font-family:'Space Mono',monospace;font-size:11px;color:var(--ink);pointer-events:none}

.me-ex{margin:0 0 30px}
.me-ex__list{display:flex;flex-direction:column;gap:6px}
.me-ex__row{display:grid;grid-template-columns:minmax(160px,1.2fr) 2fr auto;align-items:center;gap:14px;padding:12px 14px;background:var(--module);
  border:1px solid var(--line);color:var(--ink);text-decoration:none}
.me-ex__row:hover{border-color:rgba(var(--signal-rgb),.45)}
.me-ex__name{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:20px;text-transform:uppercase;display:flex;flex-direction:column}
.me-ex__name small{font-family:'Space Mono',monospace;font-weight:400;font-size:10px;letter-spacing:.14em;color:var(--signal)}
.me-ex__n{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
@media (max-width:560px){.me-ex__row{grid-template-columns:1fr auto}.me-ex__row .xcard__bar{grid-column:1/-1;grid-row:2}}

.me-badges{margin:0 0 30px}
.me-badges__g{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin:16px 0 8px;font-weight:400}
.me-badges__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.badge{display:flex;flex-direction:column;gap:4px;padding:14px;background:var(--module);border:1px dashed var(--line)}
.badge__icon{font-size:20px;color:var(--ink-faint);line-height:1}
.badge b{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-dim)}
.badge__desc{color:var(--ink-faint);font-size:13px;line-height:1.4;flex:1}
.badge__prog{height:3px;background:var(--line-soft);margin-top:4px}
.badge__prog i{display:block;height:100%;background:var(--ink-faint)}
.badge__state{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.badge.is-earned{border-style:solid;border-color:rgba(var(--level-rgb),.45);background:linear-gradient(160deg,rgba(var(--level-rgb),.07),var(--module) 60%)}
.badge.is-earned .badge__icon{color:var(--level)}
.badge.is-earned b{color:var(--ink)}
.badge.is-earned .badge__desc{color:var(--ink-dim)}
.badge.is-earned .badge__state{color:var(--level)}