html,body,#root{height:100%;margin:0}body{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#0a0e14}:root{--bg:#0a0e14;--panel:#11161f;--grid:#0d1219;--ink:#c8d3e0;--dim:#5a6b80;--neon:#2af5c8;--neon2:#ff3b8b;--beat:#161d28;--play:#14322b}*{box-sizing:border-box}.app{background:radial-gradient(120% 80% at 50% -10%, #16202e 0%, var(--bg) 60%);min-height:100vh;color:var(--ink);outline:none;padding:18px;font:13px/1.4 ui-monospace,SF Mono,Menlo,monospace}.bar{background:var(--panel);border:1px solid #1d2735;border-radius:10px;flex-wrap:wrap;align-items:center;gap:14px;padding:12px 16px;display:flex;box-shadow:0 0 0 1px #000,0 8px 30px #0008}.bar h1{letter-spacing:1px;color:var(--ink);margin:0;font-size:18px}.bar h1 span{color:var(--neon);text-shadow:0 0 12px #2af5c870}.bar label{color:var(--dim);text-transform:uppercase;align-items:center;gap:6px;font-size:11px;display:flex}.bar input[type=number]{width:56px}input,select,button{font:inherit;color:var(--ink);background:var(--grid);border:1px solid #243246;border-radius:6px;padding:6px 8px}button{cursor:pointer;letter-spacing:.5px;font-weight:700}button.play{color:var(--neon);border-color:#1f6e5c}button.stop{color:var(--neon2);border-color:#6e1f44}button:hover{filter:brightness(1.25)}.file{cursor:pointer;color:var(--neon)}.file input{display:none}.spacer{flex:1}.tabs{gap:6px;margin-top:12px;display:flex}.tabs .tab{background:var(--panel);color:var(--dim);letter-spacing:1px;border:1px solid #1d2735;padding:8px 16px;font-weight:700}.tabs .tab:hover{color:var(--ink)}.tabs .tab.on{color:#0a0e14;background:var(--neon);border-color:var(--neon);box-shadow:0 0 14px #2af5c855}.tabs+.fxbar{margin-top:8px}.fxbar{background:var(--panel);border:1px solid #1d2735;border-radius:10px;flex-wrap:wrap;align-items:center;gap:18px;margin-top:10px;padding:10px 16px;display:flex}.fxlabel{color:var(--neon);letter-spacing:2px;font-size:11px;font-weight:700}.fxbar .note{color:var(--dim);letter-spacing:1px;text-transform:uppercase;font-size:11px}.fxbar label{color:var(--dim);text-transform:uppercase;align-items:center;gap:8px;font-size:11px;display:flex}.fxbar input[type=range]{accent-color:var(--neon);width:130px}.fxbar.inst{gap:12px}.fxbar.inst input[type=range]{width:84px}.fxbar.inst select{padding:4px 6px}.fmedit{border:1px solid var(--neon);border-radius:8px;flex-wrap:wrap;align-items:center;gap:12px;padding:6px 10px;display:flex}.fmop{background:#0d141e;border-radius:6px;align-items:center;gap:8px;padding:4px 8px;display:flex}.fmop input[type=number]{width:56px}.fmedit input[type=range]{width:70px}.rec.on{color:#ff5470;border-color:#ff5470;animation:1s ease-in-out infinite rec-pulse}@keyframes rec-pulse{50%{box-shadow:0 0 12px #ff547080}}.touchtoggle.on{color:var(--neon);border-color:var(--neon)}.app.touch .cell .sub{font-size:calc(15px * var(--rowzoom,1));padding:6px 4px}.app.touch .row{line-height:calc(1.8 * var(--rowzoom,1))}.app.touch .bar button,.app.touch .fxbar button{padding:8px 12px}.app.touch .chip,.app.touch .tab{padding:9px 12px}.cell.preview{background:#ffd86622;border-radius:3px;animation:1.1s ease-in-out infinite preview-pulse;box-shadow:inset 0 0 0 1px #ffd86680}@keyframes preview-pulse{50%{background:#ffd86640}}.fxlabel.preview{color:#ffd866}.cell.sel{background:#6ea8ff26;box-shadow:inset 0 0 0 1px #6ea8ff66}.ai button.apply{color:#0a0e14;background:var(--neon);border-color:var(--neon)}.wave{background:#0b1118;border:1px solid #1d2735;border-radius:6px;flex-basis:100%;width:100%;height:64px}.wave line{stroke:var(--neon);stroke-width:1px;vector-effect:non-scaling-stroke}.wave rect.keep{fill:#2af5c81f}.wave rect.loop{fill:#ffa83320}.wave line.loopmark{stroke:#ffa833;stroke-width:2px;vector-effect:non-scaling-stroke}.mix .strips{flex:1;gap:8px;padding:2px 0 6px;display:flex;overflow-x:auto}.strip{background:var(--grid);width:56px;box-shadow:inset 3px 0 0 -1px var(--track);border:1px solid #1d2735;border-radius:8px;flex-direction:column;flex:none;align-items:center;gap:7px;padding:8px 4px;display:flex}.strip.muted{opacity:.4}.strip.solo{box-shadow:inset 3px 0 0 -1px var(--neon), 0 0 0 1px #2af5c860}.strip.master{box-shadow:inset 3px 0 0 -1px var(--neon)}.strip.master .sname{color:var(--neon)}.strip .sname{letter-spacing:1px;font-size:11px;font-weight:700}.strip .meterwrap{align-items:flex-end;gap:4px;height:74px;display:flex}.strip .meter{background:#0d1219;border:1px solid #1d2735;border-radius:3px;align-items:flex-end;width:6px;height:74px;display:flex;position:relative;overflow:hidden}.strip .peakline{opacity:.65;background:#fff;height:2px;position:absolute;left:0;right:0}.strip .clip{background:var(--neon2);height:5px;box-shadow:0 0 6px var(--neon2);z-index:1;position:absolute;top:0;left:0;right:0}.strip .meterfill{background:linear-gradient(to top, var(--neon) 0%, #ffd23f 70%, var(--neon2) 100%);width:100%;transition:height 60ms linear}.mix .strip .fader{writing-mode:vertical-lr;width:20px;height:74px;accent-color:var(--neon);direction:rtl}.mix .strip .pan{appearance:none;cursor:pointer;background:0 0;width:46px;height:14px}.mix .strip .pan::-webkit-slider-runnable-track{background:linear-gradient(90deg, #2a3850 0 calc(50% - 1px), var(--dim) calc(50% - 1px) calc(50% + 1px), #2a3850 calc(50% + 1px) 100%);border-radius:2px;height:4px}.mix .strip .pan::-moz-range-track{background:linear-gradient(90deg, #2a3850 0 calc(50% - 1px), var(--dim) calc(50% - 1px) calc(50% + 1px), #2a3850 calc(50% + 1px) 100%);border-radius:2px;height:4px}.mix .strip .pan::-moz-range-progress{background:0 0}.mix .strip .pan::-webkit-slider-thumb{-webkit-appearance:none;background:var(--neon2);width:6px;height:14px;box-shadow:0 0 6px var(--neon2);border-radius:2px;margin-top:-5px}.mix .strip .pan::-moz-range-thumb{background:var(--neon2);width:6px;height:14px;box-shadow:0 0 6px var(--neon2);border:none;border-radius:2px}.strip .panlbl{letter-spacing:0;width:46px;color:var(--dim);justify-content:space-between;margin-top:-2px;font-size:8px;display:flex}.strip .panlbl b{font-weight:700}.strip .panlbl b:nth-child(2){color:#46566b;font-weight:400}.strip .ms{gap:4px;display:flex}.strip .ms button{color:var(--dim);padding:2px 7px;font-size:10px;font-weight:700}.strip .ms .mbtn.on{color:#0a0e14;background:var(--neon2);border-color:var(--neon2)}.strip .ms .sbtn.on{color:#0a0e14;background:var(--neon);border-color:var(--neon)}.ai .aiprompt{flex:1;min-width:260px;padding:8px 10px}.ai .aierr{color:var(--neon2);font-size:12px}.arrange{gap:8px}.arrange .divider{background:#243246;align-self:stretch;width:1px;margin:0 6px}.arrange .chip{background:var(--grid);min-width:30px;color:var(--dim);border:1px solid #243246;padding:5px 7px;font-weight:700}.arrange .chip.on{color:#0a0e14;background:var(--neon);border-color:var(--neon)}.arrange .chip.playing{color:#0a0e14;background:var(--neon2);border-color:var(--neon2);box-shadow:0 0 12px #ff3b8b80}.arrange .chip.queued{border-color:var(--neon2);color:var(--neon2);animation:.6s ease-in-out infinite alternate chip-pulse}@keyframes chip-pulse{0%{box-shadow:0 0 #ff3b8b00}to{box-shadow:0 0 12px #ff3b8b80}}.arrange .slot{background:var(--grid);cursor:grab;border:1px solid #243246;border-radius:6px;align-items:center;gap:1px;padding:1px;display:inline-flex}.arrange .slot.playing{border-color:var(--neon2);box-shadow:0 0 10px #ff3b8b80}.arrange .slot select{color:var(--ink);cursor:pointer;background:0 0;border:none;padding:4px;font-weight:700}.arrange .slot .x{color:var(--dim);background:0 0;border:none;padding:2px 5px;font-weight:700}.arrange .slot .x:hover{color:var(--neon2)}.arrange .add:disabled{opacity:.35;cursor:not-allowed}.arrange .add{color:var(--neon);padding:5px 9px}.arrange .songbtn{color:var(--dim);margin-left:auto}.arrange .songbtn.on{color:var(--neon);text-shadow:0 0 10px #2af5c870;border-color:#1f6e5c}:root{--collapsed:58px;--rownum-w:42px}@media (width<=1100px){:root{--collapsed:52px}}.grid{background:var(--grid);overscroll-behavior:contain;border:1px solid #1d2735;border-radius:10px;max-height:calc(100vh - 230px);margin-top:16px;padding:8px 0;overflow:auto;box-shadow:inset 0 0 60px #0006}.row,.head{align-items:stretch;width:max-content;min-width:100%;display:flex}.head{color:var(--dim);z-index:3;background:var(--grid);border-bottom:1px solid #1d2735;margin-bottom:4px;padding-bottom:6px;position:sticky;top:0}.head .rownum{z-index:4}.rownum{width:var(--rownum-w);text-align:center;color:var(--dim);-webkit-user-select:none;user-select:none;background:var(--grid);z-index:2;flex:none;padding:4px 0;position:sticky;left:0}.chanhead{width:var(--collapsed);cursor:pointer;-webkit-user-select:none;user-select:none;flex:none;justify-content:center;align-items:center;gap:5px;font-size:11px;font-weight:700;display:flex;overflow:hidden}.chanhead.focus{letter-spacing:1px;width:168px}.chanhead i{border-radius:2px;flex:none;width:7px;height:7px;box-shadow:0 0 8px}.chanhead.muted{opacity:.3;text-decoration:line-through}.chanhead.muted i{box-shadow:none}.chanhead.solo i{box-shadow:0 0 12px,0 0 4px #fff}.cell{width:var(--collapsed);min-height:22px;box-shadow:inset 2px 0 0 -1px color-mix(in srgb, var(--track) 35%, transparent);white-space:pre;border-left:1px solid #131a24;flex:none;justify-content:center;gap:6px;padding:4px;display:flex}.cell.focus{background:#0f1622;width:168px}.cell:not(.focus) .sub.inst,.cell:not(.focus) .sub.vol,.cell:not(.focus) .sub.fx{display:none}.cell .sub{color:var(--dim);cursor:pointer;font-weight:400;font-size:calc(13px * var(--rowzoom,1));border-radius:3px;padding:0 2px}.row{line-height:calc(1.4 * var(--rowzoom,1))}.cell .sub.inst{color:#7c8aa0}.cell .sub:hover{background:#1a2433}.cell.filled .sub.note{color:var(--track);text-shadow:0 0 10px color-mix(in srgb, var(--track) 60%, transparent)}.cell .sub.cursor{background:var(--neon2);color:#0a0e14;text-shadow:none;font-weight:700;box-shadow:0 0 12px #ff3b8b80}.row.beat{background:var(--beat)}.row.beat .rownum{color:var(--neon)}.row.playing{background:var(--play);box-shadow:inset 0 0 0 1px #2af5c860}.row.playing .rownum{color:var(--neon);text-shadow:0 0 10px var(--neon)}.hint{color:var(--dim);margin-top:14px;font-size:12px}.hint b{color:var(--ink)}.hint em{color:var(--neon2);font-style:normal}