/* Small Beats · styles. One machine, SB-1: a glowing screen with its buddies, a tape door, lit plastic keys and a keyboard.
   Square pixels everywhere. Always dark. */
@font-face{font-family:Silk;src:url(fonts/silkscreen-400.woff2) format('woff2');font-weight:100 900;font-display:swap} /* the regular cut at every weight: its bold turns W and M into blobs */
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow-condensed-600.woff2) format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/barlow-condensed-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Doto;src:url(fonts/doto-900.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:Plex;src:url(fonts/plex-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(fonts/plex-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{--lcd:#d9e2a3;--acc:#e9b44c;
  color-scheme:dark;
  --bg:#2a1915;--panel:#3a251e;--panel2:#452e26;--key:#55403a;--line:#140b08;
  --cream:#efe6d2;--muted:#c9b7a3;--ink:#17140f;
  --amber:#e8a33a;--yellow:#f0c94a;--blue:#6a9ad1;--green:#7fb069;--paper:#d9cfbb;
  --px:4px; /* one "pixel" of the hardware */
  --gut:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--cream);font:400 16px/1.55 Plex,system-ui,sans-serif;overflow-x:hidden}
a{color:var(--amber)}
.skip{position:absolute;left:-999px;top:8px;background:var(--cream);color:var(--ink);padding:8px 12px;z-index:9}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
[hidden]{display:none!important}

/* ---- header ---- */
.top{display:flex;align-items:center;justify-content:space-between;gap:4px 12px;max-width:1180px;margin:0 auto;padding:10px var(--gut);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;color:var(--cream);text-decoration:none}
.brand-logo{display:block;width:177px;height:60px;margin:18px 0 4px;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 var(--line))} /* the Small Beats logo: Dino in lines with the stacked wordmark, one lockup on one pixel grid, at whole-pixel sizes */
@media (max-width:620px){.brand-logo{width:118px;height:40px;margin:8px 0 4px;filter:drop-shadow(2px 2px 0 var(--line))}}
.nav{display:flex;gap:4px 18px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font:700 13px/1 Silk;letter-spacing:1px;padding:10px 2px}
.nav a:hover{color:var(--cream)}
.nav-n{display:inline-block;margin-left:6px;padding:2px 5px;background:var(--amber);color:var(--ink);font:700 10px/1 Silk}


/* ---- pixel buttons: a hard dark outline with notched corners, a lit top edge, a shaded bottom ---- */
.pb{--c:var(--key);--t:var(--ink);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:48px;padding:0 16px;margin:var(--px);
  border:0;border-radius:0;background:var(--c);color:var(--t);font:700 14px/1 Silk;letter-spacing:1px;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--line),0 var(--px) 0 0 var(--line),calc(-1*var(--px)) 0 0 0 var(--line),var(--px) 0 0 0 var(--line),
    inset 0 var(--px) 0 0 rgba(255,255,255,.35),inset 0 calc(-1*var(--px)) 0 0 rgba(0,0,0,.22);transition:transform .06s,filter .1s}
.pb::after{content:"";position:absolute;left:var(--px);top:calc(2*var(--px));width:var(--px);height:var(--px);background:rgba(255,255,255,.55)} /* the little glint */
.pb:hover{filter:brightness(1.07)}
.pb:active{transform:translateY(2px)}
.pb:disabled{cursor:default;filter:saturate(.3) brightness(.7)}
.pb-big{min-height:56px;font-size:16px;padding:0 20px}
.pb-sm{min-height:44px;font-size:12px;padding:0 12px}

/* keys on the machine: unlit is a dark key with light lettering; lit is the colour, full stop */
.key{--c:var(--key);--t:var(--cream);--on:var(--amber)}
.key::after{background:rgba(255,255,255,.12)}
.key[aria-pressed=true]{--c:var(--on);--t:var(--ink)}
.key[aria-pressed=true]::after{background:rgba(255,255,255,.3)}
.key[aria-pressed=true]{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--on) 18%,transparent))} /* lit like old plastic: warm, not neon */
/* lit plastic: a pressed key glows from inside, like a lamp behind tinted plastic, and its little light comes on. An unlit key is dark plastic */
.key{background:radial-gradient(80% 75% at 50% 40%,color-mix(in srgb,var(--c) 86%,#fff) 0%,var(--c) 72%)}
.key[aria-pressed=true]{background:radial-gradient(80% 75% at 50% 45%,color-mix(in srgb,var(--on) 88%,#f2e7d0) 0%,var(--on) 55%,color-mix(in srgb,var(--on) 78%,#2a1915) 100%)} /* lit from behind, like a hardware switch: soft, not glossy */
.key::before{content:"";position:absolute;right:calc(2*var(--px));top:calc(2*var(--px));width:var(--px);height:var(--px);background:rgba(0,0,0,.4)}
.key[aria-pressed=true]::before{background:#f6e6c4;box-shadow:0 0 4px 0 #f6e6c4}

/* ---- the hero: one line under the logo ---- */
.hero{max-width:1180px;margin:0 auto;padding:0 var(--gut) 12px}
.hero h1{font:400 12px/1.4 Silk;letter-spacing:2px;margin:0;color:var(--muted);text-transform:uppercase}

/* ==== SB-1: a little stepped-pixel music machine. A backlit LCD with the band on it, the tape door between two speaker grilles,
   chunky transport keys, the sound keys, six part keys, the keyboard. Case labels are smooth (Barlow); only the LCD is pixel type.
   No line of text gets a row of its own: every word sits inside a key or on the screen. ==== */
.deck{max-width:1180px;margin:0 auto;padding:0 var(--gut) 28px}
.sb1{--ink2:#28301e;position:relative;isolation:isolate;display:grid;grid-template-columns:128px minmax(0,1fr) 340px;
  grid-template-areas:"scr scr door" "scr scr rs" "play keys keys" "dials dials dials" "kb kb kb";gap:18px 20px;padding:38px 30px 30px}
.sb1-bg{position:absolute;inset:0;z-index:-1;filter:drop-shadow(4px 0 0 var(--line)) drop-shadow(-4px 0 0 var(--line)) drop-shadow(0 4px 0 var(--line)) drop-shadow(0 -4px 0 var(--line))}
.sb1-bg::before{content:"";position:absolute;inset:0;clip-path:polygon(0 18px,6px 18px,6px 12px,12px 12px,12px 6px,18px 6px,18px 0px,calc(100% - 18px) 0,calc(100% - 18px) 6px,calc(100% - 12px) 6px,calc(100% - 12px) 12px,calc(100% - 6px) 12px,calc(100% - 6px) 18px,calc(100% - 0px) 18px,100% calc(100% - 18px),calc(100% - 6px) calc(100% - 18px),calc(100% - 6px) calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) calc(100% - 6px),calc(100% - 18px) calc(100% - 6px),calc(100% - 18px) calc(100% - 0px),18px 100%,18px calc(100% - 6px),12px calc(100% - 6px),12px calc(100% - 12px),6px calc(100% - 12px),6px calc(100% - 18px),0px calc(100% - 18px));
  background:linear-gradient(#4a3027 0 6px,transparent 6px),linear-gradient(0deg,#2c1b16 0 8px,transparent 8px),var(--panel)}
.screw{position:absolute;width:8px;height:8px;background:#6b5348;box-shadow:inset 2px 2px 0 rgba(255,255,255,.18),inset -2px -2px 0 rgba(0,0,0,.4)}
.s1{left:10px;top:30px}.s2{right:10px;top:30px}.s3{left:10px;bottom:30px}.s4{right:10px;bottom:30px}

/* the LCD: Game Boy olive, four shades (the screen is the only green thing on the site), the cells just visible. A dark status strip along its foot */
.m-screen{grid-area:scr;position:relative;min-width:0;display:flex;flex-direction:column;padding:12px 16px 0;margin:8px;overflow:hidden;
  background:#a7b56d; /* the night sky: light-mid. The lightest shade is saved for light */
  box-shadow:0 0 0 4px #120a07,0 0 0 8px #4a3027,12px 0 0 0 var(--line),-12px 0 0 0 var(--line),0 12px 0 0 var(--line),0 -12px 0 0 var(--line),inset 0 5px 0 rgba(40,48,30,.18),inset 4px 0 0 rgba(40,48,30,.1);
  font:400 13px/1.1 Silk,monospace;color:var(--ink2)}
.vfd-top{display:flex;justify-content:space-between;gap:10px;white-space:nowrap;letter-spacing:1px;color:var(--ink2)}
.vfd-top span{overflow:hidden;text-overflow:ellipsis}
.vfd-name{font-size:clamp(22px,3vw,34px);margin:8px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:2px;text-transform:uppercase}
.vfd-name.flash{animation:lcdBlink .42s steps(2,end) 1}
@keyframes lcdBlink{50%{opacity:.35}}
.stage{display:block;width:100%;flex:1;min-height:170px}
.lcd-strip{display:flex;justify-content:space-between;gap:10px;margin:6px -16px 0;padding:6px 16px;background:var(--ink2);color:var(--lcd);font-size:11px;letter-spacing:1px;white-space:nowrap}
.lcd-strip span{overflow:hidden;text-overflow:ellipsis}

/* the tape door: smoked plastic between two speaker grilles */
.m-door{grid-area:door;min-width:0;display:grid;grid-template-columns:20px minmax(0,1fr) 20px;gap:12px;align-items:stretch;background:#2f1f1a;padding:12px;margin:4px;
  box-shadow:4px 0 0 0 var(--line),-4px 0 0 0 var(--line),0 4px 0 0 var(--line),0 -4px 0 0 var(--line),inset 0 4px 0 rgba(255,255,255,.08),inset 0 -4px 0 rgba(0,0,0,.25)}
.grille{display:block;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='4' height='4' fill='%23120a07'/%3E%3C/svg%3E") 2px 2px/8px 8px;min-height:40px}
.door-win{display:flex;justify-content:center;align-items:center;cursor:pointer;background:#1c1418;padding:10px;box-shadow:inset 0 0 0 3px #120a07,inset 0 6px 0 rgba(255,255,255,.06)}
.door-win .cass{width:100%;max-width:280px;margin:0}
.m-recsend{grid-area:rs;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:end}

/* keys: chunky plastic, notched pixel corners, smooth labels */
.mk{--c:#5a4038;--t:var(--cream);position:relative;display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;margin:4px;border:0;padding:0 10px;cursor:pointer;background:var(--c);color:var(--t);
  font:700 15px/1 'Barlow Condensed',system-ui,sans-serif;letter-spacing:1.5px;text-transform:uppercase;-webkit-tap-highlight-color:transparent;user-select:none;
  box-shadow:4px 0 0 0 var(--line),-4px 0 0 0 var(--line),0 4px 0 0 var(--line),0 -4px 0 0 var(--line),inset 0 4px 0 rgba(255,255,255,.22),inset 0 -5px 0 rgba(0,0,0,.25);transition:transform .06s,filter .1s}
.mk:hover{filter:brightness(1.08)}.mk:active{transform:translateY(2px)}
.mk:disabled{cursor:default;opacity:.45;filter:none}
.mk .rec{width:10px;height:10px;background:#5c1d16;display:block}
.mk-rec{--c:#cbbd9f;--t:#2a1915}
.mk-rec .rec{background:#ff3b2e;box-shadow:0 0 8px #ff3b2e}
.mk-rec[aria-pressed=true]{--c:#b3a68c;--t:#4a3c30}
.mk-rec[aria-pressed=true] .rec{background:#3aa84a;box-shadow:0 0 8px #7fd36a}
.mk-send{--c:#cbbd9f;--t:#2a1915} /* SAVE and EJECT: a step quieter than the screen and the style keys */
.mk-play{grid-area:play;--c:#e8782e;--t:#2a1306;min-height:64px;font-size:17px}
.mk-play[aria-pressed=true]{--c:#e8782e;box-shadow:4px 0 0 0 var(--line),-4px 0 0 0 var(--line),0 4px 0 0 var(--line),0 -4px 0 0 var(--line),inset 0 4px 0 rgba(255,255,255,.3),inset 0 -5px 0 rgba(0,0,0,.25),0 0 14px rgba(232,120,46,.35)}
.play-i{display:block;width:0;height:0;border-left:16px solid currentColor;border-top:10px solid transparent;border-bottom:10px solid transparent}
.mk-play[aria-pressed=true] .play-i{border:0;width:16px;height:18px;background:linear-gradient(90deg,currentColor 0 6px,transparent 6px 10px,currentColor 10px)}
.m-keys{grid-area:keys;display:grid;grid-template-columns:64px 64px repeat(6,minmax(0,1fr));gap:12px;min-width:0}
.m-keys .key{width:calc(100% - 8px);min-width:0;min-height:64px;padding:0 4px;font:700 14px/1 'Barlow Condensed',system-ui,sans-serif;letter-spacing:1px}
.mk-dice{--c:#cbbd9f;--t:#2a1915;flex-direction:column;gap:5px;min-height:64px;padding:0}
.mk-undo{flex-direction:column;gap:5px;min-height:64px;padding:0}
.mk-sub{font-size:11px;letter-spacing:1px}
.mk-dice svg path:first-child{fill:#2a1915}

/* six part keys: the part, a ladder of lights, its setting in the style's colour */
.m-dials{grid-area:dials;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.dial{--dc:#efe6d2;display:flex;flex-direction:column;justify-content:space-between;min-width:0;height:58px;margin:3px;padding:8px 10px;border:0;cursor:pointer;text-align:left;background:#2a1915;color:var(--cream);
  box-shadow:3px 0 0 0 var(--line),-3px 0 0 0 var(--line),0 3px 0 0 var(--line),0 -3px 0 0 var(--line),inset 0 3px 0 rgba(255,255,255,.06);-webkit-tap-highlight-color:transparent;transition:transform .06s}
.dial:active{transform:translateY(2px)}
.dial-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:6px}
.dial-name{font:600 12px/1 'Barlow Condensed',system-ui,sans-serif;letter-spacing:1.5px;color:#a8927f}
.dial-leds{display:flex;gap:3px}
.dial-leds i{display:block;width:7px;height:7px;background:#4a342c}
.dial-val{font:700 18px/1 'Barlow Condensed',system-ui,sans-serif;letter-spacing:1px;color:var(--dc);text-shadow:0 0 5px color-mix(in srgb,var(--dc) 22%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dial.off .dial-val{color:#6e5a4e;text-shadow:none}
.dial.hit .dial-val{filter:brightness(1.15);text-shadow:0 0 6px color-mix(in srgb,var(--dc) 45%,transparent)}
.dial.turn{animation:turn .18s steps(2,end)}
@keyframes turn{0%{background:#4a3128}}
.key[aria-pressed=true].hit{filter:brightness(1.1) drop-shadow(0 0 8px color-mix(in srgb,var(--on) 50%,transparent))}
.key[aria-pressed=true].hit::before{background:#fff;box-shadow:0 0 10px 3px #fff4e0}

/* the keyboard, with the step lights and the PLAY ALONG button (and on phones KEYBOARD / PARTS) on the rail along its top */
.m-kb{grid-area:kb;--glow:#55d6c2;background:#1d1c21;padding:8px 6px 6px;margin:4px;box-shadow:4px 0 0 0 var(--line),-4px 0 0 0 var(--line),0 4px 0 0 var(--line),0 -4px 0 0 var(--line)}
.rail{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.beat{flex:1;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}
.beat i{display:block;height:6px;background:#3a1a14}
.beat i:nth-child(4n+1){background:#552219}
.beat i.on{background:#e8782e;box-shadow:0 0 8px 1px rgba(232,120,46,.6)}
.beat i:nth-child(4n+1).on{background:#f4a259;box-shadow:0 0 8px 1px rgba(244,162,89,.65)}
.pp{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:0;cursor:pointer;background:#2e2c33;color:#8c8394;font:700 12px/1 'Barlow Condensed',system-ui,sans-serif;letter-spacing:1.5px;box-shadow:3px 0 0 0 var(--line),-3px 0 0 0 var(--line),0 3px 0 0 var(--line),0 -3px 0 0 var(--line),inset 0 2px 0 #55525c}
.kb{position:relative;display:flex;gap:4px;height:112px;touch-action:none;user-select:none;-webkit-user-select:none}
.kk{--lv:0;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kk-w{flex:1;position:relative;background:color-mix(in srgb,var(--glow) calc(var(--lv)*100%),#f2e7d0);
  box-shadow:inset 0 -10px 0 color-mix(in srgb,var(--glow) calc(var(--lv)*70%),#cdbfa2),inset 0 4px 0 #fffaf0,0 0 calc(var(--lv)*20px) var(--glow)}
.kk-b{position:absolute;top:0;height:60%;z-index:2;background:color-mix(in srgb,var(--glow) calc(var(--lv)*100%),#2e2c33);
  box-shadow:0 0 0 3px #1d1c21,inset 0 -8px 0 color-mix(in srgb,var(--glow) calc(var(--lv)*60%),#141317),inset 0 3px 0 #55525c,0 0 calc(var(--lv)*18px) var(--glow)}
.kk.down{transform:translateY(2px)}
.kk:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.kk.down{transform:none}.vfd-name.flash{animation:none}}

/* phones: the LCD, then PLAY with the tape door and SAVE/EJECT, the sounds (dice and undo with them), the six part keys, the keyboard */
@media (max-width:760px){
  .sb1{grid-template-columns:1fr 1.6fr 1fr;grid-template-areas:"scr scr scr" "play door rs" "keys keys keys" "dials dials dials" "kb kb kb";gap:14px 10px;padding:28px 14px 18px}
  .s1,.s2{top:24px}.s1,.s3{left:5px}.s2,.s4{right:5px}.s3,.s4{bottom:22px}
  .m-screen{padding:9px 10px 0;margin:8px 6px}
  .vfd-top{font-size:10px}
  .vfd-name{font-size:22px;margin:6px 0 2px}
  .stage{min-height:128px}
  .lcd-strip{margin:4px -10px 0;padding:5px 10px;font-size:9px}
  .m-door{grid-template-columns:8px minmax(0,1fr) 8px;gap:5px;padding:6px}
  .grille{background-size:6px 6px;background-position:1px 1px}
  .door-win{padding:5px}
  .door-win .cass{max-width:130px}
  .m-recsend{grid-template-columns:1fr;gap:12px;align-content:stretch}
  .m-recsend .mk{min-height:0;font-size:13px;letter-spacing:.5px;gap:6px;padding:0 4px}
  .mk-play{flex-direction:column;gap:8px;font-size:14px;min-height:72px}
  .m-keys{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .m-keys .key{min-height:46px;font-size:13px;letter-spacing:.5px;order:1}
  .mk-dice,.mk-undo{order:2;min-height:46px;flex-direction:row;gap:8px}
  .mk-dice svg,.mk-undo svg{width:16px;height:16px}
  .m-dials{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .dial{height:48px;padding:7px 8px}
  .dial-name{font-size:11px;letter-spacing:1px}
  .dial-leds i{width:5px;height:5px}.dial-leds{gap:2px}
  .dial-val{font-size:15px;letter-spacing:.5px}
  .rail{gap:8px;margin-bottom:6px}.beat{gap:2px}.beat i{height:5px}
  .pp{height:26px;padding:0 7px;font-size:11px;gap:6px}
  .kb{height:100px;gap:3px}
  .deck{padding:0 8px 24px}
}

/* ==== the label sheet (EJECT): slides up over the machine; the music keeps playing ==== */
.sheet{position:fixed;inset:0;z-index:20}
.sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:90vh;overflow-y:auto;background:var(--panel);padding:14px var(--gut) calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 0 0 var(--line),inset 0 4px 0 rgba(255,255,255,.07);animation:up .18s ease-out}
@media (min-width:900px){.sheet-panel{left:50%;width:960px;margin-left:-480px}}
@keyframes up{from{transform:translateY(30px);opacity:.4}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sheet-head .step-h{margin:0;color:var(--cream)}
.sheet-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px 28px;align-items:start}
@media (max-width:760px){.sheet-body{grid-template-columns:1fr}}
.sheet-tape .cass{max-width:400px;margin:10px auto 14px;transform:rotate(-2deg)}
.sheet-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.sheet-acts .pb{margin:4px}
.tape-qr{display:flex;gap:14px;align-items:center;margin-top:10px}
.tape-qr canvas{width:160px;height:160px;image-rendering:pixelated;box-shadow:0 0 0 4px var(--line)}
.tape-qr .hint{max-width:22ch}
.step-h{margin:16px 0 10px;font:400 12px/1 Silk;letter-spacing:1.5px;color:var(--muted);display:flex;align-items:baseline;gap:10px}
.step-sub{font-size:10px;letter-spacing:1px;color:#8c7766}
.hint{margin:8px 0 0;color:var(--muted);font-size:14px}
.namebar{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}
@media (max-width:520px){.namebar{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0;font:400 10px/1 Silk;letter-spacing:2px;color:#a8927f}
.namebox{display:flex;gap:6px;align-items:center;min-width:0}
.namebox input{flex:1;min-width:0;font:400 16px/1.2 Silk;letter-spacing:1px;text-transform:uppercase;color:var(--ink);background:var(--cream);border:0;padding:12px 10px;margin:4px;box-shadow:0 0 0 4px var(--line),inset 0 4px 0 rgba(0,0,0,.12)}
.namebox.from input{font:400 16px/1.2 Plex;text-transform:none;letter-spacing:0}
.namebox input::placeholder{color:#9c8676;opacity:1}
.grp-h{margin:4px 0 10px;font:700 15px/1 'Barlow Condensed',system-ui,sans-serif;letter-spacing:2px;color:var(--cream);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.grp-h:not(:first-child){margin-top:20px}
.grp-h .step-sub{font:600 13px/1 'Barlow Condensed',system-ui,sans-serif;letter-spacing:1px;color:#a8927f}.grp-h b{color:var(--cream)}
.send-tape{display:flex;width:calc(100% - 8px);font-size:18px;color:#13213a;margin-bottom:12px}
.buddies{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:9px;max-height:256px;overflow-y:auto;padding:5px}
.bud{height:70px;border:0;padding:6px 2px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#f2e7cf;color:#2d2414;font:400 8px/1 Silk;letter-spacing:.5px;box-shadow:0 0 0 3px var(--line);-webkit-tap-highlight-color:transparent;overflow:hidden}
.bud canvas{flex:1;object-fit:contain;min-height:0}
.bud canvas{display:block;image-rendering:pixelated}
.bud:hover{filter:brightness(1.06)}
.bud[aria-pressed=true]{box-shadow:0 0 0 3px var(--line),0 0 0 6px var(--acc,#ffb347)}
.shell-name{color:var(--cream);letter-spacing:1px}
.shell-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:6px 4px;max-width:420px}
.shell{min-width:0;padding:4px;border:0;background:transparent;cursor:pointer;box-shadow:0 0 0 2px transparent}
.shell svg{display:block;width:100%;height:auto}
.shell:hover{background:rgba(255,255,255,.08)}
.shell[aria-pressed=true]{box-shadow:0 0 0 3px var(--acc,#ffb347);background:rgba(255,255,255,.08)}
.linkish{background:none;border:0;color:var(--amber);font:400 13px/1 Silk;letter-spacing:1px;padding:14px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.linkbox{width:calc(100% - 8px);font:400 14px/1.3 ui-monospace,Menlo,monospace;color:var(--ink);background:var(--cream);border:0;padding:10px;margin:10px 4px 0;box-shadow:0 0 0 4px var(--line)}
.row-btns{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}
.note{margin:6px 0 0;color:var(--muted);font-size:14px;min-height:1.4em}
.note:empty{display:none}
#tapeName.rolled{animation:rolled .6s steps(3,end)}
@keyframes rolled{0%{background:var(--yellow)}100%{background:var(--cream)}}
@media (prefers-reduced-motion:reduce){#tapeName.rolled,.dial.turn{animation:none}}
.spine canvas{flex:0 0 auto;image-rendering:pixelated}

/* header on phones */
@media (max-width:620px){.top{flex-wrap:nowrap}.nav{gap:4px 14px;justify-content:flex-end}.nav a[href="#make"],.nav a[href="/#make"]{display:none}.nav a{font-size:12px}}
@media (max-width:420px){.nav a[href*="youtube"]{display:none}}
@media (max-width:359px){.nav a[href="#about"]{display:none}}
@keyframes bcIn{from{opacity:0}to{opacity:1}}

/* ---- the cassette: pixel art, with the buddy on its label ---- */
.cass{position:relative;width:min(100%,460px);margin:6px auto 18px;text-align:left;container-type:inline-size}
.cass-svg svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.4))}
.cass.pop{animation:pop .5s ease-out}
@keyframes pop{30%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.cass.pop{animation:none}}
/* ---- a tape somebody sent you ---- */
.shared-tape{max-width:640px;margin:8px auto 20px;padding:22px var(--gut);text-align:center;display:flex;flex-direction:column;align-items:center}
.kick{font:700 14px/1 Silk;letter-spacing:2px;color:var(--amber);margin:0 0 8px}
.shared-cass{width:100%;display:flex;justify-content:center}
.shared-by{margin:0 0 14px;color:var(--muted)}
.shared-tape .row-btns{justify-content:center}

/* ---- your tapes ---- */
.shelf,.about{max-width:1180px;margin:0 auto;padding:28px var(--gut)}
.shelf h2,.about h2{font:700 22px/1 Silk;letter-spacing:1px;margin:0 0 14px}
.shelf-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px 28px}
.shelf-item{position:relative;display:flex;flex-direction:column;align-items:center}
.shelf-item .cass{width:100%;margin:8px 8px 14px}
.shelf-item .row-btns{justify-content:center;gap:8px 10px}
.shelf-item .pb{min-height:44px;font-size:12px;padding:0 10px}
.about-cols{display:grid;gap:10px 36px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.about h3{font:700 14px/1.3 Silk;letter-spacing:1px;color:var(--amber);margin:12px 0 6px}
.about p{margin:0 0 12px;color:#d8cfbe;max-width:60ch}
.how{margin:0 0 12px;padding:0;list-style:none;color:#d8cfbe;max-width:60ch}
.how li{margin:0 0 10px;padding-left:16px;position:relative}
.how li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--amber)}
.how b{color:var(--cream)}
.specs{font:400 11px/1.6 Silk!important;letter-spacing:1px;color:var(--muted)!important}
.about-more{margin-top:26px;padding-top:18px;border-top:2px dashed #4a332b;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.faq details{border-bottom:2px solid #3a251e}
.faq summary{cursor:pointer;padding:12px 4px;color:var(--cream);font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 16px/1 Silk;color:var(--amber)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 4px 14px}
.foot{max-width:1180px;margin:0 auto;padding:22px var(--gut) 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--muted);font-size:14px;border-top:2px solid #3a251e}
.foot nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.foot a{color:var(--muted)}
.foot p{margin:0}
.foot{align-items:center}
/* the five-colour stripe across the top (drawn by drawStripe in app.js). Computers: behind the logo, bending up before the links. Phones: one straight band under the header */
.stripe-wrap{position:absolute;left:0;right:0;top:0;overflow:hidden;pointer-events:none;z-index:0}
.stripe{display:block;image-rendering:pixelated}
.striped .top{position:relative;z-index:1}
@media (max-width:900px){.striped .top{margin-bottom:88px}}
@media (max-width:620px){.striped .top{margin-bottom:92px}}
.broadcast .stripe-wrap{display:none}
/* ---------- the shelf: three up front, the rack, from friends ---------- */
.shelf-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px}
.shelf-head h2{margin:0}
.shelf-head .pb{min-height:44px;font-size:12px}
.shelf .shelf-row{margin-top:18px}
.shelf-item .star,.rack-item .star{min-width:44px;padding:0;font-size:18px}
.rack-h{font:400 13px/1 Silk;letter-spacing:2px;color:var(--muted);margin:30px 0 12px;padding-top:16px;border-top:2px dashed #4a332b}
.rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px 22px}
.rack-empty{margin:0}
.rack-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 10px}
/* a cassette seen from the side, as it sits in a rack */
.spine{display:flex;align-items:center;gap:8px;min-width:0;height:46px;margin:3px;padding:0 8px 0 6px;border:0;cursor:pointer;text-align:left;color:var(--ink);
  background:var(--sh);box-shadow:0 0 0 3px var(--line),inset 0 3px 0 var(--hi),inset 0 -4px 0 rgba(0,0,0,.2);transition:transform .15s steps(3)}
.spine:hover{filter:brightness(1.06)}
.spine:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.spine-state{flex:0 0 auto;width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--lab)}
.rack-item.playing .spine-state{width:9px;height:12px;border:0;background:linear-gradient(90deg,var(--lab) 0 3px,transparent 3px 6px,var(--lab) 6px)}
.spine-lab{flex:1;min-width:0;height:30px;display:flex;align-items:center;gap:8px;padding:0 8px;background:var(--lab);box-shadow:0 0 0 2px var(--line)}
.spine-art{display:flex;gap:2px;flex:0 0 auto}.spine-art i{display:block;width:4px;height:18px}
.spine-name{flex:1;min-width:0;font:900 17px/1 Doto,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spine-from{flex:0 1 auto;min-width:0;font:400 10px/1 Silk;letter-spacing:.5px;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rack-item.playing .spine,.rack-item.open .spine{transform:translateX(10px)} /* pulled out of the rack */
.spine-acts{grid-column:1/-1;display:none;gap:8px 10px;padding:8px 0 6px 12px}
.rack-item.open .spine-acts{display:flex}
.spine-acts .pb{min-height:40px;font-size:12px;padding:0 12px}
/* the shelf link */
.backup{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:flex-start;margin:16px 0 4px;padding:18px;background:var(--panel);box-shadow:0 0 0 4px var(--line)}
.backup-text{flex:1 1 320px;min-width:0}
.backup-text p{margin:0 0 10px;color:#d8cfbe;max-width:60ch}
.backup .linkbox{margin:4px 4px 12px}
.qr-wrap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;max-width:240px;text-align:center}
.qr-wrap canvas{display:block;width:232px;height:232px;image-rendering:pixelated;box-shadow:0 0 0 4px var(--line)}
.qr-wrap .hint{font-size:13px}
@media (max-width:620px){.qr-wrap{max-width:none;width:100%}.rack{grid-template-columns:1fr}}
.undo{position:sticky;bottom:12px;display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;margin:18px auto 0;padding:4px 16px;background:var(--panel2);box-shadow:0 0 0 3px var(--line);z-index:5}
.undo span{color:var(--cream);font-size:14px}
.shelf-in-rack{width:100%;max-width:520px;grid-template-columns:1fr;margin:6px 0 10px;text-align:left}
.shelf-in-rack .spine{cursor:default}

.star-badge{position:absolute;top:0;right:0;min-height:40px;min-width:40px;z-index:2}
.shelf-item .row-btns{flex-wrap:nowrap;gap:8px}
.shelf-item .row-btns .pb{white-space:nowrap;padding:0 10px}
@media (max-width:420px){.shelf-row{grid-template-columns:1fr}.shelf-item .row-btns .pb{padding:0 9px;font-size:11px}}
@media (max-width:359px){.shelf-item .row-btns{flex-wrap:wrap}}


/* ==== broadcast: the whole machine, playing, scaled to the frame ==== */
.broadcast body{background:#24150f;overflow:hidden}
.broadcast .top,.broadcast .hero,.broadcast .shelf,.broadcast .about,.broadcast .foot,.broadcast .shared-tape,.broadcast .skip,.broadcast .stripe-wrap,.broadcast .sheet{display:none!important}
.broadcast .deck{padding:0;max-width:none;position:fixed;inset:0;z-index:1}
.broadcast .sb1{position:absolute;left:0;top:0;width:1180px;padding-bottom:30px;transform-origin:0 0;margin:var(--by,0) 0 0 var(--bx,0);transition:margin 4s ease-in-out;
  grid-template-areas:"scr scr door" "scr scr door" "dials dials dials" "kb kb kb" "cred cred cred"}
.broadcast .mk-play,.broadcast .m-keys,.broadcast .m-recsend,.broadcast .pp{display:none!important}
.broadcast .stage{min-height:200px}
.broadcast .m-door{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.broadcast .door-win .cass{max-width:300px}
.bc-prog{display:flex;flex-direction:column;gap:7px;background:var(--amber);padding:8px 10px;box-shadow:0 0 0 3px var(--line)}
.bc-prog-t{display:flex;justify-content:space-between;font:400 12px/1 Silk,monospace;color:#2d2414;letter-spacing:1px}
.bc-prog-bar{display:block;height:6px;background:rgba(45,36,20,.18)}.bc-prog-bar i{display:block;height:100%;width:0;background:#2d2414}
.m-credits{grid-area:cred;display:flex;align-items:stretch;gap:22px;min-height:62px}
.cr-now{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:8px 18px;background:var(--amber);color:var(--ink);box-shadow:0 0 0 4px var(--line);margin:4px}
.cr-now span,.cr-by span,.cr-more span{font:400 10px/1 Silk;letter-spacing:2px}
.cr-now b{font:900 24px/1 Doto,monospace;letter-spacing:1px}
.cr-by{display:flex;flex-direction:column;justify-content:center;gap:8px}
.cr-by span{color:#a8927f}.cr-by b{font:400 18px/1 Silk;letter-spacing:1.5px;font-weight:400}
.cr-more{margin-left:auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:8px;text-align:right}
.cr-more span{color:#a8927f}.cr-more b{font:400 13px/1 Silk;letter-spacing:1.5px;color:#ffd36b;font-weight:400;opacity:.35;transition:opacity 1.6s}
.bc-asking .cr-more b{opacity:1}
.m-credits .in{animation:bcIn 1.6s ease-out}
.bc-sky{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;pointer-events:none;image-rendering:pixelated}
.bc-grain{position:fixed;inset:0;z-index:2;pointer-events:none;image-rendering:pixelated;opacity:.55}
/* Shorts (9:16): the phone layout, the tape window full width, the credits at the bottom */
.broadcast.bc-tall .sb1{width:440px;grid-template-areas:"scr scr scr" "door door door" "dials dials dials" "kb kb kb" "cred cred cred"}
.bc-tall .m-door{flex-direction:row!important;align-items:center!important}
.bc-tall .door-win .cass{max-width:190px}
.bc-tall .bc-prog{flex:1}
.bc-tall .m-credits{flex-wrap:wrap;gap:10px 14px}
.bc-tall .cr-now{flex:1 1 100%}
.bc-tall .cr-now b{font-size:20px}
.bc-tall .cr-more{margin-left:0;align-items:flex-start;text-align:left;flex:1 1 100%}
.bc-tall .cr-more b{font-size:10px;letter-spacing:1px}
.bc-tall .sb1{grid-template-columns:1fr 1.6fr 1fr;gap:14px 10px;padding:28px 14px 18px}
.bc-tall .lcd-strip{margin:4px -10px 0;padding:5px 10px;font-size:9px}
.bc-tall .m-screen{margin:8px 6px}
.bc-tall .s1,.bc-tall .s2{top:20px}
.bc-tall .m-screen{padding:9px 10px 0}
.bc-tall .vfd-top{font-size:10px}
.bc-tall .vfd-name{font-size:22px;margin:6px 0 2px}
.bc-tall .stage{min-height:130px}
.bc-tall .m-door{padding:6px}
.bc-tall .door-win .cass{max-width:130px}
.bc-tall .m-recsend{grid-template-columns:1fr;gap:12px;align-content:stretch}
.bc-tall .m-recsend .mk{min-height:0;font-size:11px;letter-spacing:1px;gap:6px}
.bc-tall .mk-play{flex-direction:column;gap:8px;font-size:11px;min-height:72px}
.bc-tall .m-keys{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bc-tall .m-keys .key{min-height:46px;font-size:11px;letter-spacing:.5px;order:1}
.bc-tall .mk-dice,.bc-tall .mk-undo{order:2;min-height:46px;flex-direction:row;gap:8px}
.bc-tall .mk-sub{display:inline;font-size:10px}
.bc-tall .mk-dice svg,.bc-tall .mk-undo svg{width:16px;height:16px}
.bc-tall .m-dials{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bc-tall .dial{height:48px;padding:7px 8px}
.bc-tall .dial-name{font-size:8px;letter-spacing:1px}
.bc-tall .dial-leds i{width:5px;height:5px}
.bc-tall .dial-leds{gap:2px}
.bc-tall .dial-val{font-size:12px;letter-spacing:.5px}
.bc-tall .rail{gap:8px;margin-bottom:6px}
.bc-tall .beat{gap:2px}
.bc-tall .beat i{height:5px}
.bc-tall .pp{height:26px;padding:0 7px;font-size:8px;gap:6px}
.bc-tall .kb{height:100px;gap:3px}
.bc-tall .deck{padding:0 8px 24px}
.broadcast .m-door{justify-content:center}
.bc-tall .door-win{width:auto;flex:0 0 200px}
.bc-tall .bc-prog{min-width:0}
.bc-tall .bc-prog-t{font-size:12px}
/* the sheet's keys use the case's smooth labels */

.sheet .pb{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;letter-spacing:1.5px;font-size:15px;white-space:nowrap}
.sheet .send-tape{font-size:20px;letter-spacing:2px}
.sheet-head .step-h{font:700 16px/1 'Barlow Condensed',system-ui,sans-serif;letter-spacing:2px}
.sheet-head .step-sub{font:600 13px/1 'Barlow Condensed',system-ui,sans-serif;letter-spacing:1px;color:#a8927f}
.sheet .fld{font:600 12px/1 'Barlow Condensed',system-ui,sans-serif;letter-spacing:1.5px}
.bud{padding-bottom:5px}
/* the bold band behind the machine (drawBand); the machine's own thin stripe is gone, the band is the stripe now */
.deck{position:relative}
.deck-band{position:absolute;top:0;z-index:0;pointer-events:none;image-rendering:pixelated}
.sb1{z-index:1}
.sb1{padding-top:30px}
@media (max-width:760px){.sb1{padding-top:22px}}
.broadcast .deck-band{display:none}
/* the tape fills its door */
@media (max-width:760px){html:not(.broadcast) .door-win .cass{max-width:none;width:100%}}
/* computers: the tape lies flat and fills its door; the screen is exactly as tall as the door with SAVE/EJECT under it, so the top row is one even block */
@media (min-width:761px){
  html:not(.broadcast) .sb1{grid-template-columns:128px minmax(0,1fr) clamp(320px,37%,430px);grid-template-rows:auto auto}
  html:not(.broadcast) .door-win .cass{max-width:none;width:100%}
  html:not(.broadcast) .m-door{grid-template-columns:1fr;grid-template-rows:14px auto 14px;gap:10px}
  html:not(.broadcast) .grille{min-height:0}
  html:not(.broadcast) .door-win{padding:12px 14px}
  html:not(.broadcast) .stage{min-height:0;height:0}  /* the screen takes its height from the tape door and SAVE/EJECT beside it */
}
@media (max-width:760px){
  html:not(.broadcast) .sb1{grid-template-columns:1fr 1.8fr 1.1fr}
  html:not(.broadcast) .m-door{grid-template-columns:5px minmax(0,1fr) 5px;gap:4px;padding:5px}
  html:not(.broadcast) .grille{background-size:5px 5px;background-position:0 0}
  html:not(.broadcast) .door-win{padding:3px}
}
/* narrow computer windows: the sound keys wrap to two rows of four (NEW and UNDO at the end), so no label gets squeezed */
@media (min-width:761px) and (max-width:1060px){
  html:not(.broadcast) .m-keys{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px}
  html:not(.broadcast) .m-keys .key{order:1;min-height:52px}
  html:not(.broadcast) .mk-dice,html:not(.broadcast) .mk-undo{order:2;min-height:52px;flex-direction:row;gap:8px}
  html:not(.broadcast) .mk-dice svg,html:not(.broadcast) .mk-undo svg{width:16px;height:16px}
  html:not(.broadcast) .mk-play{flex-direction:column;gap:8px}
}
/* PLAY ALONG on the keyboard's rail: off, playing along (red, blinking), your notes in the song (lit in the style's colour) */
.loop-led{display:block;width:10px;height:10px;background:#4a4650}
.loop[data-state=rec]{color:#ff7a66}.loop[data-state=rec] .loop-led{background:#ff3b2e;box-shadow:0 0 8px #ff3b2e;animation:recBlink .5s steps(2,end) infinite}
.loop[data-state=on]{color:var(--glow)}.loop[data-state=on] .loop-led{background:var(--glow);box-shadow:0 0 8px var(--glow)}
@keyframes recBlink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.loop[data-state=rec] .loop-led{animation:none}}
@media (max-width:760px){.loop{padding:0 7px;font-size:11px;gap:5px}.loop-led{width:8px;height:8px}}
/* the palette: a brown body, cream keys, one hero colour (PLAY, in Braun orange), record red only for recording,
   and each style one colour you can say out loud (8-Bit is Game Boy green). The part keys stay neutral: cream readings, amber lights */
.mk-dice svg path:last-child{fill:#efe6d2}
.dial-leds i.on{background:#e5a24e;box-shadow:0 0 3px rgba(229,162,78,.55)}
/* EJECT: the tape pops up out of the door before the sheet slides in */
.door-win .cass.eject{animation:ejectPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes ejectPop{0%{transform:translateY(0)}35%{transform:translateY(-22%)}100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.door-win .cass.eject{animation:none}}
.m-recsend .mk{box-shadow:4px 0 0 0 var(--line),-4px 0 0 0 var(--line),0 4px 0 0 var(--line),0 -4px 0 0 var(--line),inset 0 3px 0 rgba(255,255,255,.16),inset 0 -4px 0 rgba(0,0,0,.2)}
/* the step lights race on NEW, PLAY waves at you, the screen flips when you poke Dino five times */
.beat i.chase{background:#e8782e!important;box-shadow:0 0 8px 1px rgba(232,120,46,.6)!important}
.mk-play.attract{animation:attract 1.2s ease-in-out infinite}
@keyframes attract{50%{box-shadow:4px 0 0 0 var(--line),-4px 0 0 0 var(--line),0 4px 0 0 var(--line),0 -4px 0 0 var(--line),inset 0 4px 0 rgba(255,255,255,.3),inset 0 -5px 0 rgba(0,0,0,.25),0 0 22px rgba(232,120,46,.55);filter:brightness(1.08)}}
.stage{cursor:pointer;touch-action:manipulation}
.m-screen.invert{animation:invert .45s steps(2,end)}
@keyframes invert{0%,100%{filter:none}50%{filter:invert(1) hue-rotate(180deg)}}
@media (prefers-reduced-motion:reduce){.mk-play.attract,.m-screen.invert{animation:none}}
/* buddies met */
.met-count{color:var(--muted);margin-left:8px}
.met{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;max-width:760px}
.met-b{display:grid;place-items:center;height:42px;background:#f2e7cf;box-shadow:0 0 0 2px var(--line);opacity:.28}
.met-b.seen{opacity:1}
.met-b canvas{max-width:34px;max-height:34px;image-rendering:pixelated}
.met-seen{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;font:400 11px/1.4 Silk;letter-spacing:1px;color:#8c7766}
.met-seen .got{color:var(--cream)}
/* features */
.feat{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:62ch}
.feat li{color:#d8cfbe;line-height:1.5}.feat b{color:var(--cream);font-weight:600}
/* the tape window: an old, slightly yellowed plastic cover over the tape, with a highlight across it and a few fine scuffs */
.door-win{position:relative}
.door-win::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(112deg,rgba(255,244,220,.13) 0 9%,transparent 9% 27%,rgba(255,244,220,.07) 27% 30%,transparent 30% 100%),
    repeating-linear-gradient(97deg,rgba(255,240,210,.035) 0 1px,transparent 1px 29px),
    repeating-linear-gradient(8deg,rgba(255,240,210,.025) 0 1px,transparent 1px 41px),
    rgba(150,110,60,.13);
  box-shadow:inset 0 0 22px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,240,210,.12)}
.more-tapes{margin-top:18px}
.more-tapes>summary{list-style:none;cursor:pointer;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;letter-spacing:1.5px;font-size:15px;color:#2a1915}
.more-tapes>summary::-webkit-details-marker{display:none}
.more-tapes[open]>summary{margin-bottom:4px}
/* computers: the whole machine, down to the foot of the keys, fits a laptop screen. The header tightens, the line under it moves up beside the stripe,
   and on shorter screens the tape (and so the screen beside it) gets a little smaller; the keys never do */
@media (min-width:901px){
  html:not(.broadcast) .brand-logo{margin:8px 0 2px}
  .striped .top{margin-bottom:86px}
  .hero{position:relative;height:0;padding:0}
  .hero h1{position:absolute;right:var(--gut);top:-104px;text-align:right;line-height:1.7}
  .hero h1 span{display:block}
}
@media (min-width:761px){
  html:not(.broadcast) .sb1{padding:22px 26px 56px;row-gap:9px}
  html:not(.broadcast) .door-win .cass{width:min(100%,max(210px,calc((100svh - 760px) * 1.54)))}
  html:not(.broadcast) .m-door{grid-template-rows:8px auto 8px;gap:6px}
  html:not(.broadcast) .door-win{padding:8px 12px}
  html:not(.broadcast) .m-screen{contain:size} /* the screen takes the height of the door beside it, never the other way round */
}
/* shorter laptop screens: the rows above the keys get a little slimmer */
@media (min-width:761px) and (max-height:860px){
  html:not(.broadcast) .m-keys .key,html:not(.broadcast) .mk-dice,html:not(.broadcast) .mk-undo{min-height:54px}
  html:not(.broadcast) .mk-play{min-height:54px}
  html:not(.broadcast) .dial{height:50px;padding:6px 10px}
  html:not(.broadcast) .m-recsend .mk{min-height:44px}
}
/* phones: the whole machine, keyboard included, fits an iPhone screen. The tagline is read out but not shown, the stripe is slimmer,
   the screen and buttons a little shorter, and the six part keys share the bottom with the keyboard (KEYBOARD / PARTS on the rail) */
.kb-tabs{display:none}
@media (max-width:760px){
  html:not(.broadcast) .hero{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0}
  html:not(.broadcast) .top{padding-top:4px;padding-bottom:4px}
  html:not(.broadcast) .striped .top{margin-bottom:54px}
  html:not(.broadcast) .brand-logo{margin:4px 0 4px}
  html:not(.broadcast) .sb1{padding:10px 10px 27px;gap:7px 8px;grid-template-areas:"scr scr scr" "play door rs" "keys keys keys" "kb kb kb" "dials dials dials"}
  html:not(.broadcast) .s1,html:not(.broadcast) .s2{top:6px}html:not(.broadcast) .s3,html:not(.broadcast) .s4{bottom:4px}
  html:not(.broadcast) .vfd-name{font-size:18px;margin:4px 0 0}
  html:not(.broadcast) .stage{flex:none;min-height:0;height:clamp(106px,calc(100svh - 590px),210px)} /* a set height: a canvas left to size itself keeps whatever height it last had */
  html:not(.broadcast) .sb1{grid-template-rows:auto 74px}
  html:not(.broadcast) .door-win .cass{max-width:104px}
  html:not(.broadcast) .m-door,html:not(.broadcast) .mk-play,html:not(.broadcast) .m-recsend{min-height:0;height:74px;margin-top:0;margin-bottom:0}
  html:not(.broadcast) .m-recsend .mk{min-height:0}
  html:not(.broadcast) .m-recsend{gap:8px}
  html:not(.broadcast) .m-recsend .mk{margin:2px 4px}
  html:not(.broadcast) .mk-play{gap:4px}
  html:not(.broadcast) .m-keys{gap:6px 8px}
  html:not(.broadcast) .m-keys .key,html:not(.broadcast) .mk-dice,html:not(.broadcast) .mk-undo{min-height:38px;margin-top:2px;margin-bottom:2px}
  html:not(.broadcast) .kb-tabs{display:flex;gap:6px}
  html:not(.broadcast) .kb-tab{padding:0 9px}
  html:not(.broadcast) .kb-tab[aria-pressed=true]{background:#e5a24e;color:#2a1915}
  html:not(.broadcast) .sb1:not(.parts) .m-dials{display:none}
  html:not(.broadcast) .sb1.parts .kb{display:none}
  html:not(.broadcast) .sb1.parts .m-kb .rail{margin-bottom:0}
  html:not(.broadcast) .loop{margin-left:auto}
}
@media (max-width:380px){html:not(.broadcast) .beat{display:none}}
.bc-tall .s3,.bc-tall .s4{display:none} /* Shorts: the bottom screws would sit on the credits */
/* broadcast: the demo hand that plays the machine now and then, the QR to play the tape yourself, a pressed part key */
.bc-hand{position:absolute;left:0;top:0;z-index:30;pointer-events:none;opacity:0;transition-property:transform,opacity;transition-timing-function:cubic-bezier(.3,.7,.3,1)}
.bc-hand.on{opacity:1}
.bc-hand svg{display:block;width:48px;height:56px;margin-left:-18px;filter:drop-shadow(4px 4px 0 rgba(20,11,8,.55));transition:transform .07s}
.bc-hand.press svg{transform:translateY(5px) scale(.94)}
.bc-tall .bc-hand svg{width:60px;height:70px;margin-left:-22px}
.broadcast .dial.pressed{transform:translateY(3px);filter:brightness(1.18)}
.cr-qr{display:flex;align-items:center;gap:10px;margin:4px 4px 4px 2px}
.cr-qr canvas{display:block;width:66px;height:66px;image-rendering:pixelated;box-shadow:0 0 0 3px var(--line)}
.broadcast:not(.bc-tall) .cr-now b,.broadcast:not(.bc-tall) .cr-by b{white-space:nowrap}
.broadcast:not(.bc-tall) .cr-more{flex:1 1 0;min-width:0}.broadcast:not(.bc-tall) .cr-more b,.broadcast:not(.bc-tall) .cr-more span{line-height:1.5}
.broadcast:not(.bc-tall) .m-credits{gap:18px}
.cr-qr span{font:400 10px/1.6 Silk;letter-spacing:1.5px;color:#ffd36b;text-align:right}
.cr-logo{display:block;flex:0 0 auto;align-self:center;width:118px;height:40px;margin:0 10px 0 8px;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 var(--line))}
.bc-tall .cr-logo{margin-left:auto;order:2}.bc-tall .cr-now{order:0}.bc-tall .cr-by{order:1;flex:1}.bc-tall .cr-more{order:3}
.cr-qr span{white-space:nowrap}
.bc-tall .cr-qr{display:none}
/* broadcast: the diagonal stripe behind the machine, as on the site */
.bc-band{position:absolute;left:-8px;top:-8px;z-index:0;pointer-events:none;image-rendering:pixelated;margin:calc(var(--by,0px) * -2) 0 0 calc(var(--bx,0px) * -2);transition:margin 4s ease-in-out}
/* the logo, stamped on the case: lower right, in the bezel under the keyboard (inside the screws), never larger than a badge */
.m-stamp{position:absolute;right:34px;bottom:9px;z-index:1;line-height:0;pointer-events:none}
.m-stamp img{display:block;width:118px;height:40px;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 var(--line))}
@media (max-width:760px){.m-stamp{right:18px;bottom:4px}.m-stamp img{width:59px;height:20px;filter:drop-shadow(1px 1px 0 var(--line))}}
.broadcast .m-stamp{display:none}
/* computers: the keys a little taller, still chunky toy keys: notched pixel corners at the tips, a thick lip, black keys kept short so the white tips are big and easy to hit */
@media (min-width:761px){
  html:not(.broadcast) .kb{height:126px}
  html:not(.broadcast) .kk-b{height:56%}
  html:not(.broadcast) .kk-w{box-shadow:inset 0 -12px 0 color-mix(in srgb,var(--glow) calc(var(--lv)*70%),#cdbfa2),inset 0 4px 0 #fffaf0;clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px))}
}
.about-cols p + h3{margin-top:22px} /* a second heading in an About column gets room above it */
/* the EJECT sheet: never taller than the visible screen (phones' toolbars included), and DONE stays in reach at the top while you scroll it */
.sheet-panel{max-height:calc(100dvh - 40px)}
@supports not (height:100dvh){.sheet-panel{max-height:85vh}}
.sheet-head{position:sticky;top:-14px;z-index:3;background:var(--panel);margin:-14px calc(-1 * var(--gut)) 8px;padding:14px var(--gut) 10px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
/* a sticker slapped on: the tape jolts */
.cass.slap{animation:slap .28s cubic-bezier(.3,1.8,.5,1)}
@keyframes slap{0%{transform:scale(1)}30%{transform:scale(.965) rotate(-.6deg)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.cass.slap{animation:none}}
/* 16:9 broadcast: the machine exactly as people see it on a computer (the screen as tall as the tape door and SAVE/EJECT beside it,
   PLAY and the style keys, the parts, the same taller keys), with the credits along the bottom. Nothing in it can be pressed */
.broadcast:not(.bc-tall) .sb1{grid-template-columns:128px minmax(0,1fr) clamp(320px,37%,430px);grid-template-rows:auto auto;padding:22px 26px 26px;row-gap:12px;
  grid-template-areas:"scr scr door" "scr scr rs" "play keys keys" "dials dials dials" "kb kb kb" "cred cred cred"}
.broadcast:not(.bc-tall) .mk-play{display:flex!important}
.broadcast:not(.bc-tall) .m-keys,.broadcast:not(.bc-tall) .m-recsend{display:grid!important}
.broadcast:not(.bc-tall) .pp.loop{display:flex!important}
.broadcast:not(.bc-tall) .mk-play,.broadcast:not(.bc-tall) .m-keys,.broadcast:not(.bc-tall) .m-recsend,.broadcast:not(.bc-tall) .pp{pointer-events:none}
.broadcast:not(.bc-tall) .m-door{display:grid;grid-template-columns:1fr;grid-template-rows:8px auto 8px;gap:6px}
.broadcast:not(.bc-tall) .grille{min-height:0}
.broadcast:not(.bc-tall) .door-win{padding:8px 12px}
.broadcast:not(.bc-tall) .door-win .cass{max-width:none;width:100%}
.broadcast:not(.bc-tall) .bc-prog{display:none}
.broadcast:not(.bc-tall) .m-screen{contain:size}
.broadcast:not(.bc-tall) .stage{min-height:0;height:0}
.broadcast:not(.bc-tall) .kb{height:126px}
.broadcast:not(.bc-tall) .kk-b{height:56%}
.broadcast:not(.bc-tall) .kk-w{box-shadow:inset 0 -12px 0 color-mix(in srgb,var(--glow) calc(var(--lv)*70%),#cdbfa2),inset 0 4px 0 #fffaf0;clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px))}

/* the screen's top line: STOP 2/6 and the route as six little marks (made, here, still to come) */
.vfd-top .rt{display:inline-flex;gap:3px;margin-left:6px;vertical-align:1px}.vfd-top .rt b{width:7px;height:7px;box-shadow:inset 0 0 0 2px var(--ink2)}.vfd-top .rt b.d{background:var(--ink2)}.vfd-top .rt b.c{background:var(--ink2);animation:lcdBlink 1s steps(2,end) infinite}
/* tonight's route, like a fold-out pocket subway guide: one line, a stop marker per district in its own colour, the station under the name */
.route{list-style:none;margin:6px 4px 4px;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;position:relative}
.route li{position:relative;padding:28px 6px 0 0;min-width:0}
.route li::before{content:'';position:absolute;left:0;right:0;top:9px;height:6px;background:var(--c,#6b5a4c)}
.route li.home::before{background:linear-gradient(90deg,#6b5a4c 50%,transparent 50%) 0 0/12px 6px}
.route li i{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#2a1915;box-shadow:inset 0 0 0 5px var(--c,#efe6d2)}
.route li.done i{background:var(--c)}.route li.done i::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#2a1915;font:400 12px/1 Silk}
.route li.now i{background:#efe6d2;animation:stopPulse 1.2s ease-in-out infinite}
@keyframes stopPulse{50%{transform:scale(1.18)}}
.route li.home i{box-shadow:inset 0 0 0 5px #efe6d2}.route li.home.done i{background:#efe6d2}
.route b{display:block;font:400 11px/1.2 Silk;letter-spacing:1px;color:var(--cream)}
.route span{display:block;font:400 10px/1.3 Silk;letter-spacing:1px;color:var(--muted);margin-top:3px}
.route small{display:block;font:400 12px/1.35 system-ui,sans-serif;color:var(--cream);margin-top:6px;padding-right:6px}
.route li.now b{color:var(--c)}
@media (max-width:760px){.route{grid-template-columns:1fr;gap:0}.route li{padding:2px 0 14px 36px}.route li::before{left:9px;right:auto;top:0;bottom:0;width:6px;height:auto}.route li.home::before{display:none}.route li i{top:0}}

/* tonight's route, built into the foot of the screen like a station sign: a black panel with a white rule along the top,
   the stop in big white letters, and the line: a coloured pixel marker per stop with its district's little icon */
.lcd-sign{margin:6px -16px 0;background:#141216;box-shadow:inset 0 3px 0 #efe6d2;padding:7px 12px 6px}
.lcd-sign canvas{display:block;width:100%;height:30px;image-rendering:pixelated}
@media (max-width:760px){.lcd-sign{margin:4px -10px 0;padding:5px 8px 4px}.lcd-sign canvas{height:22px}}
.lcd-strip{display:none} /* the sign is the screen's foot: one station sign, no second strip */
.bc-tall .lcd-sign{margin:4px -10px 0}