/* Native vocal faces, normalized to the shared 141px device body. */
body .studio .live123-card .live-device-body .vocal-structure{--vocal-cyan:#0bc8db;--vocal-display:#20232c;--vocal-ink:#aaaeb8;position:relative;gap:2px;height:135px;min-height:135px;max-height:135px;color:var(--vocal-ink);font:8px/10px LiveSans,Arial,sans-serif}
body .studio .live123-card .vocal-structure [hidden]{display:none!important}
body .studio .live123-card .vocal-structure output{display:block;white-space:nowrap;font:inherit;font-variant-numeric:tabular-nums}
body .studio .live123-card .vocal-structure :is(button,input,select){font-family:LiveSans,Arial,sans-serif}
body .studio .live123-card .vocal-auto-shift{display:grid;grid-template-columns:48px minmax(0,1fr) 48px 49px;grid-template-rows:minmax(0,1fr);padding:0;background:#4a4a4a}
body .studio .live123-card .vocal-auto-shift>section,body .studio .live123-card .vocal-auto-shift>.vocal-center{min-height:0;max-height:100%;min-width:0;height:100%}
body .studio .live123-card .vocal-auto-shift h4{font:8px/10px LiveSans,Arial,sans-serif;margin:0;padding:0}
body .studio .live123-card .vocal-auto-shift .live-compact-controls{min-width:0;gap:0}
body .studio .live123-card .vocal-auto-shift .live-control-cell{min-width:0}
body .studio .live123-card .vocal-auto-shift .live-device-control{font:8px/9px LiveSans,Arial,sans-serif;gap:0;margin:0;min-height:0}
body .studio .live123-card .vocal-auto-shift .live-device-control>span:first-child{font:8px/9px LiveSans,Arial,sans-serif;white-space:nowrap}
body .studio .live123-card .vocal-auto-shift .live-device-readout{height:11px;min-height:11px;font:8px/10px LiveSans,Arial,sans-serif;color:var(--vocal-cyan);justify-content:center;gap:1px}
body .studio .live123-card .vocal-auto-shift .live-device-readout input{height:11px;min-height:11px;line-height:10px;font-size:8px;padding:0;background:transparent;color:inherit}
body .studio .live123-card .vocal-auto-shift .live-device-readout small{font:8px/10px LiveSans,Arial,sans-serif}
body .studio .live123-card .vocal-auto-shift .live-device-choice select{height:11px;min-height:11px;font-size:8px;border:0;border-radius:0;padding:0 8px 0 1px;background-color:transparent;color:var(--vocal-cyan)}
body .studio .live123-card .vocal-auto-shift .live-device-toggle{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2px;font-size:8px}
body .studio .live123-card .vocal-auto-shift .live-device-toggle input{appearance:none;width:7px;height:7px;min-height:7px;border:1px solid #252525;padding:0;margin:0;background:#333}
body .studio .live123-card .vocal-auto-shift .live-device-toggle input:checked{background:var(--vocal-cyan)}
body .studio .live123-card .vocal-auto-shift .live-device-toggle>span:empty{display:none}
/* Real vertical-drag knobs use the native black arc and needle. */
body .studio .live123-card .vocal-auto-shift .knob-control{--knob-color:#20232c;position:relative;width:22px;height:22px;min-width:22px;min-height:22px;flex-basis:22px;--knob-face-size:20px;padding:1px;background:conic-gradient(from 225deg,#20232c 0deg 270deg,transparent 270deg 360deg)}
body .studio .live123-card .vocal-auto-shift .knob-control:before{background:#4a4a4a}
body .studio .live123-card .vocal-auto-shift .knob-control>i{background:#20232c}
body .studio .live123-card .vocal-auto-shift .live-device-dial{width:22px;height:22px;background:#20232c}
body .studio .live123-card .vocal-auto-shift .live-device-dial:before{background:#4a4a4a}
/* Header tabs operate local display state; adjacent squares are actual parameters. */
body .studio .live123-card .vocal-header-controls{position:absolute;top:-17px;left:99px;display:flex;align-items:center;gap:3px;height:14px;z-index:3;white-space:nowrap}
body .studio .live123-card .vocal-header-tab{display:flex;align-items:center;gap:1px;padding:0 2px;border:1px solid #626262;border-radius:2px;background:#20232c;height:12px}
body .studio .live123-card .vocal-header-tab button{height:10px;min-height:10px;border:0;border-radius:0;padding:0 2px;background:transparent;color:#a7a9b2;font-size:8px;line-height:10px}
body .studio .live123-card .vocal-header-tab button[aria-selected=true]{color:#c2c4cc}
body .studio .live123-card .vocal-header-controls .live-device-control>span:first-child:empty{display:none}
body .studio .live123-card .vocal-control-lfoOn input{border-color:#ffb84d!important}
body .studio .live123-card .vocal-control-lfoOn input:checked{background:#ffb84d!important}
body .studio .live123-card .vocal-control-liveMode .live-device-control>span:first-child{font-size:8px}
body .studio .live123-card .vocal-preset-header{position:absolute;left:13px;top:-17px;max-width:76px;height:13px;z-index:3}
body .studio .live123-card .vocal-preset-header select{font:8px/12px LiveSans,Arial,sans-serif;width:76px;height:13px;min-height:13px;border:0;border-radius:0;background-color:var(--live-highlight,#555);color:var(--live-text,#aaa);padding:0 8px 0 0}
/* Input note is measured; no fabricated latency is displayed. */
body .studio .live123-card .vocal-input{display:flex;flex-direction:column;justify-content:space-between;gap:0;padding:1px 3px 0;border-right:1px solid #666;text-align:center}
body .studio .live123-card .vocal-input h4{height:15px;line-height:14px;border-bottom:1px solid #555;font-weight:600}
body .studio .live123-card .vocal-input-note{height:21px;min-height:21px;font-size:7px;line-height:10px;white-space:normal}
body .studio .live123-card .vocal-input .vocal-range-buttons{height:43px;min-height:43px}
body .studio .live123-card .vocal-range-buttons .live-device-control>span:first-child{display:none}
body .studio .live123-card .vocal-range-buttons .live-choice-buttons{display:flex;flex-direction:column;gap:2px;width:100%}
body .studio .live123-card .vocal-range-buttons button{height:12px;min-height:12px;width:100%;padding:0;border:1px solid #222;border-radius:0;background:#333;color:#aaa;font:8px/10px LiveSans,Arial,sans-serif}
body .studio .live123-card .vocal-range-buttons button[aria-pressed=true]{background:#ffb65d;color:#242424}
body .studio .live123-card .vocal-input .vocal-control-inputGain{height:23px;min-height:23px}
body .studio .live123-card .vocal-input .vocal-control-inputGain .live-device-readout{height:11px;background:#087e8b;color:#172d34}
body .studio .live123-card .vocal-input-latency{height:12px;min-height:12px;border-top:1px solid #666;padding-top:1px;font-size:7px;color:#b0b0b0}
/* Quantizer geometry follows the measured native keyboard and scale footer. */
body .studio .live123-card .vocal-center{background:var(--vocal-display);min-width:0}
body .studio .live123-card .vocal-quantizer{display:grid;grid-template-rows:23px 31px 54px 19px;gap:1px;height:135px;min-height:0;padding:2px 4px;background:var(--vocal-display)}
body .studio .live123-card .vocal-cents-scale{display:flex;justify-content:space-between;height:9px;font-size:7px;line-height:9px;color:#9297a3;white-space:nowrap}
body .studio .live123-card .vocal-cents-bar{position:relative;height:11px;margin:0 1px;background:repeating-linear-gradient(to right,transparent 0 1px,var(--vocal-display) 1px 2px),linear-gradient(to right,#726522 0%,#a79013 48%,#e3c816 50%,#137482 52%,#0c4b57 100%)}
body .studio .live123-card .vocal-cents-bar i{position:absolute;top:0;bottom:0;width:2px;background:#ffe344;transform:translateX(-1px)}
body .studio .live123-card .vocal-correction{display:grid;grid-template-columns:1fr 39px 1fr;gap:1px;align-items:start;padding-top:1px}
body .studio .live123-card .vocal-correction .live-device-readout{padding-top:2px}
body .studio .live123-card .vocal-correction .live-device-number>span:first-child{font-size:8px}
body .studio .live123-card .vocal-control-correction .live-device-readout{font-size:10px}
body .studio .live123-card .vocal-control-correction .live-device-readout input{font-size:10px}
body .studio .live123-card .vocal-smooth .vocal-control-smoothOn .live-device-control{flex-direction:row-reverse;height:10px;min-height:10px}
body .studio .live123-card .vocal-smooth .vocal-control-smoothing .live-device-control>span:first-child{display:none}
body .studio .live123-card .vocal-target{color:var(--vocal-cyan);font-size:25px;line-height:29px;text-align:center;font-weight:300}
body .studio .live123-card .vocal-keyboard{position:relative;display:flex;align-items:stretch;isolation:isolate;min-width:0;height:54px;padding:0 14px}
body .studio .live123-card .vocal-keyboard button{position:relative;display:flex;align-items:flex-end;justify-content:center;border:0;border-right:1px solid #20232c;border-radius:0;background:#173d49;color:var(--vocal-cyan);font-size:8px;padding:0 0 2px;margin:0;box-sizing:border-box;min-height:0;height:100%}
body .studio .live123-card .vocal-keyboard button.white{flex:1;min-width:0}
body .studio .live123-card .vocal-keyboard button.black{z-index:1;flex:0 0 8%;margin:0 -4%;height:29px;background:#163640;font-size:7px;border:1px solid #20232c;border-top:0}
body .studio .live123-card .vocal-keyboard button.active{background:var(--vocal-cyan);color:#14566b}
body .studio .live123-card .vocal-keyboard button.detected b{position:absolute;top:5px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:#253d49}
body .studio .live123-card .vocal-scale-controls{display:grid;grid-template-columns:40px minmax(0,1fr) 48px;gap:3px;align-items:center;min-width:0}
body .studio .live123-card .vocal-scale-controls .live-device-control{flex-direction:row;gap:2px;min-width:0}
body .studio .live123-card .vocal-scale-controls .live-device-control>span:first-child{font-size:7px;flex:none}
body .studio .live123-card .vocal-scale-controls select{min-width:0;padding:0 7px 0 0;font-size:7px}
body .studio .live123-card .vocal-scale-controls .live-device-readout{font-size:7px;min-width:0}
body .studio .live123-card .vocal-scale-controls .live-device-readout input{font-size:7px;min-width:0}
/* Pitch/Formant and Vibrato follow the original two narrow columns. */
body .studio .live123-card :is(.vocal-pitch,.vocal-vibrato){display:flex;flex-direction:column;justify-content:space-between;gap:0;padding:1px 2px;background:#4a4a4a;min-height:0;min-width:0}
body .studio .live123-card .vocal-pitch .vocal-control-transpose,body .studio .live123-card .vocal-pitch .vocal-control-formantShift{height:43px;min-height:43px}
body .studio .live123-card :is(.vocal-pitch,.vocal-vibrato) .live-device-readout{color:#ccc}
body .studio .live123-card :is(.vocal-control-fine,.vocal-control-formantFollow,.vocal-control-vibratoRate,.vocal-control-dryWet) .live-device-readout{background:#087e8b;color:#192c31}
body .studio .live123-card .vocal-vibrato .vocal-control-vibratoAmount{height:43px;min-height:43px}
body .studio .live123-card .vocal-control-vibratoNatural{height:12px;min-height:12px}
body .studio .live123-card .vocal-control-vibratoNatural .live-device-control{position:relative;display:block;height:12px;width:100%;line-height:10px;background:#333;border:1px solid #252525;text-align:center}
body .studio .live123-card .vocal-control-vibratoNatural .live-device-control>span:first-child{line-height:10px}
body .studio .live123-card .vocal-control-vibratoNatural input{position:absolute;inset:0;width:100%!important;height:100%!important;min-height:0!important;opacity:0;cursor:pointer}
body .studio .live123-card .vocal-control-vibratoNatural .live-device-control:has(input:checked){background:#ffba4a;color:#252525}
/* LFO uses the same original central overlay and real modulation routing. */
body .studio .live123-card .vocal-lfo{display:grid;grid-template-rows:19px minmax(0,1fr) 23px 35px;gap:2px;height:135px;min-height:0;padding:2px 4px;background:var(--vocal-display);color:#aaa}
body .studio .live123-card .vocal-lfo-onset{display:grid;grid-template-columns:33px 1fr 1fr;gap:4px;min-width:0;align-items:center}
body .studio .live123-card .vocal-lfo-onset .live-device-control{flex-direction:row;gap:2px}
body .studio .live123-card .vocal-lfo .live-device-readout{color:#ffbc45}
body .studio .live123-card .vocal-lfo-graph{display:block;width:100%;height:100%;min-height:0;border:1px solid #626773}
body .studio .live123-card .vocal-lfo-graph path{fill:none;stroke:var(--vocal-cyan);stroke-width:1.4}
body .studio .live123-card .vocal-lfo-graph .vocal-lfo-grid{stroke:#626773;stroke-width:.5}
body .studio .live123-card .vocal-lfo-rate{display:grid;grid-template-columns:minmax(0,1fr) 41px 26px 44px;gap:3px;min-width:0}
body .studio .live123-card .vocal-lfo-rate .live-device-control>span:first-child{font-size:7px}
body .studio .live123-card .vocal-lfo-rate select{background:#f1b330;color:#252525}
body .studio .live123-card .vocal-lfo-routing{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:11px 21px;gap:1px 4px;min-width:0}
body .studio .live123-card .vocal-lfo-routing h4{grid-column:1/-1;border-bottom:1px solid #555;font-size:8px;line-height:10px}
body .studio .live123-card .vocal-lfo-routing .live-device-control{flex-direction:column-reverse}
/* Tuner: real Target/Strobe and Classic/Histogram, idle data stays empty. */
body .studio .live123-card .live-device-body .vocal-tuner{display:flex;flex-direction:column;gap:2px;height:135px;min-height:135px;color:#00c4d2}
body .studio .live123-card .vocal-tuner-display{position:relative;flex:1;min-height:0;background:#191919;color:#00c4d2;border-radius:1px;overflow:hidden}
body .studio .live123-card .vocal-tuner-views{position:absolute;top:2px;left:3px;z-index:2;height:11px;opacity:.5}
body .studio .live123-card .vocal-tuner-views:focus-within,body .studio .live123-card .vocal-tuner-views:hover{opacity:1}
body .studio .live123-card .vocal-tuner-views .live-device-control>span:first-child{display:none}
body .studio .live123-card .vocal-tuner-views button{font:7px/9px LiveSans,Arial,sans-serif;height:10px;min-height:10px;padding:0 3px;border:0;border-radius:0;background:#333;color:#aaa}
body .studio .live123-card .vocal-tuner-views button[aria-pressed=true]{color:#00c4d2;background:#252525}
body .studio .live123-card .vocal-target-view{position:absolute;inset:0}
body .studio .live123-card .vocal-tuner-dial{display:block;width:100%;height:100%}
body .studio .live123-card .vocal-tuner-dial .vocal-dial-arc{fill:none;stroke:#515151;stroke-width:1}
body .studio .live123-card .vocal-tuner-dial text{fill:#595959;font:8px LiveSans,Arial,sans-serif}
body .studio .live123-card .vocal-tuner-dial circle{fill:#191919;stroke:#555;stroke-width:1;vector-effect:non-scaling-stroke}
body .studio .live123-card .vocal-tuner-dial [data-vocal-bubble]{fill:#00c4d2;stroke:#00c4d2}
body .studio .live123-card .vocal-tuner-note{position:absolute;top:64px;left:0;right:0;display:flex;justify-content:center;align-items:baseline;gap:2px;text-align:center;font-size:24px;line-height:26px;font-weight:300;pointer-events:none}
body .studio .live123-card .vocal-tuner-note output{font-size:24px;line-height:26px}
body .studio .live123-card .vocal-tuner-note small{font-size:10px}
body .studio .live123-card .vocal-tuner-cents{position:absolute;left:0;right:0;top:91px;font-size:9px;text-align:center}
body .studio .live123-card .vocal-tuner-frequency{position:absolute;right:5px;bottom:2px;font-size:7px;color:#888}
body .studio .live123-card [data-vocal-tuning=tuned] [data-vocal-bubble]{fill:#b3d345;stroke:#b3d345}
body .studio .live123-card .vocal-strobe-view{position:absolute;top:26px;left:15px;right:15px;height:29px;border:1px solid #444;overflow:hidden}
body .studio .live123-card .vocal-strobe-view>div{position:absolute;inset:2px -24px;background:repeating-linear-gradient(to right,#00c4d2 0 5px,#191919 5px 12px);opacity:.75}
body .studio .live123-card .vocal-strobe-view>i{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#aaa}
body .studio .live123-card .vocal-histogram-view{position:absolute;top:22px;left:13px;right:13px;width:calc(100% - 26px);height:47px}
body .studio .live123-card .vocal-histogram-view path{fill:none;stroke:#00c4d2;stroke-width:2}
body .studio .live123-card .vocal-histogram-view .vocal-histogram-grid{stroke:#444;stroke-width:.5}
body .studio .live123-card .vocal-tuner-controls{display:flex;align-items:center;gap:2px;height:15px;min-height:15px;flex:0 0 15px;background:#222;color:#aaa;overflow:visible}
body .studio .live123-card .vocal-tuner-controls>.live-compact-controls{flex:none;gap:0}
body .studio .live123-card .vocal-tuner-controls .live-device-control>span:first-child{display:none}
body .studio .live123-card .vocal-tuner-controls button{font:8px/10px LiveSans,Arial,sans-serif;height:11px;min-height:11px;padding:0 3px;border:0;border-radius:0;background:#333;color:#999}
body .studio .live123-card .vocal-tuner-controls button[aria-pressed=true]{background:#ffb359;color:#282828}
body .studio .live123-card .vocal-tuner-controls>.live-number-strip{flex:0 0 94px;width:94px;min-width:94px;max-width:94px;margin-left:auto}
body .studio .live123-card .vocal-tuner-controls>.live-number-strip .live-control-cell{width:100%;flex:0 0 100%}
body .studio .live123-card .vocal-tuner-controls>.live-number-strip .live-device-control{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:3px;width:100%}
body .studio .live123-card .vocal-tuner-controls>.live-number-strip .live-device-control>span:first-child{display:block;font-size:8px;line-height:11px;white-space:nowrap;flex:none}
body .studio .live123-card .vocal-tuner-controls .live-device-readout{height:12px;min-height:12px;flex:none;width:auto;max-width:none;color:#00c4d2;gap:1px}
body .studio .live123-card .vocal-tuner-controls .live-device-readout input{height:12px;min-height:12px;width:4ch;max-width:4ch;line-height:12px;padding:0;background:transparent;font-size:8px}
body .studio .live123-card .vocal-tuner-controls .live-device-readout small{font-size:8px}
body .studio .live123-card .vocal-header-controls>.vocal-control-liveMode{position:absolute;left:171px;top:1px;width:57px}
/* Beat the shared remaining-device flex shell without changing other effects. */
body .studio .live123-card .live-device-body .live-colour-structure.vocal-auto-shift{display:grid;grid-template-columns:48px minmax(0,1fr) 48px 49px;grid-template-rows:minmax(0,1fr);width:100%;height:135px;min-height:135px;max-height:135px;overflow:visible;flex:none;gap:2px}
/* The pinned native Strobe view moves dash marks along the same tuning arc. */
body .studio .live123-card .vocal-strobe-view{position:absolute;inset:0;width:100%;height:100%;border:0;overflow:visible}
body .studio .live123-card .vocal-strobe-arc{fill:none;stroke:#00c4d2;stroke-width:1.5;stroke-dasharray:18 4}
body .studio .live123-card [data-vocal-strobe-bubble]{fill:#00c4d2;stroke:#00c4d2}
body .studio .live123-card [data-vocal-tuning=tuned] [data-vocal-strobe-bubble]{fill:#00df9c;stroke:#00df9c}
body .studio .live123-card [data-vocal-tuning=tuned] .vocal-strobe-arc{stroke:#00df9c}
body .studio .live123-card .vocal-tuner-readout{position:absolute;top:78px;left:0;right:0;display:flex;align-items:baseline;justify-content:center;gap:6px;font:20px/25px LiveSans,Arial,sans-serif;white-space:nowrap;pointer-events:none}
body .studio .live123-card .vocal-tuner-note{position:static;display:flex;align-items:baseline;justify-content:center;gap:0;font-size:20px;line-height:25px}
body .studio .live123-card .vocal-tuner-note output{font-size:20px;line-height:25px}
body .studio .live123-card .vocal-tuner-note small{display:none}
body .studio .live123-card .vocal-tuner-cents{position:static;font:20px/25px LiveSans,Arial,sans-serif;text-align:left}
body .studio .live123-card .vocal-tuner-frequency{display:none}
body .studio .live123-card .vocal-histogram-view{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
body .studio .live123-card .vocal-histogram-view:active{cursor:grabbing}
body .studio .live123-card .vocal-histogram-view [data-vocal-histogram]{fill:none;stroke:#999;stroke-width:1.5;stroke-linecap:round}
body .studio .live123-card [data-vocal-histogram-grid] path{stroke:#555;stroke-width:.6;fill:none}
body .studio .live123-card [data-vocal-histogram-notes] rect{fill:#191919;stroke:none}
body .studio .live123-card [data-vocal-histogram-notes] rect.tuned{fill:#00d58f}
body .studio .live123-card [data-vocal-histogram-notes] rect.detuned{fill:#ff5058}
body .studio .live123-card [data-vocal-histogram-notes] text{fill:#999;stroke:none;font:10px LiveSans,Arial,sans-serif}
body .studio .live123-card [data-vocal-view=histogram] .vocal-tuner-note{display:none}
body .studio .live123-card [data-vocal-view=histogram] .vocal-tuner-readout{display:none}
body .studio .live123-card [data-vocal-histogram-current]{stroke:#aaa;stroke-width:1.3}
body .studio .live123-card [data-vocal-histogram-value]{fill:currentColor;stroke:none;font:9px LiveSans,Arial,sans-serif}
body .studio .live123-card [data-vocal-histogram-notes] rect.adjacent{fill:#e04b53}
body .studio .live123-card [data-vocal-histogram-notes] rect.tuned+text,body .studio .live123-card [data-vocal-histogram-notes] rect.detuned+text{fill:#191919}
body .studio .live123-card .vocal-tuner-controls .live-cycle-choice button{background:#ffb359;color:#222}
body .studio .live123-card .vocal-tuner-controls .vocal-view-buttons button{background:#222;color:#777;font-size:10px;min-width:13px;padding:0 2px}
body .studio .live123-card .vocal-tuner-controls .vocal-view-buttons button[aria-pressed=true]{color:#ffb359}
body .studio .live123-card .vocal-tuner-controls button.vocal-auto-center{background:#00c4d2;color:#222;font:8px/10px LiveSans,Arial,sans-serif;height:11px;min-height:11px;padding:0 4px}
body .studio .live123-card .vocal-tuner-controls button.vocal-auto-center[aria-pressed=false]{background:#333;color:#aaa}
body .studio .live123-card .vocal-lfo-rate{grid-template-columns:minmax(0,1fr) 48px 30px;grid-template-rows:23px}
body .studio .live123-card .vocal-lfo-rate>.vocal-control-lfoWave{grid-column:1;grid-row:1}
body .studio .live123-card .vocal-lfo-rate>.vocal-control-lfoRate,body .studio .live123-card .vocal-lfo-rate>.vocal-control-lfoDivision{grid-column:2;grid-row:1}
body .studio .live123-card .vocal-lfo-rate>.vocal-control-lfoSync{grid-column:3;grid-row:1;align-self:center}
body .studio .live123-card [data-vocal-lfo-sync=off] .vocal-control-lfoDivision,body .studio .live123-card [data-vocal-lfo-sync=on] .vocal-control-lfoRate{display:none}
body .studio .live123-card .vocal-tuner-display[data-vocal-tuning=tuned]{color:#00df9c}
body .studio .live123-card .vocal-tuner-display[data-vocal-tuning=detuned]{color:#ff5058}
body .studio .live123-card [data-vocal-tuning=detuned] [data-vocal-bubble],body .studio .live123-card [data-vocal-tuning=detuned] [data-vocal-strobe-bubble]{fill:#ff5058;stroke:#ff5058}
body .studio .live123-card [data-vocal-tuning=detuned] .vocal-strobe-arc{stroke:#ff5058}