@font-face{font-family:"Archivo";src:url(/fonts/archivo.woff2) format("woff2");font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/fonts/dmmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/fonts/dmmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Reenie Beanie";src:url(/fonts/reenie.woff2) format("woff2");font-display:swap}
:root{--ground:#bfc3a5;--ink:#121210;--rec:#d23a1f;--line:rgba(18,18,16,.85);--shell:#1f2b5c;--sink:#eef1ff;--mono:"DM Mono",ui-monospace,monospace;--hand:"Reenie Beanie","Comic Sans MS",cursive;--grot:"Archivo",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{font:400 15px/1.5 var(--mono);color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{overflow-x:hidden;overflow-x:clip}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--rec);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--ground);padding:10px 14px;text-decoration:none}
.skip:focus{top:12px}

/* ---- device plate header: tiny spec labels around a centred logotype ---- */
.plate{display:grid;grid-template-columns:1fr auto auto auto 1fr;align-items:center;gap:28px;height:46px;padding:0 max(28px,env(safe-area-inset-right)) 0 max(28px,env(safe-area-inset-left));border-bottom:1.5px solid var(--line);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.plate b{font-weight:500;margin-left:10px;padding:2px 6px;border:1px solid var(--line);border-radius:3px}
.pl-b{display:flex;align-items:center;gap:8px}
.rec{width:9px;height:9px;border-radius:50%;background:var(--rec);display:inline-block}
.playing .rec{animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.logo{display:flex;align-items:center;gap:10px;font:800 21px/1 var(--grot);font-stretch:125%;letter-spacing:-.02em;text-transform:none;text-decoration:none;padding:0 18px;height:46px;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line)}
.logo svg{width:30px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4}
.pl-d{justify-self:end;text-decoration:none;border-bottom:1px solid currentColor;padding:12px 0 1px}
.pl-a{justify-self:start}

/* ---- the room: headline | deck | J-card, rack across the bottom ---- */
.room{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) minmax(250px,.66fr);grid-template-rows:1fr auto;column-gap:44px;
  min-height:calc(100vh - 46px);min-height:calc(100svh - 46px);padding:22px 40px 0;position:relative}
.intro{grid-column:1;grid-row:1;align-self:center;container-type:inline-size;padding-bottom:26px}
h1{font:850 19cqi/.84 var(--grot);font-stretch:118%;letter-spacing:-.045em;text-transform:none}
.h-l{display:block}
.h-l:last-child{color:var(--deep,#1f2b5c);transition:color .6s}
.press{font:400 13px/1 var(--mono);letter-spacing:.06em;margin:18px 0 0 3px}
.sub{max-width:34ch;margin-top:20px;font-size:14px}
.spec{display:flex;flex-wrap:wrap;gap:0;margin-top:22px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.spec span{padding:4px 10px;border:1.5px solid var(--line);margin:0 -1.5px -1.5px 0}

.deck{grid-column:2;grid-row:1;align-self:center;padding-bottom:26px;min-width:0}
.slot{perspective:900px}
/* cassette: drawn in CSS around the official cover */
.cass{position:relative;width:100%;aspect-ratio:1.58;background:var(--shell);color:var(--sink);border-radius:4.5%/7%;padding:5.5% 6% 0;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),inset 0 -14px 24px rgba(0,0,0,.18),0 22px 34px -14px rgba(18,18,16,.55);transition:transform .26s ease-in,opacity .26s ease-in;transform-origin:50% 100%}
.cass.eject{transform:translateY(18%) rotateX(24deg);opacity:0}
.cass.load{transform:translateY(-14%);opacity:0;transition:none}
.scr{position:absolute;width:2.6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.55) 0 18%,transparent 22%),color-mix(in srgb,var(--shell) 70%,#fff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.scr.a{left:2%;top:3%}.scr.b{right:2%;top:3%}.scr.c{left:2%;bottom:4%}.scr.d{right:2%;bottom:4%}
.c-label{display:grid;grid-template-columns:38% 1fr;gap:4.5%;height:70%;background:#f4f1e6;color:#161511;border-radius:3px;padding:3.2%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.c-art{width:100%;height:100%;object-fit:cover;border-radius:2px;display:block;min-height:0}
.c-txt{display:flex;flex-direction:column;min-width:0;container-type:inline-size}
.c-no{font-size:max(9px,5.4cqi);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(0,0,0,.3);padding-bottom:2%}
.c-name{font:400 17cqi/1 var(--hand);margin:4% 0 2%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1a1a7a}
.c-meta{font-size:max(9px,5cqi);letter-spacing:.1em;text-transform:uppercase;margin-top:auto;opacity:.75}
.c-win{display:flex;align-items:center;justify-content:space-between;gap:6%;height:40%;background:#1b1a17;border-radius:999px;padding:0 9%;margin:2% 0 4%;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 3px #f4f1e6,inset 0 0 0 4px rgba(0,0,0,.35)}
.c-tape{position:absolute;left:25%;right:25%;top:50%;height:2px;margin-top:-1px;background:#4a3326}
.reel{position:relative;z-index:1;height:58%;aspect-ratio:1;border-radius:50%;--tapec:#4a3326;
  box-shadow:0 0 0 calc((1 - var(--p,0)) * 6cqi + 1px) var(--tapec)}
.reel.r{box-shadow:0 0 0 calc(var(--p,0) * 6cqi + 1px) var(--tapec)}
.reel i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#1b1a17 0 24%,transparent 26%),conic-gradient(from 0deg,#f4f1e6 0 10%,#bdb8a6 10% 23%,#f4f1e6 23% 43%,#bdb8a6 43% 56%,#f4f1e6 56% 76%,#bdb8a6 76% 89%,#f4f1e6 89%)}
.playing .reel i{animation:spin 2.4s linear infinite}
.playing.wait .reel i{animation-play-state:paused}
@keyframes spin{to{transform:rotate(-360deg)}}
.c-foot{display:flex;justify-content:space-between;align-items:center;height:30%;padding:5% 21% 0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.85;
  clip-path:polygon(9% 100%,15% 24%,85% 24%,91% 100%);background:rgba(0,0,0,.14);margin:0 -6%}
.c-holes{display:flex;gap:26px}.c-holes i{width:12px;height:12px;border-radius:50%;background:rgba(0,0,0,.45)}

.keys{display:flex;gap:0;margin-top:22px;align-items:stretch}
.key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:64px;height:58px;background:#e7e8da;border:1.5px solid var(--line);margin-right:-1.5px;
  box-shadow:inset 0 -5px 0 rgba(18,18,16,.18);font-size:15px;letter-spacing:-.12em;transition:transform .08s,box-shadow .08s}
.key small{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.key:active,.key[aria-pressed=true]{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(18,18,16,.18)}
.key.play{min-width:92px;background:var(--ink);color:var(--ground)}
.lcd{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-left:14px;padding:0 16px;background:#1e2117;color:#cfe08d;border-radius:4px;box-shadow:inset 0 2px 8px rgba(0,0,0,.6);min-width:0}
.cnt{font:500 26px/1 var(--mono);letter-spacing:.12em}
.lcd-t{font-size:12px;opacity:.85}
.prog{height:4px;background:rgba(18,18,16,.18);margin-top:14px}
.prog span{display:block;height:100%;width:0;background:var(--ink)}
.status{min-height:1.5em;font-size:12px;margin-top:8px}
.wait .key.play span{animation:blink .8s steps(2) infinite}

/* J-card: the tape's insert, with the track list */
.jcard{grid-column:3;grid-row:1;align-self:center;background:#f4f1e6;border:1.5px solid var(--line);padding:14px 18px 10px;margin-bottom:30px;
  box-shadow:8px 8px 0 var(--shell);transition:box-shadow .6s;min-width:0}
.j-no{font-size:10px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1.5px solid var(--line);padding-bottom:8px}
.j-name{font:400 38px/1 var(--hand);margin:8px 0 0;color:#1a1a7a}
.j-mood{font-size:12px;opacity:.8;margin-bottom:6px}
.j-side{font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-top:10px;padding:3px 0;border-bottom:1px solid var(--line)}
.j-list{list-style:none}
.j-list li{border-bottom:1px dashed rgba(18,18,16,.3)}
.j-list button{display:grid;grid-template-columns:24px 1fr auto;gap:8px;width:100%;padding:4px 2px;text-align:left;align-items:baseline;font-size:13px;line-height:1.3}
.j-list button:hover{background:rgba(18,18,16,.07)}
.j-list .tt{min-width:0;overflow-wrap:anywhere}
.j-list small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.j-list .i,.j-list .d{font-size:11px;opacity:.7}
.j-list li.on button{font-weight:500;background:color-mix(in srgb,var(--shell) 22%,transparent)}
.j-list li.on .i{opacity:1;color:var(--rec)}

/* the rack: tape spines as vertical stripes */
.rack{grid-column:1/-1;grid-row:2;display:flex;height:clamp(170px,23vh,224px);margin:0 -40px;padding:0 40px;border-top:1.5px solid var(--line);
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(18,18,16,.1) 9px 10px)}
.spine{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:9px 0 0;margin-top:20px;
  background:var(--shell);color:var(--sink);border:1.5px solid var(--line);border-bottom:0;margin-right:-1.5px;transition:transform .25s cubic-bezier(.2,.8,.2,1),margin-top .25s}
.spine:hover,.spine:focus-visible{transform:translateY(-12px)}
.sp-no{font-size:11px;letter-spacing:.1em;font-weight:500;white-space:nowrap}
.sp-name{flex:1;display:flex;align-items:center;writing-mode:vertical-rl;transform:rotate(180deg);font:400 clamp(21px,2.1vw,30px)/1 var(--hand);white-space:nowrap;overflow:hidden;
  background:#f4f1e6;color:#1a1a7a;padding:8px 3px;margin:8px 0 0;border-radius:2px 2px 0 0;min-height:0}
.sp-min{opacity:.75;margin-left:6px}
.spine.in{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(18,18,16,.22) 6px 7px);color:var(--ink);transform:none;margin-top:44px}
.spine.in .sp-name{background:none;color:#34362b}
.spine.in::after{content:"in deck";position:absolute;top:-26px;left:50%;transform:translateX(-50%);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}

/* ---- below the fold ---- */
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px}
h2{font:800 clamp(30px,4.4vw,56px)/.95 var(--grot);font-stretch:112%;letter-spacing:-.03em}
.liner{padding:96px 0 80px;border-top:1.5px solid var(--line);background:#c9cdb0}
.lede{max-width:70ch;margin-top:20px;font-size:15px}
.tapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:0;margin-top:44px;border-top:1.5px solid var(--line);border-left:1.5px solid var(--line)}
.tp{display:grid;grid-template-columns:76px 1fr;gap:16px;padding:20px;border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);background:#f4f1e6;border-top:8px solid var(--shell)}
.tp img{width:76px;height:76px;object-fit:cover;display:block}
.tp h3{font:400 30px/1 var(--hand);color:#1a1a7a}
.tp h3 span{display:block;font:500 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.tp p{font-size:12.5px;margin:6px 0}
.tp ol{padding-left:20px;font-size:12.5px;line-height:1.55}
.tp ol span{opacity:.62}
.tp-play{margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--line);padding:8px 12px;min-height:40px}
.tp-play:hover{background:var(--ink);color:var(--ground)}
.faq{padding:88px 0}
.faq details{border-bottom:1.5px solid var(--line);max-width:820px}
.faq details:first-of-type{margin-top:30px;border-top:1.5px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 0;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::after{content:"+";font-size:18px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;max-width:68ch;font-size:14px}
.free{padding:80px 0;background:var(--ink);color:var(--ground)}
.free p{max-width:60ch;margin-top:16px}
.free .credit{font-size:13px;padding:12px 14px;border:1.5px dashed currentColor;display:inline-block}
.copy{display:block;margin-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1.5px solid currentColor;padding:6px 0}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:22px 28px calc(22px + env(safe-area-inset-bottom));font-size:12px;border-top:1.5px solid var(--line)}
body:has(.strip:not([hidden])) .foot{padding-bottom:calc(22px + env(safe-area-inset-bottom))}

/* ---- persistent player: a tape-counter strip pinned to the top edge ---- */
.strip{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;gap:14px;height:calc(42px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
  background:var(--ink);color:var(--ground);font-size:12px;border-bottom:4px solid var(--shell);animation:drop .3s ease-out}
.strip[hidden]{display:none}
@keyframes drop{from{transform:translateY(-100%)}}
.s-reel{width:18px;height:18px;border-radius:50%;flex:none;background:conic-gradient(var(--ground) 0 12%,transparent 12% 33%,var(--ground) 33% 45%,transparent 45% 66%,var(--ground) 66% 78%,transparent 78%);box-shadow:inset 0 0 0 2px var(--ground)}
.playing .s-reel{animation:spin 2.4s linear infinite}
.s-cnt{font:500 15px/1 var(--mono);letter-spacing:.12em;color:#cfe08d;background:#1e2117;padding:4px 6px;border-radius:3px}
.s-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-txt b{font-weight:500;margin-right:10px}
.strip button{width:36px;height:36px;flex:none;border:1.5px solid rgba(191,195,165,.5);font-size:12px;letter-spacing:-.1em}
.strip button:hover{background:var(--ground);color:var(--ink)}

/* ---- 404 ---- */
.nf-main{min-height:calc(100vh - 140px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;gap:16px}
.nf-main img{width:220px;height:220px;border:1.5px solid var(--line);box-shadow:8px 8px 0 var(--ink);transform:rotate(-3deg);margin-bottom:18px}
.nf-main h1{font-size:clamp(34px,6vw,64px);line-height:.95;max-width:14ch}

/* ---- tablet ---- */
@media (max-width:1180px){
  .room{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;row-gap:10px}
  .intro{grid-column:1;grid-row:1}.deck{grid-column:2;grid-row:1}
  .jcard{grid-column:1/-1;grid-row:3;margin:24px 0 34px}
  .jcard{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .j-no,.j-name,.j-mood{grid-column:1/-1}
  .j-side{grid-row:4}.j-side+ol{grid-row:5}
  .rack{grid-row:2}
}
/* ---- phone ---- */
@media (max-width:760px){
  .plate{grid-template-columns:auto 1fr;gap:12px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .pl-a,.pl-c,.pl-b{display:none}
  .pl-d{white-space:nowrap;font-size:10px}
  .logo{order:-1;border-left:0;padding-left:0;font-size:19px}
  .pl-b{justify-self:center}
  .room{display:flex;flex-direction:column;padding:22px 16px 0;min-height:0}
  .intro,.deck,.jcard{align-self:stretch}
  .rack{order:3}.jcard{order:4}
  .intro{padding-bottom:16px}
  h1{font-size:19cqi}
  .press{display:none}
  .sub{margin-top:14px;font-size:13.5px}
  .spec{margin-top:14px}
  .spec span{padding:3px 8px;font-size:10px}
  .deck{padding-bottom:12px}
  .keys{margin-top:16px}
  .key{min-width:56px;height:52px}
  .key.play{min-width:76px}
  .lcd{margin-left:10px;padding:0 10px}
  .cnt{font-size:20px}
  .rack{margin:0 -16px;padding:0 12px;height:180px}
  .sp-no{font-size:10px;letter-spacing:0}.sp-min{display:none}
  .spine.in::after{top:-22px}
  .sp-name{font-size:22px}
  .c-holes{gap:14px}.c-holes i{width:8px;height:8px}
  .c-foot{font-size:8.5px}
  .jcard{display:block;margin:28px 0 36px}
  .liner{padding:64px 0 56px}.faq{padding:64px 0}.free{padding:60px 0}
  .wrap{padding:0 18px}
  .tp{padding:16px;grid-template-columns:60px 1fr}.tp img{width:60px;height:60px}
  .strip .s-cnt{display:none}
  .foot{padding-left:18px;padding-right:18px}
}
@media (max-width:360px){ .logo{font-size:16px;gap:7px}.logo svg{width:24px}.pl-d{font-size:9px;letter-spacing:.08em}.plate{gap:8px} .key{min-width:48px}.key.play{min-width:64px}.lcd-t{display:none}.sp-name{font-size:19px}.spec span:nth-child(3){display:none} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}