@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;--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}#app{min-height:100vh;display:flex}::-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)}#panel{background:var(--panel);border-right:2px solid var(--border);flex-direction:column;flex-shrink:0;gap:13px;width:320px;height:100vh;padding:20px 18px;display:flex;overflow-y:auto}.panel-top{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}#pin-btn{border:2px solid var(--border);color:var(--dim);cursor:pointer;background:0 0;padding:3px 6px;font-size:13px;line-height:1}#pin-btn:hover{color:var(--accent);border-color:var(--border-hi)}#pin-btn.on{background:var(--accent);color:var(--ink);border-color:var(--ink)}#panel-resize{cursor:col-resize;background:var(--border);flex-shrink:0;width:6px}#panel-resize:hover,#panel-resize.dragging{background:var(--accent)}#app.autohide #panel{z-index:20;transition:transform .15s steps(4,end);position:fixed;top:0;bottom:0;left:0;transform:translate(calc(8px - 100%));box-shadow:6px 0 #05050880}#app.autohide #panel:hover,#app.autohide #panel:focus-within{transform:translate(0)}#app.autohide #panel-resize{display:none}#panel 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:26px;font-weight:700}.tagline{color:var(--dim);letter-spacing:1px;margin:-10px 0 2px;font-size:15px}.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)}.field{flex-direction:column;flex:1;gap:4px;display:flex}.btn-row{gap:6px;margin-top:2px;display:flex}.btn-row .ghost{flex:1;margin:0;padding:4px 2px}.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}.field-row{gap:10px;display:flex}.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}.hint{color:var(--dim);margin:-4px 0 0;font-size:14px}#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%)}.ro-value{border:2px solid var(--border);background:var(--panel);color:var(--dim);padding:4px 8px;font-size:16px;display:block}.field .legend{text-transform:none;letter-spacing:0;opacity:.7}input[type=range]{appearance:none;cursor:ew-resize;background:0 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)}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}#main{flex-direction:column;flex:1;min-width:0;height:100vh;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}#transport-bar{border-top:2px solid var(--border);background:var(--panel);flex-direction:column;flex-shrink:0;align-items:center;gap:5px;padding:6px 14px 7px;display:flex}#transport-bar input[type=range]{width:100%}#transport-bar button{background:var(--raise);border:2px solid var(--border-hi);color:var(--accent);cursor:pointer;width:52px;height:30px;box-shadow:3px 3px 0 var(--hard);font-size:14px}#transport-bar button:hover:not(:disabled){border-color:var(--accent)}#transport-bar button:active:not(:disabled){box-shadow:1px 1px 0 var(--hard);transform:translate(2px,2px)}#transport-bar button:disabled{opacity:.4;cursor:default}#bars-strip{border-top:2px solid var(--border);background:var(--panel);flex-direction:column;flex-shrink:0;gap:6px;padding:8px 12px 12px;display:flex}.bar-legend{color:var(--dim);letter-spacing:.5px;margin:0;font-size:13px}#bars-scroll{align-items:flex-start;gap:10px;padding:2px 2px 6px;display:flex;overflow-x:auto}#bars-list{gap:10px;display:flex}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)}#bars-scroll .ghost{flex-shrink:0;align-self:stretch;width:auto;min-width:96px;margin:0}.bar-card{border:2px solid var(--border);background:var(--raise);width:240px;box-shadow:4px 4px 0 var(--hard);border-radius:0;flex-direction:column;flex-shrink:0;gap:5px;margin:0;padding:8px;display:flex}.bar-card.dragging{opacity:.5}.bar-card.active{border-color:var(--accent);box-shadow:4px 4px 0 var(--accent-dark)}.bar-card.selected{border-color:var(--cyan);box-shadow:4px 4px #4ff5d259}.bar-card.active .bar-num{background:var(--accent);color:var(--ink)}.bar-head{align-items:center;gap:6px;display:flex}.bar-card .fold{color:var(--dim);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:12px;line-height:1}.bar-card .fold:hover{color:var(--accent)}.bar-card .loop{color:var(--dim);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:13px;line-height:1}.bar-card .loop:hover{color:var(--accent)}.bar-card .loop.on{color:var(--ink);background:var(--accent)}.collapse-label{display:none}.bar-card.collapsed{cursor:pointer;width:42px;min-height:150px}.bar-card.collapsed>:not(.bar-head){display:none}.bar-card.collapsed .bar-head{flex-direction:column;align-items:center;gap:8px;height:100%}.bar-card.collapsed .bar-scene,.bar-card.collapsed .dup,.bar-card.collapsed .loop,.bar-card.collapsed .del{display:none}.bar-card.collapsed .collapse-label{writing-mode:vertical-rl;color:var(--dim);max-height:190px;font-size:14px;display:block;overflow:hidden}.bar-num{min-width:18px;color:var(--accent);border:1px solid var(--border-hi);text-align:center;cursor:grab;-webkit-user-select:none;user-select:none;flex-shrink:0;padding:2px 3px;font-family:Silkscreen,monospace;font-size:10px;font-weight:700}.bar-card select,.bar-card input[type=number]{background:var(--bg);border:2px solid var(--border);color:var(--text);font:inherit;border-radius:0;font-size:15px}.bar-card select:focus,.bar-card input[type=number]:focus{border-color:var(--accent);outline:none}.bar-card select.bar-scene{flex:1;width:auto;min-width:0;padding:2px 4px}.bar-card select.bar-palette{flex:1;width:auto;min-width:0;padding:1px 4px;font-size:14px}.card-body{flex-direction:column;gap:3px;min-height:0;max-height:300px;padding-right:3px;display:flex;overflow-y:auto}.sec-label{color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:4px;font-family:Silkscreen,monospace;font-size:8px}.field-line{align-items:center;gap:5px;display:flex}.sec-toggle{color:var(--dim);text-transform:uppercase;letter-spacing:1px;border:none;border-top:2px solid var(--border);cursor:pointer;text-align:left;background:0 0;margin-top:5px;padding:5px 0 2px;font-family:Silkscreen,monospace;font-size:8px}.sec-toggle:hover{color:var(--accent)}.anims{flex-direction:column;gap:3px;display:flex}.anims.closed{display:none}.texts{flex-direction:column;gap:3px;display:flex}.texts.closed{display:none}.text-grid{flex-direction:column;gap:3px;display:flex}.beat-text{background:var(--bg);border:2px solid var(--border);color:var(--text);font:inherit;width:100%;min-width:0;padding:1px 4px;font-size:14px}.beat-text:focus{border-color:var(--accent);outline:none}.anim-group{flex-direction:column;gap:2px;display:flex}.anim-group .sec-label{margin-top:2px}.scale-grid{flex-direction:column;gap:3px;display:flex}.scale-grid-row{align-items:center;gap:3px;display:flex}.scale-grid-row .scale-in{flex:1}.scale-in{width:100%;min-width:0;padding:1px 3px}.len-in{width:40px;padding:1px 3px}.ovl-name{flex-shrink:0;width:52px}.ovl-item{flex-direction:column;gap:2px;margin-bottom:3px;display:flex}.mini-xy{color:var(--dim);flex-shrink:0;font-size:12px}.ovl-item input[type=range]{flex:1;min-width:0}.len-unit{color:var(--dim);font-size:13px}.anim-row{align-items:center;gap:6px;display:flex}.tog span{text-align:center;border:2px solid var(--border);width:20px;color:var(--dim);cursor:pointer;-webkit-user-select:none;user-select:none;padding:2px 0;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}.anim-int{flex:1;min-width:0}.anim-row .tog input:not(:checked)~span{opacity:.8}.bar-card 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}.bar-card button.ease:hover{color:var(--accent);border-color:var(--border-hi)}.bar-card button.ease[data-v=linear]{color:var(--cyan)}.bar-card button.ease[data-v=bezier]{color:var(--pink)}.bar-card select.anim-rate{flex-shrink:0;width:58px;padding:1px 2px;font-size:14px}.move-row{gap:4px;margin-top:2px;display:flex}.move-row button{background:var(--bg);border:2px solid var(--border);color:var(--dim);font:inherit;cursor:pointer;flex:1;padding:1px 0;font-size:14px;line-height:1.1}.move-row button:hover{color:var(--accent);border-color:var(--border-hi)}.move-row button:active{transform:translate(1px,1px)}.bar-card .del,.bar-card .dup{color:var(--dim);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:15px;line-height:1}.bar-card .dup:hover{color:var(--cyan)}.bar-card .del:hover{color:var(--pink)}