.story-player{--story-bar: 3rem;position:relative;display:grid;gap:0}.story-frame{position:relative;overflow:hidden;width:100%;aspect-ratio:16 / 9;border-radius:1.25rem 1.25rem 0 0;border:1px solid var(--line);border-bottom:0;background:#06070d;cursor:pointer;isolation:isolate;box-shadow:0 30px 80px -40px #4c3cdc73,0 1px #ffffff0a inset}.story-player[data-format="1x1"] .story-frame{aspect-ratio:1 / 1}@media (max-width: 639px){.story-player[data-state=loading] .story-frame{aspect-ratio:1 / 1}}.story-frame:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.story-stage-scale{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;pointer-events:none}.story-poster{display:flex;flex-direction:column;justify-content:center;gap:.75rem;padding:6% 7%;cursor:default;background:radial-gradient(60% 70% at 28% 30%,rgb(124 107 255 / .22),transparent 70%),radial-gradient(50% 60% at 80% 85%,rgb(34 211 238 / .08),transparent 70%),#06070d;color:#f4f5fa}.story-poster-kicker{font-family:Geist Mono,ui-monospace,monospace;font-size:clamp(.625rem,1.4vw,.8125rem);letter-spacing:.18em;text-transform:uppercase;color:#22d3ee}.story-poster-title{font-family:Geist,system-ui,sans-serif;font-weight:650;letter-spacing:-.025em;line-height:1.1;font-size:clamp(1.25rem,4vw,2.75rem);max-width:22ch;text-wrap:balance}.story-poster-note{font-size:.8125rem;color:#e2e5f4b3}.story-overlay-button{position:absolute;right:.75rem;top:.75rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.5rem 1.25rem;border-radius:9999px;border:1px solid rgb(124 107 255 / .7);background:#0c0e18d1;color:#f4f5fa;font-size:.9375rem;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 6px #7c6bff1f,0 12px 40px -12px #7c6bff99;transition:transform .16s ease,box-shadow .16s ease}.story-overlay-button:hover{transform:scale(1.04)}.story-overlay-button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.story-bar{display:flex;align-items:center;gap:.25rem;height:var(--story-bar);padding:0 .5rem;border:1px solid var(--line);border-top-color:#ffffff0f;border-radius:0 0 1.25rem 1.25rem;background:color-mix(in srgb,var(--bg-raised, #0c0e18) 85%,transparent)}.story-icon-button{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:9999px;color:var(--fg-muted);background:transparent;transition:background-color .14s ease,color .14s ease}.story-icon-button:hover:not(:disabled){background:var(--bg-hover);color:var(--fg)}.story-icon-button:focus-visible,.story-download:focus-visible,.story-export-button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.story-icon-button:disabled{opacity:.5}@media (pointer: coarse){.story-icon-button{width:2.75rem;height:2.75rem}}.story-scrub{flex:1;min-width:3rem;height:1.75rem;margin:0 .375rem;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}.story-scrub::-webkit-slider-runnable-track{height:4px;border-radius:9999px;background:linear-gradient(90deg,#7c6bff,#22d3ee) 0 0 / var(--progress, 0%) 100% no-repeat,rgb(var(--ink-rgb, 226 229 244) / .14)}.story-scrub::-moz-range-track{height:4px;border-radius:9999px;background:rgb(var(--ink-rgb, 226 229 244) / .14)}.story-scrub::-moz-range-progress{height:4px;border-radius:9999px;background:linear-gradient(90deg,#7c6bff,#22d3ee)}.story-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#f4f5fa;box-shadow:0 0 0 4px #7c6bff59}.story-scrub::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#f4f5fa;box-shadow:0 0 0 4px #7c6bff59}.story-scrub:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:6px}.story-time{flex:none;font-family:Geist Mono,ui-monospace,monospace;font-size:.75rem;color:var(--fg-subtle);font-variant-numeric:tabular-nums;padding:0 .375rem}.story-download{display:inline-flex;align-items:center;gap:.375rem;flex:none;min-height:2.25rem;padding:0 .75rem;border-radius:9999px;border:1px solid var(--line);font-size:.8125rem;font-weight:500;color:var(--fg-muted);background:transparent;transition:background-color .14s ease,color .14s ease,border-color .14s ease}.story-download:hover,.story-download[aria-expanded=true]{color:var(--fg);border-color:var(--accent-line, var(--line));background:var(--bg-hover)}@media (max-width: 420px){.story-time,.story-download span{display:none}}.story-export{margin-top:.75rem;display:grid;gap:.625rem;padding:1rem;border-radius:1rem;border:1px solid var(--line);background:color-mix(in srgb,var(--bg-raised, #0c0e18) 92%,transparent)}.story-export-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.story-export-title{font-size:.9375rem;font-weight:600;color:var(--fg)}.story-export-note{font-size:.8125rem;line-height:1.5;color:var(--fg-muted)}.story-export-actions{display:flex;flex-wrap:wrap;gap:.5rem}.story-export-button{display:inline-flex;align-items:center;gap:.375rem;min-height:2.25rem;padding:0 .875rem;border-radius:9999px;border:1px solid var(--line);font-size:.8125rem;color:var(--fg);background:transparent;transition:background-color .14s ease,border-color .14s ease}.story-export-button:hover:not(:disabled){background:var(--bg-hover);border-color:var(--accent-line, var(--line))}.story-export-button:disabled{opacity:.5;cursor:not-allowed}@media (pointer: coarse){.story-export-button{min-height:2.75rem}}.story-export-progress{display:flex;align-items:center;gap:.75rem}.story-progress-track{position:relative;flex:1;height:6px;overflow:hidden;border-radius:9999px;background:rgb(var(--ink-rgb, 226 229 244) / .12)}.story-progress-fill{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:0 50%;background:linear-gradient(90deg,#7c6bff,#22d3ee);transition:transform .12s linear}.story-export-percent{flex:none;font-family:Geist Mono,ui-monospace,monospace;font-size:.75rem;color:var(--fg-muted);font-variant-numeric:tabular-nums}.story-export-status{font-size:.8125rem;color:var(--fg-muted);min-height:1.2em}.story-export-status:empty{display:none}.story-export-status[data-tone=error]{color:var(--danger, #f472b6)}.story-missing{padding:1rem;color:var(--fg-muted)}@media (prefers-reduced-motion: reduce){.story-overlay-button,.story-progress-fill{transition:none}}
