*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-snap-type:y mandatory;scroll-behavior:smooth}
body{background:#0A1F12;color:#A8B5A0;font-family:'Jost',sans-serif;font-weight:300;overflow-x:hidden}
#particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}
.spread{position:relative;z-index:2;height:100vh;scroll-snap-align:start;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:60px 48px}

.s1{background:#0A1F12;align-items:flex-start;justify-content:flex-end;padding-bottom:15vh}
.horizon-line{position:absolute;top:33%;left:0;width:100%;height:1px;background:#2D5F3A;opacity:.4}
.title{font-family:'Jost',sans-serif;font-weight:600;font-size:clamp(3rem,10vw,8rem);color:#E8EDE4;letter-spacing:.15em;line-height:1}
.title .a{color:#4ECB71}
.typewriter{font-family:'Source Code Pro',monospace;font-size:.85rem;color:#A8B5A0;line-height:2;margin-top:16px;min-height:1.7em}
.typewriter::after{content:'';display:inline-block;width:.6em;height:1.1em;background:#4ECB71;vertical-align:text-bottom;animation:blink 1s step-end infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}

.s2{background:radial-gradient(ellipse at center,#132E1C 0%,#0A1F12 70%);flex-direction:row;gap:40px;align-items:center}
.panel-left{flex:0 0 60%;position:relative;height:60%;display:flex;align-items:center;justify-content:center}
.geo{position:absolute;border:1.5px solid #3BA89E;opacity:.45;pointer-events:none}
.geo-circle{width:200px;height:200px;border-radius:50%;top:10%;left:15%}
.geo-hex{width:120px;height:120px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);top:40%;left:50%;border-color:#2D5F3A}
.geo-tri{width:150px;height:130px;clip-path:polygon(50% 0%,100% 100%,0% 100%);bottom:10%;left:30%;border-color:#4ECB71;opacity:.25}
.grid-overlay{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(45,95,58,.08) 39px,rgba(45,95,58,.08) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(45,95,58,.08) 39px,rgba(45,95,58,.08) 40px);mask-image:radial-gradient(ellipse at center,black 40%,transparent 70%)}
.panel-right{flex:1;border-left:1px solid #2D5F3A;padding-left:32px}
.body-text{font-family:'Jost',sans-serif;font-weight:300;font-size:1rem;color:#A8B5A0;line-height:1.75;letter-spacing:.02em;max-width:420px}

.s3{background:#0A1F12;padding:48px}
.archive-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:16px;max-width:900px;margin:0 auto;width:100%}
.artifact{background:#132E1C;border:1px solid rgba(45,95,58,.25);padding:32px;border-radius:2px;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.artifact code{font-family:'Source Code Pro',monospace;font-size:.85rem;color:#4ECB71;line-height:2;display:block}
.artifact .tag{font-family:'Source Code Pro',monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#D4A843;display:block;margin-bottom:8px}
.artifact h2{font-family:'Jost',sans-serif;font-weight:600;font-size:1.3rem;color:#E8EDE4;margin-bottom:12px}
.geo-diagram{display:flex;align-items:center;justify-content:center;height:100%}
.dia-circle{width:80px;height:80px;border-radius:50%;border:1.5px solid #3BA89E;opacity:.5}
.dia-line{width:1px;height:120px;background:#2D5F3A;opacity:.4;margin-left:-40px}

.s4{background:#0A1F12;align-items:center}
.transmission{max-width:560px;width:100%;border-left:1px solid rgba(45,95,58,.2);border-right:1px solid rgba(45,95,58,.2);padding:40px 32px}
.tx-line{font-family:'Source Code Pro',monospace;font-size:.85rem;color:#A8B5A0;line-height:2;opacity:0}

.s5{background:#0A1F12;align-items:center;justify-content:center}
.cursor-block{width:.6em;height:1.1em;background:#4ECB71;animation:blink 1s step-end infinite}
.end-text{font-family:'Jost',sans-serif;font-weight:600;font-size:1rem;letter-spacing:.3em;text-transform:uppercase;color:#E8EDE4;opacity:0;margin-top:24px;transition:opacity 1s ease}

@media(max-width:768px){
  .s2{flex-direction:column;padding:40px 24px}
  .panel-left{flex:none;width:100%;height:40vh}
  .panel-right{border-left:none;border-top:1px solid #2D5F3A;padding-left:0;padding-top:24px}
  .archive-grid{grid-template-columns:1fr}
  .spread{padding:40px 24px}
}