:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0b0b0a;color:#f2eee7}*{box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body,#app{width:100%;min-width:320px;min-height:100%;margin:0}body{overflow-x:hidden;background:radial-gradient(circle at 76% 8%,rgba(255,47,207,.14),transparent 26rem),radial-gradient(circle at 18% 0%,rgba(31,220,255,.16),transparent 24rem),linear-gradient(180deg,#041124f5,#0b0b0a 52%),#0b0b0a}button,input,select,textarea{font:inherit}.shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr}.topbar{min-height:72px;display:grid;grid-template-columns:auto auto auto auto minmax(220px,1fr) auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:#0e0e0df0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.brand{display:inline-flex;align-items:center;gap:10px;min-width:132px;font-size:18px;font-weight:730}.brand-mark{width:13px;height:28px;border-radius:2px;background:linear-gradient(180deg,#f8d793,#72d5d8 58%,#215960);box-shadow:0 0 24px #72d5d857}.file-actions input{display:none}.aspect-toggle{min-height:38px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border:1px solid rgba(255,255,255,.13);border-radius:6px;color:#efe7db;background:#1b1a18;white-space:nowrap;cursor:pointer}.aspect-toggle:has(input:checked){border-color:#7bd9dbb3;color:#061312;background:#7bd9db}.button{min-height:38px;min-width:76px;border:1px solid rgba(255,255,255,.13);border-radius:6px;padding:0 14px;color:#f4efe6;background:#22211f;cursor:pointer}.button:hover:not(:disabled){border-color:#7ddbdb8c;background:#2a2926}.button:disabled{color:#f4efe66b;cursor:not-allowed}.button.primary{color:#061312;border-color:#7bd9db;background:#7bd9db}.button.danger{border-color:#f76f59ad;color:#fff7f2;background:#7e2b24}.utility-button{min-width:0;width:auto;padding-inline:10px}.settings-export{width:100%;min-height:150px;margin-top:10px;resize:vertical;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:10px;color:#eee8dd;background:#080808a3;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.45}.encoder-diagnostics{min-height:190px;white-space:pre}.track-strip{display:grid;grid-template-columns:minmax(120px,240px) minmax(140px,1fr) auto;gap:12px;align-items:center;min-width:0}.track-name{min-width:0;overflow:hidden;color:#d9d2c6;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.timeline,input[type=range]{accent-color:#7bd9db}.timeline{width:100%}.time-readout{width:86px;color:#a8a095;font-variant-numeric:tabular-nums;font-size:13px;text-align:right}.transport,.record-actions{display:flex;gap:8px;align-items:center}.transport{justify-content:flex-end;flex-wrap:wrap}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,520px);gap:10px;padding:10px;min-height:0}.stage-column{display:grid;grid-template-rows:auto auto;align-content:start;gap:12px;min-width:0;min-height:0}.stage{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#030404;outline:none;user-select:none;-webkit-user-select:none;touch-action:none}#glCanvas{grid-column:1;grid-row:1;display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;background:#000;border:none;outline:none;user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab;-webkit-user-drag:none;pointer-events:auto}#glCanvas:focus,#glCanvas:focus-visible{outline:none;box-shadow:none}.drop-overlay{position:absolute;top:16px;right:16px;bottom:16px;left:16px;display:grid;place-items:center;border:1px dashed transparent;border-radius:8px;color:#f2eee7;background:#061011b8;font-size:18px;font-weight:700;pointer-events:none}.monitor-bar{display:grid;grid-template-columns:12px 1fr;gap:12px;align-items:center;min-height:54px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#151412}.recording-dot{width:10px;height:10px;border-radius:999px;background:#4a4742}.recording-dot.is-active{background:#f36f5b;box-shadow:0 0 16px #f36f5bd9}.status-line{min-width:0;overflow:hidden;color:#c9c1b3;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.side-panel{display:grid;grid-template-rows:auto auto auto;align-content:start;gap:8px;min-width:0;min-height:0;max-height:calc(100vh - 92px);overflow:auto}.panel-section{display:grid;gap:8px;min-width:0;padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#151412}.section-title{color:#efe7db;font-weight:720}.lifecycle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.lifecycle-step{display:grid;gap:3px;min-height:44px;align-content:center;justify-items:center;border:1px solid rgba(255,255,255,.09);border-radius:8px;color:#8f887e;background:#11100f}.lifecycle-step span{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;color:#0b0b0a;background:#4f4b45;font-size:12px;font-weight:760}.lifecycle-step strong{max-width:100%;overflow:hidden;font-size:12px;font-weight:680;text-overflow:ellipsis;white-space:nowrap}.lifecycle-step.is-active{border-color:#7bd9db70;color:#e7fbfb}.lifecycle-step.is-ready,.lifecycle-step.is-complete{border-color:#7bd9db57;color:#f2eee7;background:#142a2da3}.lifecycle-step.is-ready span,.lifecycle-step.is-complete span{background:#7bd9db}.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.color-grid label{grid-template-columns:1fr 42px;align-items:center;min-height:34px;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:5px 7px;color:#d3cabd;background:#11100f}.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.compact-grid{gap:6px}label{display:grid;gap:4px;min-width:0;color:#aaa296;font-size:12px}.check-label{grid-template-columns:auto 1fr;align-items:center;align-content:center;min-height:36px}.check-label input{width:auto}select,input[type=number],input[type=text],input[type=range],input[type=color]{width:100%}input[type=number],input[type=text]{min-height:30px;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:0 7px;color:#f2eee7;background:#22211f}input[readonly]{color:#aaa296;background:#171614}.readout{font-size:12px;font-variant-numeric:tabular-nums}input[type=color]{width:42px;height:24px;border:0;border-radius:5px;padding:0;background:transparent;cursor:pointer}select{min-height:36px;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:0 9px;color:#f2eee7;background:#22211f}.download-link{min-height:38px;display:inline-grid;place-items:center;border-radius:6px;color:#061312;background:#f3c36d;font-weight:720;text-decoration:none}.record-preview{width:100%;border-radius:6px;background:#050505}@media(max-width:1180px){.topbar{grid-template-columns:auto auto auto 1fr}.transport{grid-column:1 / -1}.workspace{grid-template-columns:1fr}.side-panel{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}#glCanvas{max-width:100%;max-height:none}}@media(max-width:980px){.side-panel{grid-template-columns:1fr}}@media(max-width:760px){.topbar,.workspace{padding:12px}.topbar{grid-template-columns:1fr;gap:12px}.track-strip{grid-template-columns:1fr;gap:8px}.time-readout{width:auto;text-align:left}.workspace,.side-panel{grid-template-columns:1fr}.stage{min-height:220px}.status-line{grid-column:1 / -1}.control-grid{grid-template-columns:1fr}.record-actions,.transport{flex-wrap:wrap}.lifecycle,.color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}