:root{
  --ink:#07070A;
  --ink2:#0E0F13;
  --line:#22242C;
  --paper:#F3F2EE;
  --mute:#8A8D99;
  --acc:#FF3D00;
  --acc2:#C6FF3D;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.grain{
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),
    radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,4px 4px;
  animation:flick 3.6s steps(4) infinite;
}
@keyframes flick{0%{opacity:.5}50%{opacity:.34}100%{opacity:.5}}

/* NAV */
.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:.5rem;
  padding:.85rem 1.1rem;
  background:rgba(7,7,10,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
.nav-mark{font-family:'Archivo Black',sans-serif;letter-spacing:.02em;font-size:.85rem}
.nav-sep{color:var(--acc)}
.nav-meta{margin-left:auto;color:var(--mute)}

/* HERO */
.hero{padding:3.2rem 1.1rem 3rem;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero:before{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 60% at 50% -10%, rgba(255,61,0,.18), transparent 62%);
}
.hero > *{position:relative;z-index:1}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--acc);margin-bottom:1.4rem;
}
h1{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(4.2rem,23vw,11rem);
  line-height:.82;letter-spacing:-.04em;text-transform:uppercase;
}
.logline{margin-top:1.6rem;max-width:46ch;color:#C9CAD1;font-size:1.02rem}
.hookbox{margin-top:2rem;border-left:3px solid var(--acc);padding:.2rem 0 .2rem 1rem}
.hooklabel{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.2em;color:var(--mute)}
.hookline{
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(1.35rem,6.4vw,2.6rem);line-height:1.02;letter-spacing:-.02em;margin-top:.4rem;
}
.specs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:2rem}
.specs span{
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--line);padding:.4rem .6rem;color:var(--mute);
}
.specs span b{color:var(--paper);font-weight:400}

/* SECTION HEADS */
.sect-h{
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(1.5rem,7vw,2.6rem);letter-spacing:-.02em;line-height:1;
  display:flex;align-items:baseline;gap:.7rem;
}
.sect-h .num{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;color:var(--acc);letter-spacing:.1em}
.sect-sub{color:var(--mute);max-width:52ch;margin-top:.8rem;font-size:.92rem}

/* PLAYER */
.player-wrap{padding:3rem 1.1rem;border-bottom:1px solid var(--line)}
.frame{margin-top:1.8rem;border:1px solid var(--line);background:#000;max-width:420px}
.frame-hud{
  display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;
  border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);
}
.rec{width:7px;height:7px;border-radius:50%;background:#3A3D46;flex:none}
.frame.live .rec{background:var(--acc);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
#hud-slug{margin-left:auto;color:var(--paper);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:62%}
.frame-stage{
  position:relative;aspect-ratio:9/16;display:grid;place-items:center;
  padding:1.4rem;text-align:center;overflow:hidden;
  background:radial-gradient(80% 50% at 50% 45%, #15161C, #000 78%);
}
.idle{display:grid;justify-items:center}
.idle[hidden],.beat[hidden]{display:none}
.idle p{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.24em;color:var(--mute);margin-top:1.1rem}
.play{
  width:76px;height:76px;border-radius:50%;border:1px solid var(--paper);
  background:transparent;display:grid;place-items:center;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.9,.2,1),background .25s,border-color .25s;
}
.play .tri{
  width:0;height:0;border-left:19px solid var(--paper);
  border-top:12px solid transparent;border-bottom:12px solid transparent;
  margin-left:5px;transition:border-left-color .25s;
}
.play:hover,.play:focus-visible{background:var(--acc);border-color:var(--acc);transform:scale(1.09)}
.play:hover .tri,.play:focus-visible .tri{border-left-color:#000}
.beat{animation:pop .45s cubic-bezier(.2,.9,.2,1)}
@keyframes pop{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:scale(1)}}
.beat-kind{
  font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.22em;
  color:var(--acc);text-transform:uppercase;margin-bottom:1rem;
}
.beat-ost{
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(1.1rem,5.4vw,1.55rem);line-height:1.06;letter-spacing:-.015em;
}
.beat-vo{
  margin-top:1.3rem;color:#B7B9C2;font-size:.8rem;line-height:1.5;
  border-top:1px solid var(--line);padding-top:.9rem;max-width:30ch;margin-inline:auto;
}
.bars{display:flex;gap:2px;padding:.5rem .7rem;border-top:1px solid var(--line)}
.bars i{flex:1;height:3px;background:#22242C;transition:background .2s}
.bars i.on{background:var(--acc)}

/* BOARD */
.board{padding:3rem 1.1rem;border-bottom:1px solid var(--line)}
#shots{margin-top:2rem;display:grid;gap:1rem}
.shot{border:1px solid var(--line);background:var(--ink2)}
.shot-top{display:flex;align-items:baseline;gap:.7rem;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
.shot-tc{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--acc);flex:none}
.shot-slug{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.88rem;letter-spacing:-.01em;line-height:1.2}
.shot-dur{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--mute);flex:none}
.shot-body{padding:1rem;display:grid;gap:.9rem}
.row{display:grid;gap:.25rem}
.row .k{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.row .v{font-size:.88rem;color:#DCDDE2}
.row.vo .v{color:var(--paper);font-weight:500}
.row.ost .v{
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.86rem;
  line-height:1.3;color:var(--acc2);
}
.kind{
  display:inline-block;justify-self:start;font-family:'JetBrains Mono',monospace;font-size:.54rem;
  letter-spacing:.18em;text-transform:uppercase;padding:.25rem .45rem;border:1px solid;
}
.kind.jon{color:var(--acc2);border-color:var(--acc2)}
.kind.hook{color:var(--acc);border-color:var(--acc)}
.kind.bot{color:#7FD5FF;border-color:#7FD5FF}
.kind.card{color:var(--mute);border-color:var(--mute)}
.prompt-btn{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;background:transparent;color:var(--paper);
  border:1px solid var(--line);padding:.6rem .7rem;cursor:pointer;width:100%;text-align:left;
  transition:border-color .2s,color .2s;min-height:44px;
}
.prompt-btn:hover{border-color:var(--acc);color:var(--acc)}
.prompt-body{display:none;margin-top:.6rem;border-left:2px solid var(--acc);padding-left:.8rem}
.prompt-body.open{display:block}
.prompt-body p{font-family:'JetBrains Mono',monospace;font-size:.72rem;line-height:1.6;color:#C4C6CE}
.copy{
  margin-top:.7rem;font-family:'JetBrains Mono',monospace;font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;background:var(--paper);color:#000;
  border:0;padding:.55rem .9rem;cursor:pointer;
}
.copy.done{background:var(--acc2)}

/* PANELS */
.panel{padding:3rem 1.1rem;border-bottom:1px solid var(--line)}
.panel.alt{background:var(--ink2)}
.deflist{margin-top:1.8rem;display:grid;gap:1.3rem}
.deflist dt{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:.4rem}
.deflist dd{font-size:.94rem;color:#D3D4DA;max-width:62ch}

/* FOOT */
.foot{padding:4rem 1.1rem 3.5rem;text-align:center}
.foot-mark{font-family:'Archivo Black',sans-serif;font-size:clamp(2.6rem,15vw,6rem);letter-spacing:-.03em;line-height:1}
.foot-line{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);margin-top:.6rem}
.foot-meta{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.14em;color:var(--mute);margin-top:1.6rem}

@media(min-width:760px){
  .nav{padding:1rem 2.5rem;font-size:.72rem}
  .hero{padding:6rem 2.5rem 5rem}
  .board,.panel{padding:5rem 2.5rem}
  .logline{font-size:1.18rem}
  .player-wrap{padding:5rem 2.5rem;display:grid;grid-template-columns:1fr 400px;gap:3rem;align-items:start}
  .player-wrap .sect-h{grid-column:1;grid-row:1}
  .player-wrap .sect-sub{grid-column:1;grid-row:2;align-self:start}
  .frame{grid-column:2;grid-row:1/span 2;margin-top:0;max-width:400px}
  #shots{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .deflist{grid-template-columns:repeat(2,1fr);gap:2rem}
  .foot{padding:7rem 2.5rem 5rem}
}
@media(min-width:1160px){
  #shots{grid-template-columns:repeat(3,1fr)}
  .hero{padding:7rem 4rem 6rem}
  .board,.panel,.player-wrap{padding:6rem 4rem}
}
@media(prefers-reduced-motion:reduce){
  .grain,.beat{animation:none}
}