/* Mix Chops — one stylesheet for every page. Tokens live in :root.
   The look: a control room at night. Warm blacks and brass hairlines, amber light from the
   meters, and one teal signal that always means "you": your band, your answer, your next step. */
/* ═══════════ tokens ═══════════ */
:root{
  /* ground: warm blacks. Text contrast on the lightest (--raised, the reference for every text colour):
     ink 14.7, dim 7.8, faint 4.7 : 1 */
  --bg:#0a0806; --module:#1a1511; --raised:#221c16; --screen:#0b0907;
  --ink:#f4efe7; --ink-dim:#b8afa3; --ink-faint:#8f867a;
  --line:rgba(255,226,186,.11); --line-soft:rgba(255,226,186,.065); --line-strong:rgba(255,226,186,.2);
  /* signal: the one colour that is Mix Chops' own. You, your move, correct, the next step */
  --signal:#2dd4bf; --signal-rgb:45,212,191; --signal-dim:#178a7d; --on-signal:#04130f;
  /* the room's light: VU backlight and lamps. Glows, spectra and eyebrows, never an answer */
  --amber:#f0a24a; --amber-rgb:240,162,74;
  /* meaning: level = streak / what's left / Pro, peak = the problem / wrong */
  --level:#d8ad4e; --level-rgb:216,173,78; --on-level:#1a1405;
  --peak:#ff6b6b; --peak-rgb:255,107,107; --on-peak:#1a0806;
  --brass:linear-gradient(135deg,#f3d58f 0%,#d8ad4e 38%,#a97c2c 70%,#e8c77a 100%);
  --r:12px; --r-lg:18px; --r-xl:24px;
  --rail-h:68px; --rail-b:40px;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --surface:linear-gradient(180deg,rgba(255,238,215,.055),rgba(255,238,215,.018) 42%,rgba(255,238,215,.01));
  --lift:inset 0 1px 0 rgba(255,240,222,.07),0 24px 50px -30px rgba(0,0,0,.9);
  --wrap:1200px;
}
@media (max-width:860px){:root{--rail-h:60px}}

/* ═══════════ base ═══════════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--rail-h) + 16px)}
html,body{min-height:100%}
body.app{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.55 'Archivo',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-top:var(--rail-h); padding-bottom:var(--rail-b);
}
body.app.has-foot{--rail-b:0px}
[hidden]{display:none!important}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid rgba(var(--signal-rgb),.8);outline-offset:3px}
::selection{background:rgba(var(--signal-rgb),.35);color:var(--ink)}
.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}
.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;border-radius:2px;background:var(--on-signal)}
@keyframes pulse{0%,90%,100%{opacity:1}94%{opacity:.25}}
@keyframes vu{from{transform:scaleY(.06)}to{transform:scaleY(1)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* atmosphere: a vignette and pools of light (amber lamp, teal meter). All of it holds still: a moving
   layer under the header's blur redraws the page every frame.
   The film grain (.grain, still in every page's markup) is switched off: an overlay blend at 5% over these
   blacks changed no pixel on the background and 0.2/255 on the brightest type, measured 12 Oct 2026, yet
   re-blending the whole screen under the animated analyser was about a third of the compositor's work while
   scrolling in a headless Chromium trace (software compositing; a GPU will differ). Any grain strong enough
   to see needs a stronger or brighter blend, which lifts the blacks. */
.grain{display:none}
.vign{position:fixed;inset:0;pointer-events:none;z-index:60;background:radial-gradient(130% 95% at 50% 30%,transparent 50%,rgba(0,0,0,.5) 100%)}
body.app::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(49.4% 41.6% at 8.4% -4.6%,rgba(var(--amber-rgb),.12),transparent 70%),
    radial-gradient(39% 36.4% at 99.4% 13.6%,rgba(var(--signal-rgb),.07),transparent 70%),
    radial-gradient(59.8% 46.8% at 56.5% 121.5%,rgba(var(--amber-rgb),.07),transparent 70%)}

/* ═══════════ type ═══════════ */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 11.5px/1 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.eyebrow::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--signal);box-shadow:0 0 10px rgba(var(--signal-rgb),.7);transform:rotate(-62deg)}
.display{font-family:'Saira Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:.9;margin:0;text-wrap:balance}
.display em.em-pro{background:var(--brass);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 26px rgba(var(--level-rgb),.28))}
.display em{font-style:normal;color:var(--signal);text-shadow:0 0 38px rgba(var(--signal-rgb),.35)}
.lede{font-size:clamp(17px,1.45vw,19.5px);line-height:1.6;color:var(--ink-dim);max-width:60ch;margin:0}
.lede b{color:var(--ink);font-weight:600}

/* ═══════════ buttons ═══════════ */
.btn{--h:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 22px;border-radius:var(--r);
  font:600 15.5px/1 'Archivo',sans-serif;letter-spacing:.005em;white-space:nowrap;text-decoration:none;cursor:pointer;
  border:1px solid transparent;color:var(--ink);background:none;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s}
.btn svg{flex:none}
.btn--sm{--h:40px;padding:0 16px;font-size:14.5px;border-radius:10px}
.btn--lg{--h:58px;padding:0 28px;font-size:17px;border-radius:14px}
.btn--primary{color:var(--on-signal);background:linear-gradient(180deg,#5de8d6 0%,#2dd4bf 45%,#1fb8a5 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.18),0 12px 32px -12px rgba(var(--signal-rgb),.65)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.18),0 18px 44px -14px rgba(var(--signal-rgb),.85)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:rgba(255,238,215,.045);border-color:var(--line-strong)}
.btn--ghost:hover{background:rgba(255,238,215,.08);border-color:rgba(255,226,186,.32)}
.btn--pro{color:#1b1406;background:var(--brass);background-size:200% 100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.2),0 12px 32px -12px rgba(var(--level-rgb),.65)}
.btn--pro:hover{transform:translateY(-1px);background-position:100% 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 18px 44px -14px rgba(var(--level-rgb),.85)}
.btn__arrow{transition:transform .25s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.link{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(var(--signal-rgb),.35);transition:border-color .2s}
.link:hover{border-bottom-color:var(--signal)}

/* ═══════════ header ═══════════ */
.rail{position:fixed;left:0;right:0;z-index:50;display:flex;align-items:center}
.rail--top{top:0;height:var(--rail-h);background:rgba(12,9,7,.74);border-bottom:1px solid var(--line-soft);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  transition:background .35s,border-color .35s;animation:railDown .6s var(--ease) both}
/* the home page starts clear over the hero and frosts once you scroll */
.is-home .rail--top:not(.is-scrolled){background:rgba(12,9,7,0);border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
@keyframes railDown{from{transform:translateY(-100%)}to{transform:none}}
.rail__in{flex:1;min-width:0;max-width:calc(var(--wrap) + 80px);margin:0 auto;display:flex;align-items:center;gap:clamp(12px,2.4vw,34px);padding:0 clamp(16px,3.2vw,40px)}

/* brand */
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand__mark{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:clamp(22px,2.2vw,28px);letter-spacing:.055em;line-height:1;text-transform:uppercase;color:var(--ink)}
/* the O: height 1em with the baseline 0.8em down, as wide as the letter's own advance */
.brand__o{height:1em;width:.507em;vertical-align:-.2em;margin-right:.055em;overflow:visible;fill:currentColor}
.brand__cut{fill:none;stroke-linecap:round;stroke:var(--signal);stroke-width:84;filter:drop-shadow(0 0 6px rgba(var(--signal-rgb),.6))}

/* main nav */
.mainnav{display:flex;gap:2px;flex:none}
.mainnav__a{position:relative;display:inline-flex;align-items:center;gap:7px;font:500 14.5px/1 'Archivo',sans-serif;color:var(--ink-dim);
  text-decoration:none;padding:10px 13px;border-radius:999px;transition:color .2s,background .2s}
.mainnav__a:hover{color:var(--ink);background:rgba(255,238,215,.05)}
.mainnav__a.is-on{color:var(--ink);background:rgba(255,238,215,.07)}
.pro-dot{width:6px;height:6px;border-radius:50%;background:var(--level);box-shadow:0 0 10px rgba(var(--level-rgb),.8)}
/* Train: the modules, as faceplates in a rack that drops from the header */
.mainnav__train{border:0;background:none;cursor:pointer}
.mainnav__train .chev{opacity:.6;transition:transform .25s var(--ease)}
.mainnav__train[aria-expanded="true"]{color:var(--ink);background:rgba(255,238,215,.07)}
.mainnav__train[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* the rack hangs from the header, not the button: it spans the page's content, from the logo to the meters, however
   many modules there are */
.rail__in{position:relative}
.rack{position:absolute;top:calc(100% + 12px);left:clamp(16px,3.2vw,40px);right:clamp(16px,3.2vw,40px)}
.rack__in{width:100%;display:grid;grid-template-columns:repeat(var(--mods,2),minmax(0,1fr));gap:14px;padding:14px;max-height:calc(100vh - var(--rail-h) - 24px);overflow:auto;overscroll-behavior:contain;
  border-radius:var(--r-xl);border:1px solid var(--line);background:linear-gradient(180deg,rgba(26,21,17,.97),rgba(15,12,9,.98));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 40px 80px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,240,222,.06);
  animation:rackIn .28s var(--ease)}
@keyframes rackIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* a faceplate: a 500-series module, screws in the corners */
.plate{position:relative;display:flex;flex-direction:column;padding:20px 20px 18px;border-radius:var(--r-lg);border:1px solid var(--line-soft);
  background:var(--surface),#16120e;box-shadow:var(--lift)}
.plate::before,.plate::after{content:"";position:absolute;top:10px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6b5a43,#2a221a);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.plate::before{left:10px}.plate::after{right:10px}
.plate__head{display:flex;align-items:center;gap:10px;height:18px;margin:0 0 10px 10px;font:400 10px/1 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.plate__new{font:700 9.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--on-signal);background:var(--signal);border-radius:999px;padding:4px 7px 3px;box-shadow:0 0 12px rgba(var(--signal-rgb),.45)}
.plate__name{margin:0;font:800 34px/.95 'Saira Condensed',sans-serif;letter-spacing:.01em;text-transform:uppercase}
.plate__name a{color:var(--ink);text-decoration:none}
.plate__name a:hover{color:var(--signal)}
.plate__line{margin:6px 0 14px;color:var(--ink-dim);font-size:14.5px}
.plate__meter{display:flex;align-items:center;gap:12px;margin-bottom:10px;font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.plate__meter .pcard__bar{flex:1;max-width:120px}
.plate__list{list-style:none;margin:0 -8px 12px;padding:0;border-top:1px solid var(--line-soft)}
.plate__a{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;padding:8px;border-radius:9px;text-decoration:none;color:var(--ink-dim);font:500 14.5px/1.2 'Archivo',sans-serif;transition:background .15s,color .15s}
.plate__a small{font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.08em;color:var(--ink-faint)}
.plate__a:hover,.plate__a:focus-visible{background:rgba(255,238,215,.05);color:var(--ink);outline:none}
.plate__a.is-on{color:var(--signal)}
.plate__pips{font:400 10.5px/1 'Space Mono',monospace;font-style:normal;color:var(--ink-faint)}
.plate__a.is-done .plate__pips{color:var(--signal)}
.plate__go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font:600 14px/1 'Archivo',sans-serif;color:var(--signal);text-decoration:none;padding:6px 0}
.plate__go .btn__arrow{transition:transform .2s var(--ease)}
.plate__go:hover .btn__arrow{transform:translateX(3px)}

.rail__pro{display:inline-flex;align-items:center;gap:7px;font:600 14.5px/1 'Archivo',sans-serif;color:var(--level);text-decoration:none;padding:10px 6px}
.rail__pro:hover,.rail__pro[aria-current]{color:#f0cd78}
a.meters.is-on{border-color:var(--line-strong)}
.rail__end{margin-left:auto;display:flex;align-items:center;gap:clamp(8px,1.4vw,16px);flex:none}
.rail__signin{font:500 14.5px/1 'Archivo',sans-serif;color:var(--ink-dim);text-decoration:none;padding:10px 6px}
.rail__signin:hover{color:var(--ink)}
body[data-auth="in"] .nav-signin{display:none}

/* meters: rank, level, XP, streak and the output level, as one instrument cluster */
a.meters{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);padding:7px 14px;border-radius:14px;text-decoration:none;color:inherit;
  background:rgba(0,0,0,.28);border:1px solid var(--line-soft);box-shadow:inset 0 1px 0 rgba(255,240,222,.04);transition:border-color .2s}
a.meters:hover,a.meters:focus-visible{border-color:var(--line-strong);outline:none}
.meter{text-align:right;min-width:40px}
.meter u{display:block;font:400 9px/1 'Space Mono',monospace;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;text-decoration:none}
.meter b{display:block;font:700 15.5px/1 'Space Mono',monospace;color:var(--signal);margin-top:5px;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}
.meter.rank b{font:600 12.5px/1 'Archivo',sans-serif;letter-spacing:.02em;color:var(--ink);text-shadow:none;margin-top:6px}
.lvl{display:grid;gap:3px;flex:none}
.lvl span{display:flex;gap:2px}
.lvl i{width:5px;height:4px;border-radius:1px;background:rgba(255,238,215,.09);transition:background .05s}
.lvl i.on{background:var(--signal);box-shadow:0 0 6px rgba(var(--signal-rgb),.6)}
.lvl i.mid.on{background:var(--level);box-shadow:0 0 6px rgba(var(--level-rgb),.6)}
.lvl i.hot.on{background:var(--peak);box-shadow:0 0 6px rgba(var(--peak-rgb),.7)}

/* spectrum ribbon along the header's lower edge: hidden at idle, dancing while audio plays */
.ribbon{position:absolute;left:0;right:0;bottom:-1px;height:3px;display:flex;gap:2px;pointer-events:none;opacity:0;transition:opacity .4s}
.ribbon i{flex:1;border-radius:1px;background:linear-gradient(90deg,rgba(var(--amber-rgb),.8),rgba(var(--signal-rgb),.8));transform-origin:bottom;transform:scaleY(.5)}
body.live .ribbon{opacity:1}
body.live .ribbon i{animation:vu 1s ease-in-out infinite alternate}

/* menu */
.menubtn{display:none;align-items:center;gap:8px;flex:none;font:600 13px/1 'Archivo',sans-serif;color:var(--ink-dim);
  background:rgba(255,238,215,.05);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.menubtn span{width:15px;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(--line-strong)}
@media (max-width:980px){.mainnav{display:none}.menubtn{display:inline-flex}}
@media (max-width:860px){.meter.rank{display:none}}
@media (max-width:560px){
  .menubtn{padding:10px;font-size:0;gap:0}.menubtn span{margin:0}
  a.meters{padding:6px 10px;gap:10px}
  .meter{min-width:30px;text-align:center}
  .meter b{font-size:14px}
  .meter--lvl{display:none}
  .lvl{display:none}
  .rail__signin,.rail__pro{display:none}
  .rail__end .btn--sm{--h:38px;padding:0 13px;font-size:14px}
}
@media (max-width:380px){a.meters{gap:8px}.meter{min-width:26px}}

.drawer{position:fixed;inset:0;z-index:80}
.drawer__scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,88vw);overflow:auto;background:linear-gradient(180deg,#1a1511,#110e0b);
  border-left:1px solid var(--line);padding:16px 16px 30px;display:flex;flex-direction:column;gap:2px;animation:slideIn .28s var(--ease)}
@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:10px;font:700 11px/1 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.drawer__x{background:rgba(255,238,215,.05);border:1px solid var(--line);border-radius:10px;color:var(--ink-dim);font-size:22px;line-height:1;width:38px;height:38px;cursor:pointer}
.drawer__a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;text-decoration:none;color:var(--ink);
  font:600 17px/1.2 'Archivo',sans-serif;border-radius:12px;border:1px solid transparent}
.drawer__a:hover,.drawer__a:focus-visible{background:rgba(255,238,215,.05);outline:none}
.drawer__a.is-on{color:var(--signal);background:rgba(var(--signal-rgb),.07)}
.drawer__a--ex{font-weight:500;font-size:15.5px;padding:10px 14px;color:var(--ink-dim)}
.drawer__a small{font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.1em;color:var(--ink-faint)}
.drawer__g{font:700 10.5px/1 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:18px 14px 6px}
.drawer__cta{margin:18px 0 0}
.drawer__hr{height:1px;background:var(--line-soft);margin:12px 14px}
.dmod summary{cursor:pointer;list-style:none;justify-content:flex-start}
.dmod summary::-webkit-details-marker{display:none}
.dmod summary small{margin-left:auto}
.dmod summary .chev{opacity:.6;transition:transform .25s var(--ease)}
.dmod[open] summary .chev{transform:rotate(180deg)}
.dmod[open]{padding-bottom:6px}
.dmod .drawer__a--ex{padding-left:26px}
.drawer__a--all{color:var(--signal)!important;font-size:14.5px!important}
body.drawer-open{overflow:hidden}

/* ═══════════ bottom rail (exercise pages) + footer ═══════════ */
.rail--btm{bottom:0;height:var(--rail-b);border-top:1px solid var(--line-soft);background:rgba(12,9,7,.8);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:0 clamp(12px,3vw,32px);justify-content:space-between;gap:16px;animation:railUp .6s .08s var(--ease) both}
@keyframes railUp{from{transform:translateY(100%)}to{transform:none}}
.keys,.sig{font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.keys b{color:var(--ink-dim);font-weight:400;border:1px solid var(--line);border-radius:5px;padding:3px 6px;margin:0 4px 0 10px;background:rgba(255,238,215,.03)}
.keys b:first-child{margin-left:0}
.keys{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sig{color:var(--ink-faint);flex:none;white-space:nowrap}
.sig a{color:inherit;text-decoration:none}
.sig a:hover{color:var(--ink)}
@media (max-width:560px){.keys{display:none}.rail--btm{justify-content:center}}

.foot{position:relative;margin-top:clamp(40px,8vw,90px);border-top:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.45))}
.foot__in{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,6vw,64px) clamp(16px,4vw,40px) 28px;display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr;gap:32px}
.foot__brand .brand__mark{font-size:30px}
.foot__tag{font:800 20px/1.1 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);margin:14px 0 8px}
.foot__tag em{font-style:normal;color:var(--signal)}
.foot__note{color:var(--ink-faint);font-size:14px;max-width:36ch;margin:0}
.foot__col h2{font:700 11px/1 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:6px 0 14px}
.foot__col a{display:block;color:var(--ink-dim);text-decoration:none;font-size:15px;padding:5px 0}
.foot__col a:hover{color:var(--ink)}
.foot__base{max-width:var(--wrap);margin:0 auto;padding:18px clamp(16px,4vw,40px) 30px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  border-top:1px solid var(--line-soft);font:400 11px/1.5 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
@media (max-width:980px){.foot__in{grid-template-columns:repeat(3,minmax(0,1fr))}.foot__brand{grid-column:1/-1}}
@media (max-width:720px){.foot__in{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}}

/* ═══════════ layout ═══════════ */
.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(14px,3vw,32px)}
.stage__in{width:100%;max-width:880px;animation:rise .7s .15s var(--ease) both}
.stage__in--wide{max-width:var(--wrap)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.sec{padding:clamp(64px,10vw,128px) 0 0}
.sec__head{display:grid;gap:16px;margin:0 0 clamp(28px,4vw,48px);max-width:860px}
.sec__head .display{font-size:clamp(38px,5.4vw,68px)}
.sec__head--center{margin-left:auto;margin-right:auto;text-align:center;justify-items:center}

/* scroll reveal: marked blocks rise into place once, with an optional stagger (--i). An animation
   with no fill, not a transition, so afterwards the block's own hover lift and transitions work. */
.js [data-reveal]:not(.is-in){opacity:0}
.js [data-reveal].is-in{animation:reveal .8s var(--ease) backwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes reveal{from{opacity:0;transform:translateY(22px)}}

/* a panel with a little depth: the house surface */
.surface{position:relative;background:var(--surface),var(--module);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift)}

/* ═══════════ home: hero ═══════════ */
.lp-hero{position:relative;padding:clamp(28px,6vw,72px) 0 0}
.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero__copy{display:grid;gap:22px;justify-items:start}
.hero__title{font-size:clamp(58px,8.4vw,124px)}
.hero__title span{display:block}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero__fine{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;color:var(--ink-faint);font-size:14px}
.hero__fine span{display:inline-flex;align-items:center;gap:7px}
.hero__fine span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px rgba(var(--signal-rgb),.8)}
.byline{display:flex;align-items:center;gap:14px;margin:10px 0 0;color:var(--ink-dim);font-size:14.5px;line-height:1.5;max-width:52ch}
.byline img{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.05);border:1px solid var(--line-strong);box-shadow:0 0 0 4px rgba(255,238,215,.03)}
.byline a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.byline a:hover{border-bottom-color:var(--signal)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,238,215,.05);border:1px solid var(--line);
  font:700 11px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.chip .led{width:6px;height:6px}
.chip--pro{color:var(--level);border-color:rgba(var(--level-rgb),.35);background:rgba(var(--level-rgb),.07)}
@media (max-width:980px){.hero{grid-template-columns:1fr}.hero__title{font-size:clamp(56px,14vw,104px)}}

/* the analyser: a hardware display that shows what an EQ move does to the sound */
.scope{position:relative;margin:0;padding:12px;border-radius:26px;background:linear-gradient(180deg,#2a221a,#15110d 40%,#0f0c09);
  border:1px solid rgba(255,226,186,.14);box-shadow:inset 0 1px 0 rgba(255,240,222,.12),inset 0 -1px 0 rgba(0,0,0,.6),0 50px 90px -40px rgba(0,0,0,.95),0 0 120px -30px rgba(var(--amber-rgb),.25);
  transform-style:preserve-3d;transition:transform .6s var(--ease)}
.scope__glass{position:relative;border-radius:16px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,rgba(var(--amber-rgb),.08),transparent 60%),#070605;
  border:1px solid rgba(0,0,0,.8);box-shadow:inset 0 0 0 1px rgba(255,238,215,.04),inset 0 20px 60px rgba(0,0,0,.6)}
.scope__glass::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(165deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 34%),linear-gradient(transparent 50%,rgba(0,0,0,.08) 50%);background-size:100% 100%,100% 3px}
.scope__top{display:flex;align-items:center;gap:12px;padding:14px 16px 0;font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.scope__top b{color:var(--ink);font-weight:700}
.scope__read{margin-left:auto;display:flex;gap:14px;font-variant-numeric:tabular-nums}
.scope__read b{color:var(--signal);text-shadow:0 0 12px rgba(var(--signal-rgb),.6)}
.scope__prompt{padding:12px 16px 0;font:700 clamp(17px,1.6vw,21px)/1.2 'Archivo',sans-serif;font-stretch:112%;letter-spacing:-.005em;color:var(--ink);min-height:1.2em}
.scope canvas{display:block;width:100%;height:clamp(200px,24vw,300px)}
.scope__axis{display:flex;justify-content:space-between;padding:0 16px 12px;font:400 10px/1 'Space Mono',monospace;color:var(--ink-faint);letter-spacing:.04em}
.scope__answers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 4px 2px}
.scope__ans{padding:12px 8px;border-radius:12px;text-align:center;background:rgba(255,238,215,.035);border:1px solid var(--line-soft);
  font:700 14px/1 'Space Mono',monospace;color:var(--ink-dim);transition:all .35s var(--ease)}
.scope__ans small{display:block;margin-top:6px;font:500 10px/1 'Archivo',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.scope__ans.is-hit{color:var(--signal);border-color:rgba(var(--signal-rgb),.6);background:rgba(var(--signal-rgb),.1);box-shadow:0 0 24px -6px rgba(var(--signal-rgb),.6)}
.scope__ans.is-hit small{color:var(--signal)}
.scope__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 8px 4px;font:400 10px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.scope__knobs{display:flex;gap:10px}
.knob{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a3f33,#1d1812 60%,#0c0a07);box-shadow:0 2px 4px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,240,222,.15);position:relative}
.knob::after{content:"";position:absolute;left:50%;top:3px;width:2px;height:7px;margin-left:-1px;border-radius:1px;background:var(--amber);box-shadow:0 0 6px rgba(var(--amber-rgb),.8);transform-origin:50% 8px;transform:rotate(var(--a,-40deg))}
.scope__verdict{color:var(--signal);opacity:0;transition:opacity .3s}
.scope__verdict.is-on{opacity:1}

/* the analyser tidies itself by its own width, so it works in the narrow column of a small laptop too */
.scope{container-type:inline-size}
.scope__top,.scope__foot{white-space:nowrap}
@container (max-width:450px){
  .scope__top{gap:8px;padding:12px 12px 0;font-size:9.5px;letter-spacing:.1em}
  .scope__top>span:nth-child(3),.scope__read>span:last-child{display:none}
  .scope__read{gap:10px}
  .scope__prompt{padding:10px 12px 0}
  .scope__axis{padding:0 12px 10px;font-size:9px}
  .scope__answers{gap:6px;padding-top:10px}
  .scope__ans{padding:10px 4px;font-size:13px}
  .scope__ans small{letter-spacing:.04em}
  .scope__knobs{display:none}
}
@container (max-width:380px){.scope__ans small{display:none}}
@media (max-width:560px){.scope{padding:10px;border-radius:22px}}
/* one unit, every module (hero.js): the labels of the scenes that aren't showing stay out of the way */
.scope:not(.is-comp) [data-m="comp"],.scope:not(.is-bal) [data-m="bal"],.scope.is-comp [data-m="eq"],.scope.is-bal [data-m="eq"]{display:none}
.scope__answers--ab{grid-template-columns:repeat(2,1fr)}
.scope__ans.is-play{color:var(--ink);border-color:rgba(var(--amber-rgb),.45);background:rgba(var(--amber-rgb),.07)}
.scope__axis--time{padding-right:62px}
/* the compressor (companim.js): its transfer curve and meter, beside a compression page's heading */
.cunit canvas{height:auto;aspect-ratio:2.15/1}
.bunit canvas{aspect-ratio:1.7/1}
.modhead{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.modhead>.sec__head{margin-bottom:0}
.modhead .sec__head .display{font-size:clamp(38px,4.6vw,60px)}
@media (max-width:980px){.modhead .sec__head .display{font-size:clamp(38px,5.4vw,68px)}}
@media (max-width:360px){.modhead .sec__head .display{font-size:34px}}
.modhead+.path{margin-top:clamp(32px,4.5vw,56px)}
@media (max-width:980px){.modhead{grid-template-columns:1fr}.modhead .cunit{max-width:620px}}

/* ═══════════ home: how it works ═══════════ */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.how__card{padding:26px 24px 24px;display:grid;gap:12px;align-content:start;overflow:hidden}
.how__n{font:700 12px/1 'Space Mono',monospace;letter-spacing:.14em;color:var(--amber)}
.how__card h3{font:800 38px/.9 'Saira Condensed',sans-serif;text-transform:uppercase;margin:0}
.how__card h3 em{font-style:normal;color:var(--signal)}
.how__card p{margin:0;color:var(--ink-dim);font-size:15.5px;line-height:1.55}
.how__art{height:92px;margin:0 0 8px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--line-soft);display:grid;place-items:center;overflow:hidden}
.how__art svg{width:100%;height:100%}
.how__note{margin:22px 0 0;color:var(--ink-faint);font-size:14.5px;display:flex;gap:10px;align-items:flex-start}
.how__note svg{flex:none;margin-top:2px;color:var(--amber)}
@media (max-width:860px){.how{grid-template-columns:1fr}}
/* the three little animations: they run only while the cards are on screen (library.js adds .is-lit
   to .how and pauses the Fix card's SMIL otherwise); with reduced motion each card holds one state */
.art-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.art-grid{stroke:rgba(255,226,186,.08);stroke-width:1}
.art-ab{animation:ab 2.4s steps(1) infinite}
@keyframes ab{0%,49%{opacity:1}50%,100%{opacity:0}}
.art-ab2{animation:ab 2.4s steps(1) infinite reverse}
.art-sweep{animation:sweep 4.8s var(--ease-io) infinite alternate}
@keyframes sweep{from{transform:translateX(-70px)}to{transform:translateX(70px)}}
.how:not(.is-lit) :is(.art-ab,.art-ab2,.art-sweep){animation-play-state:paused}

/* ═══════════ the path: seven exercises in order ═══════════ */
.path{position:relative;display:grid;gap:12px;list-style:none;margin:0;padding:0}
.path::before{content:"";position:absolute;left:27px;top:34px;bottom:34px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--signal) 0,var(--signal) var(--done,0%),rgba(255,226,186,.12) var(--done,0%))}
.pstep{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:center}
.pstep__node{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#120e0b;border:1px solid var(--line-strong);
  font:700 13px/1 'Space Mono',monospace;color:var(--ink-dim);box-shadow:0 0 0 6px var(--bg)}
.pstep.is-done .pstep__node{border-color:var(--signal);color:var(--on-signal);background:var(--signal);box-shadow:0 0 0 6px var(--bg),0 0 22px rgba(var(--signal-rgb),.5)}
.pstep.is-next .pstep__node{border-color:var(--signal);color:var(--signal);box-shadow:0 0 0 6px var(--bg),0 0 18px rgba(var(--signal-rgb),.35)}
/* the next step glows: a ring that fades in and out. Opacity only, so it never repaints, and it
   runs only while it's on screen (library.js adds .is-lit) */
.pstep.is-next .pstep__node::after{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;opacity:0;
  box-shadow:0 0 0 6px rgba(var(--signal-rgb),.16),0 0 30px rgba(var(--signal-rgb),.45)}
.pstep.is-next.is-lit .pstep__node::after{animation:node 2.6s ease-in-out infinite}
@keyframes node{50%{opacity:1}}
.pcard{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:10px 24px;align-items:center;padding:20px 22px;text-decoration:none;color:var(--ink);
  overflow:hidden;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.pcard::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,240,222,.07) 50%,transparent 70%);transform:translateX(-100%);transition:transform .9s var(--ease)}
a.pcard:hover,a.pcard:focus-visible{transform:translateX(4px);border-color:rgba(var(--signal-rgb),.45);box-shadow:var(--lift),0 20px 50px -30px rgba(var(--signal-rgb),.5);outline:none}
a.pcard:hover::after{transform:translateX(100%)}
.pstep.is-next .pcard{border-color:rgba(var(--signal-rgb),.5);background:linear-gradient(100deg,rgba(var(--signal-rgb),.1),transparent 55%),var(--surface),var(--module)}
.pcard__tag{display:flex;align-items:center;gap:10px;font:700 10.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.pcard__here{color:var(--on-signal);background:var(--signal);padding:4px 8px;border-radius:6px;letter-spacing:.12em}
.pcard__name{font:800 clamp(28px,3vw,34px)/.95 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.015em;margin:0}
.pcard__blurb{color:var(--ink-dim);font-size:15px;line-height:1.5;margin:6px 0 0}
.pcard__meta{display:grid;gap:9px;justify-items:start;font:400 11px/1 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.pcard__row{display:flex;align-items:center;gap:10px}
.pcard__bar{flex:none;width:120px;height:4px;border-radius:4px;background:rgba(255,238,215,.07);overflow:hidden}
.pcard__bar i{display:block;height:100%;border-radius:4px;background:var(--signal);box-shadow:0 0 10px rgba(var(--signal-rgb),.6)}
.pcard__access{padding:4px 8px;border-radius:6px;border:1px solid var(--line);color:var(--ink-dim)}
.pcard__access--pro{color:var(--level);border-color:rgba(var(--level-rgb),.35);background:rgba(var(--level-rgb),.06)}
.pcard__go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);color:var(--ink);transition:all .3s var(--ease)}
a.pcard:hover .pcard__go{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.pips{display:inline-flex;gap:3px}
.pips i{width:6px;height:6px;border-radius:2px;border:1px solid var(--ink-faint)}
.pips i.on{background:var(--amber);border-color:var(--amber);box-shadow:0 0 6px rgba(var(--amber-rgb),.6)}
@media (max-width:860px){
  .pcard{grid-template-columns:minmax(0,1fr) auto}
  .pcard__meta{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
  .pcard__go{grid-column:2;grid-row:1}
}
@media (max-width:560px){
  .path::before{left:17px}
  .pstep{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .pstep__node{width:36px;height:36px;font-size:11px;box-shadow:0 0 0 4px var(--bg)}
  .pcard{padding:16px}
  .pcard__go{width:38px;height:38px}
}

/* ═══════════ home: the habit (daily, your ears, ranks) ═══════════ */
.habit{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px}
.hcard{padding:24px;display:flex;flex-direction:column;gap:14px}
.hcard h3{font:800 30px/.95 'Saira Condensed',sans-serif;text-transform:uppercase;margin:0;text-wrap:balance}
.hcard p{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.55}
.hcard .btn{align-self:flex-start;margin-top:auto}
.sharecard{font:400 13px/1.6 'Space Mono',monospace;color:var(--ink);background:#0c0a08;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:inset 0 1px 0 rgba(255,240,222,.04);white-space:pre-line;position:relative}
.sharecard__row{letter-spacing:.06em;font-size:15px}
.ears-demo{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;align-items:end;height:120px;padding:14px 12px 10px;background:#0c0a08;border:1px solid var(--line);border-radius:14px}
.ears-demo i{display:block;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,var(--signal),rgba(var(--signal-rgb),.35));height:var(--h);box-shadow:0 0 12px -2px rgba(var(--signal-rgb),.5);
  transform-origin:bottom;animation:grow 1.2s var(--ease) both;animation-delay:calc(var(--k) * 70ms)}
.ears-demo i.weak{background:linear-gradient(180deg,var(--peak),rgba(var(--peak-rgb),.3));box-shadow:0 0 12px -2px rgba(var(--peak-rgb),.5)}
.ears-demo__hz{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;padding:0 12px;margin-top:-6px;font:400 9.5px/1 'Space Mono',monospace;color:var(--ink-faint);text-align:center}
@keyframes grow{from{transform:scaleY(.05)}to{transform:none}}
.ears-demo--tn span{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%}
.ears-demo--tn i{width:45%}
.ears-demo i.then{background:rgba(255,226,186,.24);box-shadow:none}
.hcard__fine{font-size:13px!important;color:var(--ink-faint)!important}
.tn-legend{display:flex;gap:16px;margin-bottom:6px;color:var(--ink-dim)}
.tn-legend>span{display:inline-flex;align-items:center;gap:7px}
.tn-key{width:9px;height:9px;border-radius:2px;background:var(--signal);display:inline-block}
.tn-key--then{background:rgba(255,226,186,.3)}
.js .ears-demo:not(.is-in) i{animation:none;transform:scaleY(.05)}
.ranks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ranks li{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid var(--line-soft);font-size:14.5px;color:var(--ink-dim)}
.ranks li::before{content:"";width:10px;height:10px;border-radius:3px;background:rgba(255,238,215,.1)}
.ranks li:nth-child(1)::before{background:var(--signal);box-shadow:0 0 8px rgba(var(--signal-rgb),.7)}
.ranks li:nth-child(2)::before{background:var(--signal);opacity:.8}
.ranks li:nth-child(3)::before{background:var(--level);opacity:.8}
.ranks li:nth-child(4)::before{background:var(--amber)}
.ranks li:nth-child(5){color:var(--ink);border-color:rgba(var(--level-rgb),.4);background:linear-gradient(90deg,rgba(var(--level-rgb),.12),rgba(0,0,0,.2))}
.ranks li:nth-child(5)::before{background:var(--brass);box-shadow:0 0 10px rgba(var(--level-rgb),.9)}
.ranks b{font-weight:600;color:inherit}
.ranks span{font:400 11px/1 'Space Mono',monospace;color:var(--ink-faint)}
@media (max-width:980px){.habit{grid-template-columns:1fr 1fr}.hcard--daily{grid-column:1/-1}}
@media (max-width:640px){.habit{grid-template-columns:1fr}}

/* pull quote */
.quote{position:relative;max-width:980px;margin:0 auto;text-align:center;display:grid;gap:22px;justify-items:center}
.quote blockquote{margin:0;font:800 clamp(30px,4.2vw,54px)/1.02 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.005em;color:var(--ink)}
.quote blockquote em{font-style:normal;color:var(--amber);text-shadow:0 0 40px rgba(var(--amber-rgb),.35)}
.quote figcaption{display:flex;align-items:center;gap:12px;color:var(--ink-dim);font-size:15px}
.quote figcaption img{width:40px;height:40px;border-radius:50%;filter:grayscale(1);border:1px solid var(--line-strong)}

/* ═══════════ pricing ═══════════ */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:980px;margin:0 auto}
.plan{padding:30px 28px 28px;display:flex;flex-direction:column;gap:18px}
.plan__name{display:flex;align-items:center;justify-content:space-between;gap:12px;font:800 32px/1 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:0}
.plan__price{display:flex;align-items:baseline;gap:8px;margin:0}
.plan__price b{font:800 56px/.9 'Saira Condensed',sans-serif;letter-spacing:.01em}
.plan__price span{color:var(--ink-dim);font-size:15px}
.plan__alt{margin:-8px 0 0;color:var(--ink-faint);font-size:14px}
.plan__sub{margin:0;color:var(--ink-dim);font-size:15.5px;line-height:1.55}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:10px;color:var(--ink);font-size:15px;line-height:1.45}
.plan li svg{margin-top:2px;color:var(--signal)}
.plan li small{display:block;color:var(--ink-faint);font-size:13px}
.plan .btn{margin-top:auto;width:100%}
.plan__fine{margin:-6px 0 0;text-align:center;color:var(--ink-faint);font-size:13px}
.plan--pro{border-color:rgba(var(--level-rgb),.45);background:radial-gradient(120% 80% at 100% 0%,rgba(var(--level-rgb),.13),transparent 55%),var(--surface),var(--module);
  box-shadow:var(--lift),0 0 0 1px rgba(var(--level-rgb),.12),0 40px 90px -50px rgba(var(--level-rgb),.6)}
.plan--pro li svg{color:var(--level)}
.plan--pro .plan__name{background:var(--brass);-webkit-background-clip:text;background-clip:text;color:transparent}
.plans__note{max-width:980px;margin:18px auto 0;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;color:var(--ink-dim);font-size:14.5px}
@media (max-width:760px){.plans{grid-template-columns:minmax(0,1fr)}}

/* ═══════════ meet Dan ═══════════ */
.dan{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(26px,4vw,44px)}
.dan__photo{position:relative;width:clamp(120px,16vw,180px);aspect-ratio:1}
.dan__photo img{width:100%;height:100%;border-radius:22px;object-fit:cover;filter:grayscale(1) contrast(1.08);border:1px solid var(--line-strong)}
.dan__photo::after{content:"";position:absolute;inset:-10px;border-radius:30px;border:1px solid rgba(var(--amber-rgb),.18);pointer-events:none}
.dan h2{font:800 clamp(34px,4vw,48px)/.95 'Saira Condensed',sans-serif;text-transform:uppercase;margin:10px 0 12px}
.dan p{margin:0 0 12px;color:var(--ink-dim);font-size:16px;line-height:1.65;max-width:62ch}
.dan__facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
@media (max-width:640px){.dan{grid-template-columns:1fr}}

/* ═══════════ FAQ ═══════════ */
.faq{max-width:860px;margin:0 auto;display:grid;gap:10px}
.faq details{border-radius:14px;background:var(--surface),var(--module);border:1px solid var(--line);transition:border-color .2s}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font:600 16.5px/1.35 'Archivo',sans-serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq details p{margin:0;padding:0 20px 18px;color:var(--ink-dim);font-size:15.5px;line-height:1.6;max-width:70ch}

/* ═══════════ closing call ═══════════ */
.finale{position:relative;overflow:hidden;text-align:center;padding:clamp(48px,8vw,96px) clamp(20px,5vw,60px);border-radius:28px;display:grid;justify-items:center;gap:20px;
  background:radial-gradient(70% 90% at 50% 120%,rgba(var(--amber-rgb),.22),transparent 70%),radial-gradient(60% 70% at 50% -20%,rgba(var(--signal-rgb),.12),transparent 70%),var(--module);
  border:1px solid var(--line);box-shadow:var(--lift)}
.finale .display{font-size:clamp(44px,7vw,96px)}
/* fine print here sits on the amber glow, so it takes the brighter secondary ink to stay above 4.5:1 */
.finale :is(.hero__fine,.acct__fine,.acct__or){color:var(--ink-dim)}

/* ═══════════ home for someone who has played: the session desk ═══════════ */
#desk:empty{display:none}
.is-returning [data-lp]{display:none}
/* a training module's own page (/eq, /compression) */
.modpage{padding-top:clamp(28px,5vw,64px)}
.modpage .sec__head{max-width:1040px}
.modpage .lede{max-width:760px}
.faq--left{margin-left:0}
.modpage .display{overflow-wrap:anywhere}
@media (max-width:480px){.modpage__go .btn{width:100%}}
@media (max-width:360px){.modpage .display{font-size:34px}.modpage__go .btn{padding:0 16px;font-size:15px}}
.modpage__go{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.modpage .hero__fine{margin-top:18px}
.desk .ears{margin:0}
.desk{padding:clamp(20px,4vw,48px) 0 0}
.desk__hi{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 26px}
.desk__hi .display{font-size:clamp(44px,6vw,76px)}
.desk__stats{display:flex;gap:8px;flex-wrap:wrap}
.desk__mods{margin:0 0 16px}
.rack__in--flat{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));width:auto;max-width:none;max-height:none;overflow:visible;padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
/* Train on the home page brings you here: the faceplates light up once */
.rack__in--flat.is-called .plate{animation:plate-call 1.2s var(--ease)}
@keyframes plate-call{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 1px rgba(var(--signal-rgb),.55),0 0 28px -6px rgba(var(--signal-rgb),.55)}}
@media (prefers-reduced-motion:reduce){.rack__in--flat.is-called .plate{animation:none}}
.desk__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin:0 0 16px}
.dcard{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px;min-height:230px;text-decoration:none;color:var(--ink);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
a.dcard:hover,a.dcard:focus-visible{transform:translateY(-3px);border-color:rgba(var(--signal-rgb),.45);box-shadow:var(--lift),0 30px 60px -36px rgba(var(--signal-rgb),.55);outline:none}
.dcard--next{background:radial-gradient(90% 120% at 100% 0%,rgba(var(--signal-rgb),.14),transparent 55%),var(--surface),var(--module);border-color:rgba(var(--signal-rgb),.35)}
.dcard--daily{background:radial-gradient(90% 120% at 100% 0%,rgba(var(--amber-rgb),.14),transparent 55%),var(--surface),var(--module)}
.dcard__k{font:700 11px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.dcard h2{font:800 clamp(34px,3.6vw,46px)/.92 'Saira Condensed',sans-serif;text-transform:uppercase;margin:0}
.dcard p{margin:0;color:var(--ink-dim);font-size:15.5px;line-height:1.5;max-width:46ch}
.dcard__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font:400 11px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.dcard .btn{align-self:flex-start;margin-top:auto}
.flame{display:inline-flex;align-items:baseline;gap:6px;font:800 44px/1 'Saira Condensed',sans-serif;color:var(--level);text-shadow:0 0 30px rgba(var(--level-rgb),.45)}
.flame small{font:700 11px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.flame.is-done{color:var(--signal);text-shadow:0 0 30px rgba(var(--signal-rgb),.45)}
.upsell{display:grid;grid-template-columns:1fr auto;gap:16px 28px;align-items:center;padding:24px 26px;margin:16px 0 0;
  border-color:rgba(var(--level-rgb),.35);background:radial-gradient(80% 140% at 0% 0%,rgba(var(--level-rgb),.12),transparent 60%),var(--surface),var(--module)}
.upsell h2{font:800 28px/1 'Saira Condensed',sans-serif;text-transform:uppercase;margin:6px 0 6px}
.upsell p{margin:0;color:var(--ink-dim);font-size:15px}
@media (max-width:860px){.desk__grid{grid-template-columns:1fr}.upsell{grid-template-columns:1fr}}

/* ═══════════ Pro page ═══════════ */
/* padding-top only: this is also the .wrap, whose side padding keeps it off the screen edges */
.pro-hero{padding-top:clamp(32px,7vw,88px);text-align:center;display:grid;justify-items:center;gap:20px}
.pro-hero .display{font-size:clamp(56px,9vw,128px)}
.pro-hero .hero__actions{justify-content:center}
.pro-hero .display em{background:var(--brass);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 30px rgba(var(--level-rgb),.3))}
.pro-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pro-feat{padding:24px;display:grid;gap:10px;align-content:start}
.pro-feat svg{color:var(--level)}
.pro-feat h3{font:700 19px/1.2 'Archivo',sans-serif;margin:4px 0 0}
.pro-feat p{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.55}
.pro-feat .chip{justify-self:start}
@media (max-width:1100px){.pro-feats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.pro-feats{grid-template-columns:1fr}}

/* the founding-list panel */
.join__panel{width:min(560px,100%);display:grid;gap:12px;justify-items:center;text-align:center;margin-top:6px}
.join__panel .acct__p{margin:0;max-width:52ch}
.join__panel .acct__form{justify-content:center;width:100%}
.join__panel .acct__form input{min-width:0}
.join__panel .acct__or{width:100%;max-width:none}
.join__panel .acct__fine{margin:0}
.join__done{display:grid;justify-items:center;gap:12px}
.join__tick{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--signal);color:var(--on-signal);font:800 28px/1 'Archivo',sans-serif;
  box-shadow:0 0 0 8px rgba(var(--signal-rgb),.12),0 0 50px rgba(var(--signal-rgb),.6);animation:pop .6s var(--ease)}
.join__done h3{font:800 clamp(30px,3.6vw,40px)/1 'Saira Condensed',sans-serif;text-transform:uppercase;margin:4px 0 0}
.join__done p{margin:0;color:var(--ink-dim);max-width:50ch}
.join__done p b{color:var(--ink)}

/* ═══════════ library panels: your ears ═══════════ */
.xgroup__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;border-bottom:1px solid var(--line-soft);padding-bottom:12px;margin-bottom:16px}
.xgroup__head h2{font:800 26px/1 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em;margin:0}
.xgroup__head p{font:400 11px/1.4 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.ears{margin:0 0 16px;padding:22px 24px}
.ears__grid{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.ears--soon{padding:20px 24px}
.ears__soon-h{font:800 22px/1 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em;margin:0}
.ears--soon .ears__note{margin-top:6px}
.eb{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 0 10px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid var(--line-soft)}
.eb__val{font:700 11px/1 'Space Mono',monospace;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.eb__bar{width:10px;height:78px;border-radius:5px;background:rgba(255,238,215,.05);display:flex;align-items:flex-end;overflow:hidden}
.eb__bar i{display:block;width:100%;border-radius:5px;background:linear-gradient(180deg,var(--signal),rgba(var(--signal-rgb),.4));box-shadow:0 0 10px rgba(var(--signal-rgb),.5)}
.eb__hz{font:400 10.5px/1 'Space Mono',monospace;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),.45)}
.eb.is-weak .eb__bar i{background:linear-gradient(180deg,var(--peak),rgba(var(--peak-rgb),.4));box-shadow:0 0 10px 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:14.5px;line-height:1.6;margin:14px 0 0;max-width:72ch}
.ears__note b{color:var(--ink)}
.ears__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ears__go{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:10px;font:600 14px/1 'Archivo',sans-serif;color:var(--peak);
  border:1px solid rgba(var(--peak-rgb),.4);text-decoration:none;transition:background .2s}
.ears__go:hover{background:rgba(var(--peak-rgb),.08)}
@media (max-width:560px){.ears{padding:18px 14px}.ears__grid{gap:3px}.eb__bar{height:58px;width:8px}.eb__val,.eb__hz{font-size:9.5px}}

/* the ear print (panels.js earPrintPanel): your accuracy by band as a curve, dated monthly, for accounts */
.eprint{margin:0 0 16px;padding:22px 24px;overflow:hidden}
.eprint::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--level-rgb),.55),transparent)}
.eprint__lead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-bottom:6px}
.eprint__lead .tn__sub{max-width:52ch}
.eprint__cta{margin-top:16px;--h:44px}
.eprint__fig{margin:8px -6px 0;padding:0}
.eprint__fig svg{display:block;width:100%;height:auto;overflow:visible}
.ep-grid{stroke:var(--line-soft);stroke-width:1}
.ep-tick{stroke:rgba(255,226,186,.035);stroke-width:1}
.ep-hz{font:400 11px 'Space Mono',monospace;fill:var(--ink-dim)}
.ep-hz.is-off{fill:var(--ink-faint);opacity:.6}
.ep-area{fill:url(#ep-fill)}
.ep-now{fill:none;stroke:var(--signal);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(var(--signal-rgb),.55))}
.ep-then{fill:none;stroke:var(--level);stroke-width:1.5;stroke-dasharray:4 5;opacity:.75}
.ep-dot{fill:var(--bg);stroke:var(--signal);stroke-width:2}
.ep-off{stroke:var(--ink-dim);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:4 4}
.eprint__legend{display:flex;gap:18px;margin:4px 0 0;font:400 11px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.eprint__legend span{display:inline-flex;align-items:center;gap:8px}
.eprint__legend i{display:inline-block;width:18px;height:0;border-top:2px solid var(--signal)}
.eprint__legend .is-then i{border-top:1.5px dashed var(--level)}
.eprint__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.eprint__chip{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid var(--line);font-size:14px;color:var(--ink);text-decoration:none}
.eprint__chip u{text-decoration:none;font:400 10px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.eprint__chip b{font:700 13px/1 'Space Mono',monospace}
.eprint__chip.is-up{border-color:rgba(var(--signal-rgb),.35)}
.eprint__chip.is-up b{color:var(--signal)}
.eprint__chip.is-weak{border-color:rgba(var(--peak-rgb),.4);transition:background .2s}
.eprint__chip.is-weak b{color:var(--peak)}
.eprint__chip.is-weak span{font:600 13px/1 'Archivo',sans-serif;color:var(--peak)}
.eprint__chip.is-weak:hover{background:rgba(var(--peak-rgb),.08)}
@media (max-width:560px){.eprint{padding:18px 14px}.ep-hz{font-size:21px}.ep-now{stroke-width:3.5}.ep-dot{r:5}.ep-off{stroke-width:4}.eprint__cta{width:100%}}

/* your ears, then and now (panels.js thenNowPanel): the lead number, then each band as a pale "then" bar beside a teal "now" */
.tn{margin:0 0 16px;padding:22px 24px}
.desk .tn{margin:0}
.tn__lead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-bottom:20px}
.tn__k{font:700 11px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.tn__big{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:10px 0 0;font:800 clamp(44px,6vw,64px)/.9 'Saira Condensed',sans-serif;font-variant-numeric:tabular-nums}
.tn__big .tn__then{color:var(--ink-faint)}
.tn__big b{color:var(--signal);text-shadow:0 0 24px rgba(var(--signal-rgb),.45)}
.tn__big small{font-size:.45em;color:var(--ink-dim);margin-left:-8px}
.tn__arrow{font:400 .45em/1 'Archivo',sans-serif;color:var(--ink-faint)}
.tn__delta{font:700 13px/1 'Space Mono',monospace;padding:6px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-dim);align-self:center;white-space:nowrap}
.tn__delta.is-up{color:var(--signal);border-color:rgba(var(--signal-rgb),.45);background:rgba(var(--signal-rgb),.08)}
.tn__sub{margin:10px 0 0;color:var(--ink-dim);font-size:14.5px;line-height:1.5}
.tn__spark{width:min(260px,100%);height:54px;overflow:visible}
.tn__spark polyline{fill:none;stroke:var(--signal);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tn__dot0{fill:var(--ink-faint)}
.tn__dot1{fill:var(--signal)}
.tn__h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0 0 10px;font:700 12px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.tn__h small{font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.08em;color:var(--ink-faint)}
.tn__grid{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.tb{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 0 10px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid var(--line-soft)}
.tb__val{font:700 11px/1 'Space Mono',monospace;color:var(--ink-dim);font-variant-numeric:tabular-nums;text-align:center;height:22px}
.tb__val small{display:block;font-weight:400;font-size:9px;margin-top:3px;color:var(--ink-faint)}
.tb.is-up{border-color:rgba(var(--signal-rgb),.28)}
.tb.is-up .tb__val{color:var(--signal)}
.tb__bars{display:flex;gap:3px;align-items:flex-end;height:78px}
.tb__bars i{display:block;width:8px;border-radius:4px}
.tb__then{background:rgba(255,226,186,.24)}
.tb__now{background:linear-gradient(180deg,var(--signal),rgba(var(--signal-rgb),.4));box-shadow:0 0 10px rgba(var(--signal-rgb),.45)}
.tb.is-thin .tb__then{background:repeating-linear-gradient(0deg,var(--ink-faint) 0 2px,transparent 2px 4px)}
.tb.is-thin .tb__now{height:0;box-shadow:none}
.tb.is-thin .tb__val{color:var(--ink-faint)}
.tb__hz{font:400 10.5px/1 'Space Mono',monospace;color:var(--ink-dim)}
.tn__comp{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.tn__comp li{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:10px 14px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid var(--line-soft);font-size:14.5px}
.tn__comp li>span:first-child{flex:1;color:var(--ink)}
.tn__comp b{font:700 13px/1 'Space Mono',monospace;color:var(--signal)}
.tn__comp b .tn__then{color:var(--ink-faint)}
.tn__comp em{font-style:normal;color:var(--ink-faint);font-size:13px}
.tn__fine{font-size:13px;color:var(--ink-faint)}
.tn__gains{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.tn__gains span{padding:8px 12px;border-radius:999px;border:1px solid rgba(var(--signal-rgb),.3);background:rgba(var(--signal-rgb),.06);font:400 12.5px/1 'Space Mono',monospace;color:var(--ink-dim)}
.tn__gains b{color:var(--signal);font-weight:700}
.tn__share{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-top:16px}
.tn--desk .tn__lead{margin-bottom:14px}
.tn--soon .tn__grid{margin-top:18px}
@media (max-width:560px){.tn{padding:18px 14px}.tn__grid{gap:3px}.tb__bars{height:58px;gap:2px}.tb__bars i{width:6px}.tb__val,.tb__hz{font-size:9.5px}}

/* ═══════════ exercise page header ═══════════ */
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;max-width:880px;margin:0 auto 16px;font:400 11px/1 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.crumb__back{display:inline-flex;align-items:center;gap:8px;color:var(--ink-dim);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:9px 14px;background:rgba(255,238,215,.03);transition:all .2s}
.crumb__back:hover{color:var(--ink);border-color:var(--line-strong)}
.crumb__here{color:var(--ink-faint)}
.crumb__here b{color:var(--ink);font-weight:700}
.crumb__step{margin-left:auto;color:var(--amber)}

/* ═══════════ about this exercise (under the module: what it trains, in words a crawler can read) ═══════════ */
.about{max-width:880px;margin:clamp(56px,8vw,96px) auto 0;padding:clamp(28px,4vw,40px) 0 clamp(8px,2vw,24px);border-top:1px solid var(--line-soft);display:grid;gap:18px}
.about__title{font-size:clamp(34px,4.6vw,54px)}
.about__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,3vw,40px);margin-top:8px}
.about h3{font:700 11.5px/1.3 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:0 0 12px}
.about p,.about li{color:var(--ink-dim);font-size:16px;line-height:1.65}
.about p{margin:0 0 12px}
.about p + h3{margin-top:24px}
.about b{color:var(--ink);font-weight:600}
.about ol{margin:0;padding-left:22px}
.about li{margin:0 0 8px;padding-left:4px}
.about li::marker{font:700 13px 'Space Mono',monospace;color:var(--signal)}
.about__next{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 24px;margin:6px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);font:400 11px/1.4 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.about__next a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(var(--signal-rgb),.35)}
.about__next a:hover{border-bottom-color:var(--signal)}

/* ═══════════ the trainer module ═══════════ */
.eqt{position:relative;max-width:880px;margin:0 auto;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,#1e1813,#15110d 30%,#120f0b);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,240,222,.08),0 40px 80px -40px rgba(0,0,0,.95),0 0 100px -40px rgba(var(--amber-rgb),.18)}
.eqt__bar{display:flex;align-items:center;gap:12px;padding:14px clamp(18px,3.4vw,32px);border-bottom:1px solid var(--line-soft);background:rgba(0,0,0,.22)}
.eqt__id{font:400 11px/1 'Space Mono',monospace;letter-spacing:.14em;color:var(--amber);text-transform:uppercase;white-space:nowrap;flex:none}
.eqt__nm{font:700 11px/1.35 'Space Mono',monospace;letter-spacing:.14em;color:var(--ink);text-transform:uppercase;margin:0}
.eqt__io{margin-left:auto;display:flex;align-items:center;gap:8px;font:400 10.5px/1 'Space Mono',monospace;color:var(--ink-faint);letter-spacing:.12em;text-transform:uppercase}
.eqt:not(.playing) .led--pulse{animation:none}   /* a standby light holds steady; it blinks only with signal */

.eqt__stats{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line-soft);background:rgba(0,0,0,.12)}
.eqt__stat{flex:1;min-width:90px;padding:12px 14px 12px clamp(18px,3.4vw,32px);border-right:1px solid var(--line-soft)}
.eqt__stat:last-child{border-right:none}
.eqt__stat u{display:block;font:400 9.5px/1 'Space Mono',monospace;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase;text-decoration:none}
.eqt__stat b{display:block;font:700 15.5px/1.1 'Space Mono',monospace;color:var(--signal);margin-top:7px;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(var(--signal-rgb),.35)}
.eqt__stat.gold b{color:var(--level);text-shadow:0 0 12px rgba(var(--level-rgb),.35)}

.eqt__screen{position:relative;padding:clamp(22px,3.6vw,36px) clamp(18px,3.4vw,32px);border-bottom:1px solid var(--line-soft);overflow:hidden;
  background:radial-gradient(110% 70% at 50% 0%,rgba(var(--amber-rgb),.06),transparent 60%),var(--screen)}
.eqt__screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 50%,rgba(0,0,0,.06) 50%);background-size:100% 3px;opacity:.6}
.eqt__lvl{font:700 11px/1.3 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.eqt__prompt{font:800 clamp(22px,3.1vw,32px)/1.08 'Archivo',sans-serif;font-stretch:118%;letter-spacing:-.012em;color:var(--ink);margin:12px 0 8px}
.eqt__sub{font-size:15.5px;line-height:1.55;color:var(--ink-dim);max-width:58ch;margin:0}

/* cosmetic VU strip (never shows the answer: same motion whatever the band) */
.eqt__vu{height:44px;display:flex;align-items:flex-end;gap:3px;margin:22px 0 4px}
.eqt__vu i{flex:1;height:100%;transform-origin:bottom;border-radius:2px;background:linear-gradient(0deg,rgba(var(--amber-rgb),.95),rgba(var(--signal-rgb),.85));opacity:.6;transform:scaleY(.06);min-width:1px}
.eqt:not(.playing) .eqt__vu i{opacity:.28}
.eqt.playing .eqt__vu i{animation:vu 1.1s ease-in-out infinite alternate}
.eqt__vuscale{display:flex;justify-content:space-between;font:400 10px/1 'Space Mono',monospace;color:var(--ink-faint);letter-spacing:.04em;margin-top:22px}

.eqt__transport{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;position:relative;z-index:2}
.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;font:600 15px/1 'Archivo',sans-serif;letter-spacing:.005em;padding:0 20px;cursor:pointer;
  border-radius:var(--r);border:1px solid var(--line-strong);background:rgba(255,238,215,.04);color:var(--ink);transition:transform .2s var(--ease),box-shadow .25s,background .2s,border-color .2s,color .2s}
.tbtn:hover{border-color:rgba(255,226,186,.34);background:rgba(255,238,215,.08)}
.tbtn--main{color:var(--on-signal);border-color:transparent;background:linear-gradient(180deg,#5de8d6 0%,#2dd4bf 45%,#1fb8a5 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.18),0 12px 30px -12px rgba(var(--signal-rgb),.6)}
.tbtn--main:hover{color:var(--on-signal);background:linear-gradient(180deg,#6aeedd 0%,#35dcc7 45%,#22bfab 100%);border-color:transparent;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.18),0 18px 40px -14px rgba(var(--signal-rgb),.85)}
.tbtn--ab{font-family:'Space Mono',monospace;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;min-width:124px}
.tbtn--ab.in{border-color:var(--signal);color:var(--signal);background:rgba(var(--signal-rgb),.1);box-shadow:0 0 24px -8px rgba(var(--signal-rgb),.7)}
.tbtn--ab.out{border-color:var(--level);color:var(--level);background:rgba(var(--level-rgb),.08)}
.tbtn[disabled]{color:var(--ink-faint);border-color:var(--line-soft);background:transparent;pointer-events:none;box-shadow:none}
.tbtn--main[disabled]{background:rgba(255,238,215,.04);border-color:var(--line);color:var(--ink-faint)}
.eqt__hint{display:none}

.eqt__answers{padding:clamp(18px,3vw,26px) clamp(18px,3.4vw,32px);display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;border-bottom:1px solid var(--line-soft)}
.eqt__answers:empty{display:none}
.fbtn{font:700 15px/1 'Space Mono',monospace;letter-spacing:.01em;padding:17px 8px;cursor:pointer;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,238,215,.05),rgba(255,238,215,.015)),#100d0a;color:var(--ink);text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,240,222,.05);transition:transform .15s var(--ease),border-color .15s,color .15s,background .15s,box-shadow .2s}
.fbtn small{display:block;font:500 10.5px/1.25 'Archivo',sans-serif;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase;margin-top:6px}
.fbtn:hover{border-color:rgba(var(--signal-rgb),.7);color:var(--signal);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,240,222,.06),0 12px 26px -14px rgba(var(--signal-rgb),.7)}
.fbtn:active{transform:translateY(0)}
.fbtn[disabled]{pointer-events:none}
.fbtn.dim{color:var(--ink-faint);border-color:var(--line-soft);opacity:.7}
.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),.15);color:var(--signal);box-shadow:0 0 30px -8px rgba(var(--signal-rgb),.7);animation:pop .4s var(--ease)}
.fbtn.miss{border-color:var(--peak);background:rgba(var(--peak-rgb),.1);color:var(--peak);animation:shake .4s var(--ease)}
@keyframes pop{40%{transform:scale(1.04)}}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

.eqt__fb{padding:clamp(18px,3vw,26px) clamp(18px,3.4vw,32px);border-bottom:1px solid var(--line-soft);display:none}
.eqt__fb.show{display:block;animation:rise .45s var(--ease)}
/* Comp drills (compdrill.js): two big answers, Ask Dan's bubbles, and after an answer what each version was
   and its gain reduction across the loop (A in the signal teal, B in the level gold) */
.cd-answers .fbtn{font-size:22px;padding:22px 8px}
.cd-sides{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media (max-width:560px){.cd-sides{grid-template-columns:1fr}}
.cd-side{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(255,238,215,.02)}
.cd-side p{margin:4px 0 0;font-size:14px;color:var(--ink-dim);line-height:1.5}
.cd-side p b{color:var(--ink);font-weight:600}
.cd-side__k{font:700 13px/1 'Space Mono',monospace;color:var(--signal)}
.cd-side--b .cd-side__k{color:var(--level)}
.cd-curve{display:block;width:100%;height:100px;margin-top:12px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(0,0,0,.25)}
/* Identify scrolls the prompt or the Next button into view. html's scroll-padding-top already keeps
   anything scrolled to clear of the header (a scroll-margin-top here would double it); these clear
   the key rail at the bottom. */
#btn-next{scroll-margin-bottom:calc(var(--rail-b) + 24px)}
#h-yours{scroll-margin-bottom:calc(var(--rail-b) + 72px)}
/* after a failed level: Help me hear it on the top mix-up, with Retry Level under it */
.eqt__fb.practice{display:flex;flex-direction:column}
.eqt__fb.practice .eqt__verdict,.eqt__fb.practice .eqt__blurb{display:none}
.eqt__fb.practice>.eqt__transport{order:2}
.eqt__fb.practice .eqt__help{margin-top:16px}
.eqt__verdict{font:800 clamp(20px,2.4vw,24px)/1.15 'Archivo',sans-serif;font-stretch:115%;letter-spacing:-.01em}
.eqt__verdict.good{color:var(--signal);text-shadow:0 0 24px rgba(var(--signal-rgb),.4)}
.eqt__verdict.bad{color:var(--peak)}
.eqt__verdict.mid{color:var(--level)}
.eqt__bandstrip{display:flex;gap:4px;margin:16px 0 12px}
.eqt__bandstrip span{flex:1;padding:9px 2px;text-align:center;border-radius:8px;font:400 10px/1 'Space Mono',monospace;letter-spacing:.02em;color:var(--ink-faint);border:1px solid var(--line-soft);background:rgba(0,0,0,.3)}
.eqt__bandstrip span.ans{border-color:var(--signal);color:var(--signal);background:rgba(var(--signal-rgb),.13);box-shadow:0 0 14px rgba(var(--signal-rgb),.3)}
.eqt__bandstrip span.picked{border-color:var(--peak);color:var(--peak);background:rgba(var(--peak-rgb),.09)}
.eqt__blurb{font-size:15px;color:var(--ink-dim);line-height:1.65;max-width:62ch;margin:12px 0 0}
.eqt__blurb b{color:var(--ink);font-weight:600}

.eqt__result{padding:clamp(26px,4.4vw,44px) clamp(18px,3.4vw,32px);text-align:center;display:none;border-bottom:1px solid var(--line-soft);
  background:radial-gradient(60% 80% at 50% 0%,rgba(var(--signal-rgb),.09),transparent 70%)}
.eqt__result.show{display:block;animation:rise .5s var(--ease)}
.eqt__result .big{font:800 clamp(56px,9vw,96px)/.9 'Saira Condensed',sans-serif;color:var(--ink);letter-spacing:.01em}
.eqt__result .big i{font-style:normal;color:var(--signal);text-shadow:0 0 40px rgba(var(--signal-rgb),.5)}
.eqt__result p{color:var(--ink-dim);font-size:15.5px;line-height:1.6;max-width:50ch;margin:14px auto 22px}
.eqt__result .eqt__transport{justify-content:center}

.eqt__levels{display:flex;flex-wrap:wrap;gap:8px;padding:18px clamp(18px,3.4vw,32px);background:rgba(0,0,0,.18)}
.lchip{display:inline-flex;align-items:center;gap:6px;font:500 13px/1 'Archivo',sans-serif;padding:9px 13px;border-radius:999px;border:1px solid var(--line);color:var(--ink-dim);
  cursor:pointer;background:rgba(255,238,215,.025);transition:all .2s}
.lchip:hover{border-color:rgba(var(--signal-rgb),.6);color:var(--ink)}
.lchip.on{border-color:var(--signal);color:var(--signal);background:rgba(var(--signal-rgb),.1)}
.lchip.done::after{content:"✓";color:var(--signal);font-weight:700}
.lchip.lock{opacity:.6}
.lchip.lock::before{content:"🔒";font-size:10px}
.lchip.pro::after{content:"Pro";font:700 9px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--level);border:1px solid rgba(var(--level-rgb),.4);border-radius:4px;padding:2px 4px}
.lchip.pro.done::after{content:"✓";color:var(--signal);border:0;padding:0;font:700 13px/1 'Archivo',sans-serif;letter-spacing:0}

.levels-note{margin:0;padding:0 clamp(18px,3.4vw,32px) 18px;background:rgba(0,0,0,.18);font-size:13.5px;color:var(--ink-faint)}
.levels-note a{color:var(--level);text-decoration:none;border-bottom:1px solid rgba(var(--level-rgb),.4)}
.eqt__levels[hidden]+.levels-note{display:none}

/* email gate */
.eqt__gate{display:none;padding:clamp(24px,4vw,40px);border-bottom:1px solid var(--line-soft);background:radial-gradient(90% 120% at 0% 0%,rgba(var(--signal-rgb),.12),transparent 60%)}
.eqt__gate.show{display:block}
.eqt__gate h3{font:800 clamp(28px,3.4vw,38px)/.95 'Saira Condensed',sans-serif;text-transform:uppercase;margin:10px 0 10px;color:var(--ink)}
.eqt__gate p{color:var(--ink-dim);font-size:15px;line-height:1.6;max-width:56ch;margin:0 0 18px}
.eqt__gate form{display:flex;gap:10px;flex-wrap:wrap;max-width:480px}
.eqt__gate input[type="email"]{flex:1;min-width:200px;height:50px;padding:0 16px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--line-strong);color:var(--ink);font:15px 'Archivo',sans-serif}
.eqt__gate input[type="email"]:focus{outline:none;border-color:var(--signal)}
.eqt__gate .gmsg{font:400 12px/1.4 'Space Mono',monospace;letter-spacing:.02em;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{border-radius:18px}
  .eqt__answers{grid-template-columns:repeat(3,1fr)}
  .eqt__bandstrip span{font-size:8.5px;padding:8px 1px}
  /* never narrower than its own label ("Challenge", "Instrument"): the strip wraps instead */
  .eqt__stat{min-width:auto;padding:10px 10px}
  .eqt__stat b{font-size:14px}
}
/* phones: a tighter question screen, so after Next the first answers show under the prompt
   (a 360x640 phone shows as many as it did before the redesign) */
@media(max-width:480px){
  .eqt__prompt{font-size:20px;margin:10px 0 6px}
  .eqt__sub{font-size:14.5px;line-height:1.5}
  .eqt__vuscale{margin-top:14px}
  .eqt__vu{height:34px;margin:12px 0 2px}
  .eqt__transport{margin-top:16px}
  .eqt__answers{gap:8px}
  .fbtn{padding:14px 6px}
}
@media(prefers-reduced-motion:reduce){.eqt.playing .eqt__vu i{animation:none;transform:scaleY(.5)}}

/* first-go guidance (coach.js): a teal ring on the next thing to press. A steady ring, plus a ping
   that runs only while the loop plays, so a stopped page stays still */
.coach{position:relative}
.coach,.coach-dot{scroll-margin-bottom:calc(var(--rail-b) + 24px)}   /* html's scroll-padding-top covers the header */
.coach::before,.coach::after{content:"";position:absolute;inset:-6px;border-radius:16px;pointer-events:none;border:2px solid var(--signal)}
.coach::before{opacity:.5}
.coach::after{opacity:0}
.eqt.playing .coach::after{animation:coach 1.6s var(--ease) infinite}
.coach--area::before,.coach--area::after{inset:8px}
.eqt.playing .coach--area::after{animation-name:coach-area}
.coach-dot{position:absolute;z-index:3;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;pointer-events:none;border:2px solid rgba(var(--signal-rgb),.5)}
.coach-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--signal);opacity:0}
.eqt.playing .coach-dot::after{animation:coach 1.6s var(--ease) infinite}
@keyframes coach{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}
@keyframes coach-area{50%{opacity:.9}}

/* ── Ask Dan, the mentor in the Comp drills (compdrill.js): Dan's lines beside a thin teal rule, your taps on
   the right, then what you can tap. No box and no header: it's the coach talking, not a widget. ── */
.mt{margin:20px 0 4px;padding:2px 0 2px 16px;border-left:2px solid rgba(var(--signal-rgb),.6);animation:rise .4s var(--ease)}
.mt__log{display:flex;flex-direction:column;gap:10px}
.mt__log--empty{display:none}
.mt .mt__dan{margin:0;font-size:16px;line-height:1.6;color:var(--ink);max-width:64ch}
.mt .mt__dan b{font-weight:650;color:var(--ink)}
.mt .mt__you{margin:0;align-self:flex-end;max-width:82%;font-size:14px;line-height:1.45;color:var(--ink-dim);padding:7px 12px;border-radius:12px 12px 4px 12px;background:rgba(255,238,215,.06);border:1px solid var(--line)}
.mt .mt__note{margin:0;font:400 12px/1.5 'Space Mono',monospace;letter-spacing:.02em;color:var(--ink-faint)}
.mt__typing{display:flex;gap:4px;align-items:center;height:36px;margin:0}
/* Ask Dan thinking: the waveform from the Ask Dan site (ask.danmurtagh.com .typing-indicator), five bars in a ripple */
.mt__typing i{width:4px;border-radius:2px;background:var(--signal);animation:mtwave 1.2s ease-in-out infinite}
.mt__typing i:nth-child(1),.mt__typing i:nth-child(5){height:12px}
.mt__typing i:nth-child(2),.mt__typing i:nth-child(4){height:22px}
.mt__typing i:nth-child(3){height:32px}
.mt__typing i:nth-child(2){animation-delay:.15s}
.mt__typing i:nth-child(3){animation-delay:.3s}
.mt__typing i:nth-child(4){animation-delay:.45s}
.mt__typing i:nth-child(5){animation-delay:.6s}
@keyframes mtwave{0%,100%{transform:scaleY(.4);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@media(max-width:600px){.mt__typing{gap:3px;height:28px}.mt__typing i{width:3px}.mt__typing i:nth-child(1),.mt__typing i:nth-child(5){height:8px}.mt__typing i:nth-child(2),.mt__typing i:nth-child(4){height:14px}.mt__typing i:nth-child(3){height:22px}}
.mt__dan--live::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--signal);animation:mtcaret 1s steps(2) infinite}
@keyframes mtcaret{50%{opacity:0}}
.mt__chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.mt__chip{font:500 13px/1.25 'Archivo',sans-serif;padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,238,215,.035);color:var(--ink-dim);cursor:pointer;text-align:left;transition:all .18s}
.mt__chip:hover{border-color:rgba(var(--signal-rgb),.6);color:var(--ink)}
.mt__chip.on{border-color:var(--signal);color:var(--signal);background:rgba(var(--signal-rgb),.12)}
.mt__chip--quiet{border-color:transparent;background:none;color:var(--ink-faint);padding-left:6px;padding-right:6px}
.mt__chip--quiet:hover{border-color:transparent;color:var(--ink)}
.mt__flag{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:0;background:none;color:var(--ink-faint);opacity:.55;cursor:pointer;transition:opacity .18s,color .18s}
.mt__flag:hover{opacity:1;color:var(--ink-dim)}
.mt__flag.on{opacity:1;color:var(--level);pointer-events:none}
.mt__dan .mt__flag{width:24px;height:24px;margin:0 0 0 6px;vertical-align:-5px}
.mt__ask{display:flex;gap:8px;margin-top:14px}
.mt__ask input{flex:1;min-width:0;height:42px;padding:0 14px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid var(--line-strong);color:var(--ink);font:15px 'Archivo',sans-serif}
.mt__ask input:focus{outline:none;border-color:var(--signal)}
.mt .mt__foot{margin:12px 0 0;font:400 11px/1.5 'Space Mono',monospace;letter-spacing:.03em;color:var(--ink-faint)}
.mt__foot a{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(var(--signal-rgb),.35)}
.eqt__result .mt{text-align:left;max-width:60ch;margin:6px auto 26px}
.eqt__help .mt{margin:0 0 16px}
.mt__link{display:inline-flex;align-items:baseline;gap:6px;align-self:flex-start;margin:-2px 0 0;font:500 14px/1.4 'Archivo',sans-serif;color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(var(--signal-rgb),.35)}
.mt__link span{font:400 11px/1.4 'Space Mono',monospace;letter-spacing:.03em;color:var(--ink-faint)}
.mt__link i{font-style:normal;font-size:12px}
.mt__link:hover{border-bottom-color:var(--signal)}
.mt__chip--go{text-decoration:none;border-color:rgba(var(--signal-rgb),.6);color:var(--signal)}
.ears__dan{margin-top:18px}
.rst__act .mt{flex-basis:100%;margin:4px 0 0}
.eqt__screen > .mt{margin:14px 0 0;max-width:62ch}
.hbtn--hint{border-color:rgba(var(--level-rgb),.75);color:var(--level);box-shadow:0 0 22px -10px rgba(var(--level-rgb),.9)}
.ears__dan .mt{margin:4px 0 0}
.eqt__help .hlp__cue[hidden]{display:none}
/* Dan points at Help me hear it: the button itself lights up, rather than a second one in his reply */
.tbtn--hint{border-color:rgba(var(--level-rgb),.75);color:var(--level);box-shadow:0 0 24px -10px rgba(var(--level-rgb),.9)}
@media(prefers-reduced-motion:reduce){.mt{animation:none}.mt__typing i{animation:none;opacity:.8;transform:scaleY(.6)}.mt__dan--live::after{animation:none}}

/* ── Help me hear it ── */
.eqt__help{display:none;margin-top:18px;padding:20px;border-radius:16px;border:1px solid rgba(var(--level-rgb),.3);background:linear-gradient(180deg,rgba(var(--level-rgb),.06),rgba(0,0,0,.2));position:relative}
.eqt__help.show{display:block;animation:rise .45s var(--ease)}
.hlp__ey{font:700 10.5px/1 'Space Mono',monospace;letter-spacing:.16em;color:var(--level);text-transform:uppercase}
/* the heading, with Exaggerate on the right: a switch for the whole panel, not another version */
.hlp__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.hlp__hd .hbtn{min-height:34px;padding:0 13px;font-size:13px}
.eqt__help .hlp__cue{font-size:15px;color:var(--ink-dim);max-width:62ch;margin:12px 0 16px;line-height:1.6}
.eqt__help .hlp__cue b{color:var(--ink);font-weight:600}
.hlp__row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hbtn{display:inline-flex;align-items:center;min-height:42px;font:600 14px/1 'Archivo',sans-serif;padding:0 16px;cursor:pointer;border-radius:10px;border:1px solid var(--line-strong);
  background:rgba(255,238,215,.04);color:var(--ink-dim);transition:all .18s}
.hbtn:hover{border-color:rgba(var(--signal-rgb),.6);color:var(--ink)}
.hbtn.on{background:var(--signal);border-color:var(--signal);color:var(--on-signal);box-shadow:0 0 22px -6px rgba(var(--signal-rgb),.8)}
.hbtn.yours.on{background:var(--peak);border-color:var(--peak);color:var(--on-peak);box-shadow:0 0 22px -6px rgba(var(--peak-rgb),.8)}
.hbtn--gold.on{background:var(--level);border-color:var(--level);color:var(--on-level)}
.hbtn[disabled]{opacity:.45;pointer-events:none}
.eqt__help .hlp__hint{font:400 11px/1.5 'Space Mono',monospace;letter-spacing:.04em;color:var(--ink-faint);margin-top:12px}
.hlp__drill{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.eqt__help .hlp__dq{font-size:15px;color:var(--ink);margin:0 0 12px}
.eqt__help .hlp__dv{font:400 12.5px/1.5 'Space Mono',monospace;letter-spacing:.02em;margin-top:12px}
.hlp__dv.ok{color:var(--signal)}
.hlp__dv.no{color:var(--peak)}

/* ═══════════ graph exercises (Restore, Sweep, Hunt, Cuts, Context, Fix the Mix) ═══════════ */
.rst__graph{margin:20px 0 10px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(100% 80% at 50% 100%,rgba(var(--amber-rgb),.05),transparent 70%),#080706;
  box-shadow:inset 0 10px 40px rgba(0,0,0,.5);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(255,226,186,.07);stroke-width:1}
.rg-zero{stroke:rgba(255,226,186,.22);stroke-width:1}
.rg-lab{fill:var(--ink-faint);font-family:'Space Mono',monospace;font-size:13px}
@media (max-width:560px){.rg-lab{font-size:24px}}
.rc{fill:none;stroke-width:2.5;stroke-linejoin:round}
.rc--user{stroke:var(--signal);filter:drop-shadow(0 0 5px rgba(var(--signal-rgb),.55))}
.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 9px rgba(var(--signal-rgb),.7))}
.rnode:focus{outline:none;stroke:var(--ink)}
.rst__graph.locked .rnode{cursor:default;opacity:.8}
.rnode.is-active{stroke:var(--level);stroke-width:2.5}
.rnode.sweep{fill:var(--level);filter:drop-shadow(0 0 9px rgba(var(--level-rgb),.7))}
.rg-mark{stroke:var(--signal);stroke-width:1.5;stroke-dasharray:3 4;opacity:.7}
.rst__readout{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font:400 11px/1.4 'Space Mono',monospace;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:14px}
.lg{font-style:normal;white-space:nowrap}
.lg::before{content:"";display:inline-block;width:14px;height:0;border-top:2.5px solid;vertical-align:middle;margin-right:6px}
.lg--app{color:var(--peak)} .lg--app::before{border-top-style:dashed}
.lg--user{color:var(--signal)}
.lg--res{color:var(--level)}
@media (max-width:560px){.rst__legend{margin-left:0;flex-basis:100%;flex-wrap:wrap;gap:6px 14px}}
.rst__listen{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;position:relative;z-index:2}
.rst__listen > span:not(.bank){font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);align-self:center;margin-right:4px}
.rst__act{padding:clamp(16px,3vw,24px) clamp(18px,3.4vw,32px);border-bottom:1px solid var(--line-soft);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rst__verdict{flex-basis:100%;margin-top:6px}
/* after an answer: read it (the verdict, then Ask Dan's word), then act (Next, last, where the eye lands) */
.rst__act > .rst__verdict{order:-2;margin:0 0 4px}
.rst__act > .mt{order:-1}
/* ── Listen controls (spec: Dan AI/mixchops-listen-controls-spec.md, 14 Oct 2026), as on a console ──
   A key that stays on has a lamp; one that acts once (Check, Next, Help me hear it) doesn't. Keys sit in a recessed
   tray (.bank), interlocked: the teal lamp is what you're hearing, one at a time. The aids (.key--aid, Exaggerate
   and Isolate) have gold lamps: lit while changing what plays, hollow and breathing (armed) while Bypass plays.
   Latched keys sit lower, like a latching switch. No sounds of their own; shortcuts live in the bar, not on keys. */
.bank{display:inline-flex;gap:6px;padding:6px;border-radius:14px;background:linear-gradient(180deg,#070605,#110d0a);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,226,186,.05),0 1px 0 rgba(255,226,186,.07)}
.bank[hidden],.key[hidden]{display:none}
.key{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 16px 0 14px;border-radius:9px;cursor:pointer;
  font:600 14.5px/1 'Archivo',sans-serif;letter-spacing:.005em;color:var(--ink-dim);white-space:nowrap;
  background:linear-gradient(180deg,#2c241c 0%,#201913 100%);border:1px solid rgba(255,226,186,.10);
  box-shadow:inset 0 1px 0 rgba(255,236,210,.10),inset 0 -1px 0 rgba(0,0,0,.4),0 3px 0 #060504,0 5px 10px -3px rgba(0,0,0,.7);
  transition:transform .07s var(--ease),box-shadow .07s,background .15s,color .15s}
.key::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#3d342a,#140f0b 75%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),0 0 0 2px rgba(0,0,0,.45),0 1px 0 2px rgba(255,226,186,.06);transition:background .09s,box-shadow .3s}
.key:hover{color:var(--ink);background:linear-gradient(180deg,#322920 0%,#241c16 100%)}
.key:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,236,210,.06),inset 0 -1px 0 rgba(0,0,0,.4),0 0 0 #060504,0 1px 3px -1px rgba(0,0,0,.7)}
.key.on{transform:translateY(2px);color:var(--ink);background:linear-gradient(180deg,#261f18 0%,#1c1611 100%);
  box-shadow:inset 0 1px 0 rgba(255,236,210,.06),inset 0 -1px 0 rgba(0,0,0,.4),0 1px 0 #060504,0 2px 5px -2px rgba(0,0,0,.7)}
.key.on::before{background:radial-gradient(circle at 35% 30%,#e6fffb 0%,#6ff0dd 30%,#2dd4bf 62%,#0f766e 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 0 0 2px rgba(0,0,0,.45),0 0 8px rgba(var(--signal-rgb),.95),0 0 20px rgba(var(--signal-rgb),.45)}
.key--aid.on::before{background:radial-gradient(circle at 35% 30%,#fff6dc 0%,#f3d58f 30%,#d8ad4e 62%,#8a6420 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 0 0 2px rgba(0,0,0,.45),0 0 8px rgba(var(--level-rgb),.95),0 0 20px rgba(var(--level-rgb),.45)}
.key--aid.armed::before{background:radial-gradient(circle at 50% 50%,#140f0b 38%,rgba(var(--level-rgb),.55) 42%,rgba(var(--level-rgb),.55) 62%,#140f0b 66%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),0 0 0 2px rgba(0,0,0,.45),0 0 6px rgba(var(--level-rgb),.35);animation:armed 2.4s var(--ease-io) infinite}
@keyframes armed{50%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.7),0 0 0 2px rgba(0,0,0,.45),0 0 10px rgba(var(--level-rgb),.6)}}
.key svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85;flex:none}
/* the first-go ring (coach.js) on a key: its ::before is the lamp, so the ring is ::after alone */
.key.coach::before{position:static;inset:auto;border:0;opacity:1;border-radius:50%}
.key.coach::after{opacity:.5}
.key[disabled]{cursor:default;color:var(--ink-faint);background:linear-gradient(180deg,#221c16 0%,#1a1511 100%);box-shadow:inset 0 1px 0 rgba(255,236,210,.05),0 2px 0 #060504;transform:none}
/* Ask Dan points at Isolate: the key itself shows it, a gold edge */
.key.hbtn--hint{border-color:rgba(var(--level-rgb),.75);color:var(--level)}
/* the transport: a machined ring round a dark face; the icon glows teal while playing */
.xport{--s:56px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--s);height:var(--s);border-radius:50%;border:0;padding:0;cursor:pointer;flex:none;align-self:center;
  background:conic-gradient(from 210deg,#5a4a37,#2a221a 18%,#7a6548 32%,#2a221a 50%,#4d3f2f 68%,#231c15 84%,#5a4a37);
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 3px 0 #050403,0 8px 18px -6px rgba(0,0,0,.9);transition:transform .07s var(--ease),box-shadow .07s;color:var(--ink-dim)}
.xport::before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#2a231c,#120e0b 70%);
  box-shadow:inset 0 1px 0 rgba(255,236,210,.08),inset 0 -2px 6px rgba(0,0,0,.6)}
.xport svg{position:relative;width:19px;height:19px;transition:color .15s,filter .2s}
.xport:hover{color:var(--ink)}
.xport:active{transform:translateY(2px);box-shadow:0 0 0 1px rgba(0,0,0,.7),0 1px 0 #050403,0 3px 8px -4px rgba(0,0,0,.9)}
.xport.on{color:var(--signal);box-shadow:0 0 0 1px rgba(0,0,0,.7),0 3px 0 #050403,0 0 26px -6px rgba(var(--signal-rgb),.7)}
.xport.on svg{filter:drop-shadow(0 0 6px rgba(var(--signal-rgb),.8))}
.xport[disabled]{cursor:default;opacity:.55}
.rst__listen > .xport{margin-right:8px}
/* the aids, after an answer, under the listen keys and lined up with them */
.rst__aids{margin-top:10px;padding-left:72px}
.bank--wrap{flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.key--aid.armed::before{animation:none}.key,.xport{transition:none}}
/* ── Balance (assets/js/ex/balance.js): the song's parts as channel strips on a console (Dan picked look A, 16 Oct
   2026). Each strip: its channel number, a lit display with the part's name and how far you've moved it, a long-throw
   fader (12 dB either way of where the challenge left it, printed scale; the centre is that start, never the answer)
   with a ridged cap, and a yellow solo key. After an answer, a gold pointer on the scale shows where the part belonged.
   Louder or Softer has an up and a down key per strip instead of a fader. */
.bdesk{--n:4;display:grid;grid-template-columns:repeat(var(--n),104px);justify-content:center;width:fit-content;max-width:100%;margin:22px auto 8px;padding:12px 0 14px;border-radius:10px;position:relative;z-index:2;
  background:linear-gradient(180deg,#1d1915,#0f0c0a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,236,210,.06),0 14px 30px -16px #000}
.strip{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 6px;min-width:0;box-shadow:inset -1px 0 0 rgba(0,0,0,.55),inset -2px 0 0 rgba(255,236,210,.04)}
.strip:last-child{box-shadow:none}
.strip__ch{font:700 9.5px/1 'Space Mono',monospace;letter-spacing:.1em;color:var(--ink-faint)}
.lcd{width:100%;max-width:86px;border-radius:3px;background:#06110e;border:1px solid #17241f;box-shadow:inset 0 1px 4px rgba(0,0,0,.9);padding:5px 4px 4px;text-align:center;
  font:700 10px/1.3 'Space Mono',monospace;color:#7ff5e2;text-shadow:0 0 6px rgba(var(--signal-rgb),.55);text-transform:uppercase;letter-spacing:.04em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lcd > span{display:block;overflow:hidden;text-overflow:ellipsis}
.strip__read{display:block;font-weight:400;font-variant-numeric:tabular-nums;color:#3f9f90;text-shadow:none;transition:color .15s,text-shadow .15s}
.strip__read.moved{color:#7ff5e2;text-shadow:0 0 6px rgba(var(--signal-rgb),.55)}
.fader{position:relative;width:100%;height:236px;cursor:grab;touch-action:none;outline:none}
.fader__scale{position:absolute;top:0;bottom:0;left:0;right:50%;font:400 8.5px/1 'Space Mono',monospace;color:var(--ink-faint);pointer-events:none}
.fader__scale i{position:absolute;right:13px;font-style:normal;transform:translateY(-50%)}
.fader__ticks{position:absolute;left:calc(50% + 7px);width:7px;top:0;bottom:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,226,186,.22) 0 1px,transparent 1px 12.5%) top/100% calc(100% + 1px) no-repeat}
.fader__slot{position:absolute;left:50%;top:-4px;bottom:-4px;width:4px;margin-left:-2px;border-radius:2px;background:#000;box-shadow:inset 0 1px 2px #000,0 0 0 1px rgba(0,0,0,.7),1px 0 0 rgba(255,236,210,.07)}
.fader__cap{position:absolute;left:50%;top:50%;width:34px;height:46px;transform:translate(-50%,-50%);border-radius:4px;z-index:3;
  background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 30%,transparent 70%,rgba(0,0,0,.3)),repeating-linear-gradient(180deg,#2c2723 0 2px,#151210 2px 5px);
  box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,236,210,.18),0 8px 12px -4px rgba(0,0,0,.95),0 2px 0 #000;transition:box-shadow .15s}
.fader__cap::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;background:#f4efe7;box-shadow:0 0 4px rgba(255,255,255,.4);transition:background .15s,box-shadow .15s}
.fader:focus-visible .fader__cap,.fader.is-drag .fader__cap{box-shadow:0 0 0 1px #000,0 0 0 3px rgba(var(--signal-rgb),.5),inset 0 1px 0 rgba(255,236,210,.18),0 8px 12px -4px rgba(0,0,0,.95)}
.fader:focus-visible .fader__cap::after,.fader.is-drag .fader__cap::after{background:var(--signal);box-shadow:0 0 6px rgba(var(--signal-rgb),.9)}
.fader.is-drag{cursor:grabbing}
.fader__ref{position:absolute;left:calc(50% - 24px);width:0;height:0;z-index:4;transform:translateY(-50%);border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--level);
  filter:drop-shadow(0 0 4px rgba(var(--level-rgb),.8));animation:fade-in .35s var(--ease)}
.fader__ref::after{content:"";position:absolute;left:-2px;top:-1px;width:42px;height:2px;background:rgba(var(--level-rgb),.85)}
@keyframes fade-in{from{opacity:0}}
.bdesk.locked .fader{cursor:default}
.bdesk.locked .fader__cap::after{opacity:.6}
.csolo{width:36px;height:24px;border-radius:3px;border:1px solid #000;cursor:pointer;font:700 10px/1 'Space Mono',monospace;color:var(--ink-faint);
  background:linear-gradient(180deg,#2a241f,#1a1613);box-shadow:inset 0 1px 0 rgba(255,236,210,.1),0 2px 0 #000;transition:transform .07s,background .12s,box-shadow .12s}
.csolo:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,236,210,.06)}
.csolo.on{color:#1b1404;background:linear-gradient(180deg,#ffe48a,#f5c542);box-shadow:0 0 12px rgba(245,197,66,.6),0 1px 0 #000}
.csolo[disabled]{cursor:default;opacity:.5}
.ckeys{display:flex;gap:6px}
.cmute{width:36px;height:24px;border-radius:3px;border:1px solid #000;cursor:pointer;font:700 10px/1 'Space Mono',monospace;color:var(--ink-faint);
  background:linear-gradient(180deg,#2a241f,#1a1613);box-shadow:inset 0 1px 0 rgba(255,236,210,.1),0 2px 0 #000;transition:transform .07s,background .12s,box-shadow .12s}
.cmute:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,236,210,.06)}
.cmute.on{color:#1d0705;background:linear-gradient(180deg,#ff9a8a,#ff6b6b);box-shadow:0 0 12px rgba(var(--peak-rgb),.55),0 1px 0 #000}
.cmute[disabled]{cursor:default;opacity:.5}
.strip__ans{display:flex;flex-direction:column;gap:10px;padding:8px 0 2px}
.cans{width:56px;height:58px;display:grid;place-items:center;border-radius:4px;border:1px solid #000;cursor:pointer;color:var(--ink-dim);
  background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 30%,transparent 70%,rgba(0,0,0,.25)),linear-gradient(180deg,#2c2621,#171310);
  box-shadow:inset 0 1px 0 rgba(255,236,210,.14),0 3px 0 #000,0 6px 10px -4px rgba(0,0,0,.9);transition:transform .07s,box-shadow .07s,color .12s}
.cans:hover{color:var(--ink)}
.cans:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,236,210,.08),0 0 0 #000}
.cans svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cans[disabled]{cursor:default;color:var(--ink-faint)}
.cans.is-right{color:var(--signal);box-shadow:inset 0 1px 0 rgba(255,236,210,.14),0 3px 0 #000,0 0 0 1px rgba(var(--signal-rgb),.7),0 0 16px -2px rgba(var(--signal-rgb),.6)}
.cans.is-wrong{color:var(--peak);box-shadow:inset 0 1px 0 rgba(255,236,210,.14),0 3px 0 #000,0 0 0 1px rgba(var(--peak-rgb),.7)}
@media (max-width:560px){
  .bdesk{grid-template-columns:repeat(var(--n),minmax(0,1fr));width:100%}
  .strip{padding:0 3px}
  .fader{height:184px}
  .fader__scale{display:none}
  .fader__cap{width:28px;height:40px}
  .fader__ref{left:calc(50% - 20px)}.fader__ref::after{width:34px}
  .lcd{font-size:9px;padding:4px 2px 3px}
  .ckeys{gap:3px}.csolo,.cmute{width:26px;height:28px}
  .cans{width:46px;height:52px}
}
/* a narrow phone, or a song with many parts: the two keys stack */
@media (max-width:360px){
  .ckeys{flex-direction:column;gap:5px}.csolo,.cmute{width:32px;height:28px}
}
/* the row that held only Start, once it's gone */
.eqt__transport:not(:has(> :not([hidden]))){display:none}
@media(max-width:600px){
  .rst__listen{gap:10px}.xport{--s:50px}.rst__listen > .xport{margin-right:0}
  .rst__listen > .bank{flex:1;min-width:0;gap:5px;padding:5px}
  .rst__listen > .bank .key{flex:1 1 0;min-width:0;padding:0 4px;gap:6px;font-size:13px;height:44px}
  .rst__listen > .bank .key svg{display:none}
  .rst__listen > .bank--wrap .key{flex:1 1 auto}
  .rst__listen > .bank:has(> .key:nth-child(4):not([hidden])){flex-wrap:wrap}
  .rst__listen > .bank:has(> .key:nth-child(4):not([hidden])) > .key{flex:1 1 calc(50% - 5px)}
  /* Help me hear it (Identify, the compression drills): each tray fills the row, its keys share it, long names wrap */
  .hlp__row > .bank{flex:1 1 100%;min-width:0;flex-wrap:nowrap;gap:5px;padding:5px}
  .hlp__row > .bank .key{flex:1 1 0;min-width:0;padding:6px 6px;gap:6px;font-size:13px;height:auto;min-height:44px;white-space:normal;line-height:1.15;text-align:center}
  .rst__aids{padding-left:60px}
}
/* after an answer: the verdict with Next beside it, Ask Dan under both (one column on a phone) */
.rst__act:has(> .rst__verdict:not(:empty)){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;row-gap:14px;align-items:start}
.rst__act:has(> .rst__verdict:not(:empty)) > .rst__verdict{grid-column:1;grid-row:1;margin:0}
.rst__act:has(> .rst__verdict:not(:empty)) > button{grid-column:2;grid-row:1;margin-top:2px}
.rst__act:has(> .rst__verdict:not(:empty)) > .mt{grid-column:1 / -1;grid-row:2;margin:0}
@media(max-width:600px){.rst__act:has(> .rst__verdict:not(:empty)){grid-template-columns:minmax(0,1fr)}.rst__act:has(> .rst__verdict:not(:empty)) > button{grid-column:1;grid-row:2;justify-self:start}.rst__act:has(> .rst__verdict:not(:empty)) > .mt{grid-row:3}}
.rst__verdict:empty{display:none}
/* nothing to press and nothing to say: no empty band */
.rst__act:not(:has(> button:not([hidden]))):not(:has(.rst__verdict:not(:empty))){display:none}
.fxm .rst__listen{margin-top:18px}
.fxm #fm-solo-cost{font-size:13px;color:var(--ink-faint);margin-top:8px}
.rst__verdict .eqt__verdict{display:flex;align-items:baseline;gap:12px}
.rst__verdict .eqt__verdict i{font:400 13px/1 'Space Mono',monospace;font-style:normal}
.rst__verdict p{color:var(--ink-dim);font-size:15px;line-height:1.6;max-width:62ch;margin:8px 0 0}
.rst__verdict p b{color:var(--ink)}
.hn-stage{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.hn-stage span{padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink-faint)}
.hn-stage span.on{color:var(--amber);border-color:rgba(var(--amber-rgb),.5);background:rgba(var(--amber-rgb),.07)}
.hn-stage span.ok{color:var(--signal);border-color:rgba(var(--signal-rgb),.4)}

/* ═══════════ profile ═══════════ */
.me-rank{margin:6px 0 22px}
.me-rank__name{font:800 clamp(52px,7.6vw,96px)/.9 'Saira Condensed',sans-serif;text-transform:uppercase;margin:12px 0 10px;color:var(--ink)}
.me-rank__xp{font:400 12px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 14px}
.me-rank__xp b{color:var(--signal);font-size:18px}
.me-rank__bar{height:8px;border-radius:8px;background:rgba(255,238,215,.06);overflow:hidden}
.me-rank__bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--signal-dim),var(--signal));box-shadow:0 0 14px rgba(var(--signal-rgb),.6)}
.me-ladder{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.me-ladder li{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:10px;border:1px solid var(--line-soft);font:400 10.5px/1.2 'Space Mono',monospace;letter-spacing:.06em;color:var(--ink-faint)}
.me-ladder b{font:600 13px/1.2 'Archivo',sans-serif;color:var(--ink-dim);letter-spacing:0}
.me-ladder li.is-past b{color:var(--ink)}
.me-ladder li.is-now{border-color:rgba(var(--signal-rgb),.5);background:rgba(var(--signal-rgb),.06)}
.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:10px;margin:0 0 16px}
.me-tile{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:14px;background:var(--surface),var(--module);border:1px solid var(--line);box-shadow:var(--lift)}
.me-tile u{text-decoration:none;font:400 10px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.me-tile b{font:700 26px/1 'Space Mono',monospace;color:var(--signal);font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(var(--signal-rgb),.35)}
.me-tile.gold b{color:var(--level);text-shadow:0 0 16px rgba(var(--level-rgb),.35)}
.me-tile span{color:var(--ink-dim);font-size:13px}
@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 34px}
.me-share span{color:var(--ink-faint);font-size:13.5px}
.me-link{color:var(--signal)}
.me-hist{margin:0 0 34px}
.me-hist__plot{position:relative;border-radius:14px;background:var(--surface),var(--module);border:1px solid var(--line);padding:14px 14px 8px}
.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:6px;border-radius:8px;background:var(--bg);border:1px solid var(--line);font:400 11px/1 'Space Mono',monospace;color:var(--ink);pointer-events:none}
.me-ex{margin:0 0 34px}
.me-ex__list{display:flex;flex-direction:column;gap:8px}
.me-ex__row{display:grid;grid-template-columns:minmax(160px,1.2fr) 2fr auto;align-items:center;gap:16px;padding:14px 18px;border-radius:14px;background:var(--surface),var(--module);
  border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .25s var(--ease)}
.me-ex__row:hover{border-color:rgba(var(--signal-rgb),.45);transform:translateX(3px)}
.me-ex__name{font:800 22px/1 'Saira Condensed',sans-serif;text-transform:uppercase;display:flex;flex-direction:column}
.me-ex__n{font:400 11px/1 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
.xcard__bar{height:4px;border-radius:4px;background:rgba(255,238,215,.07);overflow:hidden}
.xcard__bar i{display:block;height:100%;border-radius:4px;background:var(--signal);box-shadow:0 0 8px rgba(var(--signal-rgb),.5)}
@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 34px}
.me-badges__g{font:700 10.5px/1 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:18px 0 10px}
.me-badges__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.badge{display:flex;flex-direction:column;gap:5px;padding:16px;border-radius:14px;background:rgba(0,0,0,.2);border:1px dashed var(--line)}
.badge__icon{font-size:20px;color:var(--ink-faint);line-height:1}
.badge b{font:800 20px/1 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-dim)}
.badge__desc{color:var(--ink-faint);font-size:13px;line-height:1.45;flex:1}
.badge__prog{height:3px;border-radius:3px;background:rgba(255,238,215,.06);margin-top:4px;overflow:hidden}
.badge__prog i{display:block;height:100%;background:var(--ink-faint)}
.badge__state{font:400 10px/1.3 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.badge.is-earned{border-style:solid;border-color:rgba(var(--level-rgb),.45);background:radial-gradient(100% 100% at 0% 0%,rgba(var(--level-rgb),.12),transparent 60%),var(--module);box-shadow:0 20px 40px -30px rgba(var(--level-rgb),.6)}
.badge.is-earned .badge__icon{color:var(--level);text-shadow:0 0 12px rgba(var(--level-rgb),.8)}
.badge.is-earned b{color:var(--ink)}
.badge.is-earned .badge__desc{color:var(--ink-dim)}
.badge.is-earned .badge__state{color:var(--level)}
.lib__ey{font:700 11.5px/1 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.lib__sub{color:var(--ink-dim);font-size:16px;max-width:60ch;line-height:1.6;margin:0}

/* ═══════════ account ═══════════ */
.acct{margin:0 0 28px;padding:22px 24px;border-radius:var(--r-lg);background:var(--surface),var(--module);border:1px solid var(--line);box-shadow:var(--lift);position:relative}
.acct__h{font:800 28px/1 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px}
.acct__p{color:var(--ink-dim);font-size:15px;line-height:1.6;margin:0 0 14px;max-width:66ch}
.acct__p b,.acct__ok b{color:var(--ink)}
.acct__ok{color:var(--signal);font-size:15px;margin:0 0 12px}
.acct__err{color:var(--peak);font-size:14px;margin:6px 0 10px}
.acct__fine{color:var(--ink-faint);font-size:13px;margin:8px 0 0;min-height:1em}
.acct__form{display:flex;gap:10px;flex-wrap:wrap;max-width:540px}
.acct__form input{flex:1;min-width:220px;height:50px;padding:0 16px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--line-strong);color:var(--ink);font:15px 'Archivo',sans-serif}
.acct__form input:focus{outline:none;border-color:var(--signal)}
.acct__row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.acct__del{background:none;border:none;color:var(--ink-faint);font:13px 'Archivo',sans-serif;text-decoration:underline;cursor:pointer;padding:6px 0}
.acct__del:hover{color:var(--peak)}
.gbtn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 18px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:12px;font:500 15px 'Archivo',sans-serif;cursor:pointer;margin:2px 0 4px}
.gbtn:hover{box-shadow:0 2px 10px rgba(0,0,0,.4)}
.acct__or{display:flex;align-items:center;gap:10px;max-width:540px;margin:14px 0;color:var(--ink-faint);font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.acct__or::before,.acct__or::after{content:"";flex:1;height:1px;background:var(--line)}
/* save-your-progress prompt on a result panel (nudge.js) */
.nudge{text-align:left;max-width:580px;margin:26px auto 0;padding:20px 22px;border-radius:16px;background:var(--surface),var(--module);border:1px solid rgba(var(--level-rgb),.3);position:relative}
.nudge__h{font:800 24px/1 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px}
.nudge .acct__form input{min-width:0}
.eqt__result .nudge p{max-width:none;margin:0 0 12px}
.eqt__result .nudge .acct__fine{margin:8px 0 0}
.nudge__no{background:none;border:none;color:var(--ink-dim);font:inherit;text-decoration:underline;cursor:pointer;padding:0;margin-left:6px}
.nudge__no:hover{color:var(--ink)}
.nudge__bars{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;height:84px;margin:4px 0 14px}
.nb{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.nb i{display:block;width:10px;border-radius:4px;background:var(--ink-faint);opacity:.7}
.nb u{text-decoration:none;font:400 10px/1 'Space Mono',monospace;color:var(--ink-faint)}
.nb.is-thin i{background:repeating-linear-gradient(0deg,var(--ink-faint) 0 2px,transparent 2px 4px)}
.nb.is-strong i{background:var(--signal);opacity:1;box-shadow:0 0 10px rgba(var(--signal-rgb),.5)}
.nb.is-strong u{color:var(--signal)}
.nb.is-weak i{background:var(--peak);opacity:1;box-shadow:0 0 10px rgba(var(--peak-rgb),.5)}
.nb.is-weak u{color:var(--peak)}
.nudge .nudge__also{margin:0 0 6px;color:var(--ink);font-size:14px}
.nudge__perks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.nudge__perks li{position:relative;padding-left:18px;color:var(--ink-dim);font-size:14px;line-height:1.45}
.nudge__perks li::before{content:'';position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--level);box-shadow:0 0 6px rgba(var(--level-rgb),.6)}

/* ═══════════ documents (privacy) and 404 ═══════════ */
.doc{max-width:760px;margin:0 auto 40px;color:var(--ink-dim);font-size:16.5px;line-height:1.75}
.doc__title{font:800 clamp(44px,6.4vw,76px)/.92 'Saira Condensed',sans-serif;text-transform:uppercase;color:var(--ink);margin:14px 0 10px}
.doc__meta{font:400 11px/1.6 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 28px}
.doc__lede{font-size:18px;color:var(--ink);line-height:1.65}
.doc h2{font:800 28px/1.05 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);margin:40px 0 12px;padding-top:18px;border-top:1px solid var(--line-soft)}
.doc h3{font:700 12px/1.3 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:26px 0 8px}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:20px}
.doc li{margin:0 0 6px}
.doc b{color:var(--ink);font-weight:600}
.doc a{color:var(--signal)}
.doc__note{font-size:14.5px;color:var(--ink-faint);border-left:2px solid var(--line-strong);padding:2px 0 2px 14px}
.doc__src{font:400 11px/1.6 'Space Mono',monospace;letter-spacing:.06em;color:var(--ink-faint)}
.doc .tool{scroll-margin-top:calc(var(--rail-h) + 16px)}
.doc__table{overflow-x:auto;margin:0 0 14px}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{font:400 10.5px/1.3 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.doc td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
/* a comparison table becomes one card per row on a phone, each cell labelled */
@media (max-width:640px){
  .doc__table--stack table,.doc__table--stack tbody,.doc__table--stack tr,.doc__table--stack td{display:block;width:auto}
  .doc__table--stack thead{display:none}
  .doc__table--stack tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .doc__table--stack td{border:0;padding:0;white-space:normal}
  .doc__table--stack td:first-child{font:800 22px/1.1 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.02em}
  .doc__table--stack td[data-label]::before{content:attr(data-label);display:block;margin:10px 0 2px;font:400 10px/1.3 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
}
/* ═══════════ Learn: the listen player (listen.js) ═══════════ */
.listen{margin:clamp(24px,4vw,34px) 0;min-width:0}
.listen__box{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,#1e1813,#15110d 30%,#120f0b);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,240,222,.08),0 30px 60px -36px rgba(0,0,0,.95),0 0 90px -40px rgba(var(--amber-rgb),.2)}
.listen__bar{display:flex;align-items:center;gap:10px;padding:12px clamp(14px,3vw,22px);border-bottom:1px solid var(--line-soft);background:rgba(0,0,0,.22);
  font:400 10.5px/1.2 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.listen__led{flex:none;background:var(--ink-faint);box-shadow:none}
.listen.is-playing .listen__led{background:var(--signal);box-shadow:0 0 8px var(--signal)}
.listen__nm{flex:none;font-weight:700;color:var(--amber)}
.listen__what{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-dim)}
.listen__io{margin-left:auto;flex:none}
.listen__screen{padding:clamp(16px,3vw,24px) clamp(14px,3vw,22px) clamp(18px,3vw,24px);background:radial-gradient(110% 70% at 50% 0%,rgba(var(--amber-rgb),.06),transparent 60%),var(--screen)}
.listen__prompt{margin:0 0 14px;font:700 16px/1.4 'Archivo',sans-serif;font-stretch:110%;color:var(--ink)}
.listen__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.listen__row:last-child{margin:16px 0 0}
.listen__k{font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-right:4px}
.listen__chip{min-height:38px}
.listen__graph{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(100% 80% at 50% 100%,rgba(var(--amber-rgb),.05),transparent 70%),#080706;box-shadow:inset 0 10px 40px rgba(0,0,0,.5)}
.listen__graph svg{display:block;width:100%;height:auto}
.ls-spec{fill:rgba(var(--amber-rgb),.1);stroke:rgba(255,196,120,.38);stroke-width:1.2;stroke-linejoin:round}
.ls-ghost{stroke:var(--signal);stroke-width:2;stroke-dasharray:7 7;opacity:.4}
.listen__node{cursor:default;transition:opacity .2s}
.listen__node.is-off{opacity:.4;filter:none}
.listen__read{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:12px 0 0;font:400 11px/1.5 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.listen__read b{color:var(--signal);font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:.02em}
.listen__read i{font-style:normal;color:var(--ink-dim)}
.listen__lm{margin-left:auto;color:var(--ink-dim);text-transform:none;letter-spacing:.04em}
.listen__lm.is-off{color:var(--level)}
.listen__sliders{display:grid;gap:8px;margin:16px 0 0}
.listen__slider{display:grid;grid-template-columns:96px minmax(0,1fr) 84px;align-items:center;gap:14px}
.listen__sk{font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.listen__sv{font:700 13.5px/1 'Space Mono',monospace;color:var(--signal);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.listen__slider input{-webkit-appearance:none;appearance:none;width:100%;height:32px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.listen__slider input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:rgba(255,238,215,.13)}
.listen__slider input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--signal);border:3px solid var(--on-signal);box-shadow:0 0 10px rgba(var(--signal-rgb),.6)}
.listen__slider input::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,238,215,.13)}
.listen__slider input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--signal);border:3px solid var(--on-signal);box-shadow:0 0 10px rgba(var(--signal-rgb),.6)}
.listen__slider input:focus-visible{outline:2px solid rgba(var(--signal-rgb),.8);outline-offset:2px;border-radius:8px}
.listen__deck{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 0}
.listen__play{min-width:120px}
.listen.is-loading .listen__play{opacity:.85;cursor:progress}
.listen__ab{display:flex;gap:6px}
.listen__side{justify-content:center;min-width:96px}
/* the side you're hearing is lit, not filled, so Play stays the one solid button */
.listen .hbtn.on{background:rgba(var(--signal-rgb),.1);border-color:var(--signal);color:var(--signal);box-shadow:0 0 22px -8px rgba(var(--signal-rgb),.7)}
.listen .listen__lmbtn.on{background:rgba(var(--level-rgb),.08);border-color:rgba(var(--level-rgb),.7);color:var(--level);box-shadow:none}
.listen__lmbtn::before{content:"";width:7px;height:7px;border-radius:50%;margin-right:9px;background:var(--ink-faint)}
.listen__lmbtn.on::before{background:var(--level);box-shadow:0 0 8px rgba(var(--level-rgb),.8)}
/* the second side glows until it has been heard: a steady ring, and a ping only while the loop plays */
.listen__side.is-hint{position:relative}
.listen.is-playing .listen__side.is-hint::before,.listen.is-playing .listen__side.is-hint::after{content:"";position:absolute;inset:-6px;border-radius:15px;border:2px solid var(--signal);pointer-events:none}
.listen.is-playing .listen__side.is-hint::before{opacity:.5}
.listen.is-playing .listen__side.is-hint::after{opacity:0;animation:coach 1.6s var(--ease) infinite}
.listen__lmbtn{margin-left:auto}
.listen figcaption{margin:12px 2px 0;font-size:14.5px;line-height:1.55;color:var(--ink-faint)}
.listen figcaption b{color:var(--ink-dim);font-weight:600}
.listen__nojs{margin:0;padding:16px 18px;border-radius:14px;border:1px dashed var(--line-strong);color:var(--ink-dim);font-size:15px}
@media (max-width:560px){
  .listen__slider{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .listen__slider input{grid-column:1/-1;grid-row:2}
  .listen__deck{gap:8px}
  .listen__play{flex:1 1 100%}
  .listen__ab{flex:1 1 100%}
  .listen__ab .hbtn{flex:1;justify-content:center;min-width:0}
  .listen__lmbtn{margin-left:0;flex:1 1 100%;justify-content:center}
  .listen__lm{margin-left:0}
}

/* ═══════════ Learn pages ═══════════ */
.doc .crumb{margin:0 0 18px;max-width:none}
.doc__lede + .listen{margin-top:clamp(18px,3vw,26px)}
.doc .listen a{color:inherit}
/* train it: the one call to action at the end of each page */
.train{margin:40px 0 0;padding:clamp(22px,4vw,32px);display:grid;gap:12px;justify-items:start;
  border-color:rgba(var(--signal-rgb),.35);background:radial-gradient(90% 120% at 100% 0%,rgba(var(--signal-rgb),.13),transparent 55%),var(--surface),var(--module)}
.doc .train h2{margin:0;padding:0;border:0;font-size:clamp(30px,4vw,40px);line-height:.95}
.train h2 em{font-style:normal;color:var(--signal)}
.train p{margin:0;color:var(--ink-dim);max-width:58ch}
.train .btn{margin-top:6px}
.doc .train .btn{color:var(--on-signal)}
.train__more{font:400 11px/1.6 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.doc .train__more a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(var(--signal-rgb),.35)}
/* other pages in the section */
.lmore{margin:44px 0 0;padding-top:22px;border-top:1px solid var(--line-soft)}
.doc .lmore h2{font:700 11.5px/1.3 'Space Mono',monospace;letter-spacing:.16em;color:var(--amber);margin:0 0 14px;padding:0;border:0}
.lmore ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.lmore li{margin:0}
.doc .lmore a{display:block;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,238,215,.025);color:var(--ink);text-decoration:none;font-size:15px;line-height:1.35;transition:border-color .2s,background .2s}
.doc .lmore a:hover{border-color:rgba(var(--signal-rgb),.5);background:rgba(var(--signal-rgb),.05)}
.lmore small{display:block;margin-top:3px;font:400 10.5px/1.3 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
/* a short quote in an article, with who said it under it */
.doc__quote{margin:26px 0;padding:2px 0 2px 18px;border-left:2px solid rgba(var(--amber-rgb),.6)}
.doc .doc__quote p{margin:0 0 8px;font-size:18px;line-height:1.5;color:var(--ink)}
.doc .doc__quote p:last-child{margin:0;font:400 11px/1.3 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
/* the home page's practice guides, under its Learn cards */
.lmore--home{margin:28px 0 0}
.lmore--home h3{font:700 11.5px/1.3 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:0 0 14px}
.lmore--home a{display:block;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,238,215,.025);color:var(--ink);text-decoration:none;font-size:15px;line-height:1.35;transition:border-color .2s,background .2s}
.lmore--home a:hover{border-color:rgba(var(--signal-rgb),.5);background:rgba(var(--signal-rgb),.05)}
/* the Learn cards: the hub, and the block on the home page (scoped to .lcards so the article styles don't reach them) */
.lcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px}
.doc .lcards{padding:0;margin:8px 0 0}
.lcards > li{margin:0;display:flex}
.lcards .lcard{flex:1;display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.lcards a.lcard:hover,.lcards a.lcard:focus-visible{transform:translateY(-3px);border-color:rgba(var(--signal-rgb),.45);box-shadow:var(--lift),0 26px 50px -34px rgba(var(--signal-rgb),.55);outline:none}
.lcards .lcard__k{font:700 10.5px/1.3 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.lcards .lcard__t{font:800 27px/.98 'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.015em;margin:0;color:var(--ink);text-wrap:balance}
.lcards .lcard__b{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.5}
.lcards .lcard__go{margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:6px;font:400 10.5px/1.3 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.lcards a.lcard:hover .lcard__go{color:var(--signal)}
.learn-hub{max-width:var(--wrap)}
.learn-hub > p:not(.doc__meta),.learn-hub > h2{max-width:68ch}
.learn-hub .doc__lede{max-width:62ch}

.nf{display:grid;justify-items:start;gap:20px;padding:clamp(20px,6vw,80px) 0}
.nf .display{font-size:clamp(56px,9vw,120px)}
.nf__links{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:8px 0 0}

/* toasts */
.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:4px;padding:14px 16px;border-radius:14px;background:linear-gradient(180deg,#221c16,#17130f);border:1px solid var(--line);
  border-left:3px solid var(--level);box-shadow:0 24px 50px -20px rgba(0,0,0,.95);animation:slideIn .35s var(--ease);transition:opacity .4s,transform .4s}
.toast--rank{border-left-color:var(--signal)}
.toast__k{font:700 10px/1 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--level)}
.toast--rank .toast__k{color:var(--signal)}
.toast--sound{border-left-color:var(--peak)}
.toast--sound .toast__k{color:var(--peak)}
.toast b{font:800 24px/1 'Saira Condensed',sans-serif;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)}

/* ═══════════ reduced motion ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal]:not(.is-in){opacity:1}
  .js [data-reveal].is-in{animation:none}
  body.live .ribbon i{transform:scaleY(.5)}
  .js .ears-demo:not(.is-in) i{transform:none}
  /* the Hear it card holds its EQ In state (library.js holds the Fix it card on the cut) */
  .art-ab2{display:none}
}
/* forced colours paint a plate behind each line of text: give display type room so it can't cover the line above */
@media (forced-colors:active){.display{line-height:1.05}}
/* ── Reward moments (assets/js/reward.js): the XP pop, the exercise's streak, question lights, the perfect sweep ── */
.rw-xp{position:absolute;left:0;top:-6px;white-space:nowrap;font:700 14px/1 'Space Mono',monospace;color:var(--level);text-shadow:0 0 10px rgba(var(--level-rgb),.8);pointer-events:none;
  animation:rw-float 1.3s cubic-bezier(.2,.8,.2,1) forwards;z-index:3}
@keyframes rw-float{0%{opacity:0;transform:translateY(8px) scale(.8)}15%{opacity:1;transform:translateY(0) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}
.rw-streak b{color:var(--ink-faint);text-shadow:none;transition:color .2s,text-shadow .2s}
.rw-streak.rw-s1 b{color:var(--ink)}
.rw-streak.rw-s3 b{color:var(--level);text-shadow:0 0 14px rgba(var(--level-rgb),.7)}
.rw-streak.rw-s5 b{color:#ffd77a;text-shadow:0 0 18px rgba(var(--level-rgb),.95),0 0 4px rgba(255,243,220,.25)}
.rw-tag{display:block;margin-top:5px;font:700 9.5px/1 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--level);height:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.rw-tag{display:none}}   /* on a phone the glow says it: the cell is too narrow for the words */
.rw-streak.rw-bump b{animation:rw-bump .45s cubic-bezier(.2,.8,.2,1)}
.rw-streak.rw-drop b{animation:rw-drop .5s ease}
@keyframes rw-bump{40%{transform:scale(1.35)}}
@keyframes rw-drop{30%{transform:translateY(3px);opacity:.4}}
.rw-lights{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px clamp(18px,3.4vw,32px);border-bottom:1px solid var(--line-soft);background:rgba(0,0,0,.12)}
.rw-lights i{width:18px;height:8px;border-radius:2px;background:#1c1713;box-shadow:inset 0 1px 2px #000}
.rw-lights i.ok{background:var(--signal);box-shadow:0 0 10px rgba(var(--signal-rgb),.8)}
.rw-lights i.no{background:var(--peak);box-shadow:0 0 8px rgba(var(--peak-rgb),.6)}
.rw-lights i.now{box-shadow:inset 0 0 0 1px rgba(255,226,186,.4)}
.rw-lights i.rw-lit{animation:rw-lit .5s ease}
@keyframes rw-lit{0%{transform:scaleY(.4);filter:brightness(2.4)}}
.rw-anchor{position:relative;display:inline-block;width:0;height:1em;margin-left:16px;vertical-align:top}
.rw-perfect{font:700 15px/1.3 'Archivo',sans-serif;color:var(--level);min-height:20px;margin:6px 0 0}
.rw-perfect:empty{display:none}
.lcd.rw-hot{background:#0c2a24;box-shadow:inset 0 1px 4px rgba(0,0,0,.6),0 0 18px rgba(var(--signal-rgb),.55)}
.lcd.rw-hot .strip__read{color:#bffaf0}
.lcd.rw-on{background:linear-gradient(180deg,#1a5a4f,#0e3a33);box-shadow:0 0 22px rgba(var(--signal-rgb),.8);transition:background .25s,box-shadow .25s}
@media (prefers-reduced-motion:reduce){.rw-xp{display:none}}
/* Balance while a song loads: the transport's ring turns and the channel displays sweep, so a wait reads as work */
.bal.is-loading .xport::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid transparent;border-top-color:var(--signal);border-right-color:rgba(var(--signal-rgb),.35);
  filter:drop-shadow(0 0 6px rgba(var(--signal-rgb),.6));animation:rw-spin .9s linear infinite}
@keyframes rw-spin{to{transform:rotate(360deg)}}
.bal.is-loading .lcd{background:linear-gradient(100deg,#06110e 30%,#0f3029 50%,#06110e 70%) 0 0/300% 100%;animation:rw-scan 1.4s ease-in-out infinite}
.bal.is-loading .lcd .strip__read{color:transparent}
@keyframes rw-scan{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.bal.is-loading .xport::after{animation:none;border-color:rgba(var(--signal-rgb),.6)}.bal.is-loading .lcd{animation:none}}
/* Balance: a long song name stays on one line in the stats bar */
.bal #b-st-src{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══════════ the ear test (/ear-test, eartest.js) ═══════════ */
.et-sec{padding-top:clamp(28px,6vw,64px)}
.et-wrap{max-width:680px}
.et-head{text-align:center;margin-bottom:26px}
.et-head .display{font-size:clamp(44px,9vw,76px);margin:14px 0 14px}
.et-head .lede{margin:0 auto;max-width:34em}
.et-card{border-radius:var(--r-xl);padding:clamp(20px,5vw,36px);min-height:340px}
.et-fine{color:var(--ink-faint);font-size:13.5px;text-align:center;margin:14px 0 0}
.et-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.et-step{font:700 12px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0}
.et-dots{display:flex;gap:6px}
.et-dots i{width:22px;height:5px;border-radius:3px;background:var(--line-strong)}
.et-dots i.now{background:var(--ink-dim)}.et-dots i.ok{background:var(--signal)}.et-dots i.no{background:var(--peak)}
.et-q{font:800 clamp(28px,6vw,40px)/1 'Saira Condensed',sans-serif;text-transform:uppercase;margin:0 0 10px;outline:none}
.et-hint{color:var(--ink-dim);margin:0 0 22px;line-height:1.5}
.et-ab{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.et-pad{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 10px;border-radius:var(--r-lg);border:1px solid var(--line-strong);
  background:var(--screen);color:var(--ink);cursor:pointer;font:inherit;transition:border-color .15s,box-shadow .15s}
.et-pad:hover{border-color:rgba(255,226,186,.32)}
.et-pad b{font:700 15px/1.2 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.et-pad small{color:var(--ink-faint);font-size:12.5px}
.et-pad__lamp{width:10px;height:10px;border-radius:50%;background:#3a3129}
.et-pad.is-on{border-color:rgba(var(--amber-rgb),.7);box-shadow:0 0 0 1px rgba(var(--amber-rgb),.35),0 0 30px -8px rgba(var(--amber-rgb),.6)}
.et-pad.is-on .et-pad__lamp{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.et-pad.is-on small{color:var(--amber)}
.et-status{min-height:20px;color:var(--ink-faint);font-size:13.5px;margin:10px 0 6px;text-align:center}
.et-answers{display:flex;gap:10px;flex-wrap:wrap}
.et-ans{flex:1 1 0;min-width:90px;height:52px;border-radius:var(--r);border:1px solid var(--line-strong);background:rgba(255,238,215,.045);color:var(--ink);font:600 16px 'Archivo',sans-serif;cursor:pointer}
.et-ans:hover:not(:disabled){background:rgba(255,238,215,.09)}
.et-ans:disabled{cursor:default;opacity:.55}
.et-ans.is-right{opacity:1;border-color:var(--signal);background:rgba(var(--signal-rgb),.14);color:var(--signal)}
.et-ans.is-wrong{opacity:1;border-color:var(--peak);background:rgba(var(--peak-rgb),.12);color:var(--peak)}
.et-after{margin-top:20px}
.et-verdict{line-height:1.5;margin:0 0 16px;color:var(--ink-dim)}
.et-verdict.ok b{color:var(--signal)}.et-verdict.no b{color:var(--peak)}
.et-result{text-align:center}
.et-score{display:flex;justify-content:center;align-items:baseline;gap:8px;margin:12px 0 10px;font-family:'Saira Condensed',sans-serif;font-weight:800}
.et-score b{font-size:110px;line-height:.9;color:var(--signal)}.et-score span{font-size:36px;color:var(--ink-faint)}
.et-then{color:var(--ink-dim);font-size:14.5px;margin:-8px 0 18px}.et-then b{color:var(--ink)}
.et-rows{list-style:none;padding:0;margin:0 0 26px;text-align:left;border-top:1px solid var(--line)}
.et-rows li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)}
.et-rows li span:last-child{color:var(--ink-faint);font-size:14px}
.et-mark{font-weight:700}.et-rows .ok .et-mark{color:var(--signal)}.et-rows .no .et-mark{color:var(--peak)}
.et-go .et-step{margin:0 0 10px}
.et-go .btn{width:100%;white-space:normal;height:auto;min-height:58px;padding:12px 20px}
.et-name{margin:28px 0 0;max-width:none;align-items:center}
.et-name .acct__lab{text-align:left;line-height:1.6}
.et-name input{min-width:0}
.et-name__msg{margin:6px 0 0;min-height:1em;text-align:left}
.et-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.et-actions .btn{padding:0 10px;font-size:14.5px}
.et-result .nudge p{max-width:none;margin:0 0 12px}
.et-what{list-style:none;padding:0;margin:0 auto 34px;max-width:860px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.et-what li{padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface),var(--module)}
.et-what b{display:block;font:800 22px/1 'Saira Condensed',sans-serif;text-transform:uppercase;margin-bottom:8px;color:var(--signal)}
.et-what span{color:var(--ink-dim);font-size:15px;line-height:1.5}
@media (max-width:760px){.et-what{grid-template-columns:1fr}}
@media (max-width:420px){.et-actions{grid-template-columns:1fr}}
/* the ear test's reward moments (reward.js): the answer's light, "+5 XP", the score counting up, the rows lighting in turn */
.et-dots i.rw-lit{animation:rw-lit .5s ease}
.et-dots i.ok{box-shadow:0 0 10px rgba(var(--signal-rgb),.8)}.et-dots i.no{box-shadow:0 0 8px rgba(var(--peak-rgb),.6)}
.et-ans.rw-pop{animation:et-pop .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 0 1px rgba(var(--signal-rgb),.5),0 0 28px -6px rgba(var(--signal-rgb),.9)}
@keyframes et-pop{35%{transform:scale(1.07)}}
.et-verdict .rw-anchor{margin-left:6px}
.et-xp{font:700 14px/1 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--level);min-height:14px;margin:0 0 18px;
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease)}
.et-result.is-counted .et-xp{opacity:1;transform:none;text-shadow:0 0 12px rgba(var(--level-rgb),.6)}
.et-score b{transition:text-shadow .4s}
.et-result.is-counted .et-score b{text-shadow:0 0 34px rgba(var(--signal-rgb),.55)}
.et-result.is-counted .et-score.is-perfect b{color:#ffd77a;text-shadow:0 0 40px rgba(var(--level-rgb),.8)}
.et-rows li{opacity:0;transform:translateX(-8px)}
.et-result.is-counted .et-rows li{opacity:1;transform:none;transition:opacity .35s calc(var(--i) * .14s),transform .35s calc(var(--i) * .14s) var(--ease)}
.et-result.is-counted .et-rows li.ok .et-mark{animation:et-pop .5s calc(var(--i) * .14s + .1s) both}
@media (prefers-reduced-motion:reduce){.et-rows li,.et-xp{opacity:1;transform:none;transition:none}.et-ans.rw-pop,.et-dots i.rw-lit,.et-result.is-counted .et-rows li.ok .et-mark{animation:none}}
/* first name: the profile's field and the one-time "What should we call you?" card */
.acct__name{align-items:center;margin:4px 0 0}
.acct__lab{flex-basis:100%;color:var(--ink-dim);font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.acct__lab span{color:var(--ink-faint);margin-left:6px}
.acct__name + .acct__fine{margin:6px 0 14px}
.acct .askname{margin:4px 0 18px;max-width:580px}
.desk .askname{margin:0 0 22px;max-width:580px}
.askname .acct__form input{min-width:0}
#desk-h{overflow-wrap:anywhere}
/* the header's XP meter on a gain (shell.js paintGain): a glow, and on a first visit the meters arriving */
.meter.is-up b{animation:meter-up .7s var(--ease)}
@keyframes meter-up{30%{transform:scale(1.18);text-shadow:0 0 22px rgba(var(--signal-rgb),.95)}}
a.meters.is-new{animation:meters-in .6s var(--ease) both}
@keyframes meters-in{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.meter.is-up b,a.meters.is-new{animation:none}}
/* the ear test, all three right: gold sparks off the score, and the rows lighting gold in turn */
.et-score{position:relative}
.et-burst{position:absolute;left:50%;top:48%;width:0;height:0;pointer-events:none}
.et-burst i{position:absolute;left:-3px;top:-3px;width:6px;height:22px;border-radius:3px;background:linear-gradient(180deg,#ffe7a3,var(--level));
  box-shadow:0 0 10px rgba(var(--level-rgb),.9);opacity:0;transform:rotate(calc(var(--k) * 25.7deg)) translateY(-30px) scaleY(.4);animation:et-spark 1s var(--ease) forwards}
.et-burst i:nth-child(1){--k:0}.et-burst i:nth-child(2){--k:1}.et-burst i:nth-child(3){--k:2}.et-burst i:nth-child(4){--k:3}.et-burst i:nth-child(5){--k:4}
.et-burst i:nth-child(6){--k:5}.et-burst i:nth-child(7){--k:6}.et-burst i:nth-child(8){--k:7}.et-burst i:nth-child(9){--k:8}.et-burst i:nth-child(10){--k:9}
.et-burst i:nth-child(11){--k:10}.et-burst i:nth-child(12){--k:11}.et-burst i:nth-child(13){--k:12}.et-burst i:nth-child(14){--k:13}
@keyframes et-spark{15%{opacity:1}100%{opacity:0;transform:rotate(calc(var(--k) * 25.7deg)) translateY(-118px) scaleY(1)}}
.et-result.is-perfect .et-score b{animation:et-gold 1.2s var(--ease)}
@keyframes et-gold{25%{transform:scale(1.14)}}
.et-result.is-perfect .et-rows li{transition:opacity .35s calc(var(--i) * .14s),transform .35s calc(var(--i) * .14s) var(--ease),background .4s calc(var(--i) * .14s + .2s)}
.et-result.is-perfect .et-rows li.ok{background:linear-gradient(90deg,rgba(var(--level-rgb),.14),transparent 70%)}
.et-result.is-perfect .et-rows li.ok .et-mark{color:var(--level)}
.et-result.is-perfect .et-xp{color:#ffd77a}
@media (prefers-reduced-motion:reduce){.et-burst{display:none}.et-result.is-perfect .et-score b{animation:none}}
/* profile: the exercises grouped by module, with the ear test after them */
.me-mod{margin:0 0 22px}
.me-mod__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 10px;font:800 15px/1 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.me-mod__h a{color:var(--amber);text-decoration:none}.me-mod__h a:hover{color:var(--ink)}
.me-mod__h span{font:400 11px/1 'Space Mono',monospace;letter-spacing:.08em;color:var(--ink-faint)}
.me-ex__row--test{grid-template-columns:auto 1fr}
.me-ex__row--test .me-ex__n{text-align:right;white-space:normal}
@media (max-width:560px){.me-ex__row--test{grid-template-columns:1fr}.me-ex__row--test .me-ex__n{text-align:left}}