:root{--bg:#111214;--panel:#191a1d;--panel-hi:#202126;--well:#0b0c0e;--line:#303136;--line-soft:#24252a;--text:#f4f0ec;--muted:#a09ca0;--bronze:#d28a61;--bronze-hi:#f1b18b;--lime:#d5fb54;--shadow:rgba(0,0,0,.52);font-family:"Manrope",sans-serif;color:var(--text);background:var(--bg);color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--bronze-hi);outline-offset:3px}.app-shell{width:min(1280px,calc(100% - 64px));margin:0 auto;padding:30px 0 26px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.brand{display:inline-flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font:700 clamp(1rem,2vw,1.3rem)/1 "Manrope",sans-serif;letter-spacing:.18em}.brand-mark{display:grid;place-items:center;width:20px;height:20px;border:2px solid var(--bronze-hi);border-radius:50%;box-shadow:0 0 0 4px #2c211e}.brand-mark:after{content:"";width:4px;height:4px;border-radius:50%;background:var(--bronze-hi)}.session-label,.module-label,.synth-heading p,footer{font:500 .66rem/1.3 "IBM Plex Mono",monospace;letter-spacing:.14em;color:var(--muted)}.instrument{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr);gap:22px;align-items:start}.camera-module,.synth-module{background:var(--panel);border:0;box-shadow:inset 0 1px rgba(255,255,255,.05),0 16px 32px var(--shadow)}.camera-module{padding:18px;border-radius:24px}.module-label{display:flex;align-items:center;justify-content:space-between;padding:2px 3px 15px;color:var(--bronze-hi)}.record-dot{width:7px;height:7px;border-radius:50%;background:var(--bronze);box-shadow:0 0 0 3px #35211d}.camera-stage{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--well);border:0;border-radius:16px;box-shadow:inset 0 0 0 1px #2b2c31,inset 0 8px 20px rgba(0,0,0,.55)}.camera-stage video,.camera-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}#camera-canvas{display:none}.hand-overlay{z-index:3;pointer-events:none}.camera-placeholder{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:var(--well)}.camera-stage.active .camera-placeholder{display:none}.camera-icon{width:34px;height:34px;border:2px solid var(--bronze-hi);border-radius:50%;box-shadow:0 0 0 7px #261a17}.tracker{position:absolute;z-index:5;width:20px;height:20px;transform:translate(-50%,-50%);border:1px solid var(--lime);border-radius:50%;opacity:0;transition:opacity .2s}.camera-stage.active .tracker{opacity:1}.tracker span{position:absolute;inset:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime)}.tracker-readout{position:absolute;z-index:5;display:flex;gap:8px;align-items:baseline;transform:translate(17px,-50%);padding:7px 9px;border:0;border-radius:8px;background:#161518;color:var(--text);opacity:0;white-space:nowrap}.camera-stage.active .tracker-readout{opacity:1}.tracker-readout b{font:600 .9rem/1 "Manrope",sans-serif}.tracker-readout span{font:500 .63rem/1 "IBM Plex Mono",monospace;color:var(--bronze-hi)}.camera-actions{display:flex;gap:10px;align-items:center;padding-top:15px}.camera-button,.diagnostic-button,.sound-button{border:0}.camera-button{padding:12px 17px;border-radius:12px;background:var(--bronze);color:#17100d;font-weight:700;box-shadow:inset 0 1px rgba(255,255,255,.38),0 3px 0 #75452f}.camera-button:hover{background:var(--bronze-hi)}.diagnostic-button{padding:10px 3px;background:transparent;color:var(--muted);font-size:.82rem}.diagnostic-button:hover{color:var(--text)}.debug-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:14px;background:var(--line-soft);font:500 .62rem/1.3 "IBM Plex Mono",monospace}.debug-panel[hidden]{display:none}.debug-panel div{display:flex;justify-content:space-between;gap:8px;padding:9px;background:var(--well);color:var(--muted)}.debug-panel b{color:var(--bronze-hi);font-weight:500;text-align:right}.synth-module{padding:22px;border-radius:24px}.synth-heading{display:flex;justify-content:space-between;gap:14px;align-items:start;padding-bottom:20px}.synth-heading p{margin:3px 0 0;color:var(--bronze-hi)}.synth-heading h1{margin:7px 0 0;font:600 clamp(1.35rem,2vw,1.7rem)/1.1 "Manrope",sans-serif}.sound-button{display:flex;gap:12px;width:100%;margin:19px 0;padding:13px 0;background:transparent;color:var(--text);text-align:left}.sound-button:hover,.sound-button.active{color:var(--bronze-hi)}.power{flex:0 0 18px;width:18px;height:18px;margin-top:2px;border:2px solid var(--bronze-hi);border-radius:50%;box-shadow:inset 0 0 0 3px var(--panel)}.sound-button.active .power{background:var(--lime);border-color:var(--lime);box-shadow:0 0 12px rgba(213,251,84,.45)}.sound-button b,.sound-button small{display:block}.sound-button b{font-size:.88rem}.sound-button small{padding-top:3px;color:var(--muted);font-size:.72rem}.controls{display:grid;gap:15px}.control-block{display:grid;gap:8px;border:0;padding:0;margin:0;min-inline-size:0}.control-block label,.control-block legend{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;color:var(--text);padding:0}.control-block legend{width:100%}output{font:500 .64rem "IBM Plex Mono",monospace;color:var(--bronze-hi)}input[type=range]{width:100%;height:16px;margin:0;accent-color:var(--bronze-hi)}.waveform-options{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.waveform-options label{position:relative;display:block}.waveform-options input{position:absolute;opacity:0}.waveform-options span{display:block;padding:9px 4px;text-align:center;color:var(--muted);font:500 .62rem "IBM Plex Mono",monospace;cursor:pointer;background:var(--well);border-radius:7px}.waveform-options input:checked+span{background:#30231f;color:var(--bronze-hi)}.gesture-toggle{display:flex;justify-content:space-between;align-items:center;padding-top:15px;margin-top:2px;border-top:1px solid var(--line-soft);font-size:.8rem}input[type=checkbox]{appearance:none;width:36px;height:20px;margin:0;border:0;border-radius:999px;background:#34353a;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}input[type=checkbox]:after{content:"";display:block;width:14px;height:14px;margin:2px;border-radius:50%;background:#b8b6ba;transition:transform .18s}input[type=checkbox]:checked{background:#6f4532}input[type=checkbox]:checked:after{transform:translateX(16px);background:var(--bronze-hi)}.gesture-guide{margin-top:2px}.gesture-guide summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none;color:var(--text);font-size:.8rem}.gesture-guide summary::-webkit-details-marker{display:none}.guide-title:after{content:" +";color:var(--bronze-hi);font:500 .75rem "IBM Plex Mono",monospace}.gesture-guide[open] .guide-title:after{content:" −"}.guide-hint{color:var(--muted);font:500 .6rem "IBM Plex Mono",monospace}.gesture-items{display:grid;gap:9px;margin-top:13px}.gesture-items article{display:flex;gap:11px;align-items:center;padding:9px 0;background:var(--panel)}.gesture-symbol{color:var(--bronze-hi);font:400 1.35rem/1 "IBM Plex Mono",monospace}.gesture-items p{margin:0}.gesture-items b,.gesture-items small{display:block}.gesture-items b{font-size:.78rem}.gesture-items small{padding-top:3px;color:var(--muted);font-size:.68rem}footer{display:flex;justify-content:space-between;padding:22px 2px 0;color:#77747a;font-size:.58rem}@media(max-width:800px){.app-shell{width:min(100% - 32px,680px);padding-top:22px}.instrument{grid-template-columns:1fr}.synth-module{padding:20px}.session-label{display:none}}@media(max-width:460px){.app-shell{width:calc(100% - 24px)}.topbar{margin-bottom:18px}.brand{font-size:1rem}.camera-module{padding:12px;border-radius:18px}.synth-module{border-radius:18px}.camera-actions{align-items:flex-start;flex-direction:column}.diagnostic-button{padding-left:2px}.camera-stage{border-radius:12px}.tracker-readout{transform:translate(13px,-50%)}footer{gap:12px;flex-direction:column}.waveform-options span{font-size:.55rem;padding-inline:2px}}.pitch-workbench{display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px;align-items:stretch;min-width:0}.pitch-workbench.horizontal{grid-template-columns:minmax(0,1fr);grid-template-rows:42px minmax(0,auto)}.piano-guide{display:block;width:42px;height:100%;min-width:0;min-height:0;background:#242427;border-radius:8px;box-shadow:inset 0 0 0 1px #343439}.pitch-workbench.horizontal .piano-guide{grid-row:1;width:100%;height:42px}.pitch-workbench.horizontal .camera-stage{grid-row:2}.camera-stage{min-width:0;min-height:0}.pitch-grid{z-index:1!important;transform:none!important;pointer-events:none}.camera-placeholder{background:transparent}.camera-icon{background:var(--well)}.axis-button{padding:10px 9px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:.82rem;box-shadow:inset 0 0 0 1px var(--line)}.axis-button[aria-pressed="true"]{color:var(--bronze-hi);box-shadow:inset 0 0 0 1px var(--bronze)}.axis-button:hover{color:var(--text)}.control-label{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;color:var(--text)}.waveform-control .waveform-options{display:flex;gap:6px}.waveform-control .waveform-options label{display:block;flex:1;min-width:0}.waveform-control .waveform-options input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.waveform-control .waveform-options span{display:block;white-space:nowrap;padding:9px 4px;text-align:center}.gesture-guide summary{min-width:0;white-space:nowrap}.guide-title,.guide-hint{white-space:nowrap}.guide-hint{flex:0 0 auto}@media(max-width:460px){.camera-actions{align-items:flex-start;flex-wrap:wrap;flex-direction:row}.pitch-workbench{grid-template-columns:34px minmax(0,1fr);gap:6px}.pitch-workbench.horizontal{grid-template-columns:minmax(0,1fr);grid-template-rows:34px auto}.pitch-workbench.horizontal .piano-guide{height:34px}.piano-guide{width:34px}}.camera-actions{flex-wrap:wrap}.camera-display-options{display:flex;align-items:center;gap:5px;margin-left:auto;color:var(--muted);font:500 .62rem "IBM Plex Mono",monospace}.camera-display-options>span{margin-right:2px}.camera-display-options label{position:relative;display:flex;align-items:center}.camera-display-options input{position:absolute;opacity:0;inline-size:1px;block-size:1px}.camera-display-options label>span{display:block;padding:6px 7px;border-radius:6px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}.camera-display-options input:checked+span{color:var(--bronze-hi);background:#30231f;box-shadow:inset 0 0 0 1px var(--bronze)}.camera-display-options .compact-switch>span{min-width:28px;text-align:center}.pitch-workbench{gap:0}.piano-guide{border-radius:12px 0 0 12px;box-shadow:inset 0 0 0 1px #343439}.camera-stage{border-radius:0 12px 12px 0}.pitch-workbench.horizontal{gap:0}.pitch-workbench.horizontal .piano-guide{border-radius:12px 12px 0 0}.pitch-workbench.horizontal .camera-stage{border-radius:0 0 12px 12px}.tracker-readout{background:rgba(22,21,24,.62);backdrop-filter:blur(4px)}.tracker-readout.frequency-hidden span{display:none}@media(max-width:620px){.camera-display-options{width:100%;margin-left:0;order:3}.camera-actions{gap:8px}.camera-button{flex:1}}.pitch-workbench{position:relative;display:block;aspect-ratio:16/10}.pitch-workbench .camera-stage{width:100%;height:100%;aspect-ratio:auto;border-radius:12px}.piano-guide{position:absolute;z-index:6;inset:0 auto 0 0;width:42px;height:100%;border-radius:12px 0 0 12px;pointer-events:none}.pitch-workbench.horizontal .piano-guide{inset:0 0 auto 0;width:100%;height:42px;border-radius:12px 12px 0 0}.pitch-workbench.horizontal .camera-stage{border-radius:12px}.camera-display-options{display:grid;grid-template-columns:repeat(3,max-content);gap:12px;width:100%;margin:0;padding:12px;border-radius:12px;background:var(--panel-hi);box-shadow:inset 0 0 0 1px var(--line)}.display-group{display:flex;align-items:center;gap:0}.display-group>span{margin-right:8px;color:var(--muted);font:500 .62rem "IBM Plex Mono",monospace}.display-group label>span{border-radius:0;border-right:0;padding:8px 10px}.display-group label:first-of-type>span{border-radius:7px 0 0 7px}.display-group label:last-of-type>span{border-radius:0 7px 7px 0;border-right:1px solid var(--line)}.display-group input:checked+span{box-shadow:inset 0 0 0 1px var(--bronze)}.waveform-control .waveform-options{gap:0;padding:3px;border-radius:10px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}.waveform-control .waveform-options span{border-radius:7px;background:transparent}.waveform-control .waveform-options input:checked+span{background:#30231f;box-shadow:inset 0 0 0 1px var(--bronze)}@media(max-width:760px){.camera-display-options{grid-template-columns:1fr;gap:8px}.display-group{justify-content:space-between}.axis-group label>span{font-size:.58rem}.piano-guide{width:34px}.pitch-workbench.horizontal .piano-guide{height:34px}}.camera-actions{display:flex;align-items:center;gap:16px;flex-wrap:nowrap}.engine-switches{display:flex;gap:8px;flex:0 0 auto}.engine-switch{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:0;border-radius:10px;background:var(--well);color:var(--muted);font:600 .78rem "Manrope",sans-serif;box-shadow:inset 0 0 0 1px var(--line)}.engine-switch i{width:8px;height:8px;border-radius:50%;background:#66666b;box-shadow:0 0 0 2px #2a2b2f}.engine-switch.active{color:var(--text);box-shadow:inset 0 0 0 1px rgba(213,251,84,.45)}.engine-switch.active i{background:var(--lime);box-shadow:0 0 9px rgba(213,251,84,.8)}.camera-display-options{margin-left:auto;padding:0;background:transparent;box-shadow:none;grid-template-columns:repeat(3,max-content);gap:10px}.synth-module{padding-top:18px}.controls{gap:17px}@media(max-width:860px){.camera-actions{align-items:flex-start;flex-wrap:wrap}.camera-display-options{margin-left:0;flex-basis:100%}}@media(max-width:460px){.engine-switch{padding:9px 10px}.camera-display-options{width:100%}}@media(max-width:860px){.camera-display-options{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.display-group{min-width:0}.display-group>span{margin-right:5px;font-size:.52rem;white-space:nowrap}.display-group label>span{padding:7px 5px;font-size:.56rem;white-space:nowrap}.axis-group label>span{font-size:.52rem}}
.info-button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--well);color:var(--bronze-hi);font:600 .9rem/1 "IBM Plex Mono",monospace;box-shadow:inset 0 0 0 1px var(--line)}.info-button:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--bronze)}.effects{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line-soft)}.effects-heading{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem}.effects-heading small{color:var(--muted);font:500 .58rem "IBM Plex Mono",monospace}.effect-row{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center}.effect-row>label{font-size:.78rem}.effect-row>input{margin:0}.effect-row .effect-parameter{min-width:0}.effect-parameter label{display:flex;justify-content:space-between;gap:6px;margin-bottom:5px;color:var(--muted);font-size:.63rem}.effect-row:has(#delay-enabled){grid-template-columns:auto auto 1fr}.effect-row:has(#delay-enabled) .effect-parameter{grid-column:3}.info-modal{width:min(520px,calc(100% - 32px));padding:0;border:0;border-radius:18px;background:var(--panel);color:var(--text);box-shadow:0 24px 72px rgba(0,0,0,.72)}.info-modal::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(3px)}.info-modal-head{display:flex;justify-content:space-between;gap:20px;padding:22px 22px 16px;border-bottom:1px solid var(--line-soft)}.info-modal-head p{margin:0;color:var(--bronze-hi);font:500 .6rem "IBM Plex Mono",monospace;letter-spacing:.14em}.info-modal-head h2{margin:8px 0 0;font-size:1.35rem}.modal-close{width:32px;height:32px;border:0;border-radius:50%;background:var(--well);color:var(--muted);font-size:1.35rem;line-height:1}.modal-close:hover{color:var(--text)}.info-modal-body{display:grid;gap:16px;padding:20px 22px 24px}.info-modal-body h3{margin:0 0 5px;color:var(--bronze-hi);font-size:.78rem}.info-modal-body p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.55}@media(max-width:520px){.engine-switches{gap:6px}.info-button{width:32px;height:32px}.effect-row{grid-template-columns:auto auto 1fr}.effects-heading small{display:none}.info-modal-head,.info-modal-body{padding-left:17px;padding-right:17px}}
.camera-actions{flex-wrap:wrap}.camera-gesture-toggle{display:flex;flex:1 1 100%;justify-content:space-between;align-items:center;padding:11px 2px 0;color:var(--muted);font-size:.76rem}.toggle-switch{position:relative;display:inline-flex;flex:0 0 auto;cursor:pointer}.toggle-switch input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.toggle-switch i{position:relative;display:block;width:40px;height:22px;border-radius:999px;background:#313238;box-shadow:inset 0 1px 4px rgba(0,0,0,.6);transition:background .18s}.toggle-switch i:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#b7b6ba;box-shadow:0 1px 2px rgba(0,0,0,.45);transition:transform .18s,background .18s}.toggle-switch input:checked+i{background:#79503a;box-shadow:inset 0 0 0 1px rgba(241,177,139,.45)}.toggle-switch input:checked+i:after{transform:translateX(18px);background:var(--bronze-hi)}.delay-block{display:grid;gap:13px;padding-top:16px;border-top:1px solid var(--line-soft)}.delay-heading{display:flex;justify-content:space-between;align-items:center;font-size:.8rem}.delay-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.delay-controls .effect-parameter{min-width:0}.delay-controls .effect-parameter label{display:flex;justify-content:space-between;gap:6px;margin-bottom:6px;color:var(--muted);font-size:.63rem}.effects{display:none}@media(max-width:720px){.delay-controls{grid-template-columns:1fr}.camera-gesture-toggle{padding-top:9px}}
.camera-actions{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;flex-wrap:nowrap}.engine-switches{grid-column:1;white-space:nowrap}.camera-display-options{grid-column:2;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;width:auto;margin:0;padding:0;background:transparent;box-shadow:none}.camera-display-options .display-group{display:flex;flex:0 0 auto;justify-content:initial}.camera-display-options .display-group>span{display:none}.camera-display-options .display-group label>span{padding:7px 8px;font-size:.59rem}.camera-display-options .axis-group label>span{min-width:29px;text-align:center}.camera-gesture-toggle{display:flex;flex:0 0 auto;align-items:center;gap:7px;padding:0;color:var(--muted);font:500 .59rem "IBM Plex Mono",monospace;white-space:nowrap}.camera-gesture-toggle .toggle-switch i{width:34px;height:19px}.camera-gesture-toggle .toggle-switch i:after{width:13px;height:13px}.camera-gesture-toggle .toggle-switch input:checked+i:after{transform:translateX(15px)}.info-button{grid-column:3}.delay-controls{grid-template-columns:1fr;gap:13px}.delay-controls .effect-parameter label{font-size:.7rem}.control-block input[type=range],.delay-controls input[type=range]{height:30px;margin:-6px 0;cursor:ew-resize}.control-block input[type=range]::-webkit-slider-thumb,.delay-controls input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 9px rgba(241,177,139,.14)}.control-block input[type=range]::-moz-range-thumb,.delay-controls input[type=range]::-moz-range-thumb{box-shadow:0 0 0 9px rgba(241,177,139,.14)}@media(max-width:860px){.camera-actions{grid-template-columns:auto 1fr auto;gap:8px}.camera-display-options{justify-content:flex-start;overflow-x:auto;padding-bottom:2px}.camera-display-options::-webkit-scrollbar{display:none}.engine-switch{padding:9px 9px}.camera-display-options .display-group label>span{padding:7px 6px}.camera-gesture-toggle{font-size:.54rem}}@media(max-width:580px){.camera-actions{grid-template-columns:1fr auto}.engine-switches{grid-column:1}.info-button{grid-column:2}.camera-display-options{grid-column:1/-1;justify-content:flex-start}.camera-gesture-toggle{margin-left:auto}}
input[type=range]{--range-fill:0%;-webkit-appearance:none;appearance:none;height:30px;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:7px;border:1px solid #8d8b87;border-radius:999px;background:linear-gradient(90deg,var(--bronze-hi) 0 var(--range-fill),#48484b var(--range-fill) 100%);box-shadow:inset 0 1px 1px rgba(0,0,0,.45)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5.5px;border:0;border-radius:50%;background:var(--bronze-hi);box-shadow:0 0 0 8px rgba(241,177,139,.14),0 1px 3px rgba(0,0,0,.42)}input[type=range]::-moz-range-track{height:7px;border:1px solid #8d8b87;border-radius:999px;background:#48484b;box-shadow:inset 0 1px 1px rgba(0,0,0,.45)}input[type=range]::-moz-range-progress{height:7px;border-radius:999px;background:var(--bronze-hi)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--bronze-hi);box-shadow:0 0 0 8px rgba(241,177,139,.14),0 1px 3px rgba(0,0,0,.42)}
input[type=range]{cursor:pointer!important}.performance-deck{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;margin-top:22px;padding:16px 20px;border-radius:18px;background:var(--panel);box-shadow:inset 0 1px rgba(255,255,255,.05),0 14px 28px var(--shadow)}.performance-copy span{display:block;color:var(--bronze-hi);font:500 .6rem "IBM Plex Mono",monospace;letter-spacing:.14em}.performance-copy p{margin:6px 0 0;color:var(--muted);font-size:.74rem}.performance-layers{display:flex;gap:7px}.performance-toggle{display:grid;gap:3px;min-width:90px;padding:10px 12px;border:0;border-radius:10px;background:var(--well);color:var(--muted);text-align:left;box-shadow:inset 0 0 0 1px var(--line)}.performance-toggle b{font-size:.76rem}.performance-toggle small{font-size:.61rem}.performance-toggle.active{color:var(--text);background:#30231f;box-shadow:inset 0 0 0 1px var(--bronze)}.performance-toggle.active:before{content:"";position:absolute}.performance-state{color:var(--bronze-hi);font:500 .62rem "IBM Plex Mono",monospace;white-space:nowrap}@media(max-width:860px){.performance-deck{grid-template-columns:1fr;gap:12px}.performance-layers{width:100%}.performance-toggle{flex:1}.performance-state{white-space:normal}}@media(max-width:480px){.performance-deck{padding:14px}.performance-layers{display:grid;grid-template-columns:repeat(3,1fr)}.performance-toggle{min-width:0;padding:9px}.performance-toggle small{display:none}}.camera-gesture-toggle>span:first-child{padding:0!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important}
.accompaniment-deck{margin-top:22px;padding:20px;border-radius:22px;background:var(--panel);box-shadow:inset 0 1px rgba(255,255,255,.05),0 16px 32px var(--shadow)}.transport-bar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding-bottom:17px;border-bottom:1px solid var(--line-soft)}.transport-bar p,.accompaniment-panel>header p{margin:0;color:var(--bronze-hi);font:500 .6rem/1.25 "IBM Plex Mono",monospace;letter-spacing:.14em}.transport-bar h2{margin:6px 0 0;font-size:1.18rem}.transport-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}.transport-button,.record-button{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border:0;border-radius:10px;background:var(--well);color:var(--text);font-weight:700;font-size:.77rem;box-shadow:inset 0 0 0 1px var(--line)}.transport-button i{width:8px;height:8px;border-radius:50%;background:#686970}.transport-button.active{background:#30231f;box-shadow:inset 0 0 0 1px var(--bronze)}.transport-button.active i{background:var(--lime);box-shadow:0 0 9px rgba(213,251,84,.7)}.tempo-control{display:grid;grid-template-columns:auto 96px auto;gap:7px;align-items:center;color:var(--muted);font:500 .62rem "IBM Plex Mono",monospace}.tempo-control input{height:22px}.segmented{display:flex;padding:3px;border-radius:9px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}.segmented button{padding:6px 9px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:500 .62rem "IBM Plex Mono",monospace}.segmented button.selected{background:#30231f;color:var(--bronze-hi)}.transport-toggle{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.7rem}.transport-toggle input{width:31px;height:18px}.transport-toggle input:after{width:12px;height:12px}.transport-toggle input:checked:after{transform:translateX(13px)}.accompaniment-grid{display:grid;grid-template-columns:minmax(170px,.7fr) minmax(300px,1.5fr) minmax(240px,1fr);gap:14px;padding-top:18px}.accompaniment-panel{min-width:0;padding:15px;border-radius:14px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-soft)}.accompaniment-panel>header{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.accompaniment-panel h3{margin:6px 0 0;font-size:.9rem}.accompaniment-panel header output{white-space:nowrap}.looper-panel>p{margin:14px 0;color:var(--muted);font-size:.74rem;line-height:1.45}.record-button{width:100%;justify-content:center;background:#30231f;color:var(--bronze-hi);box-shadow:inset 0 0 0 1px var(--bronze)}.record-button:disabled{opacity:.5;cursor:wait}.count-in-option{display:flex;gap:7px;align-items:center;margin-top:13px;color:var(--muted);font-size:.67rem}.count-in-option input{width:31px;height:18px}.count-in-option input:after{width:12px;height:12px}.count-in-option input:checked:after{transform:translateX(13px)}.step-sequencer{display:grid;gap:7px;margin-top:15px}.sequencer-row{display:grid;grid-template-columns:57px minmax(0,1fr);gap:9px;align-items:center}.sequencer-name{color:var(--muted);font-size:.67rem}.sequencer-steps,.bass-sequencer{display:grid;grid-template-columns:repeat(16,minmax(10px,1fr));gap:3px}.sequencer-step{min-width:0;aspect-ratio:1;border:0;border-radius:3px;background:#2a2b2f;box-shadow:inset 0 0 0 1px #38393e}.sequencer-step.is-beat,.bass-slot.is-beat{box-shadow:inset 0 0 0 1px #665143}.sequencer-step.is-on{background:var(--bronze);box-shadow:inset 0 1px rgba(255,255,255,.32)}.sequencer-step.is-playing,.bass-slot.is-playing{outline:1px solid var(--lime);outline-offset:1px}.bass-settings{display:grid;grid-template-columns:1fr 1fr minmax(80px,1.4fr);gap:7px;margin-top:14px}.bass-settings label{display:grid;gap:5px;color:var(--muted);font-size:.61rem}.bass-settings select{min-width:0;padding:7px;border:0;border-radius:6px;background:#26272b;color:var(--text);font:500 .64rem "IBM Plex Mono",monospace}.bass-settings input{height:19px}.bass-sequencer{margin-top:15px}.bass-slot{display:block;min-width:0}.bass-slot select{width:100%;height:26px;padding:0 1px;border:0;border-radius:3px;background:#292a2e;color:var(--muted);text-align:center;font:500 .58rem "IBM Plex Mono",monospace}.bass-slot select:has(option:checked:not([value=""])) {color:var(--bronze-hi);background:#30231f}@media(max-width:1050px){.accompaniment-grid{grid-template-columns:minmax(180px,.7fr) minmax(0,1.5fr)}.bass-panel{grid-column:1/-1}.bass-panel .bass-sequencer{grid-template-columns:repeat(16,minmax(20px,1fr))}}@media(max-width:720px){.transport-bar{align-items:flex-start;flex-direction:column}.transport-controls{justify-content:flex-start}.accompaniment-grid{grid-template-columns:1fr}.bass-panel{grid-column:auto}.sequencer-steps,.bass-sequencer{gap:2px}.sequencer-row{grid-template-columns:52px minmax(0,1fr)}}@media(max-width:460px){.accompaniment-deck{padding:14px;border-radius:18px}.transport-controls{gap:8px}.tempo-control{grid-template-columns:auto 76px auto}.transport-toggle{margin-left:2px}.bass-settings{grid-template-columns:1fr 1fr}.bass-settings label:last-child{grid-column:1/-1}.sequencer-name{font-size:.61rem}.sequencer-row{gap:6px}}
.panel-heading{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.panel-heading output{white-space:nowrap}
.instrument{grid-template-columns:minmax(0,1.7fr) minmax(350px,.7fr);align-items:stretch}.camera-module{padding:16px}.pitch-workbench{aspect-ratio:16/9}.workspace{display:flex;flex-direction:column;min-height:0;padding:14px}.workspace-tabs,.session-tabs{display:flex;gap:4px;padding:4px;border-radius:11px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}.workspace-tab,.session-tab{flex:1;padding:8px 9px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:600 .68rem "IBM Plex Mono",monospace}.workspace-tab.active,.session-tab.active{background:#30231f;color:var(--bronze-hi);box-shadow:inset 0 0 0 1px var(--bronze)}.workspace-panel{display:none;min-height:0}.workspace-panel.active{display:block}.workspace-panel[data-workspace-panel="sound"]{padding:15px 2px 0}.workspace .controls{gap:11px}.workspace .control-block{gap:5px}.workspace .control-block input[type=range]{height:23px;margin:-2px 0}.compact-effects{margin-top:2px;border-top:1px solid var(--line-soft);padding-top:10px}.compact-effects summary{display:flex;justify-content:space-between;cursor:pointer;color:var(--text);font-size:.76rem;list-style:none}.compact-effects summary span{color:var(--muted);font:500 .57rem "IBM Plex Mono",monospace}.compact-effects summary:after{content:"+";color:var(--bronze-hi)}.compact-effects[open] summary:after{content:"−"}.compact-effects .delay-controls{padding-top:11px}.inline-delay{display:flex;justify-content:space-between;align-items:center;padding-top:9px;color:var(--muted);font-size:.72rem}.inline-delay .toggle-switch i{width:34px;height:19px}.inline-delay .toggle-switch i:after{width:13px;height:13px}.inline-delay .toggle-switch input:checked+i:after{transform:translateX(15px)}.session-panel{padding-top:14px}.transport-bar{display:grid;grid-template-columns:1fr auto;gap:11px;padding-bottom:11px}.transport-bar h2{font-size:1rem}.transport-controls{gap:7px;justify-content:flex-end}.transport-button{padding:8px 10px}.tempo-control{grid-template-columns:auto 68px auto;gap:5px}.tempo-control input{height:18px}.segmented button{padding:5px 7px}.transport-toggle{font-size:.62rem}.session-tabs{margin:12px 0}.session-workspace{display:none;padding:12px;border-radius:12px}.session-workspace.active{display:block}.panel-heading{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.panel-heading p{margin:0;color:var(--bronze-hi);font:500 .54rem "IBM Plex Mono",monospace;letter-spacing:.1em}.panel-heading h3{margin:4px 0 0;font-size:.84rem}.panel-description{margin:10px 0;color:var(--muted);font-size:.69rem;line-height:1.35}.looper-actions{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.record-button{padding:9px}.looper-actions .transport-toggle{white-space:nowrap}.step-sequencer{gap:5px;margin-top:11px}.sequencer-row{grid-template-columns:48px minmax(0,1fr);gap:6px}.sequencer-name{font-size:.6rem}.sequencer-steps{gap:2px}.sequencer-step{border-radius:2px}.bass-settings{grid-template-columns:1fr 1fr 1.2fr;gap:5px;margin-top:11px}.bass-settings label{font-size:.56rem}.bass-settings select{padding:6px 4px;font-size:.56rem}.bass-settings input{height:17px}.bass-sequencer{gap:2px;margin-top:11px}.bass-slot select{height:22px;font-size:.5rem}.workspace~.accompaniment-deck{display:none}@media(max-width:980px){.instrument{grid-template-columns:minmax(0,1fr) 340px}.camera-display-options .camera-gesture-toggle>span:first-child{display:none}.camera-gesture-toggle{gap:0}}@media(max-width:800px){.instrument{grid-template-columns:1fr}.workspace{min-height:auto}.pitch-workbench{aspect-ratio:16/10}.workspace-tabs{margin-top:2px}.session-workspace{min-height:auto}}@media(max-width:520px){.workspace{padding:12px}.transport-bar{grid-template-columns:1fr}.transport-controls{justify-content:flex-start}.looper-actions{grid-template-columns:1fr}.session-tabs{margin:10px 0}.sequencer-row{grid-template-columns:44px minmax(0,1fr)}}
.bass-sequencer{display:grid;gap:1px;margin-top:11px;padding:4px;border-radius:8px;background:#151619;box-shadow:inset 0 0 0 1px var(--line)}.bass-note-row{display:grid;grid-template-columns:29px repeat(16,minmax(0,1fr));gap:1px;min-height:12px}.bass-sequencer.two-bars .bass-note-row{grid-template-columns:29px repeat(32,minmax(0,1fr))}.bass-note-label{display:flex;align-items:center;padding-left:3px;color:#9c999d;font:500 .48rem/1 "IBM Plex Mono",monospace}.bass-note-row.is-sharp{background:rgba(0,0,0,.22)}.bass-note-cell{min-width:0;padding:0;border:0;border-radius:1px;background:#2a2b2f;box-shadow:inset 0 0 0 1px #38393e}.bass-note-cell.is-beat{box-shadow:inset 1px 0 #75513e}.bass-note-cell.is-on{background:var(--bronze);box-shadow:inset 0 1px rgba(255,255,255,.42)}.bass-note-cell.is-playing{outline:1px solid var(--lime);outline-offset:0;z-index:1}.bass-note-cell:hover{background:#5c4336}.bass-note-cell:focus-visible{outline:1px solid var(--bronze-hi);outline-offset:1px}@media(max-width:520px){.bass-note-row{grid-template-columns:25px repeat(16,minmax(0,1fr));min-height:11px}.bass-sequencer.two-bars .bass-note-row{grid-template-columns:25px repeat(32,minmax(0,1fr))}.bass-note-label{font-size:.43rem}}
.bass-sequencer{display:grid!important;grid-template-columns:1fr!important;gap:1px!important}.bass-note-row{display:grid!important;grid-template-columns:29px repeat(16,minmax(0,1fr))!important;min-height:12px}.bass-sequencer.two-bars .bass-note-row{grid-template-columns:29px repeat(32,minmax(0,1fr))!important}@media(max-width:520px){.bass-note-row{grid-template-columns:25px repeat(16,minmax(0,1fr))!important;min-height:11px}.bass-sequencer.two-bars .bass-note-row{grid-template-columns:25px repeat(32,minmax(0,1fr))!important}}
.steps-control{max-width:154px;overflow:hidden}.steps-control button{min-width:25px;padding-inline:5px}.custom-steps{display:flex;align-items:center;gap:4px;color:var(--muted);font:500 .57rem "IBM Plex Mono",monospace}.custom-steps input{width:38px;padding:5px 3px;border:0;border-radius:5px;background:var(--well);color:var(--bronze-hi);text-align:center;font:500 .65rem "IBM Plex Mono",monospace;box-shadow:inset 0 0 0 1px var(--line)}.loop-workspace{display:grid!important;gap:10px}.loop-transport{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;color:var(--muted);font:500 .62rem "IBM Plex Mono",monospace}.loop-record-indicator{width:7px;height:7px;border-radius:50%;background:#55565c}.loop-record-indicator.active{background:var(--bronze-hi);box-shadow:0 0 0 4px rgba(210,138,97,.16);animation:record-pulse 1s infinite}.loop-timeline{position:relative;overflow:hidden;height:46px;border-radius:8px;background:#151619;box-shadow:inset 0 0 0 1px var(--line)}.loop-timeline:after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--loop-progress,0)*100%);background:rgba(210,138,97,.12);pointer-events:none}.loop-waveform{display:flex;align-items:center;gap:2px;height:100%;padding:7px}.loop-waveform i{display:block;flex:1;height:var(--wave-height);min-width:1px;background:#a6a4a1;opacity:.7}.loop-playhead{position:absolute;z-index:2;top:0;bottom:0;left:0;width:1px;background:var(--bronze-hi);box-shadow:0 0 8px var(--bronze-hi);transition:transform .05s linear}.loop-layers{display:grid;gap:5px}.loop-layers>p{margin:2px 0;color:var(--muted);font-size:.63rem}.loop-layer{display:grid;grid-template-columns:24px 1fr auto auto;gap:7px;align-items:center;padding:6px 7px;border-radius:6px;background:#1e1f23;box-shadow:inset 0 0 0 1px var(--line-soft)}.layer-index{color:var(--bronze-hi);font:500 .57rem "IBM Plex Mono",monospace}.layer-name{font-size:.66rem}.layer-mute,.layer-delete{border:0;border-radius:4px;background:var(--well);color:var(--muted);font:500 .56rem "IBM Plex Mono",monospace;padding:4px 5px}.layer-mute[aria-pressed="true"]{color:var(--bronze-hi)}.layer-delete{font-size:.8rem;line-height:1;color:#d68d6c}@keyframes record-pulse{50%{box-shadow:0 0 0 7px rgba(210,138,97,0)}}@media(max-width:520px){.steps-control{max-width:142px}.steps-control button{min-width:22px;padding-inline:4px}.custom-steps{font-size:.51rem}.loop-workspace{gap:8px}.loop-layers{max-height:122px;overflow:auto}}
.camera-gesture-toggle,.camera-gesture-toggle .toggle-switch{padding:0!important;background:transparent!important;box-shadow:none!important}.camera-gesture-toggle .toggle-switch i{background:transparent!important;box-shadow:inset 0 0 0 1px var(--line)!important}.camera-gesture-toggle .toggle-switch input:checked+i{background:transparent!important;box-shadow:inset 0 0 0 1px var(--bronze)!important}.camera-gesture-toggle .toggle-switch input:checked+i:after{background:var(--bronze-hi)}.workspace .delay-block{display:grid;gap:10px;padding-top:10px;margin-top:2px;border-top:1px solid var(--line-soft)}.workspace .delay-heading{display:flex;justify-content:space-between;align-items:center}.workspace .delay-controls{display:grid;grid-template-columns:1fr;gap:10px}.workspace .delay-controls .effect-parameter{min-width:0}.workspace .delay-controls .effect-parameter label{display:flex;justify-content:space-between;gap:6px;margin-bottom:4px;color:var(--muted);font-size:.63rem}
.loop-timeline{display:none}.loop-timeline.visible{display:block}.loop-timeline.recording .loop-waveform i{animation:wave-live .45s ease-in-out infinite alternate}.loop-timeline.recording .loop-waveform i:nth-child(3n){animation-delay:.12s}.loop-timeline.recording .loop-waveform i:nth-child(4n){animation-delay:.22s}@keyframes wave-live{to{transform:scaleY(.36);opacity:.42}}
.session-heading{display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:end;padding:2px 2px 11px}.session-heading p{grid-column:1/-1;margin:0;color:var(--bronze-hi);font:500 .56rem "IBM Plex Mono",monospace;letter-spacing:.14em}.session-heading h2{margin:0;font-size:1.08rem}.session-heading span{padding-bottom:2px;color:var(--muted);font:500 .55rem "IBM Plex Mono",monospace}.session-tabs{margin:0 0 10px;padding:3px;border-radius:12px}.session-tab{display:flex;justify-content:center;align-items:center;gap:5px;min-height:35px;padding:7px 5px;font-size:.64rem}.session-tab i{font-style:normal;color:#77777c;font-size:.72rem}.session-tab.active i{color:var(--bronze-hi)}.session-transport{display:none;gap:8px;margin-bottom:10px;padding:9px;border-radius:10px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-soft)}.session-transport.active{display:grid}.transport-start-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:7px;border-bottom:1px solid var(--line-soft)}.transport-start-row>span{color:var(--muted);font:500 .56rem "IBM Plex Mono",monospace;letter-spacing:.1em}.transport-start-row .transport-button{min-width:112px;justify-content:center;padding:9px 14px}.session-transport .transport-controls{display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:center}.session-transport .tempo-control{grid-template-columns:auto minmax(56px,1fr) auto}.session-transport .steps-control{max-width:148px}.session-transport .custom-steps{white-space:nowrap}.loop-workspace{min-height:270px}.loop-workspace .loop-layers{order:2}.loop-workspace .looper-actions{order:3;margin-top:auto;padding-top:7px;border-top:1px solid var(--line-soft)}.toggle-switch i{width:36px;height:20px;border-radius:999px;background:#292a2f;box-shadow:inset 0 0 0 1px #42434a}.toggle-switch i:after{width:14px;height:14px;background:#b6b5bb;box-shadow:0 1px 3px rgba(0,0,0,.5)}.toggle-switch input:checked+i{background:#51372a;box-shadow:inset 0 0 0 1px var(--bronze)}.toggle-switch input:checked+i:after{transform:translateX(16px)}@media(max-width:520px){.session-transport .transport-controls{grid-template-columns:1fr auto}.session-transport .custom-steps{grid-column:2}.session-transport .steps-control{grid-column:1/-1;max-width:none}.session-heading span{display:none}}
.secondary-tracker{opacity:0!important;border-color:var(--bronze-hi)!important}.secondary-tracker.visible{opacity:1!important}.secondary-tracker.tracker span{background:var(--bronze-hi);box-shadow:0 0 14px var(--bronze-hi)}.secondary-tracker.tracker-readout b{color:var(--bronze-hi)}.polyphony-toggle{font-size:.56rem!important}.polyphony-toggle>span:first-child{color:var(--muted)!important}@media(max-width:980px){.polyphony-toggle>span:first-child{display:none}.polyphony-toggle{gap:0!important}}