:root{--bg:#141618;--panel:#23282d;--rail:#0e1012;--well:#1a1d20;--clip:#2a2e33;--clip-label:#383d43;--border:#111214;--text:#c9ccd1;--dim:#9aa0a6;--accent:#4d9fff;--playhead:#e8eaed}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);flex-direction:column;font-family:Segoe UI,system-ui,sans-serif;font-size:12px;display:flex}#topbar{background:var(--panel);border-bottom:1px solid var(--border);flex:none;align-items:center;gap:10px;height:36px;padding:0 12px;display:flex}#topbar .title{color:var(--dim);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:11px;overflow:hidden}button{appearance:none;color:var(--text);font:inherit;cursor:pointer;background:#2e343b;border:0;border-radius:4px;padding:4px 10px}button:hover{background:#3a414a}#main{background:#0a0b0c;flex:1;min-height:0;display:flex}#browser{background:var(--panel);border-right:1px solid var(--border);flex:none;width:230px;padding-bottom:20px;overflow-y:auto}.pane-title{height:24px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;align-items:center;padding:0 10px;font-size:10px;display:flex}#assets{flex-direction:column;display:flex}.row{cursor:grab;border-bottom:1px solid #1b2024;align-items:center;gap:8px;padding:6px 8px;display:flex}.row:hover{background:#2a2f35}.row .thumb{border:1px solid var(--border);width:52px;height:30px;color:var(--dim);background:#101214;border-radius:3px;flex:none;justify-content:center;align-items:center;display:flex;overflow:hidden}.row .thumb canvas{object-fit:cover;width:100%;height:100%}.row .meta{flex:1;min-width:0}.row .name{text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.row .sub{color:var(--dim);font-size:10px}#viewer{flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}#vcanvas{background:#000;max-width:100%;max-height:100%}#timelinePanel{background:var(--rail);border-top:1px solid var(--border);flex:none;height:210px}#tcanvas{width:100%;height:100%;display:block}#statusbar{background:var(--panel);border-top:1px solid var(--border);height:24px;color:var(--dim);flex:none;align-items:center;gap:12px;padding:0 12px;font-size:11px;display:flex}#statusbar .grow{flex:1}#mobilebar{display:none}@media (width<=820px),(pointer:coarse){#mobilebar{background:var(--panel);border-top:1px solid var(--border);flex:none;gap:8px;height:52px;padding:4px 8px;display:flex}#mobilebar button{border-radius:8px;flex:1;height:44px;font-size:18px}#browser{z-index:30;width:min(280px,80vw);transition:transform .18s;position:fixed;top:36px;bottom:0;left:0;transform:translate(-102%);box-shadow:4px 0 18px #00000080}#browser.open{transform:translate(0)}.pane-title{height:34px;font-size:12px}#timelinePanel{flex:none;height:200px}#viewer{min-height:46vh}#vcanvas{touch-action:pan-y}#tcanvas{touch-action:none}#topbar{height:44px}#topbar button{min-width:44px;height:36px}button{min-height:36px}#statusbar .grow{display:none}html,body{height:100dvh}}