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

:root { --ink:#031017; --cyan:#21bdd0; --gold:#d6a64c; --green:#53a86a; --white:#f4f6f2; }
* { box-sizing:border-box; }
html { background:var(--ink); scroll-behavior:smooth; }
body { margin:0; color:var(--white); background:var(--ink); font-family:"DM Sans",sans-serif; overflow-x:hidden; }
.embedded body { overflow:hidden; }
.embedded .hero { min-height:100vh; height:100vh; overflow:hidden; }
.embedded .visual { position:absolute; }
.embedded .story { position:absolute; inset:0; height:100vh; }
.embedded .chapter { position:absolute; inset:0; min-height:100vh; }
.hero { min-height:260vh; position:relative; background:radial-gradient(circle at 65% 30%,#082833 0,#031017 45%,#02080d 100%); }
.visual { position:fixed; inset:0; height:100vh; overflow:hidden; pointer-events:none; }
#webgl { display:block; width:100%; height:100%; }
.visual-vignette { position:absolute; inset:0; background:linear-gradient(90deg,rgba(1,8,12,.88) 0%,rgba(1,8,12,.25) 38%,transparent 58%),radial-gradient(ellipse at center,transparent 48%,rgba(1,7,11,.58) 100%); }
.noise { position:absolute; inset:0; opacity:.035; 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 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"); mix-blend-mode:soft-light; }
.site-header { position:fixed; z-index:20; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:28px clamp(24px,5vw,80px); pointer-events:none; }
.brand { color:white; text-decoration:none; display:flex; align-items:center; pointer-events:auto; }
.brand img { display:block; width:clamp(150px,12vw,218px); height:auto; object-fit:contain; opacity:.94; }
.header-note { color:rgba(255,255,255,.45); text-transform:uppercase; font-size:9px; letter-spacing:.25em; }
.story { position:relative; z-index:5; width:100%; }
.chapter { min-height:130vh; display:flex; flex-direction:column; justify-content:center; padding:12vh clamp(24px,7vw,112px); max-width:min(680px,52vw); opacity:0; transform:translateY(24px); transition:opacity .25s linear,transform .4s ease; }
.chapter-human { opacity:1; transform:none; }
.chapter-cell { margin-left:0; padding-left:clamp(24px,7vw,112px); padding-right:0; max-width:min(680px,48vw); }
.eyebrow { color:rgba(255,255,255,.55); font-size:10px; letter-spacing:.26em; text-transform:uppercase; display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.eyebrow:after { content:""; width:52px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }.eyebrow span{color:var(--gold);font-size:12px}
h1,h2 { font-family:"Manrope",sans-serif; font-size:clamp(38px,4.4vw,72px); font-weight:300; line-height:1.08; letter-spacing:-.045em; margin:0; text-wrap:balance; }
h1 em,h2 em { color:var(--gold); font-style:normal; }
.chapter p { max-width:430px; color:rgba(241,246,244,.68); font-size:clamp(14px,1.05vw,17px); line-height:1.75; margin:30px 0 0; }
.scroll-cue { position:fixed; z-index:6; left:clamp(24px,5vw,80px); bottom:34px; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.42); font-size:9px; text-transform:uppercase; letter-spacing:.25em; transition:opacity .3s; }.scroll-cue i{width:42px;height:1px;background:rgba(255,255,255,.24);position:relative;overflow:hidden}.scroll-cue i:after{content:"";position:absolute;width:12px;height:1px;background:var(--gold);animation:scan 1.8s infinite ease-in-out}@keyframes scan{from{transform:translateX(-12px)}to{transform:translateX(44px)}}
.progress { position:fixed; z-index:8; right:clamp(18px,3vw,45px); top:50%; transform:translateY(-50%); height:150px; width:58px; border-left:1px solid rgba(255,255,255,.15); display:flex; flex-direction:column; justify-content:space-between; padding-left:12px; color:rgba(255,255,255,.3); font-size:8px; letter-spacing:.16em; }.progress b{position:absolute;left:-1px;top:0;width:1px;height:var(--progress,0%);background:linear-gradient(var(--gold),var(--cyan));transition:height .1s linear}.progress span:last-child{color:var(--cyan)}
.fallback-note{position:fixed;right:18px;bottom:14px;z-index:10;font-size:10px;color:#ffffff66}
@media (max-width:760px){.hero{min-height:230vh}.site-header{padding:20px}.brand img{width:152px}.header-note{display:none}.visual-vignette{background:linear-gradient(0deg,rgba(1,8,12,.9),transparent 60%),radial-gradient(ellipse at center,transparent 30%,rgba(1,7,11,.55))}.chapter,.chapter-cell{min-height:115vh;max-width:none;margin:0;padding:52vh 24px 12vh;justify-content:flex-end}.chapter-cell{padding-top:48vh}h1,h2{font-size:clamp(34px,10.5vw,48px)}.chapter p{font-size:14px;max-width:330px;margin-top:20px}.eyebrow{margin-bottom:18px}.progress{display:none}.scroll-cue{left:24px;bottom:20px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero{min-height:100vh}.chapter-cell,.scroll-cue,.progress{display:none}.chapter-human{min-height:100vh}.noise{display:none}}