*{box-sizing:border-box}body{color:#f0f3f6;-webkit-user-select:none;user-select:none;background:#0f111a;min-height:100vh;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}button{font-family:inherit;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s cubic-bezier(.2,.8,.2,1),filter .15s cubic-bezier(.2,.8,.2,1),background-color .15s}button:hover{filter:brightness(1.15);transform:translateY(-1px)}button:active{filter:brightness(.95);transform:scale(.96)translateY(0)}.btn-playback{transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,filter .15s!important}.btn-playback:hover{filter:brightness(1.12)!important;transform:scale(1.04)translateY(-1px)!important}.btn-playback:active{transform:scale(.96)!important}.btn-toolbar{transition:transform .15s,background-color .15s,box-shadow .15s!important}.btn-toolbar:hover{transform:translateY(-1px)!important;box-shadow:0 3px 8px #0000004d!important}.btn-toolbar:active{transform:translateY(0)scale(.96)!important}.track-label-btn{transition:transform .15s,color .15s,filter .15s!important}.track-label-btn:hover{color:#fff!important;transform:translate(2px)!important}.track-label-btn:active{transform:scale(.97)!important}.btn-hold{transition:transform .12s,box-shadow .15s,background-color .15s,color .15s!important}.btn-hold:hover{transform:scale(1.04)!important;box-shadow:0 0 8px #ffffff26!important}.btn-hold:active{transform:scale(.94)!important}.pad-cell{cursor:pointer;border-radius:4px;height:36px;transition:filter 80ms,background-color 80ms}.pad-cell:hover{filter:brightness(1.3);transform:scale(1.05)}.pad-cell:active{transform:scale(.92)}.pad-cell.step-current{outline-offset:-1px;z-index:2;outline:1px solid #ffffffb8}.pad-cell.note-playing{outline:2px solid #fff;box-shadow:inset 0 0 0 2px #fff6,0 0 8px #fff8!important}.step-num{color:#78909c;font-size:11px;font-weight:600;transition:color 60ms,transform 60ms,text-shadow 60ms}.step-num.step-current{color:#00e5ff;text-shadow:0 0 10px #00e5ff;font-weight:800;transform:translateY(-1px)}.timeline-toolbar{color:#e8edf3;background:linear-gradient(135deg,#171c29,#111520);border:1px solid #242b3c;border-radius:9px 9px 4px 4px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;padding:10px 12px;display:flex}.timeline-toolbar>div:first-child{align-items:baseline;gap:9px;display:flex}.timeline-toolbar span{color:#78909c;font-size:11px}.timeline-toolbar-actions{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.timeline-toolbar-actions button,.timeline-toolbar-actions label{color:#cfd8dc;cursor:pointer;background:#222a3b;border:1px solid #344057;border-radius:5px;padding:5px 9px;font-size:11px}.timeline-toolbar-actions label{color:#80deea;align-items:center;gap:5px;display:flex}.sequencer-scroll{scrollbar-color:#00a8bb #171c29;scrollbar-width:thin;overscroll-behavior:contain;scroll-behavior:smooth;background:#131620;border:1px solid #242b3c;border-radius:4px 4px 10px 10px;max-height:min(68vh,760px);padding:16px;position:relative;overflow:auto}.sequencer-scroll::-webkit-scrollbar{width:12px;height:12px}.sequencer-scroll::-webkit-scrollbar-track{background:#171c29}.sequencer-scroll::-webkit-scrollbar-thumb{background:#00a8bb;border:3px solid #171c29;border-radius:999px}.sticky-track-controls,.sticky-hold-control{z-index:5;position:sticky}.sticky-track-controls{left:0;box-shadow:8px 0 12px -10px #000}.sticky-hold-control{left:274px;box-shadow:8px 0 12px -10px #000}.step-ruler{z-index:4;background:linear-gradient(#131620dd,#131620 35%);padding:7px 0 3px;position:sticky;bottom:0}.ruler-label{color:#607d8b;background:#131620;font-size:9px;font-weight:800;overflow:hidden}.step-num.bar-start{color:#00b8d4;font-weight:800}@media (max-width:760px){.timeline-toolbar{flex-direction:column;align-items:flex-start}.sequencer-scroll{max-height:72vh;padding:10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.view-switcher{gap:4px;margin:0 0 8px;display:flex}.view-switcher button{color:#8290a5;cursor:pointer;background:#171c29;border:1px solid #30394d;border-radius:7px 7px 3px 3px;padding:9px 14px;font-weight:750}.view-switcher button.active{color:#6eeeff;background:#15303a;border-color:#00c8df;box-shadow:inset 0 -2px #00c8df}.arrangement-workspace{background:#10131c;border:1px solid #293145;border-radius:6px 10px 10px;overflow:hidden}.arrangement-heading{background:linear-gradient(135deg,#1b2231,#121722);border-bottom:1px solid #293145;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.arrangement-heading>div{align-items:baseline;gap:10px;display:flex}.arrangement-heading span{color:#8290a5;font-size:11px}.arrangement-hint{color:#00b8cc!important}.arrangement-scroll{scrollbar-gutter:stable;scrollbar-color:#00a8bb #171c29;scroll-behavior:smooth;max-height:64vh;overflow:auto}.arrangement-canvas{background:repeating-linear-gradient(90deg,#0000 0 calc(6.25% - 12.25px),#30384a calc(6.25% - 11.25px));min-width:100%;padding-bottom:20px;position:relative}.arrangement-ruler{z-index:8;background:#171c28;min-height:30px;display:grid;position:sticky;top:0}.arrangement-ruler>div{color:#738096;border-right:1px solid #374156;padding:8px 7px;font-size:9px;font-weight:800}.arrangement-lane{border-top:1px solid #242b3b;grid-template-columns:180px 1fr;min-height:58px;display:grid}.lane-label{z-index:6;color:#dbe2e9;background:#1a2030;border-left:4px solid #0000;border-right:1px solid #364055;justify-content:space-between;align-items:center;gap:5px;min-width:0;padding:8px 9px;font-size:11px;font-weight:700;display:flex;position:sticky;left:0}.lane-label span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.lane-label button{color:#00d9ef;cursor:pointer;background:#252e40;border:1px solid #3b475d;border-radius:4px;flex:none;place-items:center;width:25px;height:25px;padding:0;display:grid}.lane-content{touch-action:pan-y;background:repeating-linear-gradient(90deg,#151a26 0 calc(6.25% - 1px),#31394b 6.25%);position:relative;overflow:hidden}.instrument-clip{color:#081015;cursor:pointer;text-align:left;opacity:.88;border:1px solid #ffffff45;border-radius:5px;flex-direction:column;justify-content:center;align-items:flex-start;min-width:20px;padding:4px 7px;display:flex;position:absolute;top:7px;bottom:7px;overflow:hidden}.instrument-clip:hover,.instrument-clip.selected{filter:brightness(1.15);opacity:1;transform:none}.instrument-clip.selected{outline-offset:1px;outline:2px solid #fff}.instrument-clip strong,.instrument-clip small{white-space:nowrap;text-overflow:ellipsis;width:100%;overflow:hidden}.instrument-clip strong{font-size:10px}.instrument-clip small{opacity:.72;font-size:8px}.instrument-clip .clip-resize{cursor:col-resize;touch-action:none;opacity:.55;background:linear-gradient(90deg,#0000,#00000073);border-radius:0 4px 4px 0;width:11px;display:block;position:absolute;top:0;bottom:0;right:0}.instrument-clip .clip-resize:hover,.instrument-clip .clip-resize:active{opacity:1;background:#00e5ff8c;box-shadow:inset 0 0 0 1px #00e5ff}.lane-add{color:#75849b;cursor:pointer;background:#161c29cc;border:1px dashed #465268;border-radius:4px;align-items:center;gap:3px;padding:4px 6px;font-size:9px;display:flex;position:absolute;top:16px;right:8px}.lane-sustain{z-index:3;pointer-events:none;background:linear-gradient(#0000 0%,#0b111ccc 40%,#0b111c 100%);border-top:1px dashed #33405a;height:10px;position:absolute;bottom:0;left:0;right:0}.lane-sustain:before{content:"PEDAL";letter-spacing:1px;color:#4f6787;pointer-events:none;font-size:7px;font-weight:800;position:absolute;top:1px;left:5px}.sustain-region{cursor:grab;pointer-events:auto;touch-action:none;background:#00d9efd9;border-radius:3px;min-width:5px;position:absolute;top:1px;bottom:1px;box-shadow:0 0 6px #00d9ef55}.sustain-region:active{cursor:grabbing}.sustain-region.endless{background:linear-gradient(90deg,#00d9ef 0%,#6ef4c5 92%);box-shadow:0 0 8px #6ef4c566}.sustain-region .sustain-edge{pointer-events:auto;touch-action:none;width:7px;position:absolute;top:-1px;bottom:-1px}.sustain-region .sustain-edge:hover{background:#fff5;border-radius:3px}.sustain-region .sustain-edge-start{cursor:col-resize;left:-3px}.sustain-region .sustain-edge-end{cursor:col-resize;right:-3px}.sustain-inf{color:#06282e;pointer-events:none;font-size:10px;font-weight:800;line-height:1;position:absolute;top:-4px;right:4px}.sustain-ghost{box-shadow:none;pointer-events:none;background:#00e5ff66;border:1px dashed #00e5ff}.arrangement-playhead{z-index:9;pointer-events:none;background:#fff;width:2px;position:absolute;top:30px;bottom:0;left:180px;box-shadow:0 0 8px #fff}.piano-roll-panel{background:#111621;border-top:1px solid #344057}.piano-roll-toolbar{color:#9ba8ba;background:#1b2230;align-items:center;gap:9px;padding:9px 12px;font-size:10px;display:flex}.piano-roll-toolbar>div{flex-direction:column;margin-right:auto;display:flex}.piano-roll-toolbar input,.piano-roll-toolbar select{color:#dce4eb;background:#111722;border:1px solid #3a465c;border-radius:4px;max-width:130px;padding:4px 6px}.piano-roll-toolbar label{align-items:center;gap:4px;display:flex}.piano-roll-toolbar button{color:#dce4eb;cursor:pointer;background:#283247;border:1px solid #3c485c;border-radius:4px;align-items:center;gap:4px;padding:5px 8px;display:flex}.piano-roll-toolbar button.danger{color:#ff8d8d}.piano-roll-scroll{scrollbar-color:#00a8bb #171c29;max-height:min(52vh,640px);overflow:auto}.piano-roll{width:max-content;min-width:100%;display:grid;position:relative}.piano-key{z-index:4;color:#19202a;background:#dce2e7;border-bottom:1px solid #333c4e;border-right:1px solid #4a556c;height:24px;padding:5px 7px;font-size:9px;font-weight:800;position:sticky;left:0}.piano-key.black{color:#d2d9e0;background:#252c39}.piano-cell{cursor:crosshair;background:#151b28;border:1px solid #242c3c;border-top:0;border-left:0;height:24px;padding:0;position:relative}.piano-cell.beat{border-left:1px solid #455168}.piano-cell:hover{z-index:2;background:#26354b;transform:none}.piano-cell.has-note>span.note-bar{z-index:3;pointer-events:auto;cursor:grab;touch-action:none;background:linear-gradient(90deg,#00c9df,#6ef4c5);border-radius:3px;min-width:24px;position:absolute;inset:3px auto 3px 1px;box-shadow:0 0 6px #00d9ef55}.note-bar:active{cursor:grabbing}.note-bar.selected{box-shadow:0 0 0 2px #fff,0 0 8px #00d9ef88}.note-bar.pedal{background:linear-gradient(90deg,#ffb300,#ffe082);box-shadow:0 0 6px #ffb30066}.note-bar .note-pedal{color:#3a2600;pointer-events:none;font-size:11px;font-weight:800;line-height:1;position:absolute;top:-1px;left:1px}.note-bar .note-resize{cursor:col-resize;touch-action:none;border-radius:0 3px 3px 0;width:8px;position:absolute;top:0;bottom:0;right:0}.note-bar .note-resize:hover,.note-bar .note-resize:active{background:#fff6}.note-marquee{z-index:6;pointer-events:none;background:#00d9ef29;border:1px solid #00d9ef;border-radius:2px;position:absolute}@media (max-width:760px){.arrangement-heading,.piano-roll-toolbar{flex-wrap:wrap;align-items:flex-start}.arrangement-hint{display:none}}.note-magic{box-shadow:0 0 calc(2px + var(--p,0) * 10px) var(--nc,#00e5ff), 0 0 calc(4px + var(--p,0) * 24px) var(--nc,#00e5ff);filter:brightness(calc(1 + var(--p,0) * .5))}.note-magic:after{content:"";background:radial-gradient(ellipse at 30% 20%, #fffc 0%, transparent 45%), radial-gradient(ellipse at 75% 80%, var(--nc,#00e5ff) 0%, transparent 55%);mix-blend-mode:screen;pointer-events:none;opacity:calc(.08 + var(--p,0) * .75);border-radius:6px;position:absolute;inset:-4px}input[type=range]{transition:opacity .2s,filter .2s}input[type=range]:hover{filter:brightness(1.2)}input[type=checkbox]{transition:transform .15s}input[type=checkbox]:hover{transform:scale(1.15)}select{font-family:inherit;transition:border-color .15s,background-color .15s}select:hover{border-color:#00e5ff88!important}select:focus{border-color:#00e5ff!important}