:root {
  --bg:#0e0b14; --panel:#1d1631; --text:#ffffff; --muted:#bdb3d6; --rule:#3a2f58; --accent:#ff4d4d; --mx:50%; --my:20%;
  --pink:#ff2e93; --cyan:#22e1ff; --gold:#ffc83d; --orange:#ff9a3d; --red:#ff4d4d;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin:0; color:var(--text); line-height:1.7;
  font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(255,46,147,.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 0%, rgba(34,225,255,.18), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
.space-decor { display:none; }
header.site-header, main, footer, .chapter-nav-inner { max-width:860px; margin-left:auto; margin-right:auto; padding-left:1.5rem; padding-right:1.5rem; }
header.site-header { padding-top:4.5rem; padding-bottom:2.5rem; }
.eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); }
header.site-header h1 {
  font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; letter-spacing:.02em;
  font-size:clamp(3.6rem,12vw,7rem); line-height:.9; margin:.6rem 0 1rem;
  background:linear-gradient(90deg,var(--pink),var(--gold) 55%,var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.accent-bar { height:6px; width:140px; background:repeating-linear-gradient(90deg,var(--pink) 0 10px,transparent 10px 16px); border-radius:3px; }
.tagline { font-size:1.35rem; color:var(--text); margin:1.2rem 0 0; max-width:560px; }
.repo-link { margin:1.6rem 0 0; }
.repo-link a { display:inline-block; color:var(--text); border:1px solid var(--rule); padding:.65rem 1.2rem; border-radius:999px; text-decoration:none; font-weight:700; margin-right:.75rem; }
.repo-link a.btn-primary { background:linear-gradient(90deg,var(--pink),#b61fff); border-color:transparent; box-shadow:0 0 28px rgba(255,46,147,.45); }
.repo-link a:hover { opacity:.85; }
.chapter-nav { position:sticky; top:0; z-index:20; background:rgba(14,11,20,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); }
.chapter-nav-inner { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .95rem; padding-top:.8rem; padding-bottom:.8rem; font-size:.8rem; }
.chapter-nav a { color:var(--muted); text-decoration:none; font-weight:500; }
.chapter-nav a:hover { color:var(--text); }
.chapter-nav .nav-back { color:var(--cyan); font-weight:700; }
.chapter-nav .nav-top { margin-left:auto; }
main { padding-top:1rem; padding-bottom:3rem; counter-reset:sec; }
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1rem; margin:2rem 0 1rem; }
.stat-row div { background:var(--panel); border:1px solid var(--rule); border-radius:14px; padding:1rem 1.1rem; }
.stat-row b { display:block; font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; font-size:3rem; line-height:1; color:var(--gold); }
.stat-row span { color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; }
h2 { counter-increment:sec; font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; font-size:3rem; letter-spacing:.02em; margin:4rem 0 1rem; scroll-margin-top:6.5rem; line-height:1; }
h2::before { content:"0" counter(sec) " /"; display:block; font-family:"Space Grotesk",sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.2em; color:var(--pink); margin-bottom:.5rem; }
h3 { font-size:1.15rem; margin:2rem 0 .5rem; color:var(--gold); }
p, li { font-size:1.12rem; color:#ece7f7; line-height:1.75; }
b, strong { color:var(--text); }
a { color:var(--cyan); }
code { background:var(--panel); padding:.15em .4em; border-radius:4px; }
.room-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin:1.5rem 0; }
.room { background:var(--panel); border:1px solid var(--rule); border-top:4px solid var(--c); border-radius:14px; padding:1.1rem 1.2rem; box-shadow:0 0 30px -12px var(--c); }
.room h3 { margin:0 0 .3rem; color:var(--c); font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; font-size:1.9rem; letter-spacing:.03em; }
.room p { margin:0; font-size:.95rem; }
.room.rock { --c:var(--red); } .room.hiphop { --c:var(--gold); } .room.electronic { --c:var(--cyan); } .room.country { --c:var(--orange); }
table { display:block; overflow-x:auto; border-collapse:collapse; font-size:.92rem; margin:1.4rem 0; }
th, td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--rule); vertical-align:top; }
th { color:var(--cyan); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.feature-list { list-style:none; padding:0; display:grid; gap:.9rem; }
.feature-list li { background:var(--panel); border:1px solid var(--rule); border-left:4px solid var(--pink); border-radius:12px; padding:1rem 1.2rem; }
.feature-list li:nth-child(2n) { border-left-color:var(--cyan); }
.feature-list li:nth-child(3n) { border-left-color:var(--gold); }
.hero-video video { width:100%; border-radius:14px; margin-top:1.5rem; border:1px solid var(--rule); }
img { max-width:100%; border-radius:10px; }
footer { padding-top:2rem; padding-bottom:3rem; color:var(--muted); font-size:.85rem; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:.5rem; }

body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(circle 380px at var(--mx) var(--my), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); transition:background .3s; }
header.site-header, main, .chapter-nav, footer { position:relative; z-index:1; }
.chapter-nav { position:sticky; z-index:20; }
/* equalizer + ticker */
.eq { display:flex; align-items:flex-end; gap:5px; height:90px; margin:1rem 0 0; }
.eq i { flex:1; height:var(--h); border-radius:3px 3px 0 0; background:linear-gradient(to top,var(--pink),var(--gold) 70%,var(--cyan)); transform-origin:bottom; animation:bounce 1.1s ease-in-out infinite alternate; animation-delay:var(--d); opacity:.9; }
@keyframes bounce { from { transform:scaleY(.25); } to { transform:scaleY(1); } }
.ticker { overflow:hidden; margin:1.5rem calc(50% - 50vw) 0; border-block:1px solid var(--rule); background:rgba(255,255,255,.03); transform:rotate(-1.2deg); }
.ticker-track { display:flex; width:max-content; animation:tick 28s linear infinite; }
.ticker span { font-family:"Bebas Neue",Impact,sans-serif; font-size:2.2rem; letter-spacing:.1em; color:var(--accent); padding:.3rem 0; white-space:nowrap; transition:color .3s; }
@keyframes tick { to { transform:translateX(-50%); } }
header.site-header { position:relative; }
  background:radial-gradient(circle,#111 0 19%,transparent 20%), repeating-radial-gradient(circle,#15101f 0 2px,#2a2040 2px 4px);
  box-shadow:0 0 0 2px #000, 0 0 44px color-mix(in srgb,var(--accent) 55%,transparent); animation:spin 14s linear infinite; transition:box-shadow .3s, transform .2s; }
/* reveal */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
/* readable body */
.lead p, p.lead { font-size:1.2rem; max-width:62ch; }
.callout { background:linear-gradient(90deg,rgba(255,46,147,.18),rgba(34,225,255,.12)); border:1px solid var(--rule); border-radius:14px; padding:1.1rem 1.3rem; margin:1.5rem 0; font-size:1.1rem; color:#fff; }
.callout b { display:block; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.3rem; }
h2 { font-size:3.4rem; }
h2::before { color:var(--accent); }
/* rooms */
.room-tabs { display:flex; flex-wrap:wrap; gap:.6rem; margin:.5rem 0 1rem; }
.rt { font:inherit; font-weight:700; color:#fff; background:var(--panel); border:2px solid var(--c); border-radius:999px; padding:.55rem 1.3rem; cursor:pointer; transition:transform .15s, background .2s, box-shadow .2s; }
.rt:hover { transform:translateY(-2px) rotate(-1deg); }
.rt.active { background:var(--c); color:#111; box-shadow:0 0 26px var(--c); }
.rt.rock { --c:var(--red); } .rt.hiphop { --c:var(--gold); } .rt.electronic { --c:var(--cyan); } .rt.country { --c:var(--orange); }
.room-panel { display:none; background:var(--panel); border:1px solid var(--rule); border-left:6px solid var(--accent); border-radius:14px; padding:1rem 1.4rem; animation:pop .35s ease; }
.room-panel.active { display:block; }
.room-panel h3 { margin:.2rem 0 .4rem; font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; font-size:2.2rem; color:var(--accent); letter-spacing:.03em; }
.room-panel ul { margin:0; padding-left:1.2rem; }
@keyframes pop { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
/* trio + acts */
.trio, .act-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.1rem; margin:1.4rem 0; }
.trio > div, .act { background:var(--panel); border:1px solid var(--rule); border-radius:16px; padding:1.3rem; transition:transform .2s, border-color .2s, box-shadow .2s; }
.trio > div:hover, .act:hover { transform:translateY(-6px) rotate(-.6deg); border-color:var(--pink); box-shadow:0 12px 34px -10px rgba(255,46,147,.5); }
.ic { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#111; background:var(--accent); padding:.2rem .6rem; border-radius:999px; margin-bottom:.7rem; transition:background .3s; }
.trio h3, .act h3 { margin:.1rem 0 .4rem; color:#fff; font-size:1.2rem; }
.trio p, .act p { margin:0; font-size:1rem; }
.act.gold { border-color:var(--gold); background:linear-gradient(160deg,rgba(255,200,61,.2),var(--panel)); }
.rk { width:1.6rem; text-align:center; font-weight:800; color:var(--gold); }
.nm { flex:1; font-weight:700; color:#fff; } .nm small { display:block; color:var(--muted); font-weight:400; font-size:.8rem; }
/* details */
details { background:var(--panel); border:1px solid var(--rule); border-radius:14px; padding:.9rem 1.3rem; margin:1rem 0; }
summary { cursor:pointer; font-weight:700; color:var(--gold); }
details[open] summary { margin-bottom:.6rem; }
@media (max-width:640px) { h2 { font-size:2.6rem; } }
@media (prefers-reduced-motion:reduce) { .eq i, .ticker-track { animation:none; } .reveal { opacity:1; transform:none; } }

.th { width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:top; flex:none; }

/* code snippets */
.snip { margin:1.6rem 0; }
.snip h3 { margin:0 0 .3rem; }
.snip p { margin:0 0 .6rem; color:var(--muted); }
.snip pre { margin:0; padding:1rem 1.1rem; overflow-x:auto; background:#0b0912; border:1px solid var(--rule); border-radius:10px; font-size:.82rem; line-height:1.55; }
.snip code { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:#e8e3f7; white-space:pre; }
.snip-full { font-size:.85rem; }

/* media gallery + lightbox */
.gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.gallery figure { margin:0; }
.gallery img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; display:block; cursor:zoom-in; border:1px solid var(--rule); transition:transform .2s; }
.gallery img:hover { transform:scale(1.015); }
.gallery figcaption { font-size:.95rem; color:var(--muted); margin-top:.45rem; }
@media (max-width:640px) { .gallery { grid-template-columns:1fr; } }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(5,4,10,.92); display:none; align-items:center; justify-content:center; padding:2rem; cursor:zoom-out; flex-direction:column; gap:.8rem; }
.lightbox.open { display:flex; }
.lightbox img { max-width:100%; max-height:calc(100vh - 6rem); border-radius:10px; }
.lightbox p { margin:0; color:var(--text); }
.video-card { margin:1.5rem 0; }
.video-card figcaption { font-size:.95rem; color:var(--muted); margin-top:.45rem; }
.video-card video { width:100%; border-radius:14px; border:1px solid var(--rule); display:block; }
.design-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.design-grid > div { background:var(--panel); border:1px solid var(--rule); border-radius:14px; padding:1rem 1.2rem; }
.design-grid h3 { margin:0 0 .4rem; }
.design-grid ul { margin:0; padding-left:1.1rem; }
@media (max-width:640px) { .design-grid { grid-template-columns:1fr; } }