:root{--bg: #0b0c0d;--panel: #121416;--panel-2: #16181b;--line: #24272b;--line-bright: #34383e;--text: #d7dade;--dim: #7c828a;--faint: #4a4f56;--amber: #ffb000;--amber-dim: #8a6300;--run: #ff4d00;--ok: #3ddc84;--display: "Chakra Petch", sans-serif;--mono: "Martian Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--display);font-size:14px;overflow:hidden;background-image:linear-gradient(var(--panel) 1px,transparent 1px),linear-gradient(90deg,var(--panel) 1px,transparent 1px);background-size:48px 48px}.app{height:100%;display:grid;grid-template-rows:46px 1fr 64px;grid-template-columns:1fr 312px;grid-template-areas:"head head" "stage rack" "transport transport"}.head{grid-area:head;display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--panel)}.head .brand{font-weight:700;letter-spacing:.34em;font-size:15px}.head .brand em{color:var(--amber);font-style:normal}.head .sub{color:var(--faint);font-family:var(--mono);font-size:10px;letter-spacing:.08em}.head .file{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}.head .file b{color:var(--amber);font-weight:400}.stage{grid-area:stage;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,rgba(255,176,0,.045),transparent 60%),var(--bg)}.stage-inner{position:relative}.stage canvas.frame{display:block;outline:1px solid var(--line-bright);background:repeating-conic-gradient(#191b1e 0% 25%,#101214 0% 50%) 0 0/16px 16px}.drop{border:1px dashed var(--line-bright);padding:72px 88px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:#121416d9}.drop:hover,.drop.over{border-color:var(--amber);background:#ffb0000a}.drop h2{font-weight:600;letter-spacing:.2em;font-size:15px}.drop p{color:var(--dim);font-family:var(--mono);font-size:11px;margin-top:10px}.drop .key{color:var(--amber)}.crop-layer{position:absolute;inset:0}.crop-box{position:absolute;outline:1px solid var(--amber);box-shadow:0 0 0 9999px #0607089e;cursor:move}.crop-box .dim-label{position:absolute;top:-20px;left:0;font-family:var(--mono);font-size:10px;color:var(--amber);letter-spacing:.06em;white-space:nowrap;text-shadow:0 1px 2px #000}.crop-box .thirds{position:absolute;inset:0;pointer-events:none;opacity:.35;background:linear-gradient(transparent calc(33.3% - .5px),rgba(255,176,0,.5) 33.3%,transparent calc(33.3% + .5px)),linear-gradient(transparent calc(66.6% - .5px),rgba(255,176,0,.5) 66.6%,transparent calc(66.6% + .5px)),linear-gradient(90deg,transparent calc(33.3% - .5px),rgba(255,176,0,.5) 33.3%,transparent calc(33.3% + .5px)),linear-gradient(90deg,transparent calc(66.6% - .5px),rgba(255,176,0,.5) 66.6%,transparent calc(66.6% + .5px))}.handle{position:absolute;width:11px;height:11px;background:var(--bg);border:1px solid var(--amber)}.handle:hover{background:var(--amber)}.handle.nw{top:-6px;left:-6px;cursor:nwse-resize}.handle.ne{top:-6px;right:-6px;cursor:nesw-resize}.handle.sw{bottom:-6px;left:-6px;cursor:nesw-resize}.handle.se{bottom:-6px;right:-6px;cursor:nwse-resize}.handle.n{top:-6px;left:calc(50% - 5px);cursor:ns-resize}.handle.s{bottom:-6px;left:calc(50% - 5px);cursor:ns-resize}.handle.w{left:-6px;top:calc(50% - 5px);cursor:ew-resize}.handle.e{right:-6px;top:calc(50% - 5px);cursor:ew-resize}.stage .badge{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--bg);background:var(--amber);padding:3px 8px}.rack{grid-area:rack;border-left:1px solid var(--line);background:var(--panel);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-bright) transparent}.unit{border-bottom:1px solid var(--line);padding:12px 14px 14px}.unit-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}.unit-head h3{font-size:11px;font-weight:600;letter-spacing:.28em;color:var(--dim)}.unit-head .tag{font-family:var(--mono);font-size:9px;color:var(--faint);letter-spacing:.06em}.row{display:flex;gap:8px;align-items:center;margin-top:8px}.row:first-of-type{margin-top:0}.row label{font-family:var(--mono);font-size:9px;color:var(--faint);letter-spacing:.1em;width:34px;flex-shrink:0}.num{font-family:var(--mono);font-size:12px;color:var(--amber);background:var(--bg);border:1px solid var(--line);padding:6px 8px;width:100%;min-width:0;transition:border-color .12s}.num:focus{outline:none;border-color:var(--amber-dim)}.num:disabled{color:var(--faint)}.num::-webkit-outer-spin-button,.num::-webkit-inner-spin-button{-webkit-appearance:none}.num[type=number]{-moz-appearance:textfield;appearance:textfield}.chip{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--dim);background:var(--panel-2);border:1px solid var(--line);padding:5px 8px;cursor:pointer;white-space:nowrap}.chip:hover{color:var(--text);border-color:var(--line-bright)}.chip.active{color:var(--amber);border-color:var(--amber-dim)}.readout{margin-top:10px;font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.04em;line-height:1.7}.readout b{color:var(--amber);font-weight:400}.readout .warn{color:var(--run)}.readout .good{color:var(--ok)}.switch{position:relative;width:40px;height:20px;background:var(--bg);border:1px solid var(--line-bright);cursor:pointer;flex-shrink:0;transition:border-color .15s}.switch:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--faint);transition:transform .15s,background .15s}.switch.on{border-color:var(--amber)}.switch.on:after{transform:translate(20px);background:var(--amber)}.btn{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--text);background:var(--panel-2);border:1px solid var(--line-bright);padding:8px 12px;cursor:pointer;transition:border-color .12s,color .12s,background .12s;white-space:nowrap}.btn:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}.btn:disabled{opacity:.4;cursor:default}.btn.primary{width:100%;padding:12px;font-size:13px;color:var(--bg);background:var(--run);border-color:var(--run)}.btn.primary:hover:not(:disabled){background:#ff6a26;color:var(--bg)}.btn.primary:disabled{opacity:.35}.progress{margin-top:10px;height:4px;background:var(--bg);border:1px solid var(--line);position:relative}.progress>i{position:absolute;inset:0;background:var(--amber);transform-origin:left;transition:transform .2s linear}.transport{grid-area:transport;display:flex;align-items:center;gap:14px;padding:0 16px;border-top:1px solid var(--line);background:var(--panel)}.tbtn{font-family:var(--mono);font-size:12px;width:40px;height:34px;color:var(--text);background:var(--panel-2);border:1px solid var(--line-bright);cursor:pointer}.tbtn:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}.tbtn:disabled{opacity:.35;cursor:default}.timecode{font-family:var(--mono);font-size:15px;color:var(--amber);letter-spacing:.08em;text-shadow:0 0 12px rgba(255,176,0,.35);min-width:200px}.timecode .total{color:var(--amber-dim)}.scrub{flex:1;appearance:none;height:4px;background:var(--line);outline:none;cursor:pointer}.scrub::-webkit-slider-thumb{appearance:none;width:10px;height:18px;background:var(--amber);cursor:ew-resize}.scrub::-moz-range-thumb{width:10px;height:18px;background:var(--amber);border:none;border-radius:0}.transport .meta{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.06em;white-space:nowrap}.hidden-input{display:none}@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:46px 1fr auto 64px;grid-template-areas:"head" "stage" "rack" "transport"}.rack{border-left:none;border-top:1px solid var(--line);max-height:40vh}}