:root{--bg: #0b0d10;--panel: rgba(18, 21, 26, .88);--border: rgba(255, 255, 255, .12);--fg: #e8ecf1;--muted: #9aa5b1;--accent: #4da3ff;--danger: #ff6b6b;color-scheme:dark}*{box-sizing:border-box}#status[hidden],#error[hidden],#stats[hidden]{display:none}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font:13px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#viewport,#viewport canvas{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none}#status{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--panel);border:1px solid var(--border);border-radius:10px;backdrop-filter:blur(8px);z-index:20}.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}#error{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:min(560px,90vw);padding:20px 24px;background:var(--panel);border:1px solid var(--danger);border-radius:12px;z-index:30}#error h2{margin:0 0 8px;font-size:15px;color:var(--danger)}#error p{margin:0;color:var(--muted)}#stats{position:fixed;top:10px;left:10px;margin:0;padding:8px 10px;background:var(--panel);border:1px solid var(--border);border-radius:8px;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--muted);white-space:pre-wrap;z-index:15}#hud{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:12px clamp(10px,3vw,28px) calc(12px + env(safe-area-inset-bottom));pointer-events:none}.timeline{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--panel);border:1px solid var(--border);border-radius:12px;backdrop-filter:blur(10px);pointer-events:auto;flex-wrap:wrap}.tl-btn{flex:none;height:30px;min-width:30px;padding:0 10px;display:grid;place-items:center;background:#ffffff12;border:1px solid var(--border);border-radius:7px;color:var(--fg);font:inherit;cursor:pointer}.tl-btn:hover{background:#ffffff21}.tl-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tl-btn.is-active{background:var(--accent);border-color:var(--accent);color:#06121f}.tl-play:before{content:"";width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}.tl-play.is-playing:before{width:9px;height:11px;border:none;margin-left:0;background:linear-gradient(to right,currentColor 0 3px,transparent 3px 6px,currentColor 6px 9px)}.tl-slider{flex:1 1 220px;min-width:140px;accent-color:var(--accent);cursor:pointer}.tl-readout{flex:none;display:flex;gap:10px;font:12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}.tl-frame{color:var(--fg)}.tl-time{color:var(--muted)}.tl-toggle,.tl-field{flex:none;display:flex;align-items:center;gap:5px;color:var(--muted);white-space:nowrap;cursor:pointer}.tl-toggle input{accent-color:var(--accent);cursor:pointer}.tl-field input,.tl-field select{height:26px;padding:0 6px;background:#ffffff12;border:1px solid var(--border);border-radius:6px;color:var(--fg);font:inherit}.tl-field input{width:62px}.tl-field select{cursor:pointer}.tl-seq select{max-width:220px;font-weight:500}.tl-group{flex:none;display:flex;align-items:center;gap:6px;padding-left:10px;border-left:1px solid var(--border)}.tl-swatch{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--border);border-radius:7px;background:#ffffff12;cursor:pointer;overflow:hidden}.tl-swatch input[type=color]{width:150%;height:150%;padding:0;border:none;background:none;cursor:pointer}.tl-save{margin-left:auto;border-color:#4da3ff80}.tl-save:hover{background:#4da3ff33}.tl-audio{flex:none;display:flex;align-items:center;gap:8px}.tl-volume{width:80px;accent-color:var(--accent);cursor:pointer}.tl-audio[hidden]{display:none}.timeline.is-loading-frame .tl-slider{opacity:.55}.tl-frame:after{content:" …";color:transparent}.timeline.is-loading-frame .tl-frame:after{color:var(--accent)}.timeline.is-loading-frame .tl-play{box-shadow:0 0 0 1px var(--accent) inset}@media(max-width:620px){.tl-field,.tl-toggle span{display:none}.tl-seq,.tl-mode{display:flex}.tl-seq select{max-width:42vw}.tl-seq{order:-1}}