:root{--panel-bg: #1a1a1e;--panel-fg: #e8e8ec;--panel-muted: #9a9aa2;--panel-border: #33333a;--accent: #7fd1ff;--ctl-bg: #24242a;--hover-bg: #2a2a30;--active-bg: #202a30;--danger: #e0577a;--danger-fg: #ff9db4;--danger-bg: #3a1420;--fs-sm: 12px;--fs-base: 13px;--fs-lg: 15px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;color:var(--panel-fg);font-family:system-ui,Malgun Gothic,sans-serif;overflow:hidden}#app{display:flex;height:100vh}#left{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}#stageWrap{flex:1;min-width:0;min-height:0;position:relative;background:#000;display:flex;align-items:center;justify-content:center}#bottom{flex:none;height:250px;display:flex;border-top:1px solid var(--panel-border)}#adBox{flex:none;width:250px;height:250px;border-right:1px solid var(--panel-border);background:#101013;display:flex;align-items:center;justify-content:center;color:var(--panel-muted);font-size:var(--fs-sm);letter-spacing:1px}#sequence{flex:1;min-width:0;background:#141417;overflow:hidden;display:flex;flex-direction:column}.seq-toolbar{flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:4px 6px;border-bottom:1px solid var(--panel-border)}.seq-btn{flex:none;white-space:nowrap;background:var(--ctl-bg);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:5px;font-size:var(--fs-sm);font-family:inherit;padding:3px 9px;cursor:pointer}.seq-btn:hover:not(:disabled){border-color:var(--accent)}.seq-btn:disabled{opacity:.4;cursor:default}.seq-btn.on{border-color:var(--accent);color:var(--accent);background:var(--active-bg)}.seq-canvas{flex:1;min-height:0;display:block;width:100%}.ctx-menu{position:fixed;z-index:100;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:6px;padding:3px;box-shadow:0 4px 12px #00000080}.ctx-menu.above{transform:translateY(calc(-100% - 6px))}.ctx-menu[hidden]{display:none}.ctx-menu-item{display:block;min-width:80px;text-align:left;background:none;border:none;color:var(--panel-fg);font-size:var(--fs-base);font-family:inherit;padding:6px 10px;border-radius:4px;cursor:pointer}.ctx-menu-item:hover{background:var(--hover-bg);color:var(--accent)}.ctx-menu-item.disabled{opacity:.35;pointer-events:none}.ctx-menu-header{padding:6px 10px 2px;margin-top:3px;border-top:1px solid var(--panel-border);color:var(--panel-muted);font-size:var(--fs-sm)}.ctx-menu-input{display:block;width:100%;margin:2px 0;background:var(--ctl-bg);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:4px;padding:5px 8px;font-size:var(--fs-sm);font-family:inherit}.ctx-menu-input:focus{outline:none;border-color:var(--accent)}#stage{display:block}#perf{position:absolute;top:8px;left:8px;font:var(--fs-sm) monospace;color:#4ade80;background:#0000008c;padding:3px 7px;border-radius:4px;pointer-events:none;z-index:10;white-space:pre;line-height:1.5}#perf[hidden]{display:none}#panel{width:280px;flex:none;background:var(--panel-bg);border-left:1px solid var(--panel-border);display:flex;flex-direction:column;min-height:0}.mode-bar{flex:none;display:flex;border-bottom:1px solid var(--panel-border)}.mode-bar[hidden]{display:none}.mode-btn{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:var(--panel-muted);padding:10px 4px;font-size:var(--fs-sm);font-family:inherit;cursor:pointer}.mode-btn.active{color:var(--panel-fg);border-bottom-color:var(--accent)}.mode-btn:disabled{opacity:.4;cursor:default}body.live-mode #bottom,body.live-mode .transport-fixed,body.live-mode .file-only{display:none}body:not(.live-mode) .live-only{display:none}.tab-header{flex:none;display:flex;border-bottom:1px solid var(--panel-border)}.tab-btn{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:var(--panel-muted);padding:11px 4px;font-size:var(--fs-sm);font-family:inherit;cursor:pointer}.tab-btn.active{color:var(--panel-fg);border-bottom-color:var(--accent)}.tab-body-wrap{flex:1;overflow-y:auto;padding:16px;min-height:0}.transport-fixed{flex:none;border-top:1px solid var(--panel-border);padding:12px 16px}.transport-fixed .ctl-section{margin-bottom:0}.ctl-section{margin-bottom:20px}.ctl-section h2{font-size:var(--fs-base);font-weight:600;color:var(--panel-muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px}.ctl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.ctl-row[hidden]{display:none}.ctl-row label{font-size:var(--fs-base);color:var(--panel-fg);white-space:nowrap}.ctl-row select{width:auto;flex:1;min-width:0}.ctl-row .val{font-size:var(--fs-sm);color:var(--panel-muted);min-width:34px;text-align:right}input[type=range]{flex:1;accent-color:var(--accent)}input[type=color]{width:40px;height:26px;border:1px solid var(--panel-border);background:none;padding:0;border-radius:4px}select,.file-btn{width:100%;background:var(--ctl-bg);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:6px;padding:7px 9px;font-size:var(--fs-base);font-family:inherit}.file-btn{display:block;text-align:center;cursor:pointer;margin-bottom:8px}.file-btn:hover{border-color:var(--accent)}.file-btn[hidden],.file-btn input{display:none}.file-name{font-size:var(--fs-sm);color:var(--panel-muted);word-break:break-all;margin-bottom:8px}.audio-remove{background:none;border:1px solid var(--panel-border);border-radius:6px;color:var(--panel-muted);font-size:var(--fs-sm);font-family:inherit;padding:5px 9px;margin-bottom:8px;cursor:pointer}.audio-remove:hover{border-color:var(--danger);color:var(--danger-fg)}.ctl-row.palette-editor{flex-direction:column;align-items:stretch;gap:8px}.palette-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.palette-chip{display:inline-flex;align-items:center;gap:2px;min-width:0}.palette-chip input[type=color]{flex:1;width:auto;min-width:0}.palette-del{background:none;border:none;color:var(--panel-muted);font-size:var(--fs-base);line-height:1;padding:2px;cursor:pointer}.palette-del:hover:not(:disabled){color:var(--danger-fg)}.palette-del:disabled{opacity:.3;cursor:default}.palette-add{width:100%;height:26px;background:var(--ctl-bg);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:4px;font-size:var(--fs-base);font-weight:600;line-height:1;cursor:pointer}.palette-add:hover{border-color:var(--accent)}.shape-toggles{display:flex;gap:6px}.shape-toggle{width:32px;height:30px;background:var(--ctl-bg);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:6px;font-size:var(--fs-lg);line-height:1;cursor:pointer}.shape-toggle.on{border-color:var(--accent);color:var(--accent);background:var(--active-bg)}.shape-toggle:disabled{opacity:.4;cursor:default}#panel.recording .file-btn{opacity:.45;pointer-events:none}.cue-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.cue-tab{background:var(--ctl-bg);border:1px solid var(--panel-border);border-radius:6px;color:var(--panel-muted);font-size:var(--fs-sm);font-family:inherit;padding:5px 9px;cursor:pointer}.cue-tab:hover:not(:disabled){border-color:var(--accent)}.cue-tab.active{border-color:var(--accent);color:var(--accent);background:var(--active-bg)}.cue-tab.cue-add{padding:5px 10px;font-weight:600}.cue-tab:disabled{opacity:.4;cursor:default}.cue-tab.dragging{opacity:.4}.cue-tab.drop-before{box-shadow:-3px 0 0 var(--accent)}.cue-tab.drop-after{box-shadow:3px 0 0 var(--accent)}.cue-title{width:100%;background:var(--ctl-bg);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:6px;padding:6px 9px;font-size:var(--fs-base);font-family:inherit;margin-bottom:8px}.cue-title[hidden]{display:none}.cue-title-text{padding:6px 9px;margin-bottom:8px;font-size:var(--fs-base);color:var(--panel-fg);border:1px solid transparent;border-radius:6px;cursor:text;word-break:break-all}.cue-title-text:hover{border-color:var(--panel-border)}.cue-title-text.placeholder{color:var(--panel-muted)}.cue-title-text[hidden]{display:none}.cue-title:focus{outline:none;border-color:var(--accent)}.transport{display:flex;align-items:center;gap:10px}#playBtn{background:var(--accent);color:#06232f;border:none;border-radius:6px;width:44px;height:34px;font-size:var(--fs-lg);cursor:pointer}#playBtn:disabled{opacity:.4;cursor:default}#seek{flex:1}.time{font-size:var(--fs-sm);color:var(--panel-muted);font-variant-numeric:tabular-nums}.check-row{cursor:pointer}.check-row input{accent-color:var(--accent)}.export-progress{font-size:var(--fs-sm);color:var(--accent);padding:4px 0;font-variant-numeric:tabular-nums}.credits{font-size:var(--fs-sm);color:var(--panel-muted);line-height:1.5;margin:0}.credits a{color:var(--accent)}.lang-toggle{display:flex;gap:6px}.lang-btn{flex:1;padding:6px 10px;background:var(--ctl-bg);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:6px;cursor:pointer;font-size:var(--fs-sm)}.lang-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;cursor:default}.rec-btn{width:100%;margin-top:4px;background:var(--ctl-bg);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:6px;padding:9px;font-size:var(--fs-base);font-family:inherit;cursor:pointer}.rec-btn:hover:not(:disabled){border-color:var(--accent)}.rec-btn:disabled{opacity:.4;cursor:default}.rec-btn.on{background:var(--danger-bg);border-color:var(--danger);color:var(--danger-fg)}.rec-btn.cancel{background:transparent;color:var(--panel-muted)}.rec-btn.cancel:hover:not(:disabled){border-color:var(--danger);color:var(--danger-fg)}#panelToggle{position:fixed;top:50%;right:280px;transform:translateY(-50%);z-index:150;width:18px;height:48px;padding:0;background:var(--ctl-bg);color:var(--panel-muted);border:1px solid var(--panel-border);border-right:none;border-radius:6px 0 0 6px;cursor:pointer;font-size:14px;line-height:1}#panelToggle:hover{color:var(--accent);border-color:var(--accent)}body.panel-hidden #panelToggle{right:0}body.panel-hidden #panel,#smallScreen{display:none}@media(max-width:1023px),(max-height:599px){#smallScreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--panel-bg)}}body.ss-dismissed #smallScreen{display:none}.ss-box{max-width:400px;text-align:center;color:var(--panel-fg)}.ss-box h1{margin:0 0 12px;font-size:20px}.ss-box p{margin:0 0 20px;font-size:var(--fs-base);line-height:1.6;color:var(--panel-muted)}.ss-dismiss{padding:8px 16px;background:var(--ctl-bg);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:6px;cursor:pointer;font-size:var(--fs-sm)}.ss-dismiss:hover{border-color:var(--accent);color:var(--accent)}.help-open-btn{width:100%;margin-top:8px;padding:8px 10px;background:var(--ctl-bg);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:6px;cursor:pointer;font-size:var(--fs-sm)}.help-open-btn:hover{border-color:var(--accent);color:var(--accent)}#helpOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:flex;align-items:center;justify-content:center;background:#0000008c;padding:20px}#helpOverlay[hidden]{display:none}.help-modal{position:relative;max-width:460px;width:100%;max-height:85vh;overflow-y:auto;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:10px;padding:24px;color:var(--panel-fg)}.help-close{position:absolute;top:12px;right:12px;width:28px;height:28px;background:none;border:none;color:var(--panel-muted);font-size:22px;line-height:1;cursor:pointer}.help-close:hover{color:var(--panel-fg)}.help-modal h2{margin:0 0 16px;font-size:var(--fs-lg)}.help-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:12px}.help-steps li{font-size:var(--fs-base);line-height:1.5}.help-step-title{display:block;color:var(--panel-fg)}.help-step-desc{display:block;color:var(--panel-muted);font-size:var(--fs-sm)}.help-notice{margin-top:20px;padding:12px 14px;border:1px solid var(--danger);border-radius:8px;background:var(--danger-bg)}.help-notice p{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--panel-fg)}.help-notice-title{color:var(--danger-fg);margin-bottom:4px!important}