@font-face{font-family:"Inter Tight";src:url(../assets/fonts/InterTight-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#141414;--paper:#f1eee6;--y:#f6d24a;--p:#f4a6c1;--b:#94c6ec;--g:#8fd19e;--r:#e8432f;--mute:#6f6b63;--grey:#b5b1a7;--pad:clamp(18px,4.4vw,64px)}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;overflow-x:hidden;
  background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:40px 40px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
.lab{font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.mute{color:var(--mute)}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{position:relative;overflow:hidden;border-bottom:1.5px solid var(--ink)}
.sn{position:absolute;left:var(--pad);top:40px;z-index:2}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:10;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);border-bottom:1.5px solid var(--ink);background:var(--paper)}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:18px;letter-spacing:-.03em}
.brand img{width:48px;height:48px}
.nav-status{justify-self:end;display:flex;gap:10px;align-items:center}
.ld{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--grey)}
.ld.big{width:18px;height:18px}
body[data-state="live"] .ld{background:var(--r)}

/* ---------- hero ---------- */
.hero{height:clamp(640px,62.5vw,900px);display:flex;flex-direction:column;align-items:center}
.facewrap{position:relative;margin-top:clamp(40px,3.9vw,56px);width:clamp(320px,52.8vw,760px);aspect-ratio:1}
.face{position:absolute;inset:0;border-radius:50%;background:var(--y);box-shadow:9px 13px 24px rgba(20,20,20,.16);overflow:hidden;container-type:inline-size;z-index:1}
.face > *{position:absolute;left:0;right:0;text-align:center}
.f-top{top:12.1cqw;font-size:max(9px,1.45cqw)}
.f-word{top:19.7cqw;font-weight:900;font-size:23.7cqw;letter-spacing:-.045em;line-height:.8;white-space:nowrap}
body[data-state="off"] .f-word,body[data-state="unknown"] .f-word{font-size:20cqw;top:21.4cqw}
.f-rule{border-top:1.5px solid var(--ink)}
.r1{top:43.4cqw}.r2{top:51.8cqw}
.f-np{top:44.5cqw;height:6.3cqw;font-weight:900;font-size:5.8cqw;letter-spacing:-.045em;line-height:6.3cqw}
.f-time{top:55.3cqw;font-weight:900;font-size:14.7cqw;letter-spacing:-.06em;line-height:.8}
.play{left:42.2cqw!important;right:auto!important;top:73.7cqw;width:15.5cqw;height:15.5cqw;border-radius:50%;background:var(--ink);display:grid;place-items:center;transition:transform .15s}
.play:hover{transform:scale(1.05)}
.play svg{width:34%;height:38%;fill:var(--y);margin-left:7%}
[data-play] .i-pause,[aria-pressed="true"] .i-play{display:none}
[aria-pressed="true"] .i-pause{display:block;margin-left:0}
/* marquee */
.marquee{overflow:hidden;white-space:nowrap}
.mq-track{display:inline-flex;width:max-content;animation:mq var(--mq-dur,22s) linear infinite}
.mq-track span{padding-right:1.2em}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* schematic lines that leave the face */
.sch{position:absolute;inset:0;pointer-events:none}
.hl{position:absolute;height:0;border-top:1.5px solid var(--ink);left:calc(50% - 50vw + var(--pad) + 60px);right:calc(50% - 50vw + var(--pad) + 60px)}
.hl1{top:43.4%}.hl2{top:66%;left:calc(50% - 50vw + var(--pad) + 140px);right:calc(50% - 50vw + var(--pad) + 140px)}
.vl{position:absolute;width:0;border-left:1.5px solid var(--ink);top:12.5%;bottom:12.5%;z-index:0}
.vl1{left:23.7%}.vl2{left:76.3%}
.pt{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);z-index:0}
.edge{position:absolute;display:flex;align-items:center;gap:8px;font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;transform:translateY(-50%)}
.edge i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);display:inline-block;background:var(--paper)}
.edge i.live-i{background:var(--grey);border-color:var(--grey)}
body[data-state="live"] .edge i.live-i{background:var(--r);border-color:var(--r)}
.e1{top:43.4%;left:calc(50% - 50vw + var(--pad))}
.e2{top:43.4%;right:calc(50% - 50vw + var(--pad))}
.e3{top:66%;left:calc(50% - 50vw + var(--pad) + 80px)}
.e4{top:66%;right:calc(50% - 50vw + var(--pad) + 80px)}
.hero-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:34px;display:flex;justify-content:space-between;gap:20px;align-items:center}
[data-listen-label]{display:flex;align-items:center;gap:8px}
.i-mini{width:9px;height:11px;fill:var(--ink)}
body.playing .i-mini{fill:var(--r)}

/* ---------- three lines ---------- */
.lines{height:clamp(460px,52.8vw,760px)}
.dots{position:absolute;inset:0;width:100%;height:100%}
.three{position:absolute;left:var(--pad);right:var(--pad);top:22%;font-weight:900;font-size:clamp(40px,7.22vw,104px);line-height:.98;letter-spacing:-.055em}
.three span{display:block}
.three span:nth-child(2){margin-left:15.3%}
.three span:nth-child(3){margin-left:5.6%}

/* ---------- nodes ---------- */
.nodes{padding:130px var(--pad) 120px;display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:40px;align-items:start}
.nodes-head h2{font-weight:900;font-size:clamp(64px,8.9vw,128px);letter-spacing:-.065em;line-height:.8}
.nodes-head p{margin-top:28px;line-height:1.8}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:30px 34px;padding-bottom:40px}
.tile{position:relative;aspect-ratio:1;border-radius:50%;container-type:inline-size;transform:translateY(var(--dy)) rotate(var(--r));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.tile.g{background-color:#8fd19e;background-color:var(--g)}.tile.t{background:none;border:0}.tile.y{background:var(--y)}.tile.p{background:var(--p)}.tile.b{background:var(--b)}
.tile.o{border:1.5px dashed var(--ink)}
.tile > *{position:absolute;left:0;right:0;text-align:center}
.tile .k{top:16cqw;font-size:max(8px,4cqw)}
.tile .n{top:26.4cqw;font-weight:900;font-size:36.8cqw;letter-spacing:-.07em;line-height:.8}
.tile.o .n{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.tile .rl{left:16cqw;right:16cqw;top:57.6cqw;border-top:1.5px solid var(--ink);transform:rotate(-3deg)}
.tile .nm{top:60cqw;font-weight:900;font-size:12cqw;letter-spacing:-.04em}
.tile .d{top:76cqw;font-weight:500;font-size:max(10px,4.8cqw)}
.tile[data-clip]:hover,.tile[data-clip]:focus-within{transform:translateY(calc(var(--dy) - 10px)) rotate(calc(var(--r) * -1));animation:wob .5s ease-out}
@keyframes wob{0%{rotate:0deg}30%{rotate:4deg}60%{rotate:-3deg}100%{rotate:0deg}}

/* ---------- stations ---------- */
.st{padding:120px var(--pad) 40px}
.st .row{display:flex;align-items:center;gap:clamp(12px,2vw,28px);border-top:1.5px solid var(--ink);min-height:clamp(84px,9vw,130px)}
.st .nm{font-weight:900;font-size:clamp(44px,7.5vw,108px);letter-spacing:-.065em;line-height:1}
.st .g .nm{color:transparent;-webkit-text-stroke:1.5px var(--grey)}
.pl{width:clamp(52px,5.3vw,76px);height:clamp(52px,5.3vw,76px);flex:none;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;margin-left:auto}
.pl svg{width:30%;height:34%;fill:var(--ink);margin-left:6%}
.pl:hover{background:var(--y)}

/* ---------- beta ---------- */
.beta{min-height:230px;padding:40px var(--pad);display:flex;align-items:center;gap:clamp(20px,2.8vw,40px);flex-wrap:wrap}
.beta .h{font-weight:900;font-size:clamp(40px,4.4vw,64px);letter-spacing:-.055em;line-height:1}
.beta .field{flex:1;min-width:240px;border-bottom:2px solid var(--grey);height:56px;display:flex;align-items:center;justify-content:space-between;font-weight:500;font-size:clamp(15px,1.4vw,20px);color:var(--mute);cursor:not-allowed}
.beta .arr{color:var(--grey);font-weight:900;font-size:30px}

/* ---------- footer ---------- */
.foot{position:relative;overflow:hidden;padding:48px var(--pad) 0;height:clamp(280px,33vw,480px)}
.foot .cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;font-size:14px;line-height:1.8}
.foot h3{margin-bottom:10px}
.foot .log p{display:flex;gap:24px}
.foot .right{text-align:right}
.foot .big{position:absolute;left:calc(var(--pad) - 24px);bottom:-.13em;font-weight:900;font-size:clamp(92px,20.8vw,300px);letter-spacing:-.075em;line-height:1;white-space:nowrap}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .nodes{grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(4,1fr);row-gap:70px}
}
/* ---------- mobile ---------- */
@media (max-width:640px){
  .face{box-shadow:5px 8px 14px rgba(20,20,20,.15)}
  .brand img{width:40px;height:40px}
  body{background-size:24px 24px}
  .nav{height:56px;grid-template-columns:1fr auto}
  .nav-mid{display:none}
  .hero{height:auto;min-height:760px}
  .facewrap{width:120vw;margin-top:70px}
  .sch{display:none}
  .f-top{top:14.9cqw;font-size:max(9px,1.9cqw)}
  .hero-foot{position:static;margin-top:44px;width:100%;padding:0 var(--pad) 40px;flex-direction:column-reverse;align-items:flex-start;gap:12px}
  .three span:nth-child(n){margin-left:0}
  .three{top:18%}
  .nodes{padding-top:90px}
  .wall{grid-template-columns:repeat(2,1fr);gap:22px}
  .tile .k{font-size:max(7px,4cqw)}
  .foot .cols{grid-template-columns:1fr 1fr}
  .foot .right{display:none}
  .foot{height:340px}
}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .tile{transition:none}.tile[data-clip]:hover{animation:none}
  html{scroll-behavior:auto}
}