/* ==========================================================================
   components.css - reusable interface pieces
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--rule-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--gold-soft), 0 10px 22px -12px var(--glow); }
.btn:active { transform: translateY(0) scale(0.97); box-shadow: 0 0 0 2px var(--gold); }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-border: var(--accent);
}

.btn--ghost { --btn-border: var(--rule); --btn-fg: var(--ink-soft); }
.btn--ghost:hover { --btn-fg: var(--ink); --btn-border: var(--rule-strong); }

.btn--small { padding: 0.4rem 0.7rem; font-size: 0.7rem; }

.btn__icon { width: 1rem; height: 1rem; flex: none; }

/* Icon-only control (theme toggle, copy) */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { color: var(--ink); border-color: var(--rule-strong); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }

/* The theme toggle swaps which glyph is visible */
[data-theme="dark"] .icon-btn__sun,
:root:not([data-theme="dark"]) .icon-btn__moon { display: none; }

/* --------------------------------------------------------------------------
   2. Badges, rules and callouts
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: var(--paper-raised);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.badge--verify { border-color: var(--verify); color: var(--verify); background: var(--verify-soft); }
.badge--signal { border-color: var(--signal); color: var(--signal); background: var(--signal-soft); }

.dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.dot--live { animation: pulse 2.4s var(--ease-in-out) infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* "Reality check" note - used to keep the page honest about trade-offs */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-s) var(--space-m);
  padding: var(--space-m);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--paper-raised);
}

.callout__icon { width: 1.35rem; height: 1.35rem; color: var(--gold); margin-top: 0.15rem; }
.callout__body { font-size: var(--step--1); color: var(--ink-soft); }
.callout__body strong { color: var(--ink); }

.callout--accent { border-left-color: var(--accent); }
.callout--accent .callout__icon { color: var(--accent); }

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(var(--space-xl), 9vh, var(--space-3xl)) var(--space-2xl);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--space-2xl); }
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}

.hero__title { margin-bottom: var(--space-m); font-size: clamp(2.2rem, 1.3rem + 2.7vw, 3.7rem); line-height: 1.06; }

/* The word that "mines" itself in on load */
.hero__title em {
  font-style: normal;
  color: var(--accent);
  position: relative;
  white-space: nowrap;
}

.hero__title em::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.04em;
  width: 100%;
  height: 0.12em;
  border-radius: 999px;
  background: var(--gold);
  transform-origin: left;
  animation: underline-draw var(--dur-slow) var(--ease-out) 500ms both;
}

@keyframes underline-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-m);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.stat__label {
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-top: 0.35rem;
  line-height: 1.35;
}

/* Hero artwork: a self-drawing ledger diagram */
.hero__art { position: relative; }

.hero__art svg { width: 100%; height: auto; overflow: visible; }

.float { animation: float 7s var(--ease-in-out) infinite; }
.float--b { animation-delay: -2.3s; }
.float--c { animation-delay: -4.6s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.spin-slow { animation: spin 26s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   4. Era switcher (Web1 / Web2 / Web3)
   Each era carries its own colour through --era, so tabs, panel, bubbles and
   highlights all light up in the same hue.
   -------------------------------------------------------------------------- */

/* --era is for text and outlines, --era-fill for fills, glows and sparkle */
[data-era="web1"] { --era: var(--era1); --era-soft: var(--era1-soft); --era-fill: var(--era1-fill); --on-era: var(--era1-on); }
[data-era="web2"] { --era: var(--era2); --era-soft: var(--era2-soft); --era-fill: var(--era2-fill); --on-era: var(--era2-on); }
[data-era="web3"] { --era: var(--era3); --era-soft: var(--era3-soft); --era-fill: var(--era3-fill); --on-era: var(--era3-on); }
[data-era] { --era-glow: color-mix(in srgb, var(--era-fill) 45%, transparent); }

/* Floating speech bubbles in the section header -------------------------- */

.bubbles {
  display: grid;
  gap: var(--space-s);
  justify-items: start;
}

.bubble {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 30rem;
  padding: 0.85rem 1.2rem;
  border: 1.5px solid color-mix(in srgb, var(--era) 40%, var(--rule));
  border-radius: 22px 22px 22px 6px;
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 16px 34px -24px var(--era-glow);
  animation: bob 5s var(--ease-in-out) infinite;
  transition: scale var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out);
}

.bubble:nth-child(2) { margin-left: clamp(0rem, 4vw, 2.5rem); animation-delay: -1.7s; }
.bubble:nth-child(3) { margin-left: clamp(0rem, 8vw, 5rem);   animation-delay: -3.4s; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-0.4deg); }
}

.bubble strong { color: var(--era); font-weight: 700; }

.bubble__dot {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--era-fill);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--era-fill) 25%, transparent);
  animation: pulse 2.4s var(--ease-in-out) infinite;
}

.bubble:hover {
  animation-play-state: paused;
  scale: 1.04;
  color: var(--ink);
  border-color: var(--era);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--era) 16%, transparent),
              0 22px 44px -20px var(--era-glow);
}
.bubble:active { scale: 0.97; transition-duration: 110ms; }

.bubble.is-active {
  color: var(--ink);
  border-color: var(--era);
  background: linear-gradient(100deg, var(--era-soft), var(--paper-raised) 85%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--era) 14%, transparent),
              0 18px 40px -22px var(--era-glow);
}

/* Layout ------------------------------------------------------------------ */

.era {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 60rem) {
  .era { grid-template-columns: 19rem minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
}

/* Tabs -------------------------------------------------------------------- */

.era__tabs {
  display: grid;
  gap: var(--space-m);
  position: relative;
}

/* Timeline rail between the tabs; fills up to the selected era */
.era__rail {
  position: absolute;
  left: calc(var(--space-m) + 1.35rem - 1px);
  top: 2rem;
  bottom: 2rem;
  width: 3px;
  border-radius: 3px;
  background: var(--rule);
  overflow: hidden;
}

.era__rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--era1-fill), var(--era2-fill), var(--era3-fill));
  clip-path: inset(0 0 calc((1 - var(--progress, 1)) * 100%) 0);
  transition: clip-path var(--dur-slow) var(--ease-out);
}

.era__tab {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-m);
  width: 100%;
  padding: var(--space-s) var(--space-m);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  text-align: left;
  color: var(--ink-faint);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out);
}

/* colour wash, revealed on hover and when selected */
.era__tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--era-soft) 10%, transparent 80%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}

/* light sweep across the tab on hover */
.era__tab-shine {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--era-fill) 35%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
}
.era__tab:hover .era__tab-shine { animation: shine 900ms var(--ease-out); }
@keyframes shine { to { transform: translateX(120%); } }

.era__tab:hover {
  transform: translateX(6px);
  color: var(--ink-soft);
  border-color: var(--era);
  box-shadow: 0 16px 32px -18px var(--era-glow);
}
.era__tab:hover::before { opacity: 0.65; }
.era__tab:active { transform: translateX(3px) scale(0.97); transition-duration: 110ms; }

.era__tab-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  border: 1.5px solid var(--era);
  background: var(--paper);
  color: var(--era);
  transition: transform var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out);
}
.era__tab-icon svg { width: 1.25rem; height: 1.25rem; }
.era__tab:hover .era__tab-icon { transform: rotate(-12deg) scale(1.14); }

.era__tab-text { display: grid; gap: 0.1rem; min-width: 0; }

.era__tab-year {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.era__tab-name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  transition: color var(--dur-mid) var(--ease-out);
}

.era__tab-chip {
  padding: 0.3rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--era) 55%, transparent);
  border-radius: var(--radius-pill);
  color: var(--era);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
.era__tab:hover .era__tab-chip { transform: scale(1.08); }

/* Selected tab: filled icon, pinging ring, breathing glow */
.era__tab[aria-selected="true"] {
  color: var(--ink);
  border-color: var(--era);
  transform: translateX(10px);
  animation: era-breathe 2.8s var(--ease-in-out) infinite;
}
.era__tab[aria-selected="true"]:hover { transform: translateX(13px); }
.era__tab[aria-selected="true"]:active { transform: translateX(8px) scale(0.97); }
.era__tab[aria-selected="true"]::before { opacity: 1; }
.era__tab[aria-selected="true"] .era__tab-name { color: var(--era); }
.era__tab[aria-selected="true"] .era__tab-icon { background: var(--era-fill); border-color: var(--era-fill); color: var(--on-era); }
.era__tab[aria-selected="true"] .era__tab-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--era-fill);
  border-radius: 50%;
  animation: ping 1.8s var(--ease-out) infinite;
}
.era__tab[aria-selected="true"] .era__tab-chip { background: var(--era-fill); color: var(--on-era); border-color: var(--era-fill); }

@keyframes era-breathe {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--era-fill) 22%, transparent), 0 18px 40px -18px var(--era-glow); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--era-fill) 12%, transparent),  0 24px 50px -16px var(--era-glow); }
}

@keyframes ping {
  from { transform: scale(0.92); opacity: 0.9; }
  to   { transform: scale(1.55); opacity: 0; }
}

/* Click ripple (added by main.js) */
.ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: color-mix(in srgb, var(--era-fill, var(--gold)) 38%, transparent);
  transform: scale(0);
  animation: ripple 650ms var(--ease-out) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* Panel ------------------------------------------------------------------- */

.era__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l);
  border: 1.5px solid color-mix(in srgb, var(--era) 50%, var(--rule));
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--era) 8%, transparent),
              0 28px 60px -34px var(--era-glow);
}

.era__panel[hidden] { display: none; }

/* flowing colour bar along the top edge */
.era__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--era-fill), color-mix(in srgb, var(--era-fill) 15%, transparent), var(--era-fill));
  background-size: 200% 100%;
  animation: bar-flow 3s linear infinite;
}
@keyframes bar-flow { to { background-position: -200% 0; } }

/* soft drifting glow in the corner */
.era__panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -9rem;
  right: -9rem;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--era-fill) 24%, transparent), transparent 70%);
  animation: glow-drift 6s var(--ease-in-out) infinite alternate;
}
@keyframes glow-drift { to { transform: translate(-2.5rem, 2.5rem) scale(1.15); } }

.era__watermark {
  position: absolute;
  z-index: -1;
  top: -0.12em;
  right: var(--space-l);
  font-family: var(--font-display);
  font-size: clamp(6rem, 12vw, 10rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--era-fill);
  opacity: 0.08;
  pointer-events: none;
}

/* content rises in each time a panel is shown */
.era__panel:not([hidden]) > * { animation: rise-in 600ms var(--ease-out) both; }
.era__panel:not([hidden]) > :nth-child(2) { animation-delay: 60ms; }
.era__panel:not([hidden]) > :nth-child(3) { animation-delay: 140ms; }
.era__panel:not([hidden]) > :nth-child(4) { animation-delay: 220ms; }
.era__panel:not([hidden]) > :nth-child(5) { animation-delay: 300ms; }
.era__panel:not([hidden]) > :nth-child(6) { animation-delay: 380ms; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
}

.era__verb {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.era__verb span { color: var(--ink-faint); }
.era__verb span.is-on {
  background: linear-gradient(90deg, var(--era) 0%, color-mix(in srgb, var(--era) 45%, var(--ink)) 50%, var(--era) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shimmer 3.5s linear infinite;
}
@keyframes text-shimmer { to { background-position: -200% 0; } }

.era__role-line {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--ink);
}

.era__role {
  padding: 0.02em 0.35em;
  border-radius: 0.35em;
  color: var(--era);
  font-weight: 700;
  background: linear-gradient(var(--era-soft), var(--era-soft)) no-repeat left center / 0% 100%;
  box-shadow: inset 0 -3px 0 var(--era-fill);
  animation: mark-sweep 900ms var(--ease-out) 500ms forwards;
}
@keyframes mark-sweep { to { background-size: 100% 100%; } }

.era__facts {
  display: grid;
  gap: 0.2rem;
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}

.era__fact {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-s);
  margin-inline: -0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  font-size: var(--step--1);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.era__fact:hover { background: var(--era-soft); transform: translateX(4px); }
.era__fact:hover dt { color: var(--era); }

@media (max-width: 30rem) { .era__fact { grid-template-columns: 1fr; gap: 0.15rem; } }

.era__fact dt { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; padding-top: 0.2rem; transition: color var(--dur-fast) var(--ease-out); }
.era__fact dd { color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   5. The Big 6 - compact concept cards + one explainer "stage"
   -------------------------------------------------------------------------- */

.big6 {
  font-style: normal;
  color: var(--accent);
  position: relative;
  display: inline-block;
}
.big6::after {
  content: "";
  position: absolute;
  left: -0.08em; right: -0.08em; bottom: 0.06em;
  height: 0.16em;
  border-radius: 999px;
  background: var(--gold);
  z-index: -1;
}

.concept {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  min-height: 15rem;
  padding: var(--space-l) var(--space-m) var(--space-m);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* gold bar that sweeps in along the top */
.concept::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}

/* soft golden light that follows the pointer (set by main.js) */
.concept::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 0%), var(--gold-soft), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}

.concept:hover::before,
.concept:focus-visible::before,
.concept.is-active::before { transform: scaleX(1); }
.concept:hover::after,
.concept.is-active::after { opacity: 1; }

.concept__index {
  position: absolute;
  top: var(--space-s);
  right: var(--space-m);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.concept__now {
  position: absolute;
  top: calc(var(--space-s) - 0.15rem);
  left: var(--space-m);
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: #0b0b09;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.concept.is-active .concept__now { opacity: 1; transform: none; }

.concept__badge {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-top: var(--space-xs);
  border-radius: 18px;
  border: 1.5px solid color-mix(in srgb, var(--gold) 55%, var(--rule));
  background: var(--gold-soft);
  color: var(--accent);
  transition: transform var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.concept__glyph { width: 2rem; height: 2rem; }
.concept__glyph [stroke] { vector-effect: non-scaling-stroke; }

.concept:hover .concept__badge { transform: rotate(-8deg) scale(1.1); }
.concept.is-active .concept__badge {
  background: var(--gold);
  border-color: var(--gold);
  color: #0b0b09;
  box-shadow: 0 10px 24px -10px var(--glow);
}

.concept__title { margin-top: var(--space-2xs); font-size: var(--step-2); }
.concept__lead { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; }

.concept__hint {
  margin-top: auto;
  padding-top: var(--space-s);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease-out);
}
.concept__hint svg { width: 1rem; height: 1rem; transition: transform var(--dur-mid) var(--ease-out); }
.concept:hover .concept__hint,
.concept.is-active .concept__hint { color: var(--accent); }
.concept:hover .concept__hint svg { transform: translateX(5px); }
.concept.is-active .concept__hint svg { transform: rotate(90deg); }

.hint-tap { display: none; }
@media (hover: none) { .hint-hover { display: none; } .hint-tap { display: inline; } }

.concept.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent), 0 22px 44px -24px var(--glow);
}

/* Stage ------------------------------------------------------------------- */

.stage {
  position: relative;
  margin-top: var(--space-l);
  border: 1.5px solid color-mix(in srgb, var(--gold) 55%, var(--rule));
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 9%, transparent),
              0 32px 64px -38px var(--glow);
}

.stage::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: var(--space-l);
  right: var(--space-l);
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 15%, transparent), var(--gold));
  background-size: 200% 100%;
  animation: bar-flow 3s linear infinite;
}

.stage__pane {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  padding: var(--space-l);
}
.stage__pane[hidden] { display: none; }

@media (min-width: 60rem) {
  .stage__pane { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--space-xl); padding: var(--space-l) var(--space-xl); }
}

.stage__art {
  position: relative;
  padding: var(--space-s);
  border-radius: var(--radius-lg);
  border: 1px dashed color-mix(in srgb, var(--gold) 45%, var(--rule));
  background: radial-gradient(circle at 50% 40%, var(--gold-soft), transparent 70%);
}
.stage__art .dg { width: 100%; height: auto; overflow: visible; }

.stage__kicker {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.stage__title { font-size: var(--step-3); margin-block: 0.35rem var(--space-s); }
.stage__text { color: var(--ink-soft); line-height: 1.72; max-width: 64ch; }

.stage__text .kw {
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--gold) 35%, transparent) 60%) no-repeat left / 0% 100%;
  animation: kw-sweep 700ms var(--ease-out) 350ms forwards;
}
@keyframes kw-sweep { to { background-size: 100% 100%; } }

.stage__terms {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-m);
}
.stage__terms-label {
  margin-right: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.kterm {
  position: relative;
  display: inline-flex;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink);
  cursor: help;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.kterm:hover, .kterm:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #0b0b09;
  transform: translateY(-2px);
}

.kterm__tip {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 10px);
  left: 50%;
  width: max-content;
  max-width: 15rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5);
}
.kterm__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
.kterm:hover .kterm__tip,
.kterm:focus-visible .kterm__tip { opacity: 1; transform: translate(-50%, 0); }

/* On phones the tooltip spans the chip row so it never runs off-screen */
@media (max-width: 40rem) {
  .kterm { position: static; }
  .kterm__tip { left: 0; right: 0; bottom: calc(100% + 8px); width: auto; max-width: none; transform: translateY(6px); }
  .kterm:hover .kterm__tip, .kterm:focus-visible .kterm__tip { transform: none; }
  .kterm__tip::after { display: none; }
}

/* Each newly shown pane rises in */
.stage__pane:not([hidden]) .stage__art { animation: stage-art-in 650ms var(--ease-out) both; }
.stage__pane:not([hidden]) .stage__copy > * { animation: rise-in 600ms var(--ease-out) both; }
.stage__pane:not([hidden]) .stage__copy > :nth-child(2) { animation-delay: 60ms; }
.stage__pane:not([hidden]) .stage__copy > :nth-child(3) { animation-delay: 130ms; }
.stage__pane:not([hidden]) .stage__copy > :nth-child(4) { animation-delay: 200ms; }
@keyframes stage-art-in { from { opacity: 0; transform: scale(0.94) rotate(-1deg); } }

/* Diagrams ---------------------------------------------------------------- */

.dg text { font-family: var(--font-display); }
.dg-box { fill: var(--paper-raised); stroke: var(--rule-strong); stroke-width: 1.5; }
.dg-box--gold { stroke: var(--gold); stroke-width: 2; }
.dg-bar { fill: var(--ink-faint); opacity: 0.45; }
.dg-hash { fill: var(--gold); animation: dg-sync 2.4s ease-in-out infinite; }
@keyframes dg-sync { 50% { opacity: 0.35; } }
.dg-edges path { fill: none; stroke: var(--rule-strong); stroke-width: 1.2; opacity: 0.6; }
.dg-links use { fill: none; stroke: var(--rule-strong); stroke-width: 1.3; stroke-dasharray: 3 5; opacity: 0.8; }
.dg-link { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; stroke-dasharray: 4 5; animation: dg-dash 1.2s linear infinite; }
.dg-link--gold { stroke: var(--gold); stroke-width: 2; }
.dg-link--accent { stroke: var(--accent); stroke-width: 1.8; }
@keyframes dg-dash { to { stroke-dashoffset: -18; } }
.dg-chainlink { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; }
.dg-divider { fill: none; stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 6; }
.dg-spark { fill: var(--gold); }
.dg-caption { font-size: 12px; fill: var(--ink-faint); }
.dg-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; fill: var(--ink-faint); }
.dg-tag--gold { fill: var(--accent); }
.dg-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; fill: var(--ink); }
.dg-strong { font-size: 13px; font-weight: 600; fill: var(--ink); }
.dg-small { font-size: 10.5px; fill: var(--ink-faint); }
.dg-mono { font-family: var(--font-code) !important; font-size: 11px; fill: var(--ink-soft); }
.dg-ink-stroke { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; }
.dg-accent-stroke, .dg-accent-stroke * { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dg-gold-stroke, .dg-gold-stroke * { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dg-gold-fill { fill: var(--gold); }
.dg-accent-fill { fill: var(--accent); }
.dg-glow { filter: drop-shadow(0 0 4px var(--glow)); animation: dg-sync 2s ease-in-out infinite; }

.dg-bob { animation: dg-bob 3s var(--ease-in-out) infinite; }
@keyframes dg-bob { 50% { transform: translateY(-5px); } }
.dg-float { animation: dg-bob 3s var(--ease-in-out) infinite; }
.dg-float--b { animation-delay: -1s; }
.dg-float--c { animation-delay: -2s; }

.dg-vote { transform-box: fill-box; transform-origin: center; animation: dg-pop 4s var(--ease-out) infinite both; }
.dg-vote circle { fill: var(--accent); }
.dg-vote path { fill: none; stroke: var(--on-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dg-vote--no circle { fill: var(--ink-faint); }
.dg-vote--no path { stroke: var(--paper); }
@keyframes dg-pop {
  0%, 6%   { opacity: 0; transform: scale(0.3); }
  16%      { opacity: 1; transform: scale(1.2); }
  22%, 88% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(1); }
}

.dg-slot { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 4; animation: dg-land 4s infinite; }
.dg-slot-text { animation: dg-land 4s infinite; }
@keyframes dg-land { 0%, 55% { opacity: 0.2; } 68%, 92% { opacity: 1; } 100% { opacity: 0.2; } }

.dg-code { fill: var(--paper-sunken); stroke: var(--rule); }
.dg-code-text { font-family: var(--font-code) !important; font-size: 11.5px; fill: var(--ink-soft); }
.dg-kw { fill: var(--accent); font-weight: 700; }
.dg-fn { fill: var(--ink); font-weight: 700; }
.dg-hl { fill: var(--gold); transform-box: fill-box; transform-origin: left center; animation: dg-sweep 4s ease-in-out infinite; }
@keyframes dg-sweep {
  0%       { transform: scaleX(0); opacity: 0.28; }
  40%, 85% { transform: scaleX(1); opacity: 0.28; }
  100%     { transform: scaleX(1); opacity: 0; }
}
.dg-check { fill: var(--paper-raised); stroke: var(--rule-strong); stroke-width: 1.5; }
.dg-tick { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; animation: dg-tick 4s infinite; }
.dg-tick--late { animation-delay: 0.5s; }
@keyframes dg-tick { 0%, 8% { stroke-dashoffset: 16; } 22%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 16; } }

.dg-coin { fill: var(--gold); stroke: color-mix(in srgb, var(--gold) 60%, var(--ink)); stroke-width: 1.5; }
.dg-coin-text { font-size: 14px; font-weight: 700; fill: #0b0b09; }
.dg-chip { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 1.2; }
.dg-chip-text { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; fill: var(--ink); }
.dg-tile { animation: dg-bob 3.4s var(--ease-in-out) infinite; }
.dg-tile--b { animation-delay: -1.1s; }
.dg-tile--c { animation-delay: -2.2s; }

.dg-track { fill: var(--paper-sunken); stroke: var(--rule); }
.dg-fill { fill: var(--gold); }
.dg-fill--muted { fill: var(--ink-faint); opacity: 0.5; }
.dg-grow { transform-box: fill-box; transform-origin: left center; animation: dg-grow 4s var(--ease-out) infinite; }
@keyframes dg-grow { 0% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
.dg-spin { stroke-dasharray: 6 4; transform-box: fill-box; transform-origin: center; animation: spin 8s linear infinite; }

/* --------------------------------------------------------------------------
   6. Smart-contract reader
   -------------------------------------------------------------------------- */

.contract {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 64rem) {
  .contract { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-xl); align-items: start; }
}

.code-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.code-card__bar {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-m);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-sunken);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.code-card__bar .dot { width: 0.5rem; height: 0.5rem; background: var(--rule-strong); opacity: 0.5; }

.code-card__body {
  margin: 0;
  padding: var(--space-m);
  overflow-x: auto;
  font-family: var(--font-code);
  font-size: 0.8rem;
  line-height: 1.75;
  tab-size: 2;
}

.code-line { display: block; white-space: pre; }

.code-line[data-note] { cursor: pointer; border-radius: var(--radius); transition: background-color var(--dur-fast) var(--ease-out); }
.code-line[data-note]:hover { background: var(--accent-soft); }
.code-line.is-active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }

.tok-key { color: var(--accent); }
.tok-type { color: var(--verify); }
.tok-str { color: var(--gold); }
.tok-com { color: var(--ink-faint); font-style: italic; }
.tok-fn { color: var(--ink); font-weight: 600; }

.contract__notes { display: grid; gap: var(--space-s); }

.contract__note {
  padding: var(--space-m);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.contract__note[hidden] { display: none; }
.contract__note h4 {
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   7. Myth / reality flip cards
   -------------------------------------------------------------------------- */

.myth {
  perspective: 1400px;
  min-height: 16rem;
  width: 100%;
  cursor: pointer;
  border-radius: var(--radius-lg);
  -webkit-tap-highlight-color: transparent;
}

.myth__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-in-out);
}

.myth[aria-pressed="true"] .myth__inner { transform: rotateY(180deg); }

.myth__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.myth__face--back {
  transform: rotateY(180deg);
  border-color: var(--verify);
  background: var(--verify-soft);
}

.myth__face h3 { font-size: var(--step-1); }
.myth__face p { font-size: var(--step--1); color: var(--ink-soft); }
.myth__face--back p { color: var(--ink); }

.myth__flag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.myth__face--back .myth__flag { color: var(--verify); }

.myth__hint {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.myth:hover .myth__hint { color: var(--accent); }

/* Without 3D support the cards still work: the back face simply stacks. */
@supports not (transform-style: preserve-3d) {
  .myth__inner { transform: none !important; }
  .myth__face { position: static; }
  .myth__face--back { transform: none; margin-top: var(--space-s); }
}

/* --------------------------------------------------------------------------
   8. Glossary
   -------------------------------------------------------------------------- */

.glossary { border-top: 1px solid var(--rule); }

.glossary__item { border-bottom: 1px solid var(--rule); }

.glossary__item summary {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding-block: var(--space-m);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.glossary__item summary::-webkit-details-marker { display: none; }
.glossary__item summary:hover { color: var(--accent); }

.glossary__term {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.glossary__pron { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); }

.glossary__sign {
  margin-inline-start: auto;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  position: relative;
}

.glossary__sign::before,
.glossary__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out);
}
.glossary__sign::after { transform: rotate(90deg); }
.glossary__item[open] .glossary__sign::after { transform: rotate(0deg); }

.glossary__body {
  padding-bottom: var(--space-m);
  max-width: var(--measure);
  font-size: var(--step--1);
  color: var(--ink-soft);
  animation: fade-up var(--dur-mid) var(--ease-out);
}

.glossary__body code {
  font-family: var(--font-code);
  font-size: 0.85em;
  background: var(--paper-sunken);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   9. Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* Hero statistic: the value is shown above its label, but the markup keeps
   the <dt> (label) before the <dd> (value) as the HTML spec requires. */
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stat__value .unit { color: var(--ink-faint); font-size: 0.62em; margin-left: 0.05em; }

/* --------------------------------------------------------------------------
   10. Hero artwork - today's platforms vs. Web3
   -------------------------------------------------------------------------- */

#heroArt text { font-family: var(--font-display); }
.art-label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; fill: var(--ink-faint); }
.art-small { font-size: 11px; fill: var(--ink-faint); }
.art-small text { fill: var(--ink-faint); }
.art-muted rect { fill: var(--paper-sunken); stroke: var(--rule-strong); stroke-width: 1.2; opacity: 0.8; }
.art-flow path {
  stroke: var(--ink-faint);
  stroke-width: 1.4;
  stroke-dasharray: 3 6;
  animation: art-flow 1.6s linear infinite;
}
@keyframes art-flow { to { stroke-dashoffset: -18; } }
.art-hub { fill: var(--paper-raised); stroke: var(--ink-faint); stroke-width: 1.6; }
.art-hub-ink { stroke: var(--ink-faint); }
.art-hub-title { font-size: 16px; font-weight: 600; fill: var(--ink-soft); }
.art-divider { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 6; fill: none; }
.art-pill-gold { fill: var(--gold); }
.art-pill-gold-text { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; fill: #0b0b09; }
.art-card rect { fill: var(--paper-raised); stroke: var(--accent); stroke-width: 1.6; }
.art-card-text text { font-size: 13px; font-weight: 500; fill: var(--ink); }
.art-wire use { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 4 5; opacity: 0.7; }
.art-block { fill: var(--paper-raised); stroke: var(--rule-strong); stroke-width: 1.8; }
.art-block--new { stroke: var(--gold); }
.art-ghost rect { stroke: var(--rule-strong); stroke-width: 1; opacity: 0.16; }
.art-mono { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; fill: var(--ink-faint); }
.art-bar { fill: var(--ink-faint); opacity: 0.35; }
.art-hash { fill: var(--accent); opacity: 0.75; }
.art-link use { stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 4 4; }

.twinkle { animation: twinkle 3.2s var(--ease-in-out) infinite; transform-origin: 0 0; }
.twinkle--b { animation-delay: -1.1s; animation-duration: 2.7s; }
.twinkle--c { animation-delay: -2.2s; animation-duration: 3.8s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.6) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.1) rotate(45deg); }
}

/* --------------------------------------------------------------------------
   11. Rounded cards: lift + golden glow on hover, press on click
   -------------------------------------------------------------------------- */

:is(.concept, .era__panel, .contract__note, .code-card, .callout, .wallet__panel,
    .block, .readout, .chain__bar, .myth, .stat) {
  transition-property: opacity, transform, box-shadow, border-color, background-color;
  transition-duration: var(--dur-slow), var(--dur-mid), var(--dur-mid), var(--dur-mid), var(--dur-mid);
  transition-timing-function: var(--ease-out);
}

:is(.concept, .era__panel, .contract__note, .code-card, .callout, .wallet__panel,
    .block, .chain__bar, .myth):hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  transition-delay: 0ms;
}

:is(.concept, .era__panel, .contract__note, .code-card, .callout, .wallet__panel,
    .block, .chain__bar, .myth):active {
  transform: translateY(-1px) scale(0.985);
  transition-duration: 120ms;
}

/* Keyboard users get the same golden ring */
:is(.concept, .contract__note, .callout, .block, .myth):focus-within {
  box-shadow: var(--shadow-hover);
}

.myth { border-radius: var(--radius-lg); }
.myth:hover .myth__face:not(.myth__face--back) { border-color: var(--gold); }

.readout:hover { background: var(--gold-soft); }


.stat { padding: var(--space-s); margin: calc(var(--space-s) * -1); border-radius: var(--radius); }
.stat:hover { background: var(--gold-soft); transform: translateY(-2px); }

.glossary__item summary { border-radius: var(--radius); padding-inline: var(--space-s); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.glossary__item summary:hover { background: var(--gold-soft); }
.glossary__item summary:active { transform: scale(0.995); }

/* Gold accents that belong to the new palette */
.dot--live { color: var(--gold); }

/* The era panel glows in its own era colour rather than gold */
.era .era__panel:hover {
  box-shadow: 0 0 0 1.5px var(--era-fill), 0 0 0 7px color-mix(in srgb, var(--era-fill) 14%, transparent),
              0 32px 64px -28px var(--era-glow);
}

/* Paragraph rhythm inside the era panel comes from the grid gap alone */
.era__panel .prose + .prose { margin-top: 0; }

/* Unselected era names keep a hint of their colour */
.era__tab:not([aria-selected="true"]) .era__tab-name { color: color-mix(in srgb, var(--era) 40%, var(--ink-faint)); }
.era__tab:not([aria-selected="true"]):hover .era__tab-name { color: var(--era); }

/* On narrow screens the tabs span the full width, so grow instead of slide */
@media (max-width: 60rem) {
  .era__tab:hover { transform: scale(1.015); }
  .era__tab[aria-selected="true"],
  .era__tab[aria-selected="true"]:hover { transform: scale(1.02); }
  .era__tab[aria-selected="true"]:active { transform: scale(0.98); }
}

/* --------------------------------------------------------------------------
   The Big 6 - compact, click-to-open cards
   -------------------------------------------------------------------------- */

.concepts-grid { gap: var(--space-s); }

.concept {
  min-height: 0;
  gap: 0.55rem;
  padding: var(--space-m) var(--space-m) 0.9rem;
}

.concept__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-right: 1.5rem;          /* room for the index number */
}

.concept__badge {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  margin-top: 0;
  border-radius: 14px;
}
.concept__glyph { width: 1.5rem; height: 1.5rem; }

.concept__title { margin-top: 0; font-size: var(--step-1); }
.concept__lead { font-size: 0.84rem; line-height: 1.5; }
.concept__hint { padding-top: 0.2rem; font-size: 0.68rem; }

.concept__index { top: 0.8rem; }

/* the "Showing" tag sits over the index when a card is open */
.concept__now { top: 0.65rem; left: auto; right: var(--space-m); }
.concept.is-active .concept__index { opacity: 0; }

.stage[hidden] { display: none; }
.stage { margin-top: var(--space-m); animation: stage-open 450ms var(--ease-out) both; }
@keyframes stage-open { from { opacity: 0; transform: translateY(-10px) scale(0.99); } }

.stage__pane { padding: var(--space-m) var(--space-l); gap: var(--space-l); }
@media (min-width: 60rem) {
  .stage__pane { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); padding: var(--space-m) var(--space-l); }
}
.stage__art .dg { max-height: 17rem; }
.stage__title { font-size: var(--step-2); margin-block: 0.2rem 0.5rem; }
.stage__text { font-size: 0.95rem; line-height: 1.6; max-width: none; }
.stage__terms { margin-top: var(--space-s); }

/* close button */
.stage__close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink-soft);
  transition: transform var(--dur-mid) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.stage__close svg { width: 0.95rem; height: 0.95rem; }
.stage__close:hover { transform: rotate(90deg); background: var(--gold); border-color: var(--gold); color: #0b0b09; }

/* ==========================================================================
   04 · The big picture - flowchart
   ========================================================================== */

.flow-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.flow-kicker::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.flow-kicker--center { justify-content: center; }
.flow-kicker--center::before { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* A. Two lanes: Web2 vs Web3 ------------------------------------------------ */

.lanes {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-2xl);
}

.lane {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 15rem;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.lane:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.lane__tag {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lane__track { display: flex; align-items: center; min-width: 0; }

.lane__box {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: 14px;
  background: var(--paper);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--dur-mid) var(--ease-out), background-color var(--dur-mid), color var(--dur-mid), border-color var(--dur-mid);
}
.lane__box svg { width: 1.1rem; height: 1.1rem; flex: none; }
.lane__box:hover { transform: translateY(-3px) scale(1.04); }

.lane__arrow {
  position: relative;
  flex: 1;
  min-width: 1.5rem;
  height: 2px;
  margin-inline: 0.4rem;
  background: repeating-linear-gradient(90deg, var(--rule-strong) 0 5px, transparent 5px 10px);
}
.lane__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  border: 5px solid transparent;
  border-left: 7px solid var(--rule-strong);
  border-right: 0;
}

.lane__verdict { font-size: 0.86rem; color: var(--ink-soft); }
.lane__verdict strong { color: var(--ink); }

/* Web2 is muted: power sits in the middle */
.lane--web2 { opacity: 0.85; }
.lane--web2 .lane__box { color: var(--ink-faint); border-color: var(--rule-strong); }
.lane--web2 .lane__box:nth-child(3),
.lane--web2 .lane__box:nth-child(5) { border-style: dashed; }
.lane--web2 .lane__spark { display: none; }

/* Web3 glows: power flows to you */
.lane--web3 {
  border-color: var(--gold);
  background: linear-gradient(100deg, var(--gold-soft), var(--paper-raised) 70%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 12%, transparent), 0 20px 40px -26px var(--glow);
}
.lane--web3 .lane__tag { color: var(--accent); }
.lane--web3 .lane__box { border-color: var(--accent); color: var(--ink); }
.lane--web3 .lane__box:last-child { background: var(--gold); border-color: var(--gold); color: #0b0b09; }
.lane--web3 .lane__arrow { background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 10px); background-size: 20px 2px; animation: lane-dash 0.9s linear infinite; }
.lane--web3 .lane__arrow::after { border-left-color: var(--accent); }
@keyframes lane-dash { to { background-position: 20px 0; } }

.lane__spark {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: lane-spark 1.8s var(--ease-in-out) infinite;
}
@keyframes lane-spark { from { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { left: calc(100% - 10px); opacity: 0; } }

@media (max-width: 62rem) {
  .lane { grid-template-columns: 1fr; gap: var(--space-s); padding: var(--space-m); }
}
@media (max-width: 34rem) {
  .lane__box { padding: 0.45rem 0.55rem; font-size: 0.74rem; gap: 0.3rem; }
  .lane__box svg { width: 0.95rem; height: 0.95rem; }
  .lane__arrow { min-width: 0.8rem; margin-inline: 0.2rem; }
}

/* B. The flow ---------------------------------------------------------------- */

.flow-wrap { margin-bottom: var(--space-2xl); }

.flow {
  --spine: 6rem;
  --node: 2.9rem;
  position: relative;
  display: grid;
  gap: var(--space-m);
  margin: 0 auto;
  padding: 0;
  max-width: 64rem;
}

/* the spine */
.flow::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: repeating-linear-gradient(var(--rule-strong) 0 6px, transparent 6px 11px);
  opacity: 0.7;
}
/* a golden pulse that travels down the spine */
.flow::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 4px;
  height: 7rem;
  margin-left: -2px;
  border-radius: 4px;
  background: linear-gradient(transparent, var(--gold), transparent);
  filter: drop-shadow(0 0 6px var(--gold));
  animation: spine-pulse 4.5s linear infinite;
}
@keyframes spine-pulse { from { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { top: calc(100% - 7rem); opacity: 0; } }

.fstep {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--spine) minmax(0, 1fr);
  align-items: center;
}

.fstep__node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border: 2px solid var(--accent);
  border-radius: 16px;
  background: var(--paper);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--paper);
  transition: transform var(--dur-mid) var(--ease-out), background-color var(--dur-mid), color var(--dur-mid), box-shadow var(--dur-mid);
}
.fstep__node--gold { background: var(--gold); border-color: var(--gold); color: #0b0b09; }
.fstep:hover .fstep__node {
  transform: rotate(-8deg) scale(1.15);
  background: var(--gold);
  border-color: var(--gold);
  color: #0b0b09;
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 10px color-mix(in srgb, var(--gold) 25%, transparent);
}

.fstep--left  .fcard { grid-column: 1; grid-row: 1; }
.fstep--right .fcard { grid-column: 3; grid-row: 1; }

/* connector from each card to the spine */
.fstep--left .fcard::after,
.fstep--right .fcard::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc((var(--spine) - var(--node)) / 2 + 2px);
  height: 2px;
  background: var(--accent);
  opacity: 0.6;
}
.fstep--left  .fcard::after { right: calc((var(--spine) - var(--node)) / -2 - 2px); }
.fstep--right .fcard::after { left:  calc((var(--spine) - var(--node)) / -2 - 2px); }

/* start and end span the whole width, centred on the spine */
.fstep--terminal { grid-template-columns: 1fr; justify-items: center; gap: var(--space-s); }
.fstep--terminal .fstep__node { grid-column: 1; grid-row: 1; }
.fstep--terminal .fcard { grid-column: 1; grid-row: 2; max-width: 34rem; text-align: center; }
.fstep--terminal .fcard__top { justify-content: center; }
.fstep--end .fstep__node { grid-row: 1; }

/* Cards */
.fcard {
  position: relative;
  padding: var(--space-m) var(--space-m) var(--space-m);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.fcard:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-hover); }
.fcard:active { transform: translateY(-1px) scale(0.985); }

.fcard--gold {
  border-color: var(--gold);
  background: linear-gradient(160deg, var(--gold-soft), var(--paper-raised) 70%);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 12%, transparent), 0 24px 48px -28px var(--glow);
}

.fcard__top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; }
.fcard__badge {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--rule));
  color: var(--accent);
  transition: transform var(--dur-mid) var(--ease-out);
}
.fcard__badge svg { width: 1.2rem; height: 1.2rem; }
.fcard:hover .fcard__badge { transform: rotate(-10deg) scale(1.1); }
.fcard__who { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.fcard__num { margin-left: auto; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-faint); }
.fstep--terminal .fcard__num { margin-left: 0; }
.fstep--terminal .fcard__num::before { content: "· "; }

.fcard__title { font-size: var(--step-1); margin-bottom: 0.35rem; }
.fcard__text { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }
.fcard__text b { color: var(--ink); font-weight: 600; }

/* little visuals inside cards */
.fchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin-top: var(--space-s); }
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 0.78rem;
  font-weight: 500;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.fchip svg { width: 0.9rem; height: 0.9rem; color: var(--accent); }
.fchip:hover { transform: translateY(-2px); background: var(--gold); border-color: var(--gold); color: #0b0b09; }
.fchip:hover svg { color: #0b0b09; }

.fsig, .fcode {
  display: grid;
  gap: 0.25rem;
  margin-top: var(--space-s);
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  font-family: var(--font-code);
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.fsig__row--ok { color: var(--accent); font-weight: 600; animation: dg-sync 2.4s ease-in-out infinite; }
.fcode i { font-style: normal; color: var(--accent); font-weight: 700; }
.fcode span:last-child { color: var(--ink); font-weight: 600; }

.fnodes { display: flex; gap: 0.4rem; margin-top: var(--space-s); }
.fnodes span {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 5px;
  border: 1.5px solid var(--rule-strong);
  animation: node-light 2.7s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i) * 0.15s);
}
@keyframes node-light {
  0%, 100% { background: transparent; border-color: var(--rule-strong); }
  30%, 60% { background: var(--gold); border-color: var(--gold); }
}

.fvotes { display: flex; align-items: center; gap: 0.35rem; margin-top: var(--space-s); }
.fvotes span {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 6px;
  background: var(--accent);
  opacity: 0.2;
  animation: vote-in 3s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * 0.2s);
}
.fvotes span.is-no { background: var(--ink-faint); }
.fvotes em { margin-left: 0.4rem; font-style: normal; font-size: 0.76rem; font-weight: 600; color: var(--accent); }
@keyframes vote-in { 0% { opacity: 0.2; transform: scale(0.8); } 20%, 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0.2; } }

.fblocks { display: flex; align-items: center; margin-top: var(--space-s); }
.fblocks span {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: 8px;
  font-family: var(--font-code);
  font-size: 0.7rem;
  color: var(--ink-soft);
}
.fblocks i { width: 0.8rem; height: 2px; background: var(--gold); }
.fblocks .is-new { border-color: var(--gold); background: var(--gold); color: #0b0b09; font-weight: 700; animation: block-new 2.4s var(--ease-in-out) infinite; }
@keyframes block-new { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 50%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* Decision row ---------------------------------------------------------------- */

.fstep--decision { padding-block: var(--space-s) var(--space-l); }

.fdiamond {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 16px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 7px var(--paper), 0 0 0 11px color-mix(in srgb, var(--gold) 25%, transparent), 0 14px 30px -10px var(--glow);
  animation: diamond-breathe 2.6s var(--ease-in-out) infinite;
}
.fdiamond span {
  transform: rotate(-45deg);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: #0b0b09;
}
@keyframes diamond-breathe {
  0%, 100% { box-shadow: 0 0 0 7px var(--paper), 0 0 0 11px color-mix(in srgb, var(--gold) 25%, transparent), 0 14px 30px -10px var(--glow); }
  50%      { box-shadow: 0 0 0 7px var(--paper), 0 0 0 15px color-mix(in srgb, var(--gold) 12%, transparent), 0 14px 30px -10px var(--glow); }
}

.fstep--decision .fcard { grid-column: 1; grid-row: 1; }
.fstep--decision .fcard::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc((var(--spine) - 4.3rem) / -2 - 2px);
  width: calc((var(--spine) - 4.3rem) / 2 + 2px);
  height: 2px;
  background: var(--accent);
  opacity: 0.6;
}

.fchecks { display: grid; gap: 0.4rem; margin-top: 0.3rem; font-size: 0.9rem; color: var(--ink-soft); }
.fchecks li { display: flex; align-items: center; gap: 0.55rem; }
.ftick {
  flex: none;
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 6px;
  border: 1.5px solid var(--accent);
  animation: tick-box 3.6s infinite;
}
.fchecks li:nth-child(2) .ftick { animation-delay: 0.4s; }
.fchecks li:nth-child(3) .ftick { animation-delay: 0.8s; }
.ftick::after {
  content: "";
  position: absolute;
  left: 0.33rem;
  top: 0.1rem;
  width: 0.3rem;
  height: 0.6rem;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  animation: tick-mark 3.6s infinite;
  animation-delay: inherit;
}
@keyframes tick-box  { 0%, 12% { background: transparent; } 22%, 90% { background: var(--accent); } 100% { background: transparent; } }
@keyframes tick-mark { 0%, 12% { transform: rotate(45deg) scale(0); } 22%, 90% { transform: rotate(45deg) scale(1); } 100% { transform: rotate(45deg) scale(0); } }

.fbranch {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 0.4rem;
}
.fbranch::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: calc((var(--spine) - 4.3rem) / 2 + 0.4rem);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink-faint) 0 5px, transparent 5px 9px);
}
.fbranch__label {
  position: absolute;
  top: calc(50% - 1.5rem);
  left: -0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.freject {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border: 1.5px dashed var(--rule-strong);
  border-radius: 16px;
  background: var(--paper-sunken);
  font-size: 0.86rem;
  color: var(--ink-faint);
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid);
}
.freject svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; }
.freject strong { color: var(--ink-soft); }
.freject:hover { transform: translateX(4px); border-color: var(--ink-faint); }

.fyes {
  position: absolute;
  left: 50%;
  bottom: -0.2rem;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 0 0 5px var(--paper);
}

/* Slide in from the side the card sits on */
.fstep[data-reveal] { transform: none; }
.fstep[data-reveal] .from-left  { transform: translateX(-28px); transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-mid), border-color var(--dur-mid); }
.fstep[data-reveal] .from-right { transform: translateX(28px);  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-mid), border-color var(--dur-mid); }
.fstep[data-reveal].is-visible .from-left,
.fstep[data-reveal].is-visible .from-right { transform: none; }
.fstep.is-visible .fcard:hover { transform: translateY(-4px); }

/* Phones & tablets: the spine moves to the left edge */
@media (max-width: 52rem) {
  .flow { --spine: 3.4rem; --node: 2.4rem; gap: var(--space-s); }
  .flow::before, .flow::after { left: calc(var(--spine) / 2); }
  .fstep { grid-template-columns: var(--spine) minmax(0, 1fr); }
  .fstep__node { grid-column: 1; font-size: 0.95rem; border-radius: 12px; box-shadow: 0 0 0 4px var(--paper); }
  .fstep--left .fcard, .fstep--right .fcard { grid-column: 2; }
  .fstep--left .fcard::after { left: calc((var(--spine) - var(--node)) / -2 - 2px); right: auto; }
  .fstep--terminal { grid-template-columns: var(--spine) minmax(0, 1fr); justify-items: stretch; }
  .fstep--terminal .fcard { grid-column: 2; grid-row: 1; max-width: none; text-align: left; }
  .fstep--terminal .fcard__top, .fstep--terminal .fchips { justify-content: flex-start; }
  .fstep--decision { grid-template-columns: var(--spine) minmax(0, 1fr); row-gap: var(--space-s); padding-bottom: var(--space-xl); }
  .fdiamond { grid-column: 1; width: 2.6rem; height: 2.6rem; border-radius: 10px; }
  .fdiamond span { font-size: 0.62rem; }
  .fstep--decision .fcard { grid-column: 2; }
  .fstep--decision .fcard::after { display: none; }
  .fbranch { grid-column: 2; grid-row: 2; padding-left: 1.4rem; }
  .fbranch::before { left: 0; right: auto; width: 1.1rem; }
  .fbranch__label { left: 0; top: -1.1rem; }
  .fyes { left: calc(var(--spine) / 2); }
  .fstep[data-reveal] .from-left { transform: translateX(28px); }
}

/* C. What matters ----------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-s);
}
.pillar {
  padding: var(--space-m);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid);
}
.pillar.is-visible:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: var(--shadow-hover); }
.pillar:active { scale: 0.98; }
.pillar__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: var(--space-s);
  border-radius: 14px;
  background: var(--gold);
  color: #0b0b09;
  transition: transform var(--dur-slow) var(--ease-out);
}
.pillar__icon svg { width: 1.35rem; height: 1.35rem; }
.pillar:hover .pillar__icon { transform: rotate(360deg); }
.pillar h3 { font-size: var(--step-1); margin-bottom: 0.3rem; }
.pillar p { font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }

/* flowchart fine-tuning */
.fbranch__label { top: auto; bottom: calc(50% + 1.9rem); left: 0.9rem; }
@media (max-width: 34rem) {
  .lane__track { min-width: 0; }
  .lane__box { flex: 0 1 auto; min-width: 0; white-space: normal; line-height: 1.2; }
  .lane__arrow { flex: 0 0 0.9rem; }
}
@media (max-width: 52rem) {
  .fdiamond { width: 2.3rem; height: 2.3rem; }
  .fdiamond span { font-size: 0.55rem; }
  .fyes { left: 0; transform: none; }
  .fbranch__label { bottom: auto; top: -1.1rem; left: 0; }
}
@media (max-width: 34rem) { .lane__box svg { display: none; } .lane__box { padding: 0.45rem 0.6rem; } }

/* ==========================================================================
   05 · Myth-busting quiz
   ========================================================================== */

.quiz-section { position: relative; overflow: hidden; }

.confetti {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 300;
  pointer-events: none;
}

.quiz {
  position: relative;
  display: grid;
  gap: var(--space-l);
  align-items: start;
}
@media (min-width: 60rem) {
  .quiz { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-xl); }
}

/* Decoration: twinkling sparkles and floating question marks */
.quiz__decor { position: absolute; inset: -2.5rem -1rem; pointer-events: none; z-index: 0; }
.qspark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(22px * var(--s));
  height: calc(22px * var(--s));
  background: var(--gold);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: twinkle 3.2s var(--ease-in-out) infinite;
  animation-delay: calc(var(--d) * -1);
}
.qmark {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  opacity: 0.12;
  animation: dg-bob 6s var(--ease-in-out) infinite;
}
.qmark--a { font-size: 9rem; left: -1.5rem; top: 30%; transform: rotate(-12deg); }
.qmark--b { font-size: 6rem; right: 17%; top: -2.5rem; animation-delay: -2s; }
.qmark--c { font-size: 7rem; right: -1rem; bottom: -1rem; animation-delay: -4s; }
@media (max-width: 60rem) { .qmark--b { right: 4%; } }

/* The question card */
.qcard {
  position: relative;
  z-index: 1;
  min-height: 26rem;
  padding: var(--space-l);
  border: 1.5px solid color-mix(in srgb, var(--gold) 55%, var(--rule));
  border-radius: 28px;
  background:
    radial-gradient(40rem 20rem at 100% 0%, var(--gold-soft), transparent 60%),
    var(--paper-raised);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 9%, transparent), 0 34px 70px -40px var(--glow);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.qcard.is-leaving { opacity: 0; transform: translateX(-18px); }
.qcard.is-entering > * { animation: rise-in 520ms var(--ease-out) both; }
.qcard.is-entering > :nth-child(2) { animation-delay: 40ms; }
.qcard.is-entering > :nth-child(3) { animation-delay: 90ms; }
.qcard.is-entering > :nth-child(4) { animation-delay: 140ms; }
@media (max-width: 40rem) { .qcard { padding: var(--space-m); border-radius: 22px; min-height: 0; } }

.qcard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s); }
.qcard__count { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-faint); }
.qcard__count strong { color: var(--ink); font-size: 1rem; }
.qcard__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: #0b0b09;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.qcard__tag svg { width: 0.75rem; height: 0.75rem; animation: spin 6s linear infinite; }

.qbar {
  height: 8px;
  margin: var(--space-m) 0 var(--space-l);
  border-radius: 8px;
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.qbar__fill {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transition: width 700ms var(--ease-out);
}

.qcard__q { font-size: var(--step-3); line-height: 1.1; margin-bottom: var(--space-l); max-width: 24ch; }

/* Options */
.qopts { display: grid; gap: var(--space-s); }
.qopt {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-m);
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1.5px solid var(--rule);
  border-radius: 18px;
  background: var(--paper);
  text-align: left;
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--ink);
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid), box-shadow var(--dur-mid), background-color var(--dur-mid), opacity var(--dur-mid);
  animation: rise-in 500ms var(--ease-out) both;
  animation-delay: calc(120ms + var(--i) * 70ms);
}
.qopt:not(:disabled):hover {
  transform: translateX(6px);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent), 0 16px 30px -20px var(--glow);
}
.qopt:not(:disabled):active { transform: translateX(3px) scale(0.98); }
.qopt:disabled { cursor: default; }

.qopt__letter {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  border: 1.5px solid var(--rule-strong);
  font-weight: 700;
  font-size: 0.9rem;
  transition: background-color var(--dur-mid), color var(--dur-mid), border-color var(--dur-mid), transform var(--dur-mid) var(--ease-out);
}
.qopt:not(:disabled):hover .qopt__letter { background: var(--gold); border-color: var(--gold); color: #0b0b09; transform: rotate(-8deg); }

.qopt__mark { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; }
.qopt__mark svg { width: 1.25rem; height: 1.25rem; }

.qopt.is-correct {
  border-color: var(--accent);
  background: linear-gradient(100deg, var(--gold-soft), var(--paper) 80%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  animation: pop 450ms var(--ease-out);
}
.qopt.is-correct .qopt__letter { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.qopt.is-correct .qopt__mark { color: var(--accent); }
.qopt.is-wrong { border-color: var(--ink-faint); border-style: dashed; color: var(--ink-faint); animation: nudge 420ms var(--ease-out); }
.qopt.is-wrong .qopt__letter { border-color: var(--ink-faint); color: var(--ink-faint); }
.qopt.is-wrong .qopt__mark { color: var(--ink-faint); }
.qopt.is-dim { opacity: 0.45; }
@keyframes pop { 40% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* Feedback */
.qfeedback { display: none; }
.qfeedback.is-open {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px dashed var(--rule-strong);
  animation: rise-in 500ms var(--ease-out) both;
}
.qfeedback__verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
}
.qfeedback__verdict svg { width: 1.6rem; height: 1.6rem; padding: 0.25rem; border-radius: 50%; }
.qfeedback.is-right .qfeedback__verdict { color: var(--accent); }
.qfeedback.is-right .qfeedback__verdict svg { background: var(--accent); color: var(--on-accent); }
.qfeedback.is-wrong .qfeedback__verdict svg { background: var(--ink-faint); color: var(--paper); }
.qfeedback__cheer { color: var(--ink-soft); font-size: var(--step-0); }

.qfact {
  position: relative;
  padding: var(--space-m) var(--space-m) var(--space-m) 1.4rem;
  border-radius: 18px;
  background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--rule));
  overflow: hidden;
}
.qfact::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--gold); }
.qfact__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.qfact__label svg { width: 0.8rem; height: 0.8rem; color: var(--gold); }
.qfact p { color: var(--ink); line-height: 1.6; }

.qnext { justify-self: start; margin-top: var(--space-xs); padding: 0.8rem 1.4rem; font-size: 0.8rem; }

/* Side panel */
.qside {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l) var(--space-m);
  border: 1.5px solid var(--rule);
  border-radius: 28px;
  background: var(--paper-raised);
  box-shadow: var(--shadow-card);
}
@media (min-width: 60rem) { .qside { position: sticky; top: 6rem; } }
@media (max-width: 60rem) {
  .qside { grid-template-columns: auto minmax(0, 1fr); align-items: center; order: -1; padding: var(--space-m); }
  .qsteps { grid-column: 2; }
  .qrank { grid-column: 1 / -1; }
}

.qring { position: relative; width: 9rem; height: 9rem; justify-self: center; }
@media (max-width: 60rem) { .qring { width: 6.5rem; height: 6.5rem; } }
.qring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qring__track { fill: none; stroke: var(--paper-sunken); stroke-width: 10; }
.qring__fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 314.16;
  stroke-dashoffset: 314.16;
  transition: stroke-dashoffset 900ms var(--ease-out);
  filter: drop-shadow(0 0 6px var(--glow));
}
.qring__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.qring__label strong { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; }
.qring__label span { font-size: 0.7rem; color: var(--ink-faint); letter-spacing: 0.04em; }
@media (max-width: 60rem) { .qring__label strong { font-size: 1.7rem; } .qring__label span { font-size: 0.6rem; } }

.qsteps { display: grid; gap: 0.35rem; }
.qsteps li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 12px;
  font-size: 0.85rem;
  color: var(--ink-faint);
  transition: background-color var(--dur-mid), color var(--dur-mid);
}
.qsteps li span {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 9px;
  border: 1.5px solid var(--rule-strong);
  font-size: 0.75rem;
  font-weight: 700;
  transition: background-color var(--dur-mid), color var(--dur-mid), border-color var(--dur-mid), transform var(--dur-mid) var(--ease-out);
}
.qsteps li.is-current { background: var(--gold-soft); color: var(--ink); }
.qsteps li.is-current span { border-color: var(--gold); animation: pulse 2s var(--ease-in-out) infinite; }
.qsteps li.is-right { color: var(--ink); }
.qsteps li.is-right span { background: var(--gold); border-color: var(--gold); color: #0b0b09; transform: rotate(-8deg); }
.qsteps li.is-wrong span { border-style: dashed; }
@media (max-width: 60rem) {
  .qsteps { grid-template-columns: repeat(5, auto); justify-content: start; gap: 0.3rem; }
  .qsteps li { padding: 0; font-size: 0; gap: 0; }
  .qsteps li span { font-size: 0.75rem; }
}

.qrank {
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 1rem;
  border-radius: 16px;
  background: linear-gradient(120deg, var(--gold), var(--gold-hi));
  color: #0b0b09;
  text-align: center;
}
.qrank__label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.qrank strong { font-family: var(--font-display); font-size: 1.1rem; }

/* Result screen */
.qresult { display: grid; justify-items: center; text-align: center; gap: var(--space-s); }
.qbadge { position: relative; width: 8.5rem; height: 8.5rem; animation: badge-in 800ms var(--ease-out) both; }
.qbadge svg { width: 100%; height: 100%; filter: drop-shadow(0 16px 24px var(--glow)); }
.qbadge__shape { fill: var(--gold); }
.qbadge__inner { fill: none; stroke: #0b0b09; stroke-width: 2; stroke-dasharray: 4 5; opacity: 0.35; }
.qbadge__score {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  color: #0b0b09;
}
.qbadge__score small { font-size: 1.1rem; opacity: 0.7; }
@keyframes badge-in { from { transform: scale(0.4) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.08) rotate(4deg); } }
.qresult__rank { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.qresult__title { font-size: var(--step-3); }
.qresult__msg { max-width: 44ch; color: var(--ink-soft); }
.qrecap { display: grid; gap: 0.4rem; width: 100%; max-width: 32rem; margin-block: var(--space-s); text-align: left; }
.qrecap li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 0.88rem;
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid);
}
.qrecap li:hover { transform: translateX(4px); border-color: var(--gold); }
.qrecap svg { flex: none; width: 1.2rem; height: 1.2rem; padding: 0.2rem; border-radius: 50%; }
.qrecap li.is-right svg { background: var(--accent); color: var(--on-accent); }
.qrecap li.is-wrong svg { background: var(--ink-faint); color: var(--paper); }
.qresult .qnext { justify-self: center; }
.qbadge__score { display: flex; align-items: baseline; justify-content: center; padding-top: 2.3rem; padding-bottom: 0; }

/* ==========================================================================
   07 · Decoder (glossary)
   ========================================================================== */

.gloss-section { position: relative; overflow: hidden; padding-top: 0; }

/* Giant scrolling ticker of the ten terms */
.gmarquee {
  overflow: hidden;
  margin-bottom: var(--space-2xl);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(90deg, var(--paper), var(--gold-soft) 50%, var(--paper));
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.gmarquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.gmarquee__track span {
  flex: none;
  padding-right: 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 45%, transparent);
}
.gmarquee__track i { font-style: normal; color: var(--gold); -webkit-text-stroke: 0; padding-inline: 0.4em; font-size: 0.6em; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }

.gloss {
  display: grid;
  gap: var(--space-l);
  align-items: start;
}
@media (min-width: 60rem) {
  .gloss { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-xl); }
}

/* Tiles ----------------------------------------------------------------------- */

.gtiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
  perspective: 900px;
}

.gtile {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border: 1.5px solid var(--rule);
  border-radius: 20px;
  background: var(--paper-raised);
  text-align: left;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 180ms var(--ease-out), border-color var(--dur-mid), box-shadow var(--dur-mid), background-color var(--dur-mid);
  animation: tile-in 600ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }

/* spotlight that follows the pointer */
.gtile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(12rem circle at var(--gx) var(--gy), var(--gold-soft), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur-mid);
}
.gtile:hover::before { opacity: 1; }
.gtile:hover { border-color: var(--gold); box-shadow: 0 18px 36px -22px var(--glow); }
.gtile:active { transform: scale(0.97); }

.gtile__icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--gold) 55%, var(--rule));
  background: var(--gold-soft);
  color: var(--accent);
  transition: transform var(--dur-mid) var(--ease-out), background-color var(--dur-mid), color var(--dur-mid);
}
.gtile__icon svg { width: 1.3rem; height: 1.3rem; }
.gtile:hover .gtile__icon { transform: translateZ(20px) rotate(-10deg) scale(1.08); }

.gtile__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.gtile__cat { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.gtile[data-danger="true"] .gtile__cat::after { content: " · ⚠"; color: var(--gold); }
.gtile__num { position: absolute; top: 0.55rem; right: 0.75rem; font-size: 0.66rem; color: var(--ink-faint); letter-spacing: 0.06em; }

.gtile.is-active {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--gold), var(--gold-hi));
  color: #0b0b09;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent), 0 20px 40px -20px var(--glow);
}
.gtile.is-active .gtile__icon { background: #0b0b09; border-color: #0b0b09; color: var(--gold); }
.gtile.is-active .gtile__cat,
.gtile.is-active .gtile__num { color: rgba(11, 11, 9, 0.65); }
.gtile.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: tile-shine 2.8s var(--ease-in-out) infinite;
}
@keyframes tile-shine { 60%, 100% { transform: translateX(120%); } }

/* Phones: tiles become a swipeable strip above the card */
@media (max-width: 60rem) {
  .gtiles {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.4rem var(--gutter) 0.8rem;
    scrollbar-width: none;
  }
  .gtiles::-webkit-scrollbar { display: none; }
  .gtile { flex: 0 0 auto; scroll-snap-align: start; padding: 0.6rem 1.6rem 0.6rem 0.7rem; }
  .gtile__icon { width: 2.2rem; height: 2.2rem; }
}

/* Card ------------------------------------------------------------------------ */

.gcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-l);
  border: 1.5px solid var(--gold);
  border-radius: 30px;
  background: var(--paper-raised);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 10%, transparent), 0 40px 80px -40px var(--glow);
}
@media (min-width: 60rem) { .gcard { position: sticky; top: 6rem; } }
@media (max-width: 40rem) { .gcard { padding: var(--space-m); border-radius: 24px; } }
.gcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* slowly turning golden aurora behind everything */
.gcard__glow {
  position: absolute;
  z-index: -1;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent, var(--gold-soft), transparent 30%, var(--gold-soft) 55%, transparent 70%);
  animation: spin 18s linear infinite;
  opacity: 0.9;
}
.gcard::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.5px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--paper-raised) 88%, transparent);
}

.gpane[hidden] { display: none; }
.gpane:not([hidden]) > * { animation: rise-in 520ms var(--ease-out) both; }
.gpane:not([hidden]) > :nth-child(2) { animation-delay: 60ms; }
.gpane:not([hidden]) > :nth-child(3) { animation-delay: 110ms; }
.gpane:not([hidden]) > :nth-child(4) { animation-delay: 170ms; }

.gpane__art {
  margin-bottom: var(--space-m);
  padding: var(--space-s);
  border-radius: 20px;
  border: 1px dashed color-mix(in srgb, var(--gold) 50%, var(--rule));
  background:
    radial-gradient(circle at 50% 45%, var(--gold-soft), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--rule) 45%, transparent) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--rule) 45%, transparent) 23px 24px);
}
.gpane:not([hidden]) .gpane__art { animation: stage-art-in 650ms var(--ease-out) both; }
.gpane__art .dg { width: 100%; height: auto; max-height: 14rem; display: block; margin-inline: auto; }

.gpane__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); }
.gpane__cat {
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--rule));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.gpane__cat--danger { background: var(--gold); border-color: var(--gold); color: #0b0b09; animation: pulse 2.4s var(--ease-in-out) infinite; }
.gpane__count { font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.06em; }

.gpane__term {
  margin-block: 0.4rem var(--space-m);
  font-size: var(--step-4);
  line-height: 1;
  background: linear-gradient(90deg, var(--ink) 0%, var(--accent) 45%, var(--gold) 55%, var(--ink) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shimmer 6s linear infinite;
}

.gpane__rows { display: grid; gap: var(--space-s); }
.grow {
  padding: 0.8rem 1rem;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid);
}
.grow:hover { transform: translateX(5px); border-color: var(--gold); }
.grow__label { display: block; margin-bottom: 0.2rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.grow p { color: var(--ink); line-height: 1.55; }
.grow--like { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 50%, var(--rule)); }
.grow--like p { font-style: italic; }
.grow__mono { font-family: var(--font-code); font-size: 0.86rem; color: var(--ink-soft) !important; }

.gcard__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); margin-top: var(--space-m); }
.gnav {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  color: var(--ink);
  transition: transform var(--dur-mid) var(--ease-out), background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.gnav svg { width: 1.1rem; height: 1.1rem; }
.gnav:hover { background: var(--gold); border-color: var(--gold); color: #0b0b09; transform: scale(1.1); }
.gnav:active { transform: scale(0.94); }
.gdots { display: flex; gap: 0.35rem; }
.gdots span { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--rule-strong); transition: width var(--dur-mid) var(--ease-out), background-color var(--dur-mid); }
.gdots span.is-on { width: 1.6rem; background: var(--gold); }

/* Extra diagram bits used by the decoder */
.dg-gold-text { fill: var(--accent); }
.dg-track-arc { fill: none; stroke: var(--paper-sunken); stroke-width: 16; stroke-linecap: round; }
.dg-fill-arc { fill: none; stroke: var(--gold); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 283; animation: arc-fill 4s var(--ease-in-out) infinite; }
@keyframes arc-fill { 0% { stroke-dashoffset: 283; } 50%, 70% { stroke-dashoffset: 110; } 100% { stroke-dashoffset: 283; } }
.dg-needle { transform-origin: 180px 140px; animation: needle 4s var(--ease-in-out) infinite; }
.dg-needle path { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.dg-needle circle { fill: var(--ink); }
@keyframes needle { 0% { transform: rotate(-88deg); } 50%, 70% { transform: rotate(24deg); } 100% { transform: rotate(-88deg); } }
.dg-seed { animation: rise-in 500ms var(--ease-out) both; }
.dg-blur { filter: blur(3px); transition: filter var(--dur-mid); }
.gpane__art:hover .dg-blur { filter: blur(1.5px); }
.dg-warn { fill: var(--gold); }
.dg-warn-text { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; fill: #0b0b09; }
.dg-pool { fill: color-mix(in srgb, var(--gold-soft) 70%, transparent); stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 5 5; }
.dg-queue { animation: dg-bob 2.6s var(--ease-in-out) infinite; }
.dg-queue--b { animation-delay: -0.8s; }
.dg-queue--c { animation: queue-go 3.2s var(--ease-in-out) infinite; }
@keyframes queue-go { 0%, 35% { transform: translateX(0); opacity: 1; } 70% { transform: translateX(120px); opacity: 0; } 71% { transform: translateX(0); opacity: 0; } 100% { opacity: 1; } }
.dg-lockbg { fill: var(--gold); }
.dg-lock { fill: none; stroke: #0b0b09; stroke-width: 2.2; stroke-linecap: round; }
.dg-pulse { animation: dg-sync 1.8s ease-in-out infinite; }
.dg-coin--toy { fill: var(--paper-raised); stroke: var(--gold); stroke-dasharray: 3 3; }
.dg-island { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 1.8; }
.dg-bridge { fill: none; stroke: var(--ink-soft); stroke-width: 5; stroke-linecap: round; }
.dg-grid { fill: none; stroke: var(--rule); stroke-width: 1; }
.dg-rug { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: rug-draw 4s var(--ease-in-out) infinite; }
@keyframes rug-draw { 0% { stroke-dashoffset: 420; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (max-width: 60rem) { .gtile__num { display: none; } .gtile { padding-right: 1rem; } }

/* ==========================================================================
   Hero, turned up
   ========================================================================== */

.hero { isolation: isolate; padding-bottom: var(--space-xl); }

.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  animation: aurora 16s var(--ease-in-out) infinite alternate;
}
.aurora--a { width: 38rem; height: 38rem; right: -8rem; top: -10rem; background: var(--gold-soft); }
.aurora--b { width: 26rem; height: 26rem; right: 18%; bottom: -8rem; background: color-mix(in srgb, var(--gold) 38%, transparent); animation-delay: -5s; }
.aurora--c { width: 24rem; height: 24rem; left: -8rem; top: 30%; background: color-mix(in srgb, var(--accent) 16%, transparent); animation-delay: -9s; }
@keyframes aurora {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-3rem, 2rem) scale(1.12); }
  100% { transform: translate(2rem, -2rem) scale(0.95); }
}
.hero__grid-lines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, color-mix(in srgb, var(--rule) 70%, transparent) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, color-mix(in srgb, var(--rule) 70%, transparent) 47px 48px);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 20%, transparent 75%);
  opacity: 0.8;
}
.hspark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(20px * var(--s));
  height: calc(20px * var(--s));
  background: var(--gold);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: twinkle 3s var(--ease-in-out) infinite;
  animation-delay: calc(var(--d) * -1);
}

/* kicker */
.hero__kicker { flex-wrap: wrap; }
.badge--glow {
  position: relative;
  border-color: transparent;
  background:
    linear-gradient(var(--paper-raised), var(--paper-raised)) padding-box,
    conic-gradient(from var(--angle, 0deg), var(--gold), transparent 30%, var(--accent) 55%, transparent 75%, var(--gold)) border-box;
  border: 1.5px solid transparent;
  animation: border-spin 5s linear infinite;
  color: var(--ink);
}
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes border-spin { to { --angle: 360deg; } }
.hero__chip {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--gold);
  color: #0b0b09;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: dg-bob 3s var(--ease-in-out) infinite;
}

/* title: words rise in one by one */
.hw {
  display: inline-block;
  animation: word-in 900ms var(--ease-out) both;
  animation-delay: calc(150ms + var(--w) * 110ms);
}
@keyframes word-in { from { opacity: 0; transform: translateY(0.45em) rotate(3deg); filter: blur(8px); } }
.hero__title em {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 35%, var(--gold) 50%, var(--accent) 65%, var(--accent) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shimmer 5s linear infinite;
}
.hero__title em::after { height: 0.13em; box-shadow: 0 0 18px var(--glow); }

.lede { animation: rise-in 800ms var(--ease-out) 800ms both; }
.hero__actions { animation: rise-in 800ms var(--ease-out) 950ms both; }
.hero__trust { animation: rise-in 800ms var(--ease-out) 1050ms both; }

/* buttons */
.btn--shine { position: relative; overflow: hidden; padding: 0.95rem 1.5rem; box-shadow: 0 14px 30px -14px var(--glow); }
.btn--shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: tile-shine 3.2s var(--ease-in-out) infinite;
}
.btn--shine .btn__icon { transition: transform var(--dur-mid) var(--ease-out); }
.btn--shine:hover .btn__icon { transform: translateX(5px); }
.btn--ghost-gold {
  padding: 0.95rem 1.5rem;
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--ink);
}
.btn--ghost-gold:hover { background: var(--gold); color: #0b0b09; }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin-top: var(--space-m);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.hero__trust li { display: inline-flex; align-items: center; gap: 0.35rem; }
.hero__trust li::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 3px; background: var(--gold); transform: rotate(45deg); }
.hero__trust strong { color: var(--accent); font-size: 1rem; }

/* stats as glowing cards */
.hero__stats {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-s);
  padding-top: var(--space-l);
  border-top: 0;
}
.stat {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: var(--space-m) var(--space-m) var(--space-m) 4.2rem;
  border: 1.5px solid var(--rule);
  border-radius: 20px;
  background: color-mix(in srgb, var(--paper-raised) 85%, transparent);
  backdrop-filter: blur(6px);
  animation: rise-in 700ms var(--ease-out) both;
  animation-delay: calc(1100ms + var(--d) * 100ms);
  transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid), box-shadow var(--dur-mid), background-color var(--dur-mid);
}
.stat::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.stat:hover { transform: translateY(-5px); border-color: var(--gold); background: var(--paper-raised); box-shadow: var(--shadow-hover); }
.stat:hover::before { transform: scaleX(1); }
.stat__icon {
  position: absolute;
  left: var(--space-m);
  top: var(--space-m);
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 12px;
  background: var(--gold);
  color: #0b0b09;
  transition: transform var(--dur-mid) var(--ease-out);
}
.stat__icon svg { width: 1.2rem; height: 1.2rem; }
.stat:hover .stat__icon { transform: rotate(-10deg) scale(1.12); }
.stat__value {
  font-size: var(--step-3);
  background: linear-gradient(180deg, var(--ink) 40%, color-mix(in srgb, var(--ink) 55%, var(--gold)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__value .unit { -webkit-text-fill-color: var(--accent); }

/* artwork frame */
.hero__art { padding: var(--space-m); }
.hero__frame {
  position: relative;
  padding: var(--space-m);
  border-radius: 32px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--paper-raised) 88%, transparent), color-mix(in srgb, var(--paper-raised) 88%, transparent)) padding-box,
    conic-gradient(from var(--angle, 0deg), var(--gold), transparent 25%, var(--accent) 50%, transparent 75%, var(--gold)) border-box;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--gold) 8%, transparent), 0 40px 80px -40px var(--glow);
  backdrop-filter: blur(8px);
  animation: border-spin 8s linear infinite, rise-in 900ms var(--ease-out) 300ms both;
  transition: transform var(--dur-slow) var(--ease-out);
}
.hero__frame:hover { transform: translateY(-6px) rotate(-0.5deg); }
.hero__live {
  position: absolute;
  top: -0.8rem;
  left: 1.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero__live .dot { color: var(--gold); }
.hero__float {
  position: absolute;
  z-index: 3;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 14px 30px -14px var(--glow);
  animation: dg-bob 4s var(--ease-in-out) infinite;
  transition: transform var(--dur-mid) var(--ease-out);
}
.hero__float:hover { transform: scale(1.1) rotate(-3deg); }
.hero__float--a { right: -0.5rem; top: 44%; background: var(--gold); color: #0b0b09; }
.hero__float--b { left: -1rem; top: 12%; background: var(--ink); color: var(--paper); animation-delay: -1.3s; }
.hero__float--c { left: 8%; bottom: -0.4rem; background: var(--paper-raised); color: var(--ink); border: 1.5px solid var(--gold); animation-delay: -2.6s; }
@media (max-width: 40rem) {
  .hero__float--b { left: 0; }
  .hero__float--a { right: 0; }
  .stat { padding-left: 3.8rem; }
}

/* scroll cue */
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  margin: var(--space-l) auto 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
.scroll-cue__mouse {
  position: relative;
  width: 1.5rem;
  height: 2.3rem;
  border: 2px solid var(--gold);
  border-radius: 1rem;
}
.scroll-cue__mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.4rem;
  width: 4px;
  height: 7px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--gold);
  animation: scroll-dot 1.6s var(--ease-in-out) infinite;
}
@keyframes scroll-dot { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(0.8rem); opacity: 0; } 100% { opacity: 0; } }
.scroll-cue:hover { color: var(--accent); }

/* crossing ribbons */
.ribbons { position: relative; z-index: 2; height: 7.5rem; overflow: hidden; margin-bottom: -1rem; }
.ribbon {
  position: absolute;
  left: -5%;
  right: -5%;
  top: 50%;
  padding-block: 0.7rem;
  overflow: hidden;
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.5);
}
.ribbon--gold { background: var(--gold); color: #0b0b09; transform: translateY(-50%) rotate(-2.5deg); z-index: 2; }
.ribbon--ink  { background: var(--ink); color: var(--paper); transform: translateY(-50%) rotate(2deg); opacity: 0.95; }
.ribbon__track { display: flex; align-items: center; width: max-content; animation: marquee 30s linear infinite; }
.ribbon__track--rev { animation-direction: reverse; animation-duration: 36s; }
.ribbon__track span { padding-inline: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.ribbon__track i { font-style: normal; }
.ribbon--ink .ribbon__track i { color: var(--gold); }

/* ==========================================================================
   Era colours: one clear system per theme
   ========================================================================== */
.era__tab[aria-selected="true"] {
  background: linear-gradient(120deg, var(--era-fill), color-mix(in srgb, var(--era-fill) 70%, var(--gold)));
  border-color: var(--era-fill);
  color: var(--on-era);
}
.era__tab[aria-selected="true"]::before { opacity: 0; }
.era__tab[aria-selected="true"] .era__tab-name,
.era__tab[aria-selected="true"] .era__tab-year { color: var(--on-era); }
.era__tab[aria-selected="true"] .era__tab-icon { background: var(--on-era); color: var(--era-fill); border-color: var(--on-era); }
.era__tab[aria-selected="true"] .era__tab-chip { background: var(--on-era); color: var(--era-fill); border-color: var(--on-era); }
.era__tab[aria-selected="true"] .era__tab-icon::after { border-color: var(--era-fill); }
.era__verb span.is-on {
  background: none;
  color: var(--era);
  -webkit-text-fill-color: var(--era);
  text-decoration: underline;
  text-decoration-color: var(--era-fill);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.12em;
  animation: none;
}
[data-era="web3"] .era__verb span.is-on { text-decoration-color: var(--gold); }
.era__tab[aria-selected="true"] { background: var(--era-fill); }
.era__tab[aria-selected="true"][data-era="web3"] { background: linear-gradient(120deg, var(--gold), var(--gold-hi)); }

/* ==========================================================================
   Hover bubbles for key words
   ========================================================================== */
.tip {
  position: relative;
  cursor: help;
  color: inherit;
  font-weight: 600;
  border-radius: 4px;
  background:
    linear-gradient(var(--gold), var(--gold)) no-repeat left bottom / 100% 2px,
    linear-gradient(color-mix(in srgb, var(--gold) 38%, transparent), color-mix(in srgb, var(--gold) 38%, transparent)) no-repeat left bottom / 0% 100%;
  padding-inline: 0.1em;
  transition: background-size 300ms var(--ease-out), color var(--dur-fast);
  border-bottom: 0;
}
.tip::after {
  content: "✦";
  position: absolute;
  top: -0.7em;
  right: -0.45em;
  font-size: 0.6em;
  color: var(--gold);
  opacity: 0;
  transform: scale(0.3) rotate(-60deg);
  transition: opacity var(--dur-fast), transform var(--dur-mid) var(--ease-out);
  pointer-events: none;
}
.tip:hover, .tip.is-open, .tip:focus-visible {
  background-size: 100% 2px, 100% 100%;
  color: var(--ink);
  outline: none;
}
.tip:hover::after, .tip.is-open::after { opacity: 1; transform: scale(1) rotate(0deg); }

.tipbubble {
  position: fixed;
  z-index: 400;
  width: max-content;
  max-width: min(19rem, calc(100vw - 24px));
  padding: 0.85rem 1rem 0.7rem;
  border-radius: 18px;
  background: var(--paper-raised);
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 16%, transparent), 0 24px 50px -18px rgba(0, 0, 0, 0.45), 0 0 40px -10px var(--glow);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  filter: blur(4px);
  transition: opacity 180ms var(--ease-out), transform 260ms var(--ease-out), filter 200ms var(--ease-out);
}
.tipbubble[data-side="bottom"] { transform: translateY(-8px) scale(0.9); }
.tipbubble.is-on { opacity: 1; transform: none; filter: none; }
.tipbubble__ring {
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: 18px;
  background: conic-gradient(from var(--angle, 0deg), var(--gold), transparent 30%, var(--accent) 55%, transparent 80%, var(--gold));
  animation: border-spin 3s linear infinite;
  filter: blur(6px);
  opacity: 0.7;
}
.tipbubble__head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.3rem; }
.tipbubble__head svg { width: 0.95rem; height: 0.95rem; color: var(--gold); animation: spin 4s linear infinite; }
.tipbubble__head strong { font-family: var(--font-display); font-size: 1rem; color: var(--accent); }
.tipbubble p { font-size: 0.86rem; line-height: 1.5; color: var(--ink); }
.tipbubble__foot { display: block; margin-top: 0.45rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.tipbubble__arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--paper-raised);
  border: 1.5px solid var(--gold);
  transform: rotate(45deg);
}
.tipbubble[data-side="top"] .tipbubble__arrow { bottom: -7px; border-top: 0; border-left: 0; }
.tipbubble[data-side="bottom"] .tipbubble__arrow { top: -7px; border-bottom: 0; border-right: 0; }
.section { overflow-x: clip; }
.tipbubble { background: transparent; isolation: isolate; }
.tipbubble__ring { z-index: -2; }
.tipbubble::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 17px; background: var(--paper-raised); }
.hero__float--a { right: -1.2rem; top: auto; bottom: 22%; }
.hero__float--b { left: auto; right: 2rem; top: -0.9rem; }
.era__tab:not([aria-selected="true"]) .era__tab-name { color: var(--ink); }
.era__tab:not([aria-selected="true"]):hover .era__tab-name { color: var(--era); }
.era__tab:not([aria-selected="true"]) .era__tab-icon { border-color: var(--era-fill); color: var(--era); }
.era__watermark { opacity: 0.06; }

/* ==========================================================================
   The Shift · cartoon laptop
   ========================================================================== */

.mac {
  --line: var(--ink);
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='30' viewBox='0 0 24 30'%3E%3Cpath d='M2 2 L2 23 L7.5 17.5 L11.5 27 L15.5 25.3 L11.6 16 L19 16 Z' fill='%23000' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, default;
  --hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cpath d='M9 2.5c1.2 0 2 .9 2 2v8.2l1-.2V9.8c0-1.1.9-2 2-2s2 .9 2 2v2.6l.8-.1c.3-1 1.1-1.6 2-1.6 1.1 0 2 .9 2 2v.6c.3-.2.7-.3 1.1-.3 1.1 0 2 .9 2 2V21c0 3.9-3.1 7-7 7h-2.6c-2.4 0-4.7-1.2-6-3.2L3.2 19.4c-.6-.9-.4-2.2.5-2.8.9-.6 2-.4 2.7.4L7 18.5V4.5c0-1.1.9-2 2-2Z' fill='%23fff' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 9 3, pointer;
  position: relative;
  max-width: 72rem;
  margin: var(--space-l) auto var(--space-xl);
  padding-inline: clamp(0rem, 3vw, 2rem);
}

.mac__decor { position: absolute; inset: -2rem; pointer-events: none; }
.mac__spark {
  position: absolute;
  left: var(--x); top: var(--y);
  width: calc(26px * var(--s)); height: calc(26px * var(--s));
  background: var(--gold);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: twinkle 2.8s var(--ease-in-out) infinite;
  animation-delay: calc(var(--d) * -1);
}

/* Lid: chunky cartoon outline and a hard offset shadow */
.mac__lid {
  position: relative;
  padding: 1.6rem 1.1rem 1.1rem;
  border: 3.5px solid var(--line);
  border-radius: 30px 30px 14px 14px;
  background: linear-gradient(160deg, var(--paper-sunken), var(--paper-raised));
  box-shadow: 8px 8px 0 var(--line), 0 40px 80px -40px var(--glow);
  transform-origin: 50% 100%;
  transition: transform 500ms cubic-bezier(.34,1.56,.64,1), box-shadow 400ms var(--ease-out);
  animation: lid-open 1.1s cubic-bezier(.34,1.56,.64,1) both;
}
.mac.is-visible .mac__lid { animation-play-state: running; }
@keyframes lid-open { from { transform: perspective(1400px) rotateX(-70deg); } }
.mac:hover .mac__lid { transform: translateY(-6px) rotate(-0.4deg); box-shadow: 12px 14px 0 var(--line), 0 50px 90px -40px var(--glow); }

.mac__cam {
  position: absolute; top: 0.55rem; left: 50%;
  width: 0.55rem; height: 0.55rem; margin-left: -0.275rem;
  border-radius: 50%;
  background: var(--line);
  box-shadow: 0 0 0 3px var(--paper-sunken), 0 0 10px 2px var(--gold);
  animation: dg-sync 2.2s ease-in-out infinite;
}

/* Screen */
.mac__screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 18px;
  padding: 2.9rem clamp(0.6rem, 2vw, 1.6rem) 6.2rem;
  cursor: var(--cursor);
}
.mac__screen :is(button, a, .tip, [role="tab"]) { cursor: var(--hand); }
.mac__wallpaper {
  position: absolute; inset: -20%; z-index: -2;
  background:
    radial-gradient(40% 50% at 15% 20%, color-mix(in srgb, var(--gold) 45%, transparent), transparent 70%),
    radial-gradient(45% 55% at 85% 80%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(35% 40% at 80% 15%, var(--gold-soft), transparent 70%),
    var(--paper-sunken);
  animation: aurora 14s var(--ease-in-out) infinite alternate;
}
.mac__glare {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.04) 52%, transparent 60%);
  background-size: 250% 100%;
  animation: glare 7s var(--ease-in-out) infinite;
}
@keyframes glare { 0%, 20% { background-position: 150% 0; } 60%, 100% { background-position: -60% 0; } }
.mac__flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: var(--gold); opacity: 0; }
.mac__flash.is-on { animation: screen-flash 500ms var(--ease-out); }
@keyframes screen-flash { 0% { opacity: 0.35; } 100% { opacity: 0; } }

/* Menu bar */
.mac__menubar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; gap: 1.1rem;
  height: 2rem; padding-inline: 1rem;
  border-bottom: 2px solid var(--line);
  background: color-mix(in srgb, var(--paper-raised) 80%, transparent);
  backdrop-filter: blur(10px);
  font-size: 0.78rem; color: var(--ink);
}
.mac__logo { color: var(--gold); font-size: 1rem; animation: spin 8s linear infinite; display: inline-block; }
.mac__right { margin-left: auto; display: flex; align-items: center; gap: 0.8rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.mac__wifi { width: 14px; height: 10px; border: 2.5px solid var(--ink); border-bottom: 0; border-left-color: transparent; border-right-color: transparent; border-radius: 14px 14px 0 0; }
.mac__batt { position: relative; width: 22px; height: 11px; border: 2px solid var(--ink); border-radius: 3px; background: linear-gradient(90deg, var(--gold) 70%, transparent 70%); }
.mac__batt::after { content: ""; position: absolute; right: -5px; top: 2px; width: 2px; height: 4px; background: var(--ink); border-radius: 1px; }
@media (max-width: 40rem) { .mac__menubar > span:not(.mac__logo):not(.mac__right) { display: none; } }

/* App window */
.mac__window {
  position: relative; z-index: 2;
  border: 3px solid var(--line);
  border-radius: 20px;
  background: var(--paper-raised);
  box-shadow: 6px 6px 0 var(--line);
  overflow: hidden;
  animation: window-pop 700ms cubic-bezier(.34,1.56,.64,1) 500ms both;
}
@keyframes window-pop { from { transform: scale(0.85) translateY(20px); opacity: 0; } }
.mac__titlebar {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem 1rem;
  border-bottom: 2.5px solid var(--line);
  background: linear-gradient(90deg, var(--gold-soft), var(--paper-raised) 60%);
}
.mac__lights { display: flex; gap: 0.45rem; }
.mac__lights i { width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 2px solid var(--line); transition: transform 250ms cubic-bezier(.34,1.56,.64,1); }
.mac__lights i:nth-child(1) { background: var(--gold); }
.mac__lights i:nth-child(2) { background: var(--gold-hi); }
.mac__lights i:nth-child(3) { background: var(--accent); }
.mac__titlebar:hover .mac__lights i { transform: scale(1.25); }
.mac__title { flex: 1; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mac__pill { padding: 0.15rem 0.6rem; border-radius: 999px; border: 2px solid var(--line); background: var(--gold); color: #0b0b09; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.mac__body { padding: clamp(0.9rem, 2.4vw, 1.8rem); }
.mac__body .era { gap: var(--space-l); }
@media (min-width: 60rem) { .mac__body .era { grid-template-columns: 16.5rem minmax(0, 1fr); } }

/* cartoon outlines on the content inside the screen */
.mac__body .era__tab { border: 2.5px solid var(--line); box-shadow: 4px 4px 0 var(--line); }
.mac__body .era__tab:hover { box-shadow: 6px 6px 0 var(--line); }
.mac__body .era__tab[aria-selected="true"] { box-shadow: 6px 6px 0 var(--line); animation: none; }
.mac__body .era__tab:active { box-shadow: 1px 1px 0 var(--line); transform: translate(3px, 3px); }
.mac__body .era__panel { border: 2.5px solid var(--line); box-shadow: 5px 5px 0 var(--line); }
.mac__body .era__rail { left: calc(var(--space-m) + 1.35rem); }

/* Dock */
.mac__dock {
  position: absolute; left: 50%; bottom: 0.9rem; z-index: 4;
  display: flex; align-items: flex-end; gap: 0.8rem;
  padding: 0.55rem 0.9rem;
  border: 2.5px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--paper-raised) 70%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 4px 4px 0 var(--line);
  transform: translateX(-50%);
}
.mac__dockicon {
  position: relative;
  display: grid; place-items: center;
  width: 3.1rem; height: 3.1rem;
  border: 2.5px solid var(--line);
  border-radius: 15px;
  background: var(--era-soft, var(--gold-soft));
  color: var(--era, var(--accent));
  transform-origin: 50% 100%;
  transition: transform 300ms cubic-bezier(.34,1.56,.64,1), background-color 200ms;
}
.mac__dockicon span { display: grid; }
.mac__dockicon svg { width: 1.5rem; height: 1.5rem; }
.mac__dockicon em {
  position: absolute; bottom: calc(100% + 0.7rem); left: 50%;
  padding: 0.2rem 0.55rem; border-radius: 8px;
  background: var(--ink); color: var(--paper);
  font-style: normal; font-size: 0.7rem; font-weight: 700; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 6px); pointer-events: none;
  transition: opacity 150ms, transform 200ms var(--ease-out);
}
.mac__dockicon:hover { transform: scale(1.35) translateY(-8px); }
.mac__dockicon:hover em { opacity: 1; transform: translate(-50%, 0); }
.mac__dockicon.is-active { background: var(--era-fill, var(--gold)); color: var(--on-era, #0b0b09); }
.mac__dockicon.is-active::after {
  content: ""; position: absolute; bottom: -0.6rem; left: 50%;
  width: 0.35rem; height: 0.35rem; margin-left: -0.175rem;
  border-radius: 50%; background: var(--line);
}
.mac__dockicon.is-bouncing { animation: dock-bounce 700ms var(--ease-out); }
@keyframes dock-bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-18px); } 55% { transform: translateY(0); } 75% { transform: translateY(-7px); } }

/* Base */
.mac__base {
  position: relative;
  height: 1.5rem;
  margin: 0 -3.5%;
  border: 3.5px solid var(--line);
  border-radius: 0 0 28px 28px / 0 0 22px 22px;
  background: linear-gradient(180deg, var(--paper-raised), var(--paper-sunken));
  box-shadow: 8px 8px 0 var(--line);
}
.mac__notch {
  position: absolute; top: -3.5px; left: 50%;
  width: 7rem; height: 0.7rem; margin-left: -3.5rem;
  border: 3.5px solid var(--line); border-top: 0;
  border-radius: 0 0 12px 12px;
  background: var(--paper-sunken);
}
.mac__shadow {
  height: 1.4rem; margin: 0.4rem 6% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  animation: dg-sync 3s ease-in-out infinite;
}

/* Click ripple under the cursor */
.mac__click {
  position: absolute; z-index: 7; pointer-events: none;
  width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem;
  border: 3px solid var(--gold); border-radius: 50%;
  animation: mac-click 500ms var(--ease-out) forwards;
}
@keyframes mac-click { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

@media (max-width: 40rem) {
  .mac__lid { padding: 1.2rem 0.5rem 0.5rem; border-radius: 22px 22px 10px 10px; }
  .mac__screen { padding: 2.5rem 0.4rem 5.2rem; border-radius: 12px; }
  .mac__title { display: none; }
  .mac__dockicon { width: 2.6rem; height: 2.6rem; }
  .mac__base { margin: 0 -2%; }
}
@media (prefers-reduced-motion: reduce) { .mac__lid, .mac__window { animation: none; } }
.mac:not(.is-visible) .mac__lid, .mac:not(.is-visible) .mac__window { animation-play-state: paused; }
.mac[data-reveal] { transform: none; }
.mac__body .era__tab-name { font-size: var(--step-1); }
.mac__body .era__tab { gap: 0.7rem; padding-inline: 0.8rem; }
@media (min-width: 60rem) { .mac__body .era { grid-template-columns: 17.5rem minmax(0, 1fr); } }
@media (max-width: 40rem) { .mac__body { padding: 0.7rem; } .mac__body .era__panel { padding: var(--space-m); } }

/* Shorter laptop: the app window scrolls inside, like a real app */
.mac__screen { padding-bottom: 5.4rem; }
.mac__body { padding: clamp(0.8rem, 2vw, 1.4rem); }
.mac__body .era__panel {
  max-height: 24rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-l);
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.mac__body .era__panel::-webkit-scrollbar { width: 8px; }
.mac__body .era__panel::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 8px; border: 2px solid var(--paper-raised); }
.mac__body .era__verb { font-size: var(--step-2); }
.mac__body .era__panel .prose { font-size: 0.95rem; line-height: 1.55; }
.mac__body .era__role-line { font-size: var(--step-0); }
.mac__body .era__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-m); padding-top: var(--space-s); }
.mac__body .era__fact { grid-template-columns: 1fr; gap: 0.1rem; }
.mac__body .era__tabs { gap: var(--space-s); }
.mac__body .era__tab { padding-block: 0.6rem; }
/* a soft fade tells you there is more to scroll */
.mac__body .era__panel { -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
.mac__body .era__panel.is-end { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 40rem) {
  .mac__body .era__panel { max-height: 26rem; padding: var(--space-m); }
  .mac__body .era__facts { grid-template-columns: 1fr; }
  .mac__screen { padding-bottom: 4.8rem; }
}

/* ==========================================================================
   02 · Hashes, keys & signatures
   ========================================================================== */

.cx-section { position: relative; overflow: hidden; }
.cx-decor { position: absolute; inset: 0; pointer-events: none; }
.cxspark {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(24px * var(--s)); height: calc(24px * var(--s));
  background: var(--gold);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: twinkle 3s var(--ease-in-out) infinite; animation-delay: calc(var(--d) * -1);
}

.cx-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); margin-bottom: var(--space-l); }
.cx-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.cx-steps a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1.5px solid var(--rule); background: var(--paper-raised);
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  transition: transform var(--dur-mid) var(--ease-out), background-color var(--dur-fast), border-color var(--dur-fast);
}
.cx-steps a span { font-size: 0.7rem; color: var(--accent); }
.cx-steps a:hover { transform: translateY(-2px); background: var(--gold); border-color: var(--gold); color: #0b0b09; }
.cx-steps a:hover span { color: #0b0b09; }
.cx-steps i { width: 1rem; height: 2px; background: repeating-linear-gradient(90deg, var(--gold) 0 3px, transparent 3px 6px); }

.cx-mode { position: relative; display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.3rem; border-radius: 999px; background: var(--paper-sunken); border: 1.5px solid var(--rule); }
.cx-mode__label { padding: 0 0.6rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.cx-mode__btn { padding: 0.4rem 0.95rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); transition: background-color var(--dur-mid), color var(--dur-mid), box-shadow var(--dur-mid); }
.cx-mode__btn.is-on { background: var(--gold); color: #0b0b09; box-shadow: 0 6px 16px -8px var(--glow); }
.cx-mode__btn:not(.is-on):hover { color: var(--ink); }

/* cards */
.cx-card {
  position: relative; isolation: isolate; overflow: hidden;
  margin-bottom: var(--space-l);
  padding: clamp(1.1rem, 3vw, 2.2rem);
  border: 1.5px solid color-mix(in srgb, var(--gold) 45%, var(--rule));
  border-radius: 30px;
  background: radial-gradient(40rem 20rem at 100% 0%, var(--gold-soft), transparent 60%), var(--paper-raised);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 7%, transparent), 0 40px 80px -50px var(--glow);
  scroll-margin-top: 6rem;
}
.cx-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: linear-gradient(var(--gold), var(--accent));
}
.cx-card__head { display: flex; align-items: center; gap: var(--space-m); margin-bottom: var(--space-l); }
.cx-num { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--gold); }
.cx-badge { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 16px; background: var(--gold); color: #0b0b09; box-shadow: 0 10px 22px -10px var(--glow); animation: dg-bob 3.2s var(--ease-in-out) infinite; }
.cx-badge svg { width: 1.6rem; height: 1.6rem; }
.cx-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.cx-title { font-size: var(--step-3); line-height: 1.05; }

.cx-grid { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 62rem) { .cx-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--space-xl); } }
.cx-text { color: var(--ink-soft); line-height: 1.7; }
.cx-text strong { color: var(--ink); }
.cx-text:not([hidden]) { animation: rise-in 450ms var(--ease-out) both; }
.cx-lead { max-width: 70ch; margin-bottom: var(--space-l); }

.cx-facts { display: grid; gap: 0.5rem; margin-top: var(--space-m); }
.cx-facts li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.6rem 0.8rem; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); font-size: 0.92rem; color: var(--ink-soft); transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid); }
.cx-facts li:hover { transform: translateX(5px); border-color: var(--gold); }
.cx-facts li span { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 8px; background: var(--accent); color: var(--on-accent); }
.cx-facts li span svg { width: 0.9rem; height: 0.9rem; }
.cx-facts b { color: var(--ink); }
.cx-note { margin-top: var(--space-m); padding: 0.8rem 1rem; border-radius: 14px; background: var(--gold-soft); border: 1px dashed var(--gold); font-size: 0.9rem; color: var(--ink); }

/* lab panel */
.cx-lab {
  display: grid; gap: 0.6rem;
  padding: 0 var(--space-m) var(--space-m);
  border: 1.5px solid var(--rule-strong);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--gold) 70%, transparent);
  overflow: hidden;
}
.cx-lab__bar { display: flex; align-items: center; gap: 0.7rem; margin-inline: calc(var(--space-m) * -1); padding: 0.55rem var(--space-m); border-bottom: 1.5px solid var(--rule); background: var(--paper-sunken); font-family: var(--font-code); font-size: 0.75rem; color: var(--ink-faint); }
.cx-dots { display: flex; gap: 0.35rem; }
.cx-dots i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--gold); }
.cx-dots i:nth-child(2) { background: var(--gold-hi); }
.cx-dots i:nth-child(3) { background: var(--accent); }
.cx-live { margin-left: auto; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--gold); color: #0b0b09; font-family: var(--font-display); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; animation: pulse 2s var(--ease-in-out) infinite; }
.cx-label { margin-top: 0.3rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.cx-label code { font-family: var(--font-code); text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.cx-input {
  width: 100%; padding: 0.7rem 0.9rem; border-radius: 14px;
  border: 1.5px solid var(--rule); background: var(--paper-raised);
  font-family: var(--font-code); font-size: 0.92rem; resize: vertical;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.cx-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
.cx-input.is-tampered { border-color: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent); }
.cx-presets { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cx-presets button { padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--rule-strong); font-family: var(--font-code); font-size: 0.74rem; transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.cx-presets button:hover { background: var(--gold); border-color: var(--gold); color: #0b0b09; transform: translateY(-2px); }

.cx-machine { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; margin-block: 0.4rem; font-size: 0.75rem; font-weight: 700; }
.cx-machine__in, .cx-machine__out { padding: 0.35rem 0.6rem; border-radius: 10px; background: var(--paper-sunken); border: 1px solid var(--rule); text-align: center; color: var(--ink-soft); }
.cx-machine__out { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }
.cx-machine__box { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.9rem; border-radius: 14px; background: var(--ink); color: var(--paper); font-size: 0.8rem; }
.cx-machine__box::before, .cx-machine__box::after { content: "→"; position: absolute; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 1rem; }
.cx-machine__box::before { left: -0.85rem; }
.cx-machine__box::after { right: -0.85rem; }
.cx-gear { display: inline-block; color: var(--gold); animation: spin 3s linear infinite; }
.is-pulse .cx-gear { animation-duration: 0.4s; }

.cx-hash {
  padding: 0.75rem 0.9rem; border-radius: 14px;
  background: var(--ink); color: var(--gold);
  font-family: var(--font-code); font-size: 0.86rem; line-height: 1.55;
  word-break: break-all; min-height: 3.2rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
}
.cx-hash--sm { font-size: 0.78rem; background: var(--paper-sunken); color: var(--ink-soft); }
.cx-hash--sm b { color: #0b0b09; background: var(--gold); border-radius: 3px; font-weight: 700; }
.cx-bits { display: grid; grid-template-columns: repeat(32, 1fr); gap: 2px; }
.cx-bits span { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--gold) calc(var(--v, 0) * 100%), var(--paper-sunken)); transition: background-color 400ms var(--ease-out), transform 300ms var(--ease-out); }
.cx-bits span.is-hi { transform: scale(0.85); }

/* toggle switch */
.cx-toggle { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.5rem; padding: 0.6rem 0.8rem; border-radius: 14px; background: var(--paper-raised); border: 1px solid var(--rule); font-size: 0.88rem; cursor: pointer; }
.cx-toggle label:last-child { cursor: pointer; }
.switch { position: relative; flex: none; display: inline-block; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track { display: block; width: 2.8rem; height: 1.6rem; border-radius: 999px; background: var(--rule-strong); transition: background-color var(--dur-mid); }
.switch__thumb { position: absolute; top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--paper); box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: transform 300ms cubic-bezier(.34,1.56,.64,1); }
.switch input:checked + .switch__track { background: var(--gold); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(1.2rem); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-compare { display: grid; gap: 0.4rem; animation: rise-in 400ms var(--ease-out) both; }
.cx-compare[hidden] { display: none; }
.cx-meter { height: 10px; border-radius: 10px; background: var(--paper-sunken); overflow: hidden; }
.cx-meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: width 700ms var(--ease-out); }
.cx-meter__label { font-size: 0.85rem; color: var(--ink-soft); }
.cx-meter__label strong { color: var(--accent); font-size: 1.1rem; }

/* key flow */
.keyflow { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem minmax(0, 1fr) 7.5rem minmax(0, 1fr); align-items: stretch; gap: 0.2rem; }
@media (max-width: 62rem) { .keyflow { grid-template-columns: 1fr; } }
.keynode {
  position: relative; display: grid; align-content: start; gap: 0.45rem;
  padding: var(--space-m); border-radius: 22px;
  border: 1.5px solid var(--rule-strong); background: var(--paper);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid), border-color var(--dur-mid);
}
.keynode:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: var(--shadow-hover); }
.keynode__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.keynode__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 13px; background: var(--gold-soft); border: 1px solid var(--gold); color: var(--accent); }
.keynode__icon svg { width: 1.25rem; height: 1.25rem; }
.keynode__tag { padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: var(--paper-sunken); color: var(--ink-soft); }
.keynode h4 { font-size: var(--step-1); }
.keynode__val { font-family: var(--font-code); font-size: 0.78rem; line-height: 1.5; word-break: break-all; padding: 0.55rem 0.7rem; border-radius: 12px; background: var(--paper-sunken); color: var(--ink); min-height: 3rem; transition: filter var(--dur-mid); }
.keynode__val.is-blurred { filter: blur(5px); user-select: none; }
.keynode__val--big { font-size: 1.05rem; font-weight: 700; color: var(--accent); background: var(--gold-soft); }
.keynode__hint { font-size: 0.82rem; color: var(--ink-faint); line-height: 1.45; }
.keynode__peek { justify-self: start; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--rule-strong); font-size: 0.76rem; font-weight: 700; transition: background-color var(--dur-fast), color var(--dur-fast); }
.keynode__peek svg { width: 0.95rem; height: 0.95rem; }
.keynode__peek:hover { background: var(--ink); color: var(--paper); }
.keynode--private { background: linear-gradient(160deg, var(--ink), color-mix(in srgb, var(--ink) 85%, var(--gold))); color: var(--paper); border-color: var(--ink); }
.keynode--private h4 { color: var(--paper); }
.keynode--private .keynode__icon { background: var(--gold); border-color: var(--gold); color: #0b0b09; }
.keynode--private .keynode__tag { background: var(--gold); color: #0b0b09; }
.keynode--private .keynode__val { background: rgba(255,255,255,0.08); color: var(--gold); }
.keynode--private .keynode__hint { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.keynode--private .keynode__peek { border-color: color-mix(in srgb, var(--paper) 40%, transparent); color: var(--paper); }
.keynode--private .keynode__peek:hover { background: var(--gold); color: #0b0b09; }
.keynode--addr { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent); }

.keyarrow { display: grid; place-content: center; justify-items: center; gap: 0.35rem; text-align: center; padding: 0.4rem; }
.keyarrow__line { position: relative; width: 100%; min-width: 4rem; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--gold) 30%, var(--rule)); overflow: visible; }
.keyarrow__line::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6.5px solid transparent; border-left: 9px solid var(--gold); border-right: 0; }
.keyarrow__line i { position: absolute; left: 0; top: -4px; width: 11px; height: 11px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: lane-spark 1.8s var(--ease-in-out) infinite; }
.keyarrow.is-run .keyarrow__line { animation: arrow-flash 700ms var(--ease-out); }
@keyframes arrow-flash { 0% { background: var(--gold); box-shadow: 0 0 12px var(--gold); } 100% { box-shadow: none; } }
.keyarrow__label { font-size: 0.7rem; font-weight: 700; color: var(--accent); }
.keyarrow__no { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-faint); text-transform: uppercase; }
@media (max-width: 62rem) {
  .keyarrow { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0.6rem; }
  .keyarrow__line { width: 3px; min-width: 0; height: 2.6rem; grid-row: span 2; }
  .keyarrow__line::after { right: -5px; top: auto; bottom: -3px; border: 6.5px solid transparent; border-top: 9px solid var(--gold); border-bottom: 0; }
  .keyarrow__line i { left: -4px; top: 0; animation-name: lane-spark-v; }
  @keyframes lane-spark-v { from { top: 0; opacity: 0; } 20%, 80% { opacity: 1; } to { top: calc(100% - 10px); opacity: 0; } }
  .keyarrow__label, .keyarrow__no { text-align: left; }
}
.keyctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-l); }
.keyctl .btn svg { width: 1.1rem; height: 1.1rem; }
.cx-demo { font-size: 0.8rem; color: var(--ink-faint); }

/* signature */
.sigsteps { display: grid; gap: 0.5rem; margin-top: var(--space-m); counter-reset: none; }
.sigsteps li { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.8rem; border-radius: 14px; border: 1px solid var(--rule); background: var(--paper); font-size: 0.92rem; color: var(--ink-soft); transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid); }
.sigsteps li:hover { transform: translateX(5px); border-color: var(--gold); }
.sigsteps li > span { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 10px; background: var(--gold); color: #0b0b09; font-weight: 800; }
.sigsteps b { color: var(--ink); }
.sigdemo__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.4rem; }
.sigdemo__key { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.85rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.82rem; font-weight: 700; }
.sigdemo__key svg { width: 1rem; height: 1rem; color: var(--gold); }
.sigdemo__key em { font-style: normal; font-weight: 500; font-size: 0.72rem; opacity: 0.7; }
.sigdemo__key--pub { background: var(--gold-soft); color: var(--ink); border: 1px solid var(--gold); }
.sigdemo__key--pub svg { color: var(--accent); }
.sigdemo .btn svg { width: 1rem; height: 1rem; }
.sigresult { display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 0.5rem; padding: 0.8rem 1rem; border-radius: 16px; border: 1.5px dashed var(--rule-strong); background: var(--paper-raised); font-size: 0.9rem; color: var(--ink-soft); }
.sigresult.is-pop { animation: pop 450ms var(--ease-out); }
.sigresult__icon { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--rule); display: grid; place-items: center; font-weight: 800; }
.sigresult.is-signed { border-color: var(--gold); background: var(--gold-soft); }
.sigresult.is-signed .sigresult__icon { background: var(--gold); }
.sigresult.is-signed .sigresult__icon::after { content: "✎"; color: #0b0b09; }
.sigresult.is-valid { border-style: solid; border-color: var(--accent); background: var(--gold-soft); color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.sigresult.is-valid .sigresult__icon { background: var(--accent); }
.sigresult.is-valid .sigresult__icon::after { content: "✓"; color: var(--on-accent); }
.sigresult.is-invalid { border-style: solid; border-color: var(--signal); background: var(--signal-soft); color: var(--ink); animation: nudge 420ms var(--ease-out); }
.sigresult.is-invalid .sigresult__icon { background: var(--signal); }
.sigresult.is-invalid .sigresult__icon::after { content: "✕"; color: #fff; }
.sigdemo[data-state="valid"] { box-shadow: 6px 6px 0 var(--accent); }
.sigdemo[data-state="invalid"] { box-shadow: 6px 6px 0 var(--signal); }

/* why it matters */
.cx-why { scroll-margin-top: 6rem; margin-top: var(--space-xl); }
.cx-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-s); }
.whycard {
  position: relative; overflow: hidden; display: grid; gap: 0.6rem; align-content: start;
  padding: var(--space-l) var(--space-m) var(--space-m);
  border-radius: 24px; border: 1.5px solid var(--rule); background: var(--paper-raised);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid), border-color var(--dur-mid);
}
.whycard::after { content: ""; position: absolute; right: -3rem; top: -3rem; width: 9rem; height: 9rem; border-radius: 50%; background: radial-gradient(circle, var(--gold-soft), transparent 70%); transition: transform var(--dur-slow) var(--ease-out); }
.whycard.is-visible:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow-hover); }
.whycard:hover::after { transform: scale(1.8); }
.whycard > * { position: relative; z-index: 1; }
.whycard__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 16px; background: var(--gold); color: #0b0b09; transition: transform var(--dur-slow) var(--ease-out); }
.whycard__icon svg { width: 1.5rem; height: 1.5rem; }
.whycard:hover .whycard__icon { transform: rotate(-12deg) scale(1.1); }
.whycard h3 { font-size: var(--step-2); }
.whycard p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }
.whycard__chain { justify-self: start; margin-top: 0.3rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--ink); color: var(--gold); font-family: var(--font-code); font-size: 0.74rem; }
.cx-callout { display: flex; align-items: flex-start; gap: var(--space-m); margin-top: var(--space-m); padding: var(--space-m) var(--space-l); border-radius: 22px; background: linear-gradient(120deg, var(--gold), var(--gold-hi)); color: #0b0b09; box-shadow: 0 20px 40px -24px var(--glow); }
.cx-callout__icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 14px; background: #0b0b09; color: var(--gold); }
.cx-callout__icon svg { width: 1.3rem; height: 1.3rem; }
.cx-callout p { line-height: 1.6; }
/* fixed dark surfaces so they read the same in both themes */
.cx-hash:not(.cx-hash--sm), .cx-machine__box, .whycard__chain, .sigdemo__key:not(.sigdemo__key--pub) { background: #0b0b09; }
.cx-machine__box, .sigdemo__key:not(.sigdemo__key--pub) { color: #f7f2e2; }
.cx-hash:not(.cx-hash--sm), .whycard__chain { color: #f5c542; }
.keynode--private { background: linear-gradient(160deg, #0b0b09, #2b2410); border-color: #0b0b09; color: #f7f2e2; }
.keynode--private h4 { color: #f7f2e2; }
.keynode--private .keynode__val { color: #f5c542; }
.keynode--private .keynode__hint { color: rgba(247, 242, 226, 0.7); }
.keynode--private .keynode__peek { color: #f7f2e2; border-color: rgba(247, 242, 226, 0.4); }
.keynode--private .keynode__icon, .keynode--private .keynode__tag { background: #f5c542; border-color: #f5c542; }
[data-theme="dark"] .keynode--private, :root:not([data-theme="light"]) .keynode--private { border-color: #f5c542; }
@media (max-width: 40rem) { .cx-badge { display: none; } .cx-card__head { gap: 0.8rem; } .cx-title { font-size: var(--step-2); } }
.cx-machine__box { border: 1.5px solid #f5c542; box-shadow: 0 8px 20px -10px var(--glow); }