:root{--bg:#0a0a0f;--bg-raise:#14141d;--bg-sheet:#1b1b26;--edge:#26263a;--text:#eef0ff;--muted:#6f7395;--accent:#7c6cff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box;margin:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);overscroll-behavior:none;-webkit-text-size-adjust:100%}.app{height:100dvh;padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));flex-direction:column;gap:8px;display:flex}.chrome{display:contents}.bar{flex:none;align-items:center;gap:12px;padding:0 2px;display:flex}.bar__title{letter-spacing:.2em;color:var(--muted);white-space:nowrap;font-size:14px;font-weight:800}.bar__volume{flex:1;justify-content:flex-end;display:flex}.bar__volume input{appearance:none;cursor:pointer;background:0 0;width:min(140px,34vw);height:44px}.bar__volume input::-webkit-slider-runnable-track{background:linear-gradient(var(--accent) 0 0) no-repeat, color-mix(in srgb, var(--edge) 80%, transparent);background-size:var(--fill,90%) 100%;border-radius:999px;height:5px}.bar__volume input::-webkit-slider-thumb{appearance:none;background:#fff;border:0;border-radius:50%;width:22px;height:22px;margin-top:-8.5px}.bar__volume input::-moz-range-track{background:var(--edge);border-radius:999px;height:5px}.bar__volume input::-moz-range-progress{background:var(--accent);border-radius:999px;height:5px}.bar__volume input::-moz-range-thumb{background:#fff;border:0;border-radius:50%;width:22px;height:22px}.btn{border:1px solid var(--edge);background:var(--bg-raise);min-height:44px;color:var(--text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;transition:scale .12s cubic-bezier(.2,.9,.25,1),background-color .16s ease-out,border-color .16s ease-out,color .16s ease-out}.btn:active{scale:.95}.btn:focus-visible,.bank:focus-visible,.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn--on{background:var(--accent);color:#fff;border-color:#0000;box-shadow:0 2px 14px #8566ff73}.btn--ghost{color:var(--muted);background:0 0}.btn--edit{flex:none}.banks{flex:none;gap:6px;padding:0 2px;display:flex}.bank{border:1px solid var(--edge);background:var(--bg-raise);min-height:40px;color:var(--muted);font:inherit;letter-spacing:.08em;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:10px;flex:1;padding:7px 0;font-size:12px;font-weight:700;transition:scale .12s cubic-bezier(.2,.9,.25,1),background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out}.bank:active{scale:.96}.bank--on{border-color:color-mix(in srgb, var(--accent) 70%, transparent);background:color-mix(in srgb, var(--accent) 22%, var(--bg-raise));color:var(--text);box-shadow:inset 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent)}.grid{touch-action:none;flex:1;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px;min-height:0;display:grid}.pad{border:1px solid hsl(var(--hue) 60% 60% / .32);background: linear-gradient(hsl(var(--hue) 90% 80% / .16), transparent 42%), radial-gradient(120% 90% at 50% 0%, hsl(var(--hue) 85% 62% / .32), transparent 70%), var(--bg-raise);box-shadow:inset 0 1px 0 hsl(var(--hue) 90% 85% / .14), inset 0 -8px 18px -12px #000, 0 1px 2px #0006;color:var(--text);font:inherit;text-align:left;cursor:pointer;contain:paint;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;border-radius:16px;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;padding:9px;transition:scale .14s cubic-bezier(.2,.9,.25,1),box-shadow .14s ease-out,border-color .14s ease-out;display:flex;position:relative;overflow:hidden}.pad:after{content:"";background:radial-gradient(circle at var(--px,50%) var(--py,50%), hsl(var(--hue) 100% 78% / .55), hsl(var(--hue) 100% 70% / .18) 38%, transparent 62%);opacity:0;pointer-events:none;position:absolute;inset:0}.pad:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pad__key{color:hsl(var(--hue) 70% 78% / .7);font-size:11px;font-weight:700;position:absolute;top:7px;right:9px}.pad__label{letter-spacing:-.01em;text-shadow:0 1px 2px #000a;font-size:clamp(11px,3vw,15px);font-weight:700;line-height:1.15;position:relative}.pad__hint{color:var(--muted);word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.pad--loading{opacity:.5;animation:1.4s ease-in-out infinite pad-breathe}@keyframes pad-breathe{0%,to{opacity:.34}50%{opacity:.6}}.pad--ready{animation:.32s cubic-bezier(.2,.9,.25,1) pad-arrive}@keyframes pad-arrive{0%{opacity:.35;scale:.985}}.pad--missing{border-color:var(--edge);background:var(--bg-raise);color:var(--muted);cursor:default}.pad--missing .pad__key{color:var(--edge)}.pad.is-hit{animation:.3s cubic-bezier(.2,1.3,.35,1) pad-hit,.3s ease-out pad-lift}.pad.is-hit:after{animation:.46s cubic-bezier(.15,.8,.3,1) pad-glow}@keyframes pad-hit{0%{filter:brightness(2);scale:.945}38%{filter:brightness(1.25);scale:1.012}to{filter:brightness();scale:1}}@keyframes pad-lift{0%{box-shadow:inset 0 1px 0 hsl(var(--hue) 90% 85% / .3), 0 0 22px hsl(var(--hue) 95% 60% / .5), 0 1px 2px #0006;border-color:hsl(var(--hue) 90% 72% / .9)}}@keyframes pad-glow{0%{opacity:1;scale:.6}to{opacity:0;scale:1.35}}.grid--editing .pad{cursor:grab;animation:1.7s ease-in-out infinite pad-wiggle}.grid--editing .pad:nth-child(3n+2){animation-delay:-.57s}.grid--editing .pad:nth-child(3n){animation-delay:-1.13s}.pad--editing .pad__key{color:var(--muted);font-size:15px}.pad.is-dragging{z-index:2;cursor:grabbing;filter:brightness(1.25);box-shadow:inset 0 1px 0 hsl(var(--hue) 90% 85% / .25), 0 12px 28px #000b;transition:none;animation:none;scale:1.07}@keyframes pad-wiggle{0%,to{rotate:-.45deg}50%{rotate:.45deg}}.hint{color:var(--muted);text-align:center;flex:none;padding:0 4px;font-size:11px;line-height:1.5}.linkish{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.sheet-backdrop{z-index:10;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#000c;align-items:flex-end;animation:.22s ease-out fade-in;display:flex;position:fixed;inset:0}.sheet{width:100%;max-height:85dvh;padding:16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));background:var(--bg-sheet);border-top:1px solid #ffffff14;border-radius:20px 20px 0 0;flex-direction:column;gap:14px;animation:.32s cubic-bezier(.16,1.1,.3,1) sheet-up;display:flex;overflow-y:auto;box-shadow:0 -20px 50px #000a}.sheet:before{content:"";background:#ffffff26;border-radius:999px;flex:none;width:36px;height:4px;margin:-4px auto 2px}.sheet__head,.sheet .field,.sheet__foot{animation:.32s cubic-bezier(.2,.9,.25,1) backwards sheet-item}.sheet .field:first-of-type{animation-delay:40ms}.sheet .field:nth-of-type(2){animation-delay:70ms}.sheet .field:nth-of-type(3){animation-delay:.1s}.sheet .field:nth-of-type(4){animation-delay:.13s}.sheet__foot{animation-delay:.16s}@keyframes sheet-up{0%{translate:0 100%}}@keyframes sheet-item{0%{opacity:0;translate:0 8px}}@keyframes fade-in{0%{opacity:0}}.sheet__head{align-items:center;gap:10px;display:flex}.sheet__swatch{border:1px solid hsl(var(--hue) 60% 60% / .5);background:hsl(var(--hue) 80% 58% / .55);border-radius:7px;flex:none;width:22px;height:22px;transition:background-color .12s linear,border-color .12s linear}.sheet__title{flex:1;font-size:15px}.sheet__foot{justify-content:space-between;gap:8px;margin-top:2px;display:flex}.field{flex-direction:column;gap:7px;display:flex}.field__label{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:700}.field__label em{color:var(--text);font-style:normal}.field__input{border:1px solid var(--edge);background:var(--bg);color:var(--text);font:inherit;border-radius:10px;padding:10px 12px;font-size:16px;transition:border-color .16s ease-out,box-shadow .16s ease-out}.field__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);outline:none}.field__input-range{accent-color:var(--accent)}.field__hue{accent-color:#0000;appearance:none;background:linear-gradient(90deg,#e83030,#e8e830,#30e830,#30e8e8,#3030e8,#e830e8,#e83030);border-radius:999px;height:22px}.field__hue::-webkit-slider-thumb{appearance:none;background:0 0;border:2px solid #fff;border-radius:50%;width:18px;height:18px;box-shadow:0 0 0 1px #0006}.chips{gap:6px;display:flex}.chip{border:1px solid var(--edge);background:var(--bg);min-height:44px;color:var(--muted);font:inherit;cursor:pointer;border-radius:10px;flex:1;padding:9px 0;font-weight:700}.chip--on{background:var(--accent);color:#fff;border-color:#0000}@media (orientation:landscape) and (height<=560px){.app{padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));gap:6px}.chrome{flex:none;align-items:center;gap:10px;display:flex}.banks{flex:1;order:-1}.bar{flex:none;gap:10px}.bar__title{display:none}.bar__volume input{width:108px}.btn,.bar__volume input{height:40px;min-height:40px}.bank{min-height:40px}.grid{grid-template-columns:repeat(6,1fr);gap:8px}.pad__label{font-size:clamp(11px,1.6vw,14px)}.hint{font-size:10px}.sheet{max-height:100dvh}}@media (prefers-reduced-motion:reduce){.pad.is-hit{animation:.12s ease-out pad-hit}.pad.is-hit:after,.pad--loading,.pad--ready,.grid--editing .pad,.sheet,.sheet:before,.sheet__head,.sheet .field,.sheet__foot,.sheet-backdrop{animation:none}.pad--loading{opacity:.5}@keyframes pad-hit{0%{filter:brightness(1.8)}to{filter:brightness()}}}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}