/* story.css: the slide frame and the declarative animation, verbatim from docs/design/variations/ghosts-story.html
   (the designed slides depend on these page-global rules), kept unscoped and verbatim so every slide's own CSS wins exactly as on the board (same specificity). */
.gst,.gst *,.gst-cap,.gst-cap *{box-sizing:border-box}
.fr{position:relative;aspect-ratio:16/9;background:#fff;border:1px solid #c9ccd2;border-radius:8px;overflow:hidden;container-type:inline-size;color:#16181d}
.stage{position:absolute;inset:0}
.err{padding:20px;color:#c62828;font-size:12px}
.sp{position:absolute;inset:0;display:grid;grid-template-columns:38% 62%}
.sp .tx{padding:7cqw 3cqw 7cqw 5.5cqw;display:flex;flex-direction:column;justify-content:center;min-width:0}
.sp .vz{padding:3cqw 4cqw 3cqw 0;display:flex;align-items:center;justify-content:center;min-width:0}
.kick{font-size:2.1cqw;color:#8a909c;font-weight:700;line-height:1.25}
.num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:6.4cqw;letter-spacing:-.03em;line-height:1.05;margin:.8cqw 0}
.ln{font-size:2.3cqw;font-weight:700;line-height:1.3}
.oto{margin-top:2cqw;font-size:1.7cqw;font-weight:700;color:#0b64f4;border-left:.5cqw solid #0b64f4;padding-left:1.2cqw;line-height:1.3}
.oto.abs{position:absolute;left:5.5cqw;bottom:3.5cqw;right:20cqw;margin:0}
.win{color:#1f9d55}.loss{color:#d64545}.g{color:#8a909c}.mono{font-family:'JetBrains Mono',monospace}
[data-a]{transition:none}
.fr:not(.go) [data-a]{opacity:0}
.fr:not(.go) [data-a=grow-y],.fr:not(.go) [data-a=grow-x]{opacity:1}
.fr.go [data-a=fade]{animation:a-fade .6s both var(--d,0ms)}
.fr.go [data-a=up]{animation:a-up .6s cubic-bezier(.2,.8,.2,1) both var(--d,0ms)}
.fr.go [data-a=pop]{animation:a-pop .45s cubic-bezier(.3,1.6,.5,1) both var(--d,0ms);transform-box:fill-box;transform-origin:center}
.fr.go [data-a=grow-y]{animation:a-gy .8s cubic-bezier(.2,.8,.2,1) both var(--d,0ms);transform-box:fill-box;transform-origin:var(--o,bottom)}
.fr.go [data-a=grow-x]{animation:a-gx .8s cubic-bezier(.2,.8,.2,1) both var(--d,0ms);transform-box:fill-box;transform-origin:var(--o,left)}
.fr.go [data-a=draw]{stroke-dasharray:1;stroke-dashoffset:1;animation:a-draw var(--t,1.6s) ease-in-out both var(--d,0ms)}
.fr.go [data-a=blink]{animation:a-fade .3s both var(--d,0ms),a-blink 1.2s infinite calc(var(--d,0ms) + .3s)}
.fr:not(.go) [data-a=grow-y]{transform:scaleY(0);transform-box:fill-box;transform-origin:var(--o,bottom)}
.fr:not(.go) [data-a=grow-x]{transform:scaleX(0);transform-box:fill-box;transform-origin:var(--o,left)}
@keyframes a-fade{from{opacity:0}to{opacity:1}}
@keyframes a-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes a-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes a-gy{from{transform:scaleY(0)}to{transform:none}}
@keyframes a-gx{from{transform:scaleX(0)}to{transform:none}}
@keyframes a-draw{to{stroke-dashoffset:0}}
@keyframes a-blink{50%{opacity:.25}}
.gs-wipe{position:absolute;inset:0;z-index:20;pointer-events:none;background:var(--wc,#111)}
.fr.go .gs-wipe{animation:gs-wipe .75s cubic-bezier(.8,0,.2,1) both var(--wd,100ms)}
@keyframes gs-wipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}