*{box-sizing:border-box}body{margin:0;background:#10130f;color:#eee9d8;font-family:Arial,sans-serif;overflow:hidden}#stage,canvas{width:100%;height:100dvh;display:block}header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:24px 4%;background:linear-gradient(#10130fe6,transparent);font:11px monospace;letter-spacing:1.4px}a{color:inherit;text-decoration:none}button{background:#141c19d9;color:#e8e5d7;border:1px solid #65705d;border-radius:2px;padding:12px 16px;font:11px monospace;cursor:pointer;min-height:42px}button:hover{background:#c4d787;color:#10130f}button:disabled{opacity:.4;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #c4d787;outline-offset:4px}.intro{position:absolute;top:15%;left:4%;pointer-events:none;text-shadow:0 2px 30px #000}h1{font-size:clamp(34px,5vw,76px);line-height:.92;letter-spacing:-3px;margin:0;font-weight:900}.intro p{font:12px monospace;color:#c4d787;margin-top:22px}footer{position:absolute;bottom:0;left:0;right:0;padding:45px 4% 24px;background:linear-gradient(transparent,#10130ff5);display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px}.transport,.views{display:flex;align-items:center;gap:10px}.timeline{font:10px monospace;display:flex;align-items:center;gap:10px}input{accent-color:#c4d787;width:160px}output,.views span{font:10px monospace;color:#c8cbbb}.views span{margin-right:10px}#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#10130f;z-index:3;font:15px monospace}#loading[hidden]{display:none}#loading small{color:#9ca890;font-size:11px}.pulse{height:8px;width:8px;background:#c4d787;border-radius:50%}@media(max-width:720px){header{padding:16px 5%;font-size:9px}header>span{display:none}.intro{top:13%;left:5%}h1{font-size:34px;letter-spacing:-1px}.intro p{font-size:10px;margin-top:12px}footer{padding:40px 5% 16px;gap:10px}.transport{flex-wrap:wrap;gap:8px}.timeline{order:3;width:100%}.timeline input{flex:1}.views{width:100%;justify-content:space-between}.views span{display:none}button{padding:10px;font-size:10px}.views button{flex:1}}
canvas{touch-action:none}canvas:focus{outline:none}.movement{position:absolute;left:4%;bottom:220px;font:10px monospace}.movement p{letter-spacing:1px;text-shadow:0 1px 5px #000}.movement p span{color:#c4d787;margin-left:8px}.dpad{display:grid;grid-template-columns:44px 44px 44px;gap:5px;margin-bottom:10px;width:max-content}.dpad button{padding:0;width:44px;height:44px;font-size:20px;touch-action:none;user-select:none}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.dpad button.held,.shots button[aria-pressed=true]{background:#c4d787;color:#10130f;border-color:#c4d787}.movement #home{font-size:9px;padding:8px;min-height:32px}footer{display:block;padding-top:32px}.camera-controls{max-width:1000px;margin:0 auto 14px}.camera-heading{display:flex;justify-content:space-between;font:10px monospace;letter-spacing:1px;margin-bottom:9px;color:#c4d787}.camera-heading>span:last-child{color:#bfc5b1}.shots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.shots button{padding:9px 5px;display:flex;align-items:center;justify-content:center;gap:8px}.shots b{font-size:15px}.shots span{font-size:9px;white-space:nowrap}.transport{justify-content:center}.orbit-hint{font:10px monospace;color:#bfc5b1;margin-left:10px}.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}.exploring .intro{opacity:0;transition:opacity .4s;pointer-events:none}@media(max-width:1000px){.shots span{display:none}.shots button{min-height:44px}.orbit-hint{display:none}.movement{bottom:205px}}@media(max-width:720px){.camera-heading{font-size:8px;letter-spacing:.4px}.movement{left:5%;bottom:245px}.movement p{font-size:8px}.intro h1{font-size:30px}.camera-controls{margin-bottom:12px}.shots{gap:4px}.transport{justify-content:space-between}.transport button{min-height:40px}.timeline{margin-top:0}.timeline input{width:100px}.movement #home{display:block}.dpad{grid-template-columns:40px 40px 40px;gap:4px}.dpad button{width:40px;height:40px;min-height:40px}}@media(max-height:580px){.intro{display:none}.movement{bottom:160px}.movement p,.movement #home{display:none}footer{padding-top:15px;padding-bottom:12px}.camera-controls{margin-bottom:8px}.dpad{margin-bottom:0}.shots button{min-height:36px;padding:5px}}@media(prefers-reduced-motion:reduce){.exploring .intro{transition:none}}

.screen-controls{position:absolute;right:4%;top:88px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;max-width:410px;justify-content:flex-end;font:10px monospace}.screen-controls>span{color:#a4ddbf;letter-spacing:1px;text-shadow:0 1px 8px #000}.screen-controls button,.video-file{font:10px monospace;padding:9px 11px;min-height:36px}.screen-controls button[hidden]{display:none}.video-file{position:relative;display:inline-flex;align-items:center;cursor:pointer;border:1px solid #65705d;background:#141c19d9;color:#e8e5d7;border-radius:2px}.video-file:hover{background:#c4d787;color:#10130f}.video-file:focus-within{outline:2px solid #c4d787;outline-offset:3px}.video-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.screen-controls p{width:100%;max-width:330px;margin:0;line-height:1.5;color:#e3e9d7;text-align:right;text-shadow:0 1px 5px #000}.screen-controls p:empty{display:none}@media(max-width:720px){.screen-controls{right:5%;top:72px;max-width:210px}.screen-controls>span{width:100%;text-align:right;font-size:9px}.screen-controls button,.video-file{font-size:9px;padding:7px 8px}.screen-controls p{font-size:9px}.intro{top:19%}}@media(max-height:580px){.screen-controls{top:65px}.screen-controls p{max-width:320px}}