:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#0a0a0f}.odio{color:#f2f2f7;background:#0a0a0f;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.4}*{box-sizing:border-box}body{margin:0}.odio.app{grid-template-columns:320px 1fr;height:100%;min-height:0;display:grid}html,body,#root{height:100%}.odio .panel{border-right:1px solid #1d1d28;flex-direction:column;gap:12px;padding:24px 20px;display:flex;overflow-y:auto}.odio .panel h1{letter-spacing:-.02em;margin:0;font-size:26px}.odio .panel h1 .ai{background:linear-gradient(135deg,#ff2d95,#7b2dff);color:#0000;-webkit-background-clip:text;background-clip:text}.odio .panel section{border-top:1px solid #1d1d28;flex-direction:column;gap:8px;padding:12px 0 14px;display:flex}.odio .panel section h2{letter-spacing:.12em;text-transform:uppercase;color:#8a8aa8;margin:0 0 2px;font-size:11px;font-weight:700}.odio .tag{color:#9a9ab0;margin:-6px 0 4px;font-size:13px}.odio .file{cursor:pointer;color:#c9c9d9;border:1px dashed #3a3a4d;border-radius:10px;padding:10px 12px;font-size:13px;display:block}.odio .file:hover{border-color:#7b2dff}.odio .file input{display:none}.odio input[type=text],.odio input:not([type]){color:#fff;background:#14141c;border:1px solid #26263a;border-radius:8px;padding:9px 10px;font-size:14px}.odio .row{flex-wrap:wrap;gap:6px;display:flex}.odio .row button{color:#ddd;cursor:pointer;background:#14141c;border:1px solid #26263a;border-radius:8px;flex:1 0 auto;padding:7px 8px;font-size:13px}.odio .row button.on{color:#fff;background:#1f1424;border-color:#ff2d95}.odio .row button.swatch{border-radius:50%;flex:0 0 34px;height:34px;padding:0}.odio .row button.swatch.on{outline-offset:2px;outline:2px solid #fff}.odio .row.actions button{padding:11px;font-weight:600}.odio .cards{grid-template-columns:1fr 1fr;gap:8px;display:grid}.odio .card{cursor:pointer;color:#c9c9d9;text-align:left;font:inherit;background:#14141c;border:1px solid #26263a;border-radius:12px;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:12px;display:flex}.odio .card:hover{background:#181824;border-color:#7b2dff}.odio .card.on:hover{border-color:#fff}.odio .card.on{color:#fff;background:#1f1424;border-color:#ff2d95}.odio .card input{display:none}.odio .card.dim{opacity:.45}.odio .card .ic{color:#ff2d95;margin-bottom:4px;font-size:20px;line-height:1}.odio .card b{font-size:13px}.odio .card small{color:#8a8aa8;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:11px;overflow:hidden}.odio .card.on small{color:#d9b8e6}.odio .live{color:#c9c9d9;cursor:pointer;text-align:left;background:#14141c;border:1px dashed #3a3a4d;border-radius:10px;padding:10px 12px;font-size:13px}.odio .live:hover{border-color:#2dfcff}.odio .live.on{color:#fff;background:#1f1424;border-style:solid;border-color:#ff2d95}.odio .row.actions .primary{color:#fff;background:linear-gradient(135deg,#ff2d95,#7b2dff);border:none}.odio button:disabled{opacity:.4;cursor:default}.odio .check{color:#c9c9d9;align-items:center;gap:8px;font-size:13px;display:flex}.odio .bar{background:#1d1d28;border-radius:2px;height:4px;overflow:hidden}.odio .bar div{background:linear-gradient(90deg,#ff2d95,#2dfcff);height:100%;transition:width .2s linear}.odio .hint{color:#6f6f88;margin:0;font-size:12px}.odio .gh{color:#6f6f88;margin-top:auto;font-size:12px;text-decoration:none}.odio .stage{background:radial-gradient(at top,#12121c,#08080c);flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:0;padding:24px;display:flex}.odio .stageWrap{justify-content:center;max-width:100%;min-height:0;display:flex;position:relative}.odio .stageWrap>canvas{cursor:pointer;border-radius:16px;max-width:100%;min-height:0;max-height:calc(100vh - 158px);box-shadow:0 30px 80px #0009}@media (width<=800px){.odio.app{grid-template-rows:auto 1fr;grid-template-columns:1fr;height:auto}.odio .panel{border-bottom:1px solid #1d1d28;border-right:none}}.odio .transport{background:#101018;border:1px solid #1d1d28;border-radius:14px;grid-template-columns:auto 1fr auto 150px;align-items:center;gap:12px;width:min(100%,960px);padding:10px 12px;display:grid}.odio .transport.off{opacity:.45}.odio .tControls{align-items:center;gap:6px;display:flex}.odio .tControls button{color:#ddd;cursor:pointer;background:#14141c;border:1px solid #26263a;border-radius:8px;padding:6px 8px;font-size:12px}.odio .tControls button.play{color:#fff;background:linear-gradient(135deg,#ff2d95,#7b2dff);border:none;border-radius:50%;width:40px;height:40px;font-size:14px}.odio .tTime{color:#8a8aa8;font-variant-numeric:tabular-nums;text-align:center;min-width:110px;font-size:15px}.odio .tTime b{color:#fff;font-weight:700}.odio .tTime .sep{opacity:.5;margin:0 5px}.odio .tLeft{color:#8a8aa8;font-variant-numeric:tabular-nums;font-size:12px}.odio .tWave{cursor:pointer;touch-action:none;width:100%;height:64px;display:block}.odio .tMeter{width:150px;height:64px;display:block}@media (width<=800px){.odio .transport{grid-template-columns:1fr 1fr}.odio .tWave{grid-column:1/-1}.odio .tMeter{width:100%}}.odio .row button.swatch.custom{color:#fff;text-shadow:0 1px 2px #0009;font-size:14px}.odio .palEdit{background:#101018;border:1px solid #1d1d28;border-radius:10px;flex-direction:column;gap:6px;padding:8px 10px;display:flex}.odio .palRow{color:#8a8aa8;align-items:center;gap:6px;font-size:12px;display:flex}.odio .palRow span{min-width:44px}.odio .palRow input[type=color]{cursor:pointer;background:0 0;border:1px solid #26263a;border-radius:6px;width:30px;height:26px;padding:0}.odio .slider{color:#8a8aa8;align-items:center;gap:8px;font-size:12px;display:flex}.odio .slider input[type=range]{accent-color:#ff2d95;flex:1}.odio .slider .x{color:#8a8aa8;cursor:pointer;background:0 0;border:1px solid #26263a;border-radius:6px;width:24px;height:24px}.odio .tiles{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.odio .tile{color:#b9b9cc;cursor:pointer;font:inherit;background:#14141c;border:1px solid #26263a;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;font-size:11px;display:flex}.odio .tile svg{width:100%;height:26px}.odio .tile:hover{color:#fff;border-color:#7b2dff}.odio .tile.on{color:#fff;background:#1f1424;border-color:#ff2d95;box-shadow:inset 0 0 0 1px #ff2d95}.odio .tile.on svg{color:#ff2d95}.odio .tControls button.play.stop{background:#ff2d95}.odio .liveDot{color:#ff2d95;font-weight:700;animation:1.2s infinite blink}@keyframes blink{50%{opacity:.35}}.odio .gen{gap:6px;display:flex}.odio .gen input{flex:1;min-width:0}.odio .gen .primary{color:#fff;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#ff2d95,#7b2dff);border:none;border-radius:8px;padding:0 12px;font-size:13px;font-weight:600}.odio .row.fx{gap:14px;margin-top:2px}.odio .liveBtn{z-index:2;color:#ddd;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0a0fa6;border:1px solid #ffffff26;border-radius:999px;align-items:center;gap:6px;padding:6px 12px 6px 9px;font-size:12px;font-weight:600;display:flex;position:absolute;top:12px;right:12px}.odio .liveBtn .dot{background:#8a8aa8;border-radius:50%;width:8px;height:8px}.odio .liveBtn:hover{color:#fff;border-color:#ff2d95}.odio .liveBtn.on{color:#fff;background:#ff2d9540;border-color:#ff2d95}.odio .liveBtn.on .dot{background:#ff2d95;animation:1.2s infinite blink}.odio .cards.one{grid-template-columns:1fr}.odio .export{border-radius:10px;width:100%;padding:12px;font-size:14px;font-weight:700}