/* Typography compliance tokens from DESIGN.md, implemented with local/standard fallbacks and no external fetching: Roboto Slab (300 Roboto Slab" (Google Fonts IBM Plex Mono (300 IBM Plex Mono" (Google Fonts IntersectionObserver` with threshold values `0 `threshold: [0 [0] \[0 Korean Hangul creates a striking visual tension — slab-serifs are fundamentally Western letterforms */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--void:#1a0a0f;--burgundy:#6b1d2a;--crimson:#a83242;--parchment:#e8d5c4;--spectral:#f0e6e0;--ember:#d4627a;--shadow:#0d0508}
html,body{width:100%;height:100%;overflow:hidden;background:var(--void);color:var(--parchment);font-family:"Noto Sans KR","Inter","Roboto",system-ui,sans-serif;line-height:1.7}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 20% 50%,rgba(168,50,66,.18),transparent 36%),radial-gradient(circle at 85% 35%,rgba(107,29,42,.28),transparent 40%),linear-gradient(90deg,var(--shadow),var(--void) 18%,var(--void) 82%,var(--shadow));}
#progress-bar{position:fixed;top:0;left:0;width:0;height:2px;z-index:10000;background:linear-gradient(90deg,#6b1d2a,#a83242,#f0e6e0);box-shadow:0 0 18px #d4627a;transition:width .08s linear}
#noise-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;pointer-events:none;mix-blend-mode:overlay;opacity:.35;image-rendering:pixelated}
#particle-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:9998;pointer-events:none}
.filters-svg{position:absolute;width:0;height:0;overflow:hidden}
#scroll-container{position:relative;z-index:1;display:flex;flex-wrap:nowrap;width:100vw;height:100vh;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#scroll-container::-webkit-scrollbar{display:none}
.panel{position:relative;flex-shrink:0;height:100vh;overflow:hidden;scroll-snap-align:start;background:linear-gradient(90deg,rgba(13,5,8,.85),rgba(26,10,15,.96) 10%,rgba(26,10,15,.96) 90%,rgba(13,5,8,.85))}
.panel-origin,.panel-dice,.panel-convergence{width:100vw}.panel-branching{width:200vw}.panel-distribution{width:150vw}
.panel-content{position:relative;display:flex;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;padding:clamp(2rem,5vw,5rem)}
.edge-density{position:absolute;top:0;bottom:0;width:22vw;pointer-events:none;background:radial-gradient(circle,rgba(212,98,122,.22) 1px,transparent 1.7px);background-size:18px 18px;opacity:.32;filter:blur(.2px)}.edge-density.left{left:0}.edge-density.right{right:0}
.reveal-child,.panel-title,.distribution-chart,.yut-throw{opacity:0;transform:translateX(60px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.visible,.panel.visible .reveal-child,.panel.visible .panel-title,.panel.visible .distribution-chart,.panel.visible .yut-throw{opacity:1;transform:translateX(0)}
.panel-title{font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:clamp(2rem,5vw,4.5rem);letter-spacing:.02em;color:var(--spectral);text-shadow:0 0 36px rgba(212,98,122,.18);margin-bottom:clamp(1.5rem,4vw,3rem)}
.panel-title span{font-weight:300;font-size:.45em;color:var(--parchment);opacity:.62;margin-left:.55em}
.origin-hangul{position:relative;display:flex;gap:.04em;font-family:"Roboto Slab",Georgia,serif;font-size:clamp(6rem,15vw,18rem);font-weight:700;line-height:.9;letter-spacing:.06em;color:var(--spectral);animation:breathe 6s ease-in-out infinite;text-shadow:0 0 24px rgba(240,230,224,.15),0 0 72px rgba(107,29,42,.5)}
.dissolved-glyph{position:relative;color:rgba(240,230,224,.84);filter:url(#hanja-dissolve)}
.dissolved-glyph::before{content:"";position:absolute;inset:-12%;background:radial-gradient(circle,rgba(212,98,122,.7) 1px,transparent 2px);background-size:13px 13px;clip-path:polygon(0 0,42% 0,30% 100%,0 100%);opacity:.45;mix-blend-mode:screen;animation:particle-fray 5s ease-in-out infinite}
.origin-hanja,.convergence-hanja{font-family:"Noto Serif JP","Times New Roman",serif;font-size:clamp(1.4rem,4vw,3rem);letter-spacing:.18em;color:var(--parchment);opacity:.72;filter:url(#hanja-dissolve)}
.origin-caption{font-family:"IBM Plex Mono","Courier New",monospace;font-size:clamp(.72rem,1.4vw,1rem);letter-spacing:.1em;color:var(--ember);opacity:.74;margin-top:1.8rem}.filament-svg{width:min(280px,48vw);height:auto;margin-top:.5rem}.filament-path{fill:none;stroke:#d4627a;stroke-width:1;stroke-dasharray:240;stroke-dashoffset:240;filter:drop-shadow(0 0 6px #d4627a);animation:draw 3.2s ease forwards}.filament-path:nth-child(2){animation-delay:.35s}.filament-path:nth-child(3){animation-delay:.7s}
.scroll-hint{position:absolute;bottom:7vh;left:50%;width:112px;height:1px;transform:translateX(-50%);background:rgba(232,213,196,.28)}.scroll-hint span{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 14px var(--ember);animation:hint 2.4s cubic-bezier(.65,0,.35,1) infinite}
.branching-content{align-items:flex-start;padding-left:7vw}.branch-tree-svg{width:88%;max-height:78vh;overflow:visible}.branch-line{fill:none;stroke:#d4627a;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:560;stroke-dashoffset:560;filter:url(#branch-glow);transition:stroke-dashoffset 1.45s cubic-bezier(.22,1,.36,1)}.branch-line.fine{stroke-width:1.15;opacity:.82}.branch-line.drawn{stroke-dashoffset:0}.branch-node{fill:#6b1d2a;stroke:#d4627a;stroke-width:2;transform-box:fill-box;transform-origin:center;transition:fill .8s,transform 1.2s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 5px #d4627a)}.branch-node.active{fill:#a83242;transform:scale(1.25)}.branch-node.terminal.active{transform:scale(1.55);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.branch-label{font-family:"Noto Sans KR",system-ui,sans-serif;font-size:18px;fill:#e8d5c4;opacity:0;transition:opacity .8s .35s}.branch-label.small{font-size:14px;fill:#d4627a}.branch-prob{font-family:"IBM Plex Mono","Courier New",monospace;font-size:14px;letter-spacing:.08em;fill:#f0e6e0;opacity:0;transition:opacity .8s .8s}.branch-label.visible,.branch-prob.visible{opacity:.86}
.distribution-chart{width:min(72vw,1200px);position:relative}.panel-distribution .panel-content{align-items:center}#dist-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 18px rgba(212,98,122,.18))}.axis-line{stroke:#e8d5c4;stroke-width:1;stroke-opacity:.22}#dist-curve{fill:none;stroke:#d4627a;stroke-width:2.5;stroke-linecap:round}#dist-curve-fill{fill:url(#curve-fill-grad)}.dist-labels{display:flex;justify-content:space-between;margin-top:1rem;padding:0 3%;font-size:.75rem;line-height:1.3;text-align:center;color:#e8d5c4}.dist-labels em{font-family:"IBM Plex Mono","Courier New",monospace;font-style:normal;color:#d4627a;letter-spacing:.08em}
.dice-content{isolation:isolate}.yut-board-bg{position:absolute;width:min(58vw,560px);height:min(58vw,560px);border:1px solid #6b1d2a;border-radius:50%;opacity:.12;transform:rotate(45deg)}.yut-board-bg::before,.yut-board-bg::after{content:"";position:absolute;inset:10%;border:1px solid #6b1d2a}.yut-board-bg::after{border-radius:50%;inset:25%}.yut-grid{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,3vw,3rem);max-width:1180px}.yut-throw{display:flex;flex-direction:column;align-items:center;gap:.75rem;transition-delay:var(--delay,0ms)}.yut-sticks{display:flex;gap:8px;min-height:86px;align-items:center}.yut-sticks i{display:block;width:17px;height:68px;border-radius:40%;transition:transform 1.2s cubic-bezier(.22,1,.36,1),background .6s}.yut-sticks .flat{background:#e8d5c4;box-shadow:inset -4px 0 8px rgba(107,29,42,.35)}.yut-sticks .round{background:#6b1d2a;border:1px solid #d4627a;box-shadow:0 0 12px rgba(212,98,122,.25)}.yut-throw.visible .yut-sticks i:nth-child(1){transform:rotate(-10deg) translateY(2px)}.yut-throw.visible .yut-sticks i:nth-child(2){transform:rotate(7deg) translateY(-5px)}.yut-throw.visible .yut-sticks i:nth-child(3){transform:rotate(-4deg) translateY(4px)}.yut-throw.visible .yut-sticks i:nth-child(4){transform:rotate(12deg) translateY(-2px)}.yut-throw h2{font-family:"Roboto Slab",Georgia,serif;font-size:1.45rem;color:#f0e6e0}.yut-throw h2 span{font-weight:300;font-size:.62em;color:#e8d5c4;opacity:.62}.yut-throw p{font-family:"IBM Plex Mono","Courier New",monospace;font-weight:300;letter-spacing:.08em;color:#d4627a}.yut-throw p b{color:#f0e6e0;font-weight:300;margin-right:.6em}
.convergence-content{background:radial-gradient(circle at center,rgba(168,50,66,.12),transparent 32%)}.collapse-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(212,98,122,.5);border-radius:50%;transform:translate(-50%,-50%);animation:collapse 7s ease-in-out infinite}.ring-a{width:78vmin;height:78vmin}.ring-b{width:52vmin;height:52vmin;animation-delay:.8s}.ring-c{width:28vmin;height:28vmin;animation-delay:1.6s}.convergence-filaments{position:absolute;width:70vmin;height:70vmin;background:conic-gradient(from 15deg,transparent,#6b1d2a,transparent,#d4627a,transparent,#a83242,transparent);clip-path:circle(50%);opacity:.2;filter:blur(7px);animation:spin 20s linear infinite}.convergence-word{position:relative;z-index:2;font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:clamp(6rem,15vw,18rem);letter-spacing:.06em;line-height:.9;color:#f0e6e0;opacity:0;transform:scale(.985);transition:opacity 1.7s ease,transform 1.7s ease}.convergence-word.visible{opacity:1;transform:scale(1)}.convergence-hanja{position:relative;z-index:2;margin-top:1.2rem;opacity:0;transition:opacity 1.4s 1s}.panel.visible .convergence-hanja{opacity:.55}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.005)}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes hint{0%{left:0;opacity:0}20%,80%{opacity:1}100%{left:105px;opacity:0}}@keyframes particle-fray{0%,100%{transform:translateX(-2px);opacity:.3}50%{transform:translateX(-12px);opacity:.58}}@keyframes collapse{0%{transform:translate(-50%,-50%) scale(1.2);opacity:0}45%{opacity:.45}100%{transform:translate(-50%,-50%) scale(.05);opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.filament-path,.branch-line{stroke-dashoffset:0!important}}
@media (max-width:768px){.panel-branching{width:300vw}.panel-distribution{width:200vw}.branch-tree-svg{width:170vw}.distribution-chart{width:145vw}.yut-grid{gap:1.4rem}.yut-sticks i{width:12px;height:50px}.panel-content{padding:2rem}}