/* 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. */
/* ═══════════ fonts ═══════════ */
/* Served from /assets/fonts (Google Fonts' latin and latin-ext files, OFL), not from Google: the faces every page uses are
   preloaded in its <head> (tools/preload.mjs), so they arrive with this stylesheet and the first paint is already in
   them, with no jump from Arial (Dan, 31 Oct 2026). A file that changes gets a new name (they're cached for a year). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:100% 125%;font-display:swap;src:url(/assets/fonts/archivo-v25-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:100% 125%;font-display:swap;src:url(/assets/fonts/archivo-v25-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/saira-condensed-v12-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/saira-condensed-v12-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/saira-condensed-v12-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/saira-condensed-v12-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/saira-condensed-v12-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/saira-condensed-v12-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/space-mono-v17-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/space-mono-v17-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-mono-v17-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-mono-v17-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* An exercise card's inside stays hidden until desk.js has laid it out as the desk or the dock (it sets data-desk), so a
   slow connection never shows the plain stacked card and then snaps (Dan, 31 Oct 2026). The head's early snippet
   (tools/early.mjs) sets .desk-wait and takes it off after 3 s or when the scripts fail, so the card always shows. */
.desk-wait .eqt:not([data-desk])>*{visibility:hidden}
/* ═══════════ 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}
/* 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;font:400 10px/1 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.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;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:20px;font:400 10.5px/1.4 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.plate__meter .pcard__bar{flex:1;max-width:120px}
/* two lines tall even when the second is empty (an all-Pro module), so every card's top line sits level */
.plate__meter--intro{flex-direction:column;align-items:flex-start;gap:7px;min-height:calc(2.8em + 7px)}
/* one card per row (the flat rack fits two 260px cards and a 14px gap from 534px): nothing to line up with, so no empty line.
   Asked of the home grid's own width, so scrollbars don't move it */
.lp-mods{container-type:inline-size}
@container (max-width:533.98px){.plate__meter--intro{min-height:0}}
.plate__free{color:var(--ink-dim)}
.plate__list{list-style:none;margin:0 -8px 12px;padding:12px 0 0;border-top:1px solid var(--line-soft)}
/* a module that's all Pro: its Pro line is the top line, so the card has one line there, not two */
.plate__list:has(> .plate__sep:first-child){padding-top:0;border-top:0}
.plate__sep{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:8px;padding:11px 8px 13px;font:700 9px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--level)}
.plate__sep:first-child{padding-top:0;margin-top:-4px}
.plate__sep::after{content:"";height:1px;background: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__social{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0}
.foot__social a{color:var(--ink-dim);text-decoration:none;font-size:14px;border-bottom:1px solid var(--line-soft);padding:2px 0}
.foot__social a:hover{color:var(--ink);border-bottom-color:var(--signal)}
.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(16px,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{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.scope__axis{height:22px;box-sizing:border-box;line-height:10px}
.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;min-height:38px;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;min-height:51px}
  .scope__axis{height:19px}
  .scope__ans small{letter-spacing:.04em}
  .scope__knobs{display:none}
}
@container (max-width:380px){.scope__ans small{display:none}.scope__ans{min-height:37px}}
@media (max-width:560px){.scope{padding:10px;border-radius:22px}}
/* one unit, every module (hero.js): whatever belongs to a scene that isn't showing stays out of the way.
   data-m lists the scenes a piece shows in; data-scene on the unit is the one showing */
.scope[data-scene="eq"] [data-m]:not([data-m~="eq"]),.scope[data-scene="comp"] [data-m]:not([data-m~="comp"]),
.scope[data-scene="bal"] [data-m]:not([data-m~="bal"]),.scope[data-scene="space"] [data-m]:not([data-m~="space"]),
.scope[data-scene="ask"] [data-m]:not([data-m~="ask"]),.scope[data-scene="ears"] [data-m]:not([data-m~="ears"]),
.scope[data-scene="play"] [data-m]:not([data-m~="play"]){display:none}
.scope__screen{position:relative}
.scope__screen>:not(canvas){opacity:var(--xf,1)}
/* the EQ's keys, as on the exercise desk: lamps that light for the side you hear */
.scope__keys{position:absolute;left:14px;bottom:10px;display:flex;gap:6px;pointer-events:none}
.lampk{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;background:linear-gradient(180deg,#1c1813,#110e0b);border:1px solid rgba(255,226,186,.12);
  box-shadow:inset 0 1px 0 rgba(255,240,222,.08),0 2px 4px rgba(0,0,0,.6);font:700 9.5px/1 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);transition:color .25s,border-color .25s,box-shadow .25s}
.lampk::before{content:"";width:6px;height:6px;border-radius:50%;background:#3a3129;box-shadow:inset 0 1px 1px rgba(0,0,0,.6);transition:background .25s,box-shadow .25s}
.lampk.is-on{color:var(--ink);border-color:rgba(var(--signal-rgb),.45)}
.lampk.is-on::before{background:var(--signal);box-shadow:0 0 8px rgba(var(--signal-rgb),.9)}
.lampk--x.is-on{border-color:rgba(var(--amber-rgb),.55)}
.lampk--x.is-on::before{background:var(--amber);box-shadow:0 0 10px rgba(var(--amber-rgb),.95)}
/* Ask Dan's reply, typed in over the screen, in Ask Dan's own bubbles (.mt) */
.scope__ask.mt{position:absolute;inset:0;overflow:hidden;margin:0;padding:6px 16px 12px;display:flex;flex-direction:column;justify-content:center;gap:10px;animation:none}
.scope__ask .mt__row{gap:10px}
.scope .scope__ask .mt__you{font-size:13.5px;line-height:1.45;padding:9px 13px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ease)}
.scope__ask .mt__said{padding:10px 14px;max-width:none}
.scope .scope__ask .mt__dan{font-size:13.5px;line-height:1.5;min-height:1.5em;max-width:none}
.scope__ask .mt__av{width:30px;height:30px;margin-top:4px}
.scope__ask .mt__av svg{width:15px;height:15px}
.scope__ask .mt__typing{height:20px}
.scope__ask .mt__row:last-child{opacity:0;transition:opacity .3s}
.scope__ask.is-asked .mt__you{opacity:1;transform:none}
.scope__ask.is-asked .mt__row:last-child{opacity:1}
.scope__ask:not(.is-typing) .mt__typing,.scope__ask.is-typing .mt__dan{display:none}
.scope__answers--chips .scope__ans{font:600 11.5px/1.25 'Archivo',sans-serif;letter-spacing:0;text-transform:none;color:var(--ink-dim);padding:11px 8px}
.scope__axis--pan{padding:0 22px 12px}
.scope__axis--legend{justify-content:flex-start;gap:18px}
.scope__axis--legend i{display:inline-block;width:10px;height:3px;margin-right:6px;vertical-align:middle;border-radius:1px}
/* Play this one: the unit's way in. Teal, the colour that always means you */
.scope__knobs{margin-left:auto}
.scope__label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.scope__answers--chips .scope__ans{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scope__go{position:relative;flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 13px;border-radius:999px;cursor:pointer;
  background:var(--signal);color:#04130f;border:0;font:700 12.5px/1 'Archivo',sans-serif;letter-spacing:.01em;text-transform:none;white-space:nowrap;
  box-shadow:0 6px 18px -6px rgba(var(--signal-rgb),.7)}
/* a ring that breathes out from it: transform and opacity only, so it never repaints the page */
.scope__go::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px rgba(var(--signal-rgb),.55);pointer-events:none;animation:goRing 2.6s ease-out 2 forwards}   /* twice, then still (WCAG 2.2.2: nothing moves on for more than 5 s) */
.scope__go:hover{filter:brightness(1.08)}
.scope__go:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@keyframes goRing{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.18,1.55);opacity:0}}
.scope[data-scene="play"] .scope__go{background:transparent;color:var(--ink-dim);border:1px solid var(--line-strong);box-shadow:none}
.scope[data-scene="play"] .scope__go::after{display:none}
.scope[data-scene="play"] .scope__go svg{display:none}
.scope__ans.is-gold{color:var(--level);border-color:rgba(var(--level-rgb),.55);background:rgba(var(--level-rgb),.08)}
.scope__ans.is-gold small{color:var(--level)}
.scope[data-scene="play"] .scope__knobs,.scope[data-scene="play"] .scope__verdict{display:none}
/* the question, for real: keys to flip, then the answers as buttons */
.scope__live{position:absolute;left:14px;right:14px;bottom:10px;display:flex;align-items:center;gap:12px}
.scope__flip{display:flex;gap:6px}
.scope__flip .lampk{cursor:pointer;padding:9px 14px;font-size:10.5px}
.scope__flip .lampk:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.scope__hint{margin:0;font:400 10px/1.3 'Space Mono',monospace;letter-spacing:.06em;color:var(--ink-faint)}
#sc-choices .scope__ans{cursor:pointer;color:var(--ink)}
#sc-choices .scope__ans:hover:not(:disabled){border-color:rgba(var(--signal-rgb),.45)}
#sc-choices .scope__ans:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
#sc-choices .scope__ans:disabled{cursor:default}
#sc-choices .scope__ans.is-miss{color:#f08a74;border-color:rgba(240,138,116,.5);background:rgba(240,138,116,.08)}
#sc-choices.is-ab{grid-template-columns:repeat(2,1fr)}
#sc-choices:empty{min-height:70px}   /* while a question loads: the row keeps an answer row's height (56 + its padding), so nothing below jumps */
.scope__result{margin:0;padding:4px 8px 2px;font:500 14px/1.45 'Archivo',sans-serif;color:var(--ink-dim);min-height:0}
.scope__result:empty{display:none}
.scope__result b{color:var(--ink)}
.scope__result .is-right{color:var(--signal)}
.scope__next{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.scope__next{align-items:center}
.scope__next .btn{padding:10px 16px;font-size:14px}
.scope__again{background:none;border:0;padding:10px 6px;cursor:pointer;color:var(--ink-dim);font:600 14px/1 'Archivo',sans-serif;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.scope__again:hover{color:var(--ink)}
.scope__again:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}
/* the tour's chapters: a tick for each scene, the one showing fills as it plays */
.reel{display:flex;gap:4px;padding:12px 4px 2px}
.reel__t{flex:1;position:relative;overflow:hidden;padding:10px 0 4px;background:none;border:0;cursor:pointer;color:var(--ink-faint);
  font:700 9.5px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;text-align:left}
.reel__t::before,.reel__t::after{content:"";position:absolute;left:0;top:0;height:2px;border-radius:2px}
.reel__t::before{right:0;background:rgba(255,226,186,.1)}
.reel__t::after{width:calc(var(--p,0) * 100%);background:var(--amber);box-shadow:0 0 8px rgba(var(--amber-rgb),.8)}
.reel__t.is-on{color:var(--ink)}
.reel__t[aria-pressed="true"]{color:var(--signal)}   /* held: the scene plays on a loop */
.reel__t[aria-pressed="true"]::after{background:var(--signal);box-shadow:0 0 8px rgba(var(--signal-rgb),.8)}
.reel__t.is-done::after{width:100%;background:rgba(var(--amber-rgb),.45);box-shadow:none}
.reel__t:hover{color:var(--ink-dim)}
.reel__t:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.scope[data-scene="play"] .reel{opacity:.45}
@media (prefers-reduced-motion:reduce){.scope__go::after{animation:none;display:none}.scope__ask .mt__you,.scope__ask .mt__row:last-child{transition:none}}
/* the tour's pieces at a phone's width (after their own rules, so these win) */
@container (max-width:450px){
  .scope__keys{left:10px;bottom:8px}
  .lampk{padding:5px 8px;font-size:8.5px;letter-spacing:.08em}
  .scope__ask.mt{padding:2px 10px 6px;gap:6px;justify-content:flex-end}
  .scope .scope__ask .mt__you,.scope .scope__ask .mt__dan{font-size:12px;line-height:1.45}
  .scope .scope__ask .mt__you{padding:6px 10px}
  .scope__ask .mt__said{padding:8px 11px}
  .scope__ask .mt__av{width:24px;height:24px}
  .scope__ask .mt__av svg{width:12px;height:12px}
  .scope__ask .mt__row{gap:8px}
  .scope__answers--chips{grid-template-columns:repeat(2,1fr)}
  .scope__answers--chips .scope__ans:nth-child(2){display:none}
  .scope__verdict{display:none}
  .reel__l{display:none}
  .scope__answers--chips .scope__ans{font-size:10.5px;padding:9px 4px}
  .reel__t{font-size:8px;letter-spacing:.04em}
  .scope__hint{display:none}
  #sc-choices:empty{min-height:63px}
  /* what makes these two honest stays at any width: Ask Dan is an AI, and the ears are an example */
  .scope[data-scene="ask"] .scope__top>span.scope__src,.scope[data-scene="ears"] .scope__top>span.scope__src{display:inline}
}
@container (max-width:380px){.scope canvas{height:254px}#sc-choices:empty{min-height:49px}.scope__keys .lampk:first-child{display:none}.scope .scope__ask .mt__you,.scope .scope__ask .mt__dan{font-size:11px;line-height:1.4}.scope__ask .mt__row:last-child .mt__av{display:none}.scope__ask .mt__said{padding:7px 10px}.scope__go{padding:8px 12px 8px 10px;font-size:12px}}
.scope__answers--ab{grid-template-columns:repeat(2,1fr)}
/* the test in the hero's place */
.hero.is-testing{align-items:start}
.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;text-align:left}
.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;white-space:nowrap}
.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}
/* the early price on the Pro card before Pro opens (plans.js earlyCard): the standard price struck through beside it */
.plan__was{font:700 30px/1 'Saira Condensed','Saira Fallback',sans-serif;color:var(--ink-faint);text-decoration:line-through;text-decoration-thickness:2px;align-self:center}
.plan__deal{padding:12px 14px;border:1px solid rgba(var(--level-rgb),.35);border-radius:12px;background:rgba(var(--level-rgb),.07);color:var(--ink);font-size:15px;line-height:1.5}
.plan__deal p{margin:0}
.plan li small,.prolock__list small{text-wrap:pretty}
.plan__plus{margin:0 0 -6px;color:var(--ink-dim);font-size:14px;font-weight:600}
.plan__left{color:var(--level);font-weight:700;font-size:16.5px;margin-bottom:4px!important}
.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);line-height:1.5}
.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 :is(p,ol,ul) + 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 .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}

/* a pill button; the Listen controls use it as is */
.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)}

/* the levels at the foot of an exercise: a track sheet, read down the columns. shell.js levelSheet splits each chip
   into its number, name and status lamp, and adds the heading with its meter. The lamp: off (not played yet), a teal
   pulse (the level you're on), a tick (passed), a lock, or a gold Pro tag */
.lvhead{display:flex;align-items:center;gap:14px;padding:22px clamp(18px,3.4vw,32px) 10px;background:rgba(0,0,0,.18)}
.lvhead__meter{display:flex;gap:3px;margin-left:auto}
.lvhead__meter i{width:9px;height:4px;border-radius:1px;background:rgba(255,238,215,.09)}
.lvhead__meter i.on{background:var(--signal);box-shadow:0 0 6px rgba(var(--signal-rgb),.6)}
.lvhead__meter i.now{box-shadow:inset 0 0 0 1px var(--signal),0 0 6px rgba(var(--signal-rgb),.5)}
.lvhead__count{font:700 10.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.lvhead__count b{color:var(--ink);font-weight:700}
@media (max-width:560px){
  .lvhead{flex-wrap:wrap;row-gap:12px}
  .lvhead__count{margin-left:auto}
  .lvhead__meter{order:3;flex:1 0 100%;margin:0}
  .lvhead__meter i{flex:1}
}

.eqt__levels{display:block;columns:3 220px;column-gap:clamp(22px,3.2vw,40px);padding:0 clamp(18px,3.4vw,32px) 22px;background:rgba(0,0,0,.18)}
.eqt__levels[data-n="2"],.eqt__levels[data-n="4"]{columns:2 220px}
.eqt__levels .lchip{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;margin:0;break-inside:avoid;
  padding:12px 8px 12px 12px;border:0;border-radius:0;text-align:left;font:500 14px/1.3 'Archivo',sans-serif;color:var(--ink-dim);
  background:linear-gradient(var(--line-soft),var(--line-soft)) 0 100%/100% 1px no-repeat;transition:color .2s,background-color .2s}
.eqt__levels .lchip:hover{color:var(--ink);background-color:rgba(255,238,215,.035)}
.lchip__no{font:400 11px/1 'Space Mono',monospace;letter-spacing:.04em;color:var(--ink-faint);transition:color .2s}
.eqt__levels .lchip:hover .lchip__no{color:var(--amber)}
.lchip__st{display:grid;place-items:center;min-width:14px;height:14px}
.lchip__st::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(255,238,215,.13)}

.eqt__levels .lchip.done .lchip__no{color:var(--signal-dim)}
.eqt__levels .lchip.done .lchip__st::before{width:13px;height:13px;border-radius:0;background:var(--signal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

.eqt__levels .lchip.lock{color:var(--ink-faint)}
.eqt__levels .lchip.lock .lchip__st::before{width:11px;height:12px;border-radius:0;background:var(--ink-faint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Crect x='1.5' y='7' width='11' height='8' rx='1.8'/%3E%3Cpath d='M4 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Crect x='1.5' y='7' width='11' height='8' rx='1.8'/%3E%3Cpath d='M4 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") center/contain no-repeat}

/* Pro (shell.js proChips): the tag in the lamp's place until it's passed */
.eqt__levels .lchip.pro:not(.done):not(.on) .lchip__st::before{content:"Pro";width:auto;height:auto;border-radius:4px;background:none;-webkit-mask:none;mask:none;
  font:700 9.5px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--level);opacity:.85}

/* the level you're on: the row lights, with a bar down its edge and the lamp pulsing */
.eqt__levels .lchip.on{color:var(--ink);background-color:rgba(var(--signal-rgb),.07)}
.eqt__levels .lchip.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--signal);box-shadow:0 0 10px rgba(var(--signal-rgb),.7)}
.eqt__levels .lchip.on .lchip__nm{font-weight:600}
.eqt__levels .lchip.on .lchip__no{color:var(--signal)}
.eqt__levels .lchip.on .lchip__st::before{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal);-webkit-mask:none;mask:none;animation:pulse 2.4s infinite}
@media(prefers-reduced-motion:reduce){.eqt__levels .lchip.on .lchip__st::before{animation:none}}

.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:16px '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:var(--coach-inset,8px)}   /* coach.js sets it from the block's padding */
.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's bubble (askdan.js), in every exercise: Dan's lines beside his circle, yours on the right beside
   yours, then what you can tap. ── */
.mt{margin:20px 0 4px;padding:2px 0;animation:rise .4s var(--ease)}
/* copied from the Ask Dan app (Ask Dan Web/site/index.html: .message, .avatar, .typing-indicator, .logo), so Ask Dan
   looks the same here as at ask.danmurtagh.com */
.mt__row{display:flex;align-items:flex-start;gap:16px}
.mt__row--in{animation:mtin .3s ease}   /* a row new since the last draw fades in, once (the bubble is redrawn on every streamed word) */
@keyframes mtin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.mt__row--you{justify-content:flex-end}   /* your words, then your circle on the right */
.mt__said{min-width:0;max-width:600px;padding:16px 20px;border-radius:12px;background:#0f1216;border:1px solid rgba(120,170,160,.13)}
.mt__said .mt__dan + .mt__dan,.mt__said .mt__link + .mt__dan{margin-top:12px}
.mt .mt__said .mt__dan b{color:#2dd4bf}
.mt__said .mt__link{margin-top:10px}
.mt__av{flex:none;width:40px;height:40px;margin-top:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0f1216;border:2px solid #2dd4bf;overflow:hidden}
.mt__av svg{width:20px;height:20px;fill:#2dd4bf}
.mt__av--you{border-color:#D4A84B}
.mt__av--you svg{fill:#D4A84B}
.mt__av--you img{width:100%;height:100%;object-fit:cover;display:block}
/* the app's header logo (.logo: 32px waveform, 18px text, 12px apart; its 'Archivo Expanded' isn't a Google font, so it
   renders as plain Archivo), at the same proportions */
.mt__brand{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-family:'Archivo',sans-serif;font-stretch:100%;font-weight:800;font-size:15px;letter-spacing:-.01em;color:#eef2f0}
.mt__brand b{font-weight:800;color:#2dd4bf}
.mt__logo{width:16px;height:16px;fill:#2dd4bf;flex:none}
.mt__brand .mt__logo{width:27px;height:27px}
.mt__tag{margin-left:2px;padding-left:12px;border-left:1px solid var(--line-strong);font:400 10px/1.4 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.mt__row--typing{align-items:center}
.mt__row--typing .mt__av{margin-top:0}
.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;max-width:600px;font-size:16px;line-height:1.6;color:#eef2f0;padding:16px 20px;border-radius:12px;background:rgba(45,212,191,.1);border:1px solid rgba(45,212,191,.2)}
.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:16px '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)}
/* what follows Dan's lines lines up with his words, past his circle (and starts at the edge when there are no lines yet) */
.mt .mt__chips,.mt .mt__ask,.mt .mt__foot,.mt .mt__log > .mt__note{margin-left:56px}
@media(max-width:768px){.mt__row{gap:8px}.mt__av{width:28px;height:28px;min-width:28px;margin-top:6px}.mt__said,.mt .mt__you{padding:10px 12px}.mt .mt__said .mt__dan,.mt .mt__you{font-size:14px;line-height:1.5}.mt__av svg{width:14px;height:14px}.mt__row--typing .mt__typing{height:24px}.mt .mt__chips,.mt .mt__ask,.mt .mt__foot,.mt .mt__log > .mt__note{margin-left:36px}}
/* nothing of Dan's to line up with yet (a lone tap, the typed box, a note): from the edge */
.mt .mt__log--empty ~ *,.mt:not(:has(.mt__row)) .mt__foot,.mt:not(:has(.mt__row)) .mt__log > .mt__note{margin-left:0}
/* Ask Dan on the level's result, one centred column with the rest (Dan, 26 Oct 2026): his name, the chips and the
   sign-in line centre under the bubble; his words read left to right inside it */
.eqt__result .mt{text-align:left;max-width:560px;margin:8px auto 30px}
.eqt__result .mt .mt__brand{justify-content:center;margin:0 0 14px}
.eqt__result .mt .mt__chips{justify-content:center}
.eqt__result .mt .mt__chips .mt__flag{margin-left:4px}
.eqt__result .mt .mt__row:not(.mt__row--you){justify-content:center}
.eqt__result .mt .mt__chips,.eqt__result .mt .mt__ask,.eqt__result .mt .mt__foot,.eqt__result .mt .mt__log > .mt__note{margin-left:0}
.eqt__result .mt .mt__foot{text-align:center;margin-top:14px}
/* Ask Dan any time (askbar.js): a quiet button at the right of every exercise's top bar, and its bubble under the stats */
.eqt__ask{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--line-strong);background:none;color:var(--ink-dim);font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .18s,color .18s}
.eqt__ask svg{width:12px;height:12px;fill:var(--signal);flex:none}
.eqt__ask:hover,.eqt__ask.on{border-color:rgba(var(--signal-rgb),.6);color:var(--ink)}
.eqt__bar.eqt__bar--ask .eqt__io{margin-left:4px}
.mt.mt--bar{margin:0;padding:16px clamp(18px,3.4vw,32px) 18px;border-bottom:1px solid var(--line-soft)}
@media(max-width:560px){.eqt__bar--ask .eqt__io span:last-child{display:none}.eqt__ask{padding:0 10px}}
.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__row--in{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}
/* Which Part: a locked fader pressed lights the answer keys once, and says why (balance.js held) */
.cans--pick.is-call{animation:pick-call 1.1s ease-out 1}
@keyframes pick-call{0%,100%{color:var(--ink-dim)}35%{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 18px -2px rgba(var(--signal-rgb),.6)}}
@media (prefers-reduced-motion:reduce){.cans--pick.is-call{animation:none;color:var(--signal)}}
.bheld{margin:0;color:var(--ink-dim)}
.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}}
/* Help me hear it, after a miss, in the same place in every exercise: under Next (after it on a phone), its panel under Ask Dan */
.rst__act:has(> .rst__verdict:not(:empty)) > .rst__help{grid-row:2}
.rst__act:has(> .rst__verdict:not(:empty)):has(> .rst__help:not([hidden])) > .rst__verdict{grid-row:1 / span 2}
.rst__act:has(> .rst__verdict:not(:empty)):has(> .rst__help:not([hidden])) > .mt{grid-row:3}
.rst__act:has(> .rst__verdict:not(:empty)) > .eqt__help,.rst__act:has(> .rst__verdict:not(:empty)) > .match-teaching{grid-column:1 / -1;grid-row:4;margin-top:0}
@media(max-width:600px){.rst__act:has(> .rst__verdict:not(:empty)) > .rst__help{grid-row:3}.rst__act:has(> .rst__verdict:not(:empty)):has(> .rst__help:not([hidden])) > .rst__verdict{grid-row:1}.rst__act:has(> .rst__verdict:not(:empty)):has(> .rst__help:not([hidden])) > .mt{grid-row:4}.rst__act:has(> .rst__verdict:not(:empty)) > .eqt__help,.rst__act:has(> .rst__verdict:not(:empty)) > .match-teaching{grid-row:5}}
.rst__act > .eqt__help{flex-basis:100%}
.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{text-wrap:balance;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(min(240px,100%),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)}
/* before Pro opens: the pitch on the left, the price and the one button on the right (plans.js gateBuy) */
.prolock--split{display:grid;grid-template-columns:minmax(0,1fr);gap:22px 36px}
@media (max-width:360px){.gate__price{flex-wrap:wrap}.gate__price b{font-size:44px}.gate__price .plan__was{font-size:26px}.prolock__buy{padding:16px}.gate .btn{padding-left:12px;padding-right:12px;font-size:15px}}
@media (min-width:880px){.prolock--split{grid-template-columns:minmax(0,1fr) 300px;align-items:center}.prolock--split .prolock__back{grid-column:1/-1}}
.prolock--split .prolock__list{grid-template-columns:1fr 1fr;gap:10px 18px}
@media (max-width:600px){.prolock--split .prolock__list{grid-template-columns:1fr}}
.prolock__buy{padding:20px 22px;border:1px solid rgba(var(--level-rgb),.4);border-radius:16px;background:rgba(var(--level-rgb),.07)}
.gate{display:flex;flex-direction:column;gap:10px}
.gate__price{margin:0}
.gate__price b{font-size:52px}
.gate__left{margin:2px 0 0;color:var(--level);font-weight:700;font-size:16px}
.gate__p{margin:0;color:var(--ink);font-size:15px;line-height:1.5}
.gate .btn{margin-top:8px;width:100%;justify-content:center}
.gate .prolock__more{align-self:center}
.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:16px '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;text-wrap:balance}
.doc__title + p:not(.doc__meta){margin-top:22px}
.doc__meta time{white-space:nowrap}
.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);text-wrap:balance}
.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;text-wrap:pretty}
.doc :is(ul,ol){margin:0 0 14px;padding-left:20px}
.doc ol{padding-left:24px}
.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;grid-template-columns:minmax(0,1fr);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[data-auto]{min-height:29px}   /* rewards-auto.js: an empty row is as tall as a lit one, so nothing moves when the first light comes on */
@media (max-width:560px){.eqt__stat.rw-run-auto{display:none}}   /* on a phone the bar has no room for a sixth cell: the lights say it */
.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:24px 1fr auto;gap:10px;align-items:center;padding:12px 16px;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__demo{position:fixed;left:50%;bottom:calc(var(--rail-b) + 16px);transform:translateX(-50%);z-index:60;width:min(460px,calc(100vw - 32px));padding:18px 20px 20px;border-radius:var(--r-lg);border:1px solid rgba(var(--signal-rgb),.35);background:var(--module);box-shadow:var(--lift),0 0 40px -18px rgba(var(--signal-rgb),.7);animation:own-demo-in .35s var(--ease) both}
@keyframes own-demo-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.own__demo{animation:none}}
/* the exercise dock (desk.js: under 1100px wide or 600px tall, every phone) sits at the bottom: the card goes under the
   header instead */
body.has-dock .own__demo{top:calc(var(--rail-h) + 10px);bottom:auto}
@media (max-width:640px){.own__demo{top:calc(var(--rail-h) + 10px);bottom:auto}}
.own__demo-eyebrow{margin:0 0 6px;font:700 11px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.own__demo-h{margin:0 0 6px;font:800 21px/1.1 'Saira Condensed','Saira Fallback',sans-serif;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.own__demo-p{margin:0 0 14px;color:var(--ink-dim);font-size:14.5px;line-height:1.45}
.own__demo-acts{display:flex;flex-wrap:wrap;gap:10px}
.own__demo-x{position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;border-radius:8px;background:none;color:var(--ink-faint);font-size:20px;line-height:1;cursor:pointer}
.own__demo-x:hover{color:var(--ink);background:rgba(255,238,215,.06)}
.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}
/* the same section the other way round (Ask Dan on /pro, under your own songs): the picture on the left */
.ys--flip .ys__in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.ys--flip .ys-art{order:-1}
/* Ask Dan's bubble, drawn still, in the picture's frame */
.askp__mt{margin:0;padding:16px 14px 6px;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);animation:none}
.askp__mt .mt__brand{margin-bottom:14px}
.askp__mt .mt__log{gap:14px}
.askp__mt .mt__chip{cursor:default}
@media (max-width:900px){.ys__in,.ys--flip .ys__in{grid-template-columns:1fr}.ys--flip .ys-art{order:0}}
/* 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 */
/* the Music bar on an exercise that plays a loop of your song: Mix Chops | 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__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 */
/* the space the lock panel will take, so the page doesn't jump when it arrives: its height follows the width (measured
   1 Nov 2026 on the split panel, signed out, with the breadcrumb under it; a little under rather than over). Re-measure
   if the panel's copy changes: scratch jump.mjs-style, the exercise's top with shell.js blocked against a normal load. */
html.pro-locking main .stage__in::before{content:"";display:block;height:max(467px,calc(684px - 16vw))}
html.pro-locking main .stage__in > .eqt,html.pro-locking main .stage__in:not(:has(> .eqt)) > *{opacity:.3;filter:saturate(.4);pointer-events:none;user-select:none}
@media (max-width:879px){html.pro-locking main .stage__in::before{height:765px}}
@media (max-width:699px){html.pro-locking main .stage__in::before{height:875px}}
@media (max-width:560px){html.pro-locking main .stage__in::before{height:calc(1205px - 60vw)}}
@media (max-width:359px){html.pro-locking main .stage__in::before{height:1118px}}
/* 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)}

/* ═══════════ the exercise desk (desk.js; Dan, 26 Oct 2026: less scrolling) ═══════════
   Laptop: the screen on the left, a console on the right that stays beside you (listen, then the verdict and Next).
   Phone: play, the A/B keys and the next step in a dock at the bottom of the screen. */
body.has-desk .stage__in{max-width:1240px}
/* what sits round the card lines up with it: the breadcrumb, Today's plan strip, Daily's plan, About this exercise */
body.has-desk :is(.crumb,.ptask,.dplan,.about){max-width:1240px}
.eqt.is-desk{max-width:1240px;overflow:clip}   /* clip, not hidden: the console sticks to the window as the page scrolls */
.eqt.is-desk .eqt__bar .eqt__stats{display:flex;flex-wrap:nowrap;gap:22px;margin:0 6px 0 auto;border:0;background:none}
.eqt.is-desk .eqt__bar .eqt__stat{flex:none;min-width:0;padding:0;border:0}
.eqt.is-desk .eqt__bar .eqt__stat u{font-size:9px;letter-spacing:.16em}
.eqt.is-desk .eqt__bar .eqt__stat b{font-size:13px;margin-top:5px}
.eqt.is-desk .eqt__bar .eqt__ask{margin-left:14px}
.eqt.is-desk .eqt__bar:not(.eqt__bar--ask) .eqt__io,.eqt.is-desk .eqt__bar .eqt__io{margin-left:14px}

.studio{display:grid;grid-template-columns:minmax(0,1fr) 392px;align-items:stretch;border-bottom:1px solid var(--line-soft);background:var(--screen)}
.studio__main{min-width:0;border-right:1px solid var(--line-soft)}
.studio__main > .eqt__screen{border-bottom:0;padding:26px 30px 22px;overflow:clip}
.studio__main > .eqt__answers{border-bottom:0;padding:0 30px 24px}
.studio__main > .mt{margin:0;padding:0 30px 26px}
.studio__main > .mt[hidden]{display:none}
.studio__main > .eqt__help{margin:0 30px 26px}
/* the column takes the left side's height, not the console's (desk.js fit keeps the console inside it, scrolling
   inside when the coach has more to say than the left side is tall), so the page never changes length as you scroll */
.studio__side{min-width:0;contain:size;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.14))}
.studio__console{position:sticky;top:calc(var(--rail-h) + 12px);scroll-padding-bottom:150px;max-height:calc(100vh - var(--rail-h) - var(--rail-b) - 24px);overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;padding:24px 22px 0;scrollbar-width:thin}
.studio__console > *{flex-shrink:0}
.studio__console .eqt__transport{margin:0;flex-wrap:nowrap}
.studio__console .eqt__transport .tbtn--main{flex:1}
.studio__console .eqt__transport .bank{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.studio__console .rst__listen{margin:0;flex-wrap:wrap;align-items:center;gap:8px}
.studio__console .rst__listen > span:not(.bank){flex-basis:100%;margin:2px 0 0}
.studio__console .rst__listen > .xport{margin:0}
.studio__console .rst__listen > .bank{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr))}
.studio__console .rst__aids{padding-left:0;margin:0}
.studio__console .rst__listen > .bank--wrap{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.studio__console .key{white-space:nowrap}
.studio__console .key{padding:0 8px;gap:7px;min-width:0}
.studio__console > .eqt__sub{font-size:13.5px}

/* the instrument's keys: straight above the graph or the analyser, lined up with the question, a short move from where
   the mouse works (Dan, 26 Oct 2026) */
.studio__keys{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0 0;position:sticky;top:calc(var(--rail-h) + 8px);z-index:4;
  padding:8px 0;background:var(--screen);box-shadow:0 -8px 0 var(--screen),0 8px 0 var(--screen)}
.studio__keys:not(:has(button:not([hidden]):not([style*="display: none"]):not([hidden] *))){display:none}
.studio__keys .rst__listen{margin:0;flex-wrap:nowrap;align-items:center}
/* the play button says what the keys are for: no 'Hear it' over them (Dan); Fix the Mix's Solo row keeps its name, its
   buttons being the parts of the mix */
.studio__keys .rst__listen:not(:has(.bank--wrap)) > span:not(.bank){display:none}
.studio__keys .xport{margin:0 2px 0 0}
.studio__keys > .xport{margin:0}
.studio__keys > .eqt__sub{flex-basis:100%;margin:-4px 0 0;font-size:13.5px}
.studio__keys + .eqt__vuscale{margin-top:22px}

/* the coach: Ask Dan's bubble at the console's width */
/* Identify's listening practice isn't a question of the level: no word before it in the coach */
.eqt.is-support .studio__console > .mt{display:none}
.studio__console > .mt{margin:2px 0 0;padding:0}
.studio__console .mt .mt__brand{font-size:14px}
.studio__console .mt .mt__brand .mt__logo{width:22px;height:22px}
.studio__console .mt .mt__row{gap:10px}
.studio__console .mt .mt__av{width:30px;height:30px;margin-top:6px}
.studio__console .mt .mt__av svg{width:15px;height:15px}
.studio__console .mt .mt__said,.studio__console .mt .mt__you{padding:12px 14px}
.studio__console .mt .mt__dan,.studio__console .mt .mt__you{font-size:14.5px;line-height:1.55}
.studio__console .mt .mt__chips,.studio__console .mt .mt__ask,.studio__console .mt .mt__foot,.studio__console .mt .mt__log > .mt__note{margin-left:0}
.studio__console .mt__chip{font-size:12.5px}
.studio__console > .eqt__help{margin:0;padding:16px}
/* the verdict, Next and Help me hear it, under a hairline once there's something to say */
.studio__console .rst__act,.studio__console .rst__act:has(> .rst__verdict:not(:empty)){display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:16px 0 0;margin-top:4px;border:0;border-top:1px solid var(--line-soft)}
.studio__console .rst__act:not(:has(> button:not([hidden]))):not(:has(.rst__verdict:not(:empty))){display:none}
.studio__console .rst__act > *{grid-column:auto;grid-row:auto}
.studio__console .rst__act > .tbtn{width:100%;margin:0}
/* the next step, pinned to the console's foot (the console has no bottom padding of its own, so the pin never
   lifts it over the keys above) */
.studio__go{position:sticky;bottom:0;z-index:2;display:flex;flex-direction:column;gap:10px;margin:6px -22px 0;padding:14px 22px 24px;
  background:linear-gradient(180deg,rgba(9,7,6,0),#090706 14px)}
.studio__go:not(:has(.tbtn:not([hidden]))){display:none}
.studio__console:not(:has(> .studio__go .tbtn:not([hidden]))),.eqt.is-desk:has(.eqt__fb:not(.show)) .studio__console{padding-bottom:24px}
.studio__go .tbtn{width:100%;margin:0}
.studio__go > .rst__aids{margin:0;padding:0}
.studio__go > .rst__aids > .bank{flex:1;display:grid;grid-template-columns:1fr 1fr}
.studio__go > .eqt__transport{margin:0!important;flex-direction:column;align-items:stretch;gap:10px}
.eqt.is-desk:has(.eqt__fb:not(.show)) .studio__go{display:none}
.studio__console .rst__verdict{margin:0 0 6px}
/* a long verdict wraps with its score straight after it, not pushed to the far edge */
.studio__console .rst__verdict .eqt__verdict{flex-wrap:wrap;justify-content:flex-start;column-gap:10px;row-gap:2px}
.studio__console .rst__verdict p,.studio__console .eqt__blurb{font-size:14.5px;line-height:1.55;margin-top:6px}
.studio__console .eqt__fb{padding:16px 0 0;margin-top:4px;border:0;border-top:1px solid var(--line-soft)}
.studio__console .eqt__fb .eqt__transport{margin-top:14px!important;flex-direction:column;align-items:stretch}
.studio__console .eqt__fb .eqt__transport .tbtn{width:100%}
.studio__console .eqt__bandstrip{gap:3px;margin:12px 0 8px}
.studio__console .eqt__bandstrip span{padding:8px 1px;font-size:9px}
.eqt.is-desk .eqt__result{border-top:0}

/* held while the page scrolls to it (desk.js arrive): its rise starts once it's on screen */
.is-arriving,.is-arriving *{animation-play-state:paused!important}

/* the dock: fixed to the window, so the page's opening animation keeps no transform behind it */
body.has-dock .stage__in{animation-fill-mode:backwards}
body.has-dock{padding-bottom:calc(var(--dock-h,0px) + 16px)}
html:has(body.has-dock){scroll-padding-bottom:calc(var(--dock-h,0px) + 12px)}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;flex-direction:column;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(18,14,11,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line-strong);box-shadow:0 -18px 40px -18px rgba(0,0,0,.9)}
.dock__keys{display:flex;align-items:center;gap:8px}
.dock__keys,.dock__go{width:100%;max-width:880px;margin-inline:auto}
.dock__keys:not(:has(button:not([hidden]):not([style*="display: none"]):not([style*="display:none"]):not([hidden] *))){display:none}
.dock .rst__listen,.dock .eqt__transport{margin:0;flex:1;flex-wrap:nowrap;gap:8px;align-items:center}
.dock .rst__listen > span:not(.bank){display:none}
.dock .xport{--s:46px;margin:0}
.dock .bank{flex:1;display:flex}
.dock .key{flex:1;height:42px;padding:0 6px;gap:6px;min-width:0}
.dock__go{display:flex;gap:8px}
.dock__go:not(:has(.tbtn:not([hidden]))){display:none}
.dock__go > .eqt__transport{flex:1}
.dock__go .tbtn{flex:1;min-height:46px;margin:0}
.dock .eqt__transport .tbtn--main{flex:1}
/* what was moved out of the answer strip hides with it (the level's result hides it), wherever it sits now */
.eqt.act-off [data-desk-act],.eqt.act-off .studio__go,.eqt.act-off .dock__go{display:none!important}
/* with the level's result up, the coach's Exaggerate and Isolate have nothing to work on */
.eqt.is-desk:has(.eqt__result.show) .studio__console > .rst__aids{display:none}
/* the dock takes the bottom rail's place (its keyboard keys mean nothing on a touch screen), and a locked page has none */
body.has-dock .rail--btm{display:none}
/* the play row has gone to the dock, so Exaggerate and Isolate drop the indent that lined them up under its keys */
.eqt.is-dock .rst__aids{padding-left:0}
.eqt.is-dock .rst__aids > .bank{flex:1;display:grid;grid-template-columns:1fr 1fr}
/* nothing to press (Identify's listening practice, between levels): no empty bar */
.eqt.act-off .dock:not(:has(.dock__keys button:not([hidden]):not([style*="display: none"]):not([style*="display:none"]):not([hidden] *))){display:none}
main .is-locked .dock{display:none}
/* Identify and Daily show Next by showing the feedback it lives in: in the dock it follows that */
.eqt.is-dock:has(.eqt__fb:not(.show)) .dock__go{display:none}
/* Practice and level results have their own next step. Keep it above the dock/rail,
   even when the teaching or debrief is longer than the screen. */
.eqt.is-dock{overflow:clip}
.eqt[data-desk] .identify-support__actions,
.eqt[data-desk] .eqt__result > .eqt__transport{position:sticky;bottom:calc(var(--rail-b) + 12px);z-index:5;
  padding:12px;margin-top:16px;background:#120e0b;border:1px solid var(--line-soft);border-radius:10px}
.eqt.is-dock .identify-support__actions{bottom:calc(var(--dock-h,0px) + 12px)}
.eqt.is-dock .eqt__result > .eqt__transport{bottom:12px}
.eqt.is-dock:has(.eqt__result.show) .dock{display:none}
.eqt.is-desk:has(.eqt__result.show) .studio__keys{display:none}
/* Keep the hit target still: lifting a pinned button on hover can alternate hover on/off at its edge. */
.eqt[data-desk] .tbtn--main:hover{transform:none}
:is(.cm-listening,.space-listening,.bal-intro) :is(.studio__keys,.dock),
.eqt.is-support :is(.studio__keys,.dock){display:none}

/* The other instruments share the EQ desk. Their controls fit the column, rather than
   using the full viewport to decide how much room a compressor or fader bank has. */
.studio__main{container-type:inline-size;container-name:instrument}
.eqt.is-desk .eqt__bar{flex-wrap:wrap;row-gap:16px}
.eqt.is-desk .eqt__bar .eqt__stat:last-child b{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio__main .bdesk:not(.rdesk){grid-template-columns:repeat(var(--n),minmax(0,104px));width:100%}
.studio__main > .cd-sides{margin:0 30px 14px}
.studio__main > .cd-curve{width:calc(100% - 60px);height:140px;margin:0 30px 26px}
.studio__console .match-teaching{flex-basis:auto}
.studio__console .match-teaching .eqt__help{margin:0;padding:16px}
.studio__console .match-teaching .bank{display:grid;grid-template-columns:1fr 1fr;width:100%}
.studio__console .match-teaching .key{white-space:normal;height:auto;min-height:44px}
.studio__console .match-listen-hint{margin:0;min-height:0}
.studio__console > #match-act:has(> #feedback[hidden]){display:none}
.studio__main #transport:not(:has(button)){display:none}
.studio__main > .identify-support{margin:0 30px 24px}
/* Before Start, one clear action. The disabled Check button appears once the level begins. */
.eqt:is(.is-desk,.is-dock):has(#btn-start:not([hidden])) #btn-check,
.eqt:is(.is-desk,.is-dock):has(#b-start:not([hidden])) #b-submit,
.eqt:is(.is-desk,.is-dock):has(#sw-start:not([hidden])) #sw-mark,
.eqt:is(.is-desk,.is-dock):has(#hn-start:not([hidden])) #hn-mark,
.eqt:is(.is-desk,.is-dock):has(#r-start:not([hidden])) #r-submit,
.eqt:is(.is-desk,.is-dock):has(#ct-start:not([hidden])) #ct-submit,
.eqt:is(.is-desk,.is-dock):has(#cx-start:not([hidden])) #cx-tocontext,
.eqt:is(.is-desk,.is-dock):has(#fm-start:not([hidden])) #fm-submit{display:none}
.studio__keys .bank,.dock .bank,.dock .rst__listen,.dock .eqt__transport{min-width:0}
.dock .key{white-space:normal;line-height:1.2}
/* Listening practice hides comparison keys even after they move out of their original row. */
:is(.cm-listening,.space-listening) :is(.studio__keys,.dock__keys) > .bank{display:none}
:is(.cm-listening,.space-listening,.bal-intro) .studio__console > .mt{display:none}
@container instrument (max-width:760px){
  .studio__main .match-workbench{grid-template-columns:1fr;padding:16px}
  .studio__main .console-display{padding-right:0}
  .studio__main .console-controls{justify-content:center;flex-wrap:wrap;margin-top:16px;padding:16px 0 0;border-left:0;box-shadow:none;border-top:1px solid var(--line-soft)}
  .studio__main .console-channel{max-width:33.333%;min-width:0}
  .studio__main .scope-caption{flex-wrap:wrap}
}

/* A laptop's available height matters as much as its width. Keep the actual controls
   beside their display and reduce decorative space before asking the player to scroll. */
@media(min-width:1100px) and (max-height:800px){
  .studio{grid-template-columns:minmax(0,1fr) 350px}
  .studio__main > .eqt__screen{padding:18px 22px}
  .studio__main .eqt__prompt{font-size:26px;margin:8px 0}
  .studio__main .eqt__sub{font-size:14px;line-height:1.45}
  .studio__keys{margin-top:12px;padding:6px 0;gap:8px 12px}
  .studio__main .match-workbench{grid-template-columns:minmax(150px,1fr) auto;margin-top:16px;padding:12px}
  .studio__main .console-display{padding-right:12px}
  .studio__main .console-controls{flex-wrap:nowrap;margin:0;padding:0 0 0 10px;border-top:0;border-left:1px solid var(--line-soft)}
  .studio__main .console-channel{width:100px;max-width:none;padding:6px;gap:8px}
  .studio__main .console-pot{width:82px;height:82px;margin:3px 0}
  .studio__main .pot-body{inset:12px}
  .studio__main .console-channel .console-fader{height:100px;width:80px;margin:10px 0}
  .studio__main .scope-glass{padding:10px}
  .studio__main #cm-view,.studio__main #width-scope{height:150px}
  .studio__main :is(.room-view,.depth-view,.echo-view) svg{height:150px}
  .studio__main .scope-caption{font-size:9px;letter-spacing:.02em}
  .studio__main .control-hint{margin:8px 0 0}
  .studio__main .bdesk{margin-top:16px}
  .studio__main .fader:not(.console-fader){height:clamp(120px,calc(100dvh - 550px),184px)}
  .studio__main .rlane{min-height:clamp(148px,calc(100dvh - 522px),212px)}
}
@media(min-width:1100px) and (max-height:700px){
  .eqt.is-desk .eqt__bar{padding-block:8px}
  .eqt.is-desk > .rw-lights{padding-block:6px}
  .studio__main > .eqt__screen{padding-block:14px}
  .studio__keys{margin-top:8px;padding-block:4px}
  .studio__keys .xport{--s:44px}
  .studio__keys .key{height:40px}
  .studio__main .match-workbench{margin-top:12px}
}

/* Phones and touch screens (review of the desk rollout, 31 Oct 2026). The Comp drills' two answers fill the row
   (the 3-across answer grid left a gap) and are a little shorter so they clear the dock sooner. On a touch screen
   Ask Dan's pill takes a tap a little above and below it, and Which Part's pick buttons are a thumb tall. (Balance's
   S and M stay as they are: a bigger target would take drags from the fader just above them.) */
@media(max-width:640px){
  .eqt__answers.cd-answers{grid-template-columns:1fr 1fr}
  .cd-answers .fbtn{padding:16px 8px}
}
@media(pointer:coarse){
  .eqt__ask{position:relative}
  .eqt__ask::after{content:"";position:absolute;inset:-9px 0}
  .cans--pick{height:44px}
}

/* ═══════════ phones: the mobile pass before launch (1 Nov 2026) ═══════════
   Checked on iPhone (Safari) and Android (Chrome) at 320–412px wide; tools/mobile-check.mjs sweeps every page. */
/* Before Start the dock holds Start alone: its listen keys are disabled until the level begins. (Where Start itself
   sits in the keys row, as on Identify and the Comp drills, the row stays.) */
.eqt.is-dock:has(:is(#btn-start,#b-start,#sw-start,#hn-start,#r-start,#ct-start,#cx-start,#fm-start):not([hidden]):not([style*="none"])) .dock__keys:not(:has(:is(#btn-start,#b-start))){display:none}
/* a thumb-sized menu button and logo link (the logo's box grows, not the logo) */
@media (pointer:coarse){
  .menubtn{min-width:44px;min-height:44px;justify-content:center}
  .brand{padding-block:11px;margin-block:-11px}
  .crumb__back{min-height:40px}
  .prolock__more,.prolock__back a{display:inline-block;padding:10px 0;margin:-10px 0}
  /* the next/learn links: a thumb-tall target without moving their underline off the words */
  main .about .about__next{font-size:12px;row-gap:16px}
  .about__next a{position:relative}
  .about__next a::after{content:"";position:absolute;inset:-8px 0}
}
@media (max-width:560px){
  /* the exercise's top bar: the name stays on one or two lines and the status lamp inside the card */
  .eqt__bar{gap:10px}
  .eqt__id{display:none}
  .eqt__nm{letter-spacing:.08em;min-width:0}
  .eqt__io,.eqt__ask{flex:none}
  /* the stats: three then two (or two and two), no lone cell on a row of its own, no doubled hairline at the edge */
  .eqt__stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:-1px -1px 0 0}
  .eqt__stats > .eqt__stat{grid-column:span 2;min-width:0;padding:10px 10px 10px 14px;border-top:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
  .eqt__stats:has(> :nth-child(4 of .eqt__stat:not(.rw-run-auto)):nth-last-child(1 of .eqt__stat:not(.rw-run-auto))) > .eqt__stat,
  .eqt__stats:has(> :nth-child(5 of .eqt__stat:not(.rw-run-auto)):nth-last-child(1 of .eqt__stat:not(.rw-run-auto))) > :nth-child(n+4 of .eqt__stat:not(.rw-run-auto)){grid-column:span 3}
  .eqt__stat u{font-size:10px;letter-spacing:.12em}
  .eqt__stat b{overflow-wrap:anywhere}
  /* four answer cards sit two by two; cards with a description line up at the top */
  .eqt__answers:has(> .fbtn:nth-child(4):last-child){grid-template-columns:1fr 1fr}
  .fbtn:has(small){display:flex;flex-direction:column;justify-content:flex-start;align-items:center}
  .fbtn small{font-size:11px}
  /* a labelled row of keys (Fix the Mix's Solo): the label above, so the keys get the width */
  .rst__listen > span:not(.bank){flex-basis:100%;margin:0}
  /* mixer channel names: two lines, never "LEAD …" */
  .lcd > span:first-child{display:flex;align-items:center;justify-content:center;min-height:2.3em;white-space:normal;line-height:1.15;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
  /* hub cards: the arrow joins the meta row, so the name and description get the card's width */
  .pcard{grid-template-columns:minmax(0,1fr)}
  .pcard__meta{padding-right:48px;min-height:38px}
  .pcard__go{grid-column:1;grid-row:2;justify-self:end;align-self:center}
  /* the Pro lock: a full-width button that wraps rather than running past the panel */
  .prolock{padding:22px 18px}
  .prolock__go .btn,.train .btn{width:100%;max-width:100%;white-space:normal;height:auto;min-height:var(--h);padding:12px 18px;text-align:center;justify-content:center;line-height:1.25}
  .prolock__fine a{white-space:nowrap}
  /* small type a phone can read */
  .meter u{font-size:10px;letter-spacing:.14em}
  .drawer__a small{font-size:12px;letter-spacing:.04em;line-height:1.3}
  .rg-lab{font-size:32px}
  .listen__k{flex-basis:100%;margin:0 0 2px}
  .hbtn{white-space:nowrap}
  .listen__ab .hbtn{padding:0 10px}
  .train__more a{white-space:nowrap}
  .train__more{line-height:2.1}
  .track__txt span{white-space:nowrap}
  .dplan__h{font-size:22px}
  .ys-art{padding:10px 8px 8px}
  .ys-art .mt .mt__chips{margin-left:0}
}
@media (max-width:400px){
  .dock .key{gap:4px;padding:0 4px;font-size:13.5px}
  .et-ans{min-width:70px}
  .sharecard{padding:14px 12px}
  .sharecard__row{font-size:13px;letter-spacing:0}
  .foot__in{gap:28px 18px}
  .foot__col a{font-size:14px}
  .chip{letter-spacing:.08em}
  .pro-hero .chip{white-space:nowrap;font-size:10px}
}
/* the hero analyser's tabs and keys, readable and tappable; its foot label never cut to "ON A…" */
@container (max-width:450px){
  .reel__t{font-size:10px;letter-spacing:.02em;padding:14px 0 8px}
  .lampk{font-size:9.5px}
  .scope__foot{letter-spacing:.06em}
}
@container (max-width:340px){.reel__t{font-size:9px;letter-spacing:0}}
/* keyboard tips ("Arrow keys move…", "Key 1") mean nothing on a touch screen */
@media (pointer:coarse) and (hover:none){.kbd-hint,.cd-answers .fbtn small.kbd-hint{display:none}}
.about__next .about__here{color:var(--ink-faint)}   /* the page you're on, in its module's list */