@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=Manrope:wght@300;400;600&display=swap');

:root{color-scheme:dark;--ink:#f1eee8;--acid:#b9ff4f;--violet:#9b70ff;--void:#05050a;--pad:clamp(24px,5vw,76px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--void)}body{margin:0;background:var(--void);color:var(--ink);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}body::after{content:"";position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 16vw #020205;z-index:2}
#portal{position:fixed;inset:0;width:100%;height:100%;z-index:0;background:radial-gradient(circle,#171229,#05050a 70%)}.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");animation:grain .22s steps(2) infinite}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(2%,1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,-2%)}to{transform:translate(-2%,-1%)}}
.no-webgl #portal{background:radial-gradient(circle at 50% 45%,#382169 0,#120b24 18%,#05050a 62%)}
.masthead{position:fixed;z-index:10;left:0;right:0;top:0;padding:26px var(--pad);display:flex;align-items:center;justify-content:space-between;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em}.mark{color:var(--ink);text-decoration:none;font-size:16px;font-weight:600}.mark span{color:var(--acid);padding:0 3px}.depth{position:absolute;left:50%;transform:translateX(-50%);opacity:.6}.sound{border:0;background:none;color:var(--ink);font:inherit;letter-spacing:inherit;cursor:pointer;padding:10px}.sound i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#777;margin-right:8px}.sound[aria-pressed="true"] i{background:var(--acid);box-shadow:0 0 12px var(--acid);animation:pulse 1s infinite alternate}@keyframes pulse{to{transform:scale(1.8)}}
main{position:relative;z-index:3}.chapter{min-height:130vh;padding:18vh var(--pad);display:flex;position:relative}.hero{min-height:110vh;align-items:center;justify-content:center;text-align:center;flex-direction:column}.eyebrow,.index{font:400 10px/1.4 "DM Mono",monospace;letter-spacing:.3em;color:var(--acid)}h1,h2{margin:0;font-weight:300;letter-spacing:-.065em;line-height:.82}h1{font-size:clamp(70px,14vw,210px);filter:drop-shadow(0 10px 50px #000)}h1 em,h2 em{font:italic 300 1em Georgia,serif;color:transparent;-webkit-text-stroke:1px var(--ink)}.lede{font-size:clamp(13px,1.3vw,18px);line-height:1.7;opacity:.65;margin:35px 0}.enter{position:absolute;bottom:8vh;color:var(--ink);text-decoration:none;font:10px "DM Mono",monospace;letter-spacing:.22em;display:flex;gap:18px;align-items:center}.enter b{color:var(--acid);font-size:24px;animation:fall 1.2s ease-in-out infinite}@keyframes fall{50%{transform:translateY(10px)}}
.copy{max-width:850px}.align-right{justify-content:flex-end;align-items:center;text-align:right}.align-left{align-items:center}.center{align-items:center;justify-content:center;text-align:center}.copy h2,.finale h2{font-size:clamp(52px,8vw,132px)}.copy>p:last-child{max-width:480px;font-size:clamp(14px,1.4vw,19px);line-height:1.8;opacity:.6;margin-top:30px}.align-right .copy>p:last-child{margin-left:auto}.center .copy>p:last-child{margin-left:auto;margin-right:auto}.index{margin-bottom:26px}
.finale{min-height:110vh;align-items:center;justify-content:center;flex-direction:column;text-align:center}.finale button{margin-top:60px;border:1px solid #ffffff55;color:var(--ink);background:#05050a88;backdrop-filter:blur(8px);padding:18px 25px;font:10px "DM Mono",monospace;letter-spacing:.2em;cursor:pointer;transition:.3s}.finale button:hover{background:var(--ink);color:var(--void);transform:scale(1.04)}.finale button span{color:var(--violet);font-size:17px;margin-left:14px}.colophon{position:absolute;bottom:40px;opacity:.4;font:9px "DM Mono",monospace;letter-spacing:.15em}
.rail{position:fixed;z-index:10;right:calc(var(--pad)/2);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:12px;writing-mode:vertical-rl;font:9px "DM Mono",monospace;letter-spacing:.2em}.rail span{opacity:.55}.rail i{height:120px;width:1px;background:#ffffff22;position:relative}.rail b{position:absolute;top:0;left:0;width:1px;height:0;background:var(--acid);box-shadow:0 0 8px var(--acid)}.rail small{color:var(--acid)}.nojs{position:relative;z-index:20;padding:100px var(--pad)}
@media(max-width:600px){.masthead{padding-top:max(20px,env(safe-area-inset-top))}.depth{display:none}.rail{right:12px}.chapter{min-height:115vh;padding:14vh 34px}.hero{min-height:100svh}h1{font-size:clamp(62px,21vw,96px)}.align-right{text-align:left}.align-right .copy>p:last-child{margin-left:0}.copy h2,.finale h2{font-size:clamp(47px,15vw,76px)}.sound{font-size:0}.sound i{margin:0;width:7px;height:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.grain,.enter b{animation:none}.chapter{min-height:100vh}}
.fracture{color:var(--acid);background:none;border:0;font:10px "DM Mono",monospace;letter-spacing:.18em;padding:10px;cursor:pointer;opacity:.8;transition:opacity .2s,transform .2s}.fracture:hover,.fracture:focus-visible{opacity:1;transform:scale(1.06)}.fracture span{font-size:16px;vertical-align:-1px}