@font-face{font-family:Inter;src:url('./assets/inter-latin.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;--film-accent:#d2edc3;--ink:#f2f3e9;font-family:Inter,Arial,sans-serif;background:#101914;color:var(--ink)}
*{box-sizing:border-box}html{scrollbar-width:none;overscroll-behavior-y:none}html::-webkit-scrollbar{display:none}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button,a{touch-action:manipulation}a{color:inherit}button{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #efffd8;outline-offset:5px}button{cursor:pointer}button:disabled{cursor:default;opacity:.22}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#film-stage{position:fixed;inset:0;z-index:0;overflow:hidden}#film-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1s;touch-action:pan-y pinch-zoom;cursor:grab;user-select:none}#film-canvas.is-dragging{cursor:grabbing}#film-canvas:focus-visible{outline:1px solid #d2edc370;outline-offset:-5px}body[data-ready=true] #film-canvas{opacity:1}.film-vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,transparent 43%,#0003 100%);z-index:1}#film-scroll{position:relative;pointer-events:none}#film-scroll section{height:120svh}#film-scroll section:last-child{height:100svh}
.film-tools{position:fixed;z-index:5;top:max(24px,env(safe-area-inset-top));left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.tool-group{display:flex;gap:7px}.icon-button{width:44px;height:44px;display:inline-grid;place-items:center;flex:none;border:1px solid #ffffff1c;border-radius:50%;background:#0b12102b;backdrop-filter:blur(12px);text-decoration:none;padding:11px;transition:background .2s,border-color .2s,opacity .2s;pointer-events:auto}.icon-button:hover{background:#eefcdf1a;border-color:#ffffff54}.icon-button svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.home-button{padding:9px}.home-button svg{fill:currentColor;stroke:none}.home-button .eye{fill:#19201b}.play-icon{display:none}#film-motion[aria-pressed=true] .pause-icon{display:none}#film-motion[aria-pressed=true] .play-icon{display:block}
#film-rail{position:fixed;z-index:4;right:25px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:0}#film-rail button{width:44px;height:44px;border:0;background:none;display:flex;align-items:center;justify-content:center;gap:3px;padding:10px}#film-rail i{width:2px;height:5px;display:block;background:#ffffff38;border-radius:2px;transition:height .3s,background .3s}#film-rail i.passed{background:#ffffff75}#film-rail i.active{height:17px;background:var(--film-accent);box-shadow:0 0 12px color-mix(in srgb,var(--film-accent),transparent 40%)}
.film-bottom{position:fixed;z-index:5;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:12px}.film-bottom .icon-button{background:#0b121033}.film-progress{position:fixed;bottom:0;left:0;right:0;height:2px;background:#ffffff0d;z-index:5}.film-progress i{display:block;height:100%;background:var(--film-accent);transform-origin:left;transform:scaleX(0)}
.film-loading{position:fixed;inset:0;display:grid;place-items:center;z-index:3;pointer-events:none}.film-loading span{width:45px;height:45px;border:1px solid #ffffff20;border-top-color:#e7f5da;border-radius:50%;animation:loading 1.1s linear infinite}body[data-ready=true] .film-loading,body[data-error=true] .film-loading{display:none}@keyframes loading{to{transform:rotate(360deg)}}
dialog{color:#edf2e8;background:#161e1bf2;border:1px solid #ffffff20;border-radius:24px;padding:36px;max-width:520px;width:calc(100% - 40px);max-height:calc(100svh - 60px);box-shadow:0 30px 140px #0008;backdrop-filter:blur(28px);overflow:auto}dialog::backdrop{background:#050b077a;backdrop-filter:blur(10px)}dialog .close-dialog{position:absolute;right:14px;top:14px}#film-credits{padding-top:66px}dialog h2{font-size:36px;letter-spacing:-1.4px;line-height:1.07;font-weight:500;margin:0 0 24px}dialog p{font-size:14px;line-height:1.65;color:#bac6bb}dialog a{text-underline-offset:3px}#figure-picker{padding:70px 25px 25px;max-width:500px}#figure-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.figure-swatch{aspect-ratio:1;border:1px solid #ffffff18;border-radius:14px;padding:10px;background:linear-gradient(145deg,var(--swatch-top),var(--swatch-bottom));display:grid;place-items:center}.figure-swatch svg{width:100%;height:100%;fill:var(--swatch-color);filter:drop-shadow(0 3px 3px #0008)}.figure-swatch[aria-current=true]{outline:2px solid #fff;outline-offset:3px}.figure-swatch:hover{border-color:#fff9}
#film-error,.no-script{position:fixed;z-index:10;inset:0;place-content:center;padding:32px;background:#101914}#film-error:not([hidden]),.no-script{display:grid}#film-error h2{font-size:30px}#film-error p{max-width:450px;line-height:1.6}#film-error a{margin:10px 0}
@media(max-width:600px){.film-tools{top:max(16px,env(safe-area-inset-top));left:16px;right:16px}.tool-group{gap:4px}#film-rail{right:8px}#film-rail button{width:36px;gap:2px;padding:8px}.film-bottom{bottom:max(18px,env(safe-area-inset-bottom))}#figure-swatches{grid-template-columns:repeat(4,1fr);gap:12px}#figure-picker{padding:67px 23px 23px}.figure-swatch{border-radius:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
html:has(dialog[open]){overflow:hidden}
@media(max-width:600px){#figure-picker{width:calc(100% - 24px);padding:66px 16px 20px}#figure-swatches{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.figure-swatch{padding:8px}}