:root {
  --ink: #030706;
  --pond: #6dff37;
  --acid: #b8ff71;
  --blue: #076cff;
  --cream: #f4ffe9;
  --glass: rgba(210, 255, 217, .1);
  --line: rgba(188, 255, 175, .25);
  --px: 0px;
  --py: 0px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: "DM Mono", monospace; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.grain { position: fixed; inset: 0; z-index: 90; opacity: .04; pointer-events: none; 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='.8'/%3E%3C/svg%3E"); }
.progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 110; background: rgba(255,255,255,.08); }
.progress span { display: block; height: 100%; background: linear-gradient(90deg,var(--blue),var(--pond)); transform-origin: left; }
.nav { position: fixed; z-index: 100; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 22px 3.2vw; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg,rgba(1,7,5,.72),transparent); backdrop-filter: blur(10px); }
.brand { font-family: "Archivo Black", sans-serif; letter-spacing: -.04em; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; }
.brand i { width: 11px; height: 11px; border-radius: 50%; background: var(--pond); box-shadow: 0 0 18px var(--pond); }
.nav nav { display: flex; gap: 34px; font-size: .78rem; letter-spacing: .12em; }
.nav nav a, .mini-btn { transition: color .2s ease; }
.nav nav a:hover, .mini-btn:hover { color: var(--pond); }
.mini-btn { justify-self: end; font-size: .78rem; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
section { min-height: 100svh; position: relative; overflow: hidden; }
.hero { display: flex; align-items: flex-end; padding: 0 5vw 9vh; background: #020504; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:36%; background:linear-gradient(0deg,var(--ink),transparent); pointer-events:none; }
.hero-art { position: absolute; inset: 0; background: url("assets/ponsduck-banner.png") center/cover no-repeat; transform: scale(1.045) translate(var(--px),var(--py)); transition: transform .12s linear; filter: saturate(1.08) contrast(1.03); }
.hero-art::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.25) 43%,rgba(0,0,0,.04) 72%),linear-gradient(0deg,rgba(0,0,0,.65),transparent 45%); }
.hero-copy { position: relative; z-index: 3; width: min(760px, 75vw); }
.eyebrow { font-size: .76rem; letter-spacing: .2em; color: var(--acid); margin: 0 0 16px; }
h1,h2 { font-family: "Archivo Black", sans-serif; margin: 0; text-transform: uppercase; line-height: .78; letter-spacing: -.075em; }
h1 { font-size: clamp(5rem, 13.2vw, 13.5rem); text-shadow: 0 16px 60px rgba(0,0,0,.35); }
h1 span { color: transparent; -webkit-text-stroke: 2px var(--cream); }
.ticker-row { display: flex; align-items: center; gap: 22px; margin: 28px 0 34px; }
.ticker-row strong { background: var(--pond); color: #061002; padding: 9px 14px; transform: rotate(-2deg); font-family: "Archivo Black", sans-serif; }
.ticker-row span { font-size: .82rem; color: rgba(244,255,233,.72); }
.actions { display: flex; gap: 13px; flex-wrap: wrap; }
.pond-btn { min-height: 58px; padding: 0 26px; border: 1px solid var(--line); border-radius: 5px 22px 5px 22px; color: var(--cream); background: rgba(6,20,14,.62); backdrop-filter: blur(12px); display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; letter-spacing: .05em; transition: transform .2s, background .2s, box-shadow .2s; }
.pond-btn:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 14px 34px rgba(67,255,54,.15); }
.pond-btn.primary { background: var(--pond); color: #071105; border-color: var(--pond); }
.pond-btn.primary span { font-size: 1.3em; }
.pond-btn.copy { overflow: hidden; min-width: 166px; justify-content: center; }
.pond-btn.copy b { display: none; }
.pond-btn.copy.copied .copy-label { display: none; }
.pond-btn.copy.copied b { display: block; }
.depth-tag { position:absolute; z-index:4; right:3vw; bottom:3.2vh; writing-mode:vertical-rl; font-size:.66rem; letter-spacing:.18em; opacity:.45; }
.scroll-cue { position:absolute; z-index:4; left:50%; bottom:3vh; transform:translateX(-50%); font-size:.7rem; letter-spacing:.16em; display:flex; gap:14px; align-items:center; }
.scroll-cue span { animation:bob 1.5s ease-in-out infinite; }
@keyframes bob { 50% { transform:translateY(7px); } }
.lore { min-height: 115svh; display: flex; align-items: center; padding: 12vh 7vw 20vh; background: #020504; }
.lore::before { content:""; position:absolute; inset:-1px; background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.82) 78%),linear-gradient(180deg,var(--ink),transparent 22%,var(--ink)); z-index:1; }
.lore-art { position:absolute; inset:0; background:url("assets/ponsduck-post.png") center/cover no-repeat; filter:saturate(.78) brightness(.75); transform:scale(1.05); }
.section-index { position:absolute; z-index:2; top:13%; right:7%; font-family:"Archivo Black"; font-size:clamp(8rem,19vw,20rem); color:transparent; -webkit-text-stroke:1px rgba(184,255,113,.17); }
.lore-card { position:relative; z-index:3; margin-left:auto; width:min(570px,48vw); padding:42px; border:1px solid var(--line); border-radius:40px 6px 40px 6px; background:linear-gradient(145deg,rgba(7,24,17,.82),rgba(7,18,14,.42)); backdrop-filter:blur(18px); box-shadow:0 30px 100px rgba(0,0,0,.44); }
h2 { font-size:clamp(3.7rem,7vw,8.4rem); }
.lore h2 { font-size:clamp(3.5rem,6.7vw,7.4rem); }
h2 em { color:var(--pond); font-style:normal; }
.lore-card > p:last-child, .manifesto-copy > p { font-family:Arial,sans-serif; font-size:1.05rem; line-height:1.65; color:rgba(244,255,233,.72); max-width:45ch; }
.data-strip { position:absolute; z-index:4; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); background:rgba(2,8,5,.8); backdrop-filter:blur(14px); }
.data-strip div { padding:24px 5vw; border-right:1px solid var(--line); }
.data-strip small, .ca-box small { display:block; color:rgba(244,255,233,.42); margin-bottom:8px; letter-spacing:.13em; }
.data-strip strong { font-size:clamp(.9rem,1.4vw,1.2rem); }
.manifesto { display:grid; place-items:center; min-height:110svh; background:radial-gradient(circle at 23% 50%,#12391e 0,transparent 23%),#030706; }
.rings { position:absolute; width:92vw; aspect-ratio:1; border-radius:50%; border:1px solid rgba(109,255,55,.13); box-shadow:0 0 0 9vw rgba(86,255,46,.025),0 0 0 18vw rgba(86,255,46,.018); left:-53vw; top:50%; transform:translateY(-50%); }
.token-orbit { position:absolute; left:7vw; top:50%; width:min(34vw,460px); aspect-ratio:1; transform:translateY(-50%) rotate(-8deg); border-radius:50%; overflow:hidden; box-shadow:0 0 90px rgba(91,255,58,.22); }
.token-orbit img { width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; }
.manifesto-copy { position:relative; z-index:3; width:min(700px,50vw); margin-left:34vw; }
.manifesto h2 span { color:transparent; -webkit-text-stroke:2px var(--cream); }
.ca-box { margin-top:36px; padding:19px 22px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:5px 20px; border:1px solid var(--line); border-radius:6px 28px 6px 28px; background:rgba(159,255,137,.06); }
.ca-box small { grid-column:1/-1; }
.ca-box code { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--acid); }
.ca-box button { background:none; color:var(--cream); border:0; cursor:pointer; border-bottom:1px solid currentColor; padding:4px 0; }
.finale { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:14vh 4vw 3vh; background:radial-gradient(circle at 50% 42%,rgba(70,255,42,.19),transparent 34%),#020504; }
.finale-glow { position:absolute; width:min(72vw,840px); aspect-ratio:1; border:1px solid rgba(120,255,85,.16); border-radius:50%; box-shadow:0 0 0 6vw rgba(120,255,85,.03),inset 0 0 100px rgba(36,255,0,.06); }
.avatar { position:relative; width:clamp(110px,13vw,170px); aspect-ratio:1; border-radius:50%; object-fit:cover; border:2px solid var(--pond); box-shadow:0 0 42px rgba(85,255,49,.34); margin-bottom:30px; }
.finale h2 { position:relative; font-size:clamp(6rem,13vw,14rem); }
.finale .eyebrow,.finale .actions { position:relative; }
.finale footer { position:absolute; left:3vw; right:3vw; bottom:26px; display:flex; justify-content:space-between; gap:20px; font-size:.66rem; letter-spacing:.12em; color:rgba(244,255,233,.4); }
.toast { position:fixed; z-index:130; left:50%; bottom:28px; transform:translate(-50%,130px); background:var(--pond); color:#061005; padding:14px 20px; border-radius:4px 16px 4px 16px; font-weight:500; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.toast.show { transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(42px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.token-orbit.reveal { transform:translateY(-44%) rotate(-8deg); }
.token-orbit.reveal.visible { transform:translateY(-50%) rotate(-8deg); }
@media (max-width: 760px) {
  .nav { grid-template-columns:1fr auto; padding:18px 20px; }
  .nav nav { display:none; }
  .hero { padding:0 22px 12vh; }
  .hero-art { background-position:64% center; }
  .hero-art::before { background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.06) 72%); }
  .hero-copy { width:100%; }
  h1 { font-size:clamp(4.1rem,21vw,7.5rem); }
  .ticker-row { align-items:flex-start; flex-direction:column; gap:12px; }
  .ticker-row span { max-width:28ch; line-height:1.5; }
  .scroll-cue { display:none; }
  .lore { padding:15vh 20px 22vh; align-items:flex-end; }
  .lore::before { background:linear-gradient(0deg,#020504 9%,rgba(0,0,0,.7) 70%,var(--ink)); }
  .lore-art { background-position:52% center; }
  .lore-card { width:100%; margin:0; padding:28px 24px; }
  .lore h2 { font-size:clamp(3.4rem,15vw,5.5rem); }
  .data-strip { grid-template-columns:1fr; }
  .data-strip div { padding:11px 22px; border-right:0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
  .data-strip small { margin:0; }
  .manifesto { align-items:flex-end; padding:9vh 20px 11vh; }
  .token-orbit { top:16%; left:50%; width:min(74vw,360px); transform:translateX(-50%) rotate(-8deg)!important; }
  .manifesto-copy { width:100%; margin:0; }
  .manifesto h2 { font-size:clamp(3.8rem,16vw,6rem); }
  .ca-box { grid-template-columns:minmax(0,1fr) auto; }
  .finale { min-height:100svh; }
  .finale h2 { font-size:clamp(5.2rem,23vw,9rem); }
  .finale footer { flex-direction:column; align-items:center; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }