:root{--ink-0:#111014;--ink-1:#18171c;--ink-2:#201f26;--ink-3:#2a2932;--ink-4:#353440;--text-1:#f0eff4;--text-2:#a3a1ad;--text-3:#6b6975;--amber:#f2b13d;--amber-hot:#ffc95e;--amber-soft:#f2b13d24;--amber-glow:#f2b13d73;--stage:#0b0a0e;--paper:#f6f3ec;--danger:#e5484d;--font-ui:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--radius:8px;--edge:inset 0 1px 0 #ffffff09}*{box-sizing:border-box}html,body,#root{overscroll-behavior:none;height:100%;margin:0}body{background:var(--ink-0);color:var(--text-1);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;font-size:14px}button{font:inherit;color:var(--text-1);background:var(--ink-3);border:1px solid var(--ink-4);border-radius:var(--radius);cursor:pointer;box-shadow:var(--edge);padding:6px 10px}button:hover:not(:disabled){background:var(--ink-4)}button:disabled{color:var(--text-3);cursor:default}button.toggled{background:var(--amber-soft);border-color:var(--amber);color:var(--amber-hot)}.mono{font-family:var(--font-mono);font-size:12px}.app{grid-template-rows:46px minmax(0,1fr) 248px;height:100%;display:grid}.main{grid-template-columns:184px minmax(0,1fr);min-height:0;display:grid}.stage{min-width:0;min-height:0;position:relative}.stage .viewport{position:absolute;inset:0}.topbar{background:var(--ink-1);border-bottom:1px solid var(--ink-3);align-items:center;gap:16px;padding:0 14px;display:flex}.brand{letter-spacing:.01em;white-space:nowrap;align-items:center;gap:8px;font-weight:650;display:flex}.brand-mark{color:var(--amber);font-size:15px}.topbar-menu{align-items:center;gap:6px;display:flex}.topbar-hint{color:var(--text-3);text-align:center;white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:12.5px;overflow:hidden}.topbar-actions{gap:6px;display:flex}.viewport{background:var(--stage);min-width:0;position:relative}.viewport canvas{outline:none;display:block}.scene-panel{background:var(--ink-1);border-right:1px solid var(--ink-3);flex-direction:column;min-height:0;display:flex}.scene-head{letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);flex:none;padding:12px 12px 8px;font-size:11px;font-weight:600}.scene-rows{flex:1;min-height:0;padding:0 6px;overflow-y:auto}.scene-rows .empty{color:var(--text-3);margin:4px 6px;font-size:12.5px}.scene-row{border-radius:var(--radius);cursor:pointer;align-items:center;gap:7px;padding:6px 6px 6px 8px;display:flex}.scene-row:hover{background:var(--ink-2)}.scene-row.is-selected{background:var(--amber-soft);box-shadow:inset 2px 0 0 var(--amber)}.scene-row .dot{border:1px solid #00000059;border-radius:3px;flex:none;width:9px;height:9px}.scene-row .name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:12.5px;font-weight:600;overflow:hidden}.scene-row.is-hidden .name,.scene-row.is-hidden .dot{opacity:.38}.scene-row .btn{min-width:22px;height:22px;box-shadow:none;color:var(--text-3);background:0 0;border:none;flex:none;padding:0 3px}.scene-row .btn:hover:not(:disabled){color:var(--text-1);background:var(--ink-3)}.scene-row .btn.danger:hover:not(:disabled){color:var(--danger)}.scene-row .btn+.btn{margin-left:-4px}.rename-input{min-width:0;font:inherit;color:var(--text-1);background:var(--ink-0);border:1px solid var(--amber);border-radius:5px;outline:none;flex:1;padding:2px 5px;font-size:12.5px;font-weight:600}.scene-foot{border-top:1px solid var(--ink-3);flex:none;gap:6px;padding:8px 12px 12px;display:flex}.scene-foot .btn{flex:1;font-size:12px}.sidebar{z-index:5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--ink-3);background:#18171ceb;border-radius:12px;flex-direction:column;gap:18px;width:252px;max-height:calc(100% - 24px);padding:12px;display:flex;position:absolute;top:12px;right:12px;overflow-y:auto}.sidebar h2{letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin:0 0 8px;font-size:11px;font-weight:600}.sidebar section>button{text-align:left;width:100%;margin-bottom:6px}.sidebar .empty{color:var(--text-3);margin:0;font-size:12.5px}.cast{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.cast-row{border-radius:var(--radius);align-items:center;gap:2px;padding:2px;display:flex}.cast-row.selected{background:var(--amber-soft)}.cast-main{box-shadow:none;background:0 0;border:none;flex:1;align-items:center;gap:8px;min-width:0;padding:6px 8px;display:flex}.cast-main:hover:not(:disabled){background:var(--ink-2)}.cast-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dot{border:1px solid #00000059;border-radius:50%;flex:none;width:10px;height:10px}button.ghost{box-shadow:none;color:var(--text-3);background:0 0;border:none;padding:4px 7px}button.ghost:hover:not(:disabled){color:var(--text-1);background:var(--ink-2)}button.ghost.danger:hover:not(:disabled){color:var(--danger)}.face-toggle{text-align:left;letter-spacing:.09em;text-transform:uppercase;width:100%;font-size:11px;font-weight:600}.face-slider{color:var(--text-2);align-items:center;gap:8px;margin:6px 0;font-size:12.5px;display:flex}.face-slider span{flex:none;width:42px}.face-slider input[type=range]{accent-color:var(--amber);flex:1}.turn-scrubber{background:var(--ink-2);border:1px solid var(--ink-4);border-radius:var(--radius);cursor:ew-resize;color:var(--text-2);touch-action:none;justify-content:center;align-items:center;gap:10px;margin-bottom:6px;padding:7px 10px;display:flex}.turn-scrubber:hover{background:var(--ink-3);color:var(--text-1)}.turn-arrows{color:var(--amber);font-size:15px}.add-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.add-grid button{width:100%}.add-card{flex-direction:column;align-items:center;gap:4px;padding:8px 6px 7px;font-size:12.5px;display:flex}.char-preview{color:var(--text-2)}.add-card:hover .char-preview{color:var(--amber-hot)}.modal-backdrop{z-index:100;background:#06050999;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-card{background:var(--ink-1);border:1px solid var(--ink-3);width:min(420px,100vw - 48px);max-height:min(70vh,560px);box-shadow:var(--edge), 0 18px 60px #0000008c;border-radius:12px;padding:14px;overflow-y:auto}.modal-head{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.modal-head h2{margin:0;font-size:14px;font-weight:650}.modal-section{letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin:0 0 8px;font-size:11px;font-weight:600}.modal-actions{flex-direction:column;gap:6px;display:flex}.modal-actions button{text-align:left;width:100%}.timeline{background:var(--ink-1);border-top:1px solid var(--ink-3);flex-direction:column;min-height:0;display:flex}.timeline-toolbar{border-bottom:1px solid var(--ink-3);height:46px;box-shadow:var(--edge);grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;display:grid}.tl-left,.tl-right{align-items:center;gap:6px;display:flex}.tl-right{justify-content:flex-end}.btn{justify-content:center;align-items:center;min-width:28px;height:28px;padding:0 6px;display:inline-flex}.btn.is-on{background:var(--amber-soft);border-color:var(--amber);color:var(--amber-hot)}.icon{display:block}.easing-seg{gap:2px;margin-left:6px;display:flex}.easing-seg .btn{font-size:11.5px}.transport{align-items:center;gap:4px;display:flex}.play-btn{background:var(--amber);color:#1c1206;border:none;border-radius:50%;width:34px;min-width:34px;height:34px;margin:0 6px;box-shadow:0 2px 10px #f2b13d59}.play-btn:hover:not(:disabled){background:var(--amber-hot);color:#1c1206}.time-readout{font-family:var(--font-mono);color:var(--text-3);align-items:baseline;gap:6px;margin-right:4px;font-size:12px;display:flex}.time-readout .now{color:var(--amber);font-weight:600}.frame-chip{font-family:var(--font-mono);color:var(--text-2);background:var(--ink-2);border:1px solid var(--ink-3);border-radius:5px;padding:2px 6px;font-size:10.5px}.fps-select{font:inherit;color:var(--text-2);background:var(--ink-2);border:1px solid var(--ink-3);border-radius:5px;padding:3px 4px;font-size:11.5px}.zoom{color:var(--text-3);align-items:center;gap:6px;display:flex}.zoom input[type=range]{appearance:none;background:var(--ink-3);border-radius:2px;outline:none;width:86px;height:3px}.zoom input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--text-2);cursor:pointer;border-radius:50%;width:11px;height:11px;transition:background .12s}.zoom input[type=range]:hover::-webkit-slider-thumb{background:var(--amber)}.timeline-body{flex:1;grid-template-columns:172px minmax(0,1fr);min-height:0;display:grid}.track-gutter{border-right:1px solid var(--ink-3);background:var(--ink-1);flex-direction:column;display:flex;overflow:hidden}.gutter-head{letter-spacing:.18em;text-transform:uppercase;height:26px;color:var(--text-3);border-bottom:1px solid var(--ink-3);flex:none;align-items:center;padding:0 12px;font-size:9.5px;font-weight:700;display:flex}.gutter-row{cursor:pointer;border-bottom:1px solid #2a29328c;flex:none;align-items:center;gap:8px;height:38px;padding:0 8px 0 12px;display:flex}.gutter-row:hover{background:var(--ink-2)}.gutter-row.is-selected{background:var(--ink-2);box-shadow:inset 2px 0 0 var(--amber)}.gutter-row .dot{border-radius:3px;flex:none;width:9px;height:9px}.gutter-row .name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:12px;font-weight:600;overflow:hidden}.gutter-row.is-hidden .name,.gutter-row.is-hidden .dot{opacity:.38}.gutter-row .btn{min-width:22px;height:22px;padding:0 3px}.strip-viewport{background:var(--ink-0);position:relative;overflow:hidden}.strip{will-change:transform;position:absolute;top:0;bottom:0;left:0}.active-region{border-left:1px solid var(--ink-3);border-right:1px solid var(--ink-3);pointer-events:none;background:#ffffff06;position:absolute;top:0;bottom:0}.ruler{background:var(--ink-1);border-bottom:1px solid var(--ink-3);cursor:grab;height:26px;position:relative}.ruler:active{cursor:grabbing}.ruler svg{display:block}.ruler text{font-family:var(--font-mono);fill:var(--text-3);font-size:9px}.ruler line{stroke:var(--ink-4)}.lane-row{cursor:grab;border-bottom:1px solid #2a29328c;height:38px;position:relative}.lane-row:active{cursor:grabbing}.lane-row.is-selected{background:#f2b13d0b}.lane-row.camera-lane,.gutter-row.camera-row{background:#7e96e80d}.gutter-row.camera-row{cursor:default;color:var(--text-2)}.gutter-row.camera-row .icon{flex:none}.kf{cursor:grab;background:#b9b6c5;border:1px solid #14131a;border-radius:2.5px;width:11px;height:11px;transition:transform 90ms,background 90ms,box-shadow 90ms;position:absolute;top:50%;transform:translate(-50%,-50%)rotate(45deg)}.kf:hover{background:#e8e6f0;transform:translate(-50%,-50%)rotate(45deg)scale(1.22)}.kf.is-selected{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft), 0 0 9px var(--amber-glow)}.kf.is-dragging{cursor:grabbing;transform:translate(-50%,-50%)rotate(45deg)scale(1.22)}.marquee{z-index:2;border:1px solid var(--amber);pointer-events:none;background:#f2b13d1a;border-radius:2px;position:absolute}.selection-chip{font-family:var(--font-mono);color:var(--amber-hot);background:var(--amber-soft);border:1px solid var(--amber);white-space:nowrap;border-radius:5px;padding:2px 6px;font-size:10.5px}.playhead-fixed{z-index:3;pointer-events:none;width:0;position:absolute;top:0;bottom:0;left:50%}.playhead-fixed .line{background:var(--amber);width:2px;box-shadow:0 0 7px var(--amber-glow);position:absolute;top:0;bottom:0;left:-1px}.playhead-fixed .cap{background:var(--amber);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);border-radius:3px 3px 1px 1px;width:13px;height:15px;position:absolute;top:0;left:-6.5px}.lanes-empty{color:var(--text-3);pointer-events:none;place-items:center;font-size:12px;display:grid;position:absolute;inset:26px 0 0}