:root{--navy:#0B1F3A;--navy2:#112a4d;--red:#E63946;--teal:#2EC4B6;--sand:#F4EDE4;}
html{scroll-behavior:smooth}
body{margin:0;font-family:'IBM Plex Sans',sans-serif;background:var(--navy);color:#e9eef5}
.serif{font-family:'Fraunces',serif}
.mono{font-family:'JetBrains Mono',monospace}
.dots{background-image:radial-gradient(rgba(46,196,182,.18) 1px,transparent 1px);background-size:22px 22px}
.grid-lines{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:60px 60px}
.glass{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px)}
.sand{background:var(--sand);color:var(--navy)}
.reveal{opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@keyframes pulseDot{0%,100%{opacity:.4;r:3}50%{opacity:1;r:5}}
.isle{animation:pulseDot 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.float{animation:float 5s ease-in-out infinite}
@keyframes dash{to{stroke-dashoffset:-40}}
.flow{stroke-dasharray:6 6;animation:dash 1.2s linear infinite}
.flow.rev{animation-direction:reverse}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.stag>*{animation:fadeUp .9s both}
.stag>*:nth-child(2){animation-delay:.15s}.stag>*:nth-child(3){animation-delay:.3s}.stag>*:nth-child(4){animation-delay:.45s}.stag>*:nth-child(5){animation-delay:.6s}
.hscroll{scroll-snap-type:x mandatory}.hscroll>*{scroll-snap-align:start}
.hscroll::-webkit-scrollbar{height:6px}.hscroll::-webkit-scrollbar-thumb{background:var(--teal);border-radius:3px}
input[type=range]{accent-color:var(--red);width:100%}
.ribbon{position:absolute;top:14px;right:-34px;transform:rotate(45deg);background:var(--red);color:#fff;font-size:10px;padding:3px 40px;letter-spacing:.1em}
@media print{header,.noprint{display:none!important}body{background:#fff;color:#000}}