@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root { --ink:#050906; --deep:#071109; --green:#b8ff16; --green2:#72ed08; --blue:#1e6cff; --amber:#ffae28; --cream:#eef5dc; --muted:#9cae91; --line:rgba(184,255,22,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; color:var(--cream); background:var(--ink); font-family:'Space Mono',monospace; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.shell { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.grain { position:fixed; inset:0; pointer-events:none; z-index:90; opacity:.075; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.nav-wrap { position:fixed; inset:0 0 auto; z-index:50; background:linear-gradient(#050906d9,transparent); }
.nav { height:88px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; font-family:'Archivo Black',sans-serif; font-size:1.05rem; letter-spacing:-.04em; }
.brand-eye { width:28px; height:18px; border:3px solid var(--green); border-radius:50%; display:block; box-shadow:inset 0 0 10px var(--green),0 0 14px #8cff2f66; transform:rotate(-8deg); }
.brand-eye::after { content:''; width:5px; height:5px; border-radius:50%; background:var(--green); display:block; margin:4px auto; }
.nav-links { display:flex; gap:36px; font-size:.78rem; letter-spacing:.12em; }
.nav-links a { padding:8px 0; border-bottom:1px solid transparent; }
.nav-links a:hover { color:var(--green); border-color:var(--green); }
.mini-blob,.round-link { display:grid; place-items:center; width:48px; height:43px; background:var(--green); color:var(--ink); font-weight:700; border-radius:52% 48% 62% 38% / 43% 57% 43% 57%; box-shadow:0 8px 28px #9cff1940; transform:rotate(3deg); transition:.2s ease; }
.mini-blob:hover,.round-link:hover { transform:rotate(-5deg) scale(1.08); }
.hero { min-height:100svh; position:relative; isolation:isolate; display:grid; align-items:center; overflow:hidden; }
.hero::after { content:''; position:absolute; inset:auto 0 0; height:30%; z-index:-1; background:linear-gradient(transparent,var(--ink)); }
.hero-bg { position:absolute; inset:0; z-index:-3; background-image:linear-gradient(90deg,#040806ed 0%,#040806a8 43%,#0408062e 70%),url('assets/cosmic-pool.png'); background-size:cover; background-position:center; filter:saturate(1.12) contrast(1.08); transform:scale(1.025); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; min-height:100svh; padding-top:92px; }
.hero-copy { position:relative; z-index:2; padding:52px 0 86px; }
.kicker,.eyebrow { color:var(--green); letter-spacing:.18em; font-weight:700; font-size:.75rem; line-height:1.5; }
h1,h2 { margin:0; font-family:'Archivo Black',sans-serif; text-transform:uppercase; letter-spacing:-.075em; line-height:.84; }
h1 { font-size:clamp(4.2rem,9.3vw,9.5rem); }
h1 span,h2 span,h2 em { color:var(--green); font-style:normal; text-shadow:0 0 30px #9eff1745; }
.lead { width:min(540px,100%); margin:30px 0 32px; font-size:1rem; line-height:1.7; color:#d4ddcd; }
.actions { display:flex; flex-wrap:wrap; gap:14px; }
.blob-button { min-height:60px; padding:0 23px; display:inline-flex; align-items:center; justify-content:center; gap:30px; border:0; cursor:pointer; color:var(--cream); background:#151b16; font-weight:700; font-size:.78rem; letter-spacing:.08em; border-radius:22px 13px 25px 15px / 16px 25px 14px 22px; position:relative; transition:transform .18s ease,filter .18s ease; }
.blob-button::before { content:''; position:absolute; inset:-2px; border:1px solid #aaff3560; border-radius:19px 27px 16px 24px / 24px 15px 26px 17px; transform:rotate(-1.5deg); }
.blob-button.primary { color:#061006; background:linear-gradient(135deg,var(--green),#6ee500); box-shadow:0 12px 40px #93ff202b,inset 0 -5px 0 #559f0e; }
.blob-button:hover { transform:translateY(-4px) rotate(-1deg); filter:brightness(1.08); }
.blob-button b { font-size:1.15rem; }
.ca-line { display:flex; gap:12px; align-items:center; color:var(--muted); font-size:.72rem; margin-top:20px; max-width:510px; }
.ca-line span { color:var(--green); font-weight:700; }
.ca-line code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-character { position:relative; align-self:end; width:min(650px,58vw); aspect-ratio:1; margin-left:-10%; margin-bottom:-1%; }
.hero-character img { width:100%; height:100%; object-fit:cover; border-radius:53% 47% 46% 54% / 44% 53% 47% 56%; -webkit-mask-image:radial-gradient(ellipse 65% 70% at 50% 47%,#000 52%,transparent 78%); mask-image:radial-gradient(ellipse 65% 70% at 50% 47%,#000 52%,transparent 78%); filter:saturate(1.1) contrast(1.07); position:relative; z-index:2; }
.aura { position:absolute; inset:12%; border-radius:50%; filter:blur(30px); opacity:.58; z-index:1; animation:breathe 4.4s ease-in-out infinite; }
.aura-one { background:conic-gradient(from 90deg,transparent,var(--green),transparent,var(--blue),transparent); }
.aura-two { inset:3%; border:2px solid var(--green); filter:blur(8px); animation-duration:7s; animation-direction:reverse; opacity:.45; }
.depth-stamp { position:absolute; right:4%; bottom:17%; z-index:3; width:92px; aspect-ratio:1; border:1px solid var(--green); border-radius:50%; display:grid; place-content:center; text-align:center; background:#071109a8; backdrop-filter:blur(8px); animation:spin 14s linear infinite; }
.depth-stamp small { font-size:.55rem; letter-spacing:.15em; }.depth-stamp strong { font-size:2rem; color:var(--green); }
.orbit { position:absolute; border:1px solid #a8ff2345; border-radius:50%; z-index:-1; animation:spin 18s linear infinite; }
.orbit-a { width:42vw; height:42vw; right:-18vw; top:2vh; }.orbit-b { width:28vw; height:28vw; left:-18vw; bottom:-14vw; animation-direction:reverse; }
.scroll-cue { position:absolute; bottom:24px; left:50%; translate:-50%; z-index:4; display:flex; gap:16px; font-size:.65rem; letter-spacing:.16em; color:var(--muted); }.scroll-cue span { color:var(--green); animation:bob 1.2s infinite; }
.ribbon { padding:15px 0; overflow:hidden; border-block:1px solid var(--green); color:var(--ink); background:var(--green); font-weight:700; white-space:nowrap; rotate:-2deg; scale:1.03; }
.ribbon span { display:block; animation:ticker 20s linear infinite; }
.manifesto { padding:160px 0 130px; position:relative; background:radial-gradient(circle at 80% 20%,#152e071f,transparent 36%),var(--ink); }
.manifesto-grid { display:grid; grid-template-columns:120px 1.5fr 1fr; gap:55px; align-items:start; opacity:0; transform:translateY(40px); transition:.8s ease; }
.manifesto-grid.visible,.token-grid.visible,.chapter.visible,.final-inner.visible { opacity:1; transform:none; }
.section-number { writing-mode:vertical-rl; color:var(--muted); letter-spacing:.14em; font-size:.75rem; }
h2 { font-size:clamp(3rem,6vw,6.6rem); }
.lore-copy { color:#c5d0bf; line-height:1.8; border-left:1px solid var(--line); padding-left:30px; margin-top:32px; }
.lore-copy p { margin:0 0 24px; }.text-link { color:var(--green); font-size:.76rem; font-weight:700; letter-spacing:.1em; border-bottom:1px solid var(--green); padding-bottom:8px; }
.token-section { padding:100px 0 160px; overflow:hidden; background:linear-gradient(165deg,#080d09 0%,#0b160a 70%,#071006 100%); }
.token-grid { display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:center; opacity:0; transform:translateY(40px); transition:.8s ease; }
.token-portrait { position:relative; aspect-ratio:1; transform:rotate(-3deg); filter:drop-shadow(0 30px 55px #000); }
.token-portrait::before { content:''; position:absolute; inset:-4%; border:1px solid var(--green); border-radius:43% 57% 47% 53% / 55% 45% 55% 45%; animation:spin 18s linear infinite; }
.token-portrait img { width:100%; height:100%; object-fit:cover; border-radius:41% 59% 52% 48% / 55% 39% 61% 45%; }
.corner { position:absolute; width:46px; height:46px; border-color:var(--green); }.corner-a { top:-20px; left:-20px; border-top:4px solid; border-left:4px solid; }.corner-b { right:-20px; bottom:-20px; border-right:4px solid; border-bottom:4px solid; }
.token-copy>p:not(.eyebrow) { color:#bcc9b4; line-height:1.8; max-width:560px; margin:28px 0; }.token-actions { display:flex; gap:15px; align-items:center; }
.round-link { width:60px; height:58px; }
.final-dive { min-height:80vh; display:grid; place-items:center; text-align:center; position:relative; overflow:hidden; background:linear-gradient(#05090688,#050906),url('assets/cosmic-pool.png') center/cover; }
.final-dive::before { content:''; position:absolute; width:55vw; aspect-ratio:1; border-radius:50%; border:2px solid var(--green); box-shadow:0 0 80px var(--green),inset 0 0 90px #8cff1d35; animation:breathe 4s infinite; }
.final-inner { position:relative; z-index:2; opacity:0; transform:translateY(40px); transition:.8s ease; }.final-inner h2 { margin:12px 0 44px; }.huge { min-width:250px; min-height:72px; }
footer { border-top:1px solid var(--line); background:#030504; }.footer-inner { min-height:120px; display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:.7rem; letter-spacing:.09em; color:var(--muted); }.footer-inner>div { display:flex; gap:22px; }.footer-inner a:hover { color:var(--green); }
.toast { position:fixed; z-index:100; left:50%; bottom:24px; translate:-50% 160%; background:var(--green); color:var(--ink); font-weight:700; font-size:.75rem; padding:14px 21px; border-radius:20px 11px 17px 13px; transition:.3s ease; box-shadow:0 12px 50px #000; }.toast.show { translate:-50% 0; }

.lore-page { background:radial-gradient(circle at 50% 15%,#122d0d 0%,#050906 32%); }.lore-hero { min-height:90svh; display:grid; align-items:end; position:relative; overflow:hidden; padding:130px 0 85px; }.lore-hero::after { content:''; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#050906d9,#05090654),url('assets/cosmic-pool.png') center/cover; opacity:.62; }.lore-glow { position:absolute; z-index:-1; width:60vw; height:60vw; left:40%; top:20%; border:1px solid var(--green); border-radius:50%; box-shadow:0 0 90px #7eff1733; animation:breathe 5s infinite; }.lore-head h1 span { -webkit-text-stroke:2px var(--green); color:transparent; }.lore-head>p:last-child { color:#c7d2c1; margin:28px 0 0; }
.chapters { padding:120px 0; }.chapter { min-height:72vh; display:grid; grid-template-columns:100px 1.25fr .75fr; gap:5vw; align-items:center; border-top:1px solid var(--line); opacity:0; transform:translateY(40px); transition:.8s ease; }.chapter-index { font-family:'Archivo Black'; color:var(--green); font-size:4rem; opacity:.4; }.chapter>p { line-height:1.9; color:#bbc7b4; }.chapter.reverse>div:nth-child(2) { order:3; }.chapter.reverse>p { order:2; }.lore-close { min-height:85vh; display:grid; place-items:center; text-align:center; background:radial-gradient(circle,var(--green) 0 1px,transparent 2px) 0 0/38px 38px; }.lore-close h2 { margin:15px 0 48px; }.centered { justify-content:center; }

@keyframes breathe { 50% { transform:scale(1.08) rotate(5deg); opacity:.82; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes bob { 50% { transform:translateY(7px); } }
@keyframes ticker { to { transform:translateX(-50%); } }
@media (max-width:850px) {
  .nav-links { display:none; }.hero-grid { grid-template-columns:1fr; padding-top:110px; }.hero-copy { padding-bottom:0; }.hero-character { width:115vw; margin:-22vw 0 -12vw -8vw; opacity:.78; }.hero-bg { background-image:linear-gradient(#040806d4,#0408066b 55%,#040806),url('assets/cosmic-pool.png'); }.manifesto-grid { grid-template-columns:1fr; }.section-number { writing-mode:initial; }.lore-copy { margin-top:0; }.token-grid { grid-template-columns:1fr; }.token-portrait { width:86%; margin:auto; }.chapter { grid-template-columns:60px 1fr; padding:80px 0; }.chapter>p { grid-column:2; }.chapter.reverse>div:nth-child(2),.chapter.reverse>p { order:initial; }.footer-inner { flex-direction:column; justify-content:center; padding:30px 0; }.lore-glow { width:100vw;height:100vw;left:20%; }
}
@media (max-width:520px) { .shell { width:min(100% - 26px,1180px); }.nav { height:72px; }.hero-copy { padding-top:20px; }.kicker { max-width:290px; }.actions { flex-direction:column; align-items:stretch; }.blob-button { width:100%; }.hero-character { width:132vw; margin-left:-17vw; }.manifesto { padding:120px 0 90px; }.manifesto-grid { gap:28px; }.token-section { padding:80px 0 110px; }.token-copy { margin-top:20px; }.chapter { grid-template-columns:1fr; gap:18px; min-height:auto; }.chapter>p { grid-column:auto; }.chapter-index { font-size:2.4rem; }.lore-hero { min-height:75svh; }.final-dive { min-height:75vh; } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; scroll-behavior:auto!important; transition:none!important; }.manifesto-grid,.token-grid,.chapter,.final-inner { opacity:1; transform:none; } }
