:root{--bg:#fff8ec;--bg-2:#ffeccc;--ink:#2b2140;--ink-soft:#6c5f86;--card:#fff;--accent:#ff6b6b;--accent-2:#4d96ff;--good:#3ccf7a;--shadow:0 4px 0 #2b21402e;--radius:20px;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent;font-family:Nunito,Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(circle at 20% 0%, var(--bg-2), var(--bg) 60%);overscroll-behavior:none;-webkit-user-select:none;user-select:none;min-height:100vh}button{font:inherit;color:inherit;cursor:pointer}.app{flex-direction:column;gap:14px;max-width:1200px;min-height:100vh;margin:0 auto;padding:14px 16px 18px;display:flex}.top{align-items:center;gap:12px;display:flex}.top h1{letter-spacing:-.02em;flex:1;margin:0;font-size:clamp(1.3rem,3vw,2rem);font-weight:900}.midi-badge{background:var(--card);color:var(--ink-soft);box-shadow:var(--shadow);white-space:nowrap;text-overflow:ellipsis;border-radius:999px;max-width:45vw;padding:8px 14px;font-size:.9rem;font-weight:800;overflow:hidden}.midi-badge.connected{background:var(--good);color:#fff}.gear{opacity:.55;touch-action:none;background:0 0;border:none;border-radius:50%;width:44px;height:44px;font-size:1.2rem;position:relative}.gear-ring{position:absolute;inset:0;transform:rotate(-90deg)}.gear-ring circle{fill:none;stroke:var(--accent-2);stroke-width:3px;stroke-dasharray:101;stroke-dashoffset:101px}.gear.holding{opacity:1}.gear.holding .gear-ring circle{stroke-dashoffset:0;transition:stroke-dashoffset var(--hold-ms) linear}.controls{flex-wrap:wrap;gap:12px;display:flex}.choice{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);gap:6px;padding:6px;display:flex}.choice[aria-disabled=true]{opacity:.4}.choice button{min-width:68px;min-height:64px;color:var(--ink-soft);background:0 0;border:none;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:6px 10px;font-size:.8rem;font-weight:800;transition:background .15s,transform .1s;display:flex}.choice button:active{transform:scale(.94)}.choice button.selected{background:var(--accent-2);color:#fff}.choice-emoji{font-size:1.7rem;line-height:1}.sounds{flex-direction:column;gap:10px;display:flex}.banks{align-self:flex-start}.banks button.selected{background:var(--accent)}.pads{grid-template-columns:repeat(8,1fr);gap:10px;display:grid}.pad{aspect-ratio:1;border-radius:var(--radius);background:var(--card);min-height:64px;max-height:130px;box-shadow:var(--shadow);touch-action:none;border:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;transition:transform 80ms,background .2s;display:flex}.pad-emoji{font-size:clamp(2rem,5vw,3.4rem);line-height:1}.pad-label{color:var(--ink-soft);font-size:.75rem;font-weight:800}.pad.on{background:#ffe14d;transform:scale(.92)rotate(-3deg)}.pad.learn{outline:4px dashed var(--accent-2);outline-offset:2px;animation:.8s ease-in-out infinite alternate pulse}@keyframes pulse{to{transform:scale(1.06)}}.keyboard{border-radius:var(--radius);background:var(--ink);min-height:200px;max-height:340px;box-shadow:var(--shadow);touch-action:none;flex:1;padding:10px;display:flex;position:relative}.key{--key-color:#ccc}.key.white{background:linear-gradient(#fff, #fff 85%, var(--key-color) 85%);border-radius:0 0 14px 14px;flex:1;margin:0 2px;transition:background 80ms;position:relative;box-shadow:inset 0 -6px #00000014}.key.white.on{background:var(--key-color);box-shadow:0 0 24px var(--key-color)}.c-label{text-align:center;color:#b9b2c7;pointer-events:none;font-weight:900;position:absolute;bottom:22%;left:0;right:0}.key.black{z-index:1;border-bottom:6px solid var(--key-color);background:linear-gradient(#3a3150,#1b1528);border-radius:0 0 10px 10px;height:58%;margin-left:10px;transition:background 80ms;position:absolute;top:10px}.key.black.on{background:var(--key-color);box-shadow:0 0 20px var(--key-color)}.key.black.dim{opacity:.35}.start{z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff8eceb;border:none;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:clamp(2rem,6vw,3.5rem);font-weight:900;display:flex;position:fixed;inset:0}.start-emoji{font-size:5rem;animation:.9s ease-in-out infinite alternate bounce}@keyframes bounce{to{transform:translateY(-14px)rotate(6deg)}}.settings-backdrop{z-index:20;background:#2b214073;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.settings{background:var(--card);border-radius:var(--radius);-webkit-user-select:text;user-select:text;width:min(480px,100%);max-height:90vh;padding:20px 22px;overflow:auto}.settings h2{margin:0 0 12px}.settings h3{margin:18px 0 4px}.setting{flex-direction:column;gap:4px;margin:10px 0;font-weight:700;display:flex}.setting-row{justify-content:space-between;align-items:center;gap:12px;margin:10px 0;display:flex}.settings button{background:var(--accent-2);color:#fff;border:none;border-radius:12px;padding:10px 14px;font-weight:800}.settings button:disabled{opacity:.4}.settings button.link{color:var(--accent-2);background:0 0;padding:4px 0}.settings button.done{background:var(--accent);width:100%;margin-top:8px}.hint{color:var(--ink-soft);font-size:.85rem}@media (width<=640px){.app{gap:10px;padding:10px 16px 14px}.pads{grid-template-columns:repeat(4,1fr)}.controls{gap:8px}.choice button{min-width:56px}.choice-label{font-size:.7rem}.midi-badge{font-size:.75rem}}@media (prefers-color-scheme:dark){:root{--bg:#1d1730;--bg-2:#2b2148;--ink:#f3eefe;--ink-soft:#b9afd4;--card:#2e2648}.keyboard{background:#120e1e}.start{background:#1d1730eb}}.choice.instruments{flex-wrap:wrap}.choice.instruments button{flex:1 0 68px}.choice.instruments.loading button.selected{animation:.6s ease-in-out infinite alternate loading}@keyframes loading{to{opacity:.5}}.toast{z-index:15;background:var(--card);pointer-events:none;border-radius:28px;flex-direction:column;align-items:center;gap:4px;padding:18px 30px;font-size:1.6rem;font-weight:900;animation:1.2s ease-out forwards toast;display:flex;position:fixed;top:38%;left:50%;box-shadow:0 10px 40px #2b214040}.toast-emoji{font-size:4.5rem;line-height:1}@keyframes toast{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}15%{opacity:1;transform:translate(-50%,-50%)scale(1.05)}75%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.95)}}.banks{flex-wrap:wrap}.stage{flex-direction:column;flex:1;min-height:320px;display:flex}.viz{border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(#3a2d5c, var(--ink));flex:1;min-height:150px;position:relative;overflow:hidden}.viz.garden{background:linear-gradient(#0b1033,#26346b)}.viz.kaleidoscope{background:radial-gradient(circle,#2a1d4a,#0d0918 75%)}.viz canvas{width:100%;height:100%;position:absolute;inset:0}.stage .keyboard{border-radius:0 0 var(--radius) var(--radius);flex:none;height:clamp(170px,28vh,300px);min-height:0}.viz-picker{background:#ffffff1f;border-radius:999px;gap:4px;padding:4px;display:flex;position:absolute;top:8px;left:8px}.viz-picker button{opacity:.6;background:0 0;border:none;border-radius:50%;width:44px;height:44px;font-size:1.4rem;transition:background .15s,opacity .15s}.viz-picker button.selected{opacity:1;background:#ffffff40}.pad{animation:.35s cubic-bezier(.34,1.56,.64,1) backwards pad-in;animation-delay:calc(var(--i,0) * 40ms);position:relative}.pad.on .pad-emoji{animation:.3s ease-out wiggle}.burst{z-index:2;pointer-events:none;font-size:clamp(1.4rem,3vw,2.2rem);animation:.9s ease-out forwards burst;position:absolute;top:40%;left:50%}@keyframes burst{0%{opacity:1;transform:translate(-50%,-50%)scale(.5)}to{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--spin)) scale(1.15)}}@keyframes wiggle{0%{transform:scale(.88)rotate(-6deg)}50%{transform:scale(1.06)rotate(4deg)}to{transform:scale(1)rotate(0)}}@keyframes pad-in{0%{opacity:0;transform:scale(.4)translateY(20px)}}.choice button.selected .choice-emoji{animation:.35s cubic-bezier(.34,1.56,.64,1) pop}@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}to{transform:scale(1)}}.key.white.on,.key.black.on{transform:translateY(3px)}.floaters{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.floaters span{left:var(--x);color:var(--ink);opacity:.08;animation:float var(--d) linear infinite;animation-delay:var(--delay);font-size:2.6rem;position:absolute;bottom:-60px}@keyframes float{to{transform:translateY(-115vh)rotate(25deg)}}@media (prefers-reduced-motion:reduce){.floaters,.burst{display:none}*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}.studio-toggle{background:var(--card);box-shadow:var(--shadow);white-space:nowrap;border:none;border-radius:999px;padding:8px 14px;font-weight:800}.studio-toggle.selected{background:var(--accent-2);color:#fff}.studio{flex-direction:column;flex:1;gap:10px;min-height:0;display:flex}.studio button,.studio select,.studio input[type=number]{background:var(--card);min-height:40px;box-shadow:var(--shadow);font:inherit;color:inherit;border:none;border-radius:12px;padding:6px 12px;font-weight:800}.studio button:disabled{opacity:.4;cursor:default}.studio button.selected{background:var(--accent-2);color:#fff}.studio button.danger{background:var(--accent);color:#fff}.studio input[type=number]{width:4.5em}.studio-bar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.studio-sep{background:#6c5f864d;align-self:stretch;width:1px;margin:0 4px}.studio .field,.studio .toggle{color:var(--ink-soft);white-space:nowrap;align-items:center;gap:6px;font-size:.9rem;font-weight:800;display:inline-flex}.studio .toggle input{width:18px;height:18px;accent-color:var(--accent-2)}.studio input[type=range]{width:90px;accent-color:var(--accent-2)}.studio-key{color:var(--ink-soft);font-size:.9rem;font-weight:800}.studio .rec-button{background:var(--accent);color:#fff;min-width:7.5em}.studio .rec-button.waiting,.studio .rec-button.recording{animation:1s ease-in-out infinite rec-pulse}.studio .play-button{background:var(--good);color:#fff;min-width:6em}@keyframes rec-pulse{50%{filter:brightness(1.25);transform:scale(1.04)}}.studio-main{flex:1;gap:10px;min-height:240px;display:flex}.track-col{flex-direction:column;flex:none;gap:10px;width:230px;display:flex}.track-list{flex-direction:column;gap:6px;display:flex}.track-row{background:var(--card);box-shadow:var(--shadow);cursor:pointer;border-left:5px solid;border-radius:12px;align-items:center;gap:6px;padding:6px 8px;font-weight:800;display:flex}.track-row.selected{outline:3px solid var(--accent-2)}.track-row.muted .track-name{opacity:.45}.track-name{flex-direction:column;flex:1;min-width:0;display:flex}.track-name small{color:var(--ink-soft);font-size:.72rem}.studio button.mini{min-width:30px;min-height:30px;box-shadow:none;background:#6c5f8626;border-radius:8px;padding:2px 6px;font-size:.8rem}.studio button.mini.selected{background:var(--accent-2);color:#fff}.add-track{width:100%}.track-title{justify-content:space-between;align-items:center;display:flex}.tricks .gen{gap:4px;display:inline-flex}.track-panel{border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);flex-direction:column;gap:10px;padding:12px;display:flex}.track-panel .field{justify-content:space-between}.track-panel select{max-width:120px}.track-title{border-left:5px solid;padding-left:8px;font-size:1.1rem;font-weight:900}.roll-view{border-radius:var(--radius);background:linear-gradient(#2e2450, var(--ink));flex:1;min-width:0;position:relative;overflow:hidden}.roll-view canvas{width:100%;height:100%;position:absolute;inset:0}.roll-message{text-align:center;color:#fff;pointer-events:none;place-items:center;padding:16px;font-size:clamp(1rem,2.4vw,1.4rem);font-weight:800;display:grid;position:absolute;inset:0}.roll-message.pulse{animation:1.2s ease-in-out infinite rec-pulse}.tricks{flex-wrap:wrap;gap:10px;display:flex}.tricks section{border-radius:var(--radius);background:#6c5f861a;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;display:flex}.tricks h3{margin:0 4px 0 0;font-size:.95rem}.tricks .moods{gap:6px;display:inline-flex}.stage.studio-keys{flex:none;min-height:0}.stage.studio-keys .keyboard{border-radius:var(--radius);height:clamp(130px,20vh,220px)}@media (width<=720px){.studio-main{flex-direction:column}.track-col{width:auto}.track-list,.track-panel{flex-flow:wrap}.roll-view{min-height:220px}}@media (prefers-reduced-motion:reduce){.studio .rec-button.waiting,.studio .rec-button.recording,.roll-message.pulse{animation:none}}.songs{position:relative}.songs-pop{z-index:20;border-radius:var(--radius);background:var(--card);flex-direction:column;gap:8px;width:min(320px,90vw);padding:12px;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 8px 30px #2b21404d}.songs-save{gap:6px;display:flex}.songs-save input{min-width:0;font:inherit;color:inherit;background:0 0;border:2px solid #6c5f864d;border-radius:10px;flex:1;padding:6px 10px}.songs-pop ul{flex-direction:column;gap:6px;max-height:240px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.songs-pop li{align-items:center;gap:6px;display:flex}.studio .songs-open{text-align:left;box-shadow:none;background:#6c5f861a;flex-direction:column;flex:1;align-items:flex-start;display:flex}.songs-open small{color:var(--ink-soft);font-size:.72rem;font-weight:600}.studio .mini.danger{background:var(--accent);color:#fff}.view-tabs{background:#6c5f8626;border-radius:14px;gap:2px;padding:3px;display:inline-flex}.studio .view-tabs button{box-shadow:none;background:0 0}.studio .view-tabs button.selected{background:var(--card);color:inherit;box-shadow:var(--shadow)}.launcher{flex-direction:column;flex:1;gap:10px;min-height:0;display:flex}.launch-grid{border-radius:var(--radius);background:linear-gradient(#2e2450, var(--ink));gap:6px;padding:10px;display:grid;overflow:auto}.launch-corner{color:#fff9;align-self:end;padding:0 4px 4px;font-size:.85rem;font-weight:800}.launch-track{background:#ffffff14;border-bottom:4px solid;border-radius:10px;align-items:center;gap:4px;min-width:0;padding:4px;display:flex}.launch-track.selected{outline:2px solid #fff}.studio .launch-track-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;min-height:32px;box-shadow:none;color:#fff;background:0 0;flex:1;padding:2px 6px;overflow:hidden}.launch-track .mini,.launch-scene .mini{color:#fff;background:#ffffff24}.launch-scene{background:#ffffff0f;border-radius:12px;grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;gap:2px 6px;padding:4px;display:grid}.launch-scene.live{background:#3ccf7a38}.studio .launch-scene-play{background:var(--good);color:#fff;border-radius:50%;grid-row:span 2;width:44px;height:44px;min-height:44px;padding:0;font-size:1.1rem}.launch-scene-name{color:#fff;min-width:0;font:inherit;background:0 0;border:none;border-radius:6px;padding:2px 4px;font-weight:800}.launch-scene-name:focus{background:#ffffff1f;outline:none}.launch-scene-tools{color:#fff9;align-items:center;gap:3px;font-size:.75rem;display:flex}.launch-scene-tools small{margin-right:auto;padding-left:4px}.studio .pad-clip{background:color-mix(in srgb, var(--clip) 55%, #1d1730);min-height:64px;box-shadow:none;color:#fff;touch-action:manipulation;border-radius:12px;padding:8px;position:relative;overflow:hidden}.studio .pad-clip.empty{background:#ffffff0d}.pad-clip-empty{opacity:0;font-size:1.2rem;transition:opacity .15s}.pad-clip.empty:hover .pad-clip-empty,.pad-clip.empty:focus-visible .pad-clip-empty{opacity:.5}.pad-clip-notes{fill:#ffffffd9;width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;inset:10px}.studio .pad-clip.playing,.studio .pad-clip.stopping{background:var(--clip);box-shadow:0 0 0 3px #fff, 0 0 18px var(--clip)}.pad-clip.playing:after,.pad-clip.stopping:after{content:"";background:conic-gradient(#fff var(--p,0deg), #ffffff40 0);border-radius:50%;width:16px;height:16px;position:absolute;top:6px;right:6px}.studio .pad-clip.queued,.studio .pad-clip.stopping{animation:.5s steps(2,jump-none) infinite pad-blink}.studio .pad-clip.recording{background:var(--accent);animation:1s ease-in-out infinite rec-pulse;box-shadow:0 0 0 3px #fff}.studio .pad-clip.drop{outline:3px dashed #fff}@keyframes pad-blink{50%{filter:brightness(1.6)}}.launch-footer{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.launch-bin{color:var(--ink-soft);border:2px dashed #6c5f8666;border-radius:12px;padding:8px 14px;font-size:.85rem;font-weight:800}.launch-footer .hint{color:var(--ink-soft);flex-basis:100%;font-size:.8rem}.songs-name input{min-width:0;font:inherit;color:inherit;background:0 0;border:2px solid #6c5f864d;border-radius:10px;flex:1;padding:6px 10px}.studio .songs-name{display:flex}.songs-actions{flex-wrap:wrap;gap:6px;display:flex}.songs-pop li.current .songs-open{outline:2px solid var(--accent-2);opacity:1}@media (prefers-reduced-motion:reduce){.studio .pad-clip.queued,.studio .pad-clip.stopping,.studio .pad-clip.recording{animation:none}}.launch-tools{grid-template-columns:minmax(300px,1.2fr) minmax(260px,1fr) minmax(220px,.8fr);align-items:start;gap:10px;display:grid}.magic,.fx-panel,.clip-tools{border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);flex-direction:column;gap:8px;padding:12px;display:flex}.fx-panel.compact{padding:10px 12px}.fx-panel.compact summary{cursor:pointer;font-weight:900}.fx-panel.compact[open] summary{margin-bottom:8px}.fx-head,.magic-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.magic-head small{color:var(--ink-soft);font-size:.75rem}.fx-knobs{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px 10px;display:grid}.fx-panel.compact .fx-knobs{grid-template-columns:1fr 1fr}.fx-knob{color:var(--ink-soft);grid-template-columns:1fr auto;align-items:center;font-size:.8rem;font-weight:800;display:grid}.fx-knob span{cursor:default;white-space:nowrap}.fx-knob small{font-size:.72rem;font-weight:700}.studio .fx-knob input[type=range]{grid-column:span 2;width:100%}.magic-body{grid-template-columns:minmax(130px,170px) 1fr;gap:10px;display:grid}.xy-pad{aspect-ratio:1;touch-action:none;cursor:crosshair;background:linear-gradient(#4d96ff73,#4d96ff00),linear-gradient(90deg,#241a44,#6c4bd1 50%,#e8b4ff);border-radius:16px;position:relative;overflow:hidden}.xy-pad.active{box-shadow:0 0 0 3px var(--accent-2)}.xy-label{color:#ffffffbf;pointer-events:none;font-size:.7rem;font-weight:800;position:absolute}.xy-label.left{bottom:6px;left:6px}.xy-label.right{bottom:6px;right:6px}.xy-label.top{top:6px;left:50%;transform:translate(-50%)}.xy-dot{pointer-events:none;background:#fff;border-radius:50%;width:26px;height:26px;margin:0 0 -13px -13px;position:absolute;box-shadow:0 0 16px #fff}.magic-pads{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;display:grid}.studio .magic-pad{touch-action:none;-webkit-user-select:none;user-select:none;min-height:62px;color:var(--ink);background:linear-gradient(#f3eaff,#e3d4ff);flex-direction:column;align-items:center;gap:2px;padding:6px 4px;font-size:.75rem;display:flex}.magic-emoji{font-size:1.4rem}.studio .magic-pad.on{background:var(--accent-2);color:#fff;box-shadow:0 0 18px var(--accent-2);transform:scale(.95)}.magic.idle .magic-pads,.magic.idle .xy-pad{opacity:.55}.clip-tools.empty{color:var(--ink-soft);font-size:.9rem;font-weight:700}.clip-tools-buttons{flex-wrap:wrap;gap:6px;display:flex}@media (width<=1000px){.launch-tools{grid-template-columns:1fr}}