/* Self-hosted fonts (latin subset, variable weight). Not loaded from a third party. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/jetbrains-mono.woff2) format('woff2')}

:root{
  --ground:#0B0E14;
  --panel:#0F131B;
  --line:#232A36;
  --text:#EDEFF3;
  --text-2:#A9B1BE;
  --text-3:#8B93A1;
  --label:#B8C0CC;
  --bar:#1C2330;
  --accent:#4BFFB0;
  --accent-glow:rgba(75,255,176,.55);
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:'Space Grotesk',Inter,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans)}
[hidden]{display:none !important}

.page{min-height:100vh;min-height:100dvh;display:flex;flex-wrap:wrap}

/* ---------- text pane ---------- */
.pane-text{
  flex:1 1 700px;min-width:0;
  padding:clamp(28px,4vw,48px) clamp(24px,5vw,72px);
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-name{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.01em}

.hero{display:flex;flex-direction:column;gap:26px;max-width:600px}
.hero p{margin:0}

.status{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--label);
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-out infinite}

h1{
  margin:0;
  font-family:var(--display);font-size:clamp(40px,4.4vw,64px);font-weight:400;
  line-height:1.05;letter-spacing:-.035em;text-wrap:balance;
}
h1 strong{font-weight:700}

.counter{display:flex;flex-direction:column;gap:12px}
.counter-num{
  font-family:var(--mono);font-size:clamp(44px,5vw,72px);font-weight:500;
  line-height:1;letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums;
}
.counter-label{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}

.lede{font-size:18px;line-height:1.6;color:var(--text-2);text-wrap:pretty}
.audience{font-size:15px;line-height:1.5;color:var(--text-3)}
.foot{font-size:13px;color:var(--text-3)}

/* ---------- wall pane ---------- */
.pane-wall{flex:999 1 380px;min-width:0;min-height:400px;position:relative;overflow:hidden}

.wall{
  position:absolute;top:-24px;left:-160px;width:calc(100% + 320px);
  transform-origin:0 0;transform:rotate(-7deg);
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:14px 26px;
}
.tok{display:flex;align-items:center;gap:7px}
.bar{position:relative;display:block;height:10px;border-radius:2px;background:var(--bar)}
.tld{font-family:var(--mono);font-size:12px;line-height:1;color:#3A4352}

.tok.lit .bar::after{
  content:"";position:absolute;inset:0;border-radius:2px;
  background:var(--accent);box-shadow:0 0 16px var(--accent-glow);
  opacity:0;animation:lit var(--t,10s) linear var(--d,0s) infinite;
}
.tok.lit .tld{color:#DCE3EA;animation:lit-tld var(--t,10s) linear var(--d,0s) infinite}

.fade{position:absolute;z-index:1;pointer-events:none}
.fade-left{top:0;left:0;bottom:0;width:30%;background:linear-gradient(90deg,var(--ground) 0%,rgba(11,14,20,0) 100%)}
.fade-top{top:0;left:0;right:0;height:96px;background:linear-gradient(180deg,var(--ground) 0%,rgba(11,14,20,0) 100%)}
.fade-bottom{left:0;right:0;bottom:0;height:120px;background:linear-gradient(0deg,var(--ground) 0%,rgba(11,14,20,0) 100%)}

.legend{
  position:absolute;z-index:2;top:clamp(16px,3vw,44px);right:clamp(16px,3vw,44px);
  display:flex;flex-wrap:wrap;gap:8px 18px;padding:10px 16px;
  border-radius:999px;border:1px solid var(--line);background:var(--panel);
}
.legend-item{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--label)}
.legend-bar{width:22px;height:8px;border-radius:2px;background:#3A4352}
.legend-bar-live{background:var(--accent)}

.feed{
  position:absolute;z-index:2;right:clamp(16px,3vw,44px);bottom:clamp(16px,3vw,44px);
  width:min(300px,calc(100% - 32px));padding:20px 22px;
  border-radius:16px;border:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;gap:14px;
}
.feed-title{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.feed-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.row{display:flex;align-items:center;gap:8px;opacity:.3}
.row-dot{width:6px;height:6px;border-radius:50%;background:transparent}
.row-bar{height:10px;border-radius:2px;background:#2A3140}
.row-tld{font-family:var(--mono);font-size:12px;line-height:1;color:var(--text-2)}
.row:nth-child(1){opacity:1}
.row:nth-child(2){opacity:.8}
.row:nth-child(3){opacity:.6}
.row:nth-child(4){opacity:.45}
.row:nth-child(1) .row-dot,.row:nth-child(1) .row-bar{background:var(--accent)}
.row:nth-child(1) .row-tld{color:var(--text)}
.row.in{animation:row-in .45s ease-out}

/* ---------- motion ---------- */
@keyframes lit{0%,10%{opacity:0}16%,74%{opacity:1}82%,100%{opacity:0}}
@keyframes lit-tld{0%,10%{opacity:.28}16%,74%{opacity:1}82%,100%{opacity:.28}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(237,239,243,.4)}70%{box-shadow:0 0 0 9px rgba(237,239,243,0)}100%{box-shadow:0 0 0 0 rgba(237,239,243,0)}}
@keyframes row-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .status-dot,.tok.lit .tld,.row.in{animation:none}
  .tok.lit .bar::after{animation:none;opacity:1}
}