:root{
  --bg:#050505;
  --fg:#f0efe8;
  --acid:#55d7ff;
  --pink:#ff7ac8;
  --hot:#ff7ac8;
  --steel:#9aa0a6;
  --line:#292929;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:
linear-gradient(36deg,rgba(255,122,200,.055) 12%,transparent 12.5%,transparent 87%,rgba(85,215,255,.05) 87.5%),
linear-gradient(144deg,rgba(85,215,255,.045) 12%,transparent 12.5%,transparent 87%,rgba(255,122,200,.05) 87.5%),
linear-gradient(72deg,transparent 32%,rgba(255,255,255,.025) 32.5%,rgba(255,255,255,.025) 34%,transparent 34.5%),
linear-gradient(108deg,transparent 66%,rgba(255,255,255,.02) 66.5%,rgba(255,255,255,.02) 68%,transparent 68.5%),
radial-gradient(circle at 50% -20%,#171717 0,#0a0a0a 34%,#050505 68%);
background-size:180px 180px,180px 180px,290px 290px,290px 290px,auto;
background-position:0 0,90px 90px,0 0,145px 145px,0 0;
color:var(--fg);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body.player-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.scanlines{display:none}
.topline{position:fixed;z-index:50;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(5,5,5,.94);font:700 11px/1 monospace;letter-spacing:.12em}
.brand{font-size:13px}
.mini-player-open{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--steel);font:700 10px/1 monospace;letter-spacing:.12em;cursor:pointer}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 14px rgba(255,122,200,.65)}
.hero{min-height:100vh;padding:84px 18px 24px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:0}
.hero-copy{display:flex;flex-direction:column;justify-content:flex-end;border:0;padding:28px 28px 34px;min-height:72vh;position:relative;overflow:hidden;background:rgba(9,9,9,.82)}
.hero-copy::before{content:"ET";position:absolute;top:-8vw;right:-2vw;font:900 34vw/1 Arial;color:#0e0e0e;z-index:0}
.kicker,.micro{position:relative;z-index:1;margin:0 0 12px;font:700 11px/1 monospace;letter-spacing:.18em;color:var(--pink)}
.hero h1{position:relative;z-index:1;margin:0;font:900 clamp(84px,15vw,240px)/.72 Arial,Helvetica,sans-serif;letter-spacing:-.08em}
.friends-lockup{position:relative;z-index:1;display:flex;align-items:flex-end;gap:14px;width:max-content;max-width:100%;margin:10px 0 0 3%;transform:translateX(2%)}
.friends-mark{display:block;font:900 clamp(38px,5vw,72px)/.86 Arial,sans-serif;letter-spacing:-.055em;color:#ff90cf;text-shadow:0 0 8px rgba(255,122,200,.28)}
.remix-mark{display:block;padding-bottom:5px;font:700 clamp(12px,1.5vw,18px)/1 monospace;letter-spacing:.12em;text-transform:lowercase;color:#78ddff;text-shadow:0 0 7px rgba(85,215,255,.25)}
.tag{position:relative;z-index:1;margin:14px 0 0;font:900 clamp(22px,4vw,58px)/1 Arial}
.bio-panel{min-height:72vh;border:0;background:rgba(11,11,11,.68);display:flex;flex-direction:column;overflow:hidden}
.bio-top{display:none}
.bio-body{padding:28px 24px 24px;display:flex;flex:1;flex-direction:column;justify-content:flex-end}
.bio-body>.micro,.bio-body>h2{display:none}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:auto;align-items:end}
.project-card{position:relative;min-height:330px;border:0;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#080808}
.project-card::before{content:"";position:absolute;inset:0;pointer-events:none}
.project-penrose::before{background:
linear-gradient(36deg,rgba(85,215,255,.18) 11%,transparent 11.5%,transparent 88%,rgba(255,122,200,.14) 88.5%),
linear-gradient(144deg,rgba(255,122,200,.14) 11%,transparent 11.5%,transparent 88%,rgba(85,215,255,.16) 88.5%),
linear-gradient(72deg,transparent 40%,rgba(255,255,255,.04) 40.5%,rgba(255,255,255,.04) 42%,transparent 42.5%),
#080808;
background-size:96px 96px,96px 96px,150px 150px}
.project-paradise::before{background-image:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.16)),var(--project-art);background-size:cover;background-position:center}
.project-card>*{position:relative;z-index:1}
.project-label,.project-note{display:none}
.project-card strong{font:900 clamp(30px,3.4vw,52px)/.86 Arial;letter-spacing:-.055em;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.bio-index{display:flex;justify-content:flex-end;padding:0 24px 24px}
.bio-index span{display:none}
.bio-index button{border:0;background:transparent;color:var(--acid);font:700 10px/1 monospace;letter-spacing:.1em;cursor:pointer}
.deck{border:1px solid #3a3a3a;background:#111;display:flex;flex-direction:column}
.deck-head,.deck-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font:700 10px/1 monospace;letter-spacing:.1em;color:var(--steel)}
.deck-head{border-bottom:1px solid #3a3a3a}
.deck-head-right{display:flex;align-items:center;gap:14px}
.deck-head-right button{border:0;background:transparent;color:var(--pink);font:700 9px monospace;letter-spacing:.12em;cursor:pointer}
.deck-foot{border-top:1px solid #3a3a3a;margin-top:auto}
.deck-foot a{color:var(--acid)}
.screen{position:relative;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;padding:18px;background:#080808;overflow:hidden}
.screen-grid{position:absolute;inset:0;background-image:linear-gradient(#161616 1px,transparent 1px),linear-gradient(90deg,#161616 1px,transparent 1px);background-size:24px 24px}
.signal{position:relative;z-index:2}
.signal span{display:block;font:700 10px/1 monospace;letter-spacing:.16em;color:var(--acid);margin-bottom:12px}
.signal strong{display:block;font:900 clamp(38px,5vw,86px)/.86 Arial;letter-spacing:-.06em;text-transform:uppercase;max-width:90%;overflow-wrap:anywhere}
.meters{position:relative;z-index:2;height:110px;display:flex;align-items:flex-end;gap:5px}
.meters i{display:block;flex:1;max-width:16px;height:var(--h);background:linear-gradient(to top,var(--pink),var(--acid));box-shadow:0 0 10px rgba(85,215,255,.2);transition:height .16s linear}
.deck.is-playing .meters i:nth-child(3n+1){animation:meter .52s infinite alternate}
.deck.is-playing .meters i:nth-child(3n+2){animation:meter .73s .1s infinite alternate-reverse}
.deck.is-playing .meters i:nth-child(3n){animation:meter .39s .2s infinite alternate}
@keyframes meter{from{height:18%}to{height:var(--h)}}
.transport{display:grid;grid-template-columns:1fr 1.6fr 1fr;border-top:1px solid #3a3a3a;border-bottom:1px solid #3a3a3a}
.transport button{height:64px;border:0;border-right:1px solid #3a3a3a;background:#111;color:var(--fg);font:700 11px monospace;letter-spacing:.12em;cursor:pointer}
.transport button:last-child{border-right:0}
.transport .play{background:linear-gradient(90deg,var(--pink),var(--acid));color:#050505;font-size:14px}
.progress-shell{height:16px;padding:6px 0;background:#090909;cursor:pointer}
.progress-shell span{display:block;width:0;height:4px;background:linear-gradient(90deg,var(--pink),var(--acid))}
.player-modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease}
.player-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.player-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.78);cursor:pointer}
.player-popup{position:relative;z-index:2;width:min(900px,94vw);max-height:90vh;box-shadow:0 30px 100px rgba(0,0,0,.7)}
.player-popup .screen{min-height:420px}
.vault{padding:18px 18px 60px}
.vault-head{display:flex;justify-content:flex-end;align-items:center;margin-bottom:10px;font:700 11px monospace;letter-spacing:.12em}
.vault-head p{display:none}
.vault-head button{border:1px solid var(--pink);background:transparent;color:var(--pink);padding:10px 14px;cursor:pointer}
.studio{margin:0 18px 18px;border:1px solid var(--line);padding:28px 24px 80px;background:var(--fg);color:var(--bg)}
.studio .micro{color:var(--pink)}
.studio h2{margin:80px 0 0;font:900 clamp(58px,10vw,160px)/.78 Arial;letter-spacing:-.07em}
footer{display:flex;justify-content:space-between;padding:18px;border-top:1px solid var(--line);font:700 10px monospace;letter-spacing:.15em;color:var(--steel)}
@media(max-width:920px){
  .hero{grid-template-columns:1fr;padding-top:74px}
  .hero-copy,.bio-panel{min-height:auto}
  .hero-copy{height:58vh}
  .bio-panel{min-height:480px}
}
@media(max-width:560px){
  .topline{height:48px}
  .hero{padding:58px 10px 10px;gap:10px}
  .hero-copy{padding:16px;height:48vh}
  .hero h1{font-size:27vw}
  .friends-lockup{gap:8px;margin-left:1%;transform:none}
  .friends-mark{font-size:11vw}
  .remix-mark{font-size:3.4vw;padding-bottom:3px}
  .bio-body{padding:18px}
  .bio-body h2{font-size:12vw}
  .project-grid{grid-template-columns:1fr}
  .project-card{min-height:190px}
  .bio-index{grid-template-columns:1fr}
  .screen{min-height:300px}
  .signal strong{font-size:13vw}
  .player-modal{padding:10px}
  .player-popup .screen{min-height:340px}
  .vault{padding:18px 10px 40px}
  .studio{margin:0 10px 10px;padding:22px 16px 60px}
}