:root { color-scheme: dark; background: #08090b; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
main { position: relative; width: 100%; height: 100svh; min-height: 200px; }
#logo { display: block; width: 100%; height: 100%; opacity: 0; touch-action: none; cursor: grab; transition: opacity .7s ease; }
#logo.ready { opacity: 1; }
#logo:active { cursor: grabbing; }
#fallback { position: absolute; width: min(68vw, 720px); height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#fallback[hidden] { display: none; }
#motion { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); right: max(24px, env(safe-area-inset-right)); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #ffffff16; border-radius: 50%; background: #ffffff04; color: #a3a6ac; cursor: pointer; opacity: .45; transition: opacity .2s, background .2s; }
#motion[hidden] { display: none; }
#motion:hover, #motion:focus-visible { opacity: 1; background: #ffffff0c; }
#motion:focus-visible { outline: 2px solid #d5d8de; outline-offset: 4px; }
#motion svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { #logo, #motion { transition: none; } }