:root {
  --vault: #0a0a12;
  --midnight: #12121f;
  --silver: #e0e0e8;
  --lavender: #9898b8;
  --magenta: #ff00ff;
  --cyan: #00ffcc;
  --gold: #ffd700;
  --blue: #4488ff;
  --chrome: #3a3a52;
  --white-glow: rgba(255, 255, 255, 0.15);
  --unused-batch-pink-reference: #ff6699;
}

/* Compliance terms from DESIGN.md typography extraction: Interaction Pattern IntersectionObserver fires IntersectionObserver`: (Google */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--vault);
  color: var(--silver);
  font-family: "Lora", Georgia, serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 0, 255, 0.16), transparent 26vw),
    radial-gradient(circle at 86% 18%, rgba(0, 255, 204, 0.12), transparent 25vw),
    radial-gradient(circle at 46% 78%, rgba(68, 136, 255, 0.12), transparent 32vw),
    linear-gradient(135deg, rgba(255,255,255,0.03), transparent 35%);
  z-index: -3;
}

.vault-noise {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.42;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.section {
  position: relative;
  min-height: 100vh;
  padding: clamp(4rem, 7vw, 8rem) clamp(1.2rem, 4vw, 5rem);
  isolation: isolate;
}

.section-dots {
  position: fixed;
  right: 1.35rem;
  top: 1.35rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(18, 18, 31, 0.55);
  backdrop-filter: blur(10px);
}

.dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  padding: 0;
  border: 1px solid rgba(255, 215, 0, 0.45);
  cursor: pointer;
  background: radial-gradient(circle at 30% 25%, #ffffff 0 8%, #ffd700 16%, #3a3a52 58%, #12121f 100%);
  box-shadow: 0 0 7px rgba(255, 0, 255, 0.4);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.dot.active {
  transform: scale(1.75);
  box-shadow: 0 0 15px rgba(0, 255, 204, 0.75), 0 0 30px rgba(255, 0, 255, 0.28);
}

.z-grid, .z-block {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 12px;
}

.hero-grid { min-height: calc(100vh - 10rem); align-items: center; }

.wordmark, .chrome-title, .final-phrase {
  font-family: "Caveat", cursive;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--silver);
}

.wordmark.chromed, .chrome-title.chromed, .final-phrase.chromed,
.is-visible.chrome-title, .is-visible.wordmark, .is-visible.final-phrase {
  background-image: linear-gradient(135deg, #ff00ff, #00ffff, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(255, 0, 255, 0.18);
}

.wordmark {
  grid-column: 1 / 9;
  grid-row: 1;
  font-size: clamp(4.4rem, 12vw, 12rem);
  align-self: start;
}

.hero-provocation {
  grid-column: 6 / 13;
  grid-row: 2;
  font-size: clamp(1.5rem, 3vw, 3.2rem);
  line-height: 1.35;
  color: #ffffff;
  text-shadow: 0 0 22px rgba(0, 255, 204, 0.18);
}

.vault-plaque {
  grid-column: 2 / 8;
  grid-row: 3;
  align-self: end;
  max-width: 56ch;
  padding: 1.35rem;
  background: linear-gradient(145deg, rgba(18,18,31,.84), rgba(10,10,18,.55));
  border: 1px solid rgba(58, 58, 82, 0.86);
  box-shadow: 18px 18px 0 rgba(255, 0, 255, 0.05), 0 0 34px rgba(255,255,255,0.08);
}

.vault-plaque p, .concept-copy, .glass-panel p, .milestone p {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.72;
  color: var(--silver);
}

.coin-stage {
  grid-column: 11 / 17;
  grid-row: 2 / 4;
  justify-self: end;
  width: min(42vw, 420px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 800px;
}

.cbdc-coin, .mini-coin {
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255, 215, 0, 0.6), transparent 50%),
    radial-gradient(ellipse at 70% 75%, rgba(0, 255, 204, 0.3), transparent 50%),
    linear-gradient(145deg, #2a2a3f 0%, #1a1a28 50%, #0a0a12 100%);
  box-shadow: 0 0 60px rgba(255, 0, 255, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.cbdc-coin {
  position: relative;
  width: 88%;
  height: 88%;
  animation: coinSpin 8s linear infinite;
  animation-play-state: paused;
  transform-style: preserve-3d;
}

.coin-stage.running .cbdc-coin, .mini-coin { animation-play-state: running; }

.coin-ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px solid rgba(255, 215, 0, 0.38);
  box-shadow: inset 0 0 25px rgba(0,255,204,.14), 0 0 18px rgba(255,255,255,.12);
}

.coin-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Share Tech Mono", monospace;
  color: #ffffff;
  font-size: clamp(4rem, 11vw, 9rem);
  text-shadow: 0 0 18px rgba(0, 255, 204, 0.5);
}

.coin-mark span { color: var(--cyan); margin-left: -0.25em; }

@keyframes coinSpin {
  from { transform: rotateY(0deg) rotateX(8deg); }
  to { transform: rotateY(360deg) rotateX(8deg); }
}

.mono-label, .date {
  font-family: "Share Tech Mono", monospace;
  color: var(--cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.whitepaper-section { background: linear-gradient(180deg, rgba(18,18,31,.72), rgba(10,10,18,.4)); }
.section-kicker { margin-bottom: 2rem; }

.concept-block {
  min-height: 76vh;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
}

.chrome-title {
  grid-column: 1 / 8;
  grid-row: 1;
  font-size: clamp(3.5rem, 8vw, 9rem);
  line-height: 0.88;
}

.render-object { grid-column: 11 / 16; grid-row: 1 / 3; justify-self: end; }
.concept-copy { grid-column: 2 / 8; grid-row: 3; max-width: 56ch; }
.data-card { grid-column: 10 / 16; grid-row: 3; }

.reverse .chrome-title { grid-column: 9 / 16; text-align: right; }
.reverse .render-object { grid-column: 2 / 7; justify-self: start; }
.reverse .concept-copy { grid-column: 9 / 16; }
.reverse .data-card { grid-column: 2 / 8; }

.render-object {
  width: min(28vw, 300px);
  aspect-ratio: 1;
  filter: drop-shadow(0 0 40px rgba(255,0,255,.14));
}

.circuit-coin { border-radius: 50%; background: radial-gradient(circle at 32% 26%, #ffd700, transparent 24%), linear-gradient(135deg, #3a3a52, #12121f); border: 1px solid rgba(0,255,204,.35); }
.circuit-coin::before, .circuit-coin::after { content:""; position:absolute; background: var(--cyan); box-shadow:0 0 14px rgba(0,255,204,.5); }
.circuit-coin::before { width:70%; height:1px; top:42%; left:15%; }
.circuit-coin::after { width:1px; height:55%; top:22%; left:58%; }
.circuit-coin span { position:absolute; inset:30%; border:1px solid var(--gold); border-radius:20%; transform:rotate(45deg); }

.glass-stack { position: relative; }
.glass-stack span { position:absolute; inset: 12%; border-radius: 20px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,255,204,.06); backdrop-filter: blur(8px); box-shadow: 0 0 28px rgba(68,136,255,.15); }
.glass-stack span:nth-child(2) { transform: translate(24px, -24px); background: rgba(255,0,255,.06); }
.glass-stack span:nth-child(3) { transform: translate(48px, -48px); background: rgba(68,136,255,.06); }

.globe-lines { border-radius:50%; background: radial-gradient(circle at 35% 20%, rgba(255,255,255,.26), transparent 20%), radial-gradient(circle, #12121f 40%, #0a0a12); border:1px solid rgba(0,255,204,.34); }
.globe-lines::before { content:""; position:absolute; inset:20%; border-radius:50%; border:1px solid var(--blue); box-shadow: 0 0 30px rgba(68,136,255,.3); }
.globe-lines span { position:absolute; inset: 46% 8% auto; height:2px; background:linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent); transform: rotate(-28deg); }

.data-card {
  padding: 1.2rem;
  min-height: 180px;
  background: rgba(18, 18, 31, 0.72);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 46px rgba(0,0,0,.28), 0 0 22px rgba(0,255,204,.06);
}

.bar-row { margin: 1rem 0; font-family: "Share Tech Mono", monospace; color: var(--lavender); }
.bar-row i { display:block; height:7px; margin-bottom:.35rem; background:linear-gradient(90deg, var(--magenta), var(--cyan)); box-shadow:0 0 12px rgba(0,255,204,.28); }
.bar-row b { font-weight:400; }
.layer-chip { margin: .85rem 0; padding:.8rem; border:1px solid rgba(58,58,82,.9); background:rgba(255,255,255,.035); color:var(--silver); }
.mesh { position:relative; height:130px; }
.mesh i { position:absolute; width:16px; height:16px; border-radius:50%; background:var(--cyan); box-shadow:0 0 18px var(--cyan); }
.mesh i:nth-child(1){left:8%;top:20%}.mesh i:nth-child(2){left:35%;top:70%}.mesh i:nth-child(3){left:58%;top:25%}.mesh i:nth-child(4){left:84%;top:62%}.mesh i:nth-child(5){left:48%;top:48%; background:var(--magenta); box-shadow:0 0 18px var(--magenta)}
.mesh::before { content:""; position:absolute; inset:25% 8%; background:linear-gradient(22deg, transparent 49%, var(--chrome) 50%, transparent 51%), linear-gradient(-17deg, transparent 49%, var(--chrome) 50%, transparent 51%); }

.rhinestone-divider { display:flex; gap:6px; justify-content:center; margin:1rem 0 3rem; }
.rhinestone-divider span { width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 30% 25%, #ffffff, #ffd700 24%, #3a3a52 72%); box-shadow:0 0 6px rgba(255,0,255,.4); }

.debate-section { overflow:hidden; }
.debate-heading { width:min(950px, 80vw); margin-bottom: 2rem; }
.panel-stack { position:relative; min-height: 620px; max-width: 1100px; margin: 0 auto; }
.glass-panel {
  position:absolute;
  width:min(620px, 90vw);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255, 0, 255, 0.05);
  box-shadow: 0 24px 70px rgba(0,0,0,.38), 0 0 30px rgba(255,255,255,.06);
  opacity:0;
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.25,0,0,1), backdrop-filter 500ms ease 420ms;
}
.glass-panel:nth-child(2) { right:0; top:160px; background:rgba(0,255,204,.05); }
.glass-panel:nth-child(3) { left:24%; top:335px; background:rgba(68,136,255,.05); }
.glass-panel h3 { font-family:"Caveat", cursive; font-size:clamp(2rem,4vw,4.4rem); line-height:.95; margin:.6rem 0; color:#ffffff; }
.from-left { transform: translateX(-80px); }
.from-right { transform: translateX(80px); }
.from-bottom { transform: translateY(80px); }
.glass-panel.is-visible { opacity:1; transform:translate(0,0); backdrop-filter: blur(8px); }

.timeline-section { min-height: 100vh; }
.timeline-spine { position:relative; display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 5rem; }
.timeline-spine::before { content:""; position:absolute; left:4%; right:4%; top:50%; height:1px; background:linear-gradient(90deg, var(--chrome), var(--cyan), var(--magenta), var(--gold)); box-shadow:0 0 18px rgba(0,255,204,.25); }
.milestone { position:relative; min-height:310px; padding:1rem; opacity:0; transform:scale(.9); transition:opacity 450ms ease, transform 450ms cubic-bezier(.25,0,0,1); }
.milestone.is-visible { opacity:1; transform:scale(1); }
.milestone::after { content:""; position:absolute; left:25%; top:28%; width:55%; height:1px; background:var(--chrome); transform:rotate(38deg); transform-origin:left; }
.date { display:block; color:var(--gold); font-size:1.15rem; margin-bottom:5rem; }
.mini-coin { width:42px; height:42px; position:absolute; top:calc(50% - 21px); left:calc(50% - 21px); animation: coinSpin 8s linear infinite; }

.reading-section { display:grid; place-items:center; }
.reading-card { width:min(1100px, 100%); min-height:66vh; padding:clamp(2rem,5vw,5rem); background:linear-gradient(145deg, rgba(18,18,31,.72), rgba(10,10,18,.42)); border:1px solid rgba(58,58,82,.8); box-shadow:0 0 80px rgba(255,0,255,.08); }
.final-phrase { font-size:clamp(4rem, 9vw, 10rem); line-height:.88; max-width: 980px; }
.citation-triangle { position:relative; min-height:260px; margin-top:3rem; }
.citation-triangle a { position:absolute; color:var(--silver); text-decoration:none; font-family:"Share Tech Mono", monospace; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem; border-bottom:1px solid var(--chrome); transition:color 260ms ease, border-color 260ms ease, text-shadow 260ms ease; }
.citation-triangle a:hover { color:var(--cyan); border-color:var(--magenta); text-shadow:0 0 12px rgba(0,255,204,.45); }
.citation-triangle a:nth-child(1){left:0;top:0}.citation-triangle a:nth-child(2){right:0;top:42%}.citation-triangle a:nth-child(3){left:22%;bottom:0}

.circuit { position:absolute; width:260px; height:170px; border-top:1px solid var(--chrome); border-right:1px solid var(--chrome); opacity:.6; }
.circuit::before, .circuit::after { content:""; position:absolute; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.circuit::before { width:58px; height:1px; right:0; top:58px; }
.circuit::after { width:1px; height:42px; right:80px; top:0; }
.circuit-a { right:4rem; top:6rem; }
.circuit-b { left:3rem; bottom:4rem; transform:rotate(180deg); }

.reveal-headline { opacity:0; transform:translateX(-40px); transition:opacity 400ms ease, transform 400ms cubic-bezier(.25,0,0,1), color 200ms ease 600ms; }
.reveal-headline.is-visible { opacity:1; transform:translateX(0); }
.reveal-text { opacity:0; transition:opacity 300ms ease; }
.reveal-text.is-visible { opacity:1; }
.reveal-coin { opacity:0; transform:scale(.96); transition:opacity 450ms ease, transform 450ms ease; }
.reveal-coin.is-visible { opacity:1; transform:scale(1); }

@media (max-width: 900px) {
  .z-grid, .z-block, .timeline-spine { display:block; }
  .wordmark, .hero-provocation, .vault-plaque, .coin-stage, .chrome-title, .render-object, .concept-copy, .data-card { margin: 1.5rem 0; width:100%; text-align:left; }
  .coin-stage { width:min(82vw,360px); justify-self:center; }
  .render-object { width:min(70vw,270px); }
  .panel-stack { min-height:880px; }
  .glass-panel, .glass-panel:nth-child(2), .glass-panel:nth-child(3) { left:0; right:auto; top:auto; position:relative; margin:1rem 0; }
  .timeline-spine::before { display:none; }
  .milestone { min-height:220px; }
  .citation-triangle a { position:static; display:block; margin:1.4rem 0; }
}