:root {
  /* typography compliance: Space Grotesk** from Google Fonts for the `lottery.day` wordmark; Inter** from Google Fonts for body copy; IBM Plex Mono** from Google Fonts for probability formulas */
  --void: #060505;
  --lacquer: #11100D;
  --gold: #D6A93A;
  --foil: #F4D88A;
  --ivory: #F7EEDB;
  --coral: #FF5A4F;
  --cobalt: #3157D5;
  --mint: #5FE0B7;
  --display: "Space Grotesk", "Arial Narrow", Inter, system-ui, sans-serif;
  --text: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --design-font-space: "Grotesk**";
  --design-font-inter: "Inter**";
  --design-font-mono: "Mono**";
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ivory);
  background: var(--void);
  font-family: var(--text);
  overflow-x: hidden;
}

.ambient-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 15%, rgba(214,169,58,.18), transparent 24%),
    radial-gradient(circle at 86% 70%, rgba(49,87,213,.16), transparent 22%),
    linear-gradient(rgba(244,216,138,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,216,138,.04) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
  z-index: -3;
}

.ambient-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0 48%, rgba(6,5,5,.85) 80%);
}

.cursor-orb {
  position: fixed;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(244,216,138,.12), transparent 64%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.chapter-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: grid;
  gap: 18px;
}

.nav-dot {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(244,216,138,.28);
  border-radius: 50%;
  color: var(--foil);
  display: grid;
  place-items: center;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  background: rgba(17,16,13,.65);
  transition: .35s ease;
}
.nav-dot.active, .nav-dot:hover { border-color: var(--gold); transform: scale(1.12); box-shadow: 0 0 28px rgba(214,169,58,.28); }

.date-stamp, .field-label {
  position: fixed;
  top: 24px;
  z-index: 45;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--foil);
  background: rgba(17,16,13,.72);
  border: 1px solid rgba(214,169,58,.36);
  padding: 10px 14px;
  backdrop-filter: blur(10px);
}
.date-stamp { left: 24px; }
.field-label { right: 96px; color: var(--mint); border-color: rgba(95,224,183,.38); }

.scene {
  min-height: 100vh;
  position: relative;
  padding: 7vw;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.scene::before {
  content: attr(data-scene);
  position: absolute;
  left: 4vw;
  bottom: 4vw;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(5rem, 18vw, 18rem);
  color: rgba(244,216,138,.035);
  z-index: -1;
}

.kicker { font-family: var(--mono); color: var(--mint); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
h1, h2, h3 { font-family: var(--display); margin: 0; line-height: .92; letter-spacing: -.05em; }
h1 { font-size: clamp(4.8rem, 15vw, 16rem); color: var(--foil); text-shadow: 0 12px 0 rgba(214,169,58,.16), 0 0 70px rgba(214,169,58,.22); }
h1 span { color: var(--gold); }
h2 { font-size: clamp(3rem, 7vw, 8rem); max-width: 950px; }
h3 { font-size: clamp(1.35rem, 2vw, 2.3rem); letter-spacing: -.035em; }
code, .hidden-formula, .mini-proof { font-family: var(--mono); color: var(--mint); }

.hero-copy { position: absolute; top: 10vh; left: 7vw; z-index: 5; }
.theorem { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 3.4rem); color: var(--ivory); margin-top: -1vw; }

.apparatus { position: relative; width: min(43vw, 560px); aspect-ratio: 1.08; display: grid; place-items: center; transform-style: preserve-3d; }
.hero-apparatus { margin-top: 8vh; animation: floatDrum 6s ease-in-out infinite; }
.drum-shell {
  position: relative;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(244,216,138,.6);
  background: radial-gradient(circle at 32% 20%, rgba(247,238,219,.22), rgba(17,16,13,.28) 34%, rgba(6,5,5,.68) 68%), linear-gradient(135deg, rgba(49,87,213,.14), rgba(214,169,58,.1));
  box-shadow: inset 0 0 60px rgba(244,216,138,.12), 0 35px 80px rgba(0,0,0,.55), 0 0 0 18px rgba(214,169,58,.04);
  animation: rotateDrum 18s linear infinite;
}
.drum-axis { position: absolute; width: 92%; height: 8px; background: linear-gradient(90deg, transparent, var(--gold), var(--foil), var(--gold), transparent); top: 48%; z-index: 2; border-radius: 999px; }
.drum-base { position: absolute; bottom: 3%; padding: 11px 22px; border: 1px solid rgba(214,169,58,.5); color: var(--foil); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; background: rgba(17,16,13,.9); }
.tickmarks, .tickmarks::before { position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed rgba(244,216,138,.35); content: ""; }
.tickmarks::before { inset: 14%; border-color: rgba(49,87,213,.4); }

.lotto-ball, .floating-ball, .result-sphere {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 700;
  color: var(--void);
  box-shadow: inset -10px -14px 22px rgba(0,0,0,.28), inset 10px 10px 20px rgba(255,255,255,.35), 0 18px 36px rgba(0,0,0,.42);
}
.lotto-ball { position: absolute; left: var(--x, 44%); top: var(--y, 44%); width: 64px; height: 64px; animation: ballWander 7s ease-in-out infinite; animation-delay: var(--d, 0s); font-size: 19px; }
.ball-gold { background: linear-gradient(135deg, var(--foil), var(--gold)); }
.ball-ivory { background: linear-gradient(135deg, #fff8e8, var(--ivory)); }
.ball-coral { background: linear-gradient(135deg, #ff9b86, var(--coral)); }
.ball-cobalt { background: linear-gradient(135deg, #85a2ff, var(--cobalt)); color: var(--ivory); }
.ball-mint { background: linear-gradient(135deg, #b9ffeb, var(--mint)); }

.card-grid, .machine-cluster, .proof-table { position: absolute; inset: 0; pointer-events: none; }
.chance-card, .orbit-card {
  pointer-events: auto;
  position: absolute;
  background: linear-gradient(145deg, rgba(17,16,13,.96), rgba(6,5,5,.92));
  border: 1px solid rgba(214,169,58,.48);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 26px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(244,216,138,.22);
  transform-style: preserve-3d;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  overflow: hidden;
}
.chance-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0 42%, rgba(244,216,138,.2) 48%, transparent 54%); transform: translateX(-120%); transition: .48s ease; }
.chance-card:hover::after { transform: translateX(120%); }
.chance-card:hover { border-color: var(--foil); box-shadow: 0 38px 90px rgba(0,0,0,.58), 0 0 42px rgba(214,169,58,.18); }
.card-index { display: block; font-family: var(--mono); font-size: 11px; color: var(--gold); letter-spacing: .14em; margin-bottom: 16px; }
.chance-card.ivory { background: linear-gradient(145deg, var(--ivory), #e7dbc3); color: var(--lacquer); border-color: var(--foil); }
.chance-card.ivory p, .chance-card.ivory .card-index { color: rgba(17,16,13,.72); }
.chance-card.acrylic { background: linear-gradient(145deg, rgba(49,87,213,.25), rgba(17,16,13,.78)); backdrop-filter: blur(16px); border-color: rgba(49,87,213,.85); }

.tall { width: 290px; min-height: 360px; left: 9vw; bottom: 12vh; }
.square { width: 270px; min-height: 270px; right: 13vw; top: 22vh; }
.narrow { width: 180px; min-height: 300px; right: 28vw; bottom: 8vh; }
.circular { width: 180px; height: 180px; right: 8vw; bottom: 20vh; border-radius: 50%; text-align: center; display: grid; place-items: center; }
.tilt-left { transform: rotate(-5deg); }
.tilt-right { transform: rotate(4deg); }
.gold-number { font-size: 4rem; font-family: var(--display); color: var(--foil); }
.date-medallion { width: 98px; height: 98px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--void); font: 700 3rem var(--display); margin: 20px auto; }

.memphis, .gold-ring { position: absolute; pointer-events: none; z-index: 2; }
.chip-coral { width: 84px; height: 84px; background: var(--coral); border-radius: 18px 50% 18px 50%; left: 15%; top: 20%; transform: rotate(18deg); }
.zigzag { width: 160px; height: 28px; right: 18%; top: 17%; background: repeating-linear-gradient(135deg, var(--cobalt) 0 12px, transparent 12px 24px); }
.half-moon { width: 140px; height: 70px; border-radius: 90px 90px 0 0; background: var(--mint); left: 45%; bottom: 10%; transform: rotate(-20deg); }
.gold-ring { border: 2px solid rgba(214,169,58,.52); border-radius: 50%; }
.ring-one { width: 44vw; height: 44vw; top: 11vh; left: 28vw; animation: spin 30s linear infinite; }
.ring-two { width: 25vw; height: 25vw; top: 26vh; left: 39vw; border-style: dashed; animation: spin 20s linear reverse infinite; }

.chapter-heading { position: absolute; left: 8vw; top: 10vh; z-index: 4; }
.chapter-heading.left { left: 7vw; }
.scene-machine { overflow: hidden; }
.machine-cluster .large { position: absolute; left: 50%; top: 51%; transform: translate(-50%, -50%); width: min(48vw, 620px); }
.glass { animation-duration: 26s; }
.calibration-ring { position: absolute; width: 82%; aspect-ratio: 1; border: 1px dashed rgba(95,224,183,.42); border-radius: 50%; animation: spin 24s linear infinite; }
.permutation { width: 285px; left: 8vw; top: 38vh; transform: rotate(-3deg); }
.independence { width: 310px; right: 10vw; top: 25vh; transform: rotate(5deg); }
.recurrence { width: 290px; left: 18vw; bottom: 10vh; transform: rotate(4deg); }
.anticipation { width: 310px; right: 18vw; bottom: 11vh; transform: rotate(-4deg); }
.route-map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .86; }
.route { fill: none; stroke-width: 2; stroke-dasharray: 12 18; filter: drop-shadow(0 0 10px currentColor); animation: dash 8s linear infinite; }
.route-a { stroke: var(--mint); color: var(--mint); }
.route-b { stroke: var(--cobalt); color: var(--cobalt); animation-duration: 11s; }
.orbit-one { --x: 48%; --y: 15%; }.orbit-two { --x: 18%; --y: 46%; }.orbit-three { --x: 60%; --y: 58%; }.orbit-four { --x: 32%; --y: 68%; }.orbit-five { --x: 70%; --y: 31%; }

.proof-table { inset: 18vh 7vw 8vh; }
.pattern-card { min-height: 245px; }
.checker { width: 330px; left: 2%; top: 18%; background: linear-gradient(145deg, rgba(17,16,13,.96), rgba(6,5,5,.9)), repeating-conic-gradient(var(--foil) 0 25%, transparent 0 50%) 0 0/34px 34px; }
.coral-slab { width: 360px; left: 34%; top: 4%; transform: rotate(3deg); border-color: var(--coral); }
.circuit { width: 330px; right: 4%; top: 26%; transform: rotate(-3deg); border-color: var(--cobalt); }
.note { width: 360px; left: 25%; bottom: 0; transform: rotate(-5deg); }
.capsule-number { position: absolute; right: 22px; bottom: 18px; font: 700 4rem var(--display); color: var(--gold); }
.node-line { display: flex; justify-content: space-between; margin-top: 30px; height: 3px; background: var(--cobalt); }
.node-line i { width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 22px var(--mint); }
.floating-ball { position: absolute; width: 86px; height: 86px; background: linear-gradient(135deg, var(--foil), var(--gold)); }
.proof-ball.one { left: 50%; top: 46%; }.proof-ball.two { right: 21%; bottom: 18%; background: linear-gradient(135deg, #b9ffeb, var(--mint)); }.proof-ball.three { left: 12%; bottom: 8%; background: linear-gradient(135deg, #ff9b86, var(--coral)); }
.proof-zig { right: 10%; top: 4%; width: 220px; height: 36px; background: repeating-linear-gradient(135deg, var(--foil) 0 14px, transparent 14px 28px); }
.proof-dots { left: 58%; bottom: 5%; width: 140px; height: 110px; background: radial-gradient(circle, var(--cobalt) 4px, transparent 5px) 0 0/24px 24px; }

.scene-dusk { min-height: 112vh; }
.dusk-orbit { position: relative; width: min(78vw, 860px); aspect-ratio: 1; display: grid; place-items: center; }
.dusk-ring { position: absolute; inset: 8%; border: 1px solid rgba(244,216,138,.35); border-radius: 50%; border-style: dashed; animation: spin 38s linear infinite; }
.result-sphere { width: clamp(160px, 20vw, 250px); height: clamp(160px, 20vw, 250px); background: radial-gradient(circle at 30% 20%, #fff4bc, var(--foil) 25%, var(--gold) 63%, #7e5f16); font-size: clamp(4rem, 9vw, 8rem); z-index: 3; }
.orbit-card { width: 150px; height: 82px; display: grid; place-items: center; text-align: center; font-family: var(--mono); color: var(--foil); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.c1 { transform: translateY(-330px) rotate(-5deg); }.c2 { transform: translate(285px,-165px) rotate(8deg); }.c3 { transform: translate(285px,165px) rotate(-8deg); }.c4 { transform: translateY(330px) rotate(5deg); }.c5 { transform: translate(-285px,165px) rotate(8deg); }.c6 { transform: translate(-285px,-165px) rotate(-8deg); }
.closing-copy { position: absolute; left: 7vw; bottom: 9vh; max-width: 620px; }

@keyframes rotateDrum { to { transform: rotate(360deg); } }
@keyframes floatDrum { 0%,100% { transform: translateY(0) rotateX(0deg); } 50% { transform: translateY(-22px) rotateX(7deg); } }
@keyframes ballWander { 0%,100% { transform: translate(0,0) scale(1); } 35% { transform: translate(18px,-12px) scale(1.06); } 70% { transform: translate(-15px,18px) scale(.96); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dash { to { stroke-dashoffset: -180; } }

@media (max-width: 900px) {
  .field-label, .chapter-nav { display: none; }
  .scene { padding: 110px 22px 60px; display: block; min-height: auto; }
  .hero-copy, .chapter-heading, .closing-copy { position: relative; inset: auto; margin-bottom: 34px; }
  .apparatus, .machine-cluster .large { position: relative; width: 92vw; left: auto; top: auto; transform: none; margin: 30px auto; }
  .card-grid, .machine-cluster, .proof-table { position: relative; inset: auto; display: grid; gap: 18px; pointer-events: auto; }
  .chance-card, .orbit-card { position: relative; inset: auto; width: auto; min-height: auto; transform: none !important; }
  .circular { border-radius: 24px; height: auto; }
  .proof-table { margin-top: 30px; }
  .dusk-orbit { width: 100%; margin: 40px 0; }
  .orbit-card { display: none; }
}