:root{--bg: #07080a;--bg-2: #0d1014;--graphite: #1a1d23;--line: #2a2e36;--ink: #e8e6dc;--ink-dim: #9a9890;--gold: #d4a64a;--gold-dim: #8b6f2c;--red: #ff3b5c;--blue: #5fb8ff;--serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;--sans: "Inter Tight", "Inter", system-ui, sans-serif;--mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}body{overflow-x:hidden}.app-root{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.stage{position:relative;width:100%;height:100%;background:radial-gradient(ellipse at 50% 30%,#11151b,#07080a 55%,#050608);overflow:hidden}.stage:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,black 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,black 30%,transparent 75%);pointer-events:none}.stage-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:stretch;height:100%;padding:56px 72px 96px}@media (max-width: 900px){.stage-grid{grid-template-columns:1fr;padding:24px 24px 88px;grid-template-rows:auto auto;gap:28px}.stage-story{min-height:60vh}.story-stack{height:auto;min-height:60vh}}.stage-rail{display:flex;flex-direction:column;justify-content:space-between;height:78vh;padding:18px 4px}.rail-title{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:18px}.rail-list{display:flex;flex-direction:column;gap:14px}.rail-item{display:grid;grid-template-columns:14px 36px 1fr;align-items:center;gap:10px;color:var(--ink-dim);font-size:13px;transition:color .3s,transform .3s}.rail-dot{width:8px;height:8px;border-radius:50%;background:var(--line);border:1px solid var(--line);transition:all .3s}.rail-num{font-family:var(--mono);font-size:11px;letter-spacing:.1em}.rail-item.active{color:var(--ink);transform:translate(4px)}.rail-item.active .rail-dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px #d4a64ab3}.rail-item.passed{color:var(--ink-dim);opacity:.45}.rail-item.passed .rail-dot{background:var(--gold-dim);border-color:var(--gold-dim)}.rail-meta{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:8px}.meta-line{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-dim)}.meta-label{font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase}.meta-val{color:var(--ink)}.meta-val.mono{font-family:var(--mono);color:var(--gold)}.scroll-hint{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--ink-dim)}.scroll-hint-line{display:block;width:1px;height:36px;background:var(--gold);transform-origin:top;animation:scrollHintPulse 1.6s ease-in-out infinite}@keyframes scrollHintPulse{0%,to{transform:scaleY(.2)}50%{transform:scaleY(1)}}.stage-board{position:relative;display:flex;align-items:center;justify-content:center;perspective:1400px}.stage-board{justify-self:center;align-self:center}.board-wrap{position:relative;width:min(78vh,680px);aspect-ratio:1;border-radius:4px;background:linear-gradient(135deg,#1a1d23,#0d1014);box-shadow:0 0 0 1px #d4a64a2e,0 60px 120px -40px #000000e6,0 20px 40px -15px #000c;padding:14px;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .5s}.board-hidden{opacity:0;transform:scale(.88) translateY(32px);pointer-events:none}.board-visible{opacity:1;transform:none;pointer-events:auto}.intensity-sacrifice{box-shadow:0 0 0 1px #ff3b5c80,0 0 80px -10px #ff3b5c66,0 60px 120px -40px #000000e6}.intensity-climax{box-shadow:0 0 0 1px #d4a64ab3,0 0 100px -10px #d4a64a80,0 60px 120px -40px #000000e6}.intensity-attack{box-shadow:0 0 0 1px #5fb8ff59,0 0 60px -20px #5fb8ff80,0 60px 120px -40px #000000e6}.board-vignette{position:absolute;top:14px;right:14px;bottom:14px;left:14px;border-radius:2px;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(0,0,0,.45) 100%);z-index:4}.board-grid{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:2px;overflow:hidden}.sq{position:relative;display:flex;align-items:center;justify-content:center}.sq-light{background:#d8c7a3}.sq-dark{background:#6b5536}.sq-light{background:linear-gradient(135deg,#b9a98a,#9d8d6e)}.sq-dark{background:linear-gradient(135deg,#4a3d29,#2e2516)}.sq-from:after,.sq-to:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;box-shadow:inset 0 0 0 2px #d4a64af2;animation:pulseFrom 1.4s ease-out}.sq-to:after{box-shadow:inset 0 0 0 2px #d4a64a,inset 0 0 22px #d4a64a73}.intensity-sacrifice .sq-to:after{box-shadow:inset 0 0 0 2px #ff3b5c,inset 0 0 28px #ff3b5c8c}.intensity-climax .sq-to:after{box-shadow:inset 0 0 0 2px #d4a64a,inset 0 0 32px #d4a64aa6}.intensity-attack .sq-to:after{box-shadow:inset 0 0 0 2px #5fb8fff2,inset 0 0 24px #5fb8ff80}@keyframes pulseFrom{0%{opacity:0}30%{opacity:1}to{opacity:.85}}.coord{position:absolute;font-family:var(--mono);font-size:9px;color:#ffffff59;letter-spacing:.05em;pointer-events:none}.coord-file{bottom:2px;right:4px}.coord-rank{top:2px;left:4px}.piece{font-size:clamp(28px,5.4vh,56px);line-height:1;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));position:relative;z-index:2}.piece-w{color:#f4ecd6;text-shadow:0 0 10px rgba(212,166,74,.55),0 0 22px rgba(212,166,74,.25)}.piece-b{color:#1a1216;text-shadow:0 0 8px rgba(95,184,255,.45),0 0 16px rgba(95,184,255,.2)}.piece-enter{animation:pieceEnter .45s cubic-bezier(.2,.8,.2,1)}@keyframes pieceEnter{0%{transform:scale(1.4);opacity:0}to{transform:scale(1);opacity:1}}.move-arrow{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}.ripple{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:60%;height:60%;border-radius:50%;pointer-events:none;z-index:1}.ripple-red{background:radial-gradient(circle,rgba(255,59,92,.55),transparent 70%)}.ripple-gold{background:radial-gradient(circle,rgba(212,166,74,.6),transparent 70%)}.ripple-anim{animation:rippleOnce 1.1s ease-out forwards}.ripple-loop{animation:rippleLoop 1.4s ease-out infinite}.ripple-loop-delay{animation-delay:.7s}@keyframes rippleOnce{0%{transform:scale(.4);opacity:.9}to{transform:scale(2.6);opacity:0}}@keyframes rippleLoop{0%{transform:scale(.4);opacity:.95}to{transform:scale(3);opacity:0}}.flash-anim{animation:flashIn .6s cubic-bezier(.2,.8,.2,1) both}@keyframes flashIn{0%{opacity:0;transform:scale(.6) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0)}}.arrow-line{stroke-dasharray:200;stroke-dashoffset:200;animation:drawArrow .7s ease-out forwards}@keyframes drawArrow{to{stroke-dashoffset:0}}.cinema-flash{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-style:italic;font-size:clamp(48px,9vh,110px);color:var(--gold);letter-spacing:.04em;text-shadow:0 0 24px rgba(212,166,74,.8),0 0 60px rgba(0,0,0,.9);-webkit-text-stroke:1px rgba(0,0,0,.6);pointer-events:none;z-index:5;mix-blend-mode:screen}.intensity-sacrifice .cinema-flash{color:var(--red);text-shadow:0 0 28px rgba(255,59,92,.9),0 0 60px rgba(0,0,0,.9)}.board-caption{position:absolute;bottom:-40px;left:14px;right:14px;display:flex;align-items:baseline;gap:12px;font-size:12px;color:var(--ink-dim)}.cap-num{font-family:var(--mono);color:var(--gold)}.cap-tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:3px 8px;border-radius:2px;background:var(--graphite);color:var(--ink-dim)}.tag-sacrifice{color:var(--red);background:#ff3b5c1f}.tag-attack{color:var(--blue);background:#5fb8ff1f}.tag-climax{color:var(--gold);background:#d4a64a2e}.tag-beat{color:var(--gold);background:#d4a64a1a}.cap-san{color:var(--ink);font-size:14px}.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}.section-shell{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}.section-shell.is-active{opacity:1;transform:translateY(0);pointer-events:auto}.section-shell.is-active .rv{opacity:1;transform:translateY(0)}.section-shell .rv:nth-child(1){transition-delay:.05s}.section-shell .rv:nth-child(2){transition-delay:.2s}.section-shell .rv:nth-child(3){transition-delay:.35s}.section-shell .rv:nth-child(4){transition-delay:.5s}.section-shell .rv:nth-child(5){transition-delay:.65s}.section-shell .rv:nth-child(6){transition-delay:.8s}.section-shell .rv:nth-child(7){transition-delay:.95s}.section-shell .rv:nth-child(8){transition-delay:1.1s}.stage-story{position:relative;min-height:72vh;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:8px}.story-stack{position:relative;width:100%;min-height:72vh;height:100%;max-height:760px}.section-shell{position:absolute;left:0;right:0;bottom:0;top:0;display:grid;grid-template-rows:minmax(140px,28%) 1fr;gap:28px;justify-content:stretch;align-content:stretch}.text-block{display:flex;flex-direction:column;gap:18px;justify-content:flex-end}.media-row{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;min-height:140px}.media-row image-slot{display:block;width:100%;height:100%;background:#ffffff06;border:1px dashed rgba(212,166,74,.35);border-radius:6px;--is-empty-bg: rgba(255,255,255,.02);--is-empty-color: var(--ink-dim);transition:border-color .25s,background .25s,transform .25s}.media-row image-slot:hover{border-color:var(--gold);background:#d4a64a0d;transform:translateY(-2px)}.eyebrow{display:flex;align-items:center;gap:14px}.eyebrow-num{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.15em}.eyebrow-bar{width:36px;height:1px;background:var(--gold)}.eyebrow-label{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}.headline{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-.01em;margin:0;color:var(--ink);text-wrap:balance}.headline.accent-gold,.headline.accent-red{color:var(--ink)}.headline.accent-red:before{content:"— ";color:var(--red)}.headline.accent-blue:before{content:"— ";color:var(--blue)}.body{font-size:16px;line-height:1.55;color:var(--ink-dim);max-width:52ch;margin:0;text-wrap:pretty}.chip-row{display:flex;flex-wrap:wrap;gap:8px}.chip{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:2px;border:1px solid var(--line);color:var(--ink-dim);background:#ffffff05}.btn{cursor:pointer;transition:transform .18s ease,color .18s,background .18s,border-color .18s,box-shadow .18s}.chip.btn:hover{color:var(--gold);border-color:var(--gold);background:#d4a64a14;transform:translateY(-2px);box-shadow:0 6px 18px -8px #d4a64a99}.metric.btn{width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.04);padding:12px 6px;color:inherit}.metric.btn:hover{background:#d4a64a0a;border-bottom-color:#d4a64a66;transform:translate(2px)}.metric.btn:hover .metric-arrow{transform:translate(4px)}.metric-arrow{transition:transform .2s}.cta.btn:hover{transform:translateY(-2px)}.dialogue{position:relative;padding:14px 18px 14px 22px;background:#d4a64a0f;border-left:2px solid var(--gold);font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,26px);color:var(--ink);max-width:48ch}.dialogue-2{background:#ffffff08;border-left-color:var(--ink)}.dialogue-mark{position:absolute;left:-2px;top:-10px;font-size:32px;color:var(--gold);font-style:normal}.metrics{display:grid;grid-template-columns:1fr;gap:6px;border-top:1px solid var(--line);padding-top:14px;max-width:560px}.metric{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}.metric-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}.metric-value{display:flex;align-items:baseline;gap:10px;font-family:var(--serif);font-size:22px;color:var(--ink)}.metric-from{color:var(--ink-dim);text-decoration:line-through;opacity:.5;font-size:16px}.metric-arrow{color:var(--gold);font-size:16px}.metric-to{color:var(--gold);font-weight:600;font-size:24px}.metric-bad .metric-to{color:var(--red)}.metrics-dramatic .metric-to{font-size:30px}.section-shell.cinematic .headline{font-size:clamp(40px,5.5vw,72px)}.section-shell.chaos{animation:chaosShake 6s ease-in-out infinite}@keyframes chaosShake{0%,to{transform:translate(0)}20%{transform:translate(2px,-1px)}50%{transform:translate(-2px,2px)}80%{transform:translate(1px,1px)}}.section-shell.climax{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9;pointer-events:none;background:radial-gradient(ellipse at center,#07080a99,#07080af2 70%);display:flex;align-items:center;justify-content:center}.climax-stack{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;max-width:920px;padding:0 24px;pointer-events:auto}.climax-line{font-family:var(--serif);font-size:clamp(22px,2.6vw,36px);font-weight:400;color:var(--ink);margin:0;line-height:1.2}.climax-line.dim{color:var(--ink-dim);font-style:italic}.climax-line.gold{color:var(--gold);font-style:italic;font-size:clamp(26px,3vw,42px)}.checkmate-word{font-family:var(--serif);font-weight:700;font-size:clamp(72px,11vw,168px);color:var(--gold);margin:24px 0 8px;text-shadow:0 0 60px rgba(212,166,74,.5)}.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:12px}.cta{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:12px 22px;border-radius:2px;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:all .2s}.cta:hover{border-color:var(--gold);color:var(--gold)}.cta.primary{background:var(--gold);color:var(--bg);border-color:var(--gold)}.cta.primary:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}.intro-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#0d1014,#050608 70%,#000);transition:opacity .5s ease}.intro-overlay.is-gone{opacity:0;pointer-events:none}.intro-frame{text-align:center;max-width:840px;padding:0 24px}.intro-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:28px;opacity:0;transform:translateY(12px);animation:introIn .9s .4s forwards cubic-bezier(.2,.8,.2,1)}.intro-headline{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(42px,6vw,88px);line-height:1.05;letter-spacing:-.01em;color:var(--ink);margin:0;opacity:0;transform:translateY(18px);animation:introIn 1.1s .7s forwards cubic-bezier(.2,.8,.2,1)}.intro-sub{margin-top:32px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);opacity:0;animation:introInOpacity 1s 1.5s forwards ease}@keyframes introIn{to{opacity:1;transform:translateY(0)}}@keyframes introInOpacity{to{opacity:.78}}.playback-hud{position:fixed;left:50%;bottom:22px;transform:translate(-50%) translateY(0);z-index:30;display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:#0d1014d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(212,166,74,.3);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:opacity .4s,transform .4s,border-color .25s,background .25s;-webkit-user-select:none;user-select:none}.playback-hud:hover{border-color:var(--gold);background:#0d1014f2}.playback-hud.is-hidden{opacity:0;transform:translate(-50%) translateY(20px);pointer-events:none}.hud-icon{display:inline-flex;gap:3px;width:14px;height:14px;align-items:center;justify-content:center}.hud-icon>span{width:3px;height:12px;background:var(--gold);border-radius:1px}.hud-icon.is-paused .hud-play{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--gold);background:transparent}.hud-text{color:var(--ink);opacity:.85}.particles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.particle{position:absolute;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:particleFloat 8s ease-in-out infinite;opacity:.05}@keyframes particleFloat{0%,to{opacity:.05;transform:translateY(-4px)}50%{opacity:.45;transform:translateY(4px)}}