:root{color-scheme:dark;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{width:100%;min-height:100%;margin:0;background:#000}
body{min-height:100svh;overflow-x:hidden}
main{display:grid;place-items:center;min-height:100svh;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
.composition{position:relative;flex:none;width:min(52vw,1100px,calc(74svh * 1.5));aspect-ratio:3/2;margin:0;isolation:isolate}
#canvas,#poster{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#canvas{opacity:0}
#canvas.is-ready{opacity:1}
#poster[hidden]{display:none}
.motion-toggle{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:44px;height:44px;display:grid;place-items:center;padding:12px;border:0;background:none;color:#777;cursor:pointer;transition:color .2s ease}
.motion-toggle[hidden]{display:none}
.motion-toggle{opacity:0;pointer-events:none}
.motion-toggle:focus-visible{color:#fff;opacity:1;pointer-events:auto}
.motion-toggle:focus-visible{outline:1px solid currentColor;outline-offset:2px}
.motion-toggle svg{width:20px;height:20px;grid-area:1/1}
.play-icon{display:none}
.motion-toggle[aria-label="Play animation"] .pause-icon{display:none}
.motion-toggle[aria-label="Play animation"] .play-icon{display:block}
.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}
.no-script{position:fixed;inset:0;margin:auto;width:min(52vw,1100px,calc(74svh * 1.5));height:auto}
@media(max-width:760px),(pointer:coarse){
  main{padding:max(clamp(18px,5vmin,28px),env(safe-area-inset-top)) max(clamp(18px,5vmin,28px),env(safe-area-inset-right)) max(clamp(18px,5vmin,28px),env(safe-area-inset-bottom)) max(clamp(18px,5vmin,28px),env(safe-area-inset-left))}
  .composition{width:min(100%,calc((100svh - max(clamp(18px,5vmin,28px),env(safe-area-inset-top)) - max(clamp(18px,5vmin,28px),env(safe-area-inset-bottom))) * 1.5))}
  .no-script{width:min(calc(100vw - max(clamp(18px,5vmin,28px),env(safe-area-inset-left)) - max(clamp(18px,5vmin,28px),env(safe-area-inset-right))),calc((100svh - max(clamp(18px,5vmin,28px),env(safe-area-inset-top)) - max(clamp(18px,5vmin,28px),env(safe-area-inset-bottom))) * 1.5))}
  .motion-toggle{right:max(clamp(18px,5vmin,28px),env(safe-area-inset-right));bottom:max(clamp(18px,5vmin,28px),env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.motion-toggle{transition:none}}