/* EonContinuum — cinematic interface, standalone and dependency-free. */
:root{color-scheme:dark;--bg:#030611;--white:#f5f5ff;--muted:#b3b8d1;--dim:#858ea9;--line:rgba(181,194,255,.17);--ice:#77e5ff;--lav:#b7a3ff;--pink:#f4a5d2;--gold:#f8d7a7;font-family:"DM Sans",system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--white)}html{scroll-behavior:smooth}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--ice);outline-offset:5px}::selection{background:#98b9fd55;color:white}[hidden]{display:none!important}
.skip-link{position:fixed;z-index:40;top:-70px;left:20px;background:var(--white);color:#000;padding:10px 16px}.skip-link:focus{top:10px}
.app{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 65% 38%,#171035 0%,#090b22 27%,#030611 67%)}
#scene,.space-backdrop,.star-noise,.edge-vignette,.scene-flash{position:absolute;inset:0;pointer-events:none}
#scene{z-index:0;overflow:hidden;touch-action:pan-y}#scene canvas{display:block;width:100%;height:100%;pointer-events:auto;touch-action:none}
.space-backdrop{z-index:0;background:radial-gradient(ellipse 42% 36% at 68% 45%,#36307a70,transparent 78%),radial-gradient(ellipse 28% 30% at 78% 70%,#08709b42,transparent 75%),radial-gradient(ellipse 32% 45% at 46% 37%,#2a145366,transparent 80%)}
.star-noise{z-index:1;opacity:.46;background-image:radial-gradient(1px 1px at 3% 6%,#fff 90%,transparent),radial-gradient(1px 1px at 14% 30%,#a6e8ff 90%,transparent),radial-gradient(1.3px 1.3px at 43% 19%,#fff 90%,transparent),radial-gradient(1px 1px at 67% 26%,#fff 90%,transparent),radial-gradient(1px 1px at 91% 74%,#a6e8ff 90%,transparent),radial-gradient(1px 1px at 73% 63%,#ffcfc1 90%,transparent);background-size:271px 267px,313px 341px,251px 281px,349px 319px,293px 317px,367px 319px}
.edge-vignette{z-index:2;background:linear-gradient(90deg,#030611e8 0%,#030611b3 26%,transparent 62%),linear-gradient(0deg,#030611f9 0%,transparent 28%,transparent 80%,#0306117c 100%),radial-gradient(ellipse at center,transparent 25%,#0306114f 96%);opacity:.91}
.scene-flash{z-index:3;opacity:0;background:radial-gradient(ellipse at 66% 49%,#b29bff44,transparent 45%);transition:opacity .26s ease}.scene-flash.is-switching{opacity:1}
.topbar{height:96px;position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(24px,3.4vw,72px);border-bottom:1px solid #dfe6ff16}
.wordmark{display:flex;align-items:center;gap:12px;font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:700;letter-spacing:.06em;white-space:nowrap}.wordmark-light{font-weight:400;color:#ccd5fa}.wordmark small{display:block;margin-top:3px;font:600 8px "DM Sans",sans-serif;letter-spacing:.38em;color:#878da8}.logo-symbol{width:34px;height:34px;display:grid;place-items:center;position:relative;border:1px solid #b7a3ff88;border-radius:50%;transform:rotate(-32deg);box-shadow:0 0 26px #8670ff44}.logo-symbol:before,.logo-symbol:after,.logo-symbol span{content:"";display:block;position:absolute;border-radius:50%}.logo-symbol:before{width:26px;height:10px;border:1.4px solid #98baff;transform:rotate(67deg)}.logo-symbol:after{width:6px;height:6px;background:#c5bdff;box-shadow:0 0 12px #ad96ff}.logo-symbol span{width:14px;height:29px;border:1px solid #98baff78;transform:rotate(-25deg)}
.header-center{display:flex;align-items:center;gap:12px;color:#a4a9c5;letter-spacing:.22em;font-size:9px;font-weight:700;white-space:nowrap}.signal-dot,.status-dot,.pulse{width:5px;height:5px;background:#93ebff;border-radius:50%;box-shadow:0 0 10px #86dfff;display:inline-block;flex:none}.header-controls{display:flex;gap:12px;align-items:center}.ghost-button,.icon-button{height:36px;color:#eff2ff;border:1px solid #c8c9ed30;background:#090c2580;border-radius:4px;transition:background .2s,border-color .2s}.ghost-button{padding:0 16px;font-size:9px;letter-spacing:.15em;font-weight:700}.ghost-button span{margin-left:6px;color:var(--ice)}.ghost-button:hover,.icon-button:hover{background:#49407a66;border-color:#9aa3f580}.icon-button{width:38px;display:grid;place-items:center}.icon-button svg{width:17px;height:17px}
.story{position:relative;z-index:5;padding-left:clamp(24px,8vw,160px);padding-top:clamp(74px,12vh,155px);max-width:min(830px,67vw);min-height:calc(100svh - 300px)}.chapter-flag{display:flex;align-items:center;gap:14px;color:#bfc0da;letter-spacing:.25em;font-size:10px;font-weight:700}.chapter-line{width:30px;height:1px;background:#b8b4ee}.story-pretitle{margin:37px 0 13px;color:var(--ice);font:700 11px "Space Grotesk",sans-serif;letter-spacing:.36em;text-shadow:0 0 18px #75c5ff8c}.story h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(59px,6.6vw,126px);font-weight:600;letter-spacing:-.073em;line-height:.97;margin:0;max-width:880px;text-transform:uppercase;text-shadow:0 7px 68px #0c0837b0;overflow-wrap:normal}.story h1 em{font-style:normal;background:linear-gradient(100deg,#e4e6ff 0%,#a5bfff 32%,#a598ff 68%,#efbef4 98%);-webkit-background-clip:text;background-clip:text;color:transparent}.story-description{max-width:455px;font-size:clamp(13px,1.03vw,17px);line-height:1.85;color:#c3c8df;margin:27px 0 32px;text-wrap:pretty}.story-actions{display:flex;align-items:center;gap:27px;flex-wrap:wrap}.primary-button{display:inline-flex;align-items:center;gap:13px;min-height:51px;padding:0 24px;background:#f4f1ff;color:#121429;border:1px solid white;border-radius:3px;font:700 11px "Space Grotesk",sans-serif;letter-spacing:.13em;box-shadow:0 0 30px #b3a9ff26;transition:transform .18s,box-shadow .18s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 9px 46px #b3a9ff55}.button-icon{color:#7464d2;font-size:17px}.button-arrow{margin-left:7px;font-size:16px}.text-button{color:#dde9ff;background:none;border:0;border-bottom:1px solid #b3c7fb8c;padding:10px 0;font:700 10px "Space Grotesk",sans-serif;letter-spacing:.16em}.text-button span{margin-left:9px;color:var(--ice)}.text-button:hover{color:white}
.left-dash{position:absolute;left:clamp(28px,3.3vw,64px);top:22%;z-index:4;display:flex;flex-direction:column;gap:20px;align-items:center;color:#9294bb;font:600 9px "Space Grotesk",sans-serif;letter-spacing:.21em;writing-mode:vertical-rl;transform:rotate(180deg)}.dash-stem{width:1px;height:70px;background:linear-gradient(transparent,#a4a2d788,transparent)}
.scene-caption{position:absolute;z-index:4;right:clamp(28px,3.4vw,72px);top:calc(50% + 150px);display:flex;align-items:center;gap:9px;color:#a6acc7;font:600 9px "Space Grotesk",sans-serif;letter-spacing:.16em}.crosshair{font-size:18px;color:var(--ice)}.caption-separator{padding:0 6px;color:#7c7f98}
.scale-panel{position:absolute;z-index:5;right:clamp(26px,3.4vw,72px);top:clamp(126px,20vh,205px);width:clamp(232px,18vw,305px);padding:24px;background:linear-gradient(145deg,#13132fbb,#0b0c26aa);border:1px solid #b8b8fa34;backdrop-filter:blur(22px);box-shadow:0 20px 70px #0005,0 0 42px #725dce12}.panel-top{display:flex;align-items:center;justify-content:space-between;color:#b5b6d1;font-size:9px;font-weight:700;letter-spacing:.19em}.panel-orbit{font-size:26px;line-height:1;color:#a8a9ff}.metric-value{font:600 clamp(23px,2.3vw,38px) "Space Grotesk",sans-serif;letter-spacing:-.045em;margin-top:25px;line-height:1.1;color:#fff;white-space:nowrap}.metric-unit{font:700 10px "Space Grotesk",sans-serif;letter-spacing:.23em;color:var(--ice);margin-top:12px}.metric-divider{height:1px;background:var(--line);margin:25px 0}.fact-label{font-size:9px;font-weight:700;letter-spacing:.15em;color:#939ac0}.scale-fact{font-size:13px;line-height:1.8;color:#d7daf2;margin:14px 0 18px}.reference-link{font-size:9px;font-weight:700;letter-spacing:.1em;color:#92dfff;border-bottom:1px solid #7cd7fa64;padding-bottom:4px}
.chapter-rail{position:absolute;z-index:6;top:50%;right:clamp(29px,3.4vw,72px);transform:translateY(-18%);display:none}.rail-heading{font-size:10px}.chapter-nav{display:grid}
.bottom-console{position:relative;z-index:8;margin:clamp(46px,8vh,95px) clamp(20px,3.4vw,72px) 0;min-height:111px;padding:18px 25px;display:grid;grid-template-columns:minmax(148px,238px) minmax(320px,1fr) 162px;align-items:center;gap:32px;background:linear-gradient(110deg,#0a0d20e8,#10112de6,#090d1de8);border:1px solid #b8b9ef38;border-radius:3px;backdrop-filter:blur(30px);box-shadow:0 20px 75px #0005}
.console-meta{display:grid;grid-template-columns:1fr;gap:3px}.console-eyebrow{font:700 9px "Space Grotesk",sans-serif;letter-spacing:.2em;color:#a3acc8;display:flex;gap:9px;align-items:center}.console-meta strong{font:600 31px "Space Grotesk",sans-serif;letter-spacing:-.03em;margin-top:5px}.console-meta strong span{font-size:14px;color:#5f6485;font-weight:400}.console-meta>span:last-child{font:600 9px "Space Grotesk",sans-serif;letter-spacing:.12em;color:#acb2d2}.timeline-title,.timeline-labels{display:flex;align-items:center;justify-content:space-between;font:700 9px "Space Grotesk",sans-serif;letter-spacing:.13em;color:#b1b9d4}.timeline-title{margin-bottom:14px}.timeline-labels{margin-top:10px;color:#727b9a;font-size:8px}.scale-tracks{display:flex;gap:7px;height:20px;align-items:center}.scale-tracks button{position:relative;flex:1;border:0;background:#0000;height:30px;padding:0;display:flex;align-items:center}.scale-tracks button span{height:3px;width:100%;background:#434960;display:block;transition:background .23s,box-shadow .23s}.scale-tracks button.visited span{background:linear-gradient(90deg,#858ce4,#baabff)}.scale-tracks button.active span{background:#9eedff;box-shadow:0 0 14px #84d9ff}.scale-tracks button.active:after{content:"";position:absolute;top:50%;right:0;width:9px;height:9px;border-radius:50%;background:#9eedff;box-shadow:0 0 20px #80dfff;transform:translate(3px,-50%)}.scale-tracks button:hover span{background:#d2ecff}
.transport-controls{display:flex;justify-content:flex-end;gap:8px}.transport-button{border:1px solid #929bc85c;background:#181b37;color:#e7eaff;border-radius:2px;width:44px;height:44px;font-size:20px;transition:background .2s,transform .2s}.transport-button:hover{background:#32345b;transform:translateY(-2px)}.play-button{border-color:#aaabff;background:#aaaff7;color:#0a0c1e;font-size:14px}.play-button:hover{background:#dde5ff}.transport-button:disabled{opacity:.27;cursor:not-allowed;transform:none}
.footer-credit{position:relative;z-index:6;padding:15px clamp(22px,3.6vw,74px) 18px;display:flex;justify-content:space-between;gap:10px;font:600 8px "Space Grotesk",sans-serif;color:#7983a2;letter-spacing:.16em}.footer-credit>span:first-child{display:flex;align-items:center;gap:8px}.footer-credit .status-dot{width:5px;height:5px}.dot-divider{margin:0 5px;color:#b9bcdf}.mobile-hint{display:none}
.modal-shade{position:fixed;inset:0;z-index:30;background:#02030dd9;backdrop-filter:blur(16px);display:grid;place-items:center;padding:22px;overflow:auto}.about-modal{position:relative;width:min(630px,100%);max-height:min(90vh,850px);overflow:auto;padding:clamp(28px,5vw,60px);background:linear-gradient(155deg,#161839,#090e22);border:1px solid #858eda79;box-shadow:0 0 100px #343e9560}.modal-close{position:absolute;top:17px;right:22px;color:#c7cfff;background:none;border:0;font-size:30px}.modal-eyebrow{font:700 10px "Space Grotesk",sans-serif;letter-spacing:.18em;color:var(--ice)!important}.about-modal h2{font:600 clamp(35px,5vw,61px)/1.06 "Space Grotesk",sans-serif;letter-spacing:-.05em;margin:22px 0 23px}.about-modal h2 em{font-style:normal;color:#b3afff}.about-modal p{font-size:14px;line-height:1.9;color:#c7cde5}.about-modal strong{color:white}.modal-references{display:flex;flex-wrap:wrap;gap:12px 20px;margin:24px 0 30px}.modal-references a{font-size:12px;color:#9adffa;text-decoration:underline;text-underline-offset:5px}.modal-action{margin-top:5px}
@media(min-width:1600px){.story{padding-top:clamp(130px,16vh,260px);min-height:calc(100svh - 260px)}.bottom-console{margin-top:0}.scale-panel{top:23vh}.scene-caption{top:67%}}
@media(max-width:1200px){.header-center{display:none}.story{max-width:67vw}.story h1{font-size:clamp(56px,6.9vw,92px)}.scale-panel{width:235px;right:24px;top:145px;padding:20px}.scale-fact{font-size:12px}.bottom-console{grid-template-columns:158px minmax(230px,1fr) 154px;gap:20px}.story-description{max-width:360px}}
@media(max-width:850px){.topbar{height:72px;padding:0 23px}.wordmark{font-size:15px}.wordmark small{font-size:7px}.logo-symbol{height:30px;width:30px}.story{min-height:auto;padding:75px 25px 0;max-width:100%;}.story h1{font-size:clamp(52px,10vw,85px);max-width:600px}.story-description{max-width:430px}.left-dash{display:none}.scale-panel{position:relative;right:auto;top:auto;width:auto;max-width:560px;margin:85px 24px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.panel-top{grid-column:1/-1}.metric-value{font-size:28px;margin-top:13px;grid-column:1}.metric-unit{grid-column:1;margin-top:0}.metric-divider{display:none}.fact-label{grid-column:2;grid-row:2}.scale-fact{grid-column:2;grid-row:3/5;margin:0}.reference-link{grid-column:2}.scene-caption{top:auto;bottom:210px;right:24px}.bottom-console{margin:85px 20px 0;grid-template-columns:1fr 148px;gap:18px;padding:18px}.console-meta{grid-column:1;grid-row:1}.scale-controls{grid-column:1/-1;grid-row:2}.transport-controls{grid-column:2;grid-row:1}.footer-credit{padding:18px 22px}}
@media(max-width:600px){.app{min-height:100svh}.edge-vignette{background:linear-gradient(0deg,#030611ff 0%,#030611a3 40%,transparent 82%),linear-gradient(90deg,#0306118c,transparent 65%)}.space-backdrop{background:radial-gradient(ellipse 68% 39% at 65% 39%,#3231809c,transparent 90%),radial-gradient(ellipse 65% 40% at 60% 50%,#154c9480,transparent)}.topbar{padding:0 17px;height:67px}.wordmark{gap:8px;font-size:13px}.wordmark small{font-size:6px;letter-spacing:.22em}.logo-symbol{width:27px;height:27px}.ghost-button{font-size:9px;padding:0 10px;height:34px}.desktop-only{display:none}.header-controls{gap:6px}.icon-button{width:34px;height:34px}.story{padding:clamp(310px,47svh,460px) 23px 0;min-height:auto}.chapter-flag{font-size:8px;letter-spacing:.14em;gap:9px}.chapter-line{width:21px}.story-pretitle{margin:15px 0 9px;font-size:9px;letter-spacing:.28em}.story h1{font-size:clamp(46px,10.7vw,72px);letter-spacing:-.075em;line-height:.99}.story-description{font-size:13px;line-height:1.66;max-width:360px;margin:16px 0 21px}.story-actions{gap:15px}.primary-button{min-height:43px;font-size:9px;padding:0 15px;gap:8px}.button-icon{font-size:12px}.text-button{font-size:9px}.scale-panel{margin:26px 20px 0;padding:16px 18px;grid-template-columns:1fr 1.2fr;gap:5px 10px}.panel-top{font-size:8px}.panel-orbit{font-size:20px}.metric-value{font-size:clamp(21px,6vw,27px);white-space:normal}.metric-unit{font-size:8px;letter-spacing:.11em}.fact-label{font-size:8px;line-height:1.4}.scale-fact{font-size:10px;line-height:1.55}.reference-link{font-size:8px;margin-top:5px}.scene-caption{display:none}.bottom-console{margin:18px 13px 0;padding:13px;gap:15px 7px;grid-template-columns:1fr 139px}.console-eyebrow{font-size:8px;letter-spacing:.1em}.console-meta strong{font-size:25px}.console-meta>span:last-child{font-size:8px;letter-spacing:.08em}.transport-controls{gap:5px}.transport-button{width:39px;height:39px;font-size:18px}.play-button{font-size:13px}.timeline-title{font-size:8px}.scale-tracks{gap:5px}.footer-credit{padding:13px 18px;justify-content:center;flex-wrap:wrap;font-size:7px;line-height:1.5;text-align:center}.footer-credit>span:last-child{display:none}.mobile-hint{display:block;position:relative;z-index:4;text-align:center;color:#777e9c;font-size:8px;letter-spacing:.13em;padding-bottom:18px}}
@media(max-width:360px){.wordmark{font-size:11px}.story h1{font-size:41px}.story{padding-top:45svh}.scale-panel{grid-template-columns:1fr}.metric-value,.metric-unit,.fact-label,.scale-fact,.reference-link{grid-column:1;grid-row:auto}.fact-label{margin-top:10px}.bottom-console{grid-template-columns:1fr 128px}.transport-button{width:35px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}