:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark;color:#ecf0f5;background:#141d29;font-synthesis:none}*{box-sizing:border-box}html,body{height:100%;margin:0}body{display:grid;grid-template-rows:42px 50px minmax(180px,1fr) 70px 34px;overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 16px;font-size:13px;font-weight:600;border-bottom:1px solid #344256}.dimensions{font-size:11px;font-weight:400;color:#b6c1d0}.views{display:flex;align-items:center;justify-content:center;gap:5px;padding:4px 10px;background:#111923}button{font:inherit;border:1px solid #45566b;border-radius:5px;background:#1b2838;color:#d4deea;cursor:pointer;min-height:40px;padding:8px 12px;font-size:12px;touch-action:manipulation}.views button.active{color:#fff;background:#344d6a;border-color:#94acc5}button:hover{background:#34465b}button:focus-visible,input:focus-visible{outline:3px solid #ffa575;outline-offset:2px}main{position:relative;min-height:0;background:radial-gradient(ellipse at center,#2b3c50,#18212e 80%)}#viewport{position:absolute;inset:0}canvas{display:block;touch-action:none}.hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:10px;color:#c2ccd8;pointer-events:none;text-shadow:0 1px 3px #101720}#loading{position:absolute;inset:40% 10% auto;text-align:center;padding:14px;border:1px solid #46596e;border-radius:5px;background:#101720;font-size:13px}footer{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid #344256;background:#111923}.play{background:#f88449;color:#101720;border-color:#f88449;min-width:42px}.play:hover{background:#ffa06e}.transport{flex:1;min-width:0}.time-row{display:flex;justify-content:space-between;gap:10px;font-size:11px;font-variant-numeric:tabular-nums;color:#c6d2df}#status{font-size:10px;color:#ffb48b}input[type=range]{width:100%;height:20px;margin:5px 0 0;accent-color:#f88449;cursor:pointer}#reset{font-size:21px;line-height:1;min-width:42px}.readout{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 16px;color:#aebed0;font-size:10px;background:#111923}.readout output{color:#ffd0b7;font-variant-numeric:tabular-nums}@media(max-width:440px){header{padding:0 10px}.dimensions{font-size:9px}.views{gap:4px}.views button{padding:8px 10px}footer{padding:10px;gap:9px}.readout{padding:0 10px}}