@import "https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=VT323&display=swap";:root{--bg:#0b0b12;--panel:#12121d;--raise:#1a1a2a;--border:#2e2e4a;--border-hi:#4a4a78;--text:#e8e8f0;--dim:#7d7da3;--accent:#ffd23f;--accent-dark:#8a6d13;--pink:#ff4f9a;--cyan:#4ff5d2;--ink:#16130a;--hard:#050508;--row-background:#ffd23f;--row-character:#ff4f9a;--row-foreground:#4ff5d2;--row-metadata:#9a7bff;--row-lyrics:#7bd0ff;--row-global:#ff9a4f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:VT323,SF Mono,Menlo,monospace}*{box-sizing:border-box}::selection{background:var(--accent);color:var(--ink)}body{background:var(--bg);color:var(--text);image-rendering:pixelated;margin:0;font-size:17px;line-height:1.2;overflow:hidden}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--panel);border:2px solid var(--border)}::-webkit-scrollbar-thumb{background:var(--border-hi);border:2px solid var(--panel)}::-webkit-scrollbar-thumb:hover{background:var(--accent)}#app{height:100vh;display:flex}#workspace{background:var(--bg);flex-direction:column;flex:1;min-width:0;display:flex}#vsplit{cursor:col-resize;background:var(--border);flex-shrink:0;width:6px}#vsplit:hover,#vsplit.dragging{background:var(--accent)}#preview-pane{background:var(--panel);flex-direction:column;flex-shrink:0;width:420px;min-width:220px;display:flex}#stage{background:repeating-conic-gradient(from 0deg, #ffffff04 0 25%, transparent 0 50%) 0 0 / 24px 24px;flex:1;justify-content:center;align-items:center;min-height:0;padding:16px;display:flex}#screen{width:auto;max-width:100%;height:auto;max-height:100%;image-rendering:pixelated;border:2px solid var(--border-hi);box-shadow:6px 6px 0 var(--hard);background:#000}#topbar{background:var(--panel);border-bottom:2px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:8px 14px;display:flex}#topbar h1{letter-spacing:1px;color:var(--accent);text-shadow:2px 0 0 var(--pink), -2px 0 0 var(--cyan), 3px 3px 0 var(--hard);margin:0;font-family:Silkscreen,monospace;font-size:20px;font-weight:700}#project-name{letter-spacing:1px;color:var(--dim);border:2px solid var(--border);background:0 0;border-radius:0;flex-shrink:0;min-width:80px;padding:4px 8px;font-family:Silkscreen,monospace;font-size:10px}#project-name:hover{color:var(--text);border-color:var(--border-hi)}#project-name:focus{color:var(--text);border-color:var(--accent);outline:none}#topbar .ghost.on{color:var(--accent);border-color:var(--accent)}#status{color:var(--dim);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;margin:0;font-size:14px;overflow:hidden}button.primary{background:var(--accent);color:var(--ink);border:2px solid var(--ink);letter-spacing:1px;text-transform:uppercase;cursor:pointer;box-shadow:4px 4px 0 var(--hard);border-radius:0;padding:10px;font-family:Silkscreen,monospace;font-size:13px;font-weight:700}button.primary:hover:not(:disabled){background:var(--pink);color:#fff}button.primary:active:not(:disabled){box-shadow:2px 2px 0 var(--hard);transform:translate(2px,2px)}button.primary:disabled{opacity:.4;cursor:default}button.primary.small{box-shadow:3px 3px 0 var(--hard);padding:5px 10px;font-size:10px}button.ghost{border:2px dashed var(--border-hi);color:var(--dim);cursor:pointer;letter-spacing:1px;text-transform:uppercase;background:0 0;border-radius:0;padding:5px 10px;font-family:Silkscreen,monospace;font-size:10px}button.ghost:hover{color:var(--accent);border-color:var(--accent)}#timeline{background:var(--panel);border-bottom:2px solid var(--border);-webkit-user-select:none;user-select:none;flex-direction:column;flex-shrink:0;display:flex}.tl-top{display:flex}#timeline{--gutter-w:110px}.tl-corner{width:calc(var(--gutter-w) + 6px);border-right:2px solid var(--border);border-bottom:2px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:3px;padding:2px 4px;display:flex}.tl-corner button{background:var(--bg);border:2px solid var(--border);color:var(--dim);cursor:pointer;font:inherit;width:20px;padding:1px 0;font-size:13px;line-height:1}.tl-corner button:hover{color:var(--accent);border-color:var(--border-hi)}.tl-corner button.on{background:var(--accent);color:var(--ink);border-color:var(--ink)}.tl-corner select{background:var(--bg);border:2px solid var(--border);min-width:58px;color:var(--dim);font:inherit;flex:1;padding:1px 2px;font-size:13px}.tl-ruler-wrap{border-bottom:2px solid var(--border);cursor:ew-resize;flex:1;min-width:0;height:52px;position:relative}canvas.tl-ruler{width:100%;height:100%;position:absolute;inset:0}.tl-main{display:flex}.tl-gutter{width:var(--gutter-w);flex-direction:column;flex-shrink:0;display:flex}.gutter-split{cursor:col-resize;background:var(--border);flex-shrink:0;width:6px}.gutter-split:hover,.gutter-split.dragging{background:var(--accent)}.tl-scroll.cut-mode .clip{cursor:crosshair}.tl-scroll.cut-mode .clip-h{display:none}.tl-cutline{pointer-events:none;z-index:5;background:repeating-linear-gradient(to bottom, var(--pink) 0 4px, transparent 4px 7px);width:2px;display:none;position:absolute}.tl-rowhead{white-space:nowrap;letter-spacing:1px;text-transform:uppercase;height:34px;color:var(--dim);border-bottom:1px solid var(--border);border-left:4px solid var(--row-tint,var(--border));align-items:center;padding:0 6px;font-family:Silkscreen,monospace;font-size:8px;display:flex;overflow:hidden}.tl-scroll{flex:1;min-width:0;overflow:auto hidden}.tl-content{position:relative}.tl-row{border-bottom:1px solid var(--border);background-size:var(--beat-px,24px) 100%, calc(var(--beat-px,24px) * 4) 100%;background-image:linear-gradient(90deg, #2e2e4a59 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);height:34px;position:relative}.tl-row:nth-child(2n){background-color:#ffffff04}.clip{background:color-mix(in srgb, var(--row-tint) 18%, var(--raise));border:2px solid color-mix(in srgb, var(--row-tint) 45%, var(--border));height:27px;color:var(--text);cursor:grab;align-items:center;font-size:13px;line-height:1;display:flex;position:absolute;top:3px;overflow:hidden}.clip:hover{border-color:color-mix(in srgb, var(--row-tint) 80%, var(--border))}.clip.selected{border-color:var(--cyan);z-index:2;box-shadow:2px 2px #4ff5d259}.clip.active{border-color:var(--accent)}.clip.dragging{opacity:.6;cursor:grabbing;z-index:3}.clip--blocked{animation:.25s steps(3,end) clip-blocked}@keyframes clip-blocked{0%{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink)}to{border-color:var(--border)}}.clip-label{white-space:nowrap;text-overflow:ellipsis;pointer-events:none;padding:0 6px;overflow:hidden}.clip.tiny .clip-label{display:none}.clip-h{cursor:ew-resize;width:6px;position:absolute;top:0;bottom:0}.clip-h.left{left:0}.clip-h.right{right:0}.clip.tiny .clip-h,.clip.derived .clip-h{display:none}.clip.derived{cursor:grab}.clip-add{border:2px dashed var(--border-hi);width:26px;height:27px;color:var(--dim);font:inherit;cursor:pointer;background:0 0;font-size:14px;line-height:1;position:absolute;top:3px}.clip-add:hover{color:var(--accent);border-color:var(--accent)}.tl-playhead{background:var(--accent);pointer-events:none;z-index:4;width:2px;position:absolute;top:0;bottom:0}#artwork-bar{background:var(--panel);border-bottom:2px solid var(--border);flex-shrink:0;align-items:center;gap:10px;padding:8px 14px;display:flex}.aw-tabs{flex-wrap:wrap;gap:6px;display:flex}.aw-tab{letter-spacing:1px;text-transform:uppercase;background:var(--raise);border:2px solid var(--border);border-left:4px solid var(--row-tint,var(--border));color:var(--dim);cursor:pointer;padding:5px 10px;font-family:Silkscreen,monospace;font-size:9px}.aw-tab:hover{color:var(--text);border-color:var(--border-hi)}.aw-tab.on{background:var(--row-tint,var(--accent));color:var(--ink);border-color:var(--ink);box-shadow:2px 2px 0 var(--hard)}.aw-side{align-items:center;gap:6px;margin-left:auto;display:flex}.aw-side input.len-in{background:var(--bg);border:2px solid var(--border);color:var(--text);font:inherit;width:44px;padding:1px 4px;font-size:15px}#transport{background:var(--panel);border-bottom:2px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:7px 14px;display:flex}#transport button{background:var(--raise);border:2px solid var(--border-hi);color:var(--accent);cursor:pointer;width:40px;height:32px;box-shadow:3px 3px 0 var(--hard);border-radius:0;font-size:14px}#transport button:hover:not(:disabled){border-color:var(--accent)}#transport button:active:not(:disabled){box-shadow:1px 1px 0 var(--hard);transform:translate(2px,2px)}#transport button:disabled{opacity:.4;cursor:default}#transport button.on{background:var(--accent);color:var(--ink);border-color:var(--ink)}.transport-readout{color:var(--dim);gap:14px;margin-left:auto;font-size:16px;display:flex}.transport-readout .pos{color:var(--text);text-align:right;min-width:72px}#clip-panel{background:var(--bg);flex:1;min-height:0;padding:12px 14px 20px;overflow-y:auto}.cp-empty{height:100%;color:var(--dim);letter-spacing:1px;text-transform:uppercase;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-family:Silkscreen,monospace;font-size:10px;display:flex}.cp-head{align-items:center;gap:10px;margin-bottom:10px;display:flex}.cp-chip{letter-spacing:1px;text-transform:uppercase;color:var(--ink);background:var(--row-tint,var(--accent));border:2px solid var(--ink);box-shadow:2px 2px 0 var(--hard);padding:3px 7px;font-family:Silkscreen,monospace;font-size:9px}.cp-head .field-line{margin-left:auto}.cp-body{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start;gap:10px 32px;display:grid}.cp-group{border-top:2px solid var(--border);flex-direction:column;gap:5px;min-width:0;padding:8px 0 12px;display:flex}.sec-label{color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:4px;font-family:Silkscreen,monospace;font-size:8px}.cp-group>.sec-label:first-child{color:var(--text);margin-top:0;font-size:9px}.field-line{align-items:center;gap:5px;display:flex}.field-line input[type=number],.field-line input[type=text],.field-line select,.lyric-line input[type=number],.lyric-line input[type=text],.lyric-line select,.curve-head input[type=number],.curve-head select{background:var(--bg);border:2px solid var(--border);color:var(--text);font:inherit;border-radius:0;min-width:0;padding:1px 4px;font-size:15px}.field-line input:focus,.field-line select:focus,.lyric-line input:focus,.lyric-line select:focus,.curve-head input:focus,.curve-head select:focus{border-color:var(--accent);outline:none}.field-line input[type=text]{flex:1}.len-in{width:44px;padding:1px 3px}input.len-in:not(:focus){cursor:ns-resize}input.len-in.scrubbing{border-color:var(--accent)}.len-unit{color:var(--dim);font-size:13px}input[type=range]{appearance:none;cursor:ew-resize;background:0 0;flex:1;min-width:0;height:16px;padding:0;box-shadow:none!important;border:none!important}input[type=range]::-webkit-slider-runnable-track{background:var(--bg);border:2px solid var(--border);height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:2px solid var(--ink);width:12px;height:14px;box-shadow:2px 2px 0 var(--hard);margin-top:-6px}input[type=range]:hover::-webkit-slider-thumb{background:var(--pink)}.tog span{text-align:center;border:2px solid var(--border);min-width:20px;color:var(--dim);cursor:pointer;-webkit-user-select:none;user-select:none;padding:2px 3px;font-family:Silkscreen,monospace;font-size:9px;line-height:1;display:inline-block}.tog span:hover{border-color:var(--border-hi);color:var(--text)}.tog input:checked+span{background:var(--accent);border-color:var(--ink);color:var(--ink);box-shadow:2px 2px 0 var(--hard);font-weight:700}.seg{display:inline-flex}.seg button{background:var(--bg);border:2px solid var(--border);color:var(--dim);cursor:pointer;min-width:22px;padding:2px 4px;font-family:Silkscreen,monospace;font-size:9px;line-height:1}.seg button+button{border-left:none}.seg button.on{background:var(--accent);color:var(--ink);border-color:var(--ink);font-weight:700}.seg button:hover:not(.on){color:var(--text);border-color:var(--border-hi)}button.ease{background:var(--bg);border:2px solid var(--border);width:18px;color:var(--dim);cursor:pointer;font:inherit;text-align:center;flex-shrink:0;padding:1px 0;font-size:12px;line-height:1.1}button.ease:hover{color:var(--accent);border-color:var(--border-hi)}button.ease[data-v=linear]{color:var(--cyan)}button.ease[data-v=bezier]{color:var(--pink)}button.icon{color:var(--dim);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:15px;line-height:1}button.icon:hover{color:var(--pink)}.lyric-lines{flex-direction:column;gap:3px;display:flex}.lyric-head,.lyric-line{grid-template-columns:20px minmax(0,1fr) 46px auto 22px;align-items:center;gap:4px;display:grid}.lyric-head span{color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-family:Silkscreen,monospace;font-size:8px}.lyric-line input[type=text]{width:100%}.lyric-line .grab{cursor:grab;color:var(--dim);-webkit-user-select:none;user-select:none;padding:0 2px;font-size:13px}.lyric-line.dragging{opacity:.5}.curve-editor{flex-direction:column;gap:5px;display:flex}.curve-head{flex-wrap:wrap;align-items:center;gap:5px;display:flex}canvas.curve-canvas{background:var(--bg);border:2px solid var(--border);cursor:crosshair;touch-action:none;width:100%;height:120px}.curve-max-btn{background:var(--bg);border:2px solid var(--border);color:var(--dim);cursor:pointer;font:inherit;margin-left:auto;padding:2px 6px;font-size:13px;line-height:1}.curve-max-btn:hover{color:var(--accent);border-color:var(--border-hi)}#clip-panel{position:relative}#clip-panel.curve-maxed{overflow:hidden}.curve-overlay{z-index:5;background:var(--bg);flex-direction:column;padding:12px 14px;display:flex;position:absolute;inset:0}.curve-overlay .curve-editor{flex:1;min-height:0}.curve-editor.maximized canvas.curve-canvas{flex:1;height:auto;min-height:120px}.curve-foot{color:var(--dim);align-items:center;gap:8px;min-height:16px;font-size:13px;display:flex}dialog{background:var(--raise);color:var(--text);border:2px solid var(--border-hi);box-shadow:8px 8px 0 var(--hard);min-width:380px;max-width:460px;max-height:86vh;padding:0}dialog::backdrop{background:#05050899}.dlg-title{letter-spacing:1px;text-transform:uppercase;color:var(--accent);border-bottom:2px solid var(--border);justify-content:space-between;align-items:center;padding:10px 12px;font-family:Silkscreen,monospace;font-size:11px;display:flex}.dlg-title button{border:2px solid var(--border);color:var(--dim);cursor:pointer;background:0 0;padding:2px 6px;font-size:13px;line-height:1}.dlg-title button:hover{color:var(--pink);border-color:var(--border-hi)}.dlg-body{flex-direction:column;gap:12px;max-height:calc(86vh - 46px);padding:12px;display:flex;overflow-y:auto}.field{flex-direction:column;flex:1;gap:4px;display:flex}.field-row{gap:10px;display:flex}.cp-group .btn-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.cp-group .btn-row .hint{margin:0 auto 0 0}.cp-group .cloud-list select{flex:1;min-width:0}.cp-group .field-line input[type=email],.cp-group .field-line input[type=password]{background:var(--bg);border:2px solid var(--border);color:var(--text);font:inherit;border-radius:0;flex:1;min-width:0;padding:1px 4px;font-size:15px}.cp-group .field-line input[type=email]:focus,.cp-group .field-line input[type=password]:focus{border-color:var(--accent);outline:none}.cp-group .dropzone{margin:0}.cp-group .ro-value{color:var(--text);font-size:15px}.field label{color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-family:Silkscreen,monospace;font-size:9px}.field input,.field select{background:var(--bg);border:2px solid var(--border);color:var(--text);font:inherit;border-radius:0;width:100%;padding:4px 8px;font-size:17px}.field input:hover,.field select:hover{border-color:var(--border-hi)}.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:2px 2px 0 var(--hard);outline:none}.field input::placeholder{color:var(--dim);opacity:.6}.check-label{cursor:pointer;align-items:center;gap:8px;text-transform:none!important;letter-spacing:0!important;color:var(--text)!important;flex-direction:row!important;font-family:VT323,monospace!important;font-size:15px!important;display:flex!important}.check-label input[type=checkbox]{width:auto;accent-color:var(--accent);margin:0}.hint{color:var(--dim);margin:-4px 0 0;font-size:14px}.ro-value{border:2px solid var(--border);background:var(--panel);color:var(--dim);padding:4px 8px;font-size:16px;display:block}.btn-row{gap:6px;margin-top:2px;display:flex}.btn-row .ghost{flex:1;margin:0;padding:4px 2px}.dropzone{border:2px dashed var(--border-hi);text-align:center;color:var(--dim);cursor:pointer;background:repeating-conic-gradient(from 0deg, transparent 0 25%, #ffd23f08 0 50%) 0 0 / 8px 8px;padding:16px 12px;font-size:16px;transition:border-color .1s,color .1s;display:block}.dropzone:hover,.dropzone.dragover{border-color:var(--accent);color:var(--text);box-shadow:3px 3px 0 var(--hard)}.dropzone em{opacity:.65;font-style:normal}.dropzone strong{color:var(--accent)}#toast{background:var(--accent);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--hard);letter-spacing:1px;opacity:0;pointer-events:none;z-index:50;padding:7px 14px;font-family:Silkscreen,monospace;font-size:11px;transition:opacity .12s steps(3,end),transform .12s steps(3,end);position:fixed;bottom:26px;left:50%;transform:translate(-50%,16px)}#toast.show{opacity:1;transform:translate(-50%)}
