/* 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: film grain, a vignette, and pools of light (amber lamp, teal meter). All of it holds
   still: a moving layer under the header's blur and the grain's blend redraws the page every frame. */
.grain,.vign{position:fixed;inset:0;pointer-events:none;z-index:60}
.grain{opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.vign{background:radial-gradient(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)}
.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: a still line at idle, dancing while audio plays */
.ribbon{position:absolute;left:0;right:0;bottom:-1px;height:2px;display:flex;gap:0;padding:0 clamp(16px,3.2vw,40px);pointer-events:none;opacity:.4}
.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;height:3px;gap:2px}
body.live .ribbon i{animation:vu 1s ease-in-out infinite alternate}
.is-home .rail--top:not(.is-scrolled) .ribbon{opacity:0}

/* 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:1020px){.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{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}
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}}

/* ═══════════ 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}}
.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}
.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__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}}

/* ═══════════ 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)}
/* 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 Question 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}}

/* ── 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}
.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{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}
.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)}

/* ═══════════ 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)}
/* 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}}