:root{color-scheme:dark;--bg-top: #10191c;--bg: #101a1d;--surface: #16242a;--surface-high: #1c2e35;--line: #26414a;--line-soft: #1d333a;--text: #dfeced;--text-dim: #8ba7ad;--text-faint: #5f7c83;--accent: #6fc7cd;--accent-dim: #3d8c93;--accent-glow: rgba(111, 199, 205, .28);--warn: #d98b62;--danger: #cf6b62;--key-w: 30px;--radius: 9px;--tap: 44px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Hiragino Sans,Noto Sans JP,system-ui,-apple-system,Segoe UI,sans-serif;font-size:15px;line-height:1.5;overscroll-behavior:none}#app{height:100%}.sampler-app{display:flex;flex-direction:column;height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(120% 60% at 50% 0%,#1b2f36 0%,transparent 70%),linear-gradient(180deg,var(--bg-top),var(--bg))}.app-header{display:flex;align-items:center;gap:10px;padding:10px 12px 8px;border-bottom:1px solid var(--line-soft);flex:0 0 auto}.app-title{min-width:0;flex:1}.app-title h1{margin:0;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}.app-instrument{font-size:19px;font-weight:300;letter-spacing:.02em;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.voice-meter{font-size:11px;color:var(--text-faint);white-space:nowrap;padding:3px 8px;border:1px solid var(--line-soft);border-radius:999px}.voice-meter.busy{color:var(--warn);border-color:var(--warn)}.app-header .play-btn,.app-header .lang-btn{flex:0 0 auto;border-radius:999px}.app-header .play-btn{min-width:46px;padding:0;font-size:15px;line-height:1}.app-header .play-btn.playing{border-color:var(--accent);color:var(--accent);background:#6fc7cd24}.app-header .lang-btn{min-width:54px;padding:0 12px;font-size:13px;letter-spacing:.08em}.tab-bar{display:flex;gap:2px;padding:6px 8px 0;overflow-x:auto;scrollbar-width:none;flex:0 0 auto}.tab-bar::-webkit-scrollbar{display:none}.tab-btn{flex:1 0 auto;min-height:38px;padding:0 14px;border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--text-dim);font-size:13px;white-space:nowrap}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.panel{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 20px;display:flex;flex-direction:column;gap:14px}.panel-section{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);padding:12px}.panel-section-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}.panel-section-head h3{margin:0;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dim)}.panel-hint,.ctl-hint{font-size:11px;line-height:1.45;color:var(--text-faint)}.empty-note{margin:6px 0;font-size:13px;color:var(--text-faint)}.about-note{margin:0 0 8px;font-size:12px;line-height:1.6;color:var(--text-dim)}.status-line{flex:0 0 auto;min-height:22px;padding:2px 12px;font-size:12px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-line.empty{min-height:22px}.ctl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px 20px}.ctl{min-width:0}.ctl-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.ctl-label{font-size:12px;color:var(--text-dim)}.ctl-value{font-size:12px;font-variant-numeric:tabular-nums;color:var(--accent)}.ctl-range{-webkit-appearance:none;appearance:none;width:100%;height:var(--tap);margin:0;background:transparent}.ctl-range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent-dim) 0%,var(--accent-dim) var(--fill, 0%),var(--line) var(--fill, 0%),var(--line) 100%)}.ctl-range::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent-dim) 0%,var(--accent-dim) var(--fill, 0%),var(--line) var(--fill, 0%),var(--line) 100%)}.ctl-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-glow)}.ctl-range::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-glow)}.btn{min-height:var(--tap);padding:0 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-high);color:var(--text);font-size:14px;font-family:inherit;cursor:pointer}.btn:active{background:var(--line-soft)}.btn:disabled{opacity:.45}.btn.primary{border-color:var(--accent-dim);background:linear-gradient(180deg,#2a565c,#1f4147);color:#eafbfc}.btn.danger{border-color:var(--danger);color:var(--danger)}.btn.ghost{background:transparent;color:var(--text-dim)}.btn.small{min-height:34px;padding:0 11px;font-size:12px}.row-actions{display:flex;flex-wrap:wrap;gap:8px}.row-actions.tight{gap:6px}.segmented{display:flex;gap:2px;padding:2px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--bg);overflow-x:auto;scrollbar-width:none}.segmented::-webkit-scrollbar{display:none}.seg-btn{flex:1 0 auto;min-height:36px;padding:0 12px;border:none;border-radius:7px;background:transparent;color:var(--text-dim);font-size:12px;font-family:inherit;white-space:nowrap;cursor:pointer}.seg-btn.active{background:var(--accent-dim);color:#06181a}.switch-row{position:relative;display:flex;align-items:center;gap:10px;min-height:var(--tap);cursor:pointer}.switch-texts{flex:1;min-width:0;display:flex;flex-direction:column}.switch-input{position:absolute;opacity:0;pointer-events:none}.switch-track{flex:0 0 auto;position:relative;width:44px;height:26px;border-radius:13px;background:var(--line);transition:background .15s}.switch-track:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--text-dim);transition:transform .15s,background .15s}.switch-input:checked+.switch-track{background:var(--accent-dim)}.switch-input:checked+.switch-track:after{transform:translate(18px);background:#eafbfc}.stepper{display:flex;align-items:stretch;gap:4px}.stepper-btn{width:40px;min-height:var(--tap);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-high);color:var(--text);font-size:17px;cursor:pointer}.stepper-input{flex:1;min-width:0;min-height:var(--tap);border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--text);text-align:center;font-size:15px;font-family:inherit;font-variant-numeric:tabular-nums}.pick-label{display:flex;align-items:center;gap:10px;margin:8px 0 5px;font-size:11px;letter-spacing:.08em;color:var(--text-dim)}.pick-label.with-actions{justify-content:space-between;flex-wrap:wrap}.pick-label:first-of-type{margin-top:0}.pick-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.pick-row::-webkit-scrollbar{display:none}.pick-chip{position:relative;flex:0 0 auto;min-height:38px;padding:0 14px;border:1px solid var(--line-soft);border-radius:999px;background:var(--bg);color:var(--text-dim);font-family:inherit;font-size:13px;white-space:nowrap;cursor:pointer}.pick-chip.active{border-color:var(--accent);background:linear-gradient(180deg,#6fc7cd2e,#6fc7cd0f);color:var(--text)}.pick-chip:disabled{opacity:.45}.pick-remove{margin-left:8px;padding:0 2px;border:none;background:transparent;color:var(--text-faint);font-size:15px;line-height:1;cursor:pointer}.pick-remove:hover{color:var(--danger)}.pick-desc{margin-top:4px;min-height:15px;font-size:11px;line-height:1.35;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.pad{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1 / .78;padding:4px 3px;border:1px solid var(--line-soft);border-radius:10px;background:linear-gradient(180deg,#16242a,#0e1a1e);color:var(--text-faint);font-family:inherit;font-size:12px;cursor:pointer;touch-action:manipulation;user-select:none;overflow:hidden}.pad:disabled{opacity:.5}.pad.filled{padding-top:16px}.pad.filled{border-color:hsl(var(--pad-hue) 45% 42%);background:linear-gradient(180deg,hsl(var(--pad-hue) 42% 26%),hsl(var(--pad-hue) 46% 15%));color:hsl(var(--pad-hue) 55% 88%);box-shadow:inset 0 1px hsl(var(--pad-hue) 50% 40%)}.pad.hit{background:linear-gradient(180deg,hsl(var(--pad-hue) 70% 62%),hsl(var(--pad-hue) 60% 40%));color:#061417;box-shadow:0 0 14px hsl(var(--pad-hue) 60% 45% / .6)}.pad-name{max-width:100%;padding:0 1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.2;text-align:center;word-break:break-word}.pad-time{font-size:10px;opacity:.75;font-variant-numeric:tabular-nums}.pad-clear{position:absolute;top:0;right:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:hsl(var(--pad-hue) 40% 75%);opacity:.65}.pad-clear:hover{opacity:1;color:#fff}.zone-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;scrollbar-width:none}.zone-strip::-webkit-scrollbar{display:none}.zone-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;min-height:46px;padding:5px 11px;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--bg);color:var(--text-dim);font-family:inherit;cursor:pointer}.zone-chip.active{border-color:var(--accent);color:var(--text)}.zone-chip-name{font-size:12px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zone-chip-range{font-size:10px;color:var(--accent-dim);font-variant-numeric:tabular-nums}.waveform{position:relative;height:132px;border:1px solid rgba(38,65,74,.55);border-radius:var(--radius);background:radial-gradient(120% 80% at 50% 37%,rgba(40,82,90,.34),transparent 72%),linear-gradient(180deg,#0b1519,#0d1b1f 62%,#08181c);overflow:hidden;touch-action:none}.waveform[data-mode=mirror]{background:radial-gradient(120% 80% at 50% 50%,rgba(74,62,132,.36),transparent 72%),linear-gradient(180deg,#0e0c1c,#131029 62%,#0b0a18)}.waveform[data-mode=bars]{background:radial-gradient(120% 80% at 50% 50%,rgba(96,70,34,.32),transparent 72%),linear-gradient(180deg,#16110a,#1a1409 62%,#120e07)}.waveform[data-mode=line]{background:radial-gradient(120% 80% at 50% 50%,rgba(36,86,62,.32),transparent 72%),linear-gradient(180deg,#08150f,#0a1b13 62%,#06120d)}.waveform[data-mode=heat]{background:radial-gradient(120% 80% at 50% 50%,rgba(38,56,96,.34),transparent 72%),linear-gradient(180deg,#0a0e1a,#0c1120 62%,#070a14)}.waveform[data-mode=radial]{background:radial-gradient(70% 92% at 50% 50%,rgba(88,46,118,.38),transparent 74%),linear-gradient(180deg,#120c1c,#170f24 62%,#0d0816)}.waveform-canvas{display:block;width:100%;height:100%}.waveform-overlay{position:absolute;inset:0}.wave-shade{position:absolute;top:0;bottom:0;background:#060e10b8;pointer-events:none}.wave-shade.left{left:0}.wave-shade.right{right:0}.wave-loop{position:absolute;top:0;bottom:0;background:#d98b6224;border-left:1px dashed rgba(217,139,98,.75);border-right:1px dashed rgba(217,139,98,.75);pointer-events:none}.wave-handle{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--accent);cursor:ew-resize}.wave-handle:before{content:"";position:absolute;inset:0 -13px}.wave-handle:after{content:"";position:absolute;top:4px;left:-4px;width:10px;height:10px;border-radius:2px;background:var(--accent)}.wave-handle.loopStart,.wave-handle.loopEnd{background:var(--warn)}.wave-handle.loopStart:after,.wave-handle.loopEnd:after{background:var(--warn);top:auto;bottom:4px}.wave-handle.active:after{box-shadow:0 0 0 5px var(--accent-glow)}.wave-readout{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}.wave-strip{flex:0 0 auto;padding:6px 12px 8px;border-top:1px solid var(--line-soft);background:linear-gradient(180deg,#09111499,#0b1416f2)}.wave-strip.empty{display:none}.wave-strip-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}.wave-mode{flex:0 0 auto;min-height:24px;padding:0 10px;border:1px solid var(--line-soft);border-radius:999px;background:var(--bg);color:var(--text-dim);font-family:inherit;font-size:10px;letter-spacing:.06em;white-space:nowrap;cursor:pointer}.wave-mode:active{border-color:var(--accent);color:var(--accent)}.wave-strip-label{flex:1;min-width:0;font-size:10px;letter-spacing:.06em;color:var(--text-faint);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wave-strip .waveform{height:84px}.keyboard{flex:0 0 auto;border-top:1px solid var(--line);background:#0b1416}.keyboard-bar{display:flex;align-items:center;gap:10px;padding:3px 10px}.oct-btn{min-width:42px;min-height:30px;border:1px solid var(--line-soft);border-radius:7px;background:var(--surface);color:var(--text-dim);font-size:12px;cursor:pointer}.oct-label{font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}.keyboard-keys{position:relative;height:116px;touch-action:none;user-select:none;--key-w: calc(100% / var(--white-count, 28))}.key-row-white{display:flex;height:100%}.key-row-black{position:absolute;top:0;left:0;right:0;height:62%;pointer-events:none}.key{position:relative;cursor:pointer}.key.white{flex:1 1 0;min-width:0;border-right:1px solid #0b1416;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#e7efef,#c3d2d3)}.key.black{position:absolute;top:0;width:calc(var(--key-w) * .6);height:100%;border-radius:0 0 3px 3px;background:linear-gradient(180deg,#26383c,#101c1f);pointer-events:auto;z-index:2}.key.white.mapped{background:linear-gradient(180deg,#d9efef,#9dc9cc)}.key.black.mapped{background:linear-gradient(180deg,#2f565b,#163337)}.key.white.in-zone{background:linear-gradient(180deg,#c9ecef,#7ec8cd)}.key.black.in-zone{background:linear-gradient(180deg,#3d757c,#1d454a)}.key.down,.key.playing{background:var(--accent)}.key.black.down,.key.black.playing{background:var(--accent-dim)}.key-name{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:9px;color:#5c7377;pointer-events:none}@media (max-height: 620px){.app-header{padding:5px 12px 4px}.app-title h1{display:none}.app-instrument{font-size:16px}.tab-btn{min-height:32px;font-size:12px}.panel{padding:8px;gap:10px}.keyboard-keys{height:84px}.waveform{height:96px}.wave-strip{padding:2px 8px 3px}.wave-strip .waveform{height:46px}.wave-strip-label{display:none}.wave-strip-head{margin-bottom:2px;justify-content:flex-end}.pad{aspect-ratio:1 / .5}.keyboard-bar{padding:1px 8px}.oct-btn{min-height:26px}.status-line{min-height:18px;font-size:11px}}@media (max-height: 620px) and (min-width: 720px){.panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px}.panel>.panel-section:has(.waveform),.panel>.panel-section:has(.zone-strip){grid-column:1 / -1}}@media (min-width: 760px){.panel{padding:16px 20px}.ctl-grid{grid-template-columns:repeat(auto-fit,minmax(176px,1fr))}}@media (min-width: 760px) and (min-height: 621px){.keyboard-keys{height:132px}}@media (min-width: 1024px){.panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}.panel>.panel-section:has(.waveform){grid-column:1 / -1}}