:root{color-scheme:dark;background:#0b0e12;font-family:Arial,sans-serif}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#0b0e12}
body{background:radial-gradient(ellipse at 48% 44%,#1a2028 0%,#10151b 42%,#0b0e12 78%)}
#stage{position:absolute;inset:0;outline:none;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
#stage[data-dragging]{cursor:grabbing}
#particles{display:block;width:100%;height:100%}
.selectors{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:26px;display:flex;gap:1px;opacity:.42;transition:opacity .25s cubic-bezier(.16,1,.3,1);z-index:2}
.selectors:hover,.selectors:focus-within{opacity:1}
.selectors button{width:24px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:end center}
.selectors button::after{content:"";width:1px;height:10px;background:#6e7c83;transition:height .36s cubic-bezier(.16,1,.3,1),background .25s,opacity .25s;opacity:.72}
.selectors button:hover::after{height:15px;background:#b5c2c7}
.selectors button[aria-current="true"]::after{height:25px;background:#acdcf3;opacity:1}
.playback{position:fixed;top:max(22px,env(safe-area-inset-top));right:22px;width:44px;height:44px;display:grid;place-items:center;border:1px solid transparent;border-radius:0;background:transparent;color:#82949b;opacity:.48;cursor:pointer;transition:opacity .25s,border-color .25s,color .25s;z-index:2}
.playback:hover,.playback:focus-visible{opacity:1;border-color:#435159;color:#d7e0e3}
.playback span{width:9px;height:12px;border-left:1px solid currentColor;border-right:1px solid currentColor}
.playback[aria-pressed="false"] span{width:0;height:0;border:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
button:focus-visible{outline:1px solid #aebdc2;outline-offset:3px}
#stage:focus-visible{box-shadow:inset 0 0 0 1px #7889913d}
.fallback{position:absolute;top:50%;left:50%;width:min(86vw,72dvh,680px);aspect-ratio:1;transform:translate(-50%,-50%);background:url('./fallback.webp?v=mobile-motion-4') center/contain no-repeat;mask-image:radial-gradient(ellipse,#000 40%,transparent 72%)}
.fallback[hidden]{display:none}
body[data-film] .selectors,body[data-film] .playback{display:none}
@media(any-pointer:coarse){.selectors button{width:44px;min-height:44px}}
@media(max-width:560px){.selectors{left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,44px);column-gap:7px;row-gap:0}.selectors button{width:44px;min-height:44px;place-items:center}.playback{top:max(12px,env(safe-area-inset-top));right:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}