:root {
  /* Font compliance tokens from DESIGN.md: IBM Plex Sans KR** Korean explanatory fragments sparingly formulas */
  --probability-ink: #070716;
  --moon-probability: #F4F0E2;
  --rare-magenta: #FF3D8B;
  --pollen-yellow: #F6D65B;
  --conditional-cyan: #41E7E1;
  --plum-shadow: #2B1648;
  --ghost-lavender: #A99CFF;
  --probability-glass: rgba(244, 240, 226, 0.12);
  --axis: -17deg;
  --display-hangul: 'Black Han Sans', sans-serif;
  --display-serif: 'Cormorant Garamond', serif;
  --body-kr: 'IBM Plex Sans KR', sans-serif;
  --mono: 'Space Mono', monospace;
  --kr-token: 'KR**';
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--probability-ink); }

body {
  margin: 0;
  color: var(--moon-probability);
  font-family: var(--body-kr);
  background:
    radial-gradient(circle at 78% 8%, rgba(65, 231, 225, 0.16), transparent 28vw),
    radial-gradient(circle at 10% 38%, rgba(169, 156, 255, 0.18), transparent 32vw),
    radial-gradient(circle at 72% 84%, rgba(255, 61, 139, 0.10), transparent 24vw),
    linear-gradient(135deg, #070716 0%, #120B28 46%, #070716 100%);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.ambient-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .36;
  background-image:
    radial-gradient(circle, rgba(244,240,226,.16) 0 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(65,231,225,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(169,156,255,.03) 1px, transparent 1px);
  background-size: 43px 43px, 96px 96px, 96px 96px;
  mix-blend-mode: screen;
}

.chamber { position: relative; z-index: 3; }

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 6vw, 86px);
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 8% -10%;
  transform: rotate(var(--axis));
  background: linear-gradient(90deg, transparent, rgba(244,240,226,.07), transparent 60%);
  border-top: 1px solid rgba(244,240,226,.12);
  border-bottom: 1px solid rgba(65,231,225,.10);
  z-index: -1;
}

.probability-thread {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 4;
  pointer-events: none;
  opacity: .86;
}

.thread-line, .thread-split, .thread-shadow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thread-line {
  stroke: var(--conditional-cyan);
  stroke-width: 3.1;
  filter: url(#threadGlow);
  stroke-dasharray: 1450;
  stroke-dashoffset: 1450;
  animation: drawThread 4.6s cubic-bezier(.4,0,.05,1) forwards, threadBreath 5s ease-in-out infinite 4.5s;
}

.thread-shadow { stroke: rgba(169,156,255,.23); stroke-width: 13; }
.thread-split { stroke: rgba(255,61,139,.58); stroke-width: 1.4; stroke-dasharray: 8 17; animation: splitPulse 3s ease-in-out infinite; }
.split-b { stroke: rgba(169,156,255,.50); animation-delay: -1.1s; }

@keyframes drawThread { to { stroke-dashoffset: 0; } }
@keyframes threadBreath { 50% { stroke-width: 4.5; opacity: .67; } }
@keyframes splitPulse { 50% { stroke-dashoffset: -42; opacity: .22; } }

.decimal-curtain {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(244,240,226,.34);
  pointer-events: none;
  animation: curtainBreathe 7s ease-in-out infinite;
}

.curtain-left { left: 18px; }
.curtain-right { right: 18px; align-items: flex-end; animation-delay: -2s; }
@keyframes curtainBreathe { 50% { transform: translateY(-16px); color: rgba(65,231,225,.42); } }

.likelihood-dial {
  position: fixed;
  top: 26px;
  right: 28px;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(244,240,226,.28);
  border-radius: 50%;
  z-index: 8;
  background: radial-gradient(circle, rgba(43,22,72,.74), rgba(7,7,22,.32));
  box-shadow: 0 0 40px rgba(65,231,225,.13), inset 0 0 28px rgba(169,156,255,.10);
  transition: transform .5s ease;
}

.dial-mark {
  position: absolute;
  width: 32px;
  height: 32px;
  margin: -16px;
  border: 0;
  border-radius: 50%;
  background: rgba(244,240,226,.08);
  color: rgba(244,240,226,.62);
  font-family: var(--mono);
  font-size: 8px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.dial-mark:nth-child(1) { left: 50%; top: 6%; }
.dial-mark:nth-child(2) { left: 88%; top: 28%; }
.dial-mark:nth-child(3) { left: 88%; top: 72%; }
.dial-mark:nth-child(4) { left: 50%; top: 94%; }
.dial-mark:nth-child(5) { left: 12%; top: 72%; }
.dial-mark:nth-child(6) { left: 12%; top: 28%; }
.dial-mark.active { background: var(--conditional-cyan); color: var(--probability-ink); box-shadow: 0 0 18px var(--conditional-cyan); }

.hangul-gate {
  font-family: var(--display-hangul);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,240,226,.26);
  text-shadow: 0 0 42px rgba(65,231,225,.16), 0 0 120px rgba(169,156,255,.12);
  user-select: none;
}

.gate-null { position: absolute; right: 4vw; top: 4vh; font-size: clamp(130px, 26vw, 390px); opacity: .58; }
.gate-branch { position: absolute; left: -2vw; top: 4vh; font-size: clamp(170px, 32vw, 440px); opacity: .35; }
.gate-collapse { position: absolute; right: -2vw; bottom: 2vh; font-size: clamp(180px, 32vw, 440px); opacity: .38; }

.title-cluster {
  position: absolute;
  left: clamp(32px, 8vw, 124px);
  bottom: clamp(56px, 12vh, 126px);
  width: min(620px, 78vw);
  transform: rotate(-3deg);
}

.seed-label, .mono-label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  color: var(--conditional-cyan);
}

h1, h2 { margin: 0; font-family: var(--display-serif); font-weight: 500; }
h1 { font-size: clamp(58px, 11vw, 160px); line-height: .82; letter-spacing: -.045em; color: var(--moon-probability); }
h2 { font-size: clamp(38px, 6vw, 86px); line-height: .9; letter-spacing: -.035em; }
p { font-size: clamp(16px, 1.7vw, 22px); line-height: 1.65; color: rgba(244,240,226,.78); }

.scene-whisper { max-width: 520px; margin: 24px 0 28px; }

.world-object {
  border: 1px solid rgba(246,214,91,.65);
  background:
    radial-gradient(circle at 34% 26%, rgba(246,214,91,.46), transparent 28%),
    linear-gradient(135deg, rgba(244,240,226,.12), rgba(43,22,72,.78));
  color: var(--pollen-yellow);
  border-radius: 999px;
  padding: 15px 26px;
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: lowercase;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(246,214,91,.14), inset 0 0 18px rgba(255,61,139,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}

.world-object:hover, body.disturbed .maybe-coin { transform: rotate(-7deg) translateY(-3px); box-shadow: 0 0 42px rgba(246,214,91,.30), inset 0 0 22px rgba(65,231,225,.14); }

.sample-field { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.sample-bead {
  position: absolute;
  width: var(--size, 7px);
  height: var(--size, 7px);
  border-radius: 50%;
  background: var(--bead-color, var(--conditional-cyan));
  box-shadow: 0 0 16px currentColor;
  color: var(--bead-color, var(--conditional-cyan));
  opacity: .82;
  transform: translate3d(0,0,0);
}

body.disturbed .sample-bead { animation-duration: 1.6s !important; }

.talisman {
  position: absolute;
  width: 132px;
  min-height: 180px;
  padding: 18px 14px;
  background: linear-gradient(180deg, rgba(244,240,226,.18), rgba(244,240,226,.06));
  border: 1px solid rgba(244,240,226,.24);
  box-shadow: 0 22px 60px rgba(7,7,22,.36);
  transform: rotate(var(--tilt, 8deg));
  backdrop-filter: blur(10px);
}

.talisman b { display: block; font-family: var(--mono); color: var(--rare-magenta); font-size: 20px; margin-bottom: 46px; }
.talisman span { font-family: var(--display-serif); font-style: italic; font-size: 21px; color: rgba(244,240,226,.82); }
.talisman-one { right: 24vw; bottom: 13vh; --tilt: 9deg; }
.talisman-two { left: 17vw; bottom: 11vh; --tilt: -11deg; }

.floating-note { position: absolute; font-family: var(--display-serif); font-style: italic; color: rgba(169,156,255,.72); }
.note-a { top: 35vh; left: 28vw; font-size: 25px; transform: rotate(-17deg); }

.angled-panel {
  width: min(620px, 84vw);
  padding: clamp(24px, 4vw, 46px);
  background: linear-gradient(135deg, rgba(244,240,226,.12), rgba(43,22,72,.54));
  border: 1px solid rgba(244,240,226,.18);
  box-shadow: 0 26px 90px rgba(7,7,22,.42), inset 0 0 40px rgba(65,231,225,.045);
  backdrop-filter: blur(14px);
  transform: rotate(-4deg);
}

.sample-rain .scene-header { margin-left: 9vw; margin-top: 9vh; }
.rain-loom { position: absolute; right: 5vw; top: 7vh; width: min(630px, 56vw); height: 76vh; transform: rotate(17deg); }
.pin-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(244,240,226,.34) 0 2px, transparent 2.5px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, transparent, black 14%, black 82%, transparent); }
.rain-loom .sample-bead { animation: beadFall var(--fall, 7s) linear infinite; }
@keyframes beadFall { from { transform: translateY(-12vh) translateX(0); } 45% { transform: translateY(34vh) translateX(var(--swerve, 52px)); } to { transform: translateY(83vh) translateX(calc(var(--swerve, 52px) * -0.6)); opacity: .18; } }

.formula-cloud { position: absolute; left: 16vw; bottom: 14vh; width: 40vw; min-height: 170px; }
.formula-cloud span { position: absolute; font-family: var(--mono); color: rgba(244,240,226,.62); text-shadow: 0 0 14px rgba(65,231,225,.2); }
.formula-cloud span:nth-child(1) { left: 3%; top: 20%; color: var(--conditional-cyan); }
.formula-cloud span:nth-child(2) { left: 38%; top: 4%; }
.formula-cloud span:nth-child(3) { left: 62%; top: 44%; font-family: var(--display-serif); font-size: 30px; color: var(--ghost-lavender); }
.formula-cloud span:nth-child(4) { left: 16%; top: 72%; color: var(--rare-magenta); }
.formula-cloud span:nth-child(5) { left: 78%; top: 8%; color: var(--pollen-yellow); }

.branch-map { position: absolute; inset: 0; transform: rotate(-17deg); }
.branch { position: absolute; height: 2px; transform-origin: left center; background: linear-gradient(90deg, var(--conditional-cyan), rgba(65,231,225,.08)); box-shadow: 0 0 18px rgba(65,231,225,.38); }
.branch span { position: absolute; left: 68%; bottom: 12px; white-space: nowrap; font-family: var(--display-serif); font-style: italic; color: var(--moon-probability); font-size: 22px; transform: rotate(17deg); }
.branch.root { left: 20vw; top: 53vh; width: 28vw; }
.branch.b1 { left: 45vw; top: 53vh; width: 34vw; transform: rotate(-31deg); }
.branch.b2 { left: 45vw; top: 53vh; width: 31vw; transform: rotate(23deg); }
.branch.b3 { left: 61vw; top: 33vh; width: 21vw; transform: rotate(36deg); background: linear-gradient(90deg, var(--rare-magenta), rgba(255,61,139,.05)); }
.counterfactual-ghost { opacity: .32; filter: blur(.2px); }
.branch:hover, .branch.hovered { opacity: 1; height: 4px; }
.branch:hover span, .branch.hovered span { color: var(--pollen-yellow); }
.branch-copy { position: absolute; right: 7vw; bottom: 10vh; transform: rotate(5deg); }

.conditional-scene { display: grid; place-items: center; }
.conditional-mirror {
  width: min(48vw, 560px);
  aspect-ratio: 1.4;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 30%, rgba(244,240,226,.22), rgba(65,231,225,.11) 36%, rgba(43,22,72,.76) 70%);
  border: 1px solid rgba(65,231,225,.42);
  box-shadow: 0 0 90px rgba(65,231,225,.22), inset 0 0 70px rgba(169,156,255,.16);
  transform: rotateY(22deg) rotateZ(-10deg);
  transition: transform .5s ease;
}
.mirror-face { height: 100%; display: grid; place-items: center; text-align: center; }
.mirror-face span { font-family: var(--mono); font-size: clamp(34px, 7vw, 88px); color: var(--conditional-cyan); }
.mirror-face em { position: absolute; margin-top: 110px; font-family: var(--display-serif); color: rgba(244,240,226,.72); font-size: 25px; }
.mirror-orbit span { position: absolute; font-family: var(--mono); color: var(--ghost-lavender); }
.mirror-orbit span:nth-child(1) { left: 28vw; top: 24vh; }
.mirror-orbit span:nth-child(2) { right: 24vw; top: 31vh; }
.mirror-orbit span:nth-child(3) { left: 22vw; bottom: 27vh; color: var(--pollen-yellow); }
.mirror-orbit span:nth-child(4) { right: 21vw; bottom: 22vh; color: var(--rare-magenta); }
.mirror-copy { position: absolute; left: 7vw; bottom: 8vh; transform: rotate(-7deg); }

.rare-alcove { display: grid; place-items: center; }
.alcove-ring { position: absolute; width: min(68vw, 760px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,61,139,.42); box-shadow: 0 0 80px rgba(255,61,139,.20), inset 0 0 120px rgba(169,156,255,.10); }
.rare-flash { animation: rarePulse 2.8s ease-in-out infinite; }
@keyframes rarePulse { 50% { opacity: .44; filter: drop-shadow(0 0 30px var(--rare-magenta)); } }
.dice-stars { position: absolute; inset: 16vh 18vw; }
.dice-stars i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--pollen-yellow); box-shadow: 0 0 20px var(--pollen-yellow); }
.dice-stars i:nth-child(1){left:8%;top:22%}.dice-stars i:nth-child(2){left:24%;top:62%}.dice-stars i:nth-child(3){left:43%;top:18%}.dice-stars i:nth-child(4){left:57%;top:70%}.dice-stars i:nth-child(5){left:72%;top:36%}.dice-stars i:nth-child(6){left:86%;top:56%}.dice-stars i:nth-child(7){left:35%;top:44%;background:var(--rare-magenta)}.dice-stars i:nth-child(8){left:65%;top:14%;background:var(--conditional-cyan)}.dice-stars i:nth-child(9){left:16%;top:82%;background:var(--ghost-lavender)}
.rare-script { width: min(660px, 82vw); text-align: center; transform: rotate(-3deg); }
.rare-script h2 { color: var(--rare-magenta); text-shadow: 0 0 48px rgba(255,61,139,.28); }

.collapse-scene { display: flex; align-items: center; justify-content: center; gap: 7vw; }
.collapse-pool {
  position: relative;
  width: min(44vw, 560px);
  aspect-ratio: 1;
  border-radius: 45% 55% 52% 48%;
  background: radial-gradient(circle at 42% 36%, rgba(65,231,225,.30), rgba(169,156,255,.18) 36%, rgba(43,22,72,.55) 70%, rgba(7,7,22,.2));
  border: 1px solid rgba(244,240,226,.22);
  box-shadow: 0 0 80px rgba(65,231,225,.17), inset 0 0 80px rgba(244,240,226,.08);
  animation: poolEdge 6s ease-in-out infinite;
}
@keyframes poolEdge { 50% { border-radius: 55% 45% 44% 56%; transform: rotate(4deg); } }
.collapse-pool span { position: absolute; inset: var(--inset, 18%); border-radius: 50%; border: 1px solid rgba(244,240,226,.12); animation: ripple 3.5s ease-in-out infinite; }
.collapse-pool span:nth-child(2){--inset:28%;animation-delay:-.8s}.collapse-pool span:nth-child(3){--inset:39%;animation-delay:-1.4s}.collapse-pool span:nth-child(4){--inset:9%;animation-delay:-2.2s}
@keyframes ripple { 50% { transform: scale(1.08); border-color: rgba(65,231,225,.32); } }
.collapse-copy { transform: rotate(4deg); }

.falling-release {
  position: fixed;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--pollen-yellow);
  box-shadow: 0 0 24px var(--pollen-yellow);
  z-index: 20;
  pointer-events: none;
  animation: releasedBead 1.4s cubic-bezier(.3,.1,.2,1) forwards;
}
@keyframes releasedBead { to { transform: translate(var(--tx), var(--ty)) scale(.35); opacity: 0; } }

@media (max-width: 760px) {
  .likelihood-dial { transform: scale(.78); transform-origin: top right; }
  .decimal-curtain { display: none; }
  .scene { padding: 28px; }
  .title-cluster { left: 28px; bottom: 70px; width: calc(100vw - 56px); }
  .rain-loom { width: 86vw; right: -18vw; opacity: .7; }
  .branch-copy, .mirror-copy { left: 28px; right: auto; width: calc(100vw - 56px); }
  .collapse-scene { display: block; padding-top: 22vh; }
  .collapse-pool { width: 78vw; margin: 0 auto 46px; }
}