@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/JetBrainsMono-Db4Uuiha.woff2)format("woff2-variations")}@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/Outfit-D6ftewdU.woff2)format("woff2-variations")}:root{--accent:#ff003c;--bg:radial-gradient(ellipse at 25% 15%, #1a0a2e 0%, #0d0519 35%, #050208 100%);--text:#fff;--muted:#666;--dim:#3a2a4a;--mono:"JetBrains Mono", monospace;--sans:"Outfit", sans-serif;--cell:28px}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;margin:0;padding:0}html,body,#root{min-height:100%}body{color:var(--text);font-family:var(--sans);background:#050208}button{color:inherit;cursor:pointer;background:0 0;border:none;font-family:inherit}::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#333;border-radius:2px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes glow{0%,to{box-shadow:0 0 30px color-mix(in srgb, var(--accent) 13%, transparent)}50%{box-shadow:0 0 60px color-mix(in srgb, var(--accent) 27%, transparent)}}.mono{font-family:var(--mono)}.outfit{font-family:var(--sans)}.glass{-webkit-backdrop-filter:blur(20px)saturate(1.4);background:linear-gradient(135deg,#ffffff0f,#ffffff04 50%,#ffffff0a);border:1px solid #ffffff12;border-radius:12px;box-shadow:0 8px 32px #00000073,inset 0 1px #ffffff0f,inset 0 -1px #00000026}.glass-s{-webkit-backdrop-filter:blur(12px)saturate(1.2);background:linear-gradient(135deg,#ffffff0a,#ffffff03);border:1px solid #ffffff0d;border-radius:14px;box-shadow:0 4px 16px #00000059,inset 0 1px #ffffff0a}.gbtn{-webkit-backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffff12,#ffffff05);border:1px solid #ffffff12;border-radius:8px;transition:all .12s;box-shadow:0 2px 8px #0000004d,inset 0 1px #ffffff0d}.gbtn:active{background:linear-gradient(135deg,#ffffff1f,#ffffff0a);transform:scale(.95)}.gbtn.on{border-color:color-mix(in srgb, var(--accent) 47%, transparent);background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 3%, transparent));color:var(--accent)}.label{font-family:var(--mono);letter-spacing:2px;color:#555;font-size:8px;font-weight:600}.util-btn{color:var(--muted);font-family:var(--mono);letter-spacing:1px;flex-shrink:0;padding:8px 10px;font-size:8px;font-weight:700}input[type=range]{appearance:none;touch-action:pan-x;background:0 0;border-radius:3px;outline:none;width:100%;height:6px;padding:8px 0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) var(--fill,0%), #ffffff14 var(--fill,0%));border-radius:3px;height:6px}input[type=range]::-moz-range-track{background:linear-gradient(to right, var(--accent) var(--fill,0%), #ffffff14 var(--fill,0%));border-radius:3px;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border:2px solid #ffffff4d;border-radius:50%;width:20px;height:20px;margin-top:-7px;box-shadow:0 2px 8px #00000080}input[type=range]::-moz-range-thumb{cursor:pointer;background:#fff;border:2px solid #ffffff4d;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 8px #00000080}.app{background:var(--bg);min-height:100vh;padding:max(env(safe-area-inset-top), 12px) 10px max(env(safe-area-inset-bottom), 24px);position:relative;overflow-x:hidden}.app-bg{pointer-events:none;z-index:0;position:fixed;inset:0}.app-bg:before{content:"";background:radial-gradient(circle,#8000ff12,#0000 70%);width:55%;height:55%;position:absolute;top:-15%;left:-10%}.app-bg:after{content:"";background:radial-gradient(circle,#5000b40d,#0000 70%);width:45%;height:45%;position:absolute;bottom:-10%;right:-5%}.app-inner{z-index:1;flex-direction:column;gap:10px;max-width:480px;margin:0 auto;display:flex;position:relative}.splash{background:var(--bg);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex;position:relative;overflow:hidden}.splash-inner{text-align:center;z-index:1;animation:.6s ease-out fadeUp}.splash-btn:disabled{opacity:.6;cursor:wait;animation:none}.splash-btn{background:var(--accent);color:#fff;letter-spacing:3px;border-radius:12px;padding:16px 44px;font-size:13px;font-weight:800;animation:2s infinite glow}.header{justify-content:space-between;align-items:center;margin-bottom:2px;display:flex}.brand-sub{font-family:var(--mono);letter-spacing:5px;color:var(--dim);font-size:7px;font-weight:600}.brand{letter-spacing:-.5px;font-size:22px;font-weight:900;line-height:1.1}.brand em{color:var(--accent);font-style:normal}.status{font-family:var(--mono);letter-spacing:2px;color:var(--dim);align-items:center;gap:6px;font-size:9px;font-weight:700;display:flex}.status.on{color:var(--accent)}.status-dot{background:var(--accent);width:6px;height:6px;box-shadow:0 0 8px var(--accent);border-radius:50%;animation:.8s infinite pulse}.kit-tabs{gap:4px;padding:8px 10px;display:flex}.kit-tab{text-align:center;color:var(--muted);letter-spacing:2px;font-size:9px;font-weight:700;font-family:var(--mono);flex:1;padding:10px 0}.transport{flex-direction:column;gap:8px;padding:10px 12px;display:flex}.transport-main{align-items:center;gap:12px;display:flex}.transport-tools{gap:6px;display:flex}.transport-tools .util-btn{flex:1;padding:9px 0}.output-mode{align-items:center}.output-mode .label{flex:none;padding-right:4px}.play-btn{border:1.5px solid color-mix(in srgb, var(--accent) 53%, transparent);background:linear-gradient(135deg,#ffffff0f,#ffffff05);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex;box-shadow:0 4px 12px #0000004d,inset 0 1px #ffffff0f}.play-btn.on{background:var(--accent);box-shadow:0 0 20px color-mix(in srgb, var(--accent) 33%, transparent)}.play-icon{border-top:9px solid #0000;border-bottom:9px solid #0000;border-left:15px solid var(--accent);width:0;height:0;margin-left:3px}.pause-icon{gap:3px;display:flex}.pause-icon i{background:#000;border-radius:1px;width:3.5px;height:16px;display:block}.param{flex-direction:column;gap:3px;display:flex}.param-head{justify-content:space-between;align-items:center;display:flex}.param-val{font-family:var(--mono);font-size:14px;font-weight:700}.param-val.small{color:#aaa;font-size:11px}.loops{flex-direction:column;min-height:0;padding:10px;display:flex}.loops-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;padding-left:2px;display:flex}.drag-mode{align-items:center;gap:4px}.drag-mode .util-btn{padding:5px 8px}.loops-row{-webkit-overflow-scrolling:touch;gap:6px;padding-bottom:6px;display:flex;overflow-x:auto}.loop-card{text-align:left;cursor:grab;flex-shrink:0;align-items:center;gap:8px;min-width:150px;padding:8px 10px;display:flex}.loop-card:active{cursor:grabbing}.loop-main{flex:1;min-width:0}.drag-grip{color:#3a3a3a;font-size:12px;line-height:1}.loop-card.on .drag-grip{color:var(--accent)}.loop-name{font-family:var(--mono);color:#aaa;letter-spacing:1px;white-space:nowrap;margin-bottom:2px;font-size:9px;font-weight:700}.loop-card.on .loop-name{color:var(--accent)}.loop-bpm{font-family:var(--mono);color:#555;letter-spacing:1px;white-space:nowrap;font-size:7px}.loop-actions{gap:3px;display:flex}.loop-actions .util-btn{padding:5px 6px;font-size:7px}.loop-desc{background:#ffffff08;border:1px solid #ffffff0a;border-radius:8px;justify-content:space-between;align-items:flex-start;gap:8px;margin-top:8px;padding:8px 10px;display:flex}.loop-desc p{font-family:var(--mono);color:#888;flex:1;font-size:8px;line-height:1.5}.loop-desc button{color:#444;font-size:12px;line-height:1}.learn-btn{font-family:var(--mono);letter-spacing:2px;color:var(--accent);border-color:color-mix(in srgb, var(--accent) 40%, transparent);flex-shrink:0;padding:5px 9px;font-size:7px;font-weight:700}.learn{background:color-mix(in srgb, var(--accent) 6%, #ffffff05);border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);border-radius:10px;flex-direction:column;gap:8px;margin-top:8px;padding:10px 12px;animation:.2s ease-out fadeUp;display:flex}.learn-head{align-items:center;gap:8px;display:flex}.learn-progress{color:var(--accent);margin-left:auto;font-size:9px;font-weight:700}.learn-dots{gap:4px;display:flex}.learn-dots i{background:#ffffff14;border-radius:2px;flex:1;height:3px}.learn-dots i.done{background:color-mix(in srgb, var(--accent) 50%, transparent)}.learn-dots i.cur{background:var(--accent);box-shadow:0 0 8px var(--accent)}.learn-title{letter-spacing:-.3px;font-size:18px;font-weight:800}.learn-rows{flex-wrap:wrap;gap:4px;display:flex}.chip{font-family:var(--mono);letter-spacing:1px;color:#999;background:#ffffff0d;border-radius:4px;padding:3px 7px;font-size:7px}.chip.new{background:var(--accent);color:#000;font-weight:700}.learn-text{color:#bbb;font-size:9px;line-height:1.6}.learn-nav{gap:6px;display:flex}.learn-nav .util-btn{flex:none;padding:10px 12px}.learn-next{background:var(--accent);color:#fff;letter-spacing:2px;border-radius:8px;flex:1;padding:10px;font-size:10px;font-weight:800}.learn-next.done{color:#000;background:#fff}.row.learn-off .cell,.row.learn-off .row-name,.row.learn-off .ms,.row.learn-off .pcell{opacity:.15}.row.learn-new .row-name{color:var(--accent)}.row.learn-new .cell.on{box-shadow:0 0 14px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 0 0 1.5px #ffffff80}.grid{padding:10px 6px}.grid-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}.grid-inner{grid-template-columns:48px repeat(16, var(--cell));align-items:center;gap:2px;min-width:max-content;display:grid}.step-num{font-family:var(--mono);text-align:center;color:#2a2a2a;font-size:7px;font-weight:700;transition:color 50ms}.step-num.beat{color:#484848}.step-num.now{color:var(--accent)}.row-label{z-index:1;-webkit-backdrop-filter:blur(6px);background:#0c0518eb;flex-direction:column;align-items:flex-end;gap:1px;padding-right:4px;display:flex;position:sticky;left:0}.row-name{font-family:var(--mono);color:#bbb;letter-spacing:1px;padding:2px 0;font-size:8px;font-weight:700}.row.off .row-name{color:#444}.ms{gap:2px;display:flex}.ms button{width:12px;height:12px;font-size:6px;font-weight:800;font-family:var(--mono);color:#444;background:#ffffff0a;border-radius:2px;justify-content:center;align-items:center;display:flex}.ms .m.on{color:#ff003c;background:#ff003c33}.ms .s.on{background:color-mix(in srgb, var(--accent) 20%, transparent);color:var(--accent)}.row{display:contents}.row.off .cell{opacity:.25}.cell{width:var(--cell);height:var(--cell);touch-action:manipulation;background:#ffffff05;border-radius:4px;transition:all 70ms;box-shadow:inset 0 1px #ffffff05}.cell.beat{background:#ffffff09}.cell.now{background:#ffffff1a}.cell.on{background:color-mix(in srgb, var(--accent) 53%, transparent);box-shadow:0 0 8px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 1px 0 #ffffff0f}.cell.acc{background:var(--accent);box-shadow:0 0 12px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 0 0 2px #ffffff59}.grid-hint{font-family:var(--mono);letter-spacing:2px;color:#2e2e2e;text-align:center;padding-top:6px;font-size:7px}.cell.on.now{background:var(--accent);box-shadow:0 0 14px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 #ffffff1a;transform:scale(1.15)}.cell.acc.now{box-shadow:0 0 18px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 0 0 2px #fff9;transform:scale(1.2)}.bars{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:0 4px 8px;display:flex}.bars .oct{align-items:center;gap:4px}.bars .util-btn{padding:6px 8px}.bar-btn{min-width:26px;position:relative}.bar-btn.live:after{content:"";background:var(--accent);width:4px;height:4px;box-shadow:0 0 6px var(--accent);border-radius:50%;margin-left:-2px;position:absolute;bottom:2px;left:50%}.pitch-name{color:#555;letter-spacing:1px;font-size:6px}.pcell{width:var(--cell);height:16px;font-family:var(--mono);color:#3a3a3a;touch-action:manipulation;background:#ffffff04;border-radius:3px;font-size:7px;font-weight:700;transition:all 70ms}.pcell.on{color:#999;background:#ffffff0a}.pcell.on.moved{color:var(--accent)}.pcell.now{background:#ffffff14}.pcell.sel{outline:1.5px solid var(--accent);outline-offset:-1px;color:#fff;background:color-mix(in srgb, var(--accent) 25%, transparent)}.pitchkb{padding:10px 12px;animation:.2s ease-out fadeUp}.pitchkb-head{align-items:center;gap:10px;margin-bottom:8px;display:flex}.pitchkb-note{font-family:var(--mono);color:var(--accent);margin-left:auto;font-size:14px;font-weight:700}.pitchkb-close{color:#444;padding:0 2px;font-size:16px;line-height:1}.pitchkb-keys{gap:2px;height:56px;display:flex}.pkey{font-family:var(--mono);color:#777;background:linear-gradient(#ffffff1a,#ffffff0d);border:1px solid #ffffff14;border-radius:4px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:4px;font-size:7px;font-weight:700;transition:all 80ms;display:flex}.pkey.black{background:linear-gradient(#1a1a22,#0c0c12);border-color:#ffffff0a;flex:.7;height:60%}.pkey.on{background:var(--accent);color:#000;border-color:var(--accent);box-shadow:0 0 12px color-mix(in srgb, var(--accent) 50%, transparent)}.pkey:active{transform:translateY(1px)}.pitchkb-foot{flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:8px;display:flex}.oct{gap:4px;display:flex}.util-btn:disabled{opacity:.3;cursor:default}.export{flex-direction:column;gap:10px;padding:10px 12px;animation:.2s ease-out fadeUp;display:flex}.export-head{justify-content:space-between;align-items:center;display:flex}.export-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.export-meta{color:#555;letter-spacing:1px;margin-left:auto;font-size:8px}.export-btn{background:var(--accent);color:#fff;letter-spacing:3px;border-radius:10px;padding:12px;font-size:11px;font-weight:800}.export-btn:disabled{opacity:.5;cursor:wait}.area-loops,.area-grid,.area-panels,.area-transport{flex-direction:column;gap:10px;min-width:0;display:flex}@media (width>=900px){:root{--cell:34px}.app{padding:14px 16px 12px}.app-inner{grid-template:"header header""kits transport""loops grid"minmax(0,1fr)"loops panels""footer footer"/320px minmax(0,1fr);align-items:start;gap:10px 12px;max-width:1180px;display:grid}.area-header{grid-area:header}.area-kits{grid-area:kits}.area-transport{grid-area:transport}.area-loops{grid-area:loops;align-self:stretch}.area-grid{grid-area:grid}.area-panels{grid-area:panels}.area-footer{grid-area:footer}.brand{font-size:26px}.kit-tabs{padding:6px 8px}.kit-tab{padding:12px 0}.transport{flex-direction:row;align-items:center}.transport-main{flex:1}.transport-tools{flex:none}.transport-tools .util-btn{padding:9px 12px}.loops{height:100%}.loops-row{flex-direction:column;max-height:420px;padding-right:2px;overflow:hidden auto}.loop-card{width:100%;min-width:0}.grid-inner{grid-template-columns:56px repeat(16, var(--cell))}.row-name{font-size:9px}.step-num{font-size:8px}.pcell{height:18px;font-size:8px}.grid-hint{display:none}}.kits-btn{flex:0 0 34px;padding:6px 0;font-size:14px}.kits-list{flex-direction:column;gap:6px;display:flex}.kit-row{background:#ffffff08;border:1px solid #ffffff0a;border-radius:8px;align-items:center;gap:8px;padding:8px 10px;display:flex}.kit-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;box-shadow:0 0 8px}.kits-panel a.learn-btn{text-decoration:none}.kit-row-wrap{flex-wrap:wrap}.price{color:var(--accent);margin-left:6px}.license-row{flex:100%;align-items:center;gap:4px;display:flex}.license-input{color:#fff;letter-spacing:1px;-webkit-user-select:text;user-select:text;background:#00000059;border:1px solid #ffffff1a;border-radius:6px;outline:none;flex:1;min-width:0;padding:7px 9px;font-size:9px}.license-input:focus{border-color:var(--accent)}.footer{font-family:var(--mono);color:#2a1a3a;letter-spacing:2px;border-top:1px solid #ffffff08;justify-content:space-between;align-items:center;padding:8px 2px;font-size:7px;display:flex}.footer b{color:var(--accent);font-weight:400}.footer .right{color:var(--dim);letter-spacing:0;font-size:8px}.update-toast{top:max(env(safe-area-inset-top), 12px);letter-spacing:2px;z-index:20;white-space:nowrap;border-radius:10px;align-items:center;gap:10px;padding:8px 10px 8px 14px;font-size:8px;animation:.25s ease-out fadeUp;display:flex;position:fixed;left:50%;transform:translate(-50%)}.update-btn{background:var(--accent);color:#fff;letter-spacing:2px;border-radius:6px;padding:6px 10px;font-size:9px;font-weight:800}.toast{font-family:var(--mono);letter-spacing:2px;z-index:10;border-radius:10px;padding:10px 16px;font-size:9px;animation:.25s ease-out fadeUp;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}