/* A voice's sound as an instrument's panel (pd-view.js; 24 Oct 2026, cyrusrex.com's docs/POLITE-DISORDER-V2.md, The sound
   view, the plan): one deep warm black with few lines, the parts set apart by space and hairlines rather than boxes, the
   light of the traces the only decoration, the controls as hardware (keys with a light, machined knobs, ui/cx-knob.css),
   the names in Archivo set wide, the numbers in figures that never shift, JetBrains Mono for the readouts. Laid over the
   sculptor's own rules (style.css, studio.css, pd.css), so each of its controls keeps its id and its handlers. */
#voicePanel{
  --sv-ground:#0d0c0b;--sv-panel:#100f0e;--sv-well:#0a0908;--sv-line:#1f1d1b;--sv-line-2:#2a2825;--sv-edge:#24221f;
  --sv-ink:#ece7dc;--sv-dim:#b9b2a6;--sv-muted:#958e82;--sv-hue:var(--sound-hue,#f2875a);--sv-wide:125%;
  --cxn-hue:var(--sv-hue);--cxn-mod:#ece7dc;--cxn-size:54px
}
/* a knob something else moves on its own (an LFO, a PATCH route, a LANE, hits of their own: pd-moved.js) has the devices'
   one colour for that on its ring and dot (ui/cx-moved.css); one its envelope, VELOCITY or RANDOM alone moves keeps the
   panel's ink */
#voicePanel .cxn.cxm-moved{--cxn-mod:var(--cx-moved,#8d98ff)}
#voicePanel .eyebrow{font:10px/1 var(--mono);letter-spacing:.22em;color:var(--sv-muted)}
#voicePanel .voice-header h2{font-stretch:var(--sv-wide);font-weight:600;letter-spacing:.02em;font-size:24px}

/* the voices as keys, each its light in its own colour, lit while chosen */
#voicePanel .voice-chip{height:40px;padding:0 13px;gap:9px;border:0;border-radius:3px;background:#191816;box-shadow:inset 0 1px 0 #262422,0 1px 0 #050404;font:10.5px/1 var(--mono);letter-spacing:.12em;color:var(--sv-dim)}
#voicePanel .voice-chip i{width:6px;height:6px;border-radius:50%;background:var(--hue);opacity:.38;transition:opacity .15s,box-shadow .15s}
#voicePanel .voice-chip[aria-pressed=true]{background:#221f1c;box-shadow:inset 0 1px 0 #3a352f,0 1px 0 #050404;color:var(--sv-ink)}
#voicePanel .voice-chip[aria-pressed=true] i{opacity:1;box-shadow:0 0 7px var(--hue)}
@media(hover:hover){#voicePanel .voice-chip:hover{color:var(--sv-ink);background:#1e1c1a}}
/* TRIGGER and REPEAT as keys */
#voicePanel .voice-strike{border:0;gap:4px;overflow:visible}
#voicePanel .voice-strike .small-button,#voicePanel .voice-strike select{min-height:40px;border:0;border-radius:3px;background:#191816;box-shadow:inset 0 1px 0 #262422,0 1px 0 #050404;font:10.5px/1 var(--mono);letter-spacing:.14em}
#voicePanel .voice-strike #repeatVoice{border:0;display:inline-flex;align-items:center;gap:8px}
#voicePanel .voice-strike #repeatVoice::before{content:'';width:6px;height:6px;border-radius:50%;background:#36322d;transition:background .15s,box-shadow .15s}
#voicePanel .voice-strike #repeatVoice[aria-pressed=true]{background:#221f1c;box-shadow:inset 0 1px 0 #3a352f,0 1px 0 #050404}
#voicePanel .voice-strike #repeatVoice[aria-pressed=true]::before{background:var(--orange);box-shadow:0 0 6px var(--orange)}
#voicePanel .voice-strike select{border:0;color:var(--orange);padding-left:10px!important}
#voicePanel .voice-strike .strike svg{width:12px;height:12px}
#voicePanel .voice-header-actions>.small-button{min-height:40px;border:0;border-radius:3px;background:#191816;box-shadow:inset 0 1px 0 #262422,0 1px 0 #050404;letter-spacing:.14em}

/* the head: the engine in its window, and how the voice plays in the pattern in theirs */
#voicePanelBody .sv-head{display:flex;align-items:center;justify-content:space-between;gap:12px 22px;flex-wrap:wrap;margin:-8px 0 0;padding:0 0 12px;border-bottom:1px solid var(--sv-line)}
#voicePanelBody .sv-head>.sv-views{margin:0 auto 0 0;border-bottom:0}
#voicePanelBody .sv-head>div{display:flex;align-items:flex-end;gap:10px 14px;flex-wrap:wrap}
#voicePanelBody .sv-head label:first-child{margin-right:0;min-width:0;width:auto}
#voicePanelBody .sv-head-steps .sv-window select{width:auto}
#voicePanelBody label.sv-window{display:flex;flex-direction:row;align-items:center;gap:8px;font:9.5px/1 var(--mono);letter-spacing:.16em;color:var(--sv-muted)}
#voicePanelBody .sv-window select,#voicePanelBody .sv-window input{min-height:36px;padding:0 30px 0 11px;border:1px solid var(--sv-edge);border-radius:2px;background-color:var(--sv-well);box-shadow:inset 0 1px 2px #000;font:11px/1 var(--mono);letter-spacing:.12em;color:var(--sv-ink)}
#voicePanelBody .sv-window input{padding-right:6px;width:70px}
#voicePanelBody .sv-head-sound .sv-window select{color:var(--sv-hue);min-width:170px}
/* TONE CHARACTER, the tone engine's starting points, at the top of its SOURCE */
#voicePanelBody .sv-source .tone-character{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 12px;padding:0;border:0}
#voicePanelBody .sv-source .tone-character>label{flex-direction:row;align-items:center;gap:8px;font:9.5px/1 var(--mono);letter-spacing:.16em;color:var(--sv-muted)}
#voicePanelBody .sv-source .tone-character select{min-height:28px;padding:0 24px 0 8px;border:1px solid var(--sv-edge);border-radius:2px;background-color:var(--sv-well);box-shadow:inset 0 1px 2px #000;font:10px/1 var(--mono);letter-spacing:.12em;color:var(--sv-hue)}
#voicePanelBody .sv-source .tone-character>div{grid-column:1/-1}
#voicePanelBody .sv-source .tone-character p{margin:0;font:12px/1.45 var(--sans);color:var(--sv-dim)}
#voicePanelBody .sv-source .tone-character>div>span{display:none}

/* the view: the stage and the path at the left, what moves it at the right */
#voicePanelBody .sv-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;border-bottom:1px solid var(--sv-line)}
#voicePanelBody .sv-main{min-width:0;padding:18px 24px 6px 0}
#voicePanelBody .sv-rail{min-width:0;padding:18px 0 22px 22px;border-left:1px solid var(--sv-line);background:linear-gradient(90deg,#100f0e,transparent 70%)}
/* what moves it stays in view as the page goes down to the knobs, so one can be dragged onto them */
#voicePanelBody .sv-rail-in{position:sticky;top:164px}
.pd-sound-full #voicePanelBody .sv-rail-in{top:96px}
#voicePanelBody .sv-main>.sculpt-media{display:block;margin:0}

/* the stage */
#voicePanelBody .portrait-panel{border:0;border-radius:4px;background:var(--sv-well);box-shadow:inset 0 0 0 1px var(--sv-line)}
#voicePanelBody .portrait-top>span:first-child,#voicePanelBody .portrait-bottom>span{font-family:var(--mono);letter-spacing:.2em;color:var(--sv-muted)}
#voicePanelBody .portrait-modes button{font-family:var(--mono);letter-spacing:.14em}

/* the hit's path: a line it runs along, then SOURCE, FILTER, AMP and RESONATOR */
#voicePanelBody .sv-path{margin-top:16px}
#voicePanelBody .sv-flow{display:block;width:100%;height:12px;overflow:visible}
#voicePanelBody .sv-flow path{stroke:var(--sv-line-2);stroke-width:1;vector-effect:non-scaling-stroke}
#voicePanelBody .sv-flow circle{fill:#fff4e6;filter:drop-shadow(0 0 4px var(--sv-hue))}
#voicePanelBody .sv-modules{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,.9fr) minmax(0,.9fr);margin-top:6px}
#voicePanelBody .sv-mod{min-width:0;display:flex;flex-direction:column;gap:12px;margin:0;padding:12px 20px 18px;border-left:1px solid var(--sv-line)}
#voicePanelBody .sv-mod:first-child{padding-left:0;border-left:0}
#voicePanelBody .sv-mod:last-child{padding-right:0}
/* a module's controls beside its name, or under it where they don't fit beside it (2 Nov 2026: RESONATOR's menu, and
   BODY's before it, ran past its module from 1181 to 1440 px, and SOURCE's second menu at 320 and 1440) */
#voicePanelBody .sv-mod-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;min-height:36px}
#voicePanelBody .sv-mod-head h3{margin:0;font:600 12px/1.1 var(--sans);font-stretch:var(--sv-wide);letter-spacing:.16em;color:var(--sv-ink)}
#voicePanelBody .sv-chip{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border:1px solid var(--sv-edge);border-radius:2px;background:var(--sv-well);box-shadow:inset 0 1px 2px #000;font:10px/1 var(--mono);letter-spacing:.14em;color:var(--sv-hue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
#voicePanelBody .sv-chip-button{cursor:pointer;color:var(--sv-dim)}
#voicePanelBody .sv-chip-button[aria-pressed=true]{color:var(--sv-hue)}
@media(hover:hover){#voicePanelBody .sv-chip-button:hover{color:var(--sv-ink);border-color:var(--sv-line-2)}}
#voicePanelBody .sv-windows{display:flex;flex-wrap:wrap;gap:6px}
#voicePanelBody .sv-windows label.sv-window{flex-direction:row;align-items:center;gap:6px}
#voicePanelBody .sv-windows select{min-height:28px;padding:0 24px 0 8px;font-size:10px;color:var(--sv-hue)}
/* its picture, drawn from the voice's own sound */
#voicePanelBody .sv-pic{margin:0;display:flex;flex-direction:column;gap:5px}
#voicePanelBody .sv-pic svg{display:block;width:100%;height:76px;overflow:visible}
#voicePanelBody .sv-pic figcaption{font:9px/1 var(--mono);letter-spacing:.16em;color:var(--sv-muted)}
#voicePanelBody .sv-pic-base{fill:none;stroke:var(--sv-line);stroke-width:1;vector-effect:non-scaling-stroke}
#voicePanelBody .sv-pic-line{fill:none;stroke:var(--sv-hue);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#voicePanelBody .sv-pic-glow{fill:none;stroke:var(--sv-hue);stroke-width:5;stroke-opacity:.16;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#voicePanelBody .sv-pic-fill{fill:var(--sv-hue);fill-opacity:.09;stroke:none}
#voicePanelBody .sv-pic-dot{fill:#fff4e6;filter:drop-shadow(0 0 3px var(--sv-hue))}
/* its knobs */
#voicePanelBody .sv-knobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:12px 2px;padding:0;border:0}
#voicePanelBody .sv-knob{gap:4px;margin:0;cursor:default}
#voicePanelBody .sv-knob:last-child{grid-column:auto}
#voicePanelBody .sv-knob>span{display:flex;flex-direction:column;align-items:center;gap:4px;font:9.5px/1 var(--mono);letter-spacing:.13em;color:var(--sv-muted);text-align:center;white-space:nowrap}
#voicePanelBody .sv-knob output{min-width:7ch;font:600 13px/1.1 var(--sans);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--sv-ink);text-align:center}
/* a readout wider than that keeps the room of its widest, unseen (knob()'s room, pd-view.js), as the output strip's words
   do, so the knob holds still as its number changes (2 Nov 2026: the RESONATOR's TUNE at −23.9 ST moved its label 1.9 px) */
#voicePanelBody .sv-knob output[data-room]::after{content:attr(data-room);display:block;height:0;overflow:hidden;visibility:hidden}
#voicePanelBody .sv-sub{display:flex;align-items:center;gap:10px;margin:2px 0 -2px;font:9px/1 var(--mono);letter-spacing:.2em;color:var(--sv-muted)}
#voicePanelBody .sv-sub::after{content:'';flex:1;height:1px;background:var(--sv-line)}

/* FILTER as a module: its curve, its eight types, its knobs */
#voicePanelBody .sv-filter .filter-body{display:flex;flex-direction:column;gap:12px;padding:0;border:0}
#voicePanelBody .sv-filter .filter-plot{height:118px;border:0;border-radius:3px;background:var(--sv-well);box-shadow:inset 0 0 0 1px var(--sv-line)}
#voicePanelBody .sv-filter .filter-line{margin:6px 0 0;font:12px/1.45 var(--sans);color:var(--sv-dim)}
/* BODY: what each hit strikes, its partials as lines where they ring; NOTHING, its knobs at rest and dimmed */
#voicePanelBody .sv-body .sv-window{flex-direction:row;align-items:center;gap:6px}
#voicePanelBody .sv-body .sv-window>span{font:9px/1 var(--mono);letter-spacing:.16em;color:var(--sv-muted)}
#voicePanelBody .sv-body select{min-height:28px;padding:0 24px 0 8px;font-size:10px;color:var(--sv-hue)}
#voicePanelBody .sv-body-floor{fill:none;stroke:var(--sv-line);stroke-width:1;vector-effect:non-scaling-stroke}
#voicePanelBody .sv-body-partial{fill:none;stroke:var(--sv-hue);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
#voicePanelBody .sv-body-line{margin:-4px 0 0;font:12px/1.45 var(--sans);color:var(--sv-dim)}
#voicePanelBody .sv-body.is-off .sv-knobs{opacity:.45}
#voicePanelBody .sv-body-plot{position:relative}
#voicePanelBody .sv-body-grid{fill:none;stroke:var(--sv-line);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
#voicePanelBody .sv-body-axis{position:absolute;top:0;transform:translateX(-50%);padding:0 3px;font:9px/1 var(--mono);letter-spacing:.04em;color:var(--sv-muted);white-space:nowrap;pointer-events:none}
#voicePanelBody .sv-body select{max-width:130px}
/* four columns wide: no room for STRIKES beside its menu, so the menu alone says what each hit strikes */
@media(min-width:1181px){#voicePanelBody .sv-body .sv-window>span{display:none}}
#voicePanelBody .sv-filter .filter-controls{gap:14px}
#voicePanelBody .sv-filter .filter-types{gap:4px}
#voicePanelBody .sv-filter .filter-types button{min-height:46px;border:0;background:#161513;box-shadow:inset 0 1px 0 #24221f,0 1px 0 #050404;color:var(--sv-dim)}
#voicePanelBody .sv-filter .filter-types button[aria-pressed=true]{background:#221f1c;box-shadow:inset 0 1px 0 #3a352f,0 1px 0 #050404,inset 0 -2px 0 var(--sv-hue);color:var(--sv-ink)}
#voicePanelBody .sv-filter .filter-parameters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 2px}
#voicePanelBody .sv-cut{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--sv-hue);opacity:.7;pointer-events:none}

/* WHAT MOVES IT */
#voicePanelBody .sv-rail-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:8px}
#voicePanelBody .sv-rail-head h3{margin:0;font:10px/1 var(--mono);letter-spacing:.22em;color:var(--sv-muted)}
#voicePanelBody .sv-rail-head span{font:9.5px/1 var(--mono);letter-spacing:.12em;color:var(--sv-muted);text-align:right}
#voicePanelBody .sv-moves ul{margin:0;padding:0;list-style:none}
#voicePanelBody .sv-move{display:grid;grid-template-columns:36px minmax(0,1fr) 6px;align-items:center;gap:12px;width:100%;min-height:56px;padding:6px 0;border:0;border-top:1px solid #1a1917;background:none;color:inherit;text-align:left;font:inherit;--mv-hue:var(--sv-ink)}
#voicePanelBody button.sv-move{cursor:pointer}
#voicePanelBody .sv-move[data-sv-drag]{cursor:grab}
@media(hover:hover){#voicePanelBody button.sv-move:hover .sv-move-text b{color:var(--sv-ink)}#voicePanelBody button.sv-move:hover .sv-move-icon circle:first-child{stroke:#4b4740}}
#voicePanelBody .sv-move-icon{width:36px;height:36px;overflow:visible}
#voicePanelBody .sv-move-icon circle:first-child{fill:#141312;stroke:var(--sv-line-2)}
#voicePanelBody .sv-move-icon path{fill:none;stroke:var(--mv-hue);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.42}
#voicePanelBody .sv-move-dot{fill:var(--mv-hue)}
#voicePanelBody .sv-move.is-on .sv-move-icon path{opacity:1}
#voicePanelBody .sv-devine{--mv-hue:var(--orange)}
#voicePanelBody .sv-move-text{display:flex;flex-direction:column;gap:5px;min-width:0}
#voicePanelBody .sv-move-text b{font:600 11.5px/1.1 var(--sans);font-stretch:112%;letter-spacing:.08em;color:var(--sv-dim)}
#voicePanelBody .sv-move.is-on .sv-move-text b{color:var(--mv-hue)}
#voicePanelBody .sv-move-text small{font:9.5px/1.35 var(--mono);letter-spacing:.06em;color:var(--sv-muted)}
#voicePanelBody .sv-move.is-on .sv-move-text small{color:var(--sv-dim)}
#voicePanelBody .sv-meter{display:block;width:4px;height:30px;background:#1d1c1a;position:relative;overflow:hidden}
#voicePanelBody .sv-meter>i{position:absolute;inset:0;background:var(--mv-hue);transform:scaleY(0);transform-origin:50% 100%}
/* AS IT SOUNDS */
#voicePanelBody .sv-out{margin-top:18px;padding-top:14px;border-top:1px solid var(--sv-line)}
#voicePanelBody .sv-out #svLevel{font-variant-numeric:tabular-nums;color:var(--sv-ink);min-width:9ch}
#voicePanelBody #svScope{display:block;width:100%;height:72px;background:var(--sv-well);box-shadow:inset 0 0 0 1px var(--sv-edge);color:var(--sv-hue)}
#voicePanelBody .sv-out-meter{height:6px;margin-top:8px;background:#1a1917;overflow:hidden}
#voicePanelBody .sv-out-meter>i{display:block;height:100%;background:var(--sv-hue);transform:scaleX(0);transform-origin:0 50%}
/* YOUR SOUNDS, under the path: its sound, then its two ways in */
#voicePanelBody .sv-yours{margin:4px 0 18px}
#voicePanelBody .sv-yours .sample-loader{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 16px;border:1px solid var(--sv-line);border-radius:3px;background:var(--sv-panel)}
#voicePanelBody .sv-yours .sample-heading{font:10px/1 var(--mono);letter-spacing:.2em;color:var(--sv-muted)}
#voicePanelBody .sv-yours .sample-body{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto auto;align-items:center;gap:4px 14px;padding:0;text-align:left}
#voicePanelBody .sv-yours .sample-symbol{grid-row:1/span 2;margin:0 4px 0 0}
#voicePanelBody .sv-yours .sample-body strong{grid-column:2;grid-row:1;font:600 12px/1.3 var(--sans);font-stretch:112%;letter-spacing:.06em}
#voicePanelBody .sv-yours .sample-body>span{grid-column:2;grid-row:2;margin:0;font:10px/1.4 var(--mono)}
#voicePanelBody .sv-yours .sample-body>button:not(.text-button){grid-row:1/span 2;width:auto;min-height:40px;margin:0;padding:0 16px;white-space:nowrap}
#voicePanelBody .sv-yours .sample-body>.text-button{grid-column:2;margin:0;justify-self:start}
#voicePanelBody .sv-yours #sampleStatus{margin:0;min-height:0;font:12px/1.45 var(--sans);color:var(--sv-dim)}
#voicePanelBody .sv-yours .sample-limit{border-top:0;padding-top:0;font:9px/1.4 var(--mono);letter-spacing:.12em;color:var(--sv-muted)}

/* dragged onto a knob: the knobs it can move lit, the one under it ringed */
#voicePanelBody.sv-dragging .sv-knob:not(.sv-target){opacity:.32}
#voicePanelBody.sv-dragging .sv-knob.sv-target .cxn-dial{outline:1px dashed var(--sv-line-2);outline-offset:3px}
#voicePanelBody.sv-dragging .sv-knob.sv-over .cxn-dial{outline:2px solid var(--sv-hue);outline-offset:3px}
.sv-ghost{position:fixed;left:0;top:0;z-index:200;padding:6px 10px;border-radius:2px;background:#221f1c;box-shadow:0 6px 18px #0009,inset 0 1px 0 #3a352f;font:10px/1 var(--mono);letter-spacing:.14em;color:#ece7dc;pointer-events:none}

/* the deep groups under it */
#voicePanelBody .sv-deep>.sculpt-fold:first-child{margin-top:0;border-top:0}
#voicePanelBody .sv-deep .sculpt-fold>summary span{font-stretch:112%;letter-spacing:.12em}

/* the full view: the same panel over the whole screen, the stage tall */
.pd-sound-full #voicePanel #voicePanelBody{display:block;padding-top:14px}
.pd-sound-full #voicePanelBody>*{grid-column:auto}
.pd-sound-full #voicePanelBody .sculpt-media>.portrait-panel{position:static;grid-column:auto;grid-row:auto}
.pd-sound-full #voicePanelBody .sculpt-media>:not(.portrait-panel){grid-column:auto;margin-bottom:0}
.pd-sound-full #soundPortrait{height:clamp(220px,calc(100vh - 640px - var(--cxo-h,0px)),540px);min-height:220px}
.pd-sound-full #voicePanelBody .sv-grid{grid-template-columns:minmax(0,1fr) 336px}

/* a tablet: what moves it under the path, two to a row */
@media(max-width:1180px){
  #voicePanelBody .sv-grid,.pd-sound-full #voicePanelBody .sv-grid{grid-template-columns:minmax(0,1fr)}
  #voicePanelBody .sv-main{padding-right:0}
  #voicePanelBody .sv-rail-in{position:static;display:contents}
  #voicePanelBody .sv-rail{padding:16px 0 20px;border-left:0;border-top:1px solid var(--sv-line);background:none;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0 28px}
  #voicePanelBody .sv-rail>:not(.sv-moves){grid-column:2}
  #voicePanelBody .sv-moves{grid-row:1/span 3}
  #voicePanelBody .sv-out{margin-top:0;padding-top:0;border-top:0}
  #voicePanelBody .sv-modules{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #voicePanelBody .sv-amp{padding-left:0;border-left:0;border-top:1px solid var(--sv-line)}
  #voicePanelBody .sv-body{border-top:1px solid var(--sv-line)}
}
/* a phone: one column, four knobs to a row, what moves it as a strip to scroll */
@media(max-width:720px){
  #voicePanel{--cxn-size:50px}
  #voicePanelBody .sv-head{gap:12px}
  #voicePanelBody .sv-head>div{width:100%}
  #voicePanelBody label.sv-window{flex-direction:column;align-items:stretch;gap:6px}
  #voicePanelBody .sv-head-sound .sv-window{flex:1}
  #voicePanelBody .sv-head-sound .sv-window select{min-width:0;width:100%}
  #voicePanelBody .sv-head-steps{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))}
  #voicePanelBody .sv-head-steps .sv-window select,#voicePanelBody .sv-head-steps .sv-window input{width:100%;min-width:0;padding-right:20px}
  #voicePanelBody .sv-modules{grid-template-columns:minmax(0,1fr)}
  #voicePanelBody .sv-mod,#voicePanelBody .sv-mod:last-child{padding:14px 0 16px;border-left:0;border-top:1px solid var(--sv-line)}
  #voicePanelBody .sv-mod:first-child{border-top:0}
  #voicePanelBody .sv-knobs,#voicePanelBody .sv-filter .filter-parameters{grid-template-columns:repeat(4,minmax(0,1fr))}
  #voicePanelBody .sv-rail{display:block}
  #voicePanelBody .sv-yours .sample-body{grid-template-columns:auto minmax(0,1fr)}
  #voicePanelBody .sv-yours .sample-body>button:not(.text-button){grid-row:auto;grid-column:1/-1;width:100%}
  #voicePanelBody .sv-moves ul{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  #voicePanelBody .sv-moves li{flex:0 0 212px;scroll-snap-align:start}
  #voicePanelBody .sv-move{border:1px solid var(--sv-line);border-radius:3px;padding:8px 10px;min-height:64px}
  #voicePanelBody .sv-out{margin-top:14px;padding-top:12px;border-top:1px solid var(--sv-line)}
  .pd-sound-full #soundPortrait{height:300px}
}
@media(max-width:480px){
  #voicePanelBody .sv-head-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:380px){
  #voicePanelBody .pv-slots{grid-template-columns:minmax(0,1fr)}
  #voicePanel{--cxn-size:46px}
  #voicePanelBody .sv-knob>span{font-size:8.5px;letter-spacing:.08em}
  #voicePanelBody .sv-knob output{font-size:12px}
}

/* the views, SOUND and PATCH, as tabs over the panel */
#voicePanelBody .sv-views{display:flex;align-items:stretch;gap:28px;height:44px;margin:-8px 0 16px;border-bottom:1px solid var(--sv-line)}
#voicePanelBody .sv-view{display:inline-flex;align-items:center;height:44px;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:11px/1 var(--mono);letter-spacing:.22em;color:var(--sv-dim);cursor:pointer}
#voicePanelBody .sv-view[aria-selected=true]{color:var(--sv-ink);box-shadow:inset 0 -2px 0 var(--orange)}
@media(hover:hover){#voicePanelBody .sv-view:hover{color:var(--sv-ink)}}

/* PATCH: the kit round, and the route chosen beside it */
#voicePanelBody .pv{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);border-bottom:1px solid var(--sv-line)}
#voicePanelBody .pv-round{position:relative;min-width:0;aspect-ratio:840/836;container-type:inline-size;align-self:start}
#voicePanelBody .pv-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;touch-action:manipulation}
.pv-rim{fill:none;stroke:#1d1c1a}.pv-bezel{stroke:#2a2825}.pv-major{stroke:#4b4740}
.pv-orbit{fill:none;stroke:#24221f;stroke-dasharray:1 6}.pv-inner{fill:none;stroke:#1d1c1a}.pv-steps{stroke:#3a3632}
.pv-trail{fill:none;stroke:#ece7dc;stroke-opacity:.2;stroke-width:2;stroke-linecap:round}.pv-ray{stroke:#ece7dc;stroke-opacity:.22}.pv-tick{stroke:#ece7dc;stroke-width:2}
.pv-dot{opacity:.45}
.pv-route .pv-line{fill:none;stroke:var(--rt);stroke-opacity:.5;stroke-linecap:round;stroke-linejoin:round}
.pv-route.is-chosen .pv-line{stroke-opacity:1}
.pv-route .pv-glow{fill:none;stroke:var(--rt);stroke-width:6;stroke-opacity:0}
.pv-route.is-chosen .pv-glow{stroke-opacity:.5}
.pv-pulse{fill:none;stroke:var(--rt);stroke-linecap:round}
.pv-head{fill:#fff4e6}
.pv-hit{fill:none;stroke:transparent;stroke-width:16;cursor:pointer;pointer-events:stroke}
@media(hover:hover){.pv-route:hover .pv-line{stroke-opacity:.85}}
.pv-collars{fill:none;stroke:#2f2c28}.pv-sel{fill:none;stroke:var(--orange);stroke-width:1.4;stroke-linecap:round}
.pv-node-rim{fill:none;stroke:#1d1b19}.pv-node-well{fill:#131211;stroke:#262422}
.pv-ring{fill:none;stroke:var(--nv);stroke-width:1.15;stroke-linejoin:round;opacity:calc(.5 + .5 * var(--lit,0))}
.pv-ring-glow{fill:none;stroke:var(--nv);stroke-width:3;opacity:calc(.08 + .75 * var(--lit,0))}
.pv-node.is-on .pv-node-well{stroke:#3a3632}
.pv-port-hit{fill:transparent;cursor:pointer}
.pv-out .pv-port-hit{cursor:grab}
.pv-port-dot{fill:#0d0c0b;stroke:#6e685e;stroke-width:1.2;pointer-events:none}
.pv-port.is-used .pv-port-dot,.pv-out .pv-port-dot{fill:var(--pt);stroke:var(--pt)}
.pv-out.is-armed .pv-port-dot,.pv-port.is-target .pv-port-dot{stroke:#fff;stroke-width:2.6}
@media(hover:hover){.pv-port:hover .pv-port-dot{stroke:#fff}}
.pv-labels text{fill:#b9b2a6;stroke:#0d0c0b;stroke-width:3;paint-order:stroke;font:9px var(--mono);letter-spacing:1px;text-anchor:middle;pointer-events:none}
.pv-temp{fill:none;stroke-width:2;stroke-dasharray:4 4;pointer-events:none}
#voicePanelBody .pv-voice{position:absolute;transform:translate(-50%,-50%);width:9.6%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;color:var(--sv-dim);cursor:pointer}
#voicePanelBody .pv-voice small{font:clamp(7px,1.05cqw,9px)/1 var(--mono);letter-spacing:.14em;color:var(--sv-muted)}
#voicePanelBody .pv-voice b{font:600 clamp(8.5px,1.45cqw,12px)/1.1 var(--sans);font-stretch:118%;letter-spacing:.08em}
#voicePanelBody .pv-voice span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:clamp(7px,1.05cqw,9px)/1 var(--mono);letter-spacing:.06em;color:var(--nv)}
#voicePanelBody .pv-voice.is-on{color:var(--sv-ink)}
#voicePanelBody .pv-voice:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
#voicePanelBody .pv-step{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none}
#voicePanelBody .pv-step span{font:9px/1 var(--mono);letter-spacing:.2em;color:var(--sv-muted)}
#voicePanelBody .pv-step b{font:200 clamp(22px,4cqw,34px)/1 var(--sans);font-stretch:125%;font-variant-numeric:tabular-nums;color:var(--sv-ink)}
#voicePanelBody .pv-help{position:absolute;left:3%;top:2.5%;width:32%;margin:0;font:clamp(11px,1.65cqw,14px)/1.45 var(--sans);color:var(--sv-dim);pointer-events:none}
#voicePanelBody .pv-count{position:absolute;right:3%;top:2.8%;margin:0;font:9.5px/1.7 var(--mono);letter-spacing:.14em;color:var(--sv-muted);text-align:right;pointer-events:none}
#voicePanelBody .pv-legend{position:absolute;left:3%;bottom:2.4%;display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;font:9px/1 var(--mono);letter-spacing:.12em;color:var(--sv-dim);pointer-events:none}
#voicePanelBody .pv-legend li{display:flex;align-items:center;gap:10px}
#voicePanelBody .pv-legend svg{width:36px;height:12px;flex:none}
#voicePanelBody .pv-legend path{fill:none;stroke:#ece7dc;stroke-width:1.3}
#voicePanelBody .pv-legend .dim{stroke:#6e685e}
#voicePanelBody .pv-legend .thick{stroke-width:3;stroke-linecap:round}
/* the route chosen */
#voicePanelBody .pv-side{min-width:0;display:flex;flex-direction:column;gap:14px;padding:4px 0 22px 26px;border-left:1px solid var(--sv-line)}
#voicePanelBody .pv-side section{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--sv-line)}
#voicePanelBody .pv-chosen{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
#voicePanelBody .pv-chosen-names{display:flex;flex-direction:column;min-width:0}
#voicePanelBody .pv-chosen-names b{font:600 clamp(18px,2vw,26px)/1.15 var(--sans);font-stretch:125%;letter-spacing:.03em}
#voicePanelBody .pv-src{color:var(--src)}#voicePanelBody .pv-src i{font-style:normal;font-weight:300;color:var(--sv-muted)}
#voicePanelBody .pv-dst{color:var(--dst)}#voicePanelBody .pv-dst small{font:11px var(--mono);letter-spacing:.16em;color:var(--sv-dim)}
#voicePanelBody .pv-depth{font:200 clamp(44px,4.6vw,64px)/.86 var(--sans);font-stretch:125%;font-variant-numeric:tabular-nums;color:var(--sv-ink);min-width:3.2ch;text-align:right}
#voicePanelBody .pv-scale{display:flex;flex-direction:column;gap:4px}
#voicePanelBody .pv-scale input{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
#voicePanelBody .pv-scale input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#2a2825 var(--lo),var(--src) var(--lo),var(--src) var(--hi),#2a2825 var(--hi))}
#voicePanelBody .pv-scale input::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#2a2825 var(--lo),var(--src) var(--lo),var(--src) var(--hi),#2a2825 var(--hi))}
#voicePanelBody .pv-scale input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;margin-top:-6px;border:0;border-radius:50%;background:#ece7dc;box-shadow:0 0 0 3px #0d0c0b}
#voicePanelBody .pv-scale input::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:#ece7dc}
#voicePanelBody .pv-scale input:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
#voicePanelBody .pv-scale-marks{display:flex;justify-content:space-between;font:9px/1 var(--mono);color:var(--sv-muted)}
#voicePanelBody .pv-scale-marks i{font-style:normal}
#voicePanelBody .pv-keys{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
#voicePanelBody .pv-keys>div{display:flex;gap:4px}
#voicePanelBody .pv-key{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:0;border-radius:3px;background:#191816;box-shadow:inset 0 1px 0 #262422,0 1px 0 #050404;font:10.5px/1 var(--mono);letter-spacing:.14em;color:var(--sv-dim);cursor:pointer}
#voicePanelBody .pv-key::before{content:'';width:6px;height:6px;border-radius:50%;background:#36322d}
#voicePanelBody .pv-key[aria-pressed=true]{background:#221f1c;box-shadow:inset 0 1px 0 #3a352f,0 1px 0 #050404;color:var(--sv-ink)}
#voicePanelBody [data-pv-mode][aria-pressed=true]::before{background:var(--src);box-shadow:0 0 6px var(--src)}
#voicePanelBody [data-pv-input][aria-pressed=true]::before{background:var(--dst);box-shadow:0 0 6px var(--dst)}
#voicePanelBody .pv-remove{margin-left:auto}#voicePanelBody .pv-remove::before{display:none}
@media(hover:hover){#voicePanelBody .pv-key:hover{color:var(--sv-ink)}}
#voicePanelBody .pv-none{margin:0;font:13px/1.5 var(--sans);color:var(--sv-dim)}
#voicePanelBody #pvScope{display:block;width:100%;height:auto;aspect-ratio:552/138}
.pv-scope-well{fill:#0a0908;stroke:#24221f}.pv-scope-grid{stroke:#191816}.pv-scope-beats{stroke:#2a2825}
.pv-scope-src{fill:none;stroke-width:1.3}.pv-scope-dst{fill:none;stroke-width:1.8}.pv-scope-hits{stroke-width:2}.pv-scope-at{stroke:#ece7dc;stroke-opacity:.75}
#pvScope text{font:9.5px var(--mono);letter-spacing:1.2px;stroke:#0a0908;stroke-width:3;paint-order:stroke}
#pvScope .pv-scope-n{fill:#8f897e;stroke:none;font-size:9px}
/* the voice's four routes, and every voice into it */
#voicePanelBody .pv-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
#voicePanelBody .pv-slot{display:flex;align-items:center;gap:10px;width:100%;height:52px;padding:0 12px;border:1px solid #262422;border-radius:3px;background:#171615;color:inherit;text-align:left;cursor:pointer}
#voicePanelBody .pv-slot i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--src);box-shadow:0 0 6px var(--src)}
#voicePanelBody .pv-slot span{display:flex;flex-direction:column;gap:3px;min-width:0}
#voicePanelBody .pv-slot b{font:600 12px/1 var(--sans);font-stretch:112%;letter-spacing:.06em;color:var(--src);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#voicePanelBody .pv-slot small{font:9px/1 var(--mono);letter-spacing:.1em;color:var(--sv-dim)}
#voicePanelBody .pv-slot.is-on{border-color:#ff632699;background:#211d19}
#voicePanelBody .pv-slot.is-empty{cursor:default;background:transparent;border:1px dashed #34312c}
#voicePanelBody .pv-slot.is-empty i{background:none;box-shadow:none;border:1px dashed #6e685e}
#voicePanelBody .pv-slot.is-empty b{color:var(--sv-muted)}
#voicePanelBody .pv-grid{display:grid;grid-template-columns:76px repeat(4,minmax(0,1fr));align-items:center;row-gap:2px}
#voicePanelBody .pv-grid-head{font:9px/1 var(--mono);letter-spacing:.16em;color:var(--sv-muted);text-align:center;padding-bottom:4px}
#voicePanelBody .pv-grid-name{font:600 11px/1 var(--sans);font-stretch:112%;letter-spacing:.08em;color:var(--nv)}
#voicePanelBody .pv-cell{display:flex;align-items:center;justify-content:center;height:36px;padding:0;border:0;border-top:1px solid #1a1917;border-radius:0;background:none;cursor:pointer}
#voicePanelBody .pv-cell i{display:block;width:9px;height:9px;border-radius:50%;border:1px solid #3a3632;transition:transform .12s}
#voicePanelBody .pv-cell.is-used i{width:var(--pin);height:var(--pin);border:1.5px solid var(--nv);background:var(--nv)}
#voicePanelBody .pv-cell.is-used i.is-neg{background:transparent}
#voicePanelBody .pv-cell.is-on i{box-shadow:0 0 0 3px #0d0c0b,0 0 0 4px var(--nv)}
@media(hover:hover){#voicePanelBody .pv-cell:not(.is-used):hover i{border-color:var(--nv);transform:scale(1.25)}}
#voicePanelBody .pv-cell:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
@media(max-width:1180px){
  #voicePanelBody .pv{grid-template-columns:minmax(0,1fr)}
  #voicePanelBody .pv-round{max-width:760px;width:100%;justify-self:center}
  #voicePanelBody .pv-side{padding:16px 0 20px;border-left:0;border-top:1px solid var(--sv-line)}
}
@media(max-width:720px){
  #voicePanelBody .pv-help{display:none}
  #voicePanelBody .pv-legend{display:none}
  #voicePanelBody .pv-keys>div{flex-wrap:wrap}
}
/* SHAPE's eight on one row wherever the picture is wide enough, so the knobs under it stay in reach */
@media (min-width:900px){#voicePanelBody .portrait-envelope-controls[data-envelope=shape]{grid-template-columns:repeat(8,minmax(0,1fr));column-gap:12px}}

/* SAVE WAV (pd-hit.js): the hit out as a WAV, at the end of the picture's top bar beside its status; in the app or the
   plug-in on a computer, dragged out too. The bar lets the pointer through to the picture; the button takes it */
#voicePanelBody .portrait-top .portrait-right{display:inline-flex;align-items:center;gap:10px}
/* on the smallest phones the title is THE HIT, so it stays on one line beside the status and SAVE WAV */
@media(max-width:359px){#voicePanelBody .portrait-in{display:none}}
#voicePanelBody .portrait-wav{pointer-events:auto;min-height:24px;padding:0 9px;border:1px solid var(--line-2);border-radius:3px;
  background:#0b0b0acc;color:var(--ink);font:9px/1 var(--mono);letter-spacing:.12em;cursor:pointer;white-space:nowrap}
@media(hover:hover){#voicePanelBody .portrait-wav:hover:not(:disabled){border-color:var(--orange-line);color:var(--ink)}}
@media(pointer:coarse){#voicePanelBody .portrait-wav{min-height:32px;padding:0 12px}}