:root{--bg: #14161c;--panel: #1c1f27;--line: #2b2f3a;--text: #e8eaf0;--muted: #9aa0ad;--accent: #5b7cfa;--ok: #3fc380;--warn: #f0a93b;--bad: #ef6464;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;color:var(--text)}*{box-sizing:border-box}html,body,#app{height:100%;margin:0;background:var(--bg)}#app{display:flex;flex-direction:column}#topbar,#timeline{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line)}#timeline{border-top:1px solid var(--line);border-bottom:none}.spacer{flex:1}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;min-width:70px;text-align:right}.btn{background:#262a35;border:1px solid var(--line);color:var(--text);padding:6px 12px;border-radius:6px;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn:disabled{opacity:.5;cursor:default}main{flex:1;display:grid;grid-template-columns:1fr 360px;min-height:0}#viewport{position:relative;min-height:0}#canvas{width:100%;height:100%;display:block}.drop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px;pointer-events:none}.drop.hidden{display:none}.drop.active{background:#5b7cfa26;color:var(--text)}.hud{position:absolute;left:12px;top:12px;background:#14161cbf;padding:6px 10px;border-radius:6px;font-family:ui-monospace,Menlo,monospace;font-size:12px;white-space:pre;pointer-events:none}#side{display:flex;flex-direction:column;gap:10px;padding:10px;border-left:1px solid var(--line);background:var(--panel);min-height:0;overflow:hidden}.card{background:#20242e;border:1px solid var(--line);border-radius:8px;padding:10px 12px}.card.grow{flex:1;min-height:0;display:flex;flex-direction:column}.card h3{margin:0 0 8px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}#manifest dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0}#manifest dt{color:var(--muted)}#manifest dd{margin:0}#events{list-style:none;margin:0;padding:0;overflow:auto;flex:1;font-family:ui-monospace,Menlo,monospace;font-size:12px}#events li{padding:3px 6px;border-radius:4px;display:grid;grid-template-columns:56px 1fr;gap:8px;color:var(--muted)}#events li.past{color:var(--text)}#events li.current{background:#5b7cfa40}#events li .t{text-align:right}#events li.safety{color:var(--bad)}#events li.human{color:var(--warn)}.frames{display:flex;gap:6px;overflow-x:auto}.frames img{height:72px;border-radius:4px;border:1px solid var(--line);opacity:.5}.frames img.visible{opacity:1;border-color:var(--accent)}#scrub{flex:1}.chk{color:var(--muted);display:flex;gap:6px;align-items:center}select{background:#262a35;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:5px}.frame-large{width:100%;border-radius:6px;border:1px solid var(--line);display:block;margin-bottom:6px}.frame-large[hidden]{display:none}.small{font-size:12px;margin:0 0 6px}