:root {
  --lacquer-night: #07060D;
  --probability-blue: #365CFF;
  --violet-afterimage: #8B5CF6;
  --ink-wash: #202437;
  --jade-sample: #58D6A9;
  --hanji-moon: #F4EFD8;
  --persimmon-signal: #FF6B35;
  --display: "Gowun Batang", serif;
  --interface: "Space Grotesk", sans-serif;
  --math: "Noto Sans Math", serif;
  --copy: "IBM Plex Sans KR", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--lacquer-night); color: var(--hanji-moon); overflow: hidden; }

body { font-family: var(--copy); cursor: crosshair; }

.lacquer-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 74% 22%, rgba(54, 92, 255, .18), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(139, 92, 246, .13), transparent 34%),
    radial-gradient(circle at 54% 48%, rgba(244, 239, 216, .045), transparent 24%),
    repeating-linear-gradient(112deg, rgba(244,239,216,.035) 0 1px, transparent 1px 8px);
  filter: saturate(1.05);
}

.lacquer-grain::after {
  content: ""; position: absolute; inset: -20%; opacity: .38;
  background-image: radial-gradient(rgba(244,239,216,.09) 1px, transparent 1px);
  background-size: 23px 29px; transform: rotate(-8deg);
}

.pavilion-seal {
  position: fixed; left: clamp(18px, 3vw, 44px); top: clamp(18px, 3vw, 36px); z-index: 20;
  display: grid; gap: 4px; padding: 12px 14px 10px; border: 1px solid rgba(244,239,216,.28);
  background: rgba(7, 6, 13, .62); box-shadow: 0 0 0 2px rgba(255,107,53,.15) inset; transform: rotate(-2deg);
}

.pavilion-seal span { font-family: var(--interface); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.pavilion-seal i { color: var(--persimmon-signal); font: 500 11px var(--copy); letter-spacing: .1em; font-style: normal; }

.chance-thread { position: fixed; inset: auto 0 0; width: 100vw; height: 54vh; z-index: 12; pointer-events: none; overflow: visible; }
.chance-thread path { fill: none; stroke: var(--probability-blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1450; stroke-dashoffset: 1450; filter: drop-shadow(0 0 14px rgba(54,92,255,.8)); animation: drawThread 3.8s cubic-bezier(.2,.8,.2,1) forwards; }
.chance-thread .thread-ghost { stroke: var(--violet-afterimage); stroke-width: 1.2; opacity: .35; animation-delay: .7s; }

@keyframes drawThread { to { stroke-dashoffset: 0; } }

.probability-dial {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 24; display: grid; gap: 16px;
  padding: 12px 9px; border-radius: 999px; border: 1px solid rgba(244,239,216,.14); background: rgba(32,36,55,.36);
}

.dial-bead { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(244,239,216,.14); color: rgba(244,239,216,.72); font: 600 9px var(--interface); padding: 0; transition: transform .5s, background .5s, color .5s, box-shadow .5s; }
.dial-bead.active { background: var(--jade-sample); color: var(--lacquer-night); transform: translateX(-8px) scale(1.22); box-shadow: 0 0 22px rgba(88,214,169,.74); }

.likelihood-pavilion { position: relative; z-index: 2; height: 100vh; perspective: 1400px; }
.scene { position: absolute; inset: 0; min-height: 100vh; overflow: hidden; opacity: 0; transform: translate3d(0, 7vh, -120px) rotate(-2deg); transition: opacity .9s ease, transform 1.1s cubic-bezier(.18,.84,.22,1); pointer-events: none; }
.scene.active { opacity: 1; transform: translate3d(0,0,0) rotate(0deg); pointer-events: auto; }

.radial-plane { position: absolute; width: min(88vw, 980px); aspect-ratio: 1; border-radius: 50%; left: 36%; top: 9%; transform: translateX(-50%) rotateX(64deg) rotateZ(-18deg); background: radial-gradient(circle, rgba(244,239,216,.12), rgba(32,36,55,.26) 34%, transparent 67%), repeating-conic-gradient(from 8deg, rgba(244,239,216,.18) 0 1deg, transparent 1deg 8deg); border: 1px solid rgba(244,239,216,.13); filter: blur(.1px); animation: slowOrbit 18s linear infinite; }
@keyframes slowOrbit { 50% { transform: translateX(-48%) rotateX(64deg) rotateZ(14deg) scale(1.04); } }

.hangul-screen { position: absolute; inset: 0; font-family: var(--display); font-weight: 700; color: rgba(244,239,216,.145); user-select: none; }
.huge-hangul { position: absolute; font-size: clamp(230px, 42vw, 680px); line-height: .75; text-shadow: 0 0 34px rgba(244,239,216,.08); }
.huge-hangul.left { left: -5vw; top: 9vh; }
.huge-hangul.right { right: -7vw; bottom: -4vh; color: rgba(54,92,255,.11); }

.jamo-field span { position: absolute; font-family: var(--display); color: rgba(244,239,216,.72); filter: blur(.2px); transition: transform 1.2s cubic-bezier(.15,.9,.1,1), opacity .7s; }
.jamo-field span:nth-child(1) { left: 22%; top: 24%; font-size: 24px; }
.jamo-field span:nth-child(2) { left: 43%; top: 19%; font-size: 18px; color: var(--jade-sample); }
.jamo-field span:nth-child(3) { left: 74%; top: 29%; font-size: 30px; }
.jamo-field span:nth-child(4) { left: 63%; top: 76%; font-size: 22px; color: var(--violet-afterimage); }
.jamo-field span:nth-child(5) { left: 15%; top: 68%; font-size: 20px; }
.jamo-field span:nth-child(6) { left: 86%; top: 58%; font-size: 16px; }
.jamo-field span:nth-child(7) { left: 38%; top: 47%; font-size: 28px; color: var(--persimmon-signal); }
.jamo-field span:nth-child(8) { left: 55%; top: 35%; font-family: var(--math); }
.jamo-field span:nth-child(9) { left: 27%; top: 82%; font-family: var(--math); }
.jamo-field span:nth-child(10) { left: 69%; top: 14%; font-family: var(--math); }
.jamo-field span:nth-child(11) { left: 49%; top: 66%; }
.jamo-field span:nth-child(12) { left: 8%; top: 38%; color: var(--probability-blue); }
.jamo-field.disturbed span { opacity: .34; transform: translate(var(--scatter-x), var(--scatter-y)) rotate(var(--scatter-r)) scale(1.4); }

.oracle-copy { position: absolute; z-index: 8; max-width: 520px; }
.eyebrow { font-family: var(--interface); text-transform: uppercase; letter-spacing: .28em; font-size: 12px; color: var(--jade-sample); margin: 0 0 14px; }
h1, h2 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -.04em; line-height: .92; }
h1 { font-size: clamp(48px, 8vw, 124px); }
h2 { font-size: clamp(42px, 6.8vw, 104px); }
.oracle-copy p:not(.eyebrow) { font-size: clamp(16px, 1.35vw, 22px); line-height: 1.75; color: rgba(244,239,216,.78); }
.opening-copy { left: 8vw; bottom: 8vh; }

.outcome-cluster { position: absolute; right: 13vw; top: 20vh; width: 340px; height: 360px; z-index: 10; transition: opacity .8s, transform 1s; }
.hidden-slips { opacity: 0; transform: translateY(32px) rotate(-8deg); }
.hidden-slips.revealed { opacity: 1; transform: translateY(0) rotate(0deg); }
.hanji-slip { position: absolute; width: 150px; height: 96px; padding: 18px 16px; background: linear-gradient(135deg, rgba(244,239,216,.96), rgba(244,239,216,.72)); color: var(--lacquer-night); clip-path: polygon(0 8%, 78% 0, 100% 27%, 92% 100%, 9% 92%); box-shadow: 0 24px 50px rgba(0,0,0,.34); animation: slipBreath 4.8s ease-in-out infinite; }
.hanji-slip::after { content: ""; position: absolute; right: 0; top: 0; border-top: 28px solid rgba(54,92,255,.18); border-left: 30px solid transparent; }
.hanji-slip b { display: block; font-family: var(--display); font-size: 30px; }
.hanji-slip span { font: 600 12px var(--interface); color: rgba(7,6,13,.65); }
.hanji-slip.high { left: 20px; top: 28px; transform: rotate(-11deg) scale(1.14); }
.hanji-slip.mid { left: 152px; top: 142px; transform: rotate(9deg); }
.hanji-slip.low { left: 50px; top: 244px; transform: rotate(-3deg) scale(.78); opacity: .74; }
@keyframes slipBreath { 50% { translate: 0 -10px; filter: brightness(1.05); } }

.scene-title { position: absolute; left: 9vw; top: 13vh; display: grid; gap: 8px; transform: rotate(-5deg); }
.scene-title span { font: 700 13px var(--interface); color: var(--probability-blue); text-transform: uppercase; letter-spacing: .28em; }
.scene-title strong { font: 700 clamp(30px, 5vw, 76px) var(--display); }
.groove-board { position: absolute; left: 8vw; top: 27vh; width: 66vw; height: 48vh; border-radius: 50%; transform: rotate(-13deg); background: radial-gradient(ellipse at center, rgba(32,36,55,.72), rgba(7,6,13,.05) 66%); border: 1px solid rgba(244,239,216,.12); }
.groove { position: absolute; inset: 17% 9%; border: 1px solid rgba(244,239,216,.2); border-left-color: transparent; border-radius: 50%; }
.groove-b { inset: 30% 18%; border-color: rgba(54,92,255,.38); border-top-color: transparent; }
.groove-c { inset: 43% 28%; border-color: rgba(88,214,169,.42); border-right-color: transparent; }
.sample-bead { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--jade-sample); box-shadow: 0 0 20px rgba(88,214,169,.8); animation: beadTravel 6s ease-in-out infinite; }
.b1 { left: 11%; top: 45%; animation-delay: 0s; }.b2 { left: 25%; top: 22%; animation-delay: -.9s; }.b3 { left: 44%; top: 61%; animation-delay: -1.7s; }.b4 { left: 66%; top: 28%; animation-delay: -2.4s; background: var(--probability-blue); }.b5 { left: 79%; top: 52%; animation-delay: -3.1s; background: var(--persimmon-signal); }
@keyframes beadTravel { 0%, 18% { transform: translate(0,0) scale(.9); } 42% { transform: translate(58px,-26px) scale(1.1); } 55% { transform: translate(62px,-24px) scale(1.1); } 100% { transform: translate(142px,18px) scale(.85); } }
.tray-copy { right: 9vw; bottom: 12vh; }

.fan-gate { position: absolute; left: 17vw; top: 18vh; width: 520px; height: 520px; transform-origin: 50% 100%; transform: rotate(-18deg); }
.paper-wedge { position: absolute; left: 45%; bottom: 6%; width: 150px; height: 430px; transform-origin: 50% 100%; background: rgba(244,239,216,.82); color: var(--lacquer-night); clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 1px solid rgba(7,6,13,.12); display: grid; place-items: end center; padding-bottom: 48px; font: 700 22px var(--display); transition: transform 1s; }
.branch-fan.active .w1 { transform: rotate(-48deg); }.branch-fan.active .w2 { transform: rotate(-24deg); }.branch-fan.active .w3 { transform: rotate(0deg); background: rgba(88,214,169,.78); }.branch-fan.active .w4 { transform: rotate(24deg); }.branch-fan.active .w5 { transform: rotate(48deg); background: rgba(255,107,53,.82); }
.fan-copy { right: 8vw; top: 24vh; }.math-ghost { font-family: var(--math); color: var(--probability-blue); }

.venn-moons { position: absolute; left: 11vw; top: 9vh; width: 70vw; height: 82vh; transform: rotate(8deg); }
.moon { position: absolute; width: 430px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 400 82px var(--math); mix-blend-mode: screen; border: 1px solid rgba(244,239,216,.2); }
.m1 { left: 11%; top: 9%; background: rgba(54,92,255,.25); color: var(--probability-blue); }.m2 { left: 33%; top: 23%; background: rgba(88,214,169,.22); color: var(--jade-sample); }.m3 { left: 51%; top: 4%; background: rgba(139,92,246,.24); color: var(--violet-afterimage); }
.paper-rain i { position: absolute; top: -12vh; width: 2px; height: 44px; background: linear-gradient(var(--hanji-moon), transparent); opacity: .5; animation: rain 4s linear infinite; }
.paper-rain i:nth-child(1){left:14%;animation-delay:-.3s}.paper-rain i:nth-child(2){left:25%;animation-delay:-2s}.paper-rain i:nth-child(3){left:39%;animation-delay:-1s}.paper-rain i:nth-child(4){left:51%;animation-delay:-3s}.paper-rain i:nth-child(5){left:67%;animation-delay:-.8s}.paper-rain i:nth-child(6){left:73%;animation-delay:-2.4s}.paper-rain i:nth-child(7){left:84%;animation-delay:-1.8s}.paper-rain i:nth-child(8){left:91%;animation-delay:-.5s}
@keyframes rain { to { transform: translateY(120vh) rotate(12deg); } }
.moon-copy { left: 9vw; bottom: 9vh; }

.collapse-board { position: absolute; inset: 10vh 8vw; border-radius: 44% 56% 50% 50%; border: 1px solid rgba(244,239,216,.13); background: radial-gradient(circle at 60% 45%, rgba(255,107,53,.12), transparent 24%), rgba(32,36,55,.18); transform: rotate(-5deg); }
.afterimage-path { position: absolute; height: 2px; width: 72%; left: 12%; top: 50%; background: linear-gradient(90deg, transparent, var(--violet-afterimage), transparent); opacity: .5; transform-origin: center; }
.path-one { transform: rotate(-22deg); }.path-two { transform: rotate(9deg); background: linear-gradient(90deg, transparent, var(--probability-blue), transparent); }.path-three { transform: rotate(35deg); }
.seal-collapse { position: absolute; left: 54%; top: 38%; width: 180px; height: 180px; border-radius: 50%; display: grid; place-items: center; background: var(--persimmon-signal); color: var(--hanji-moon); font: 700 42px var(--display); box-shadow: 0 0 0 0 rgba(255,107,53,.4); transform: scale(.35) rotate(18deg); opacity: 0; }
.collapse-seal.active .seal-collapse { animation: sealBloom 1.4s .65s cubic-bezier(.18,.8,.2,1) forwards; }
@keyframes sealBloom { 70% { opacity: 1; transform: scale(1.12) rotate(-7deg); box-shadow: 0 0 0 42px rgba(255,107,53,.08); } 100% { opacity: .95; transform: scale(1) rotate(-7deg); box-shadow: 0 0 0 18px rgba(255,107,53,.08); } }
.dice-shadow { position: absolute; left: 22%; top: 22%; width: 130px; height: 130px; transform: rotate(18deg); border-radius: 28px; background: rgba(244,239,216,.06); border: 1px dashed rgba(244,239,216,.2); display: grid; place-items: center; color: rgba(244,239,216,.35); font: 42px var(--math); }
.seal-copy { left: 10vw; bottom: 12vh; }

.ledger-ring { position: absolute; right: 9vw; top: 9vh; width: min(64vw, 760px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(244,239,216,.18); background: repeating-conic-gradient(from -20deg, rgba(244,239,216,.13) 0 1deg, transparent 1deg 14deg), radial-gradient(circle, transparent 51%, rgba(32,36,55,.34) 52% 67%, transparent 68%); animation: slowOrbit 24s linear infinite; }
.ledger-line { position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: rgba(244,239,216,.18); transform: rotate(var(--r)); }
.ledger-line span, .ledger-line b { position: absolute; top: -28px; font-family: var(--interface); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.ledger-line b { right: 0; color: var(--jade-sample); }.l1 { --r: -18deg; }.l2 { --r: 28deg; }.l3 { --r: 73deg; }
.final-slips { position: absolute; left: 12vw; top: 26vh; width: 340px; height: 330px; }.ledger-slip { left: 0; top: 0; transform: rotate(-10deg) scale(1.18); }.ledger-slip.violet { left: 160px; top: 148px; background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(244,239,216,.66)); transform: rotate(12deg); }
.ledger-copy { left: 9vw; bottom: 9vh; }

@media (max-width: 760px) {
  .probability-dial { right: 8px; gap: 9px; }
  .oracle-copy { left: 7vw !important; right: 12vw !important; bottom: 8vh !important; top: auto !important; }
  .outcome-cluster, .fan-gate, .venn-moons, .ledger-ring { transform: scale(.72) rotate(-10deg); transform-origin: center; }
  .groove-board { width: 88vw; left: -6vw; }
}