*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow-x:hidden}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%}.visual-panel{position:relative;width:100%;height:100%}.visual-panel canvas{display:block;width:100%;height:100%}.scope-mini{width:200px;height:100px;background:#0f172ab3;border-radius:10px;border:1px solid rgba(99,102,241,.35)}@media(prefers-color-scheme:light){.scope-mini{background:#ecf4ffd9;border:1px solid rgba(79,70,229,.3)}}.visual-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94a3b8cc;font-size:.85rem;letter-spacing:.08em}.visual-loading span{background:#0f172a99;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(99,102,241,.35)}:root{--primary-color: #6366f1;--secondary-color: #8b5cf6;--bg-dark: #0b0f14;--bg-panel: hsla(230, 20%, 8%, .38);--text-primary: #f1f5f9;--text-secondary: #94a3b8;--border-color: hsla(0, 0%, 100%, .12);--shadow-xl: 0 22px 48px rgba(5, 8, 16, .55);--glass-blur: 10px}@media(prefers-color-scheme:light){:root{--primary-color: #5b21b6;--secondary-color: #0891b2;--bg-dark: #faf8f5;--bg-panel: hsla(30, 40%, 98%, .92);--text-primary: #0f172a;--text-secondary: #334155;--border-color: hsla(220, 20%, 75%, .25);--shadow-xl: 0 12px 32px rgba(15, 23, 42, .08)}body{color:var(--text-primary);background:linear-gradient(135deg,#fdfbf7,#f5f3f0)}.visual-card{background:radial-gradient(circle at 50% 45%,#f0f4ff,#dbeafe);box-shadow:0 10px 30px #0f172a1a}.visual-overlay{color:#0f172ad9;font-weight:500;background:linear-gradient(160deg,#fffdfae0,#f9f7f2d1)}.panel{background:#fffefcb3;border:1px solid rgba(148,163,184,.2);box-shadow:0 8px 24px #0f172a0f}.scope-dock{background:#f8f6f3d9;border:1px solid rgba(148,163,184,.25)}.preset-banner-preview{box-shadow:0 6px 16px #0000001f,inset 0 1px #fff3;filter:grayscale(1) brightness(.8) contrast(.85)}.preset-dropdown-container:hover .preset-banner-preview{box-shadow:0 15px 35px #00000040,0 0 25px #8b5cf64d,0 0 50px #3b82f633,inset 0 1px #fff6;filter:grayscale(0) brightness(1.15) saturate(1.35) contrast(1.05)}.preset-dropdown{background:linear-gradient(180deg,#fffffff2,#f8f7f5fa);border-color:#94a3b859;color:var(--text-primary);background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230f172a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}.preset-dropdown:hover{border-color:#8b5cf699;background:linear-gradient(180deg,#fffffffa,#f8f7f5);box-shadow:0 4px 12px #6366f133,0 0 16px #8b5cf61f,inset 0 1px #ffffff80}.preset-dropdown option{background:#fafaf9;color:#0f172a}.delay-sync-controls{background:#fcfbf9eb;border-color:#94a3b833}.delay-sync-controls select,.lfo-target-select select{background:#f8f7f5f2;border-color:#94a3b838}.adsr-preview-bg{fill:#f1f5f9e6}.keyboard-guide{background:#faf9f7e6;border-color:#94a3b833}.keyboard-guide-item kbd{background:#f3f2f0f2;border-color:#94a3b847;color:#1e293b;font-weight:500}.keyboard-guide-tip{color:#334155;font-weight:500}.seq-step-meta{color:#64748b;font-weight:500}.seq-play{background:linear-gradient(135deg,#8b5cf6e0,#3b82f6d9);color:#fff;box-shadow:0 6px 20px #8b5cf640}.seq-step{background:#f8f7f5f2;border-color:#94a3b838;color:#475569}.seq-step.on{background:#f1f5f9;color:#0f172a;border-color:#6366f166;font-weight:600}.sequencer-editor{background:#faf9f7f2;border-color:#94a3b840}.sequencer-editor label{color:#334155;font-weight:500}.sequencer-editor-grid select{background:#fffefce6;border:1px solid rgba(148,163,184,.35);color:#0f172a;font-weight:500}.sequencer-editor-grid select:hover{border-color:#8b5cf673}.seq-toggle{background:#f1f5f9cc;border-color:#94a3b847;color:#334155;font-weight:500}.seq-toggle.enabled{background:#8b5cf626;border-color:#8b5cf659;color:#5b21b6}.app-footer{color:#1e293b80}.capture-chip{background:#3b82f61f;color:#2563eb;border-color:#3b82f652}.capture-chip.active{background:#10b9811f;color:#059669;border-color:#10b9814d}.monitor-hint{color:#1e293b99}.key-white{background:linear-gradient(180deg,#fafaf9,#f5f5f4);border:1px solid rgba(100,116,139,.25)}.key-white .key-label{color:#1e293b;font-weight:600}.key-white:active,.key-white:hover,.key-white.key-active{background:linear-gradient(180deg,#f1f0ef,#e7e5e4);box-shadow:inset 0 -4px 8px #00000026}.knob-circle{background:linear-gradient(145deg,#f8f7f5f2,#f1f0ee);border-color:#94a3b840}.slider{background:#e2e8f099}}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-dark);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;user-select:none;-webkit-user-select:none}.app-page{min-height:100vh;display:flex;flex-direction:column;gap:20px;padding:24px clamp(16px,4vw,48px) 48px}.app-grid{display:grid;gap:20px;grid-template-columns:minmax(720px,1fr) minmax(360px,32vw);align-items:start}.col-left{display:grid;gap:20px;align-content:start}.visual-card{position:relative;aspect-ratio:16 / 9;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-xl);background:radial-gradient(circle at 50% 50%,#0f172a,#02040a)}.visual-card canvas{width:100%;height:100%;display:block}.visual-overlay{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;background:linear-gradient(160deg,#090c18a6,#060810c7);color:#ffffffbf;font-size:.95rem;letter-spacing:.02em}.visual-overlay[aria-hidden=true]{opacity:0;pointer-events:none}.scope-dock{position:absolute;right:18px;bottom:18px;padding:10px;border-radius:14px;-webkit-backdrop-filter:blur(calc(var(--glass-blur) * .6));backdrop-filter:blur(calc(var(--glass-blur) * .6));background:#0a101ab3;border:1px solid rgba(99,102,241,.35);box-shadow:0 12px 28px #02040873}.col-right{display:grid;gap:16px;max-height:calc(100vh - 96px);position:sticky;top:16px;overflow-y:auto;padding-right:4px}.col-right::-webkit-scrollbar{width:6px}.col-right::-webkit-scrollbar-thumb{background:#94a3b859;border-radius:999px}.panel{backdrop-filter:blur(var(--glass-blur)) saturate(1.1);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.1);background:var(--bg-panel);border:1px solid var(--border-color);border-radius:18px;padding:18px 20px;box-shadow:0 12px 36px #00000059;display:flex;flex-direction:column;gap:16px}.panel h2,.panel h3{font-size:1rem;font-weight:600;letter-spacing:.03em;color:var(--text-primary)}.status-panel{flex-direction:row;align-items:center;justify-content:space-between;gap:18px}.status-meta{display:flex;align-items:center;gap:12px}.status-actions{display:flex;gap:12px;align-items:center}.status-text strong{display:block;font-size:1.1rem}.status-text span{display:block;color:var(--text-secondary);font-size:.82rem;letter-spacing:.01em}.status-dot{width:14px;height:14px;border-radius:50%;background:#fb923c;box-shadow:0 0 16px #fb923ca6}.status-dot.online{background:#22c55e;box-shadow:0 0 18px #22c55ea6}.start-chip{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;border:none;padding:.65rem 1.4rem;border-radius:999px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s,opacity .2s;box-shadow:0 18px 32px #6366f159}.start-chip:not(:disabled):hover{transform:translateY(-1px)}.start-chip:disabled{opacity:.55;cursor:default;box-shadow:none}.capture-chip{background:#2563eb1f;color:#91b4ff;border:1px solid rgba(147,197,253,.4);padding:.55rem 1.2rem;border-radius:999px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}.capture-chip:hover{transform:translateY(-1px);background:#3b82f62e;box-shadow:0 12px 24px #2563eb40}.capture-chip.active{background:#0e749052;color:#a5f3fc;border-color:#2dd4bf73;box-shadow:0 10px 24px #0d94884d}.capture-chip:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}.monitor-panel{gap:12px}.monitor-header{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--text-secondary)}.monitor-value{font-family:Courier New,monospace;color:var(--text-primary)}.monitor-hint{font-size:.78rem;color:#94a3b8bf;line-height:1.4}.capture-hint{font-size:.82rem;color:var(--text-secondary);line-height:1.6}.capture-hint p+p{margin-top:.6rem}.sequencer-panel{display:flex;flex-direction:column;gap:1rem}.sequencer-header{display:flex;flex-direction:column;gap:.75rem}.seq-transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.seq-play{background:linear-gradient(135deg,#6366f1e6,#8b5cf6e6);border:none;color:#fff;font-weight:600;padding:.55rem 1.25rem;border-radius:999px;cursor:pointer;box-shadow:0 12px 24px #6366f159;transition:transform .2s,box-shadow .2s}.seq-play.playing{background:linear-gradient(135deg,#ef4444e6,#f472b6d9);box-shadow:0 12px 24px #ef444459}.seq-play:disabled{opacity:.6;cursor:default;box-shadow:none}.seq-play:not(:disabled):hover{transform:translateY(-1px)}.seq-bpm{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-secondary)}.seq-bpm input{width:72px;padding:.35rem .5rem;border-radius:8px;border:1px solid rgba(148,163,184,.3);background:#0f172a8c;color:var(--text-primary);font-weight:600}.seq-setting-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.seq-setting-row label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-secondary)}.seq-setting-row select,.seq-setting-row input[type=number]{padding:.4rem .55rem;border-radius:8px;border:1px solid rgba(148,163,184,.3);background:#0f172a8c;color:var(--text-primary);min-width:70px}.seq-setting-row input[type=range]{width:120px}.seq-randomize{padding:.45rem .75rem;border-radius:8px;border:1px solid rgba(148,163,184,.3);background:linear-gradient(135deg,#6366f133,#8b5cf633);color:var(--text-primary);font-size:1.2rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.seq-randomize:hover{background:linear-gradient(135deg,#6366f159,#8b5cf659);border-color:#6366f180;transform:scale(1.05) rotate(10deg)}.seq-randomize:active{transform:scale(.95) rotate(-10deg)}.sequencer-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.5rem}.seq-step{border:1px solid rgba(148,163,184,.2);border-radius:12px;background:#0f172a8c;color:var(--text-secondary);padding:.55rem;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:.2rem;transition:transform .2s,border-color .2s,box-shadow .2s;min-height:76px}.seq-step:hover{transform:translateY(-2px);border-color:var(--primary-color)}.seq-step.on{color:var(--text-primary);border-color:#6366f173;box-shadow:0 12px 20px #6366f140}.seq-step.active{border-color:#10b981a6;box-shadow:0 0 0 2px #10b98133}.seq-step.selected{border-color:#f472b6a6;box-shadow:0 0 0 2px #f472b633}.seq-step-index{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}.seq-step-note{font-weight:600;font-size:.95rem}.seq-step-meta{font-size:.72rem;color:#e2e8f0b3}.seq-inline-value{font-size:.78rem;color:var(--text-secondary)}.sequencer-editor{border:1px solid rgba(148,163,184,.25);border-radius:14px;padding:.75rem 1rem;background:#0f172a80;display:flex;flex-direction:column;gap:.65rem}.sequencer-editor header{display:flex;justify-content:space-between;align-items:center;color:var(--text-secondary)}.sequencer-editor header strong{color:var(--text-primary)}.sequencer-editor-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.sequencer-editor-grid label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--text-secondary)}.sequencer-editor-grid input[type=range],.sequencer-editor-grid select{width:100%}.seq-toggle{border:1px solid rgba(148,163,184,.3);border-radius:999px;background:#0f172a80;color:var(--text-secondary);padding:.35rem .8rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.seq-toggle.enabled{border-color:#6366f199;background:#6366f133;color:var(--text-primary)}.preset-selector-panel{overflow:visible}.preset-grid{display:flex;flex-direction:column;gap:1rem}.preset-card{position:relative;display:flex;flex-direction:column;gap:.75rem;border:none;padding:0;background:none;cursor:pointer;border-radius:12px;overflow:hidden;text-align:left;transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease,filter .45s ease;background:linear-gradient(160deg,#121a28d9,#0f1420f2)}.preset-card:focus-visible{outline:2px solid rgba(139,92,246,.6);outline-offset:4px}.preset-card-banner{width:100%;height:120px;background-size:cover;background-position:center;border-radius:12px;box-shadow:inset 0 1px #ffffff14;filter:grayscale(.25) brightness(.78) contrast(.92);transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .6s ease,box-shadow .6s ease}.preset-card-banner:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,#080c12ad,#0a0c1259 40%,#1a253f1f);opacity:1;transition:opacity .6s ease}.preset-card-banner{background-blend-mode:screen}.preset-card-banner-0{background-image:linear-gradient(135deg,#311b92d9,#5e35b19e),url(/banners/3.png)}.preset-card-banner-1{background-image:linear-gradient(135deg,#004d40e0,#00796b99),url(/banners/3.png)}.preset-card-banner-2{background-image:linear-gradient(135deg,#0d47a1db,#1976d294),url(/banners/3.png)}.preset-card-banner-3{background-image:linear-gradient(135deg,#880e4fe0,#c2185b99),url(/banners/3.png)}.preset-card-banner-4{background-image:linear-gradient(135deg,#1e2a3de6,#384a5d99),url(/banners/3.png)}.preset-card-info{display:flex;flex-direction:column;gap:.25rem;padding:0 .25rem .75rem}.preset-card-info strong{font-size:1.05rem;letter-spacing:.01em;color:var(--text-primary)}.preset-card-info span{font-size:.85rem;color:#e2e8f0a6;letter-spacing:.01em}.preset-card:hover .preset-card-banner,.preset-card.active .preset-card-banner{transform:translateY(-6px) scale(1.045);filter:grayscale(0) brightness(1.12) saturate(1.22) contrast(1.05);box-shadow:0 24px 48px #040a168c,0 0 30px #546eff59}.preset-card:hover .preset-card-banner:after,.preset-card.active .preset-card-banner:after{opacity:.35}.preset-card.active:after{content:"";position:absolute;inset:0;border-radius:12px;border:1px solid rgba(109,175,255,.38);pointer-events:none;box-shadow:0 0 0 1px #477dff40,inset 0 0 30px #1e40af2e}.lfo-target-select{display:flex;flex-direction:column;gap:8px;align-items:flex-start;color:var(--text-secondary);font-size:.85rem}.lfo-target-select select{width:100%;background:#0f172a99;border:1px solid rgba(148,163,184,.35);color:var(--text-primary);padding:.5rem .75rem;border-radius:8px;cursor:pointer;transition:border-color .2s,box-shadow .2s}.lfo-target-select select:hover{border-color:#6366f180}.lfo-target-select select:focus{outline:none;border-color:#6366f1b3;box-shadow:0 0 0 3px #6366f126}.delay-sync-controls{padding:.75rem .85rem;border-radius:10px;background:#0f172a73;border:1px solid rgba(148,163,184,.25)}.delay-sync-controls label{display:flex;align-items:center;gap:8px;font-size:.9em;color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.delay-sync-controls input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary-color)}.delay-sync-controls select{width:100%;background:#0f172a99;border:1px solid rgba(148,163,184,.35);color:var(--text-primary);padding:.5rem .75rem;border-radius:8px;cursor:pointer;margin-top:8px;transition:border-color .2s,box-shadow .2s;font-size:.88rem}.delay-sync-controls select:hover{border-color:#6366f180}.delay-sync-controls select:focus{outline:none;border-color:#6366f1b3;box-shadow:0 0 0 3px #6366f126}.keyboard-panel{gap:14px}.piano-wrap{width:100%;overflow-x:auto;overflow-y:visible;padding-bottom:6px}.piano-wrap::-webkit-scrollbar{height:6px}.piano-wrap::-webkit-scrollbar-thumb{background:#94a3b859;border-radius:999px}.piano{--white-count: 14;--keyW: clamp(36px, 4.2vw, 58px);--keyH: calc(var(--keyW) * 5.2);min-width:560px;width:calc(var(--white-count) * var(--keyW));height:var(--keyH);margin-inline:auto}.adsr-preview{display:flex;flex-direction:column;align-items:center;gap:6px}.adsr-preview svg{width:100%;max-width:260px}.adsr-preview-bg{fill:#0f172a8c}.adsr-preview-caption{font-size:.75rem;color:var(--text-secondary)}.keyboard-guide{margin-top:1rem;border:1px solid rgba(148,163,184,.25);border-radius:12px;padding:.75rem 1rem;background:#0f172a80}.keyboard-guide summary{cursor:pointer;font-weight:600;color:var(--text-primary)}.keyboard-guide summary::-webkit-details-marker{display:none}.keyboard-guide-grid{margin-top:.75rem;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}.keyboard-guide-item{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--text-secondary)}.keyboard-guide-item kbd{background:#0f172acc;border:1px solid rgba(148,163,184,.3);border-radius:6px;padding:.2rem .45rem;font-family:Courier New,monospace;color:var(--text-primary);font-size:.78rem}.keyboard-guide-tip{margin-top:.75rem;font-size:.78rem;color:#94a3b8b3}.app-footer{margin-top:28px;text-align:center;color:var(--text-secondary);letter-spacing:.06em;display:flex;flex-direction:column;gap:6px}.app-footer h1{font-size:clamp(1.6rem,2.5vw,2.2rem);color:var(--text-primary);font-weight:700}.app-footer p{font-size:.9rem}@media(max-width:1280px){.app-grid{grid-template-columns:minmax(0,1fr) minmax(320px,30vw)}}@media(max-width:980px){.app-page{gap:16px;padding:16px 14px 32px}.app-grid{grid-template-columns:1fr;gap:16px}.col-right{position:static;max-height:none;padding-right:0}.visual-card{aspect-ratio:4 / 3}}@media(max-width:640px){.panel{padding:16px}.controls-grid{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}.status-panel{flex-direction:column;align-items:stretch}.start-chip{width:100%;padding:.75rem 1.2rem}.piano{min-width:480px}.preset-banner-preview{height:100px}.keyboard-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:18px;align-items:start}.knob-container{display:flex;flex-direction:column;align-items:center;gap:8px}.knob-label{font-size:.85rem;color:var(--text-secondary);font-weight:500}.knob{width:82px;height:82px;cursor:pointer;touch-action:none}.knob-circle{width:100%;height:100%;background:#1e293bb3;border:3px solid rgba(71,85,105,.65);border-radius:50%;position:relative;transition:border-color .2s,box-shadow .2s}.knob-active .knob-circle{border-color:var(--primary-color);box-shadow:0 0 16px #6366f199}.knob-indicator{position:absolute;top:10%;left:50%;width:4px;height:35%;background:var(--secondary-color);border-radius:2px;transform-origin:bottom center;transform:translate(-50%)}.knob-value{font-size:.8rem;color:var(--text-primary);font-weight:600;font-family:Courier New,monospace;min-width:80px;text-align:center}.slider-container{display:flex;flex-direction:column;gap:10px}.slider-header{display:flex;justify-content:space-between;align-items:center;color:var(--text-secondary);font-size:.88rem}.slider-label{font-weight:500}.slider-value{font-family:Courier New,monospace;color:var(--text-primary)}.slider{width:100%;height:6px;border-radius:999px;background:#0f172a99;outline:none;-webkit-appearance:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));box-shadow:0 6px 16px #6366f180;transition:transform .2s}.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));border:none}.keyboard{display:flex;gap:2px;justify-content:center;flex-wrap:nowrap;height:100%}.key{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .08s ease;touch-action:none;display:flex;align-items:flex-end;justify-content:center}.key-white{width:calc(var(--keyW));height:calc(var(--keyH));background:linear-gradient(180deg,#f4f7fb,#dfe3ec);border:1px solid rgba(51,51,51,.3);border-radius:0 0 10px 10px;box-shadow:inset 0 -6px 12px #00000026;color:#333}.key-white:active,.key-white:hover,.key-white.key-active{transform:translateY(2px);background:linear-gradient(180deg,#e4e8ef,#ccd4e2);box-shadow:inset 0 -4px 8px #0003}.key-black{width:calc(var(--keyW) * .62);height:calc(var(--keyH) * .66);background:linear-gradient(180deg,#181d2a,#05070c);border-radius:0 0 8px 8px;border:1px solid rgba(0,0,0,.65);margin:0 calc(var(--keyW) * -.32);z-index:2;box-shadow:inset 0 -6px 14px #0009;color:#fff}.key-black:active,.key-black:hover,.key-black.key-active{transform:translateY(2px);background:linear-gradient(180deg,#2a3245,#090c12)}.key.key-active{filter:drop-shadow(0 0 12px rgba(99,102,241,.5))}.key-label{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:.75rem;font-weight:600;pointer-events:none}.key-black .key-label{font-size:.68rem;bottom:6px;color:#ffffffd9}img,button,.knob,.key{-webkit-user-drag:none;-webkit-touch-callout:none}