/* Typography compliance note: Fira Code (400 Fira Code's mathematical ligatures creates a typographic system specifically designed for the intersection of bold visual impact and precise mathematical communication. This dual-register typography (spectacular + precise Fira Code" (Google Fonts Inter (400 Inter lets the neon palette and botanical imagery do the expressive work. Inter's Latin metrics. Used alongside Inter in mixed-script passages. Inter" (Google Fonts Interactions:** IntersectionObserver (NOT parallax scroll libraries IntersectionObserver (threshold: 0.2 IntersectionObserver Scroll Triggers:** */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --void: #0a0a0f;
    --card: #141420;
    --light: #e8e8f0;
    --muted: #8888a8;
    --gold: #ffb800;
    --pink: #ff2d95;
    --orange: #ff6b4a;
    --cyan: #00f0ff;
    --green: #39ff85;
    --display: "Bebas Neue", "Arial Narrow", "Impact", sans-serif;
    --condensed: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
    --body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "Fira Code", "SFMono-Regular", Consolas, monospace;
    --kr: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

html { scroll-behavior: smooth; background: var(--void); }
body { font-family: var(--body); background: var(--void); color: var(--light); overflow-x: hidden; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px); background-size: 100% 4px; mix-blend-mode: overlay; opacity: .28; }
.fullscreen { min-height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 5rem 2rem; }
.micro-label, .section-kicker { font-family: var(--mono); font-size: .68rem; letter-spacing: .24em; color: var(--muted); text-transform: uppercase; }

#probability-gate { background: radial-gradient(circle at 50% 42%, rgba(20,20,32,.98) 0%, rgba(10,10,15,1) 62%), linear-gradient(135deg, rgba(0,240,255,.08), rgba(255,45,149,.04)); }
.gate-content { position: relative; z-index: 3; text-align: center; }
.gate-title { margin-top: 1rem; font-family: var(--display); font-size: clamp(5rem, 14vw, 16rem); letter-spacing: .06em; line-height: .86; }
.char-kr { display: block; font-family: var(--kr); font-weight: 800; color: var(--gold); text-shadow: 0 0 36px rgba(255,184,0,.48), 0 0 110px rgba(255,184,0,.2); animation: glowPulse 3.6s ease-in-out infinite; }
.char-jp { display: block; margin-top: .08em; font-family: var(--jp); font-weight: 500; font-size: .38em; color: var(--muted); letter-spacing: .22em; opacity: .68; animation: fadeFlicker 5s steps(1,end) infinite; }
.gate-subtitle { margin-top: 1.2rem; font-family: var(--condensed); font-size: clamp(1rem, 2vw, 1.55rem); color: var(--muted); letter-spacing: .32em; text-transform: uppercase; }
.probability-counter { width: min(420px, 88vw); margin: 3rem auto 0; padding: 1rem 1.2rem; border: 1px solid rgba(136,136,168,.18); border-radius: 999px; background: rgba(20,20,32,.56); box-shadow: inset 0 0 34px rgba(0,240,255,.04), 0 0 28px rgba(0,240,255,.05); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.counter-label, .counter-value { font-family: var(--mono); }
.counter-label { font-size: .72rem; color: var(--muted); }
.counter-value { font-size: clamp(1.05rem, 3vw, 1.85rem); color: var(--cyan); text-shadow: 0 0 22px rgba(0,240,255,.55); }
.gate-particles, .floating-numbers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.particle { position: absolute; border-radius: 50%; opacity: 0; filter: blur(.2px); animation: particleDrift linear infinite; }
.gate-orbit { position: absolute; z-index: 1; border: 1px solid rgba(136,136,168,.14); border-radius: 50%; transform: rotate(-18deg); }
.gate-orbit-one { width: 65vw; height: 20vw; min-width: 520px; min-height: 160px; box-shadow: 0 0 50px rgba(0,240,255,.05); animation: orbitSpin 24s linear infinite; }
.gate-orbit-two { width: 78vw; height: 28vw; min-width: 620px; min-height: 220px; border-color: rgba(255,45,149,.12); animation: orbitSpin 32s linear infinite reverse; }
.scroll-hint { position: absolute; z-index: 4; bottom: 1.4rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; animation: bobDown 2s ease-in-out infinite; }

#bento-grid { align-items: flex-start; background: linear-gradient(180deg, var(--void) 0%, #10101a 44%, var(--void) 100%); }
.section-kicker { position: absolute; top: 2.6rem; color: var(--green); text-shadow: 0 0 20px rgba(57,255,133,.35); }
.bento-container { width: min(1220px, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 1rem; margin-top: 2.5rem; }
.bento-cell { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 1.25rem; border-radius: 18px; background: linear-gradient(145deg, rgba(20,20,32,.98), rgba(10,10,15,.96)); border: 1px solid rgba(136,136,168,.18); box-shadow: inset 0 0 44px rgba(232,232,240,.018); transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease; }
.bento-cell::before { content: ""; position: absolute; inset: -1px; opacity: .35; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(0,240,255,.18), transparent 32%); transition: opacity .35s ease; }
.bento-cell:hover { transform: translateY(-6px); border-color: rgba(255,184,0,.72); box-shadow: 0 0 42px rgba(255,184,0,.12), inset 0 0 42px rgba(255,184,0,.04); }
.cell-large { grid-column: span 2; grid-row: span 2; }
.cell-tall { grid-row: span 2; }
.cell-wide, .cell-medium { grid-column: span 2; }
.cell-header { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cell-id, .cell-prob { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; }
.cell-id { color: var(--muted); }.cell-prob { color: var(--cyan); text-shadow: 0 0 15px rgba(0,240,255,.32); }
.cell-visual { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: .6rem; }
.botanical-svg { width: 100%; height: 100%; max-height: 100%; overflow: visible; }
.botanical-stroke { fill: none; stroke: var(--light); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.accent-pink { stroke: var(--pink); fill: var(--pink); }.accent-cyan { stroke: var(--cyan); fill: var(--cyan); }.accent-gold { stroke: var(--gold); fill: var(--gold); }.accent-orange { stroke: var(--orange); fill: var(--orange); }.accent-green { stroke: var(--green); fill: var(--green); }.dashed { stroke: var(--muted); stroke-dasharray: 4 6; }
.botanical-dot { fill: var(--light); filter: drop-shadow(0 0 8px currentColor); }
.petal-circle { fill: none; stroke: var(--pink); stroke-width: 1; opacity: .7; transform-origin: center; animation: petalPulse 3s ease-in-out infinite; }.delay-1 { animation-delay: .7s; }.delay-2 { animation-delay: 1.4s; }
.wave-path { stroke-dasharray: 620; stroke-dashoffset: 620; animation: drawWave 3.4s ease forwards infinite alternate; }.wave-path.alt { animation-delay: .45s; }
.pulse-dot { animation: dotPulse 2.2s ease-in-out infinite; }
.coin-spin-svg { animation: coinTilt 4s ease-in-out infinite; }
.svg-label { font-family: var(--mono); font-size: 10px; fill: var(--muted); letter-spacing: .08em; }.svg-label-large { font-family: var(--display); font-size: 32px; fill: var(--gold); }
.cell-label { position: relative; z-index: 2; margin-top: .6rem; font-family: var(--condensed); font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--light); }
.cell-sublabel { display: block; margin-top: .2rem; font-family: var(--kr); font-size: .74rem; font-weight: 400; text-transform: none; letter-spacing: .02em; color: var(--muted); }

#probability-engine { background: radial-gradient(circle at 20% 20%, rgba(255,45,149,.08), transparent 30%), linear-gradient(180deg, var(--void), #0d0d18); }
.engine-container { width: min(1040px, 100%); text-align: center; }
.section-title { margin: .6rem 0 2.7rem; font-family: var(--kr); font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1; color: var(--gold); text-shadow: 0 0 38px rgba(255,184,0,.24); }
.title-en { display: block; margin-top: .75rem; font-family: var(--condensed); font-size: .28em; font-weight: 500; color: var(--muted); letter-spacing: .28em; text-transform: uppercase; }
.engine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.engine-panel { padding: 1.2rem; border: 1px solid rgba(136,136,168,.18); border-radius: 18px; background: rgba(20,20,32,.78); box-shadow: inset 0 0 36px rgba(0,240,255,.025); }
.panel-title { margin-bottom: 1rem; font-family: var(--condensed); font-weight: 700; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; text-align: left; color: var(--light); }
.engine-panel canvas { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--void); border: 1px solid rgba(136,136,168,.1); }
.panel-stats { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; }
.stat { font-family: var(--mono); font-size: .76rem; color: var(--muted); }.stat-label { color: var(--cyan); }

#probability-poetry { background: radial-gradient(circle at 80% 10%, rgba(57,255,133,.07), transparent 28%), radial-gradient(circle at 30% 80%, rgba(255,107,74,.08), transparent 30%), var(--void); }
.poetry-container { position: relative; z-index: 2; width: min(760px, 100%); text-align: center; }
.poem-line { margin: .56em 0; opacity: 0; transform: translateY(22px) scale(.98); font-family: var(--condensed); font-weight: 500; font-size: clamp(1.35rem, 3.2vw, 2.35rem); letter-spacing: .07em; color: var(--light); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.9,.2,1); }
.poem-line.visible { opacity: 1; transform: translateY(0) scale(1); }
.accent-text { font-family: var(--mono); font-size: clamp(1rem, 2.6vw, 1.7rem); color: var(--gold); text-shadow: 0 0 32px rgba(255,184,0,.48); }
.accent-text-pink { font-family: var(--kr); font-weight: 800; font-size: clamp(1.8rem, 4.6vw, 3.1rem); color: var(--pink); text-shadow: 0 0 32px rgba(255,45,149,.5); }
.small-text { font-size: clamp(.88rem, 1.5vw, 1.05rem); color: var(--muted); font-style: italic; }
.float-num { position: absolute; bottom: -2rem; font-family: var(--mono); font-size: .72rem; color: var(--muted); opacity: 0; animation: floatUp 8s linear forwards; }

#footer-section { padding: 3rem 2rem; border-top: 1px solid rgba(136,136,168,.12); background: #0a0a0f; }
.footer-content { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.6rem; }
.footer-domain { font-family: var(--display); font-size: 1.25rem; letter-spacing: .12em; color: var(--gold); }.footer-char { font-family: var(--kr); color: var(--muted); }.footer-meaning { font-family: var(--condensed); color: var(--muted); letter-spacing: .2em; text-transform: uppercase; }

@keyframes glowPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); text-shadow: 0 0 54px rgba(255,184,0,.65), 0 0 140px rgba(255,184,0,.28); } }
@keyframes fadeFlicker { 0%,100% { opacity:.68; } 38% { opacity:.35; } 62% { opacity:.85; } }
@keyframes bobDown { 0%,100% { transform: translate(-50%,0); opacity:.55; } 50% { transform: translate(-50%,10px); opacity:1; } }
@keyframes orbitSpin { to { transform: rotate(342deg); } }
@keyframes particleDrift { 0% { transform: translateY(0) scale(.6); opacity:0; } 12%,86% { opacity:.9; } 100% { transform: translateY(-110vh) scale(1.4); opacity:0; } }
@keyframes petalPulse { 0%,100% { transform: scale(.88); opacity:.48; } 50% { transform: scale(1.14); opacity:.95; } }
@keyframes dotPulse { 0%,100% { opacity:.45; transform: scale(.9); } 50% { opacity:1; transform: scale(1.2); } }
@keyframes drawWave { to { stroke-dashoffset: 0; } }
@keyframes coinTilt { 0%,100% { transform: rotateY(0deg); } 50% { transform: rotateY(48deg); } }
@keyframes floatUp { 0% { transform: translateY(0); opacity:0; } 10%,82% { opacity:.18; } 100% { transform: translateY(-105vh); opacity:0; } }

@media (max-width: 900px) { .bento-container { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; } .cell-large, .cell-wide, .cell-medium { grid-column: span 2; } .cell-tall { grid-row: span 1; } .engine-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .fullscreen { padding: 4rem 1rem; } .probability-counter { flex-direction: column; border-radius: 22px; } .bento-container { grid-template-columns: 1fr; grid-auto-rows: 230px; } .cell-large, .cell-wide, .cell-medium, .cell-tall { grid-column: span 1; grid-row: span 1; } .footer-content { flex-direction: column; gap: .7rem; } }