/* 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','Saira Fallback',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','Saira Fallback',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)}
.mainnav__pro{color:var(--level)}
.mainnav__pro:hover,.mainnav__pro.is-on{color:#f0cd78}
.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','Saira Fallback',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)}

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)}
/* the account menu (StemConsole's): your picture, a caret, and a dropdown; hidden until signed in */
body:not([data-auth="in"]) .nav-account{display:none}
.acctmenu{position:relative;flex:none}
.acctbtn{display:inline-flex;align-items:center;gap:6px;padding:2px;background:none;border:0;border-radius:999px;cursor:pointer;color:var(--ink-faint)}
.acctbtn__pic{display:block;width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid var(--line);background:var(--raised);transition:transform .2s var(--ease)}
.acctbtn__pic img{display:block;width:100%;height:100%;object-fit:cover}
.acctbtn{position:relative}
.acctbtn__pro{display:none;position:absolute;left:4px;bottom:-5px;padding:2px 4px 1px;border-radius:4px;background:var(--level);color:#1a1208;font:700 8px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.acctpop__plan{display:none}
/* Pro members: a gold ring and a PRO tag on the photo, "Mix Chops Pro" in the menu, and no Pro link to sell them */
body[data-pro="on"] .acctbtn__pic{border-color:var(--level)}
body[data-pro="on"] .acctbtn__pro{display:block}
body[data-pro="on"] .acctpop__plan{display:block;color:var(--level)}
body[data-pro="on"] .mainnav__pro,body[data-pro="on"] .drawer__pro{display:none}
.acctbtn:hover .acctbtn__pic{transform:scale(1.05)}
.acctbtn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.acctbtn__caret{transition:transform .2s var(--ease)}
.acctbtn[aria-expanded="true"] .acctbtn__caret{transform:rotate(180deg)}
.acctpop{position:absolute;top:calc(100% + 10px);right:0;min-width:210px;padding:6px;border-radius:var(--r);background:#14100c;border:1px solid var(--line);box-shadow:0 16px 44px rgba(0,0,0,.55);z-index:120}
.acctpop[hidden]{display:none}
.acctpop__email{margin:0 0 4px;padding:8px 10px 10px;border-bottom:1px solid var(--line-soft);font:400 11px/1.4 'Space Mono',monospace;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.acctpop__a{display:flex;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--ink-dim);font:500 14px/1.2 'Archivo',sans-serif;text-align:left;text-decoration:none;cursor:pointer}
.acctpop__a:hover,.acctpop__a:focus-visible{background:rgba(255,238,215,.06);color:var(--ink);outline:none}
.drawer__acct .drawer__who{margin:0 14px 4px;font:400 11px/1.4 'Space Mono',monospace;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer__out{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
@media (prefers-reduced-motion: reduce){.acctbtn__pic,.acctbtn__caret{transition:none}}
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}.acctmenu{display:none}}
@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}
.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','Saira Fallback',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)}
/* Golden Ears is a Pro rank: a small gold tag on the home ladder and the profile's */
.rank-pro{display:inline-block;margin-left:8px;white-space:nowrap;padding:2px 7px;border-radius:999px;border:1px solid rgba(var(--level-rgb),.35);background:rgba(var(--level-rgb),.07);color:var(--level);font:700 9.5px/1.4 'Space Mono',monospace;font-style:normal;letter-spacing:.14em;text-transform:uppercase;vertical-align:middle}
@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','Saira Fallback',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','Saira Fallback',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','Saira Fallback',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:5px}
.ranks li{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:12px;padding:6px 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(--signal);opacity:.55}
.ranks li:nth-child(4)::before{background:var(--level);opacity:.8}
.ranks li:nth-child(5)::before{background:var(--level)}
.ranks li:nth-child(6)::before{background:var(--amber)}
.ranks li:last-child{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:last-child::before{background:var(--brass);box-shadow:0 0 10px rgba(var(--level-rgb),.9);opacity:1}
.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','Saira Fallback',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','Saira Fallback',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','Saira Fallback',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}
.plans--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px;align-items:stretch}
/* the fine print keeps three lines' room in each card, so the three buttons line up */
.plans--3 .plan__fine{min-height:calc(3 * 1.5em);line-height:1.5}
.plan__more{margin:-4px 0 0;color:var(--ink-dim);font-size:14px;line-height:1.5}
.plan__more a{color:var(--level);white-space:nowrap}
.plan--main{border-color:rgba(var(--level-rgb),.55);box-shadow:0 0 0 1px rgba(var(--level-rgb),.25),0 30px 60px -30px rgba(var(--level-rgb),.35)}
.plan--year .plan__sub{margin-top:4px}
.chip--best{color:var(--signal);border-color:rgba(var(--signal-rgb),.45);background:rgba(var(--signal-rgb),.08)}
.plan__name .chip{font-size:10px}
@media (max-width:1000px){.plans--3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.plans--3 .plan:first-child{grid-column:1/-1;order:3}}
@media (max-width:760px){.plans,.plans--3{grid-template-columns:minmax(0,1fr)}.plans--3 .plan:first-child{order:3}}

/* ═══════════ 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','Saira Fallback',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','Saira Fallback',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','Saira Fallback',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','Saira Fallback',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','Saira Fallback',sans-serif;text-transform:uppercase;margin:4px 0 0}
.join__done p{margin:0;color:var(--ink-dim);max-width:50ch}
/* the Pro page's buy panel (buy.js): the two plans side by side, stacked on a phone */
.buy__plans{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%}
.buy__year{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin:14px 0 0;padding:14px 16px;border-radius:12px;border:1px solid rgba(var(--level-rgb),.4);background:rgba(var(--level-rgb),.07);font-size:14.5px;color:var(--ink-dim)}
.buy__year b{color:var(--ink)}
.acct__trial{margin:10px 0 0;padding:10px 14px;border-radius:10px;border:1px solid rgba(var(--level-rgb),.35);background:rgba(var(--level-rgb),.06);font-size:14px;color:var(--ink-dim)}
.acct__trial b{color:var(--level)}
.buy__plans .btn{flex:1 1 220px;flex-direction:column;gap:2px;line-height:1.15}
/* the Pro panel's own links ("Back to the exercises", "Manage billing") sit on one line, arrow included */
.join__done .buy__plans .btn{flex-direction:row;gap:10px}
.join__done h3:focus{outline:none}   /* focused for screen readers on arriving Pro, not by a keyboard user */
.buy__plans .btn small{font:400 11px/1.2 'Space Mono',monospace;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.buy__back{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.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','Saira Fallback',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','Saira Fallback',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','Saira Fallback',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','Saira Fallback',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','Saira Fallback',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)}
/* Which Part: the pick key under each strip, and the faders that stay put once the part is found */
.cans--pick{width:72px;height:40px}
.strip.is-held .fader{opacity:.45;cursor:default}
/* Build the Mix: a level meter down the right of each fader, lit only while Your Mix plays (on the reference it would
   give the answer away) */
.bmeter{position:absolute;right:2px;top:0;bottom:0;width:5px;border-radius:2px;background:#050403;box-shadow:inset 0 0 0 1px rgba(0,0,0,.8);overflow:hidden;pointer-events:none}
.bmeter i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,var(--signal) 0,var(--signal) 70%,var(--level) 88%,var(--peak) 100%);background-size:100% var(--mh,236px);background-position:bottom}
.bmeter.is-dark i{opacity:0}
.strip__read.off{color:var(--ink-faint)}
/* the listen-first intros (Identify's listening practice; the same lines are on claude/identify-curriculum) */
.identify-support{padding:24px;margin:20px 0}
.identify-support[hidden]{display:none}
.identify-support h3{font:800 24px/1.15 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;margin:0 0 12px}
.identify-support p{line-height:1.6}
.identify-support__sounds,.identify-support__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.identify-support__status{min-height:2em;color:var(--ink-dim)}
.identify-support__sounds .tbtn[aria-pressed=true]{border-color:rgba(var(--signal-rgb),.6);color:var(--signal)}
/* From Memory: the reference's plays left, each draining as it plays */
.bplays{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px auto 0;font:700 10px/1 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.bplays[hidden]{display:none}
.bplays u{text-decoration:none;margin-right:4px}
.bplays i{width:26px;height:6px;border-radius:3px;background:linear-gradient(90deg,rgba(255,236,210,.1) calc(var(--f) * 100%),var(--signal) 0);box-shadow:0 0 6px rgba(var(--signal-rgb),.35)}
.bplays b{margin-left:4px;color:var(--ink)}
@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}
  .cans--pick{width:100%;max-width:56px;height:38px}
}
/* 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','Saira Fallback',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}
/* the career track (me.js): stations on one line; the rail runs node centre to node centre and fills to --f */
.track{--node:52px;--row:72px;position:relative;list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:0}
.track__rail{position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:calc(var(--row) / 2 - 2px);height:4px;border-radius:4px;background:rgba(255,238,215,.07)}
.track__rail i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f) * 100%);border-radius:4px;
  background:linear-gradient(90deg,var(--signal-dim),var(--signal));box-shadow:0 0 16px rgba(var(--signal-rgb),.65);animation:track-fill 1.2s var(--ease) both}
@keyframes track-fill{from{width:0}}
.track__st{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;min-width:0}
.track__dot{position:relative;display:grid;place-items:center;height:var(--row)}
.track__node{display:grid;place-items:center;width:var(--node);height:var(--node);border-radius:50%;background:#15110d;border:1.5px solid var(--line);color:var(--ink-faint);
  transition:transform .25s var(--ease)}
.track__ico{width:46%;height:46%}
.track__txt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 4px}
.track__txt b{font:700 15px/1.15 'Archivo',sans-serif;color:var(--ink-faint)}
.track__txt span{font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.08em;color:var(--ink-faint);opacity:.75}
/* behind you: lit */
.track__st.is-past .track__node{background:linear-gradient(180deg,#2be0c9,var(--signal-dim));border-color:transparent;color:var(--on-signal);box-shadow:0 0 14px rgba(var(--signal-rgb),.35)}
.track__st.is-past .track__txt b{color:var(--ink-dim)}
/* where you are: bigger, ringed, glowing */
.track__st.is-now .track__node{transform:scale(1.25);background:radial-gradient(circle at 50% 35%,#163a35,#0c1614);border:2px solid var(--signal);color:var(--signal);
  box-shadow:0 0 0 6px rgba(var(--signal-rgb),.12),0 0 28px rgba(var(--signal-rgb),.55);animation:track-glow 2.6s ease-in-out infinite}
@keyframes track-glow{50%{box-shadow:0 0 0 9px rgba(var(--signal-rgb),.06),0 0 36px rgba(var(--signal-rgb),.7)}}
.track__st.is-now .track__txt b{color:var(--signal);font-size:16px}
.track__st.is-now .track__txt span{color:var(--ink-dim);opacity:1}
.track__you{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:3px 7px 2px;border-radius:5px;background:var(--signal);color:var(--on-signal);
  font:700 9px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
/* the goal: a gold record, dim until it's yours */
.track__gold{--d:60px}
.track__st.is-top:not(.is-now) .track__gold{opacity:.55;filter:saturate(.7) drop-shadow(0 6px 16px rgba(230,180,70,.18))}
.track__st.is-top .track__txt b{color:var(--level)}
.track__pro{position:absolute;left:50%;bottom:calc(50% - var(--node) / 2 - 12px);transform:translateX(-50%);margin:0;background:#1a1208}
.track__st.is-top.is-now .track__pro{bottom:calc(50% - 36px - 8px)}
.track__st.is-top.is-now .track__gold{--d:72px}
.track__st.is-next:not(.is-top) .track__node{background:repeating-radial-gradient(circle,#0f0c09 0 1px,#15110d 1px 2.4px)}
@media (hover:hover){.track__st:hover .track__node{transform:scale(1.08)}.track__st.is-now:hover .track__node{transform:scale(1.3)}}
@media (prefers-reduced-motion:reduce){.track__rail i,.track__st.is-now .track__node{animation:none}}
/* a phone: top to bottom, the rail down the left */
@media (max-width:700px){
  .track{--node:44px;--row:64px;grid-template-columns:1fr;margin-top:16px}
  .track__rail{left:calc(var(--node) / 2 + 12px - 2px);right:auto;width:4px;height:auto;top:calc(var(--row) / 2);bottom:calc(var(--row) / 2)}
  .track__rail i{width:auto;right:0;height:calc(var(--f) * 100%);animation-name:track-fill-v}
  .track__st{flex-direction:row;text-align:left;gap:16px;height:var(--row);padding-left:12px}
  .track__dot{width:var(--node);height:var(--row);flex:none}
  .track__txt{flex-direction:row;align-items:baseline;gap:10px;padding:0}
  .track__gold{--d:50px}
  .track__st.is-top.is-now .track__gold{--d:56px}
  .track__you{top:50%;left:auto;right:calc(100% + 4px);transform:translateY(-50%)}
  .track__st{padding-left:40px}
  .track__rail{left:calc(40px + var(--node) / 2 - 2px)}
}
@keyframes track-fill-v{from{height:0}}
/* what Golden Ears takes beyond the XP (me.js goldHtml) */
.me-gold{margin:14px 0 0}
.me-gold p{margin:0 0 8px;font-size:14px;color:var(--ink-dim)}
.me-gold ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.me-gold li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line-soft)}
.me-gold a{display:flex;flex-direction:column;gap:3px;min-width:0;color:inherit;text-decoration:none}
.me-gold a:hover b,.me-gold a:focus-visible b{color:var(--signal)}
.me-gold b{font:600 13px/1.2 'Archivo',sans-serif;color:var(--ink)}
.me-gold span{font:400 10.5px/1.3 'Space Mono',monospace;letter-spacing:.04em;color:var(--ink-faint)}
.me-gold em{font-style:normal;flex:none;font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.me-gold li.is-done{border-color:rgba(var(--signal-rgb),.4)}
.me-gold li.is-done em{color:var(--signal)}
@media (max-width:760px){.me-gold ul{grid-template-columns:1fr}}
/* Pro exercises (catalogue.js PRO_ONLY): a free account's page, dimmed under a panel (shell.js lockPage); the marks on cards */
.prolock{position:relative;z-index:5;margin:0 0 24px;padding:26px 28px;border-color:rgba(var(--level-rgb),.45);
  background:radial-gradient(120% 100% at 0% 0%,rgba(var(--level-rgb),.12),transparent 60%),var(--module);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.prolock__k{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--level)}
.prolock__k .led{width:7px;height:7px;border-radius:50%;background:var(--level);box-shadow:0 0 8px var(--level)}
.prolock__h{margin:12px 0 8px;font:800 clamp(34px,5vw,48px)/.95 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;color:var(--ink)}
.prolock__p{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
.prolock__pitch{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ink-dim);max-width:62ch}
.prolock__list{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 22px}
@media (min-width:700px){.prolock__list{grid-template-columns:1fr 1fr}}
.prolock__list li{display:flex;gap:10px;align-items:flex-start}
.prolock__list svg{flex:none;margin-top:2px;color:var(--level)}
.prolock__list b{display:block;font:600 14.5px/1.3 'Archivo',sans-serif;color:var(--ink)}
.prolock__list small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--ink-faint)}
.prolock__go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.plan__trial{display:block;margin-top:12px;color:var(--level);font:600 14px/1.35 'Archivo',sans-serif;text-decoration:none;text-align:center}
.plan__trial:hover{text-decoration:underline}
.prolock__more{color:var(--level);font:600 14.5px/1 'Archivo',sans-serif;text-decoration:none}
.prolock__more:hover{text-decoration:underline}
.prolock__fine{margin:12px 0 0;font-size:13px;color:var(--ink-faint)}
.prolock__fine a{color:var(--signal)}
.prolock__back{margin:16px 0 0;font-size:13.5px}
.prolock__back a{color:var(--ink-dim);text-decoration:none}
.prolock__back a:hover{color:var(--ink)}
.prolock.is-nudged{animation:prolock-nudge .5s var(--ease)}
@keyframes prolock-nudge{30%{transform:translateX(-6px)}60%{transform:translateX(5px)}}
main .is-locked{opacity:.3;filter:saturate(.4);pointer-events:none;user-select:none}
@media (prefers-reduced-motion:reduce){.prolock.is-nudged{animation:none}}
/* Pro inside the free exercises (progate.js): the level gate (lockPage's panel, the exercise left playable), the
   level names it opens, and the result's Pro lines and trial button */
.progate__levels{display:flex;flex-wrap:wrap;gap:6px 8px;margin:12px 0 0;padding:0;list-style:none;counter-reset:pl 2}
.progate__levels li{counter-increment:pl;padding:6px 10px;border-radius:999px;border:1px solid rgba(var(--level-rgb),.35);font:500 13px/1 'Archivo',sans-serif;color:var(--ink-dim)}
.progate__levels li::before{content:"L" counter(pl) " ";color:var(--level);font-weight:700}
.progate__back{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--ink-dim)}
.progate__back:hover{color:var(--ink)}
.progate-line{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink-dim)}
.progate-line a{color:var(--level);text-decoration:none;border-bottom:1px solid rgba(var(--level-rgb),.4)}
.progate-go{--h:48px;font-size:15px}
.progate-hide{display:none!important}
.pstep.is-pro .pcard{border-color:rgba(var(--level-rgb),.28)}
.plate__pro{font:700 9.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;border-radius:999px;color:var(--level);border:1px solid rgba(var(--level-rgb),.45)}
.plate__tag{margin-left:8px;font:700 8.5px/1 'Space Mono',monospace;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--level);vertical-align:middle}

/* the profile (me.js, me-parts.js, 25 Oct 2026): rank, next up, your ears, your practice, exercises, badges */
.me-gold__line{margin:14px 0 0;font-size:13.5px;color:var(--ink-faint)}
.me-strip{display:flex;align-items:center;flex-wrap:wrap;gap:10px 28px;margin:22px 0 0;padding:14px 18px;border-radius:14px;border:1px solid var(--line-soft);background:rgba(0,0,0,.22)}
.me-strip__s{display:inline-flex;align-items:baseline;gap:8px;font:400 11px/1 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.me-strip__s b{font:700 22px/1 'Space Mono',monospace;letter-spacing:0;color:var(--signal);font-variant-numeric:tabular-nums}
.me-strip__s.is-gold b{color:var(--level)}
.me-strip__share{margin-left:auto;min-height:40px;padding:0 16px;font-size:14px}
.me-kept{margin:8px 0 0;color:var(--ink-faint);font-size:13px}
.me-kept:empty{display:none}
.me-next{margin:0 0 28px}
.me-next__h{margin:0 0 10px;font:700 11px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.me-next__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.me-next__a{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 44px 16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface),var(--module);
  color:var(--ink);text-decoration:none;transition:border-color .2s,transform .25s var(--ease)}
.me-next__a u{text-decoration:none;font:400 10px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.me-next__a b{font:700 17px/1.2 'Archivo',sans-serif}
.me-next__a span{font-size:13px;color:var(--ink-dim)}
.me-next__a i{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--ink-faint);transition:transform .25s var(--ease),color .2s}
.me-next__a:hover{border-color:rgba(var(--signal-rgb),.5);transform:translateY(-2px)}
.me-next__a:hover i{color:var(--signal);transform:translate(3px,-50%)}
.me-next__a.is-main{border-color:rgba(var(--signal-rgb),.45);background:radial-gradient(120% 120% at 0% 0%,rgba(var(--signal-rgb),.12),transparent 60%),var(--module)}
.me-next__a.is-main i{color:var(--signal)}
/* your ears: a meter bridge, now as the meter, then as a gold mark on it */
.br{position:relative}
.br__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;margin-bottom:18px}
.br__lead .tn__sub{max-width:52ch}
.br__modes{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.3)}
.br__mode{min-height:34px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ink-dim);font:600 13px/1 'Archivo',sans-serif;cursor:pointer}
.br__mode[aria-pressed="true"]{background:rgba(var(--level-rgb),.14);color:var(--level)}
.br__bridge{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;padding:14px 10px 10px;border-radius:14px;background:#0c0a08;border:1px solid var(--line)}
.br__col{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.br__val{font:700 12px/1 'Space Mono',monospace;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.br__meter{position:relative;width:16px;height:120px;border-radius:6px;background:repeating-linear-gradient(0deg,rgba(255,238,215,.05) 0 3px,transparent 3px 6px);display:flex;align-items:flex-end}
.br__now{display:block;width:100%;border-radius:5px;background:linear-gradient(180deg,var(--signal),rgba(var(--signal-rgb),.35));box-shadow:0 0 12px rgba(var(--signal-rgb),.5);animation:br-rise .9s var(--ease) both}
@keyframes br-rise{from{transform:scaleY(0)}}
.br__now{transform-origin:bottom}
.br__fill{display:block;width:100%;border-radius:5px;background:repeating-linear-gradient(0deg,var(--ink-faint) 0 2px,transparent 2px 4px);opacity:.7}
.br__then{position:absolute;left:-5px;right:-5px;height:3px;margin-bottom:-1.5px;border-radius:2px;background:var(--level);box-shadow:0 0 8px rgba(var(--level-rgb),.8)}
.br__d{height:12px;font:700 10.5px/1 'Space Mono',monospace;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.br__d.is-up{color:var(--signal)}
.br__hz{font:400 10.5px/1 'Space Mono',monospace;color:var(--ink-dim)}
.br__col.is-weak .br__now{background:linear-gradient(180deg,var(--peak),rgba(var(--peak-rgb),.35));box-shadow:0 0 12px rgba(var(--peak-rgb),.5)}
.br__col.is-weak .br__val{color:var(--peak)}
.br__col.is-strong .br__val{color:var(--signal)}
.br__col.is-thin .br__val{color:var(--ink-faint)}
.br__legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:10px 0 0;font:400 10.5px/1.3 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.br__legend span{display:inline-flex;align-items:center;gap:8px}
.br__legend i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--signal)}
.br__legend .is-then i{height:3px;width:16px;background:var(--level)}
.br__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:16px}
.br__how{margin-top:14px;color:var(--ink-faint);font-size:13px;line-height:1.55}
.br__how summary{cursor:pointer;display:inline-block;padding:4px 0;list-style:none}
.br__how summary::-webkit-details-marker{display:none}
.br__how summary::after{content:' +'}
.br__how[open] summary::after{content:' −'}
.br__how summary:hover{color:var(--ink)}
.br__how p{margin:6px 0 0;max-width:80ch}
.ears.br{margin:0 0 16px}
@media (max-width:560px){.br__bridge{gap:2px;padding:12px 4px 8px}.br__meter{width:12px;height:100px}.br__val{font-size:10px}.br__d{font-size:9.5px}}
@media (prefers-reduced-motion:reduce){.br__now{animation:none}}
/* your practice: five weeks of squares */
.cal{margin:0 0 34px;padding:22px 24px}
.cal__wrap{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start}
.cal__grid{display:grid;grid-template-columns:repeat(7,30px);gap:6px}
.cal__h{font:400 10px/1 'Space Mono',monospace;color:var(--ink-faint);text-align:center;padding-bottom:2px}
.cal__d{width:30px;height:30px;border-radius:7px;background:rgba(255,238,215,.045);border:1px solid var(--line-soft)}
.cal__d.is-on{background:rgba(var(--signal-rgb),var(--v,.8));border-color:transparent;box-shadow:0 0 10px rgba(var(--signal-rgb),calc(var(--v,.8) * .45))}
.cal__d.is-today{outline:2px solid var(--level);outline-offset:1px}
.cal__d.is-future{background:none;border-style:dashed;opacity:.35}
.cal__side{flex:1;min-width:240px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.cal__streak{display:flex;align-items:baseline;gap:10px}
.cal__streak b{font:800 56px/.9 'Saira Condensed','Saira Fallback',sans-serif;color:var(--level);text-shadow:0 0 24px rgba(var(--level-rgb),.4)}
.cal__streak span{font:400 11px/1 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.cal__side .tn__k{margin-top:12px}
.cal__side .tn__big{font-size:clamp(34px,4.4vw,46px)}
.cal__side .btn{margin-top:14px}
.cal__done{margin:14px 0 0;color:var(--signal);font:400 12px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:420px){.cal__grid{grid-template-columns:repeat(7,1fr);width:100%}.cal__d{width:auto;aspect-ratio:1;height:auto}}
/* exercises: a card a module */
.me-mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:12px}
.me-mods .me-mod{margin:0;padding:18px 18px 14px}
.me-mod__bar{display:block;height:4px;border-radius:4px;background:rgba(255,238,215,.07);overflow:hidden;margin:0 0 14px}
.me-mod__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--level))}
.me-mods .me-ex__row{grid-template-columns:minmax(120px,1fr) 1fr auto;padding:10px 12px;gap:12px;background:rgba(0,0,0,.22);border-color:var(--line-soft)}
.me-mods .me-ex__name{font-size:17px}
.me-mods .me-ex__name{flex-direction:row;align-items:baseline;flex-wrap:wrap}
.me-ex__pro{margin-left:8px;font:700 9px/1 'Space Mono',monospace;font-style:normal;letter-spacing:.12em;color:var(--level);vertical-align:middle}
.me-ex__tn{grid-column:1/-1;font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.06em;color:var(--signal)}
.me-mod__none{margin:0 0 6px;color:var(--ink-faint);font-size:13.5px}
.me-mod__more{margin-top:8px}
.me-mod__more summary,.me-badges__more summary{display:inline-block;padding:6px 0;cursor:pointer;list-style:none;color:var(--ink-faint);font:400 11px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.me-mod__more summary::-webkit-details-marker,.me-badges__more summary::-webkit-details-marker{display:none}
.me-mod__more summary::after,.me-badges__more summary::after{content:' +'}
.me-mod__more[open] summary::after,.me-badges__more[open] summary::after{content:' −'}
.me-mod__more summary:hover,.me-badges__more summary:hover{color:var(--ink)}
.me-mod__more .me-ex__list{margin-top:6px}
.me-test{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:12px;padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface),var(--module);color:var(--ink);text-decoration:none}
.me-test u{text-decoration:none;font:400 10px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.me-test b{font:800 20px/1 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase}
.me-test span{font-size:13px;color:var(--ink-dim)}
.me-test:hover{border-color:rgba(var(--signal-rgb),.45)}
.me-badges__more{margin-top:14px}
/* your songs: a shelf of records (me-parts.js songsSection) */
.songs{margin:0 0 34px}
#me-songs.is-held{min-height:260px}   /* signed in on a preview: room for the shelf while it loads, so the page doesn't jump */
.songs__shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.song{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px 12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface),var(--module);color:var(--ink);text-decoration:none;
  transition:border-color .2s,transform .25s var(--ease)}
.song b{font:700 14.5px/1.25 'Archivo',sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.song__meta{font:400 10.5px/1.3 'Space Mono',monospace;letter-spacing:.06em;color:var(--ink-faint)}
.song__disc{display:grid;place-items:center;width:84px;height:84px;margin-bottom:6px;border-radius:50%;
  background:repeating-radial-gradient(circle,#0c0a08 0 1.1px,#17130f 1.1px 2.3px);box-shadow:inset 0 0 0 1px rgba(255,238,215,.06),0 8px 18px rgba(0,0,0,.5);position:relative}
.song__disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 35deg,transparent,rgba(255,255,255,.08) 6%,transparent 14%,transparent 50%,rgba(255,255,255,.06) 56%,transparent 64%)}
.song__label{position:relative;z-index:1;display:grid;place-items:center;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 35%,#2be0c9,var(--signal-dim));color:var(--on-signal);font:700 20px/1 'Archivo',sans-serif}
.song__label svg{width:60%;height:60%}
a.song:hover{border-color:rgba(var(--signal-rgb),.5);transform:translateY(-2px)}
a.song:hover .song__label{animation:disc-spin 1.8s linear infinite}
.song.is-waiting{opacity:.6}
.song.is-waiting .song__label{background:#2a231c;color:var(--ink-faint)}
.song--add{border-style:dashed;background:none}
.song--add .song__label{background:none;border:1.5px dashed var(--ink-faint);color:var(--ink-dim)}
.songs__empty{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 44px 18px 20px;border-radius:14px;border:1px dashed var(--line-strong);color:var(--ink);text-decoration:none}
.songs__empty b{font:700 17px/1.2 'Archivo',sans-serif}
.songs__empty span{font-size:13.5px;color:var(--ink-dim)}
.songs__empty i{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--signal)}
.songs__empty:hover{border-color:rgba(var(--signal-rgb),.5)}
@media (prefers-reduced-motion:reduce){a.song:hover .song__label{animation:none}}
@media (max-width:420px){.songs__shelf{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.me-mods .me-ex__row{grid-template-columns:1fr auto}.me-mods .me-ex__row .xcard__bar{grid-column:1/-1;grid-row:2}.me-mods .me-ex__tn{grid-row:3}}
.me-link{color:var(--signal)}
.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','Saira Fallback',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}
@media (max-width:520px){.me-badges__grid{grid-template-columns:1fr 1fr;gap:8px}.badge{padding:16px 10px 14px}.badge .disc{--d:78px}.badge b{font-size:17px}}
/* Badges: records for the studio wall (badge-art.js). Earned, a disc pressed in its metal with the light caught on
   it, whose label turns on hover like a record on a platter. Not yet, dark vinyl in a ring that fills as you get closer. */
.badge{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 14px 16px;border-radius:16px;
  background:rgba(0,0,0,.22);border:1px solid var(--line-soft);transition:border-color .25s,transform .25s var(--ease)}
.badge .disc{margin-bottom:8px}
.badge b{font:800 19px/1.05 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-dim)}
.badge__desc{color:var(--ink-faint);font-size:12.5px;line-height:1.45;flex:1}
.badge__state{font:400 10px/1.3 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:2px}
.badge--bronze,.disc--bronze{--m1:#4a2c15;--m2:#a8693a;--m3:#f3bd8a;--g:200,120,60}
.badge--silver,.disc--silver{--m1:#4c5157;--m2:#a3a9b1;--m3:#f6f8fa;--g:200,210,222}
.badge--gold,.disc--gold{--m1:#5e400b;--m2:#c99a36;--m3:#ffe9a8;--g:230,180,70}
.badge--platinum,.disc--platinum{--m1:#3f5a66;--m2:#b3d0da;--m3:#f4fdff;--g:170,225,240}
.badge.is-earned{border-color:rgba(var(--g),.35);background:radial-gradient(90% 70% at 50% 0%,rgba(var(--g),.14),transparent 70%),var(--module)}
.badge.is-earned:hover{transform:translateY(-2px);border-color:rgba(var(--g),.6)}
.badge.is-earned b{color:var(--ink)}
.badge.is-earned .badge__desc{color:var(--ink-dim)}
.badge.is-earned .badge__state{color:var(--m3)}

.disc{--d:96px;position:relative;display:block;flex:none;width:var(--d);height:var(--d);border-radius:50%;padding:4px;
  background:conic-gradient(var(--m2,#888) calc(var(--p) * 1%),rgba(255,238,215,.07) 0)}
.disc__vinyl{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:repeating-radial-gradient(circle,#0c0a08 0 1.1px,#16120e 1.1px 2.3px);box-shadow:inset 0 0 0 1px rgba(255,238,215,.05),0 6px 16px rgba(0,0,0,.55)}
/* the light on the grooves: it stays still while the label turns */
.disc__vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 35deg,transparent,rgba(255,255,255,.07) 6%,transparent 14%,transparent 50%,rgba(255,255,255,.05) 56%,transparent 64%)}
.disc__label{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:44%;aspect-ratio:1;border-radius:50%;
  background:#211b15;color:rgba(255,238,215,.28);box-shadow:inset 0 0 0 1px rgba(255,238,215,.06)}
.disc__mark{width:56%;height:56%}
.disc__num{font:800 calc(var(--d) * .2)/.9 'Saira Condensed','Saira Fallback',sans-serif;letter-spacing:.01em}
.disc__num--sm{font-size:calc(var(--d) * .155)}
.disc__unit{font:700 calc(var(--d) * .055)/1 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;margin-top:1px;opacity:.8}
.disc.is-earned{padding:0;background:none;filter:drop-shadow(0 10px 22px rgba(var(--g),.28))}
.disc.is-earned .disc__vinyl{
  background:repeating-radial-gradient(circle,rgba(0,0,0,.2) 0 .7px,transparent .7px 2.1px),
    conic-gradient(from 20deg,var(--m2),var(--m3) 9%,var(--m2) 19%,var(--m1) 33%,var(--m2) 46%,var(--m3) 56%,var(--m2) 66%,var(--m1) 82%,var(--m2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 18px rgba(0,0,0,.35),0 8px 20px rgba(0,0,0,.5)}
.disc.is-earned .disc__vinyl::after{background:conic-gradient(from 35deg,transparent,rgba(255,255,255,.35) 5%,transparent 12%,transparent 50%,rgba(255,255,255,.25) 55%,transparent 62%)}
.disc.is-earned .disc__label{background:radial-gradient(circle at 50% 40%,#1d1712,#0b0907);color:var(--m3);box-shadow:0 0 0 2px var(--m1),0 0 0 3px rgba(255,255,255,.18)}
.disc.is-earned .disc__mark{filter:drop-shadow(0 0 6px rgba(var(--g),.6))}
.badge.is-earned:hover .disc__label{animation:disc-spin 1.8s linear infinite}
@keyframes disc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.badge.is-earned:hover .disc__label{animation:none}.badge.is-earned:hover{transform:none}}
.disc--sm{--d:52px}
.toast.toast--art{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;align-items:center;text-align:left}
.toast--art .disc{grid-row:1 / span 3}
.toast--art > :not(.disc){grid-column:2}
.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','Saira Fallback',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)}
/* the site's own dialog (me.js dialog): a control-room panel over a dimmed page */
.mdl{width:min(440px,calc(100vw - 32px));padding:0;border-radius:var(--r-lg);border:1px solid var(--line-strong);background:var(--surface),var(--module);color:var(--ink);box-shadow:var(--lift),0 30px 80px -20px rgba(0,0,0,.9)}
.mdl__box{padding:24px}
.mdl::backdrop{background:rgba(6,5,4,.72);backdrop-filter:blur(3px)}
.mdl__h{font:800 clamp(24px,3vw,30px)/1.05 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;margin:0 0 10px}
.mdl__p{margin:0 0 20px;color:var(--ink-dim);line-height:1.5}
.mdl__row{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.mdl__row .btn{--h:46px}
.btn--danger{color:#fff;background:linear-gradient(180deg,#d63b3b,#c62828 45%,#b02020);border-color:transparent}
.btn--danger:hover{filter:brightness(1.06)}
/* signed in, account settings (name, Delete account) close the profile; who you are and Sign out are in the header menu */
#acct-end .acct{margin:40px 0 0}
.acct__saved{color:var(--ink-faint)}
.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','Saira Fallback',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','Saira Fallback',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','Saira Fallback',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','Saira Fallback',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','Saira Fallback',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--account{border-left-color:var(--signal)}
.toast--account .toast__k{color:var(--signal)}
.toast__x{position:absolute;top:6px;right:6px;width:32px;height:32px;display:grid;place-items:center;background:none;border:0;border-radius:8px;color:var(--ink-faint);font-size:20px;line-height:1;cursor:pointer}
.toast__x:hover,.toast__x:focus-visible{color:var(--ink)}
.toast--account{position:relative;padding-right:42px}
.toast b{font:800 24px/1 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;letter-spacing:.03em}
.toast>span: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 (and every exercise, .eqt): the transport's ring turns and the channel displays sweep, so a wait reads as work */
.bal.is-loading .xport::after,.eqt.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,.eqt.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','Saira Fallback',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','Saira Fallback',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}
/* the name for the share card: asked only by someone who opens it, under Share */
.et-namebox{margin:16px 0 0;text-align:left}
.et-namebox summary{display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer;list-style:none;color:var(--ink-dim);font-size:14px}
.et-namebox summary::-webkit-details-marker{display:none}
.et-namebox summary::before{content:'+';content:'+' / '';width:14px;color:var(--signal);font-weight:700;text-align:center}
.et-namebox[open] summary::before{content:'\2013';content:'\2013' / ''}
.et-namebox summary:hover,.et-namebox summary:focus-visible{color:var(--ink)}
.et-namebox .et-name{margin:8px 0 0;flex-wrap:wrap}
.et-namebox .et-name input{flex:1 1 140px}
/* the ear test scrolls itself on a phone: Next stops short of the bottom edge, the card clear of the header */
#et-next{scroll-margin-bottom:20px}
#et{scroll-margin-top:calc(var(--rail-h) + 12px)}
.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','Saira Fallback',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)}

/* Identify's unscored listening rounds: hear the bands on drums before level 2, No change before level 5,
   and practice on a mix-up after two failed attempts. The question screen steps aside while one is open. */
.eqt.is-support .eqt__screen{display:none}
.identify-support{padding:24px;margin:20px 0}
.identify-support[hidden]{display:none}
.identify-support h3{font:800 24px/1.15 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;margin:0 0 12px}
.identify-support p{line-height:1.6}
.identify-support__sounds,.identify-support__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.identify-support__status{min-height:2em;color:var(--ink-dim)}

/* Your plan for today (Pro): the Daily page's panel under the daily session (plan-panel.js), and the strip above an
   exercise running one of its tasks (plan-task.js) */
.dplan{max-width:880px;margin:clamp(28px,4vw,40px) auto 0;padding:clamp(20px,3.4vw,32px);display:grid;gap:18px}
.dplan .eyebrow{margin:0 0 12px}
.dplan .chip{padding:5px 9px;font-size:10px}
.dplan__h{font:800 clamp(24px,3.2vw,32px)/1.1 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;letter-spacing:.01em;margin:0}
.dplan__sub{margin:10px 0 0;color:var(--ink-dim);font-size:15.5px;line-height:1.6;max-width:62ch}
.dplan__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dplan__row{display:grid;grid-template-columns:118px 1fr auto;gap:14px 18px;align-items:center;padding:16px 18px;border-radius:var(--r);background:rgba(0,0,0,.2);border:1px solid var(--line-soft)}
.dplan__row.is-next{border-color:rgba(var(--signal-rgb),.32);background:linear-gradient(90deg,rgba(var(--signal-rgb),.06),rgba(0,0,0,.2) 60%)}
.dplan__m{font:700 11.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.dplan__row.is-done .dplan__m{color:var(--ink-faint)}
.dplan__t{margin:0;color:var(--ink);font-size:16px;line-height:1.4}
.dplan__t b{font-weight:600}
.dplan__t span{color:var(--ink-faint);font:400 12px/1 'Space Mono',monospace;letter-spacing:.06em;white-space:nowrap}
.dplan__why{margin:6px 0 0;color:var(--ink-dim);font-size:14.5px;line-height:1.55}
.dplan__go{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.dplan__done{font:700 12px/1 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--signal);white-space:nowrap}
.dplan__xp{margin-left:8px;color:var(--level);font-weight:700}
.dplan__again{font-size:13.5px;color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.dplan__again:hover{color:var(--ink);border-bottom-color:var(--signal)}
.dplan__ready{display:grid;gap:8px;padding:14px 18px;border-radius:var(--r);border:1px solid rgba(var(--level-rgb),.3);background:rgba(var(--level-rgb),.06)}
.dplan__ready p{margin:0;color:var(--ink);font-size:15px;line-height:1.55}
.dplan__ready a{display:inline-flex;align-items:center;gap:6px;color:var(--level);text-decoration:none;border-bottom:1px solid rgba(var(--level-rgb),.4);white-space:nowrap}
.dplan__ready .btn__arrow{width:14px;height:14px}
.dplan__note{margin:0;color:var(--ink-faint);font-size:13.5px;line-height:1.55}
@media (max-width:640px){
  .dplan__row{grid-template-columns:1fr;gap:10px}
  .dplan__go{flex-direction:row;align-items:center;justify-content:space-between}
}
.ptask{max-width:880px;margin:0 auto 16px;padding:16px clamp(16px,3vw,24px);display:grid;gap:6px}
.ptask__ey{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font:700 11px/1.3 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.ptask__ey .chip{padding:4px 8px;font-size:10px}
.ptask__t{margin:2px 0 0;color:var(--ink);font-size:16px;line-height:1.4}
.ptask__t b{font-weight:600}
.ptask__t span{color:var(--ink-faint);font:400 12px/1 'Space Mono',monospace;letter-spacing:.06em}
.ptask__why{margin:0;color:var(--ink-dim);font-size:14.5px;line-height:1.55}
.ptask__back{justify-self:start;margin-top:4px;font-size:13.5px;color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.ptask__back:hover{color:var(--ink);border-bottom-color:var(--signal)}

/* ═══════════ your own song (Pro, preview): the loop picker, your-songs.html + ownsong.js ═════════════
   One deck: the song's parts as lanes under a bar ruler, the loop lit teal across them, its two ends
   to pull. Amber is the song, teal is the bit you picked. */
.own{display:grid;gap:22px}
.own__head{display:grid;gap:14px}
.own__title{font-size:clamp(40px,6vw,68px)}
.own__lib{background:var(--module);background-image:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift);padding:clamp(18px,2.6vw,28px);display:grid;gap:16px}
.own__lib-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.own__count{font:400 12px/1.4 'Space Mono',monospace;letter-spacing:.06em;color:var(--ink-faint)}
/* your songs: one row each, its state on the right */
.own__songs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.own__song-row{display:flex;align-items:stretch;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,238,215,.03);transition:border-color .15s,background .15s}
.own__song-row:hover{border-color:var(--line-strong)}
.own__song-row.is-on{border-color:var(--signal);background:rgba(var(--signal-rgb),.08)}
.own__song-row.is-opening{border-color:rgba(var(--signal-rgb),.5)}
.own__song-go{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;min-height:56px;padding:12px 16px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.own__song-go b{font:600 15.5px/1.3 'Archivo',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.own__song-st{display:inline-flex;align-items:center;gap:8px;font:400 12px/1.3 'Space Mono',monospace;letter-spacing:.04em;color:var(--ink-faint);white-space:nowrap}
.own__song-row.is-on .own__song-go b{color:var(--signal)}
.own__song-row.is-waiting .own__song-st,.own__song-row.is-opening .own__song-st{color:var(--signal)}
.own__song-go[disabled],.own__song-go[aria-disabled="true"]{cursor:default}
/* narrow phones: the status goes under the title, so a long one ("Its parts have gone…") never squeezes it out */
@media (max-width:480px){.own__song-go{grid-template-columns:1fr}.own__song-st{white-space:normal}}
.own__song-bar{grid-column:1/-1;height:3px;border-radius:2px;background:rgba(255,238,215,.08);overflow:hidden}
.own__song-bar i{display:block;height:100%;background:var(--signal);transition:width .6s var(--ease)}
.own__song-row .own__chip-x{width:48px;min-height:56px;border-left:1px solid var(--line-soft)}
/* a small spinner: a ring with a lit quarter */
.own__spin{width:12px;height:12px;border-radius:50%;border:2px solid rgba(var(--signal-rgb),.25);border-top-color:var(--signal);animation:own-spin .8s linear infinite;flex:none}
@keyframes own-spin{to{transform:rotate(360deg)}}
/* adding a song: a drop zone, then the file and the tick */
.own__add{display:grid;gap:12px}
.own__drop{position:relative;display:grid;justify-items:center;gap:8px;padding:clamp(24px,4vw,40px) 20px;border-radius:var(--r-lg);border:1.5px dashed rgba(var(--signal-rgb),.35);
  background:radial-gradient(120% 90% at 50% 0%,rgba(var(--signal-rgb),.07),transparent 70%);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.own__drop:hover,.own__drop.is-over{border-color:var(--signal);background:radial-gradient(120% 90% at 50% 0%,rgba(var(--signal-rgb),.14),transparent 70%)}
.own__drop.is-over{transform:scale(1.005)}
.own__drop:focus-within{outline:2px solid rgba(var(--signal-rgb),.8);outline-offset:3px}
.own__drop-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.own__drop-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;color:var(--signal);background:rgba(var(--signal-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--signal-rgb),.3)}
.own__drop.is-reading .own__drop-icon{animation:own-pulse 1.2s var(--ease-io) infinite}
@keyframes own-pulse{50%{box-shadow:inset 0 0 0 1px rgba(var(--signal-rgb),.3),0 0 0 8px rgba(var(--signal-rgb),.08)}}
.own__drop-h{font:800 clamp(22px,2.4vw,28px)/1 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;letter-spacing:.02em}
.own__drop-sub{font-size:14.5px;line-height:1.5;color:var(--ink-dim);max-width:44ch}
.own__drop-sub u{color:var(--signal);text-underline-offset:3px}
.own__pick{display:grid;gap:14px;padding:18px;border-radius:var(--r);border:1px solid var(--line-strong);background:rgba(255,238,215,.03)}
.own__pick-file{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.own__pick-file b{font:600 16px/1.3 'Archivo',sans-serif}
.own__pick-file span{font:400 12px/1.3 'Space Mono',monospace;letter-spacing:.04em;color:var(--ink-faint)}
.own__link{margin-left:auto;border:0;background:none;padding:6px 0;color:var(--amber);font:600 13.5px/1 'Archivo',sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.own__pick .tbtn{justify-self:start}
.own__rights{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-dim);cursor:pointer;min-height:44px}
.own__rights input{width:18px;height:18px;accent-color:var(--signal);flex:none}
#o-up-msg:empty{display:none}
/* the panel that follows a song: steps, a bar, what's happening */
.own__job{display:grid;gap:12px;padding:18px;border-radius:var(--r);border:1px solid rgba(var(--signal-rgb),.35);background:rgba(var(--signal-rgb),.05)}
.own__job.is-ready{border-color:var(--signal);background:rgba(var(--signal-rgb),.1)}
.own__job.is-failed{border-color:rgba(var(--peak-rgb),.5);background:rgba(var(--peak-rgb),.05)}
.own__job-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.own__job-title{font:600 16px/1.3 'Archivo',sans-serif}
.own__job-step{font:700 11.5px/1 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.own__job.is-failed .own__job-step{color:var(--peak)}
.own__job .own__hint{margin:0;color:var(--ink-dim)}
.own__job-act{display:flex;gap:10px;flex-wrap:wrap}
.own__job-act:not(:has(:not([hidden]))){display:none}
.own__steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;counter-reset:own}
.own__steps li{counter-increment:own;display:inline-flex;align-items:center;gap:8px;font:600 13px/1.2 'Archivo',sans-serif;color:var(--ink-faint)}
.own__steps li::before{content:counter(own);display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  font:700 11px/1 'Space Mono',monospace;border:1px solid var(--line-strong);color:var(--ink-faint)}
.own__steps li.is-on{color:var(--ink)}
.own__steps li.is-on::before{border-color:var(--signal);color:var(--signal);box-shadow:0 0 0 3px rgba(var(--signal-rgb),.15)}
.own__steps li.is-done{color:var(--ink-dim)}
.own__steps li.is-done::before{content:"✓";background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.own__steps li.is-failed::before{content:"!";border-color:var(--peak);color:var(--peak)}
.own__bar{position:relative;height:6px;border-radius:3px;background:rgba(255,238,215,.08);overflow:hidden}
.own__bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--signal-dim),var(--signal));transition:width .4s var(--ease)}
/* moving with no number to show yet (a split just started): a band sweeps across */
.own__bar.is-busy i{width:30%!important;animation:own-sweep 1.4s var(--ease-io) infinite}
@keyframes own-sweep{from{transform:translateX(-110%)}to{transform:translateX(340%)}}
/* opening a song: the steps over the waveform's place, the last song's waveform gone */
.own__deck.is-opening .own__wave{min-height:220px}
.own__deck.is-opening canvas,.own__deck.is-opening .own__lanes{visibility:hidden}
.own__deck.is-opening .own__ctl,.own__deck.is-opening .own__tools,.own__deck.is-opening .own__parts{display:none}
.own__wait{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:14px;padding:20px;text-align:center}
.own__wait .own__steps{justify-content:center}
.own__wait .own__bar{width:min(360px,80%)}
.own__wait-msg{font:400 12.5px/1.5 'Space Mono',monospace;letter-spacing:.04em;color:var(--ink-dim)}
/* on every other page while a song splits (ownwatch.js) */
.own-pill{position:fixed;right:16px;bottom:calc(var(--rail-b) + 16px);z-index:70;display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 32px));
  padding:10px 12px 10px 14px;border-radius:999px;border:1px solid rgba(var(--signal-rgb),.4);background:rgba(17,14,11,.94);box-shadow:0 12px 30px -10px rgba(0,0,0,.8);
  font:600 13.5px/1.3 'Archivo',sans-serif;color:var(--ink);backdrop-filter:blur(8px)}
.own-pill__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.own-pill__spin{width:12px;height:12px;border-radius:50%;border:2px solid rgba(var(--signal-rgb),.25);border-top-color:var(--signal);animation:own-spin .8s linear infinite;flex:none}
.own-pill__tick{width:16px;height:16px;border-radius:50%;background:var(--signal);flex:none;position:relative}
.own-pill__tick::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border:solid var(--on-signal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.own-pill a{color:var(--on-signal);background:var(--signal);border-radius:999px;padding:6px 12px;text-decoration:none;font-weight:700;flex:none}
.own-pill__fail{width:16px;height:16px;border-radius:50%;background:var(--level);flex:none;position:relative}
.own-pill__fail::after{content:"!";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--on-level);font:700 11px/1 'Archivo',sans-serif}
.own-pill.is-failed{border-color:rgba(var(--level-rgb),.45)}
.own-pill.is-failed a{background:none;color:var(--level);border:1px solid rgba(var(--level-rgb),.5)}
.own-pill__x{border:0;background:none;color:var(--ink-faint);width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.own-pill__x svg{width:10px;height:10px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.own__lib.has-songs .own__drop{grid-template-columns:auto 1fr;justify-items:start;align-items:center;column-gap:16px;row-gap:2px;padding:16px 18px;text-align:left}
.own__lib.has-songs .own__drop-icon{grid-row:span 2;width:44px;height:44px}
.own__lib.has-songs .own__drop-h{font-size:20px}
@media (max-width:560px){.own__pick .tbtn{justify-self:stretch}.own__link{margin-left:0}}
@media (prefers-reduced-motion:reduce){
  .own__spin,.own-pill__spin{animation-duration:2.4s}
  .own__drop.is-reading .own__drop-icon,.own__bar.is-busy i{animation:none}
  .own__bar.is-busy i{width:100%!important;opacity:.35}
  .own__bar i,.own__song-bar i,.own__drop,.own__song-row{transition:none}
}
.own__deck,.own__saved{background:var(--module);background-image:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift);padding:clamp(16px,2.4vw,26px)}
.own__song .chip{white-space:nowrap;flex:none}
.own__song{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.own__name{margin:0;font:700 clamp(19px,2vw,23px)/1.2 'Archivo',sans-serif;letter-spacing:-.005em}
.own__meta{margin:4px 0 0;font:400 12px/1.4 'Space Mono',monospace;letter-spacing:.06em;color:var(--ink-faint)}
.own__wave{position:relative;min-height:120px;border-radius:var(--r);background:var(--screen);box-shadow:inset 0 2px 8px rgba(0,0,0,.7),inset 0 0 0 1px var(--line-soft);
  overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:pointer}
.own__wave canvas{display:block;width:100%}
.own__lane-name{position:absolute;left:8px;font:700 9.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
  background:rgba(11,9,7,.72);padding:3px 5px;border:1px solid transparent;border-radius:4px;z-index:2;cursor:pointer;transition:color .15s,border-color .15s,opacity .15s}
.own__lane-name:hover{color:var(--ink);border-color:var(--line-strong)}
.own__lane-name.is-solo{color:var(--signal);border-color:rgba(var(--signal-rgb),.6)}
.own__lane-name.is-muted{opacity:.45}
/* on a touch screen the names stay labels (the part buttons under the waveform solo): a finger placing the loop
   shouldn't land on one */
@media (pointer:coarse){.own__lane-name{pointer-events:none}.own__part{min-height:44px;padding:6px 15px}}
.own__loop{position:absolute;top:0;bottom:0;z-index:3}
.own__body{position:absolute;inset:0;cursor:grab;touch-action:pan-y;border:solid var(--signal);border-width:2px 2px 0;
  box-shadow:-6px 0 12px -8px rgba(var(--signal-rgb),.9),6px 0 12px -8px rgba(var(--signal-rgb),.9)}
.own__body.is-held{cursor:grabbing;background:rgba(var(--signal-rgb),.06)}
.own__body:focus-visible{outline-offset:-2px}
/* the grips: a pill on each edge, in a 32 px wide hit area centred on it */
.own__edge{position:absolute;top:0;bottom:0;width:32px;margin-left:-16px;cursor:ew-resize;touch-action:none;z-index:2}
.own__edge--a{left:0}.own__edge--b{left:100%}
.own__edge i{position:absolute;top:calc(50% - 15px);left:calc(50% - 5px);width:10px;height:30px;border-radius:5px;background:var(--signal);
  box-shadow:0 0 0 2px var(--screen),0 0 14px rgba(var(--signal-rgb),.7)}
.own__edge.is-held i,.own__edge:hover i{background:#6ff0dd}
.own__edge:focus-visible{outline:none}.own__edge:focus-visible i{box-shadow:0 0 0 2px var(--screen),0 0 0 4px rgba(var(--signal-rgb),.9)}
/* a loop too narrow for both grips side by side: the grips (not the edges) stand outside it */
.own__loop--tight .own__edge--a{margin-left:-30px}.own__loop--tight .own__edge--b{margin-left:-2px}
.own__head-line{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--ink);box-shadow:0 0 8px rgba(255,240,222,.6);z-index:4;pointer-events:none;will-change:transform}
.own__ctl{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px}
.own__play{min-width:178px}
.own__play svg{flex:none}
.own__read{display:grid;gap:3px}
.own__read b{font:800 clamp(24px,2.6vw,30px)/1 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--signal);text-shadow:0 0 24px rgba(var(--signal-rgb),.35)}
.own__read span{font:400 12px/1.3 'Space Mono',monospace;letter-spacing:.04em;color:var(--ink-faint)}
.own__tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.own__lens{display:flex;align-items:center;gap:10px}
.own__cap{font:700 10.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.own__lens .key{min-width:44px;padding:0 12px 0 10px;gap:8px;height:42px}
.own__lens .key::before{width:8px;height:8px}
.own__move{display:flex;gap:8px;flex-wrap:wrap}
.own__move .key{height:42px}
.own__move .key::before{display:none}
.own__parts{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.own__part-row{display:flex;flex-wrap:wrap;gap:8px}
.own__part{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 13px;border-radius:999px;border:1px solid rgba(var(--signal-rgb),.3);background:rgba(var(--signal-rgb),.06);font:600 13px/1 'Archivo',sans-serif;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,opacity .15s,box-shadow .15s}
.own__part:hover{border-color:rgba(var(--signal-rgb),.6)}
.own__part.is-solo{border-color:var(--signal);background:rgba(var(--signal-rgb),.18);box-shadow:0 0 0 1px rgba(var(--signal-rgb),.35),0 0 16px -6px rgba(var(--signal-rgb),.8)}
.own__part.is-muted{opacity:.5}
.own__solo-hint{margin:10px 0 0}
.own__part .led{width:6px;height:6px}
.own__part--off{border-color:var(--line);background:none;color:var(--ink-faint)}
.own__part--off .led{background:var(--ink-faint);box-shadow:none;opacity:.5}
.own__note{margin:12px 0 0;font-size:14.5px;color:var(--ink-dim)}
.own__note--warn{color:var(--level)}
.own__train{display:grid;gap:16px;padding:clamp(16px,2.4vw,26px);border-radius:var(--r-lg);border:1px solid rgba(var(--signal-rgb),.28);
  background:linear-gradient(180deg,rgba(var(--signal-rgb),.07),rgba(var(--signal-rgb),.02));box-shadow:var(--lift)}
.own__train-top{display:grid;gap:6px}
.own__train .own__hint{margin:0;color:var(--ink-dim)}
.own__ex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
/* the three exercises: cards like the module pages' (a mono kicker, the name in the display face, a line on what
   you do, a round arrow); the first is the one to start with */
.own__go{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;column-gap:12px;padding:18px 18px 20px 20px;border-radius:var(--r);
  text-decoration:none;color:var(--ink);border:1px solid var(--line-strong);background:linear-gradient(180deg,rgba(255,238,215,.05),rgba(255,238,215,.015));
  transition:border-color .2s,background .2s,box-shadow .3s var(--ease),transform .2s var(--ease)}
.own__go-k{grid-column:1;grid-row:1;align-self:center;font:700 10.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.own__go-name{grid-column:1/-1;margin-top:10px;font:800 clamp(22px,1.9vw,26px)/.95 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;letter-spacing:.015em;text-wrap:balance}
.own__go-why{grid-column:1/-1;margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-dim);text-wrap:pretty}
.own__go-arrow{grid-column:2;grid-row:1;align-self:center;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);
  color:var(--ink);transition:background .25s var(--ease),border-color .25s,color .25s,transform .25s var(--ease)}
.own__go[href]:hover,.own__go[href]:focus-visible{border-color:rgba(var(--signal-rgb),.5);box-shadow:var(--lift),0 20px 44px -30px rgba(var(--signal-rgb),.6);transform:translateY(-2px);outline:none}
.own__go[href]:hover .own__go-arrow,.own__go[href]:focus-visible .own__go-arrow{background:var(--signal);border-color:var(--signal);color:var(--on-signal);transform:translateX(2px)}
.own__go[href]:active{transform:translateY(0)}
.own__go--main{border-color:rgba(var(--signal-rgb),.5);background:linear-gradient(150deg,rgba(var(--signal-rgb),.16),rgba(var(--signal-rgb),.03) 62%),rgba(255,238,215,.02);
  box-shadow:0 18px 40px -28px rgba(var(--signal-rgb),.9)}
.own__go--main .own__go-k{color:var(--signal)}
.own__go--main .own__go-arrow{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.own__go[aria-disabled="true"]{cursor:not-allowed;opacity:.5;box-shadow:none}
@media (max-width:760px){.own__go{padding:16px 16px 18px}.own__go-why{margin-top:8px}}
/* the Comp drills: a row of the four, under the three exercises */
.own__comp{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line-soft)}
.own__comp-h{margin:0;display:grid;gap:3px;flex:1 1 220px}
.own__comp-h b{font:700 16px/1.2 'Archivo',sans-serif}
.own__comp-h span{font-size:13.5px;line-height:1.4;color:var(--ink-dim)}
.own__comp-row{display:flex;flex-wrap:wrap;gap:8px}
.own__chipgo{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,238,215,.04);
  color:var(--ink);text-decoration:none;font:600 14px/1 'Archivo',sans-serif;transition:border-color .15s,background .15s}
.own__chipgo[href]:hover{border-color:rgba(var(--signal-rgb),.6);background:rgba(var(--signal-rgb),.07)}
.own__chipgo[aria-disabled="true"]{cursor:not-allowed;opacity:.5}
@media (max-width:760px){.own__ex{grid-template-columns:1fr}.own__comp-row{width:100%}.own__chipgo{flex:1 1 calc(50% - 4px);justify-content:center}}
@media (prefers-reduced-motion:reduce){.own__chipgo{transition:none}}
@media (prefers-reduced-motion:reduce){.own__go,.own__go-arrow{transition:none}.own__go[href]:hover,.own__go[href]:hover .own__go-arrow{transform:none}}
.own__back{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;font:700 11.5px/1 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);text-decoration:none}
.own__back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.own__back:hover{color:var(--ink)}
.own__saved-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.own__h{margin:0;font:800 22px/1 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;letter-spacing:.02em}
.own__chips{display:flex;flex-wrap:wrap;gap:8px}
.own__chips:not(:empty){margin-top:14px}
.own__chip{display:inline-flex;align-items:stretch;border-radius:999px;border:1px solid var(--line-strong);background:rgba(255,238,215,.04);overflow:hidden}
.own__chip.is-on{border-color:var(--signal);background:rgba(var(--signal-rgb),.1);box-shadow:0 0 20px -8px rgba(var(--signal-rgb),.7)}
.own__chip-go{border:0;background:none;color:var(--ink);font:600 14px/1 'Archivo',sans-serif;padding:0 6px 0 16px;min-height:44px;cursor:pointer}
.own__chip.is-on .own__chip-go{color:var(--signal)}
.own__chip-x{border:0;background:none;color:var(--ink-faint);width:40px;min-height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.own__chip-x:hover{color:var(--peak)}
.own__chip-x svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.own__hint{margin:12px 0 0;font-size:14.5px;color:var(--ink-faint)}
.own__next{padding:4px 2px;display:grid;gap:10px}
.own__next p{margin:0;color:var(--ink-dim);max-width:62ch}
.own__next a{color:var(--amber)}
.own__fail{text-align:center;display:grid;gap:12px;justify-items:center}
.own__fail p{margin:0;color:var(--ink-dim)}
@media (max-width:560px){
  .own__ctl{gap:14px}
  .own__play{flex:1 1 100%}
  .own__tools{justify-content:flex-start}
  .own__lens .key{min-width:40px;padding:0 9px 0 8px}
  .own__move{width:100%}.own__move .key{flex:1;padding:0 10px}
}
@media (prefers-reduced-motion:reduce){.own__head-line{box-shadow:none}}

/* ═══════════ Your songs, featured (previews only: ownpreview.js): home and Pro sections, the menu plate ═══════════ */
.ys__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:center}
.ys .sec__head{margin-bottom:22px}
.ys__points{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:16px}
.ys__points li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.ys__n{font:700 11px/1.9 'Space Mono',monospace;letter-spacing:.12em;color:var(--level)}
.ys__points h3{margin:0 0 4px;font:700 17px/1.25 'Archivo',sans-serif;color:var(--ink)}
.ys__points p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-dim);text-wrap:pretty}
.ys__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.ys__fine{margin:0;font-size:13px;line-height:1.5;color:var(--ink-faint);max-width:52ch}
.ys-art{margin:0;padding:14px 14px 12px;border-radius:var(--r-lg);border:1px solid rgba(var(--level-rgb),.28);
  background:linear-gradient(180deg,rgba(var(--level-rgb),.06),rgba(var(--level-rgb),.01)),var(--surface);box-shadow:var(--lift),0 30px 70px -40px rgba(var(--signal-rgb),.55)}
.ys-art svg{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--screen);box-shadow:inset 0 2px 8px rgba(0,0,0,.7),inset 0 0 0 1px var(--line-soft)}
.ys-art__lane{fill:rgba(255,238,215,.03)}
.ys-art__bar{stroke:rgba(255,226,186,.1);stroke-width:1}
.ys-art__num{font:700 9px 'Space Mono',monospace;fill:rgba(184,175,163,.75)}
.ys-art__num.is-on{fill:var(--signal)}
.ys-art__loop{fill:rgba(var(--signal-rgb),.08)}
.ys-art__wave rect{fill:rgba(var(--amber-rgb),.42)}
.ys-art__wave.is-on rect{fill:rgba(var(--signal-rgb),.9)}
.ys-art__name{font:700 8.5px 'Space Mono',monospace;letter-spacing:.14em;fill:var(--ink-dim);paint-order:stroke;stroke:rgba(11,9,7,.85);stroke-width:3px}
.ys-art__edge{fill:var(--signal)}
.ys-art__grip{fill:var(--signal);stroke:rgba(11,9,7,.6);stroke-width:1.5}
.ys-art figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font:400 11px/1.4 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.ys-art__chip{font:800 15px/1 'Saira Condensed','Saira Fallback',sans-serif;letter-spacing:.02em;color:var(--signal);text-transform:uppercase}
@media (max-width:900px){.ys__in{grid-template-columns:1fr}}
/* the picture's words, scaled down with it on a phone: drawn larger so they stay readable */
@media (max-width:600px){.ys-art__name{font-size:15px;stroke-width:4px}.ys-art__num{font-size:15px}}

/* the header's Your songs (beside Daily and Learn), with Pro's dot */
.drawer__a .pro-dot{margin-left:6px}
/* the Music bar on an exercise that plays a loop of your song: Our tracks | Your songs, and your songs under it */
.ysm{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 16px;padding:10px 12px 10px 16px;border-radius:var(--r);
  border:1px solid var(--line-soft);background:rgba(255,238,215,.025)}
.ysm__k{font:700 10.5px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.ysm__seg{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(0,0,0,.25)}
.ysm__opt{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ink-dim);
  font:600 13.5px/1 'Archivo',sans-serif;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.ysm__opt:hover{color:var(--ink)}
.ysm__opt.is-on{background:var(--raised);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(var(--signal-rgb),.45)}
.ysm__opt .pro-dot{margin-left:7px}
.ysm__now{min-width:0;overflow-wrap:anywhere;font:400 12px/1.3 'Space Mono',monospace;letter-spacing:.04em;color:var(--signal)}
.ysm__other{font-size:13.5px;color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.ysm__other:hover{color:var(--ink);border-bottom-color:var(--signal)}
.ysm__hint{flex-basis:100%;font-size:13px;line-height:1.4;color:var(--ink-faint)}
.ysm__panel{position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:min(420px,100%);padding:14px;border-radius:var(--r-lg);border:1px solid var(--line-strong);
  background:var(--module);background-image:var(--surface);box-shadow:var(--lift),0 24px 60px -20px rgba(0,0,0,.85)}
.ysm__panel[hidden]{display:none}
.ysm__note{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--ink-dim)}
.ysm__note a{color:var(--signal)}
.ysm__list{display:grid;gap:6px;margin-bottom:10px}
.ysm__song{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 12px;border-radius:var(--r);border:1px solid var(--line);
  color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s}
.ysm__song b{font:600 14.5px/1.3 'Archivo',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ysm__song span{flex:none;font:400 11px/1 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--signal)}
.ysm__song:hover,.ysm__song:focus-visible{border-color:rgba(var(--signal-rgb),.55);background:rgba(var(--signal-rgb),.06);outline:none}
.ysm__song.is-on{border-color:rgba(var(--signal-rgb),.6)}
.ysm__song.is-waiting{color:var(--ink-dim);cursor:default}
.ysm__song.is-waiting span{color:var(--ink-faint)}
span.ysm__opt{cursor:default}
.ysm__song--demo span{color:var(--ink-faint)}
.ysm__add{font-size:13.5px;color:var(--level);text-decoration:none}
.ysm__add:hover{text-decoration:underline}
/* the module page's line: which of its exercises run on your own songs */
.ys-modline{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:18px 0 0;padding:14px 16px;border-radius:var(--r);border:1px dashed rgba(var(--level-rgb),.35);
  color:var(--ink-dim);font-size:15px;line-height:1.5}
.ys-modline a{display:inline-flex;align-items:center;gap:6px;color:var(--level);font-weight:600;text-decoration:none}
.ys-modline a .btn__arrow{width:15px;height:15px}
/* the picker, opened from an exercise: what it's picking for, and that exercise lit */
.own__for{margin:0;padding:12px 16px;border-radius:var(--r);border:1px solid rgba(var(--signal-rgb),.35);background:rgba(var(--signal-rgb),.06);color:var(--ink);font-size:15px;line-height:1.5}
.own__for[hidden]{display:none}
.own__for a{color:var(--signal);margin-left:4px}
.own__chipgo.is-for{border-color:var(--signal);color:var(--signal)}
@media (max-width:560px){.ysm{padding:10px 12px}.ysm__panel{width:100%}}
@media (pointer:coarse){.ysm__opt{min-height:44px}}

/* ═══════════ Pro where it's locked (25 Oct 2026): the padlock on a Pro card (path.js), the strip under a module
   page's list (path.js proStrip), the Music bar's way into Pro, and the Your songs page's pitch (ownpreview.js) ═══════════ */
.pcard__access--pro{display:inline-flex;align-items:center;gap:5px}
.pcard__access .lock{flex:none;width:11px;height:11px}
.modpro{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin:24px 0 0;padding:16px 18px;border-radius:var(--r-lg);
  border:1px solid rgba(var(--level-rgb),.35);background:rgba(var(--level-rgb),.05)}
.modpro:empty,.modpro[hidden]{display:none}
.modpro__lock{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--level);border:1px solid rgba(var(--level-rgb),.45)}
.modpro__lock .lock{width:16px;height:16px}
.modpro__p{flex:1 1 260px;margin:0;color:var(--ink-dim);font-size:15px;line-height:1.5;text-wrap:pretty}
.modpro__p b{color:var(--ink)}
.modpro .btn{flex:none}
@media (max-width:560px){.modpro .btn{width:100%;justify-content:center}}
.ysm__pro{margin:0 0 10px}
.ysm__pro .btn{width:100%;justify-content:center}
.own .ys{padding:clamp(24px,4vw,40px) 0 0}
.own .ys .wrap{padding:0;max-width:none}
/* ═══════════ play, profile and technical fixes (25 Oct 2026) ═══════════ */
/* The headline face's stand-in while Saira Condensed loads: Arial scaled to its width and line height, so headings
   wrap the same before and after the swap (measured: Saira Condensed 800 is 71% of Arial Bold's width, ascent 1.13em,
   descent 0.44em). Every Saira stack names it second. */
@font-face{font-family:'Saira Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial'),local('Roboto'),local('Helvetica');
  font-weight:600 800;size-adjust:71%;ascent-override:159%;descent-override:62%;line-gap-override:0%}
/* phones: the bottom bar sits at the end of the page instead of over the controls (it only holds Pro and Privacy there) */
@media (max-width:560px){
  body.app{--rail-b:0px}
  .rail--btm{position:static;height:40px;animation:none}
}
/* Balance faders: the cap hangs half its height past each end of the travel, so the travel stops short of the
   S/M keys below it (and the readout above) */
.fader{margin:14px 0}
@media (max-width:560px){.fader{margin:12px 0}}
/* the pass mark beside a score */
.passmark{margin-left:8px;font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);font-style:normal;vertical-align:2px}
/* toasts on an exercise page: in the gutter beside the card where there's room (the card is 880 wide) */
@media (min-width:1240px){
  .toasts--ex{right:8px;width:calc((100vw - 880px) / 2 - 32px);max-width:320px}
  .toasts--ex .toast{padding:12px 14px}
  .toasts--ex .toast b{font-size:20px}
}
@media (min-width:1240px) and (max-width:1439px){
  .toasts--ex .toast.toast--art{display:flex}
  .toasts--ex .toast--art .disc{display:none}
}
/* a Pro exercise and no Pro account cached (tools/early.mjs LOCK_SNIPPET): dimmed from the first paint, with the
   pitch's room kept above it (its height and the breadcrumb under it), until shell.js lockPage puts the pitch there */
html.pro-locking main .stage__in::before{content:"";display:block;height:618px}
html.pro-locking main #eqt,html.pro-locking main .stage__in:not(:has(> #eqt)) > *{opacity:.3;filter:saturate(.4);pointer-events:none;user-select:none}
@media (max-width:560px){html.pro-locking main .stage__in::before{height:907px}}
/* faint text that stacked opacity on --ink-faint fell under AA: the colour alone passes */
.track__txt span,.fbtn.dim,.mt__flag{opacity:1}
/* tap targets of at least 24 px: the bottom bar's links and the lock panel's second link */
.sig a{display:inline-block;padding:4px 2px;line-height:16px}
.prolock__more{display:inline-block;padding:5px 0}
/* the profile: the way into Pro under the Golden Ears checklist, and the track's Pro tag as a link */
.me-gold__go{margin:12px 0 0}
a.track__pro{text-decoration:none}
a.track__pro:hover,a.track__pro:focus-visible{border-color:var(--level)}