:root {
  --sample-navy: #070A18;
  --event-blue: #141B2D;
  --mint: #5EF2C2;
  --magenta: #FF4D9D;
  --violet: #7657FF;
  --parchment: #F6F1D1;
  --amber: #FFB84D;
  --grid-blue: #263B61;
  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-math: "Noto Sans Math", "Space Grotesk", "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--sample-navy); }

body {
  margin: 0;
  color: var(--parchment);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 20% 10%, rgba(118, 87, 255, .22), transparent 32rem),
    radial-gradient(circle at 78% 18%, rgba(255, 77, 157, .13), transparent 28rem),
    linear-gradient(180deg, var(--sample-navy), #090d20 38%, #060815);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .16;
  background-image:
    radial-gradient(circle, rgba(246, 241, 209, .42) 0 1px, transparent 1.3px),
    linear-gradient(rgba(38, 59, 97, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 59, 97, .1) 1px, transparent 1px);
  background-size: 37px 37px, 92px 92px, 92px 92px;
  mix-blend-mode: screen;
}

.outcome-nav {
  position: fixed;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .8rem;
  z-index: 30;
  font: 700 .72rem/1 var(--font-math);
  color: rgba(246, 241, 209, .62);
}

.outcome-nav a {
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(94, 242, 194, .25);
  border-radius: 50%;
  background: rgba(20, 27, 45, .42);
  box-shadow: inset 0 0 18px rgba(118, 87, 255, .18);
  transition: border-color .4s, color .4s, transform .4s;
}

.outcome-nav a:hover { color: var(--mint); border-color: var(--mint); transform: scale(1.12); }
.outcome-nav a.is-active { color: var(--sample-navy); border-color: var(--mint); background: var(--mint); box-shadow: 0 0 24px rgba(94, 242, 194, .34); }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.hero-scene {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 52% 47%, rgba(38, 59, 97, .55), transparent 34rem),
    radial-gradient(ellipse at 50% 70%, rgba(94, 242, 194, .08), transparent 29rem),
    var(--sample-navy);
}

.hero-copy { position: relative; z-index: 5; width: min(90vw, 1080px); }

.prefix-ghost {
  position: absolute;
  left: 4%;
  top: -4rem;
  font: 700 clamp(3rem, 10vw, 10rem)/1 var(--font-display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 77, 157, .42);
  filter: blur(.2px);
  opacity: .7;
  animation: missingPrefix 7s ease-in-out infinite;
}

h1, h2 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.055em; }

h1 {
  font-size: clamp(4rem, 15vw, 15rem);
  line-height: .78;
  color: var(--parchment);
  text-shadow: 0 0 42px rgba(246, 241, 209, .12), 0 0 80px rgba(118, 87, 255, .22);
  mask-image: linear-gradient(90deg, #000 0 18%, transparent 18.4% 19%, #000 19.5% 43%, transparent 43.3% 44.5%, #000 45% 100%);
}

.hero-copy p {
  margin: 2rem 0 0 12vw;
  max-width: 34rem;
  color: rgba(246, 241, 209, .72);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
}

.likelihood-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.likelihood-line path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.line-main { stroke: var(--mint); stroke-width: 5; filter: drop-shadow(0 0 14px rgba(94, 242, 194, .65)); stroke-dasharray: 1800; stroke-dashoffset: 1800; animation: drawLine 5s ease forwards; }
.line-branch { stroke-width: 3; stroke-dasharray: 780; stroke-dashoffset: 780; animation: drawLine 3s ease 2.2s forwards, pulseStroke 4s ease-in-out 5s infinite; }
.branch-mint { stroke: var(--mint); }
.branch-violet { stroke: var(--violet); }
.branch-magenta { stroke: var(--magenta); }

.density-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  opacity: .62;
  background: radial-gradient(ellipse at center, rgba(94, 242, 194, .22), rgba(118, 87, 255, .14) 38%, rgba(255, 77, 157, .06) 58%, transparent 72%);
  animation: cloudMorph 12s ease-in-out infinite alternate;
}
.cloud-one { width: 50vw; height: 24vw; left: -9vw; top: 14vh; transform: rotate(-18deg); }
.cloud-two { width: 46vw; height: 20vw; right: -10vw; bottom: 10vh; animation-delay: -5s; }
.cloud-three { width: 70vw; height: 25vw; left: 15vw; top: 12vh; animation-delay: -2s; }

.formula-dust {
  position: absolute;
  right: 8vw;
  top: 13vh;
  color: rgba(246, 241, 209, .28);
  font: 1rem var(--font-math);
  transform: rotate(8deg);
}

.chalk-fragment {
  position: absolute;
  z-index: 2;
  color: rgba(246, 241, 209, .22);
  font: 700 clamp(.72rem, 1.1vw, 1rem)/1.4 var(--font-math);
  letter-spacing: .04em;
  text-shadow: 0 0 24px rgba(246, 241, 209, .08);
}
.cf-a { left: 7vw; bottom: 14vh; transform: rotate(-9deg); }
.cf-b { right: 16vw; bottom: 28vh; transform: rotate(13deg); color: rgba(255, 184, 77, .3); }

.bell-fog {
  position: absolute;
  width: 64vw;
  height: 22vh;
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(246, 241, 209, .1), transparent 58%),
    radial-gradient(ellipse at 50% 40%, rgba(94, 242, 194, .12), transparent 62%);
  filter: blur(10px);
  opacity: .55;
  clip-path: polygon(0 100%, 8% 88%, 16% 72%, 25% 48%, 35% 25%, 45% 10%, 52% 5%, 60% 12%, 70% 32%, 80% 58%, 91% 84%, 100% 100%);
  animation: fogSlide 16s ease-in-out infinite alternate;
}
.fog-a { left: 17vw; bottom: 4vh; }
.fog-b { right: -6vw; top: 22vh; animation-delay: -8s; }

.sample-particle, .rain-field span, .die-storm {
  position: absolute;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--parchment);
  box-shadow: 0 0 14px currentColor;
  color: var(--parchment);
}
.sample-particle.likely { color: var(--mint); background: var(--mint); }
.sample-particle.uncertain { color: var(--violet); background: var(--violet); }
.rare-event { color: var(--magenta); background: var(--magenta); border-radius: 20% 50% 20% 50%; transform: rotate(45deg); }
.p1{left:17%;top:24%;animation:drift 8s infinite}.p2{left:31%;top:37%;animation:drift 7s -1s infinite}.p3{left:49%;top:20%;animation:escape 6s infinite}.p4{left:66%;top:42%;animation:drift 9s -3s infinite}.p5{left:75%;top:68%;animation:drift 10s -2s infinite}.p6{left:23%;top:72%;animation:drift 8s -4s infinite}.p7{left:58%;top:62%;animation:escape 7s -2s infinite}.p8{left:82%;top:28%;animation:drift 6s -1s infinite}.p9{left:42%;top:82%;animation:drift 9s -5s infinite}.p10{left:9%;top:51%;animation:drift 7s -2s infinite}.p11{left:90%;top:49%;animation:escape 8s -3s infinite}.p12{left:53%;top:46%;animation:drift 10s -6s infinite}.p13{left:36%;top:16%;animation:drift 11s -3s infinite}.p14{left:71%;top:14%;animation:drift 8s -5s infinite}.p15{left:14%;top:83%;animation:escape 9s -4s infinite}

.probability-labels span {
  position: absolute;
  z-index: 4;
  color: rgba(246, 241, 209, .6);
  font: 700 .9rem var(--font-math);
}
.probability-labels span:nth-child(1){left:15%;top:38%}.probability-labels span:nth-child(2){left:55%;top:26%}.probability-labels span:nth-child(3){right:14%;top:54%}.probability-labels span:nth-child(4){left:43%;bottom:16%}

.drift-scene { min-height: 120vh; background: linear-gradient(90deg, #080b1b, var(--event-blue) 45%, #090817); }
.horizontal-track { display: flex; width: 300vw; min-height: 100vh; transform: translateX(var(--drift, 0)); transition: transform .2s linear; }
.drift-panel { position: relative; width: 100vw; min-height: 100vh; padding: clamp(3rem, 8vw, 8rem); display: grid; align-content: center; }
.scene-kicker { margin: 0 0 1rem; color: var(--mint); font: 700 .78rem/1 var(--font-math); text-transform: uppercase; letter-spacing: .24em; }
.drift-panel h2, .rain-scene h2, .probability-pool h2 { max-width: 58rem; font-size: clamp(3rem, 8vw, 8.5rem); line-height: .88; }
.drift-panel p, .rain-scene > p:not(.scene-kicker), .probability-pool p { max-width: 35rem; color: rgba(246, 241, 209, .72); font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1.55; }
.chance-garden { background: radial-gradient(ellipse at center, rgba(118, 87, 255, .16), transparent 40rem); }
.threshold-ticks { position:absolute; inset:18vh 10vw auto; height:1rem; display:flex; justify-content:space-between; opacity:.55; }
.threshold-ticks span { width:1px; height:18vh; background:linear-gradient(var(--amber), transparent); box-shadow:0 0 16px rgba(255,184,77,.35); transform:rotate(var(--tick-tilt, 0deg)); }
.threshold-ticks span:nth-child(2){--tick-tilt:-7deg}.threshold-ticks span:nth-child(3){--tick-tilt:5deg}.threshold-ticks span:nth-child(4){--tick-tilt:-3deg}.threshold-ticks span:nth-child(5){--tick-tilt:8deg}
.garden-svg { position: absolute; inset: 12vh 4vw; width: 92vw; height: 74vh; }
.counterfactual-path { fill: none; stroke: rgba(246, 241, 209, .32); stroke-width: 2; stroke-dasharray: 5 18; }
.selected-path { fill: none; stroke-width: 14; stroke-linecap: round; opacity: .78; filter: blur(.2px) drop-shadow(0 0 20px currentColor); transition: stroke-width .35s, opacity .35s; }
.mint-weight { stroke: var(--mint); color: var(--mint); }.violet-weight { stroke: var(--violet); color: var(--violet); }.magenta-weight { stroke: var(--magenta); color: var(--magenta); }
.chance-gate { position: absolute; font: 12rem/1 var(--font-math); color: rgba(94, 242, 194, .25); top: 35%; }
.gate-a { left: 13%; }.gate-b { right: 13%; }
.rare-diamond { position: absolute; right: 10vw; bottom: 15vh; padding: 1rem 1.2rem; border: 1px solid rgba(255, 77, 157, .5); color: var(--magenta); transform: rotate(-4deg); background: rgba(7, 10, 24, .6); }

.transparent-die { position: relative; width: min(42vw, 28rem); aspect-ratio: 1; margin-bottom: 3rem; border: 2px solid rgba(94, 242, 194, .45); transform: rotateX(58deg) rotateZ(42deg); background: linear-gradient(135deg, rgba(94, 242, 194, .08), rgba(118, 87, 255, .18)); box-shadow: inset 0 0 70px rgba(94, 242, 194, .15), 0 0 80px rgba(118, 87, 255, .25); }
.coin-edge { position:absolute; right:12vw; top:14vh; width:12rem; aspect-ratio:1; border-radius:50%; border:2px solid rgba(255,184,77,.42); border-left-color:transparent; box-shadow:0 0 40px rgba(255,184,77,.16), inset 0 0 30px rgba(255,184,77,.08); animation:coinFlip 8s ease-in-out infinite; }
.coin-edge::before { content:"01"; position:absolute; inset:18%; border-radius:50%; border:1px dashed rgba(246,241,209,.24); display:grid; place-items:center; color:rgba(255,184,77,.62); font:800 1.4rem var(--font-math); }
.transparent-die i { position: absolute; width: 12%; aspect-ratio:1; border-radius:50%; background: var(--amber); box-shadow: 0 0 24px var(--amber); }
.transparent-die i:nth-child(1){left:18%;top:18%}.transparent-die i:nth-child(2){right:18%;top:18%}.transparent-die i:nth-child(3){left:44%;top:44%}.transparent-die i:nth-child(4){left:18%;bottom:18%}.transparent-die i:nth-child(5){right:18%;bottom:18%}.transparent-die i:nth-child(6){right:18%;top:44%}
.die-storm { color: var(--mint); background: var(--mint); animation: storm 5s linear infinite; }.s1{left:20%;top:45%}.s2{left:63%;top:30%;animation-delay:-1s}.s3{left:38%;top:66%;animation-delay:-2s}.s4{left:78%;top:58%;animation-delay:-3s}

.rain-scene { padding: clamp(3rem, 8vw, 8rem); background: radial-gradient(circle at 50% 30%, rgba(38, 59, 97, .7), transparent 35rem), var(--sample-navy); }
.rain-field { position: absolute; inset: 0; overflow: hidden; }
.rain-field span { top: -3rem; opacity: .7; animation: rain 5s linear infinite; }
.rain-field span:nth-child(1){left:4%;animation-delay:-.2s}.rain-field span:nth-child(2){left:9%;animation-delay:-2s}.rain-field span:nth-child(3){left:15%;animation-delay:-1s}.rain-field span:nth-child(4){left:22%;animation-delay:-3s}.rain-field span:nth-child(5){left:28%;animation-delay:-.8s}.rain-field span:nth-child(6){left:34%;animation-delay:-4s}.rain-field span:nth-child(7){left:41%;animation-delay:-1.8s}.rain-field span:nth-child(8){left:48%;animation-delay:-3.6s}.rain-field span:nth-child(9){left:54%;animation-delay:-2.4s}.rain-field span:nth-child(10){left:59%;animation-delay:-.5s}.rain-field span:nth-child(11){left:64%;animation-delay:-2.9s}.rain-field span:nth-child(12){left:69%;animation-delay:-1.4s}.rain-field span:nth-child(13){left:73%;animation-delay:-3.9s}.rain-field span:nth-child(14){left:77%;animation-delay:-.7s}.rain-field span:nth-child(15){left:81%;animation-delay:-2.1s}.rain-field span:nth-child(16){left:85%;animation-delay:-4.7s}.rain-field span:nth-child(17){left:89%;animation-delay:-1.2s}.rain-field span:nth-child(18){left:92%;animation-delay:-3.3s}.rain-field span:nth-child(19){left:96%;animation-delay:-.1s}.rain-field span:nth-child(20){left:50%;animation-delay:-4.2s}
.bayes-ring { position: absolute; right: 9vw; bottom: 13vh; width: clamp(15rem, 28vw, 28rem); aspect-ratio:1; border-radius:50%; border: 2px solid rgba(94, 242, 194, .4); display:grid; place-items:center; background: conic-gradient(from 90deg, rgba(94,242,194,.55), rgba(118,87,255,.18), rgba(255,77,157,.5), rgba(94,242,194,.55)); box-shadow: 0 0 50px rgba(94,242,194,.18); animation: rotateRing 14s linear infinite; }
.bayes-ring::before { content:""; position:absolute; inset:12%; border-radius:50%; background: var(--sample-navy); border:1px dashed rgba(246,241,209,.26); }
.ring-core { position: relative; z-index:1; font: 800 6rem/1 var(--font-math); color: var(--parchment); }
.ring-caption { position: absolute; bottom: -2.2rem; width: 100%; text-align:center; color: rgba(246,241,209,.65); animation: counterRotate 14s linear infinite; }
.formula-ribbon { position:absolute; left:8vw; bottom:13vh; color:rgba(246,241,209,.38); font:700 clamp(.9rem, 1.3vw, 1.15rem) var(--font-math); transform:rotate(-4deg); }
.experiment-control { position: relative; z-index:2; margin-top: 3rem; border: 1px solid var(--amber); color: var(--amber); background: rgba(255, 184, 77, .08); padding: 1rem 1.4rem; border-radius: 999px; font: 800 .85rem/1 var(--font-math); text-transform: uppercase; letter-spacing: .18em; cursor:pointer; box-shadow: 0 0 24px rgba(255,184,77,.12); }
.collapse-layer { position:absolute; inset:0; pointer-events:none; }
.collapse-ripple { position:absolute; width:1rem; height:1rem; border:2px solid var(--mint); border-radius:50%; transform:translate(-50%,-50%); animation:ripple 1.1s ease-out forwards; box-shadow:0 0 30px var(--mint); }

.outcome-scene { display:grid; place-items:center; background: radial-gradient(ellipse at center, rgba(94,242,194,.08), transparent 31rem), #060815; }
.pool-line { opacity:.72; }.pool-main { animation-duration: 8s; }
.probability-pool { position:relative; z-index:4; width:min(82vw, 58rem); text-align:center; padding:4rem 2rem; border-radius:50%; background: radial-gradient(ellipse at center, rgba(94,242,194,.16), rgba(118,87,255,.08) 45%, transparent 70%); }
.pool-percent { display:block; margin-bottom:1rem; color: var(--mint); font: 800 clamp(3rem, 10vw, 10rem)/1 var(--font-math); text-shadow:0 0 50px rgba(94,242,194,.38); }
.probability-pool p { margin:2rem auto 0; }
.pool-question { position:absolute; z-index:5; left:50%; bottom:9vh; transform:translateX(-50%); width:min(80vw, 36rem); text-align:center; color:rgba(246,241,209,.5); font:700 .92rem/1.5 var(--font-math); letter-spacing:.04em; }
.venn { position:absolute; width:30vw; aspect-ratio:1; border-radius:50%; border:1px solid rgba(246,241,209,.18); background:rgba(118,87,255,.06); mix-blend-mode:screen; }
.v1{left:12vw;top:24vh}.v2{left:25vw;top:32vh;background:rgba(94,242,194,.06)}.v3{right:16vw;bottom:20vh;background:rgba(255,77,157,.06)}

@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes pulseStroke { 50% { opacity: .45; stroke-width: 7; } }
@keyframes missingPrefix { 50% { transform: translateX(2rem); opacity: .25; } }
@keyframes cloudMorph { to { border-radius: 42% 58% 63% 37%; transform: translateY(2rem) rotate(8deg) scale(1.08); } }
@keyframes drift { 50% { transform: translate(1.8rem, -1.2rem) scale(1.55); opacity:.55; } }
@keyframes escape { 50% { transform: translate(4rem, -3rem) rotate(90deg) scale(1.8); opacity:1; } }
@keyframes storm { to { transform: rotate(360deg) translateX(5rem) rotate(-360deg); } }
@keyframes rain { to { transform: translateY(110vh) translateX(3rem); opacity:.15; } }
@keyframes rotateRing { to { transform: rotate(360deg); } }
@keyframes counterRotate { to { transform: rotate(-360deg); } }
@keyframes ripple { to { width:26rem; height:26rem; opacity:0; } }
@keyframes fogSlide { to { transform: translateX(5vw) translateY(-2vh) scaleX(1.15); opacity:.28; } }
@keyframes coinFlip { 50% { transform: rotateY(76deg) rotateZ(180deg); border-color:rgba(94,242,194,.45); border-right-color:transparent; } }

@media (max-width: 800px) {
  .outcome-nav { display: none; }
  .horizontal-track { display:block; width:100%; transform:none !important; }
  .drift-panel { width:100%; min-height:90vh; }
  .garden-svg { inset: 22vh 2vw; }
  .bayes-ring { position:relative; right:auto; bottom:auto; margin:3rem auto 0; }
}