:root{
  --bg:#08130d;--bg2:#0d2016;--ink:#edf6ef;--muted:#a8b7ab;--line:rgba(237,246,239,.16);
  --green:#89c98f;--amber:#d6a661;--red:#cf7860;--blue:#7bb8dd;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
#world{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:radial-gradient(circle at 50% 20%,#173924,#08130d 72%)}
#fallback-bg{display:none;position:fixed;inset:0;z-index:0;background:
 radial-gradient(circle at 20% 25%,rgba(64,105,76,.42),transparent 25%),
 radial-gradient(circle at 75% 58%,rgba(29,83,52,.36),transparent 30%),
 linear-gradient(#10261a,#08130d)}
.no-webgl #world{display:none}.no-webgl #fallback-bg{display:block}
.topbar{position:fixed;z-index:30;top:0;left:0;right:0;height:76px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(to bottom,rgba(5,16,10,.84),rgba(5,16,10,.18));backdrop-filter:blur(12px)}
.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none}
.mark{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;font-family:Georgia,serif;font-size:24px}
.brand strong{display:block;font-family:Georgia,serif;font-size:20px;font-weight:500}
.brand small,.status,.eyebrow,.rail b,.metric-row small,.scroll-cue,.signal,.future-grid span,.footnote,.media-meta small,.chapter-label small,.sound-legend small{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em}
.brand small{display:block;font-size:8px;color:var(--muted);margin-top:3px}
.topbar-actions{display:flex;gap:12px;align-items:center}
.ghost-btn{appearance:none;border:1px solid rgba(237,246,239,.22);background:rgba(8,19,13,.42);color:var(--ink);padding:10px 14px;border-radius:999px;cursor:pointer;font-size:12px}
.ghost-btn[aria-pressed="true"]{background:rgba(123,184,221,.18);border-color:rgba(123,184,221,.45)}
.status{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:#73c986;box-shadow:0 0 16px #73c986}
.rail{position:fixed;z-index:20;left:28px;top:50%;transform:translateY(-50%);height:310px;display:flex;flex-direction:column;justify-content:space-between}
.rail-line{position:absolute;top:4px;bottom:4px;left:5px;width:1px;background:var(--line)}
.rail button{appearance:none;border:0;background:none;color:#93a59a;position:relative;padding-left:22px;text-align:left;height:20px;cursor:pointer}
.rail button span{position:absolute;left:1px;top:5px;width:9px;height:9px;border-radius:50%;border:1px solid #7e8f84;background:#0c170f;transition:.3s}
.rail b{font-size:7px;font-weight:400;opacity:0;transition:.3s}
.rail button.active span{background:#dff0df;border-color:#dff0df;box-shadow:0 0 16px #85b98a}
.rail button.active b,.rail button:hover b{opacity:1}
main{position:relative;z-index:4}
.chapter{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:36px;align-items:center;padding:120px 8vw 80px 16vw}
.chapter.hero{grid-template-columns:minmax(0,1.1fr) minmax(300px,420px)}
.chapter.finale{grid-template-columns:minmax(0,1fr) 300px}
.copy{padding:34px 38px;background:linear-gradient(135deg,rgba(4,14,8,.74),rgba(4,14,8,.28));border:1px solid rgba(224,242,226,.16);backdrop-filter:blur(12px);box-shadow:0 28px 90px rgba(0,0,0,.22)}
.hero .copy{background:transparent;border:0;backdrop-filter:none;box-shadow:none;padding:0}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:500;line-height:.97;letter-spacing:-.045em;margin:.05em 0 .34em}
h1{font-size:clamp(56px,8vw,118px)} h2{font-size:clamp(42px,5.6vw,78px)}
.copy>p:not(.eyebrow):not(.scroll-cue):not(.footnote){font-size:clamp(16px,1.35vw,22px);line-height:1.65;color:#c5d3c7;max-width:58ch}
blockquote{font-family:Georgia,serif;font-size:25px;line-height:1.45;color:#e7efe8;border-left:2px solid var(--green);padding-left:22px;margin:26px 0 0}
.eyebrow{font-size:10px;color:#a8c7ac;margin:0 0 16px}
.metric-row{display:flex;gap:38px;margin-top:34px}
.metric-row span{display:flex;flex-direction:column}
.metric-row b{font-family:Georgia,serif;font-size:36px;font-weight:500}
.metric-row small{font-size:8px;color:#9cac9f;margin-top:5px}
.scroll-cue{font-size:9px;color:#adc1b0;margin-top:42px}
.signal{margin-top:28px;display:flex;align-items:center;gap:10px;font-size:9px;color:#d8c48c}
.signal i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 18px var(--amber)}
.signal.danger{color:#eaa18f}.signal.danger i{background:var(--red);box-shadow:0 0 18px var(--red)}
.signal.good{color:#a6de9c}.signal.good i{background:var(--green);box-shadow:0 0 18px var(--green)}
.media-card{align-self:center;background:linear-gradient(135deg,rgba(7,18,12,.88),rgba(7,18,12,.42));border:1px solid rgba(224,242,226,.16);box-shadow:0 24px 80px rgba(0,0,0,.24);backdrop-filter:blur(10px);overflow:hidden}
.media-shell{aspect-ratio:4/5;position:relative;background:linear-gradient(135deg,#102218,#1a3022)}
.media-shell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.media-shell.ready img{display:block}
.media-shell.ready .placeholder{display:none}
.placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#bed3c0;font-size:12px;text-align:center;padding:18px;background:
 linear-gradient(145deg,rgba(19,41,28,.9),rgba(11,22,16,.9)),
 radial-gradient(circle at 30% 30%,rgba(123,184,221,.12),transparent 35%)}
.media-meta{padding:16px 18px 18px}
.media-meta small{display:block;font-size:8px;color:#94aea0;margin-bottom:8px}
.media-meta strong{display:block;font-family:Georgia,serif;font-size:24px;font-weight:500;margin-bottom:8px}
.media-meta p{margin:0;color:#b6c7b9;line-height:1.55;font-size:14px}
.hero-card{margin-top:80px}
.future-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:28px 0}
.future-grid span{border:1px solid var(--line);padding:18px;font-size:10px;color:#d9e7db}
.footnote{font-size:8px!important;color:#7f9082!important;margin-top:24px}
.sound-legend{padding:22px;background:rgba(7,18,12,.62);border:1px solid rgba(224,242,226,.14)}
.sound-legend ul{margin:12px 0 0;padding-left:18px;color:#c8d5ca;line-height:1.6}
.chapter-label{position:fixed;z-index:18;right:28px;bottom:24px;text-align:right;color:#b7c5b9}
.chapter-label small{display:block;font-size:8px;margin-bottom:4px}
.chapter-label strong{font-family:Georgia,serif;font-weight:500;font-size:18px}
@media (max-width:980px){
  .chapter,.chapter.hero,.chapter.finale{grid-template-columns:1fr;gap:24px;padding:100px 22px 60px 54px}
  .hero-card{margin-top:0}
}
@media (max-width:760px){
  .topbar{height:64px;padding:0 14px}
  .status{display:none}
  .mark{width:34px;height:34px}
  .brand strong{font-size:17px}
  .ghost-btn{padding:9px 12px;font-size:11px}
  .rail{left:12px;height:250px}
  .rail b{display:none}
  .chapter,.chapter.hero,.chapter.finale{padding:88px 18px 54px 40px}
  .copy{padding:24px}
  .hero .copy{padding:0}
  .chapter-label{right:14px;bottom:14px}
  h1{font-size:clamp(48px,16vw,78px)} h2{font-size:clamp(40px,12vw,60px)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.dot{box-shadow:none}}

.audio-credits{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:#93a69a}.audio-credits small{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;font-size:8px}.audio-credits p{font-size:11px;line-height:1.55;margin:8px 0 0}

.sound-status{font:8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#8fa496;min-width:56px}
.sound-status.ok{color:#a8dfa3}.sound-status.warn{color:#e0ba76}.sound-status.error{color:#e4917f}