:root {
  --void:#02031a;
  --midnight:#09083a;
  --deep:#13004b;
  --purple:#41107a;
  --violet:#7b1dff;
  --magenta:#ff1bbd;
  --hot:#ff3f8f;
  --sun:#ff7a2f;
  --orange:#ffb13b;
  --cyan:#18f7ff;
  --blue:#2878ff;
  --text:#f7e9ff;
  --muted:#bca8ff;
  --panel:rgba(7, 8, 46, .74);
  --panel2:rgba(18, 7, 70, .82);
  --line:rgba(24,247,255,.58);
  --glow:0 0 18px rgba(255,27,189,.72),0 0 42px rgba(24,247,255,.22);
  --font-display:Impact,Haettenschweiler,"Arial Black",system-ui,sans-serif;
  --font-body:"Trebuchet MS",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#02031a}
body{
  margin:0;
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,104,38,.55) 0 8rem, rgba(255,27,189,.16) 8.1rem 15rem, transparent 15.2rem),
    radial-gradient(circle at 18% 12%, rgba(24,247,255,.16), transparent 18rem),
    radial-gradient(circle at 78% 10%, rgba(255,27,189,.24), transparent 17rem),
    linear-gradient(180deg,#02031a 0%,#07043a 23%,#210052 43%,#4c0a68 58%,#140535 74%,#02020f 100%);
  background-attachment:fixed;
}
body:before,
body:after,
.noise{content:"";position:fixed;inset:0;pointer-events:none}
body:before{
  z-index:0;
  opacity:.95;
  background:
    radial-gradient(circle at 50% 25%, #ff7b2f 0 8.9rem, rgba(255,27,189,.24) 9rem 14rem, transparent 18rem),
    radial-gradient(circle at 10% 17%, rgba(255,27,189,.42) 0 1px, transparent 2px),
    radial-gradient(circle at 25% 9%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 14%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 21%, rgba(24,247,255,.7) 0 1px, transparent 2px);
  background-size:100% 100%,100% 100%,180px 140px,230px 190px,260px 210px,310px 250px;
  mix-blend-mode:screen;
  mask-image:linear-gradient(180deg,#000 0 52%,transparent 76%);
}
body:after{
  z-index:1;
  opacity:.5;
  background:
    radial-gradient(circle at 50% 62%,rgba(255,27,189,.22),transparent 30rem),
    radial-gradient(circle at 50% 82%,rgba(24,247,255,.12),transparent 26rem),
    linear-gradient(0deg,rgba(0,0,0,.82) 0 15%,transparent 52%);
  mask-image:linear-gradient(180deg,transparent 0 24%,#000 48%,#000 100%);
}
.noise{
  z-index:5;
  opacity:.16;
  mix-blend-mode:screen;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.16) 4px,transparent 5px 8px);
}
a{color:var(--cyan);font-weight:950;text-decoration:none;text-shadow:0 0 10px rgba(24,247,255,.85)}
a:hover{color:#fff;background:rgba(255,27,189,.28)}
.hero,main,footer{position:relative;z-index:2;width:min(1220px,calc(100% - 30px));margin:0 auto}
.hero{padding:28px 0 18px;min-height:auto;display:block}
.topline{display:flex;justify-content:flex-start;gap:16px;align-items:center;margin-bottom:18px}.nav-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.badge,.kicker{display:inline-block;font-family:var(--font-display);letter-spacing:.16em;text-transform:uppercase;font-size:.78rem}
.badge,.topline a{
  border:1px solid rgba(24,247,255,.72);
  border-radius:999px;
  background:rgba(2,3,26,.58);
  box-shadow:0 0 22px rgba(24,247,255,.24), inset 0 0 22px rgba(255,27,189,.16);
  padding:10px 14px 8px;
  backdrop-filter:blur(10px);
}
.hero-banner{
  position:relative;
  border:1px solid rgba(24,247,255,.45);
  border-radius:28px;
  overflow:hidden;
  background:#050316;
  box-shadow:0 0 0 1px rgba(255,27,189,.22),0 22px 80px rgba(0,0,0,.65),0 0 42px rgba(24,247,255,.18);
}
.hero-banner:before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(2,3,26,.08),rgba(2,3,26,.28));
  mix-blend-mode:multiply;
}
.hero-banner img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}
h1{
  font-family:var(--font-display);font-size:clamp(4.3rem,11vw,10.4rem);line-height:.74;margin:0 0 24px;text-transform:uppercase;letter-spacing:-.07em;
  color:#fff;
  text-shadow:0 0 8px #fff,0 0 22px var(--cyan),6px 6px 0 #281067,12px 12px 0 rgba(255,27,189,.42),0 0 70px var(--magenta);
}
h2{font-family:var(--font-display);font-size:clamp(2rem,5vw,4.5rem);line-height:.88;margin:0;text-transform:uppercase;letter-spacing:-.04em;color:#fff;text-shadow:0 0 18px var(--magenta),3px 3px 0 #26085e}
h3{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,3.2rem);line-height:.86;margin:0;text-transform:uppercase;color:#fff;text-shadow:0 0 16px var(--cyan)}
p{font-weight:800;line-height:1.45;color:var(--muted)}
.lede{font-size:clamp(1.05rem,2vw,1.35rem);background:linear-gradient(90deg,rgba(3,4,32,.82),rgba(45,8,91,.72));border:1px solid rgba(24,247,255,.48);border-left:6px solid var(--magenta);border-radius:18px;padding:16px 20px;box-shadow:0 0 28px rgba(255,27,189,.24);max-width:800px;color:#f3eaff;backdrop-filter:blur(10px)}
.receipt,.panel,.stat,.state-dossier{position:relative;background:var(--panel);border:1px solid rgba(24,247,255,.42);box-shadow:0 0 0 1px rgba(255,27,189,.22),0 20px 70px rgba(0,0,0,.55),0 0 34px rgba(24,247,255,.14);padding:20px;border-radius:24px;backdrop-filter:blur(12px);overflow:hidden}
.receipt:before,.panel:before,.stat:before,.state-dossier:before{content:"";position:absolute;inset:-2px;background:linear-gradient(120deg,transparent,rgba(24,247,255,.18),transparent,rgba(255,27,189,.18),transparent);pointer-events:none}
.receipt{display:grid;gap:9px;background:rgba(2,3,26,.78);color:#fff;transform:rotate(1deg)}
.receipt strong{font-family:var(--font-display);color:var(--orange);font-size:1.2rem;text-shadow:0 0 16px var(--sun)}
.receipt span{color:#d9ceff}.receipt b{color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0 34px}
.stat{padding:18px;background:linear-gradient(180deg,rgba(9,8,58,.84),rgba(32,6,76,.78))}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(2rem,4vw,3.5rem);line-height:.9;color:#fff;text-shadow:0 0 14px var(--cyan),0 0 28px var(--magenta)}
.stat span{text-transform:uppercase;font-weight:950;color:#d9ceff}.stat:nth-child(even) b{text-shadow:0 0 14px var(--orange),0 0 32px var(--magenta)}
.panel{margin:28px 0;padding:clamp(18px,3vw,30px)}
.panel-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:18px}.panel-head.map-title{display:block;margin-bottom:20px}.panel-head.map-title h2{max-width:100%}.map-tools{display:grid;gap:10px;max-width:460px}
.panel-copy{max-width:520px;background:rgba(255,27,189,.15);border:1px solid rgba(255,27,189,.62);border-radius:16px;padding:10px 12px;color:#f4dcff;margin:0;box-shadow:0 0 18px rgba(255,27,189,.18)}
.machine-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:stretch}
#scene{height:680px;border:1px solid rgba(24,247,255,.55);border-radius:28px;box-shadow:0 0 0 1px rgba(255,27,189,.28),0 0 45px rgba(24,247,255,.20),0 30px 80px rgba(0,0,0,.72);background:radial-gradient(circle at 50% 28%,rgba(255,117,48,.64) 0 12%,rgba(255,27,189,.20) 13% 26%,transparent 27%),linear-gradient(180deg,#03041d,#120847 45%,#090623);position:relative;overflow:hidden;cursor:default}
#scene:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,rgba(255,27,189,.18),transparent 44%),linear-gradient(180deg,transparent 0 52%,rgba(255,27,189,.12) 53%,transparent 54%);pointer-events:none;mix-blend-mode:screen}
#scene:after{content:"HOVER / CLICK";position:absolute;top:14px;right:14px;background:rgba(2,3,26,.76);border:1px solid rgba(24,247,255,.72);border-radius:999px;color:#fff;font-family:var(--font-display);padding:8px 12px;box-shadow:0 0 18px rgba(24,247,255,.34)}
canvas{display:block;max-width:100%;width:100%;height:100%}.state-dossier{background:rgba(3,4,32,.86);color:#fff;display:flex;flex-direction:column;gap:12px}.state-dossier p,.state-dossier small{color:#d9ceff}.state-dossier h3{color:#fff;text-shadow:0 0 20px var(--cyan),0 0 28px var(--magenta)}.big-number{border:1px solid rgba(255,27,189,.72);border-radius:18px;background:linear-gradient(135deg,rgba(255,27,189,.55),rgba(255,117,48,.38));padding:12px;color:#fff;box-shadow:0 0 22px rgba(255,27,189,.28)}.big-number span{font-family:var(--font-display);font-size:3.3rem;display:block;line-height:.9;text-shadow:0 0 16px #fff}.big-number small{text-transform:uppercase;color:#fff;font-family:var(--font-display);letter-spacing:.06em}.detail-stack{display:grid;gap:10px}.detail{border:1px solid rgba(24,247,255,.34);border-radius:16px;background:rgba(255,255,255,.05);padding:10px}.detail b{display:block;color:var(--cyan);font-family:var(--font-display);text-transform:uppercase}.detail span{color:#f4eaff;font-weight:850;font-size:.92rem}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:24px}.poster-grid,.story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}.poster,.story,.rank-row{border:1px solid rgba(24,247,255,.38);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,27,189,.08));box-shadow:0 0 18px rgba(24,247,255,.12);padding:14px}.poster:nth-child(even),.story:nth-child(even){background:linear-gradient(180deg,rgba(255,117,48,.16),rgba(255,27,189,.1))}.poster b{font-family:var(--font-display);font-size:1.5rem;display:block;color:#fff;text-shadow:0 0 12px var(--magenta)}.poster small,.story small{text-transform:uppercase;font-weight:950;color:var(--cyan)}.poster p,.story p{color:#d9ceff}.rank-board{display:grid;gap:10px;margin-top:20px}.rank-row{display:grid;grid-template-columns:34px minmax(0,1fr) 76px;gap:10px;align-items:center;background:rgba(2,3,26,.74);color:#fff}.rank-row b{color:var(--orange);text-shadow:0 0 10px var(--sun)}.rank-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zine{background:linear-gradient(180deg,rgba(7,8,46,.9),rgba(42,6,83,.78))}.zine h2,.zine .kicker{color:#fff}.story-grid{grid-template-columns:repeat(3,1fr)}.story strong{font-family:var(--font-display);text-transform:uppercase;color:#fff;display:block;line-height:.95;margin:4px 0 12px;text-shadow:0 0 14px var(--magenta)}footer{padding:20px 0 50px}.footer-links{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 12px}.footer-links a{border:1px solid rgba(24,247,255,.72);border-radius:999px;background:rgba(2,3,26,.58);box-shadow:0 0 22px rgba(24,247,255,.18), inset 0 0 22px rgba(255,27,189,.12);padding:10px 14px 8px}footer p{background:rgba(2,3,26,.66);border:1px solid rgba(24,247,255,.4);border-radius:18px;box-shadow:0 0 22px rgba(24,247,255,.12);padding:14px;color:#d9ceff}
@media(max-width:900px){.machine-layout,.split{grid-template-columns:1fr}.stats-grid,.poster-grid,.story-grid{grid-template-columns:repeat(2,1fr)}#scene{height:520px}.panel-head{flex-direction:column;align-items:stretch}.state-dossier{min-height:0}.hero{min-height:auto;padding-top:22px}.hero-banner{border-radius:20px}}
@media(max-width:560px){.hero,main,footer{width:min(100% - 20px,1220px)}.topline{flex-direction:column;align-items:flex-start}.stats-grid,.poster-grid,.story-grid{grid-template-columns:1fr}#scene{height:390px}.hero-banner{border-radius:16px}.machine-layout{gap:12px}.state-dossier{font-size:.92rem}h1{font-size:4rem}.split{gap:12px}body:before{opacity:.6}}