@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap";:root{color:#edf1f5;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;background:#101216;font-family:Nunito,system-ui,sans-serif;font-size:14px;font-weight:400}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:2px solid #bb8cff}::selection{color:#21172e;background:#bb8cff}#root{min-height:100vh}.app-shell{max-width:1440px;margin:auto;padding:22px 28px 16px}.topbar{border-bottom:1px solid #303741;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:8px 0 22px;display:flex}.brand{min-width:180px;color:inherit;align-items:center;gap:12px;text-decoration:none;display:flex}.brand-mark{color:#101719;background:#56d7d2;border-radius:10px;place-items:center;width:42px;height:42px;font-size:25px;font-weight:700;display:grid}.brand strong{letter-spacing:.18em;font-size:17px;display:block}.brand small{color:#89929e;letter-spacing:.12em;margin-top:3px;font:10px DM Mono,monospace;display:block}.transport{align-items:center;gap:10px;display:flex}.transport-btn{background:#20252d;border:1px solid #303741;border-radius:8px;width:42px;height:40px;font-size:16px}.transport-btn.play{color:#7fe0a4}.transport-btn.stop{color:#ff5d66}.tempo-box{background:#191d23;border:1px solid #303741;border-radius:8px;align-items:center;gap:7px;height:42px;padding:0 10px;display:flex}.tempo-box span{color:#89929e;font:10px DM Mono,monospace}.tempo-box input{color:#edf1f5;background:0 0;border:0;outline:none;width:48px;font:600 17px DM Mono,monospace}.meter{color:#89929e;white-space:nowrap;align-items:center;gap:8px;font:10px DM Mono,monospace;display:flex}.led{background:#5a626c;border-radius:50%;width:7px;height:7px}.led.on{background:#7fe0a4;box-shadow:0 0 10px #7fe0a4}.top-actions{align-items:center;gap:8px;display:flex}.primary,.subtle,.small-btn{letter-spacing:.08em;border:1px solid #303741;border-radius:7px;padding:10px 13px;font:500 10px DM Mono,monospace}.primary{color:#101719;background:#56d7d2;border-color:#56d7d2;font-weight:700}.subtle,.small-btn{color:#aab2bc;background:#191d23}.subtle:hover,.small-btn:hover{color:#edf1f5;border-color:#68727e}.file-label{cursor:pointer}.file-label input{display:none}main{gap:16px;padding-top:18px;display:grid}.panel{background:linear-gradient(145deg,#1b2027,#171b21);border:1px solid #303741;border-radius:12px;padding:18px}.panel-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;display:flex}.panel-head h2{letter-spacing:.12em;color:#c7d0da;margin:0;font:500 11px DM Mono,monospace}.hint,.micro-note{color:#89929e;font:10px DM Mono,monospace}.routing-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.route-card{background:#20252d;border:1px solid #343c47;border-radius:9px;gap:11px;padding:14px;display:grid}.route-title{align-items:center;gap:9px;display:flex}.route-title strong{letter-spacing:.08em;font:600 11px DM Mono,monospace}.track-dot{border-radius:50%;width:8px;height:8px}.track-dot.sampler{background:#ff9b54;box-shadow:0 0 9px #ff9b5488}.tag{color:#89929e;border:1px solid #303741;border-radius:4px;margin-left:auto;padding:4px 6px;font:9px DM Mono,monospace}.route-card label,.editor-controls label{color:#89929e;letter-spacing:.06em;gap:6px;font:9px DM Mono,monospace;display:grid}.route-card select,.route-card input:not([type=checkbox]),.song-toolbar input,.song-toolbar select,.editor-controls input:not([type=range]){color:#edf1f5;background:#12161b;border:1px solid #39424d;border-radius:6px;outline:none;width:100%;padding:9px}.inline-fields{grid-template-columns:1fr 1fr;gap:10px;display:grid}.check{align-items:center;gap:8px!important;display:flex!important}.check input{accent-color:#56d7d2}.route-options{flex-wrap:wrap;gap:22px;display:flex}.micro-note{margin:12px 0 0;line-height:1.5}.panel-tools{gap:7px;display:flex}.length-select{color:#89929e;letter-spacing:.08em;align-items:center;gap:7px;font:9px DM Mono,monospace;display:flex}.length-select select{color:#edf1f5;background:#12161b;border:1px solid #39424d;border-radius:6px;padding:7px}.small-btn{padding:7px 10px}.track-tabs,.editor-tabs{border-bottom:1px solid #303741;gap:6px;margin-bottom:15px;display:flex}.track-tab,.editor-tab{color:#89929e;letter-spacing:.08em;background:0 0;border:0;border-bottom:2px solid #0000;padding:10px 14px;font:10px DM Mono,monospace}.sequence-area{gap:8px;padding:3px;display:grid;overflow-x:auto}.step-ruler,.track-lane,.playhead-row{grid-template-columns:100px 1fr;align-items:center;gap:10px;display:grid}.step-ruler>span,.playhead-row>span{color:#89929e;font:9px DM Mono,monospace}.step-numbers,.step-grid,.playhead-grid{grid-template-columns:repeat(var(--step-count,16),minmax(34px,1fr));min-width:calc(var(--step-count,16)*39px);gap:5px;display:grid}.step-numbers span{text-align:center;color:#89929e;font:9px DM Mono,monospace}.lane-label{color:#56d7d2;flex-direction:column;gap:4px;font:10px DM Mono,monospace;display:flex}.lane-label small{color:#89929e;font-size:8px}.step{color:#edf1f5;background:#11151a;border:1px solid #3a434f;border-radius:5px;flex-direction:column;justify-content:space-between;align-items:center;min-width:0;height:62px;padding:6px 3px;display:flex;position:relative}.step:nth-child(4n+1){margin-left:2px}.step.active{background:#234044;border-color:#4bb9b5}.step.selected{outline-offset:2px;outline:2px solid #56d7d2}.step .step-num{color:#7e8995;font:9px DM Mono,monospace}.step .note-label{color:#edf1f5;font:10px DM Mono,monospace}.step .velocity{background:#3a444e;border-radius:4px;width:70%;height:3px;overflow:hidden}.step .velocity i{background:#56d7d2;height:100%;display:block}.playhead-grid span{background:#303741;border-radius:3px;height:4px}.step-editor{background:#14181e;border:1px solid #303741;border-radius:8px;margin-top:17px;padding:14px}.editor-heading{justify-content:space-between;align-items:center;margin-bottom:13px;display:flex}.editor-heading>div{gap:3px;display:grid}.eyebrow{color:#89929e;font:9px DM Mono,monospace}.editor-heading strong{font:12px DM Mono,monospace}.editor-controls{grid-template-columns:190px minmax(140px,1fr) minmax(140px,1fr) auto;align-items:end;gap:16px;display:grid}.editor-controls input[type=range]{accent-color:#56d7d2;width:100%}.editor-controls output{color:#edf1f5;font:10px DM Mono,monospace}.piano-info{color:#89929e;justify-content:space-between;margin:4px 0 10px;font:10px DM Mono,monospace;display:flex}.piano-scroll{overflow:auto}.piano-roll{min-width:calc(48px + var(--step-count,16)*29px);border-top:1px solid #303741;border-left:1px solid #303741}.piano-head,.piano-row{grid-template-columns:48px repeat(var(--step-count,16),minmax(28px,1fr));display:grid}.piano-key,.piano-cell{border:1px solid #303741;border-top:0;border-left:0;height:21px}.piano-key{color:#89929e;background:#20252d;padding:4px 6px;font:9px DM Mono,monospace}.piano-cell{background:#151a20;width:100%;padding:0}.piano-row{grid-template-columns:48px repeat(var(--step-count,16),minmax(28px,1fr));display:grid}.piano-row .piano-key{grid-column:1}.piano-row{grid-template-columns:48px repeat(var(--step-count,16),minmax(28px,1fr))}.song-toolbar{grid-template-columns:minmax(130px,1fr) 180px 90px auto auto;align-items:end;gap:8px;display:grid}.bars-field{color:#89929e;letter-spacing:.08em;gap:6px;font:9px DM Mono,monospace;display:grid}.bars-field input{color:#edf1f5;background:#12161b;border:1px solid #39424d;border-radius:6px;width:100%;padding:9px}.song-list{gap:7px;margin-top:13px;display:grid}.song-item{background:#14181e;border:1px solid #303741;border-radius:7px;align-items:center;gap:12px;padding:10px;display:flex}.song-item strong{flex:1;font:11px DM Mono,monospace}.song-item span{color:#89929e;font:9px DM Mono,monospace}.song-item button{color:#aab2bc;background:0 0;border:0}.song-item button:last-child{color:#ff5d66}.song-item button:disabled{opacity:.35;cursor:default}.empty{color:#89929e;text-align:center;border:1px dashed #303741;border-radius:7px;padding:20px;font:10px DM Mono,monospace}footer{color:#68727e;letter-spacing:.06em;justify-content:space-between;padding:17px 4px 0;font:9px DM Mono,monospace;display:flex}.toast{z-index:5;opacity:0;pointer-events:none;color:#10201f;background:#e6f4f1;border-radius:7px;padding:10px 15px;font:11px DM Mono,monospace;transition:all .2s;position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px)}.toast.show{opacity:1;transform:translate(-50%)}@media (width<=850px){.app-shell{padding:14px}.topbar{gap:14px}.transport{flex-wrap:wrap;order:3;width:100%}.routing-grid{grid-template-columns:1fr}.editor-controls{grid-template-columns:1fr 1fr}.editor-controls button{grid-column:span 2}.step-ruler,.track-lane,.playhead-row{grid-template-columns:64px 1fr}.step-numbers,.step-grid,.playhead-grid{gap:3px}.step{height:54px}.song-toolbar{grid-template-columns:1fr}.piano-info{flex-direction:column;gap:8px}.panel{padding:13px}.top-actions{margin-left:auto}}@media (width<=520px){.step{height:46px;padding:4px 1px}.step .note-label{font-size:8px}.step-numbers span{font-size:7px}.step-ruler,.track-lane,.playhead-row{grid-template-columns:48px 1fr;gap:5px}.editor-controls{grid-template-columns:1fr 1fr}.top-actions .subtle{display:none}.panel-head{flex-direction:column;align-items:flex-start}.transport{gap:6px}.meter{font-size:9px}footer{flex-wrap:wrap;gap:8px}.route-options{gap:12px}}:root{--accent:#bb8cff;--accent-bright:#c7a0ff;--accent-wash:#392a50;--accent-border:#7455a2}body{background:radial-gradient(at 8% 0,#2b203b 0,#0000 34%),radial-gradient(at 92% 25%,#1c2638 0,#0000 30%),#101116}.app-shell{position:relative}.brand-mark{color:#21172e;background:linear-gradient(145deg,#d1aaff,#9869df);border-radius:14px;transform:rotate(-4deg);box-shadow:0 5px 24px #bb8cff44}.primary{color:#21172e;background:linear-gradient(135deg,#c7a0ff,#a77ae8);border-color:#c7a0ff;border-radius:11px;box-shadow:0 5px 18px #bb8cff20}.primary:hover{background:#d1b2ff}.panel{background:linear-gradient(145deg,#211e29ef,#191a22f2);border-color:#393342;border-radius:18px;box-shadow:0 14px 38px #08070c35}.route-card{background:linear-gradient(145deg,#292532,#211f29);border-color:#403949;border-radius:14px}.step-editor{background:#191821;border-radius:14px}.track-tab.active,.editor-tab.active{color:#c7a0ff;border-color:#bb8cff}.step-grid .step.selected{outline-color:#bb8cff}.step-grid .step.active{background:#352a46;border-color:#8f6bc0}.step .velocity i{background:#bb8cff}.check input,.editor-controls input[type=range]{accent-color:#bb8cff}.track-dot.volca{background:#bb8cff;box-shadow:0 0 9px #bb8cff88}.piano-head,.piano-row{grid-template-columns:48px repeat(var(--step-count,16),minmax(28px,1fr));grid-auto-columns:minmax(28px,1fr);grid-auto-flow:column;display:grid}.piano-head{grid-template-rows:21px}.piano-row{grid-template-rows:21px;align-items:stretch}.piano-cell.on{background:#7655a4}.piano-cell.current{box-shadow:inset 0 0 0 1px #ffae76}.playhead-grid span.current{background:#ffae76;box-shadow:0 0 10px #ffae76}.transport-btn.active{background:#33283f;border-color:#bb8cff}.toast{color:#241632;background:#e9ddff}.app-shell,.app-shell *{font-family:Nunito,system-ui,sans-serif!important}.brand strong{letter-spacing:.12em;font-weight:800}.panel-head h2,.route-title strong,.tempo-box input,.step-num,.note-label,.hint,.micro-note,.eyebrow,.editor-heading strong,.meter,footer{letter-spacing:.015em}.song-panel .panel-head{align-items:center}.song-panel .panel-head>div{gap:5px;display:grid}.song-panel .panel-head h2{margin:0}.song-list{gap:9px;display:grid}.song-item{background:#191821;border-color:#373241;border-radius:13px;grid-template-columns:38px minmax(130px,1fr) minmax(130px,180px) 140px auto minmax(150px,auto);gap:10px;padding:10px 12px;display:grid}.sequence-index{color:#c7a0ff;background:#342741;border-radius:11px;place-items:center;width:32px;height:32px;font-weight:800;display:grid}.sequence-name{color:#f2ecfb;background:0 0;border:1px solid #0000;border-radius:8px;min-width:0;padding:8px 10px;font-size:15px;font-weight:700}.sequence-name:hover,.sequence-name:focus{background:#211e29;border-color:#443b50}.song-item select,.repeat-control input{color:#eee7f6;background:#121117;border:1px solid #40394a;border-radius:8px;min-width:0;padding:9px}.repeat-control{color:#a89db5;letter-spacing:.04em;grid-template-columns:1fr 56px;align-items:center;gap:5px 8px;font-size:9px;display:grid}.repeat-control span{grid-column:1/-1}.repeat-control input{text-align:center;padding:8px 4px}.repeat-control input:disabled{opacity:.4}.infinite-control{white-space:nowrap;color:#a89db5}.sequence-actions{justify-content:flex-end;gap:3px;display:flex}.sequence-actions button{color:#c3b8d1;background:0 0;border:1px solid #0000;border-radius:8px;width:32px;height:32px;font-size:17px}.sequence-actions button:hover:not(:disabled){color:#d8bdff;background:#30283a}.sequence-actions button:last-child{color:#e49aaf}.sequence-actions button:disabled{opacity:.3;cursor:default}.song-footer{align-items:center;gap:14px;margin-top:12px;display:flex}.song-footer .micro-note{margin:0}.pattern-views{margin:18px 0 12px}.piano-roll{width:max(100%,calc(48px + var(--step-count,16)*29px))}.piano-head,.piano-row{grid-auto-flow:unset;grid-template-columns:48px repeat(var(--step-count,16),minmax(28px,1fr))}.piano-row .piano-key{grid-area:1/1}.piano-row .piano-cell{grid-row:1}.song-item.selected{background:linear-gradient(100deg,#2d2439,#1d1b25);border-color:#9b74c8;box-shadow:inset 3px 0 #bb8cff,0 0 0 1px #bb8cff18}.song-item{cursor:pointer}.song-item input,.song-item select,.song-item button,.song-item label{cursor:auto}.song-item button{cursor:pointer}.song-transport{align-items:center;gap:14px;display:flex}.loop-toggle{white-space:nowrap;color:#c5b8d5}.loop-toggle input{accent-color:#bb8cff}.fallback-file-input{display:none}.topbar{z-index:20;-webkit-backdrop-filter:blur(18px);background:#17141ff0;position:sticky;top:0;box-shadow:0 10px 24px #08070c30}.developer-credit{color:#b7adbf;border:1px solid #40394a;border-radius:12px;align-items:center;gap:9px;padding:5px 10px;text-decoration:none;transition:background .18s,border-color .18s;display:flex}.developer-credit:hover{background:#2c2538;border-color:#785c98}.developer-credit img{object-fit:contain;filter:brightness(0)invert();width:30px;height:30px}.developer-credit span{letter-spacing:.08em;gap:1px;font-size:8px;line-height:1.2;display:grid}.developer-credit strong{letter-spacing:.02em;color:#eee7f6;font-size:12px}.pattern-views{margin-top:20px}@media (width<=900px){.song-item{grid-template-columns:34px minmax(100px,1fr) minmax(110px,1fr) 122px auto}.sequence-actions{grid-column:2/-1;justify-content:flex-start}.song-footer{flex-direction:column;align-items:flex-start}}@media (width<=620px){.song-item{grid-template-columns:32px 1fr 1fr;gap:8px}.sequence-name{grid-column:span 2}.song-item select{grid-column:2/-1}.repeat-control{grid-column:1/3}.infinite-control{grid-column:3}.sequence-actions{grid-column:1/-1}.song-panel .panel-head{flex-direction:column;align-items:flex-start}.song-transport{justify-content:space-between;width:100%}.song-transport .primary{flex:1}}@media (width<=850px){.developer-credit{margin-left:auto}.topbar .transport{order:3}.top-actions{order:4;justify-content:flex-end;width:100%}}@media (width<=520px){.developer-credit{padding:4px 7px}.developer-credit img{width:24px;height:24px}.developer-credit span{font-size:7px}.developer-credit strong{font-size:10px}}.sequence-area{overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#68527f #211e29;width:100%;min-width:0;max-width:100%;display:block;overflow-x:auto}.step-ruler,.track-lane,.playhead-row{width:max(100%,calc(110px + var(--step-count,16)*39px));grid-template-columns:100px minmax(0,1fr);min-width:0}.step-numbers,.step-grid,.playhead-grid{min-width:calc(var(--step-count,16)*39px)}.piano-view,.piano-scroll{width:100%;min-width:0;max-width:100%}.piano-scroll{overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#68527f #211e29;overflow-x:auto}.piano-roll{min-width:calc(48px + var(--step-count,16)*29px);width:auto}.step-numbers,.step-grid,.playhead-grid{grid-template-columns:repeat(var(--step-count,16),minmax(44px,1fr));min-width:calc(var(--step-count,16)*49px)}.step-ruler,.track-lane,.playhead-row{width:max(100%,calc(110px + var(--step-count,16)*49px))}.route-channel{max-width:180px}.routing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.track-dot.rc5{background:#bb8cff;box-shadow:0 0 9px #bb8cff88}.route-hint{color:#a89db5;grid-column:1/-1;margin:0;font-size:12px;line-height:1.4}@media (width<=1050px){.routing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rc5-card{grid-column:1/-1}}@media (width<=850px){.routing-grid{grid-template-columns:1fr}.rc5-card{grid-column:auto}}.rc5-cc-select{max-width:180px}.rc5-step-editor{background:linear-gradient(140deg,#211b2b,#191821);border:1px solid #493b5c;border-radius:12px;margin-top:14px;padding:13px}.rc5-step-heading{color:#d7c2f4;letter-spacing:.04em;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:11px;display:flex}.rc5-command-row{grid-template-columns:auto minmax(170px,1fr) minmax(120px,.8fr) minmax(170px,1fr);align-items:end;gap:12px;display:grid}.rc5-command-row>label:not(.check){color:#a89db5;letter-spacing:.04em;gap:6px;font-size:9px;display:grid}.rc5-command-row select,.rc5-command-row input[type=number]{color:#eee7f6;background:#121117;border:1px solid #40394a;border-radius:8px;width:100%;min-width:0;padding:9px}.rc5-command-row input[type=range]{accent-color:#bb8cff;width:100%}.rc5-command-row output{color:#eee7f6;font-size:10px}.rc5-step-editor .micro-note{margin-top:10px}@media (width<=850px){.rc5-command-row{grid-template-columns:1fr 1fr}.rc5-command-row>.check{align-self:center}}@media (width<=520px){.rc5-command-row{grid-template-columns:1fr}.rc5-step-heading{flex-direction:column;align-items:flex-start;gap:10px}}@media (width<=850px){.step-ruler,.track-lane,.playhead-row{grid-template-columns:64px minmax(0,1fr)}}@media (width<=520px){.step-ruler,.track-lane,.playhead-row{grid-template-columns:48px minmax(0,1fr)}}.rc5-controls{grid-template-columns:minmax(140px,180px) minmax(160px,200px) minmax(180px,1fr) auto}.rc5-controls select{color:#eee7f6;background:#121117;border:1px solid #40394a;border-radius:8px;width:100%;padding:9px}.rc5-controls input[type=range]{accent-color:#bb8cff}@media (width<=600px){.rc5-controls{grid-template-columns:1fr}}.rc5-master-toggle{color:#d7c2f4!important}.rc5-master-toggle input{accent-color:#bb8cff}.tempo-box input:read-only{opacity:.85;cursor:default}.length-select input{color:#edf1f5;background:#12161b;border:1px solid #39424d;border-radius:6px;width:64px;padding:7px;font:10px DM Mono,monospace}.cc-mode-note{color:#a89db5;align-self:center;margin:0;font:10px/1.5 DM Mono,monospace}@media (width<=850px){.rc5-controls{grid-template-columns:1fr 1fr}.cc-mode-note{grid-column:span 2}}@media (width<=600px){.cc-mode-note{grid-column:auto}}