/*! Puntone — Copyright (c) 2026 kota kato. All rights reserved. See /LICENSE */
:root{color-scheme:dark;--bg: #111418;--fg: #e6e6e6;--muted: #8a8f98;--accent: #7fbfff;--button-bg: #2a2f36;--button-bg-hover: #353b44}*{box-sizing:border-box}html{margin:0;padding:0;background:var(--bg);height:100%}body{margin:0;padding:0;color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;height:100%;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) calc(var(--playback-glow, 0) * 80%),transparent) 0%,transparent 90%),var(--bg)}button,h2,.keyboard-wrap,.settings-close,.key{user-select:none;-webkit-user-select:none}main{max-width:1300px;margin:0 auto;padding:16px 20px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom));min-height:100vh;min-height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}.topbar{width:100%;flex:0 0 auto;display:flex;align-items:center;gap:12px;position:relative;z-index:9}.topbar-left{display:flex;align-items:center;gap:16px}.topbar-logo{display:flex;align-items:center}.logo-img{height:44px;width:auto;display:block}.stop-btn{display:flex;align-items:center;gap:6px;background:transparent;color:var(--fg);border:1px solid #5a5f68;border-radius:4px;padding:6px 14px;font-size:.85rem;cursor:pointer;font-family:inherit}.stop-btn:hover{background:var(--button-bg)}.stop-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stop-btn[hidden]{display:flex;visibility:hidden}.topbar-controls{display:flex;justify-content:flex-end;align-items:center;gap:8px}.icon-btn{width:32px;height:32px;border-radius:50%;background:var(--button-bg);color:var(--fg);border:1px solid #3a3f48;font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;padding:0}.icon-btn:hover{background:var(--button-bg-hover)}.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-btn[hidden]{display:none}.icon-btn[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.rec-btn{background:transparent;border:2px solid #d9534f;color:#d9534f}.rec-btn:hover{background:#d9534f26}.rec-btn .icon-rec-stop,.rec-btn.recording .icon-rec-dot{display:none}.rec-btn.recording .icon-rec-stop{display:block}.rec-btn.recording{background:#d9534f;border-color:#d9534f;color:#fff}.rec-btn.recording:hover{background:#c94742}#playback-glow-toggle .icon-eye-off,#playback-glow-toggle[aria-pressed=false] .icon-eye{display:none}#playback-glow-toggle[aria-pressed=false] .icon-eye-off{display:block}#playback-glow-toggle[aria-pressed=false]{color:var(--muted)}#fullscreen-toggle .icon-fs-exit,#fullscreen-toggle[aria-pressed=true] .icon-fs-enter{display:none}#fullscreen-toggle[aria-pressed=true] .icon-fs-exit{display:block}.display-area{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:14px}.display{min-width:0;overflow:hidden;font-size:1.4rem;font-variant-numeric:tabular-nums;color:var(--accent);display:flex;align-items:center;justify-content:center;white-space:nowrap}.mode-chip-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}.mode-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;background:transparent;border:none;padding:2px 6px;font-family:inherit;cursor:grab;touch-action:none}.mode-chip:active{cursor:grabbing}.mode-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}.mode-neighbor{font-size:.7rem;color:#4c5866;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:90px;flex-shrink:0;cursor:pointer}.mode-neighbor:hover{color:var(--muted)}#mode-prev{text-align:right}#mode-next{text-align:left}.mode-current{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;background:var(--button-bg);border:1px solid #3a3f48;color:var(--fg);font-size:.9rem;white-space:nowrap}.mode-chip:hover .mode-current{background:var(--button-bg-hover)}.mode-caret{font-size:.6rem;color:var(--muted)}.mode-list{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);min-width:220px;max-height:70vh;overflow-y:auto;background:#1a1d22;border:1px solid #2a2f36;border-radius:10px;box-shadow:0 12px 30px #00000080;padding:6px;z-index:11;display:flex;flex-direction:column;gap:2px}.mode-list[hidden]{display:none}.mode-list-item{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:none;border-radius:6px;color:var(--fg);font-size:.85rem;font-family:inherit;padding:9px 10px;cursor:pointer;text-align:left;text-decoration:none}.mode-list-item:hover{background:var(--button-bg-hover)}.mode-list-item[aria-selected=true]{background:var(--accent);color:#111418}.mode-list-item[aria-selected=true] .mode-btn-badge{color:#111418;border-color:#111418}.mode-launcher{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;overflow-y:auto}.mode-launcher[hidden]{display:none}.mode-launcher-title{margin:0;color:var(--muted);font-size:.9rem;letter-spacing:.06em}.mode-launcher-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:720px}.mode-launcher-btn{display:inline-flex;align-items:center;gap:8px;padding:18px 26px;border-radius:12px;background:var(--button-bg);color:var(--fg);border:1px solid #3a3f48;font-size:1rem;font-family:inherit;cursor:pointer}.mode-launcher-btn:hover{background:var(--button-bg-hover)}.mode-launcher-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mode-dots{position:absolute;left:calc(50% - 150px);bottom:6px;transform:translate(-50%);display:flex;gap:6px;padding:4px 9px;border-radius:999px;background:#1114188c;pointer-events:none;z-index:3}.mode-dots i{width:5px;height:5px;border-radius:50%;background:#38424e}.mode-dots i.on{background:var(--accent)}@keyframes mode-slide-from-right{0%{transform:translate(5%);opacity:.2}to{transform:translate(0);opacity:1}}@keyframes mode-slide-from-left{0%{transform:translate(-5%);opacity:.2}to{transform:translate(0);opacity:1}}.perform-area.mode-slide-left{animation:mode-slide-from-right .28s ease-out}.perform-area.mode-slide-right{animation:mode-slide-from-left .28s ease-out}.panel-pull{display:flex;align-items:center;justify-content:center;width:100px;height:16px;flex:0 0 auto;padding:0;margin:0;background:#171b21;border:1px solid #232a33;border-top:none;border-radius:0 0 10px 10px;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;position:fixed;top:0;left:50%;transform:translate(-50%);z-index:20}.panel-pull-grip{width:72px;height:4px;border-radius:2px;background:#3a3f48}.panel-pull:hover .panel-pull-grip,.panel-pull[aria-expanded=true] .panel-pull-grip{background:var(--accent)}.main-row{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch}.quick-panel{position:fixed;top:0;left:0;right:0;z-index:19;max-height:50vh;min-height:0;background:#171b21;border:1px solid #232a33;border-radius:10px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:none}.quick-panel.open{display:block}.quick-panel-inner{display:flex;flex-direction:column;gap:14px;padding:6px 14px 14px}.icon-toggle-row{display:flex;justify-content:flex-end;gap:8px}.group-frame{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto auto;gap:10px}.group-frame>.takes{grid-column:1;grid-row:1 / 3}.group-right-top{grid-column:2;grid-row:1;display:grid;grid-template-columns:auto 1fr 2fr;gap:10px}.group-right-top>#dp-vol-toggle{grid-column:1}.group-right-top>.timbre-bar-group{grid-column:2}.group-right-top>#decay-glide-combo{grid-column:3}.group-right-bottom{grid-column:2;grid-row:2;min-width:0}.group-right-top>*{background:var(--button-bg);border:1px solid #3a3f48;border-radius:10px;padding:6px 10px}.group-right-top>#decay-glide-combo{background:transparent;border:none;padding:0}.control-pill{justify-self:center;align-self:center;border-radius:999px;background:var(--bg);border:1px solid #3a3f48}.group-vol-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;width:fit-content;padding:8px 14px;color:var(--muted);cursor:pointer;font-family:inherit}.group-vol-btn svg{width:18px;height:18px}.group-vol-btn:hover{background:#ffffff0f}.group-vol-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.group-vol-btn[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.group-vol-btn[hidden]{display:none}.setting-combo{display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:4px 8px;font-size:.82rem}.setting-combo[hidden]{display:none}.setting-combo .setting-row{display:contents;font-size:inherit}.setting-combo .setting-row[hidden]{display:none}.setting-combo .setting-label{white-space:nowrap}.setting-label-wrap{position:relative;display:inline-flex;align-items:center;gap:4px}.setting-help{flex-shrink:0;width:15px;height:15px;padding:0;border-radius:50%;border:1px solid var(--muted);background:transparent;color:var(--muted);font-size:.62rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit}.setting-help:hover,.setting-help[aria-expanded=true]{color:var(--fg);border-color:var(--fg)}.setting-help-pop{position:absolute;top:100%;left:0;margin-top:6px;width:max-content;max-width:220px;background:#1a1d22;border:1px solid #2a2f36;border-radius:8px;padding:8px 10px;font-size:.78rem;line-height:1.4;color:var(--fg);white-space:normal;box-shadow:0 12px 30px #00000080;z-index:12}.setting-help-pop[hidden]{display:none}.setting-combo .setting-number{width:60px}#decay-number{width:42px;justify-self:start}#decay-glide-combo .setting-unit,#master-volume-combo .setting-unit,#metronome-combo .setting-unit{grid-column:auto;justify-self:end;text-align:right;white-space:nowrap}#metronome-toggle.icon-btn{width:20px;height:20px;flex-shrink:0}#metronome-toggle svg{width:13px;height:13px}.setting-combo .setting-range{width:auto;min-width:0}.setting-combo .setting-range{-webkit-appearance:none;appearance:none;height:28px;background:transparent;outline:none;cursor:pointer}.setting-combo .setting-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill, 50%),#2a2f36 var(--fill, 50%),#2a2f36 100%)}.setting-combo .setting-range::-moz-range-track{height:6px;border-radius:999px;border:none;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill, 50%),#2a2f36 var(--fill, 50%),#2a2f36 100%)}.setting-combo .setting-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-4px;border-radius:50%;background:transparent;border:none;cursor:pointer}.setting-combo .setting-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:transparent;border:none;cursor:pointer}@media(max-width:640px){.group-frame{grid-template-columns:1fr}.group-frame>.takes{grid-column:1;grid-row:1}.group-right-top{grid-column:1;grid-row:2;grid-template-columns:repeat(2,1fr)}.group-right-bottom{grid-column:1;grid-row:3}.group-right-top>#decay-glide-combo{grid-column:1 / -1}}.consonance-graph{position:absolute;inset:0;z-index:1;pointer-events:none}.consonance-canvas{display:block;width:100%;height:100%}.settings-panel{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:#1a1d22;border-left:1px solid #2a2f36;box-shadow:-8px 0 24px #0006;padding:24px;transform:translate(100%);transition:transform .25s ease-out;display:flex;flex-direction:column;gap:20px;z-index:10}.settings-panel.open{transform:translate(0)}#settings-panel{padding-right:48px}.modal-backdrop{position:fixed;inset:0;background:#0000008c;z-index:8}.settings-close{background:transparent;color:var(--muted);border:none;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px;font-family:inherit}.settings-close:hover{color:var(--fg)}.settings-close-floating{position:absolute;top:24px;right:16px;height:32px;display:inline-flex;align-items:center}.settings-panel-body{display:flex;flex-direction:column;flex:1 1 auto;gap:16px;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}.setting-row{display:grid;grid-template-columns:80px 1fr 80px;align-items:center;gap:8px 12px;font-size:.9rem;color:var(--fg)}.setting-row[hidden]{display:none}.setting-row .setting-unit{grid-column:2 / 4;text-align:right;font-size:.8rem}.setting-label{color:var(--muted);white-space:nowrap}.setting-range{width:100%}.setting-number{width:80px;background:var(--button-bg);color:var(--fg);border:1px solid #444;border-radius:3px;padding:4px 8px;font-family:inherit;font-variant-numeric:tabular-nums;text-align:right}.setting-number:focus{outline:1px solid var(--accent)}.setting-select{grid-column:2 / 4;background:var(--button-bg);color:var(--fg);border:1px solid #444;border-radius:3px;padding:4px 8px;font-family:inherit;font-size:.85rem}.setting-select:focus{outline:1px solid var(--accent)}.setting-radio-group{grid-column:2 / 4;display:flex;flex-direction:column;gap:6px}.setting-radio{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--fg)}.setting-radio input[type=radio]{margin:0;accent-color:var(--accent)}.setting-radio-badge{font-size:.75em;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 7px;line-height:1.4}.setting-radio-sep{border-top:1px solid #2a2f36;margin:4px 0}.setting-unit{color:var(--muted);white-space:nowrap}.mode-btn-badge{font-size:.75em;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 7px;line-height:1.4}.support-link{align-self:center;margin-top:8px;background:var(--button-bg);color:var(--fg);border-radius:4px;padding:8px 24px;font-size:.9rem;text-decoration:none;user-select:none;-webkit-user-select:none}.support-link:hover{background:var(--button-bg-hover)}.support-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.support-link-group{display:flex;align-items:center;gap:8px;align-self:center}.support-link-group .support-link{margin-top:8px}.support-link-secondary{padding:4px 10px;font-size:.75rem;opacity:.7}.support-link-secondary:hover{opacity:1}.feedback-link{align-self:center;margin-top:4px;color:var(--muted);font-size:.8rem;text-decoration:underline}.feedback-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.share-link-btn{background:none;border:none;padding:0;font-family:inherit;cursor:pointer}.support-modal-overlay{position:fixed;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20}.support-modal{background:#1a1d22;border:1px solid #2a2f36;border-radius:8px;box-shadow:0 8px 32px #00000080;padding:24px 28px;max-width:380px;width:calc(100vw - 48px);display:flex;flex-direction:column;gap:8px;text-align:center}.support-modal h2{margin:0;font-size:1.05rem;color:var(--fg)}.support-modal p{margin:8px 0 0;font-size:.85rem;line-height:1.7;color:var(--muted)}.support-modal-actions{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 32px}.support-modal .support-link-group .support-link{margin-top:0}.support-modal .support-modal-cta{background:var(--accent);color:#111418;font-weight:600}.support-modal .support-modal-cta:hover{filter:brightness(1.1)}.support-modal-close{background:transparent;border:none;color:var(--muted);font-size:.8rem;cursor:pointer;padding:8px 12px;font-family:inherit}.support-modal-close:hover{color:var(--fg)}.copyright-note{align-self:center;margin-top:4px;font-size:.7rem;color:var(--muted);user-select:none;-webkit-user-select:none}.perform-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px;margin-top:calc(10px + var(--panel-shrink, 0px));position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}main.chord-active .perform-area{flex-direction:row;align-items:stretch;gap:32px}.voice-count-bar{display:flex;justify-content:flex-end;gap:6px}.voice-count-bar[hidden]{display:none}.voice-count-btn{width:34px;height:28px;border-radius:4px;background:var(--button-bg);color:var(--fg);border:1px solid #3a3f48;font-size:.85rem;font-family:inherit;cursor:pointer}.voice-count-btn:hover{background:var(--button-bg-hover)}.voice-count-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.voice-count-btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#111418}.timbre-bar{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:13px}.timbre-bar[hidden]{display:none}.timbre-bar-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;background:none;border:none;padding:0}#notepicker-link.icon-btn{width:28px;height:28px;flex:none}.timbre-btn{width:auto;height:auto;padding:5px 12px;border:none;border-radius:999px;background:transparent;color:var(--muted);font-size:.72rem}.timbre-btn:hover{background:#ffffff0f}.timbre-btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#10141a;font-weight:600}.timbre-btn-icon{padding:4px}.timbre-btn-icon img{display:block;width:20px;height:20px;border-radius:50%;object-fit:cover}.keyboard-wrap{width:100%;flex:0 0 auto}.keyboard-wrap[hidden]{display:none}.pitch-pad{position:relative;flex:1;min-height:40px;min-width:0;border-radius:4px;overflow:hidden;cursor:crosshair;touch-action:none}.pitch-pad.disabled{display:none}.pitch-pad-canvas{position:absolute;inset:0;width:100%;height:100%}.kb-resize-handle,.pad-resize-handle{flex:0 0 auto;width:100%;height:24px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;touch-action:none;border-radius:4px}.kb-resize-handle[hidden],.pad-resize-handle[hidden]{display:none}.kb-resize-handle:hover,.kb-resize-handle.dragging,.pad-resize-handle:hover,.pad-resize-handle.dragging{background:#ffffff0f}.kb-resize-handle:before,.pad-resize-handle:before{content:"";width:72px;height:5px;border-radius:3px;background:var(--box-border, #3a3f48)}.kb-resize-handle:hover:before,.kb-resize-handle.dragging:before,.pad-resize-handle:hover:before,.pad-resize-handle.dragging:before{background:var(--muted)}.piano{--white-h: 160px;--black-h: 100px;--black-w: calc((100% / 12) * .6);--black-half: calc(var(--black-w) / 2);position:relative;width:100%;height:var(--white-h);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}.piano-whites{display:flex;width:100%;height:100%}.piano-blacks{position:absolute;top:0;left:0;width:100%;height:var(--black-h);pointer-events:none}.key{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;transition:background-color .05s linear}.key.white{flex:1 1 0;background:var(--key-base, #f4f1ea);color:#1a1a1a;border:1px solid rgba(0,0,0,.25);border-radius:0 0 4px 4px;margin-right:-1px}.key.white:last-child{margin-right:0}.key.black{position:absolute;top:0;width:var(--black-w);height:var(--black-h);background:var(--key-base, #1a1d22);color:#eee;border:1px solid #000;border-radius:0 0 3px 3px;z-index:2;pointer-events:auto}.key .key-name{font-size:1rem;font-weight:600;margin-top:4px}.key .key-label{font-size:.7rem;font-weight:400;opacity:.7}.key.black .key-label{opacity:.6}.key.white.active{background:var(--key-active, var(--accent));color:#0a0d12}.key.black.active{background:var(--key-active, #4a8ed4);color:#fff}.keyboard-pad{width:100%;display:flex;flex-direction:column;gap:4px}.keyboard-pan-row{position:relative;overflow:hidden;height:20px;border-radius:4px;background:#262a31;touch-action:none;cursor:grab}.keyboard-pan-row.panning{cursor:grabbing}.keyboard-pan-row .view-reset-btn{position:absolute;top:50%;right:2px;transform:translateY(-50%);width:18px;height:18px;font-size:.6rem}.keyboard-pan-world{position:relative;height:100%;width:calc(100% * var(--white-count) / var(--visible-whites, 12))}.keyboard-pan-tick{position:absolute;top:0;bottom:0;transform:translate(-50%);display:flex;align-items:center;font-size:.6rem;color:var(--fg);opacity:.6;white-space:nowrap}.keyboard-pan-tick:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:currentColor;opacity:.5}.keyboard-pan-tick{padding-left:4px}.keyboard-viewport{position:relative;overflow:hidden;border-radius:4px}.keyboard-strip{width:calc(100% * var(--white-count) / var(--visible-whites, 12));--black-w: calc((100% / var(--white-count)) * .6);--white-h: 100px;--black-h: 63px}.piano-view{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;gap:2px;padding-bottom:24px;box-sizing:border-box;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.piano-view[hidden]{display:none}.piano-row{display:flex;align-items:stretch;flex:1 1 0;min-height:0}.piano-row[data-row=unison]{flex:2 1 0}.piano-row-label{flex:none;width:40px;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--fg);opacity:.7;background:#262a31;border-radius:4px 0 0 4px}.piano-row-body{position:relative;flex:1 1 0;min-width:0;min-height:0;overflow:hidden;background:#1a1d22;border-radius:0 4px 4px 0}.piano-keyboard-host{width:100%}.piano-chord-btn{position:absolute;top:1px;bottom:1px;box-sizing:border-box;border-right:1px solid #000;background:hsl(var(--btn-hue) 24% 62%);transition:background-color .05s linear}.piano-chord-btn.offscreen{visibility:hidden}.piano-chord-btn.active{background:hsl(var(--btn-hue) 38% 82%)}.piano-rows-select{display:flex;flex-wrap:wrap;gap:4px}.piano-rows-select[hidden]{display:none}.piano-row-chip{padding:5px 12px;border:none;border-radius:999px;background:transparent;color:var(--muted);font-size:.72rem}.piano-row-chip[aria-pressed=true]{background:var(--accent);color:#10141a;font-weight:600}.keyboard-roll{width:100%;flex:0 0 auto;display:flex;flex-direction:column;gap:6px}.keyboard-roll[hidden]{display:none}.roll-toolbar{display:flex;justify-content:flex-end}.roll-voice-toggle{display:flex;gap:16px;font-size:.85rem}.roll-viewport{position:relative;overflow:hidden;border-radius:4px}.roll-strip{width:calc(100% * var(--white-count) / var(--visible-whites));--black-w: calc((100% / var(--white-count)) * .6);transition:transform .45s cubic-bezier(.22,.9,.35,1);will-change:transform}:root{--chord-root-size: 56px;--chord-root-black-size: 48px;--chord-root-gap: 10px}.chord-roots{position:relative;display:flex;flex-direction:column;gap:var(--chord-root-gap);align-items:flex-start;width:94px}.chord-root{width:var(--chord-root-size);height:var(--chord-root-size);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:#10130f;border:2px solid rgba(255,255,255,.25);cursor:grab;touch-action:none}.chord-root.black{position:absolute;left:46px;width:var(--chord-root-black-size);height:var(--chord-root-black-size);font-size:.9rem;color:#eee;z-index:1}.chord-root.ghost{opacity:.25}.chord-root-clone{position:fixed;margin:0;z-index:10;cursor:grabbing;box-shadow:0 6px 18px #0009;pointer-events:none}.chord-root-clone.snapback{transition:left var(--snapback-duration) ease,top var(--snapback-duration) ease}.chord-alpha{display:flex;flex:1;min-width:0;min-height:0;align-items:center;justify-content:center;padding:20px;user-select:none;-webkit-user-select:none}.chord-alpha[hidden]{display:none}.chord-alpha-layout{display:flex;align-items:stretch;justify-content:center;gap:14px;width:100%;height:100%;min-height:0}.chord-alpha-col{flex:0 0 auto;min-height:0;overflow-y:auto}.chord-alpha-graph-wrap{position:relative;min-height:0;flex:1;min-width:0;display:flex;align-items:center;justify-content:center}.chord-alpha-graph{position:relative}.chord-alpha-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.chord-alpha-edges line{stroke:#3a3f48;stroke-width:2}.chord-alpha-node{position:absolute;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:1px solid #3a3f48;background:#1a1f26;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.15;transition:background .1s,border-color .1s,box-shadow .1s}.chord-alpha-node .chord-alpha-node-name{font-size:.65rem}.chord-alpha-node .chord-alpha-node-sub{display:block;font-size:.48rem;color:var(--muted)}.chord-alpha-node.hover{border-color:var(--accent);background:#1e2a38;box-shadow:0 0 12px #7fbfff40}.chord-alpha-node.hover .chord-alpha-node-sub{color:var(--accent)}.takes{display:flex;flex-direction:column;justify-content:center;gap:5px;background:var(--button-bg);border:1px solid #3a3f48;border-radius:10px;padding:6px 4px}.takes-selector{height:51px;border:1px solid #3a3f48;border-radius:8px;padding:2px;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:background-color .15s,border-color .15s}.takes-selector-track{display:flex;flex-direction:column;align-items:center;transition:transform .18s ease-out}.takes-selector.playing{background:#23303a;border-color:var(--accent)}.takes-selector.recording{border-color:#e05555}.takes-selector.locked{cursor:default}.takes-selector.locked .take-row{opacity:.25;cursor:default}.takes-selector.locked .take-row.current{opacity:1}.take-row{display:flex;align-items:baseline;gap:5px;height:15px;line-height:15px;font-size:.68rem;color:var(--muted);opacity:.5;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}.take-row.current{font-size:.72rem;opacity:1}.take-row.current .take-row-date{color:var(--fg)}.take-row-date,.take-row-duration{flex:0 0 auto}.take-row-duration{font-size:.66rem}.take-kind-chip{font-size:.66rem;color:var(--muted);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.take-icon-btn:disabled,.takes-empty .take-download{opacity:.35;pointer-events:none}.takes-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:3px 6px}.takes .takes-hint{font-size:.62rem}.takes .import-toggle{padding:3px 6px;font-size:.68rem}.takes .take-actions{gap:3px}.takes .take-actions-row{justify-content:center;column-gap:6px;row-gap:6px}.takes .take-icon-btn{width:20px;height:20px;border-radius:3px}@media(max-width:640px){.takes .take-icon-btn{width:26px;height:26px}}.import-toggle{display:flex;align-items:center;gap:6px;background:transparent;color:var(--muted);border:1px solid #3a3f48;border-radius:4px;padding:7px 14px;font-size:.85rem;cursor:pointer;font-family:inherit;white-space:nowrap}.import-toggle:hover{color:var(--fg);background:var(--button-bg)}.import-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.takes-hint{color:var(--muted);font-size:.8rem}.take-player{display:none}.take-actions{display:flex;flex-direction:column;gap:6px}.take-actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;row-gap:6px}.take-icon-btn{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:4px;background:transparent;color:var(--muted);border:1px solid #3a3f48;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;text-decoration:none}.take-icon-btn:hover{color:var(--fg);background:var(--button-bg)}.take-play .icon-pause,.take-play.playing .icon-play{display:none}.take-play.playing .icon-pause{display:block}.take-loop.active{color:var(--fg);background:var(--button-bg);border-color:var(--fg)}.take-badge-dot{position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:#e67e22}.take-badge-dot-2{right:8px}.take-tooltip{position:fixed;transform:translate(-50%,calc(-100% - 8px));background:#1c2026;color:var(--fg);border:1px solid #3a3f48;border-radius:4px;padding:4px 8px;font-size:.68rem;line-height:1.3;max-width:180px;text-align:center;white-space:normal;pointer-events:none;z-index:60;box-shadow:0 4px 12px #00000059}.take-tooltip[hidden]{display:none}.dp-vol-row,.dp-vol-col{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--fg)}.dp-vol-row[hidden],.dp-vol-col[hidden]{display:none}.dp-vol-row{padding:3px 6px;border:1px solid var(--box-border);border-radius:4px;margin-bottom:4px}.dp-vol-col{flex-direction:column;width:30px;padding:6px 2px;border:1px solid var(--box-border);border-radius:4px;margin-right:4px}.dp-vol-label{color:var(--muted);white-space:nowrap}.dp-vol-range{-webkit-appearance:none;appearance:none;outline:none;cursor:pointer;border-radius:999px}.dp-vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:transparent;border:none;cursor:pointer}.dp-vol-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:transparent;border:none;cursor:pointer}.dp-vol-row .dp-vol-range{flex:1;min-width:0;height:16px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill, 50%),#2a2f36 var(--fill, 50%),#2a2f36 100%)}.dp-vol-row .dp-vol-range::-webkit-slider-thumb{margin-top:1px}.dp-vol-col .dp-vol-range{writing-mode:vertical-lr;direction:rtl;flex:1;min-height:0;width:16px;background:linear-gradient(to top,var(--accent) 0%,var(--accent) var(--fill, 50%),#2a2f36 var(--fill, 50%),#2a2f36 100%)}.dp-vol-val{width:30px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.dp-vol-col .dp-vol-val{width:auto;text-align:center}.dual-pad-mode{--bar-thickness: 44px;--pad-label-w: 26px;--pad-label-h: 16px;--rp-count: 4;--bump-height: 20px;--box-bg: #1a1f26;--box-border: #3a3f48;--rp-bar-tint: rgba(255, 255, 255, .1);flex:1;min-height:0;display:flex;flex-direction:column}.dual-pad-row{flex:1;min-height:0;display:flex}.dual-pad-resize-handle{flex:0 0 auto;height:24px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;touch-action:none;border-radius:4px}.dual-pad-resize-handle:hover,.dual-pad-resize-handle.dragging{background:#ffffff0f}.dual-pad-resize-handle:before{content:"";width:72px;height:5px;border-radius:3px;background:var(--box-border)}.dual-pad-resize-handle:hover:before,.dual-pad-resize-handle.dragging:before{background:var(--muted)}.dual-pad-mode[hidden]{display:none}.dual-pad-left{flex:1 1 calc(var(--bar-thickness) * (var(--lp-bar-count, 12) + 1));min-width:160px;display:flex;flex-direction:column}.dual-pad-split-handle{flex:0 0 auto;align-self:stretch;width:20px;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none;border-radius:4px}.dual-pad-split-handle:hover,.dual-pad-split-handle.dragging{background:#ffffff0f}.dual-pad-split-handle:before{content:"";width:5px;height:72px;border-radius:3px;background:var(--box-border)}.dual-pad-split-handle:hover:before,.dual-pad-split-handle.dragging:before{background:var(--muted)}.view-reset-btn{width:20px;height:20px;border-radius:50%;background:var(--box-bg);color:var(--muted);border:1px solid var(--box-border);font-size:.7rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;padding:0;touch-action:manipulation}.view-reset-btn:hover{color:var(--fg);border-color:var(--muted)}.view-reset-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.view-reset-btn[hidden]{display:none}.pad-outer{flex:1;min-height:0;display:flex;flex-direction:column}.root-bumps-row{flex:0 0 auto;height:var(--bump-height);display:flex}.root-bumps-row[hidden]{display:none}.bar-caps-spacer{flex:0 0 auto;width:var(--bar-thickness)}.bar-caps-spacer{display:flex;align-items:center;justify-content:center}.root-bumps{flex:1;min-width:0;display:flex}.root-bump{flex:1 0 0;max-width:var(--pad-label-w);margin:0 auto;height:100%;border-radius:999px 999px 0 0;display:flex;align-items:center;justify-content:center;font-size:.5rem;color:var(--fg);overflow:hidden}.root-bump.white{background:#3a4150}.root-bump.black{background:#22262e}.root-bump.hued{background:hsl(var(--key-hue, 210) 35% 22%)}.pad-row{flex:1;min-height:0;display:flex}.bar-caps{flex:0 0 auto;width:var(--bar-thickness);position:relative}.bar-caps-field{position:absolute;inset:calc(var(--bar-thickness) / 2) 0}.bar-cap{position:absolute;left:0;right:0;height:var(--bar-thickness);transform:translateY(-50%);border-radius:999px 0 0 999px;display:flex;align-items:center;justify-content:center;overflow:hidden}.bar-cap{background:var(--box-bg);border:1px solid var(--box-border);border-right:none}.bar-cap.minus5{top:0%}.bar-cap.five{top:50%}.bar-cap.aug{top:100%}.bar-cap .name{font-size:.75rem;font-weight:600;color:var(--fg)}.pad-wrap{flex:1;min-width:0;min-height:40px;position:relative;overflow:hidden;background:var(--box-bg);box-shadow:inset -1px -1px 0 0 var(--box-border);touch-action:none}.pad-field{position:absolute;left:0;right:0;top:calc(var(--bar-thickness) / 2);bottom:calc(var(--bar-thickness) / 2)}.key-grid{position:absolute;inset:0;display:flex}.key-col{flex:1 0 auto;height:100%;border-right:1px solid rgba(0,0,0,.35)}.key-col.white{background:#ffffff0f}.key-col.black{background:#0000001f}.key-col:last-child{border-right:none}.key-col.hover{background:#ffffff38}.key-col.hued{background:hsl(var(--key-hue, 210) 45% 22%)}.key-col.hued.hover{background:hsl(var(--key-hue, 210) 55% 38%)}.bar{position:absolute;left:0;right:0;height:var(--bar-thickness);transform:translateY(-50%);background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(100% / var(--key-count) - 1px),rgba(0,0,0,.35) calc(100% / var(--key-count) - 1px),rgba(0,0,0,.35) calc(100% / var(--key-count)))}.bar.minus5{top:0%;background-color:#ffffff24}.bar.five{top:50%;background-color:#ffffff24}.bar.aug{top:100%;background-color:#ffffff24}.dual-pad-right{flex:0 1 calc(var(--bar-thickness) * 8.4);min-width:160px;display:flex;flex-direction:column}.rp-col-bumps-row{flex:0 0 auto;height:var(--bump-height);display:flex}.rp-col-bumps-row[hidden]{display:none}.rp-col-bumps{position:relative;flex:1;min-width:0}.rp-col-bumps-field{position:absolute;top:0;bottom:0;left:calc(var(--bar-thickness) / 2);right:calc(var(--bar-thickness) / 2)}.rp-col-bump{position:absolute;top:0;width:min(var(--bar-thickness),calc(100% / var(--rp-count, 4)));height:100%;transform:translate(-50%);border-radius:999px 999px 0 0;background:var(--box-bg);border:1px solid var(--box-border);border-bottom:none;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:600;color:var(--fg);overflow:hidden}.rp-caps-spacer{flex:0 0 auto;width:var(--bar-thickness)}.rp-row{flex:1;min-height:0;display:flex}.rp-pad-wrap{position:relative;flex:1;min-width:0;box-shadow:inset 1px -1px 0 0 var(--box-border);overflow:hidden;background:var(--box-bg);touch-action:none}.rp-field-v{position:absolute;left:0;right:0;top:calc(var(--bar-thickness) / 2);bottom:calc(var(--bar-thickness) / 2)}.rp-field-h{position:absolute;top:0;bottom:0;left:calc(var(--bar-thickness) / 2);right:calc(var(--bar-thickness) / 2)}.rp-row-bar{position:absolute;left:0;right:0;height:min(var(--bar-thickness),calc(100% / var(--rp-count, 4)));transform:translateY(-50%);background:var(--rp-bar-tint)}.rp-col-bar{position:absolute;top:0;bottom:0;width:min(var(--bar-thickness),calc(100% / var(--rp-count, 4)));transform:translate(-50%);background:var(--rp-bar-tint)}.rp-row-caps{position:relative;flex:0 0 auto;width:var(--bar-thickness)}.rp-row-caps-field{position:absolute;left:0;right:0;top:calc(var(--bar-thickness) / 2);bottom:calc(var(--bar-thickness) / 2)}.rp-row-cap{position:absolute;left:0;right:0;height:min(var(--pad-label-h),calc(100% / var(--rp-count, 4)));transform:translateY(-50%);border-radius:0 999px 999px 0;background:var(--box-bg);border:1px solid var(--box-border);border-left:none;display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:600;color:var(--fg);text-align:center;line-height:1.1;overflow:hidden}.dual-pad-scale{--bar-thickness: 28px}.root-bumps{position:relative;overflow:hidden}.root-bumps-field{position:absolute;top:0;bottom:0;left:calc(var(--bar-thickness) / 2);right:calc(var(--bar-thickness) / 2)}.root-bumps-field-flat{position:absolute;inset:0;display:flex}.dual-pad-scale .root-bump{position:absolute;top:0;flex:none;max-width:none;margin:0;width:min(var(--pad-label-w),calc(100% / var(--lp-bar-count, 12)));height:100%;transform:translate(-50%);border-right:none;overflow:hidden}.lp-field{position:absolute;top:0;bottom:0;left:calc(var(--bar-thickness) / 2);right:calc(var(--bar-thickness) / 2)}.lp-note-bar{position:absolute;top:0;bottom:0;width:min(var(--bar-thickness),calc(100% / var(--lp-bar-count, 12)));transform:translate(-50%)}.lp-note-bar.white{background:#ffffff1a}.lp-note-bar.black{background:#0000002e}.lp-note-bar.hued{background:hsl(var(--key-hue, 210) 40% 30%)}.lp-note-bar.hover{background:#ffffff38}.dual-pad-scale .bar,.dual-pad-mode.pan-mode .bar{background-image:none}.setting-row .setting-check{grid-column:2 / 4;display:flex;align-items:center;gap:8px;font-size:.85rem}.dp-world{position:absolute;top:0;bottom:0;left:0;width:calc(var(--lp-zoom, 1) * 100%);transform:translate(calc(var(--lp-cam, 0) * -100%))}.bar-caps,.rp-row-caps{overflow:hidden}.dual-pad-mode.pan-mode .root-bumps{touch-action:none;cursor:grab}.dual-pad-mode.pan-mode .root-bumps.panning{cursor:grabbing}@media(max-width:640px),(max-height:480px){main{padding:8px 10px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom));gap:8px}.topbar,.topbar-left{gap:8px}.logo-img{height:26px}.stop-btn{padding:4px 10px}.stop-btn span{display:none}.topbar-controls{gap:6px}.icon-btn{width:28px;height:28px}.display{font-size:1rem}.mode-current{height:28px;padding:0 10px;font-size:.8rem}.dual-pad-left,.dual-pad-right{min-width:130px}}@media(max-width:640px){.mode-neighbor{display:none}}.rotate-overlay{display:none}@media(orientation:portrait)and (pointer:coarse){body.needs-landscape:not(.rotate-dismissed) .rotate-overlay{display:flex;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;background:#0a0c10e0}}.rotate-overlay-box{display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 24px;text-align:center;color:var(--fg)}.rotate-overlay-box p{margin:0;font-size:.95rem}.rotate-overlay-box p.rotate-overlay-hint{color:var(--muted);font-size:.85rem}.rotate-overlay-btn{background:var(--accent);color:#0a0d12;border:none;border-radius:6px;padding:10px 18px;font-size:.95rem;font-weight:600;font-family:inherit;cursor:pointer}.rotate-overlay-dismiss{background:transparent;color:var(--muted);border:none;padding:6px 12px;font-size:.85rem;font-family:inherit;cursor:pointer;text-decoration:underline}.first-run-hint{display:none}.first-run-hint:not([hidden]){display:flex;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;background:#0a0c10e0}.mic-meter{grid-column:2 / 4;position:relative;height:14px;background:var(--button-bg);border-radius:4px;overflow:hidden}.mic-meter-fill{position:absolute;top:0;left:0;width:0;height:9px;background:var(--accent);opacity:.85}.mic-meter-gain{position:absolute;bottom:0;left:0;width:0;height:4px;background:#7dd6a0}.mic-meter-threshold{position:absolute;top:0;bottom:0;width:2px;background:#e0b040}.setting-error{grid-column:2 / 4;color:#d9534f;font-size:.8rem}.tuning-select{display:flex;flex-direction:column;gap:8px;font-size:.85rem;color:var(--fg)}.tuning-mix-chip{width:56px;flex-shrink:0;padding:3px 4px;border-radius:999px;border:1px solid hsl(var(--tuning-hue, 210) 55% 55%);background:transparent;color:hsl(var(--tuning-hue, 210) 55% 70%);font-size:.68rem;font-family:inherit;cursor:pointer;overflow:hidden}.tuning-mix-chip-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tuning-mix-chip.state-all{background:hsl(var(--tuning-hue, 210) 55% 55%)}.tuning-mix-chip.state-all .tuning-mix-chip-label{color:#10141a;font-weight:600}.tuning-mix-chip.state-partial{background:hsl(var(--tuning-hue, 210) 55% 55% / .22)}.tuning-mix-chip.state-off{opacity:.4;border-style:dashed}.tuning-mix-table{display:flex;align-items:flex-start;gap:6px}.tuning-mix-side-col{display:flex;flex-direction:column;gap:3px;flex-shrink:0}.tuning-mix-side{height:26px;flex-shrink:0;display:flex;align-items:center;gap:4px;color:hsl(var(--tuning-hue, 210) 55% 65%)}.tuning-mix-side-head{height:14px}.tuning-mix-oct-group{display:flex;gap:2px}.tuning-oct-cell{width:16px;height:16px;flex-shrink:0;font-size:.65rem;line-height:1;display:flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:3px;background:transparent;color:inherit;opacity:.5;font-family:inherit;cursor:pointer}.tuning-oct-cell.mixed{background:hsl(var(--tuning-hue, 210) 55% 55% / .3);opacity:1}.tuning-oct-cell.on{background:hsl(var(--tuning-hue, 210) 55% 55%);color:#10141a;opacity:1}.tuning-mix-scroll{flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tuning-mix-scroll::-webkit-scrollbar{display:none}.tuning-mix-strips-inner{display:flex;flex-direction:column;gap:3px}.tuning-mix-head-strip{position:relative;height:14px}.tuning-mix-note-name{position:absolute;bottom:0;transform:translate(-50%);font-size:.6rem;color:var(--muted);white-space:nowrap}.tuning-mix-strip{position:relative;height:26px;background:var(--button-bg);border:1px solid #232a33;border-radius:6px}.tuning-key{position:absolute;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.06)}.tuning-key.black{background:#ffffff08}.tuning-key.oct-head{border-left:1px solid rgba(255,255,255,.16)}.tuning-mark{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);border:none;background:hsl(var(--tuning-hue, 210) 55% 55%);cursor:pointer;padding:0}.tuning-mark.small{width:5px;height:5px}.tuning-mark.off{background:transparent;border:1px solid hsl(var(--tuning-hue, 210) 55% 55%);opacity:.35}.ball-throw-mode{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;position:relative}.ball-throw-mode[hidden]{display:none}.ball-throw-mode.disabled{opacity:.5;pointer-events:none}.bt-pad{position:relative;flex:3 1 0;min-height:120px;border-radius:8px;overflow:hidden}.bt-pad-canvas{position:absolute;inset:0;width:100%;height:100%}.bt-field{position:absolute;inset:0;pointer-events:none;overflow:hidden}.bt-ball-sprite{position:absolute;width:40px;height:40px;margin-left:-20px;margin-top:-20px;border-radius:50%;background:var(--accent);color:#0a0d12;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;box-shadow:0 2px 6px #0006}.bt-resize-handle{flex:0 0 auto;height:20px;margin:-6px 0;display:flex;align-items:center;justify-content:center;cursor:ns-resize;touch-action:none;border-radius:4px;position:relative;z-index:1}.bt-resize-handle:hover,.bt-resize-handle.dragging{background:#ffffff0f}.bt-resize-handle:before{content:"";width:72px;height:5px;border-radius:3px;background:var(--box-border, #3a3f48)}.bt-resize-handle:hover:before,.bt-resize-handle.dragging:before{background:var(--muted)}.bt-tray{flex:2 1 0;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly;gap:8px}.bt-tray-row{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}.bt-ball{width:48px;height:48px;border-radius:50%;border:2px solid var(--box-border, #3a3f48);background:var(--button-bg);color:var(--fg);font-size:.75rem;font-weight:700;cursor:grab;touch-action:none}.bt-ball:hover{background:var(--button-bg-hover)}.bt-ball:active{cursor:grabbing}.note-glide-mode{--ng-bump: 20px;--ng-bar-thickness: 28px;flex:1;min-height:0;display:flex;flex-direction:column;touch-action:none}.note-glide-mode[hidden]{display:none}.ng-row{flex:1;min-height:0;display:flex}.ng-split-handle{flex:0 0 auto;align-self:stretch;width:20px;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none;border-radius:4px}.ng-split-handle:hover,.ng-split-handle.dragging{background:#ffffff0f}.ng-split-handle:before{content:"";width:5px;height:72px;border-radius:3px;background:var(--box-border, #3a3f48)}.ng-split-handle:hover:before,.ng-split-handle.dragging:before{background:var(--muted)}.ng-resize-handle{flex:0 0 auto;height:24px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;touch-action:none;border-radius:4px}.ng-resize-handle:hover,.ng-resize-handle.dragging{background:#ffffff0f}.ng-resize-handle:before{content:"";width:72px;height:5px;border-radius:3px;background:var(--box-border, #3a3f48)}.ng-resize-handle:hover:before,.ng-resize-handle.dragging:before{background:var(--muted)}.ng-pad{flex:1 1 0;min-width:160px;display:flex;flex-direction:column}.ng-xrow{flex:0 0 auto;height:var(--ng-bump);display:flex}.ng-corner{flex:0 0 auto;width:var(--ng-bump)}.ng-corner{display:flex;align-items:center;justify-content:center}.ng-xlabels{flex:1;min-width:0;position:relative;overflow:hidden;touch-action:none;cursor:grab}.ng-body{flex:1;min-height:0;display:flex}.ng-ylabels{flex:0 0 auto;width:var(--ng-bump);position:relative;overflow:hidden;touch-action:none;cursor:grab}.ng-xlabels.panning,.ng-ylabels.panning{cursor:grabbing}.ng-world-x{position:absolute;top:0;bottom:0;left:0;width:calc(var(--ng-zx, 1) * 100%);transform:translate(calc(var(--ng-cx, 0) * -100%))}.ng-world-y{position:absolute;left:0;right:0;top:0;height:calc(var(--ng-zy, 1) * 100%);transform:translateY(calc(var(--ng-cy, 0) * -100%))}.ng-pad-wrap{flex:1;min-width:0;position:relative;overflow:hidden;background:var(--box-bg, #1a1f26);border:1px solid var(--box-border, #3a3f48);border-radius:8px;touch-action:none}.ng-world{position:absolute;top:0;left:0;width:calc(var(--ng-zx, 1) * 100%);height:calc(var(--ng-zy, 1) * 100%);transform:translate(calc(var(--ng-cx, 0) * -100%)) translateY(calc(var(--ng-cy, 0) * -100%))}.ng-fieldx{position:absolute;top:0;bottom:0;left:calc(100% / (2 * var(--ng-count)));right:calc(100% / (2 * var(--ng-count)))}.ng-fieldy{position:absolute;left:0;right:0;top:calc(100% / (2 * var(--ng-count)));bottom:calc(100% / (2 * var(--ng-count)))}.ng-xfield{position:absolute;top:0;bottom:0;left:calc(100% / (2 * var(--ng-count)));right:calc(100% / (2 * var(--ng-count)))}.ng-yfield{position:absolute;left:0;right:0;top:calc(100% / (2 * var(--ng-count)));bottom:calc(100% / (2 * var(--ng-count)))}.ng-xbar{position:absolute;top:0;bottom:0;width:min(var(--ng-bar-thickness),calc(100% / var(--ng-span)));transform:translate(-50%);background:hsl(var(--key-hue, 210) 50% 45% / .2)}.ng-ybar{position:absolute;left:0;right:0;height:min(var(--ng-bar-thickness),calc(100% / var(--ng-span)));transform:translateY(-50%);background:hsl(var(--key-hue, 210) 50% 45% / .2)}.ng-xbar.hover,.ng-ybar.hover{background:hsl(var(--key-hue, 210) 60% 55% / .45)}.ng-bump{position:absolute;display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:600;color:var(--fg);background:hsl(var(--key-hue, 210) 35% 22%);overflow:hidden;user-select:none;-webkit-user-select:none}.ng-bump-x{top:0;height:100%;width:min(26px,calc(100% / var(--ng-span) * .9));transform:translate(-50%);border-radius:4px 4px 0 0}.ng-bump-y{left:0;width:100%;height:min(16px,calc(100% / var(--ng-span) * .9));transform:translateY(-50%);border-radius:4px 0 0 4px}.ng-pad-flip .ng-bump-y{border-radius:0 4px 4px 0}.violin-mode{flex:1;min-height:0;display:flex;gap:10px;touch-action:none}.violin-mode[hidden]{display:none}.vl-rail{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px;width:42px}.vl-rail-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--box-border, #3a3f48);background:var(--button-bg);color:var(--muted);font-size:1.05rem;display:flex;align-items:center;justify-content:center;cursor:pointer}.vl-rail-btn:hover{background:var(--button-bg-hover)}.vl-rail-btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}.vl-rail-sep{width:22px;height:1px;background:var(--box-border, #3a3f48);margin:2px 0}.vl-rail-edit[hidden]{display:none}.vl-content{flex:1;min-width:0;position:relative}.vl-stage-auto{position:absolute;inset:0;display:flex;gap:16px}.vl-stage-auto[hidden]{display:none}.vl-plan-wrap{position:absolute;inset:0;overflow:hidden;border-radius:8px}.vl-plan-wrap[hidden]{display:none}.vl-plan-slider{display:flex;width:200%;height:100%;transition:transform .28s ease}.vl-plan-slider.show-perform{transform:translate(-50%)}.vl-page{width:50%;flex:0 0 50%;display:flex;gap:16px;padding:0 2px}.vl-pad-slot{flex:1;min-width:0;display:flex}.vl-note-grid-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;background:var(--box-bg, #1a1f26);border:1px solid var(--box-border, #3a3f48);border-radius:8px;padding:10px}.vl-note-grid-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.vl-note-grid-title{font-size:.75rem;color:var(--muted)}.vl-note-grid-actions{display:flex;gap:8px}.vl-note-grid-actions button{padding:4px 8px;border-radius:6px;border:1px solid var(--box-border, #3a3f48);background:var(--button-bg);color:var(--muted);font-size:.68rem;cursor:pointer}.vl-note-grid-actions button:hover{color:var(--fg);background:var(--button-bg-hover)}.vl-note-grid{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;overflow-y:auto}.vl-trash-row{display:flex;justify-content:flex-end}.vl-chip{position:relative;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 26px 0 16px;background:#ffffff0a;border:1px solid var(--box-border, #3a3f48);color:var(--fg);font-size:.9rem;clip-path:polygon(0% 0%,76% 0%,100% 50%,76% 100%,0% 100%);cursor:grab;touch-action:none}.vl-chip.dragging{position:fixed;z-index:60;pointer-events:none;box-shadow:0 6px 18px #00000080}.vl-chip.current{background:#7fbfff2e;border-color:var(--accent)}.vl-chip.compact{min-height:24px;padding:0 12px 0 8px;font-size:.68rem;clip-path:polygon(0% 0%,82% 0%,100% 50%,82% 100%,0% 100%);cursor:default;touch-action:auto}.vl-chip-placeholder{visibility:hidden}.vl-plan-empty{font-size:.78rem;color:var(--muted)}.vl-trash{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px dashed var(--box-border, #3a3f48);color:var(--muted);font-size:1.1rem;transition:background .1s,border-color .1s,color .1s,transform .1s}.vl-trash.hover{background:#d9534f2e;border-color:#d9534f;color:#d9534f;transform:scale(1.12)}.vl-perform-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}.vl-seq-strip{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;padding:8px;background:var(--box-bg, #1a1f26);border:1px solid var(--box-border, #3a3f48);border-radius:8px;overflow-y:auto}.vl-vibrato-wrap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px}.vl-vibrato-circle{position:relative;width:64px;height:64px;border-radius:50%;border:2px dashed var(--box-border, #3a3f48);background:var(--box-bg, #1a1f26);transition:border-color .15s,background .15s;touch-action:none}.vl-vibrato-circle.active{border-color:var(--accent);background:#7fbfff14}.vl-vibrato-center{position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--box-border, #3a3f48);pointer-events:none}.vl-vibrato-label{text-align:center;font-size:.62rem;color:var(--muted);pointer-events:none}.vl-pad-left,.vl-pad-right{position:relative;flex:1;min-height:0;display:flex;background:var(--box-bg, #1a1f26);border:1px solid var(--box-border, #3a3f48);border-radius:8px;overflow:hidden;touch-action:none}.vl-string-col{position:relative;flex:1;border-right:1px solid var(--box-border, #3a3f48)}.vl-string-col:last-child{border-right:none}.vl-string-col.active{background:#ffffff0d}.vl-string-name{position:absolute;top:6px;left:0;right:0;text-align:center;font-size:.75rem;color:var(--muted);pointer-events:none}.vl-dot{position:absolute;width:8px;height:8px;border-radius:50%;transform:translate(-50%,50%);opacity:.55}.vl-dot.lane-left{left:32%}.vl-dot.lane-right{left:68%}.vl-dot.natural{width:10px;height:10px;opacity:.85}.vl-pad-left.dots-hidden .vl-dot:not(.open),.vl-pad-left.dots-hidden .vl-dot-label{display:none}.vl-dot-label{position:absolute;font-size:.58rem;color:var(--muted);white-space:nowrap;pointer-events:none}.vl-dot-label.natural{color:var(--fg)}.vl-dot-label.lane-left{left:32%;transform:translate(calc(-100% - 5px),50%);text-align:right}.vl-dot-label.lane-right{left:68%;transform:translate(5px,50%);text-align:left}.vl-finger{position:absolute;width:18px;height:18px;margin-left:-9px;margin-top:-9px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);pointer-events:none;display:none;z-index:4}.vl-vol-col{position:relative;flex:1;border-right:1px solid var(--box-border, #3a3f48)}.vl-vol-col:last-child{border-right:none}.vl-vol-fill{position:absolute;inset:0;opacity:0}.snare-mode{flex:1;min-height:0;display:flex;flex-direction:column}.snare-mode[hidden]{display:none}.hs-pad-wrap-outer{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:8px 0}.hs-pads-row{flex:1;min-height:0;display:flex;justify-content:center;gap:20px}.hs-pad-block{flex:1 1 0;min-width:0;min-height:0;max-width:50%;display:flex;flex-direction:column;gap:3px}.hs-pad-row{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:3px}.hs-pad-axis{display:flex;align-items:center;justify-content:center;font-size:.55rem;color:var(--muted, #9aa1ab)}.hs-pad-axis-top{flex:0 0 auto;height:16px;gap:4px}.hs-pad-axis-side{flex:0 0 auto;flex-direction:column;gap:4px;width:16px;align-self:stretch;text-align:center}.hs-pad-axis-label{white-space:nowrap}.hs-pad-axis-name{font-weight:600;color:var(--fg, #e8eaed);white-space:nowrap}.hs-pad-axis-name-v{writing-mode:vertical-rl;text-orientation:mixed}.hs-pad-axis-name-v-ccw{transform:rotate(180deg)}.hs-pad-axis-line{flex:none;background:var(--box-border, #3a3f48)}.hs-pad-axis-line-h{width:14px;height:1px}.hs-pad-axis-line-v{width:1px;height:14px}.hs-pad-wrap{position:relative;flex:0 0 auto;width:100%;aspect-ratio:1 / 1;border:1px solid var(--box-border, #3a3f48);border-radius:0;overflow:hidden;cursor:crosshair;touch-action:none;background:#1a1d22}.hs-pad-canvas{position:absolute;inset:0;width:100%;height:100%}.hs-pad-wrap .pin{display:none}.hs-pad-wrap.hs-midi-mode .pin{display:block}.hs-hit-params{display:flex;gap:14px}.hs-hit-param{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--muted, #9aa1ab)}.hs-hit-param input{width:4.5em}#notepicker-note-select{flex:none;order:-1;align-self:center;display:flex;flex-direction:column;align-items:center;gap:8px}.note-select-input{width:4.5em;font-size:.85rem;text-align:center;background:var(--box-bg, #1a1f26);border:1px solid var(--box-border, #3a3f48);border-radius:6px;color:var(--fg);padding:6px 4px}.note-select-add-pin-btn{position:relative;width:22px;height:26px;padding:0;border:none;background:none;cursor:pointer}.note-select-add-pin-btn .pin-svg{width:100%;height:100%;display:block}.notepicker-privacy-link{margin-top:auto}#notepicker-root{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:20px;width:100%;max-width:900px;margin:0 auto;padding:0 16px}.combo-row{display:flex;flex-direction:row;align-items:center;gap:10px}.combo-row>#notepicker-harmonics-pad,.combo-row>#notepicker-fm-pad{width:220px}.combo-row>#notepicker-harmonics-pad{order:0}.combo-swap-btn{order:1}.combo-row>#notepicker-fm-pad{order:2}.combo-row.is-swapped>#notepicker-harmonics-pad{order:2}.combo-row.is-swapped>#notepicker-fm-pad{order:0}.combo-swap-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--box-border, #3a3f48);background:var(--box-bg, #1a1f26);color:var(--accent);font-size:15px;line-height:1;cursor:pointer;flex:none;transform:rotate(90deg)}.combo-swap-btn:hover{background:#232a33}.pv-title{margin:0;font-size:.85rem;color:var(--muted);text-align:center}.pv-pad{position:relative;width:100%;aspect-ratio:1 / 1;border:1px solid var(--box-border, #3a3f48);touch-action:none;user-select:none;overflow:visible}.pv-pad-canvas{position:absolute;inset:0;width:100%;height:100%}.pv-detail{width:100%;display:flex;flex-direction:row;gap:6px}.pv-bar-canvas,.pv-wave-canvas{flex:1 1 0;min-width:0;width:100%;height:48px;display:block;border:1px solid var(--box-border, #3a3f48)}.notepicker-add-pin-btn{font-size:.75rem;color:var(--muted);background:var(--box-bg, #1a1f26);border:1px solid var(--box-border, #3a3f48);border-radius:6px;padding:4px 12px;cursor:pointer;white-space:nowrap}.notepicker-add-pin-btn:hover{color:var(--fg)}.pin{position:absolute;width:24px;height:24px;margin-left:-12px;margin-top:-22px;cursor:grab;touch-action:none;z-index:2}.pin.dragging{cursor:grabbing;z-index:5}.pin-svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}.pin-svg path{fill:var(--accent);stroke:#0a0d10;stroke-width:1.2}.pin.dragging .pin-svg{filter:drop-shadow(0 0 4px rgba(255,255,255,.85))}.pin-label{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);color:#0a0d10;font-size:9.5px;font-weight:700;pointer-events:none}.pin.ref-marker{margin-top:-2px;cursor:default;pointer-events:none;z-index:1}.pin.ref-marker .pin-svg{transform:scaleY(-1);filter:none}.pin.ref-marker .pin-svg path{fill:var(--muted);stroke:#0a0d10;stroke-width:1.2}.pin-ref-icon{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);width:15px;height:15px;overflow:visible;pointer-events:none}.pin-ref-icon rect,.pin-ref-icon polygon{fill:#0a0d10}#notepicker-mixer{display:flex;flex-direction:column;align-items:center;gap:8px;width:260px}.mixer-rows{width:100%;display:flex;flex-direction:column;gap:6px}.mixer-row{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}.mixer-row-pin{position:relative;flex:none;width:20px;height:24px}.mixer-row-pin .pin-svg{width:100%;height:100%;display:block}.mixer-solo-btn{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--box-border, #3a3f48);background:var(--box-bg, #1a1f26);color:var(--accent);font-size:11px;line-height:1;cursor:pointer}.mixer-solo-btn:hover{background:#232a33}.mixer-vol-range{flex:1;-webkit-appearance:none;appearance:none;height:22px;background:transparent;outline:none;cursor:pointer}.mixer-vol-range::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill, 50%),#2a2f36 var(--fill, 50%),#2a2f36 100%)}.mixer-vol-range::-moz-range-track{height:5px;border-radius:999px;border:none;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill, 50%),#2a2f36 var(--fill, 50%),#2a2f36 100%)}.mixer-vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-3.5px;border-radius:50%;background:transparent;border:none;cursor:pointer}.mixer-vol-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:transparent;border:none;cursor:pointer}.mixer-vol-val{flex:none;width:2.8em;text-align:right;color:var(--accent);font-variant-numeric:tabular-nums}.mixer-chk{flex:none}.mixer-mix-btn{width:100%;font-size:.8rem;color:var(--fg);background:var(--box-bg, #1a1f26);border:1px solid var(--box-border, #3a3f48);border-radius:6px;padding:8px 12px;cursor:pointer}.mixer-mix-btn:hover{background:#232a33}.mixer-slot-row{width:100%;display:flex;align-items:center;gap:8px}.mixer-slot-title{font-size:.75rem;color:var(--muted);flex:none}.mixer-slot-btns{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--bg);border:1px solid #3a3f48}.mixer-slot-btn{position:relative;width:auto;height:auto;padding:4px 10px;border:none;border-radius:999px;background:transparent;color:var(--muted);font-size:.75rem;cursor:pointer}.mixer-slot-btn:hover{background:#ffffff0f}.mixer-slot-btn[aria-pressed=true]{background:var(--accent);color:#10141a;font-weight:600}.mixer-slot-btn.is-occupied:after{content:"";position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--accent)}.mixer-slot-btn.is-occupied[aria-pressed=true]:after{background:#10141a}.mixer-bring-row{width:100%;display:flex;gap:6px}.mixer-bring-btn,.mixer-bring-play-btn{flex:1;min-width:0;font-size:.8rem;color:#0a0d10;background:var(--accent);border:none;border-radius:6px;padding:6px 8px;cursor:pointer;white-space:nowrap}.mixer-bring-play-btn{color:var(--fg);background:var(--box-bg, #1a1f26);border:1px solid var(--box-border, #3a3f48)}.mixer-delete-btn{width:100%;font-size:.75rem;color:var(--muted);background:none;border:1px solid var(--box-border, #3a3f48);border-radius:6px;padding:5px 8px;cursor:pointer}.mixer-delete-btn:hover{color:#ff8080;border-color:#ff8080}.mixer-save-feedback{font-size:.75rem;color:var(--accent);min-height:1.2em}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}body{background:var(--bg)}}.midi-app{display:flex;flex-direction:column;min-height:100dvh}.midi-mode-switch{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--bg);border:1px solid var(--box-border, #3a3f48)}.midi-mode-switch-btn{padding:5px 14px;border:none;border-radius:999px;background:transparent;color:var(--muted);font-size:.85rem;cursor:pointer}.midi-mode-switch-btn:hover{background:#ffffff0f}.midi-mode-switch-btn[aria-pressed=true]{background:var(--accent);color:#10141a;font-weight:600}.midi-mode-panel{flex:1;width:100%;max-width:900px;margin:0 auto;padding:16px}.midi-sister-app-link{margin:0 auto}.midi-sister-app-link:last-of-type{margin-top:auto;margin-bottom:8px}.midi-status{font-size:.8rem;color:var(--muted);min-height:1.2em;text-align:center}.midi-status:not(:empty){color:#ff8080}