/* ---------- Reset & tokens ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
  --bg: #0b0b0d;
  --bg-alt: #121215;
  --panel: #17171b;
  --border: #26262c;
  --text: #f3f3f4;
  --text-dim: #9a9aa2;
  --text-faint: #85858e;
  --accent: #c6ff3d;
  --accent-dim: #8fd400;
  --accent-soft: rgba(198, 255, 61, 0.12);
  --accent-rgb: 198, 255, 61;   /* for rgba() here and in the canvas scripts */
  --text-rgb: 243, 243, 244;
  --on-accent: #0b0b0d;         /* text on an accent background */
  --header-bg: rgba(11, 11, 13, 0.75);
  --token-base: #4f7010;        /* chapter 1 grid before tokens are handed out */
  --fee-rest: #6b6b75;          /* the "rest of fees" ribbon */
  --hero-dot-alpha: 0.3;        /* resting opacity of the hero's logo dots */
  --hero-canvas-opacity: 0.6;
  --owner-0: #c6ff3d;
  --owner-1: #3de0c6;
  --owner-2: #e8e8ea;
  --owner-3: #ffb84d;
  --radius: 14px;
  --radius-sm: 8px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --wrap: 1140px;
  color-scheme: dark;
}

/* Light theme, opt-in via the header switch (dark is the default). The
   inline script in base.html sets data-theme before the page paints. The
   lime accent is too faint on white, so light mode uses a deep green for
   text and accents, with white text on accent backgrounds. */
:root[data-theme="light"] {
  --bg: #f6f6f1;
  --bg-alt: #edede7;
  --panel: #ffffff;
  --border: #dcdcd4;
  --text: #111114;
  --text-dim: #4a4a52;
  --text-faint: #686871;
  --accent: #3d6b06;
  --accent-dim: #2f5a04;
  --accent-soft: rgba(61, 107, 6, 0.12);
  --accent-rgb: 61, 107, 6;
  --text-rgb: 17, 17, 20;
  --on-accent: #ffffff;
  --header-bg: rgba(246, 246, 241, 0.8);
  --token-base: #cfe0a8;
  --fee-rest: #a1a1aa;
  --hero-dot-alpha: 0.5;
  --hero-canvas-opacity: 0.9;
  --owner-0: #3d6b06;
  --owner-1: #0f8a7a;
  --owner-2: #52525b;
  --owner-3: #b45309;
  color-scheme: light;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
code, pre { font-family: var(--font-mono); }
ul { list-style: none; margin: 0; padding: 0; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  /* --mx / --my are set by polish.js to pull the button toward the cursor. */
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.btn:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px)); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-dim); }
.btn-outline { border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { color: var(--text-dim); padding: 8px 16px; }
.btn-ghost:hover { color: var(--text); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--text-dim);
  transition: color 0.2s ease, background 0.2s ease;
}
.icon-btn:hover { color: var(--text); background: var(--panel); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.site-header.is-hidden { transform: translateY(-100%); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
}
.brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.brand-mark { color: var(--accent); }
.brand-suffix { color: var(--text-dim); }

.main-nav {
  display: flex;
  gap: 24px;
  margin-right: auto;
}
.main-nav a {
  color: var(--text-dim);
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.main-nav a:hover,
.main-nav a.is-current { color: var(--text); }
.main-nav a { position: relative; }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.main-nav a.is-current::after { opacity: 1; transform: scale(1); }

.header-actions { display: flex; align-items: center; gap: 6px; }

/* Light/dark switch. Shows the mode it switches to: a sun in dark mode,
   a moon in light mode. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-faint); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon,
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 8px 24px 20px;
  border-top: 1px solid var(--border);
}
.mobile-nav a {
  padding: 10px 0;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.mobile-nav.is-open { display: flex; }

@media (max-width: 860px) {
  .main-nav, .header-actions .btn-ghost { display: none; }
  /* The switch sits at the right, next to the menu button. */
  .header-actions { margin-left: auto; }
  .header-actions + .nav-toggle { margin-left: 0; }
  .header-inner { gap: 14px; }
  .nav-toggle { display: flex; }
}

/* ---------- Hero / scroll story ---------- */
/* The section is tall; its viewport stays pinned while you scroll through
   it, and hero.js maps that scroll distance onto the dot morphs. */
.story {
  position: relative;
  height: 500vh;
  /* Start under the sticky header so the pinned viewport is exactly one
     screen tall from the very top of the page. */
  margin-top: -69px;
}
.story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.story-sticky.is-over-emblem { cursor: pointer; }
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--hero-canvas-opacity);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
/* Below this width hero.js puts the emblem under the text instead of beside it. */
/* Below this width the hero is a single screen: no pinned scroll story.
   hero.js cycles the shapes on a timer and keeps the headline showing. */
@media (max-width: 999px) {
  .story { height: auto; }
  .story-sticky {
    position: relative;
    align-items: flex-start;
    padding-top: 104px;
    min-height: 640px;
  }
  .story-caption:not(:first-child) { display: none; }
  .scroll-hint { display: none; }
}
@media (min-width: 1000px) {
  .story-label { display: none; }
}

.story-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 70px;
  z-index: 2;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.story-label.is-changing { animation: label-in 0.5s ease both; }
@keyframes label-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.story-captions {
  display: grid;
  max-width: 600px;
}
.story-caption {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(24px);
  visibility: hidden;
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.6s;
}
.story-caption.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0.1s, 0.1s, 0s;
}
/* The page's h1 stays readable to screen readers while its caption is
   faded out (opacity still hides it on screen). Its buttons stay hidden,
   so keyboard focus can't land on invisible controls. */
.story-caption .hero-title { visibility: visible; }
.story-caption:not(.is-active) .hero-title { pointer-events: none; }
.story-title {
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}
.story-lede {
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 480px;
  margin: 0;
}

.story-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0 24px;
  list-style: none;
}
.story-progress button {
  background: none;
  border: none;
  padding: 6px 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease;
}
.story-progress button::before {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: 8px;
  background: var(--border);
  transition: background 0.3s ease;
}
.story-progress button:hover { color: var(--text-dim); }
.story-progress button.is-active { color: var(--accent); }
.story-progress button.is-active::before { background: var(--accent); }
@media (max-width: 520px) {
  .story-progress { gap: 6px 12px; }
  .story-progress button { font-size: 0.62rem; letter-spacing: 0.03em; }
}

.scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 76px;
  z-index: 2;
  margin: 0;
  text-align: center;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  pointer-events: none;
  transition: opacity 0.4s ease;
  animation: hint-bob 2.4s ease-in-out infinite;
}
.story-sticky.is-scrolled .scroll-hint { opacity: 0; }
@keyframes hint-bob {
  50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .story-caption, .story-caption.is-active { transition: none; }
  .scroll-hint { animation: none; }
}
.eyebrow {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 18px;
  opacity: 0;
  transform: translateY(10px);
  animation: rise 0.6s ease forwards 0.05s;
}
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
}
.hero-title .line {
  display: block;
  opacity: 0;
}
.hero-title.is-ready .line {
  opacity: 1;
  animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-title.is-ready .line:nth-child(1) { animation-delay: 0.12s; }
.hero-title.is-ready .line:nth-child(2) { animation-delay: 0.26s; }

.hero-lede {
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 0 34px;
  opacity: 0;
  transform: translateY(10px);
  animation: rise 0.6s ease forwards 0.4s;
}
.hero-actions {
  display: flex;
  gap: 14px;
  opacity: 0;
  transform: translateY(10px);
  animation: rise 0.6s ease forwards 0.5s;
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Sections ---------- */
.section { padding: 90px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.section-lede {
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 0 48px;
  font-size: 1.05rem;
}
.section-updated {
  margin: -36px 0 40px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* Underlined, not just coloured: the lime is too close in brightness to
   the grey body text to mark a link inside a sentence on its own. */
.inline-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), 0.45);
  text-underline-offset: 3px;
}
.inline-link:hover { text-decoration-color: var(--accent); }

.fine-print {
  color: var(--text-faint);
  font-size: 0.8rem;
  margin: 16px 0 0;
}

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Visual essay: chapters ---------- */
.journey-intro { max-width: 720px; margin-bottom: 72px; }
.chapter-kicker,
.chapter-copy .chapter-kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chapters { position: relative; }
.chapter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}
.chapter + .chapter { margin-top: 120px; }
.chapter-flip .chapter-copy { order: 2; }
.chapter-flip .chapter-visual { order: 1; }
.chapter-title {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.chapter-copy p { color: var(--text-dim); }
.chapter-copy .chapter-note {
  margin: 22px 0 10px;
  color: var(--text-faint);
  font-size: 0.85rem;
}
.chapter-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.chapter.is-reached .chapter-num {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.journey-rail { display: none; }

/* Wide screens: numbers sit on a rail down the left that fills as you read. */
@media (min-width: 1100px) {
  .chapters { padding-left: 72px; }
  .journey-rail {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 14px;
    width: 2px;
    background: var(--border);
  }
  .journey-rail-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
  }
  .chapter-num {
    position: absolute;
    left: -72px;
    top: 50%;
    margin-top: -15px;
  }
}
@media (max-width: 1099px) {
  /* Below the rail breakpoint the number sits in the grid: give it a row
     of its own so it doesn't take a column from the copy or the visual. */
  .chapter-num { justify-self: start; grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .chapter + .chapter { margin-top: 88px; }
  .chapter-flip .chapter-copy,
  .chapter-flip .chapter-visual { order: 0; }
}

/* ---------- Tokenizer ---------- */

.asset-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.asset-tab {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.asset-tab:hover { color: var(--text); border-color: var(--text-faint); }
.asset-tab.is-active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.token-readout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.token-readout div { background: var(--panel); padding: 14px 18px; }
.token-readout dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.token-readout dd {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.token-stage {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.token-grid {
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: 2px;
  max-width: 480px;
  margin: 0 auto;
}
/* Cells start oversized with square corners so they fuse into one solid
   block, then shrink into separate round tokens. */
.token-cell {
  aspect-ratio: 1;
  background: var(--token-base);
  border-radius: 0;
  transform: scale(1.35);
  transition:
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-radius 0.6s ease,
    opacity 0.6s ease,
    background-color 0.5s ease;
  transition-delay: var(--delay, 0ms);
}
.token-grid.is-split .token-cell {
  transform: scale(0.8);
  border-radius: 50%;
  opacity: 0.35;
}
.token-grid.is-split .token-cell[data-owner] { opacity: 1; }
.token-cell[data-owner="0"], .swatch[data-owner="0"] { background: var(--owner-0); }
.token-cell[data-owner="1"], .swatch[data-owner="1"] { background: var(--owner-1); }
.token-cell[data-owner="2"], .swatch[data-owner="2"] { background: var(--owner-2); }
.token-cell[data-owner="3"], .swatch[data-owner="3"] { background: var(--owner-3); }

.owner-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 26px;
  color: var(--text-dim);
  font-size: 0.82rem;
}
.owner-legend li { display: flex; align-items: center; gap: 7px; }
.swatch { width: 9px; height: 9px; border-radius: 50%; }

/* ---------- Milestone globe ---------- */
.milestones-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 56px;
  align-items: start;
}
.milestones-layout .timeline { grid-column: 1; grid-row: 1; }
.globe-wrap {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 110px;
}
@media (max-width: 960px) {
  .milestones-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .milestones-layout .timeline,
  .globe-wrap { grid-column: auto; grid-row: auto; }
  .globe-wrap {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}
.globe-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  cursor: grab;
  touch-action: pan-y;
}
.globe-canvas.is-dragging { cursor: grabbing; }
.globe-canvas.is-over-pin { cursor: pointer; }
.globe-caption {
  margin: 8px 0 0;
  min-height: 1.5em;
  text-align: center;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* ---------- Timeline ---------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
  border-left: 1px solid var(--border);
}
.timeline-item { position: relative; padding-bottom: 36px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--accent);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.timeline-item.is-active::before {
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.timeline-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.timeline-date { color: var(--accent); }
/* Permanent link to a milestone; copies the URL when clicked (essay.js). */
.timeline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 6px;
  color: var(--text-faint);
  transition: color 0.2s ease;
}
.timeline-link:hover { color: var(--accent); }
.timeline-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.timeline-link svg { width: 15px; height: 15px; }
.timeline-link-note { color: var(--accent); }
.timeline-link-note:empty { display: none; }
/* The milestone a shared link points at. */
.timeline-item:target .timeline-card { border-color: var(--accent); }
.timeline-tag {
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}
.timeline-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  transition: border-color 0.3s ease;
}
.timeline-item.is-active .timeline-card { border-color: var(--accent-dim); }
@media (max-width: 640px) { .timeline-card { grid-template-columns: 1fr; gap: 14px; } }
.timeline-card h3 { margin: 0 0 8px; font-size: 1.1rem; }
.timeline-card p { margin: 0 0 12px; color: var(--text-dim); font-size: 0.95rem; }
.timeline-card .inline-link { font-size: 0.88rem; }
.timeline-stat { display: flex; flex-direction: column; }
.stat-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1.1;
}
.stat-label { color: var(--text-faint); font-size: 0.82rem; }

/* ---------- Fee flow ---------- */
.fees {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.fees-svg { display: block; width: 100%; height: auto; }
.fee-ribbon {
  fill: none;
  transition: stroke-opacity 0.3s ease, opacity 0.3s ease;
}
.fee-ribbon.is-dim { opacity: 0.25; }
.fee-node rect {
  fill: var(--bg);
  stroke: var(--border);
  stroke-width: 1;
  transition: stroke 0.3s ease;
}
.fee-merge rect { stroke: var(--accent-dim); }
.fee-output { cursor: pointer; }
.fee-output.is-active rect { stroke: var(--text-dim); }
.fee-output-stakers rect,
.fee-output-stakers.is-active rect { stroke: var(--owner-0); }
.fee-output-burn rect,
.fee-output-burn.is-active rect { stroke: var(--owner-3); }
.fee-output.is-hit rect { animation: fee-hit 0.5s ease-out; }
@keyframes fee-hit {
  from { fill: rgba(var(--accent-rgb), 0.28); }
  to { fill: var(--bg); }
}
.fee-label { fill: var(--text); font-size: 14px; font-family: var(--font-sans); }
.fee-label-strong { font-weight: 700; }
.fee-sub { fill: var(--text-dim); font-size: 11.5px; font-family: var(--font-sans); }
.fee-share-num { font-size: 19px; font-weight: 700; font-family: var(--font-sans); fill: var(--text-dim); }
.fee-output-stakers .fee-share-num { fill: var(--owner-0); }
.fee-output-burn .fee-share-num { fill: var(--owner-3); }

.fees-text { min-height: 4.5em; }
.fee-shares {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 8px;
}
.fee-share {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s ease, border-color 0.2s ease;
}
.fee-share-value { font-family: var(--font-mono); font-weight: 700; color: var(--text); }
.fee-share:hover,
.fee-share:focus-visible,
.fee-share.is-active { color: var(--text); border-color: var(--accent); outline: none; }
.fee-share[data-part="burn"]:hover,
.fee-share[data-part="burn"]:focus-visible,
.fee-share[data-part="burn"].is-active { border-color: var(--owner-3); }

/* ---------- Cross-chain flow ---------- */
.chapter-copy .flow-route {
  min-height: 1.5em;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.flow {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
@media (max-width: 600px) { .flow { aspect-ratio: 1; } }
.flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.flow-hub,
.flow-node,
.flow-ccip {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.flow.is-ready .flow-hub,
.flow.is-ready .flow-node,
.flow.is-ready .flow-ccip { opacity: 1; }

.flow-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent-dim);
  box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.15);
  text-align: center;
}
.flow-hub strong { color: var(--accent); font-family: var(--font-mono); font-size: 1.05rem; }
.flow-hub small { color: var(--text-faint); font-size: 0.62rem; }
.flow-ccip {
  padding: 0 6px;
  background: var(--panel);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}
.flow-node {
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.4s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.flow-node:hover,
.flow-node:focus-visible,
.flow-node.is-active {
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  outline: none;
}
@media (max-width: 600px) {
  .flow-hub { width: 76px; height: 76px; }
  .flow-node { padding: 6px 10px; font-size: 0.7rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 60px 0 0;
  background: var(--bg-alt);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: 40px;
  padding-bottom: 40px;
}
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand p {
  color: var(--text-dim);
  max-width: 320px;
  margin-top: 12px;
  font-size: 0.92rem;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 {
  margin: 0 0 4px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.footer-col a { color: var(--text-dim); font-size: 0.92rem; }
.footer-col a:hover { color: var(--text); }
.footer-note { color: var(--text-faint); font-size: 0.82rem; }
@media (max-width: 480px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 18px 24px;
  color: var(--text-faint);
  font-size: 0.82rem;
}
.footer-bottom p { margin: 0; max-width: 760px; }
.footer-bottom p + p { margin-top: 8px; }
.footer-bottom a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Polish (driven by polish.js) ---------- */

/* Not-yet-resolved characters in a decoding heading. */
.decode-tail { color: var(--accent); opacity: 0.7; }

/* A soft glow that follows the pointer. The panel is its own stacking
   context, so the glow sits above its background but under its content. */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 50%), rgba(var(--accent-rgb), 0.09), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
[data-spotlight].is-lit::before { opacity: 1; }

/* Groups whose children cascade in. Uses the separate `translate`
   property so it doesn't fight the magnetic `transform`. */
.js .reveal-stagger > * { opacity: 0; }
.reveal-stagger.is-visible > * {
  animation: stagger-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes stagger-in {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal-stagger > * { opacity: 1; }
  .reveal-stagger.is-visible > * { animation: none; }
  .site-header { transition: none; }
}

/* ---------- Chapter 2: eligibility rules and gate ---------- */
.rules { display: flex; flex-wrap: wrap; gap: 8px; }
.rule {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.rule:has(input:checked) { color: var(--text); border-color: var(--accent-dim); }
.rule input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 28px;
  height: 16px;
  margin: 0;
  border-radius: 999px;
  background: var(--border);
  cursor: pointer;
  transition: background 0.2s ease;
}
.rule input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.2s ease, background 0.2s ease;
}
.rule input:checked { background: rgba(var(--accent-rgb), 0.3); }
.rule input:checked::after { transform: translateX(12px); background: var(--accent); }
.rule input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chapter-copy .gate-summary { min-height: 3em; margin: 14px 0 0; color: var(--text); }

.gate {
  position: relative;
  aspect-ratio: 16 / 11;
  min-height: 300px;
  /* A grid item with an aspect ratio isn't stretched to its column, so
     without an explicit width min-height sets it: 300px * 16/11 = 436px,
     wider than a phone screen. */
  width: 100%;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.gate-bar {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--accent-dim) 0 6px, transparent 6px 12px);
}
.gate-bar span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  background: var(--panel);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gate-label {
  position: absolute;
  top: 16px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gate-label-out { left: 16px; }
.gate-label-in { right: 16px; color: var(--accent); }
.gate-dot {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: var(--text-faint);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms),
    background 0.4s ease,
    box-shadow 0.4s ease,
    opacity 0.4s ease;
}
.gate.is-live .gate-dot { opacity: 1; }
.gate-dot.is-in { background: var(--accent); }
.gate-dot.is-out { background: transparent; box-shadow: inset 0 0 0 2px var(--text-faint); }

/* ---------- "Guess first" questions ---------- */
.guess {
  margin: 22px 0;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
#milestones .guess { max-width: 640px; margin: 0 0 56px; }
.guess [hidden] { display: none !important; }
.guess p { margin: 0; }
.guess .guess-kicker {
  margin-bottom: 6px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.guess .guess-question { color: var(--text); font-weight: 600; }
.guess-track { position: relative; padding: 26px 0 6px; }
.guess-input { display: block; width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.guess-input:disabled { opacity: 0.55; cursor: default; }
.guess-mark {
  position: absolute;
  top: 18px;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--owner-3);
}
.guess-mark::after {
  content: attr(data-label);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 2px;
  color: var(--owner-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: nowrap;
}
.guess .guess-value { margin: 6px 0 14px; color: var(--text); font-family: var(--font-mono); font-size: 0.9rem; }
.guess-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.guess-skip {
  padding: 4px;
  background: none;
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.guess-skip:hover { color: var(--text); }
.guess .guess-result { margin-top: 4px; color: var(--text); font-weight: 600; }
.guess .guess-explain { margin-top: 6px; color: var(--text-dim); font-size: 0.92rem; }

/* While a question is unanswered, keep its answer out of sight. */
.fee-share-num,
.timeline-stat,
.timeline-card p { transition: opacity 0.6s ease, filter 0.6s ease; }
.is-guessing .fee-shares { display: none; }
.is-guessing .fee-share-num { opacity: 0; }
.is-guessing .fee-output { pointer-events: none; }
.is-guessing .has-guess .timeline-stat,
.is-guessing .has-guess .timeline-card p { filter: blur(7px); user-select: none; }

/* ---------- Recap ---------- */
.recap-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) { .recap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .recap-list { grid-template-columns: minmax(0, 1fr); } }
.recap-list li {
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.recap-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.recap-list p { margin: 0; color: var(--text-dim); }
.recap-list strong { color: var(--text); }
.recap-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Token standard callout (chapter 4) ---------- */
.standard-callout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 22px 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
}
.chapter-copy .standard-callout p { margin: 0; font-size: 0.95rem; }
.standard-badge {
  flex: none;
  padding: 6px 10px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.standard-badge:hover { background: var(--accent); color: var(--on-accent); }
@media (max-width: 480px) { .standard-callout { flex-direction: column; gap: 10px; } }

/* ---------- Community (Telegram) ---------- */
.community {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px;
  margin-top: 72px;
  padding: 32px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
@media (max-width: 800px) { .community { grid-template-columns: minmax(0, 1fr); padding: 24px; } }
.community-copy h3 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.2; }
.community-copy p:last-child { margin: 0; color: var(--text-dim); }
.community-links { display: flex; flex-direction: column; gap: 12px; }
.community-chat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 0.2s, transform 0.2s;
}
.community-chat:hover { border-color: var(--accent); transform: translateX(4px); }
.community-chat-name { font-weight: 600; }
.community-chat-name::after { content: " \2192"; color: var(--accent); }
.community-chat-note { color: var(--text-faint); font-size: 0.85rem; overflow-wrap: anywhere; }
.community-langs-label {
  margin: 8px 0 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.community-langs { display: flex; flex-wrap: wrap; gap: 10px; }
.community-lang {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  transition: border-color 0.2s, color 0.2s;
}
.community-lang:hover { border-color: var(--accent); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .gate-dot,
  .fee-share-num,
  .timeline-stat,
  .timeline-card p,
  .community-chat { transition: none; }
}