/* Polite Disorder v2: the interface pass (17 Oct 2026; Cyrus: "refine the aesthetics to match the level of matter").
   v1's stylesheets (style.css, studio.css, ratio.css) still draw each part's insides; this lays the page out as Matter /
   Field's is and brings every part to its finish. Its type is Matter / Field's: Archivo, and JetBrains Mono for labels
   and readouts, each given the names v1's rules ask for (Arial, Helvetica, Courier New, Anton), so every one of them
   draws in it without being written again. Its colours are its own: graphite, its orange, and a quiet hue for each of
   its six voices, which marks the voice wherever it is: its row, its steps, its chips and its sound. */
/* Archivo, one file for every weight and its widths to 125%, which the sound view's names are set in (24 Oct 2026) */
@font-face{font-family:PD;src:url(assets/Archivo.woff2) format('woff2');font-weight:100 900;font-stretch:100% 125%;font-display:swap}
@font-face{font-family:PDMono;src:url(assets/JetBrainsMono-400.ttf);font-display:swap}
@font-face{font-family:Arial;src:url(assets/Archivo.woff2) format('woff2');font-weight:100 900;font-stretch:100% 125%;font-display:swap}
@font-face{font-family:Helvetica;src:url(assets/Archivo.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Arial Narrow';src:url(assets/Archivo.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Anton;src:url(assets/Archivo.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Courier New';src:url(assets/JetBrainsMono-400.ttf);font-display:swap}

:root{
  --bg:#121110;--well:#0c0b0a;--panel:#191816;--raised:#1e1c1a;--soft:#24221f;
  --line:#34312c;--line-2:#4b4740;--cream:#ece7dc;--ink:#ece7dc;--muted:#a69f93;--quiet:#938c80;
  --orange:#ff6326;--orange-soft:#ff63261a;--orange-line:#ff632666;--on-orange:#170c06;
  --v0:#f2875a;--v1:#e5b862;--v2:#93b6d1;--v3:#a2c582;--v4:#bb9ae2;--v5:#72cbc6;
  --mono:PDMono,'Courier New',monospace;--sans:PD,Arial,sans-serif;
  --pad:26px;
  --cx-ink:var(--ink);--cx-muted:var(--muted);--cx-line:var(--line-2);--cx-accent:var(--orange);--cx-accent-soft:var(--orange-soft);
  --cx-accent-line:var(--orange-line);--cx-mono:var(--mono);
  /* the frame's (ui/cx-frame.css), in Polite Disorder's colours and type */
  --cxf-bar:#1b1a18f2;--cxf-strip:#161513;--cxf-line:var(--line);--cxf-line-2:var(--line-2);--cxf-ink:var(--ink);--cxf-muted:var(--muted);
  --cxf-quiet:var(--quiet);--cxf-accent:var(--orange);--cxf-accent-soft:var(--orange-soft);--cxf-accent-line:var(--orange-line);
  --cxf-on-accent:var(--on-orange);--cxf-rec:#8f6e62;--cxf-meter:linear-gradient(90deg,#c9c2a6,#e8dfc0 82%,var(--orange));
  --cxf-glass:rgba(18,17,16,.84);--cxf-menu:#1e1c1a;--cxf-dialog:linear-gradient(140deg,#24221f,#171614);--cxf-dialog-edge:#5c564c;
  --cxf-sans:var(--sans);--cxf-mono:var(--mono);--cxf-pad:var(--pad);
  /* the master chain's (ui/cx-chain.css): its panels and wells */
  --cx-panel:var(--panel);--cx-well:var(--well);
  font-family:var(--sans);color:var(--ink);background:var(--bg)
}
body{background:var(--bg);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--orange);color:var(--on-orange)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}

/* the primitives, as Matter / Field's: a hairline, a small radius, mono labels */
button,select,input{font-family:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media(hover:hover){button:hover:not(:disabled){color:inherit}}
select{background-color:#161513;border:1px solid var(--line-2);border-radius:3px;color:var(--ink);font:12px/1.2 var(--mono);letter-spacing:.02em;min-height:34px;padding:6px 28px 6px 10px;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
@media(hover:hover){select:hover{border-color:#6e675d}}
/* v1's own rules give some menus less room on the right: never less than the chevron needs */
.pd select:not(#preset){padding-right:24px!important;background-position:calc(100% - 13px) 52%,calc(100% - 8px) 52%!important;background-size:5px 5px,5px 5px!important}
select:disabled{opacity:.4}
input[type=range]{accent-color:#d8cfbd;height:22px;cursor:ew-resize}
#voicePanel input[type=range]{accent-color:var(--sound-hue,#d8cfbd)}
.pd-step input[type=range]{accent-color:var(--hue,#d8cfbd)}
.small-button,.text-button,.pd-icon,.file-button,.hold-button,.record,.pd-fold-button,.drawer-tab{transition:background .15s,border-color .15s,color .15s,opacity .15s}
.small-button{border:1px solid var(--line-2);border-radius:3px;font:10px/1.2 var(--mono);letter-spacing:.08em;min-height:32px;padding:7px 11px;color:var(--ink)}
@media(hover:hover){.small-button:hover:not(:disabled){background:#ffffff08;border-color:#7a7368;color:var(--ink)}}
.small-button[aria-pressed=true],.small-button.active{background:var(--orange-soft);border-color:var(--orange-line);color:var(--orange)}
.text-button{font:10px/1.2 var(--mono);letter-spacing:.09em;color:var(--muted);padding:6px 0}
@media(hover:hover){.text-button:hover:not(:disabled){color:var(--ink)}}
.text-button[aria-pressed=true],.text-button.active,.text-button.orange{color:var(--orange)}
.orange-button{background:var(--orange);border:1px solid var(--orange);border-radius:3px;color:var(--on-orange)!important;font:800 11px/1.2 var(--mono);letter-spacing:.1em;padding:10px 14px}
@media(hover:hover){.orange-button:hover:not(:disabled){background:#ff7a45;border-color:#ff7a45}}
.pd-icon{display:inline-grid;place-items:center;width:34px;height:34px;padding:7px;border:1px solid transparent;border-radius:3px;color:var(--muted)}
@media(hover:hover){.pd-icon:hover:not(:disabled){color:var(--ink);background:#ffffff08}}
.pd-icon svg,.file-button svg,.drawer-tab svg,.pd-fold summary svg,.pd-fold-button svg,.macro svg,.generate svg,.kit-step svg,.page-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.pd-k,.eyebrow,.micro{font:9px/1.3 var(--mono);letter-spacing:.11em;color:var(--muted);text-transform:uppercase}
.pd-note{font:12px/1.55 var(--sans);color:var(--muted);margin:12px 0 0}
h2{font-family:var(--sans);font-weight:800;letter-spacing:-.03em}

/* the page: full width, its bars edge to edge as Matter / Field's */
#instrument.pd{max-width:none;margin:0;padding:0}

/* ---- the bar and the preset strip: the frame's (ui/cx-frame.css; ui/README.md, The frame), in the colours above; what
   follows is Polite Disorder's own parts as they sit in it ---- */
.cxf-bar{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cxf-bar svg,.cxf-strip svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
/* FILL and REPEAT are held, as v1's were: a press kept from scrolling the page or choosing its words */
.hold-button{touch-action:none;user-select:none;-webkit-user-select:none}
/* WRITE, by the pattern's banks: the pads written into the playing pattern while it is on */
.record{display:inline-flex;align-items:center;gap:8px;min-width:64px;height:34px;padding:0 10px;border:1px solid transparent;border-radius:3px;font:10px/1 var(--mono);letter-spacing:.1em;color:var(--ink)}
@media(hover:hover){.record:hover:not(:disabled){background:#ffffff08}}
.record-dot{width:7px;height:7px;border-radius:50%;background:#8f6e62}
.record.active,.record[aria-pressed=true]{color:#ffb299;border-color:#a3604d}
.record.active .record-dot,.record[aria-pressed=true] .record-dot{background:var(--orange);box-shadow:0 0 10px #ff632677;animation:pd-blink 1.2s steps(1,end) infinite}
@keyframes pd-blink{50%{opacity:.35}}
/* the kit's name: the system's own menu of the kits laid over it, unseen, so a press opens that */
.kit-pick{position:relative;border-radius:3px}
.kit-pick:focus-within{outline:2px solid var(--orange);outline-offset:3px}
.kit-pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0;margin:0;padding:0;border:0;background:none}
.kit-pick select:focus-visible{outline:none}
.kit-pick select option,.kit-pick select optgroup{font:13px var(--sans);background:#1b1a18;color:var(--ink)}
.cxf-strip .kit-pick .cxf-chevron svg{stroke-width:1.6}
/* GENERATE's settings, in its menu: what it changes, and how far */
.cxf-generate .pd-menu-row{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:10px;margin:0;font:9px var(--mono);letter-spacing:.1em;color:var(--muted)}
.cxf-generate .pd-menu-row select{grid-column:2/-1;width:100%;min-height:34px;font-size:10px;letter-spacing:.06em}
.cxf-generate .pd-menu-row input{width:100%;min-width:0;margin:0}
.cxf-generate .pd-menu-row output{min-width:32px;font:10px var(--mono);color:var(--ink);text-align:right}

/* ---- the stage and the field ---- */
.pd-work.workspace{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:0;padding:0;border-bottom:1px solid var(--line)}
.pd-stage{min-width:0;padding:16px var(--pad) 20px;background:var(--bg)}
.pd-toolbar.section-heading{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:12px 22px;height:auto;min-height:38px;margin:0 0 10px}
.pd-toolbar .bank-area{display:flex;align-items:center;gap:10px}
.segmented{display:flex;border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.segmented button{min-width:34px;height:30px;padding:0 10px;font:11px var(--mono);color:var(--muted);border-right:1px solid var(--line-2)}
.segmented button:last-child{border-right:0}
@media(hover:hover){.segmented button:hover:not(:disabled){background:#ffffff08;color:var(--ink)}}
.segmented button.active{background:var(--ink);color:var(--bg)}
.segmented button.pending{background:var(--orange-soft);color:var(--orange);box-shadow:inset 0 -2px var(--orange)}
.pd-toolbar .grid-resolution{display:flex;align-items:center;gap:8px;margin:0;font:inherit;color:inherit}
.pd-toolbar .grid-resolution select{min-height:30px;padding:4px 26px 4px 9px;font-size:11px}
.pd-pager{display:flex;align-items:center;gap:2px}
.pd-pager .page-button{display:grid;place-items:center;width:28px;height:30px;border-radius:3px;color:#a7a094;font-size:0}
@media(hover:hover){.pd-pager .page-button:hover:not(:disabled){background:#ffffff08;color:var(--ink)}}
.pd-pager #pageLabel{min-width:62px;text-align:center;color:var(--ink);font-size:10px}
.pd-fold-button{display:inline-flex;align-items:center;gap:8px;margin-left:auto;min-height:30px;padding:5px 10px;border:1px solid var(--line-2);border-radius:3px;font:9px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
@media(hover:hover){.pd-fold-button:hover{color:var(--ink);border-color:#7a7368}}
.pd-fold-button[aria-expanded=true]{color:var(--orange);border-color:var(--orange-line);background:var(--orange-soft)}
.pd-fold-button svg{width:15px;height:15px}
.pd-toolbar-deep.sequence-length-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:3px;background:var(--panel)}
.pd-toolbar-deep label{display:flex;align-items:center;gap:8px;font:inherit}
.pd-toolbar-deep select{min-height:30px;padding:4px 26px 4px 9px;font-size:11px}
.pd-toolbar-deep #endUnit,.pd-toolbar-deep #loopStatus{font:9px var(--mono);letter-spacing:.08em;color:var(--muted)}
.pd-toolbar-deep .grid-scale{min-height:30px}

/* the grid: each voice's row in its hue */
.ruler{grid-template-columns:200px 1fr;gap:14px;margin-bottom:6px;font:9px var(--mono);color:var(--quiet)}
.ruler #stepNumbers{gap:5px}
.ruler #stepNumbers>span.playing{color:var(--orange)}
#tracks .track{grid-template-columns:200px minmax(0,1fr);column-gap:14px;row-gap:2px;min-height:0;padding:7px 0 5px;border-bottom:1px solid #22201d;position:relative}
#tracks .track.has-ratio{row-gap:2px;padding-bottom:5px}
#tracks .voice-sub{display:flex;align-items:center;gap:8px;margin-top:3px;min-width:0}
#tracks .voice-sub small{font:9px/1 var(--mono);letter-spacing:.08em;color:var(--quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#tracks .rl-head{grid-row:2;justify-self:start;padding-left:36px;font:9px var(--mono);letter-spacing:.1em;color:var(--quiet)}
@media(hover:hover){#tracks .rl-head:hover{color:var(--ink)}}
#tracks .rl-lane{grid-row:2;height:11px;gap:5px}
#tracks .rl-cell{border-bottom-color:#2f2c28}
#tracks .rl-cell.beat{border-bottom-color:#4d4842}
#tracks .track-controls{display:grid;grid-template-columns:30px minmax(0,1fr) 22px 22px;grid-template-rows:auto auto;column-gap:8px;row-gap:4px;align-items:center;margin:0;padding:0;border:0}
#tracks .voice-stack{display:contents}
#tracks .track-controls .voice-pad{grid-column:1;grid-row:1/3}
#tracks .track-controls .voice-name{grid-column:2;grid-row:1}
#tracks .track-controls .voice-sub{grid-column:2/5;grid-row:2}
#tracks .track-controls .track-mute{grid-column:3;grid-row:1}
#tracks .track-controls .track-solo{grid-column:4;grid-row:1}
#tracks .track:before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:2px;border-radius:1px;background:var(--hue,var(--orange));opacity:0;transition:opacity .2s}
#tracks .track.selected:before{opacity:1}
#tracks .voice-pad{width:30px;height:30px;border-radius:3px;border:1px solid color-mix(in srgb,var(--hue) 45%,transparent);color:var(--hue);font:11px var(--mono);background:color-mix(in srgb,var(--hue) 8%,transparent)}
@media(hover:hover){#tracks .voice-pad:hover{background:color-mix(in srgb,var(--hue) 18%,transparent);color:var(--hue)}}
#tracks .voice-pad.hit{background:var(--hue);color:var(--well);border-color:var(--hue);box-shadow:0 0 14px color-mix(in srgb,var(--hue) 55%,transparent)}
#tracks .voice-stack{flex:1;min-width:0}
#tracks .voice-name{display:block;width:100%;font:700 13px/1.1 var(--sans);letter-spacing:.02em;color:var(--ink);padding:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(hover:hover){#tracks .voice-name:hover{color:var(--hue)}}
#tracks .track.selected .voice-name{color:var(--hue)}
#tracks .track-end{display:flex;align-items:center;gap:4px;margin:0 0 0 auto;font:9px var(--mono);letter-spacing:.08em;color:var(--quiet);flex:none}
#tracks .track-end select{width:auto;min-width:44px;flex:none;min-height:20px;height:20px;padding:0 18px 0 5px;font-size:9px;background-position:calc(100% - 10px) 52%,calc(100% - 6px) 52%;background-size:4px 4px,4px 4px}
#tracks .track-mute,#tracks .track-solo{width:22px;height:22px;padding:0;border-radius:3px;font:9px var(--mono);color:var(--quiet);border:1px solid transparent}
@media(hover:hover){#tracks .track-mute:hover,#tracks .track-solo:hover{color:var(--ink);border-color:var(--line-2)}}
#tracks .track-mute.active{color:var(--bg);background:#c9a77c;border-color:#c9a77c}
#tracks .track-solo.active{color:var(--bg);background:var(--orange);border-color:var(--orange)}
#tracks .steps{gap:5px}
#tracks .step{height:36px;border:1px solid #3a3732;border-radius:3px;background:#151412;transition:background .1s,border-color .1s,box-shadow .1s}
@media(hover:hover){#tracks .step:hover{border-color:#6a645a}}
#tracks .step.beat{border-color:#56514a;background:#191816}
#tracks .step.active{background:color-mix(in srgb,var(--hue) 70%,#121110);border-color:color-mix(in srgb,var(--hue) 85%,#000);box-shadow:inset 0 1px #ffffff1c}
#tracks .step.accent{background:var(--hue);border-color:var(--hue);box-shadow:0 0 12px color-mix(in srgb,var(--hue) 28%,transparent),inset 0 1px #ffffff40}
#tracks .step .velocity{left:4px;right:4px;bottom:4px;height:2px;background:#0000005c;border-radius:1px}
#tracks .step .step-meta{top:4px;right:4px;font:9px/1 var(--mono);color:#0d0c0bd0}
/* under a triplet's mark (studio.css .step-hint), never over it */
#tracks .step .step-hint~.step-meta{top:19px}
#tracks .step .offgrid-mark{background:#0d0c0b}
#tracks .step.inactive{opacity:.16}
/* the fine grids (1/32 and finer, and their triplets): one band, every other 16th shaded, a line at each 16th and a
   stronger one at each beat, the ruler's numbers on the same shading and each beat's brighter, so a place reads at a
   glance with no counting (24 Oct 2026, Cyrus: "when in 128th note of 64th etc there should be some variance in color
   representing every 16th note", "or perhaps grid lines?") */
.fine-grid #tracks .step{border-radius:0;border-width:1px 0 1px 1px;border-color:#2c2a26 #2c2a26 #2c2a26 #ffffff0d;background:#121110}
.fine-grid #tracks .step:last-child{border-right-width:1px}
.fine-grid #tracks .step.sx-odd{background:#1f1d19}
.fine-grid #tracks .step.active{background:color-mix(in srgb,var(--hue) 70%,#121110);border-top-color:color-mix(in srgb,var(--hue) 85%,#000);border-bottom-color:color-mix(in srgb,var(--hue) 85%,#000)}
.fine-grid #tracks .step.accent{background:var(--hue)}
.fine-grid #tracks .step.fine-start,.fine-grid #tracks .step.fine-start.active{border-left-color:#57524a}
.fine-grid #tracks .step.beat,.fine-grid #tracks .step.beat.active{border-left:2px solid #9a9286}
.fine-grid .ruler #stepNumbers>span{border-left:1px solid #57524a;padding-left:3px;text-align:left}
.fine-grid .ruler #stepNumbers>span.sx-odd{background:#1f1d19}
.fine-grid .ruler #stepNumbers>span.beat{border-left:2px solid #9a9286;color:var(--ink)}
.fine-grid #tracks .ln-cell,.fine-grid #tracks .sl-cell{border-radius:0;background:#ffffff03}
.fine-grid #tracks .ln-cell.sx-odd,.fine-grid #tracks .sl-cell.sx-odd{background:#ffffff0b}
.fine-grid #tracks .ln-cell.fine-start,.fine-grid #tracks .sl-cell.fine-start{box-shadow:inset 1px 0 #ffffff1c,inset 0 -1px #34312c}
.fine-grid #tracks .ln-cell.beat,.fine-grid #tracks .sl-cell.beat{box-shadow:inset 2px 0 #ffffff4a,inset 0 -1px #4d4842}
#tracks .step.muted{opacity:.3}
#tracks .step.playing:after{inset:-4px -3px;border-color:var(--ink);border-radius:4px;opacity:.85}
/* each voice's lanes, folded out under its row (Cyrus, 18 Oct 2026: "each voices modulation, accents etc should be a
   fold out below the actual sequencing lane"): LANES at the foot of its name; a bar under each hit, its modulation cell
   for cell under its steps (the curve as wide as the cells and their gaps, so each step starts where its cell does),
   its tools and its timing, all in its hue */
#tracks .ln-toggle{position:relative;grid-column:1;grid-row:2;justify-self:end;align-self:center;display:inline-flex;align-items:center;gap:5px;min-height:20px;padding:0 3px 0 7px;font:9px/1 var(--mono);letter-spacing:.12em;color:var(--quiet);border:1px solid transparent;border-radius:3px;background:none;z-index:1}
#tracks .ln-toggle b{font:700 9px/1 var(--mono);letter-spacing:0;color:var(--hue)}
#tracks .ln-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .2s}
#tracks .ln-toggle[aria-expanded=true]{color:var(--hue);border-color:color-mix(in srgb,var(--hue) 40%,transparent)}
#tracks .ln-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
@media(hover:hover){#tracks .ln-toggle:hover{color:var(--ink);border-color:var(--line-2)}}
#tracks .track.lanes-open{border-bottom-color:transparent}
#tracks .lanes{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:14px;row-gap:7px;align-items:start;position:relative;padding:6px 0 12px;border-bottom:1px solid #22201d;background:linear-gradient(180deg,color-mix(in srgb,var(--hue) 6%,transparent),transparent 80%)}
#tracks .lanes:before{content:"";position:absolute;left:-12px;top:0;bottom:12px;width:2px;border-radius:1px;background:color-mix(in srgb,var(--hue) 50%,transparent)}
#tracks .ln-head{grid-column:1;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:0 0 0 38px}
#tracks .ln-head.ln-mod{flex-direction:row;flex-wrap:wrap;align-items:center}
#tracks .ln-head select{width:auto;max-width:100%;min-height:24px;height:24px;padding:0 24px 0 7px;font-size:9px;letter-spacing:.08em;background-color:transparent}
#tracks .ln-mode{min-height:24px;padding:0 7px;font:9px/1 var(--mono);letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);border-radius:3px}
@media(hover:hover){#tracks .ln-mode:hover{color:var(--ink);border-color:var(--line-2)}}
#tracks .ln-head output{font:9px/1 var(--mono);letter-spacing:.1em;color:var(--hue)}
#tracks .ln-x{width:24px;height:24px;margin-left:-2px;padding:0;font-size:15px;line-height:1;color:var(--quiet);border-radius:3px}
@media(hover:hover){#tracks .ln-x:hover{color:var(--ink);background:#ffffff0a}}
#tracks .ln-hits,#tracks .ln-curve{grid-column:2;position:relative;user-select:none;-webkit-user-select:none;touch-action:none}
#tracks .ln-hits{height:40px;cursor:ns-resize}
#tracks .ln-cell{position:relative;min-width:0;height:100%;border-radius:2px;background:#ffffff05;box-shadow:inset 0 -1px #34312c}
#tracks .ln-cell.beat{background:#ffffff09;box-shadow:inset 0 -1px #4d4842}
#tracks .ln-cell.inactive{opacity:.25}
#tracks .ln-bar{position:absolute;min-height:2px;pointer-events:none}
#tracks .ln-bar:before{content:"";position:absolute;inset:0 20%;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--hue) 62%,#121110)}
#tracks .ln-hits[data-view=shift] .ln-bar:before{border-radius:2px}
#tracks .ln-bar.accent:before{background:var(--hue);box-shadow:0 0 10px color-mix(in srgb,var(--hue) 35%,transparent)}
#tracks .ln-bar.focus:before{outline:1px solid var(--ink);outline-offset:1px}
#tracks .ln-line{position:absolute;left:0;right:0;bottom:86%;height:0;border-top:1px dashed color-mix(in srgb,var(--hue) 45%,transparent);pointer-events:none;padding-top:3px;font:9px/1 var(--mono);letter-spacing:.14em;color:color-mix(in srgb,var(--hue) 70%,transparent);text-align:right}
#tracks .ln-hits[data-view=shift] .ln-line{bottom:50%}
#tracks .ln-hits[data-view=prob] .ln-line{display:none}
#tracks .ln-line:empty{border-top-style:solid}
/* ACCENT and ON TIME in the voice's hue read over a hit's bar of the same hue, outlined in the page's ground (they had
   vanished where an accented hit stood under them) */
#tracks .ln-line{text-shadow:0 0 2px var(--bg),0 0 2px var(--bg),0 0 4px var(--bg)}
#tracks .ln-curve{height:44px;overflow:hidden;border-radius:2px}
#tracks .ln-cells{position:absolute;inset:0}
#tracks .ln-curve .auto-svg{position:absolute;left:0;top:0;width:calc(100% + var(--ln-gap,0px));height:100%;background:none}
#tracks .ln-curve .auto-mid{stroke:#ffffff10;stroke-width:1;vector-effect:non-scaling-stroke}
#tracks .ln-curve .auto-curve{stroke:#6d6d5f}
#tracks .ln-curve .auto-curve.written{stroke:var(--hue)}
#tracks .ln-curve circle{fill:var(--hue)}
#tracks .ln-val{position:absolute;right:4px;top:3px;font:9px/1 var(--mono);letter-spacing:.08em;color:var(--hue);pointer-events:none}
/* a TUNE lane snapped to notes: as tall as NOTES, its rows the notes (their names at the right), a point off the key
   hollow, its value the note at the left */
#tracks .ln-curve.snapped{height:124px}
#tracks .ln-curve.snapped .ln-val{left:4px;right:auto}
#tracks .ln-curve circle.off-key{fill:none;stroke:var(--hue);stroke-width:1.5;vector-effect:non-scaling-stroke}
#tracks .ln-tools{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px}
#tracks .ln-tools .text-button{padding:5px 0;font-size:9px}
#tracks .ln-tools [aria-expanded=true]{color:var(--hue)}
#tracks .ln-timing{grid-column:1/-1;padding:4px 0 0 38px}
/* NOTES: the key's rows across the lane, its root brighter and named, the voice's own note in its hue; each hit a mark at
   its note's height, dashed off the key, a glide trailing in from the left */
#tracks .ln-hits[data-view=note]{height:124px}
#tracks .ln-hits[data-view=note] .ln-cell{background:#ffffff03;box-shadow:none}
#tracks .ln-hits[data-view=note] .ln-cell.beat{background:#ffffff07}
#tracks .ln-row{position:absolute;left:0;right:0;height:0;border-top:1px solid #ffffff0c;pointer-events:none}
#tracks .ln-row.root{border-top-color:#ffffff22}
#tracks .ln-row.own{border-top-color:color-mix(in srgb,var(--hue) 55%,transparent)}
#tracks .ln-row[data-name]:after{content:attr(data-name);position:absolute;right:2px;bottom:1px;font:9px/1 var(--mono);letter-spacing:.06em;color:var(--quiet)}
#tracks .ln-row.own:after{color:var(--hue)}
#tracks .ln-hits[data-view=note] .ln-bar{z-index:1}
#tracks .ln-hits[data-view=note] .ln-bar:before{inset:0 14%;border-radius:2px;background:var(--hue)}
#tracks .ln-bar.off-key:before{background:none;box-shadow:inset 0 0 0 1px var(--hue)}
#tracks .ln-hits[data-view=note] .ln-bar.glide:before{left:-20%;border-radius:4px 2px 2px 4px;background:linear-gradient(90deg,transparent,var(--hue) 55%)}
#tracks .ln-key{display:flex;flex-wrap:wrap;gap:4px;max-width:100%}
#tracks .ln-key select{min-width:0}
#tracks .ln-glide[aria-pressed=true]{color:var(--hue);border-color:color-mix(in srgb,var(--hue) 60%,transparent);background:color-mix(in srgb,var(--hue) 10%,transparent)}
/* the SOUND lane (pd-lane.js): a row under the six voices, its cells the steps above it, each stretch of the pattern
   in its sound laid over them, a change's MORPH a ramp at its start; a cell tapped opens the change there under it */
#tracks .sound-lane{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:14px;row-gap:8px;align-items:center;position:relative;margin-top:4px;padding:10px 0 12px;border-top:1px dashed var(--orange-line)}
#tracks .sl-name{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding-left:38px}
#tracks .sl-name b{font:700 13px/1.1 var(--sans);letter-spacing:.08em;color:var(--ink)}
#tracks .sl-name small{font:9px/1.2 var(--mono);letter-spacing:.12em;color:var(--quiet)}
#tracks .sl-name output{font:9px/1 var(--mono);letter-spacing:.1em;color:var(--orange)}
#tracks .sl-strip{position:relative;height:34px;min-width:0}
#tracks .sl-cells{position:absolute;inset:0}
#tracks .sl-cell{position:relative;min-width:0;height:100%;padding:0;border-radius:2px;background:#ffffff04;box-shadow:inset 0 -1px #34312c}
#tracks .sl-cell.beat{background:#ffffff08;box-shadow:inset 0 -1px #4d4842}
#tracks .sl-cell.inactive{opacity:.25}
#tracks .sl-cell.start:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:1px;background:var(--orange);z-index:1}
#tracks .sl-cell.chosen{outline:2px solid var(--orange);outline-offset:2px;z-index:2}
@media(hover:hover){#tracks .sl-cell:hover{background:#ffffff10}}
#tracks .sl-segs{position:absolute;inset:0;pointer-events:none}
#tracks .sl-seg{--g:var(--sl-gap,5px);position:absolute;top:4px;bottom:4px;left:calc((100% + var(--g)) / var(--steps,16) * var(--a));width:calc((100% + var(--g)) / var(--steps,16) * var(--n) - var(--g));display:flex;align-items:center;min-width:0;padding:0 8px;overflow:hidden;border:1px solid var(--orange-line);border-radius:3px;background:linear-gradient(90deg,#ff632624,#ff632610);font:9px/1 var(--mono);letter-spacing:.08em;color:var(--ink);white-space:nowrap}
#tracks .sl-seg.own{border-color:var(--line);background:#ffffff05;color:var(--quiet)}
#tracks .sl-seg.back{border-style:dashed;background:#ffffff06;color:var(--muted)}
#tracks .sl-seg.is-now{border-color:var(--orange);box-shadow:0 0 12px #ff632633}
#tracks .sl-seg.own.is-now{border-color:var(--line-2);color:var(--muted)}
#tracks .sl-seg span{position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis}
#tracks .sl-ramp{position:absolute;left:0;top:0;bottom:0;width:calc(var(--w) * 100%);background:linear-gradient(to top right,transparent 50%,#ff632638 50%)}
#tracks .sl-edit{grid-column:2;display:grid;gap:8px;min-width:0;padding:10px 12px 12px;border:1px solid var(--line-2);border-radius:4px;background:var(--panel)}
#tracks .sl-edit-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font:9px/1 var(--mono);letter-spacing:.12em;color:var(--orange)}
#tracks .sl-row{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;min-width:0}
#tracks .sl-row>span{min-width:46px;font:9px/1 var(--mono);letter-spacing:.12em;color:var(--quiet)}
#tracks .sl-row select{width:auto;max-width:100%;min-height:30px;height:30px;font-size:10px;letter-spacing:.06em}
#tracks .sl-morphs{display:flex;flex-wrap:wrap;gap:4px}
#tracks .sl-morphs button{min-width:36px;min-height:28px;padding:0 8px;font:9px/1 var(--mono);letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);border-radius:3px}
@media(hover:hover){#tracks .sl-morphs button:hover{color:var(--ink);border-color:var(--line-2)}}
#tracks .sl-morphs button[aria-pressed=true]{color:var(--on-orange);background:var(--orange);border-color:var(--orange)}
#tracks .sl-acts{gap:4px 20px}
#tracks .sl-acts .text-button{padding:5px 0;font-size:9px}
#tracks .sl-hint{margin:0;font:12px/1.5 var(--sans);color:var(--muted)}
#tracks .step.selected{outline:2px solid var(--orange);outline-offset:2px}
#tracks .step-hint{border-color:var(--orange-line)}
.sequence-footer{font:9px var(--mono);letter-spacing:.06em;color:var(--quiet);padding:12px 0 14px}
.sequence-footer #patternStatus{color:var(--muted)}

/* the step in hand: its four first, the rest folded */
.micro-editor.pd-step{border-top:1px solid var(--line);padding:14px 0 2px}
.pd-step .micro-title{font:10px var(--mono);letter-spacing:.09em}
.pd-step .micro-title #stepTitle{color:var(--hue,var(--orange))}
.pd-step .micro-title>div{gap:18px}
.pd-step .micro-tools{margin:12px 0 14px;gap:14px}
.pd-step #microSteps{max-width:360px}
.pd-step #microSteps button{height:28px;border-radius:3px;border-color:var(--line-2);font:10px var(--mono)}
.pd-step #microSteps button.on{background:var(--ink);color:var(--bg)}
.pd-step .step-controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 26px}
.step-control>span{font:9px var(--mono);letter-spacing:.09em;color:var(--muted)}
.step-control output{font:10px var(--mono);color:var(--ink)}
.step-control input{margin:2px 0 4px}
.step-controls .step-more{grid-column:1/-1}
.step-more>.step-more-body{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 26px;padding:10px 0 2px}

/* a fold: what is deep, folded until asked for */
.pd-fold{border-top:1px solid var(--line);margin-top:10px}
.pd-fold>summary{display:flex;align-items:center;gap:10px;padding:11px 0;cursor:pointer;list-style:none;font:10px var(--mono);letter-spacing:.1em;color:var(--ink)}
.pd-fold>summary::-webkit-details-marker{display:none}
.pd-fold>summary:after{content:"";width:7px;height:7px;margin-left:auto;border-right:1.3px solid var(--muted);border-bottom:1.3px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.pd-fold[open]>summary:after{transform:rotate(225deg) translate(-2px,-2px)}
.pd-fold>summary svg{color:var(--orange)}
.pd-fold>summary small{font:12px var(--sans);letter-spacing:0;color:var(--quiet);text-transform:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
@media(hover:hover){.pd-fold>summary:hover small{color:var(--muted)}}
.pd-step #rollFold #rollEditor{padding:2px 0 8px}

/* the field */
.pd-inspector.performance{border-left:1px solid var(--line);padding:16px 22px 22px;background:#151412}
.pd-panel-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pd-panel-head .eyebrow{color:var(--ink)}
.pd-panel-head #fieldReadout{font:10px var(--mono);color:var(--orange)}
.pd-panel-head #fieldReset{margin-left:auto}
.pd-inspector .field-top,.pd-inspector .field-bottom{font:9px var(--mono);letter-spacing:.1em;color:var(--quiet);margin:6px 0}
.pd-inspector .field-top span:first-child{opacity:1}
.pd-inspector .field-top span:last-child{color:var(--muted)}
.pd-inspector .field-bottom:before{content:none}
/* the field's LFOs marked between its words (pd-moved.js, ui/cx-moved.js), their tags in one row */
.field-moved{display:flex;gap:6px;align-items:center;justify-content:center;min-width:0}
.field-moved>button.cxm-tag{margin:0}
.pd-inspector #field{border:1px solid var(--line-2);border-radius:4px;background:radial-gradient(ellipse at 78% 22%,#ff632612,transparent 62%),radial-gradient(ellipse at 20% 85%,#93b6d10d,transparent 60%),var(--well);aspect-ratio:1.08}
.pd-inspector #fieldCanvas{opacity:1}
.pd-inspector .field-cross{opacity:.18}
.pd-inspector .field-corner{font:9px/1.5 var(--mono);color:var(--quiet);letter-spacing:.06em}
.pd-inspector #fieldDot{width:16px;height:16px;background:var(--orange);box-shadow:0 0 0 4px #ff63261f,0 0 22px #ff632688}
.pd-inspector .field-ring{border-color:#ff632630}
.pd-inspector .field-ring.r2{border-color:#ff63261e}
.pd-inspector .field-ring.r3{border-color:#ff632612}
.pd-inspector .snapshot{display:flex;justify-content:space-between;margin-top:14px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* the field's LFOs (pd-field.js): LFO in the field's head, lit while one moves the dot, and its small panel beside the
   field, so the dot stays in sight */
.pd-panel-head .field-lfo{display:inline-flex;align-items:center;gap:7px;margin-left:auto;min-height:26px;padding:0 9px;border:1px solid var(--line-2);border-radius:3px;background:none;color:var(--muted);font:10px var(--mono);letter-spacing:.14em;cursor:pointer}
.pd-panel-head .field-lfo+#fieldReset{margin-left:0}
.field-lfo-led{display:block;width:6px;height:6px;border-radius:50%;background:#5a554d;transition:background .15s,box-shadow .15s}
.pd-panel-head .field-lfo.is-on{color:var(--ink)}
.field-lfo.is-on .field-lfo-led{background:var(--orange);box-shadow:0 0 0 3px var(--orange-soft),0 0 8px #ff632699}
.pd-panel-head .field-lfo[aria-expanded=true]{border-color:var(--orange);color:var(--ink)}
@media(hover:hover){.pd-panel-head .field-lfo:hover{border-color:#7a7368;color:var(--ink)}}
.field-lfo-pop{position:absolute;z-index:64;width:296px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:14px 16px 12px;border:1px solid var(--line-2);border-radius:4px;background:var(--raised);box-shadow:0 18px 44px #000b;color:var(--ink);scroll-margin:12px 0}
.field-lfo-pop[hidden]{display:none}
.flp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.flp-head h3{margin:0;font:10px var(--mono);letter-spacing:.16em;color:var(--ink)}
.flp-head p{margin:6px 0 0;font:12px/1.4 var(--sans);color:var(--muted)}
.flp-close{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:28px;padding:0 9px;border:1px solid var(--line);border-radius:3px;background:none;color:var(--muted);font:9px var(--mono);letter-spacing:.14em;cursor:pointer}
.flp-close svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8}
@media(hover:hover){.flp-close:hover{border-color:var(--line-2);color:var(--ink)}}
.flp-row{padding:12px 0;border-top:1px solid var(--line)}
.flp-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.flp-axis{display:grid;place-items:center;width:20px;height:20px;border-radius:3px;background:var(--soft);font:700 11px var(--mono);color:var(--ink);transition:background .15s,color .15s}
.flp-row.is-on .flp-axis{background:var(--orange);color:var(--on-orange)}
.flp-name{font:10px var(--mono);letter-spacing:.14em;color:var(--muted)}
.flp-on{margin-left:auto;min-width:54px;min-height:28px;padding:0 12px;border:1px solid var(--line-2);border-radius:14px;background:none;color:var(--muted);font:10px var(--mono);letter-spacing:.14em;cursor:pointer}
.flp-on[aria-pressed=true]{border-color:var(--orange);background:var(--orange);color:var(--on-orange)}
@media(hover:hover){.flp-on:hover:not([aria-pressed=true]){border-color:#7a7368;color:var(--ink)}}
.flp-shapes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:12px}
.flp-shapes button{display:grid;place-items:center;height:32px;padding:0;border:1px solid var(--line);border-radius:3px;background:var(--well);color:var(--muted);cursor:pointer}
.flp-shapes svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flp-shapes button[aria-checked=true]{border-color:var(--orange-line);background:var(--orange-soft);color:var(--orange)}
.flp-row:not(.is-on) .flp-shapes button[aria-checked=true]{border-color:var(--line-2);background:var(--soft);color:var(--ink)}
@media(hover:hover){.flp-shapes button:hover{border-color:var(--line-2);color:var(--ink)}}
.flp-set{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px}
.flp-rate{display:flex;flex-direction:column;gap:6px;min-width:0;font:9px var(--mono);letter-spacing:.14em;color:var(--quiet)}
.flp-rate select{width:100%;min-height:32px;font:11px var(--mono);letter-spacing:.06em}
.flp-depth{--cxn-size:40px;--cxn-hue:var(--orange);--cxn-mod:var(--ink)}
.flp-row:not(.is-on) .flp-depth{--cxn-hue:#8f887c}
.flp-depth>span{display:flex;align-items:baseline;gap:6px;margin-top:4px;font:9px var(--mono);letter-spacing:.14em;color:var(--quiet)}
.flp-depth output{min-width:4ch;text-align:right;color:var(--ink);font:10px var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums}
.flp-note{margin:0;padding-top:10px;border-top:1px solid var(--line);font:11px/1.45 var(--sans);color:var(--quiet)}
@media (pointer:coarse){.pd-panel-head .field-lfo{min-height:32px;padding:0 11px}.flp-shapes button{height:38px}.flp-on,.flp-close{min-height:34px}}
.pd-inspector .scope-wrap{margin-top:14px}
/* the field's scope (pd-scope.js): a lane for each voice's signal and the output's left and right beside them */
.pd-inspector .scope-wrap canvas{height:96px;border-radius:3px;background:var(--well)}
.pd-inspector .scope-wrap>div{font:9px var(--mono);letter-spacing:.08em;color:var(--quiet);margin-top:7px}
.pd-inspector .scope-wrap #peak{min-width:9ch;text-align:right;font-variant-numeric:tabular-nums}

/* ---- the character ---- */
.pd-macros.master{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0;border:0;border-bottom:1px solid var(--line);background:#171614}
.pd-macros .macro{display:block;width:auto;flex:none;padding:14px var(--pad) 16px;border-right:1px solid var(--line);font:inherit;margin:0}
.pd-macros .macro:last-child{border-right:0}
.macro-top{display:flex;align-items:center;gap:9px;font:9px var(--mono);letter-spacing:.11em;color:var(--muted)}
.macro-top svg{color:var(--orange);width:16px;height:16px}
.macro-top output{margin-left:auto;font:10px var(--mono);color:var(--ink)}
.pd-macros .macro input{display:block;width:100%;height:24px;margin:5px 0 2px}
.pd-macros .macro small{display:block;font:11px/1.45 var(--sans);color:var(--quiet)}

/* ---- the drawers: the deep groups ---- */
.pd-drawer-tabs{display:flex;align-items:stretch;gap:2px;min-height:52px;padding:0 var(--pad);background:#161513;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pd-drawer-tabs::-webkit-scrollbar{display:none}
.drawer-tab{display:inline-flex;align-items:center;gap:9px;padding:0 14px;border-bottom:2px solid transparent;font:13px var(--sans);color:var(--muted);white-space:nowrap}
.drawer-tab svg{color:#a59e92}
@media(hover:hover){.drawer-tab:hover:not(:disabled){color:var(--ink)}}
.drawer-tab b{font:9px/1 var(--mono);font-weight:400;letter-spacing:.06em;padding:4px 6px;border:1px solid var(--line-2);border-radius:3px;color:var(--muted)}
.drawer-tab[aria-expanded=true]{color:var(--ink);border-bottom-color:var(--orange)}
.drawer-tab[aria-expanded=true] svg{color:var(--orange)}
.drawer-tab[data-drawer=sound] b{color:var(--sound-hue,var(--muted));border-color:color-mix(in srgb,var(--sound-hue,#4b4740) 55%,transparent)}
/* Repeat's badge keeps the room of its longest word, seven characters (pd-repeat.js say), so a slider moved off 0 in its
   drawer never moves Devine Disorder's tab beside it */
.drawer-tab #badgeRepeat{box-sizing:content-box;min-width:calc(7ch + 7 * .06em + 1px);text-align:center}
.drawer-close{margin:auto 0 auto auto}
.pd-drawer{margin:0;padding:22px var(--pad) 28px;border-top:0;border-bottom:1px solid var(--line);background:var(--bg);scroll-margin-top:76px}
.pd-drawer.automation,.pd-drawer.master-rack{margin:0;border-top:0}
#drawerOutput #masterChannel{margin:0;padding:0;border:0}
/* what reads as words reads in the page's type, not its labels' */
.rhythm-help,.motion-note,.sample-limit+p,#sampleStatus,.tone-character p,.portrait-envelope-caption,.timing-footer,.curve-caption{font-family:var(--sans)!important;letter-spacing:0!important}
.rhythm-help{font-size:12px!important;line-height:1.55!important;color:var(--muted)!important}
.pd-drawer .section-label{font:10px var(--mono);letter-spacing:.12em;color:var(--ink)}

/* the sound sculptor, in its drawer rather than over the page */
#voicePanel.voice-dialog{position:static;display:none;width:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);overflow:visible}
#voicePanel.voice-dialog[open]{display:block}
#voicePanel .voice-header{position:sticky;top:72px;z-index:4;display:flex;align-items:center;gap:20px;margin:-22px calc(-1 * var(--pad)) 0;padding:14px var(--pad);background:#121110f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#voicePanel .voice-header h2{font:800 26px/1.05 var(--sans);letter-spacing:-.04em;margin:4px 0 0;color:var(--sound-hue,var(--ink))}
#voicePanel .voice-header-actions{margin-left:auto;gap:6px}
#voicePanel .voice-header-actions .icon-button{font-size:22px;color:var(--muted)}
#voicePanel #voicePanelBody{padding:20px 0 0}
/* hearing it: TRIGGER, and REPEAT on the tempo with how often (as Matter / Field's grain view's) */
#voicePanel .voice-header-actions{display:flex;align-items:center;flex-wrap:wrap}
.voice-strike{display:flex;align-items:center;gap:0;border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.voice-strike .small-button{border:0;border-radius:0;min-height:32px}
.voice-strike .strike{display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.voice-strike .strike svg{width:11px;height:11px;color:var(--sound-hue,var(--orange))}
.voice-strike #repeatVoice{border-left:1px solid var(--line-2)}
.voice-strike #repeatVoice[aria-pressed=true]{background:color-mix(in srgb,var(--sound-hue,var(--orange)) 22%,transparent);color:var(--ink);box-shadow:inset 0 -2px var(--sound-hue,var(--orange))}
.voice-strike select{min-height:32px;border:0;border-left:1px solid var(--line-2);border-radius:0;background-color:transparent;font-size:10px;padding-left:8px!important}
#soundFull svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#soundFull .shrink,#soundFull[aria-pressed=true] .grow{display:none}
#soundFull[aria-pressed=true] .shrink{display:inline}
#soundFull[aria-pressed=true]{color:var(--orange)}

/* the full view: the sculptor over the whole screen, the voice's portrait large at the left, its controls beside it */
.pd-sound-full{overflow:hidden}
.pd-sound-full #drawerSound{position:fixed;inset:0 0 var(--cxo-h,0px);z-index:60;margin:0;padding:0 var(--pad) 32px;overflow:auto;overscroll-behavior:contain;background:var(--bg)}
.pd-sound-full #voicePanel .voice-header{top:0;margin:0 calc(-1 * var(--pad)) 0;padding-top:max(14px,env(safe-area-inset-top))}
.pd-sound-full #voicePanel #voicePanelBody{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(340px,1fr);column-gap:32px;align-items:start;padding-top:18px}
.pd-sound-full #voicePanelBody>*{grid-column:2;min-width:0}
/* the portrait alone at the left, its sample's panel among the controls */
.pd-sound-full #voicePanelBody>.sculpt-media{display:contents}
.pd-sound-full .sculpt-media>.portrait-panel{grid-column:1;grid-row:1/span 60;position:sticky;top:86px;min-width:0}
.pd-sound-full .sculpt-media>:not(.portrait-panel){grid-column:2;min-width:0;margin-bottom:18px}
.pd-sound-full #soundPortrait{height:calc(100vh - 150px);min-height:380px;max-height:none}
.pd-sound-full #voicePanelBody>.voice-sequence{margin-top:0}

.voice-chips{display:flex;gap:4px;flex-wrap:wrap}
.voice-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border:1px solid var(--line-2);border-radius:3px;font:10px var(--mono);letter-spacing:.06em;color:var(--muted)}
.voice-chip i{width:7px;height:7px;border-radius:2px;background:var(--hue)}
@media(hover:hover){.voice-chip:hover{color:var(--ink);border-color:#7a7368}}
.voice-chip[aria-pressed=true]{color:var(--ink);border-color:color-mix(in srgb,var(--hue) 70%,transparent);background:color-mix(in srgb,var(--hue) 12%,transparent)}
#voicePanelBody .voice-sequence label,#voicePanelBody .sculpt-heading h3,#voicePanelBody .sculpt-heading span{font-family:var(--mono)}
#voicePanelBody .sculpt-heading h3{color:var(--sound-hue,var(--orange));letter-spacing:.1em}
#voicePanelBody .sculpt-fold{border-top:1px solid var(--line);margin-top:22px}
#voicePanelBody .sculpt-fold>.sculpt-section>.sculpt-heading h3{display:none}
#voicePanelBody .sculpt-fold>.sculpt-section>.sculpt-heading{justify-content:flex-end;margin-top:-6px}
#voicePanelBody .sculpt-fold>.sculpt-section{margin-top:0}
#voicePanelBody .sculpt-fold>summary{padding-top:14px}
#voicePanelBody .sculpt-fold[open]>.sculpt-section{margin-top:4px}

/* THE FAMILIES: the instrument's amplitude its own */
#voicePanelBody .mod-own p,.portrait-envelope-controls .portrait-own{margin:0;font:12px/1.5 var(--sans);color:var(--quiet)}
.portrait-envelope-controls .portrait-own{grid-column:1/-1}

/* SHAPE under the portrait (its own colour, as each envelope has one), and DYNAMICS' routes */
.portrait-modes{grid-template-columns:repeat(6,minmax(0,1fr))}
.portrait-modes [data-portrait-mode=shape][aria-pressed=true]{color:#8fb8e8;border-color:#5f7f9f;background:#8fb8e80c}
.portrait-envelope-controls[data-envelope=shape]{--env-color:#8fb8e8;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px}
#voicePanelBody .dyn-labels,#voicePanelBody .dyn-row{grid-template-columns:1fr 1fr 1.4fr 32px}
#voicePanelBody .dyn-row .sculpt-range>span{font-size:0;justify-content:flex-end}
#voicePanelBody .dyn-row .sculpt-range output{font-size:11px}
#voicePanelBody .dyn-row .dyn-remove{width:32px;height:32px;font-size:20px;line-height:1;color:var(--muted);border:1px solid transparent;border-radius:3px}
@media(hover:hover){#voicePanelBody .dyn-row .dyn-remove:hover{color:var(--ink);border-color:var(--line-2)}}
#voicePanelBody .dyn-foot{display:flex;align-items:baseline;gap:18px;padding-top:12px}
#voicePanelBody .dyn-foot .text-button{flex-shrink:0;color:var(--orange)}
#voicePanelBody .dyn-foot p{margin:0;font:12px/1.5 var(--sans);color:var(--quiet)}
@media(max-width:720px){
  .portrait-modes button{font-size:9px;letter-spacing:0}
  .portrait-envelope-controls[data-envelope=shape]{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 7px}
  #voicePanelBody .dyn-labels,#voicePanelBody .dyn-row{grid-template-columns:1fr 1fr 1fr 32px;gap:7px}
  #voicePanelBody .dyn-row .sculpt-range output{font-size:10px}
  #voicePanelBody .dyn-foot{flex-direction:column;gap:6px}
}

/* NOTES in the sculptor: its own note, the kit's key and scale, MONO, GLIDE TIME, CHOKE and TRACK, and the keyboard in
   the page's colours, the keys held in the voice's hue */
#voicePanelBody .sculpt-fold>.notes-section>.sculpt-heading{justify-content:space-between;flex-wrap:wrap}
#voicePanelBody .notes-own{font:10px var(--mono);letter-spacing:.08em;color:var(--muted)}
#voicePanelBody .notes-own b{margin-left:6px;font:500 13px var(--mono);letter-spacing:.04em;color:var(--sound-hue,var(--orange))}
#voicePanelBody .notes-section .sculpt-heading>div{align-items:center;flex-wrap:wrap}
#voicePanelBody .notes-controls{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));align-items:end;gap:18px 34px}
#voicePanelBody .notes-controls select{width:100%;min-height:30px;font-size:11px}
#voicePanelBody #monoVoice{min-width:74px}
#voicePanelBody .note-keys{margin-top:20px}
#voicePanelBody .notes-hint{margin:12px 0 0;font:12px/1.5 var(--sans);color:var(--quiet)}
#voicePanelBody .cxk-board{--cxk-line:var(--line);--cxk-ground:var(--well);--cxk-white:#2b2925;--cxk-white-low:#211f1c;--cxk-white-hover:#35322d;--cxk-white-line:#3a3631;--cxk-black:#0d0c0b;--cxk-black-low:#171513;--cxk-black-hover:#1d1b18;--cxk-black-line:#2f2c27;--cxk-held:color-mix(in srgb,var(--sound-hue,var(--orange)) 42%,#1c1a17);--cxk-held-low:color-mix(in srgb,var(--sound-hue,var(--orange)) 22%,#151412);--cxk-held-black:color-mix(in srgb,var(--sound-hue,var(--orange)) 52%,#141311);--cxk-held-black-low:color-mix(in srgb,var(--sound-hue,var(--orange)) 30%,#100f0d);--cxk-held-line:var(--sound-hue,var(--orange));--cxk-glow-colour:var(--sound-hue,var(--orange));--cxk-dot:var(--sound-hue,var(--orange));--cxk-home:var(--orange);--cxk-name:var(--quiet);--cxk-letter:var(--muted);--cxk-letter-black:var(--quiet);--cxk-focus:var(--orange-line);--cxk-font:var(--mono)}
.pd-step .step-glide{align-self:end;justify-self:start;min-height:28px;padding:5px 10px}
@media(max-width:720px){
  #voicePanelBody .notes-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
  #voicePanelBody #monoVoice{justify-self:start}
  #voicePanelBody .notes-section .sculpt-heading>div label{flex:0 0 auto}
  #voicePanelBody .notes-section .sculpt-heading>div label:nth-child(2){flex:1 1 0;min-width:150px}
  #voicePanelBody .notes-section .sculpt-heading>div label:nth-child(2) select{flex:1;min-width:0}
}

/* the master chain */
#drawerChain .rack-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 16px;font:9px var(--mono);letter-spacing:.1em;color:var(--quiet)}

/* the output channel */

/* ---- the guide, folded by part as Matter / Field's help is ---- */
dialog.pd-guide{max-width:760px;width:calc(100% - 32px);max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--line-2);border-radius:6px;background:#1a1917;color:var(--ink);overflow:auto;overscroll-behavior:contain}
.guide-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:22px 28px 10px;background:#1a1917}
/* its words always on its own ground, the guide fading in under it as it scrolls (it had faded over the words) */
.guide-head::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:linear-gradient(#1a1917,#1a191700);pointer-events:none}
.guide-body{padding:0 28px 30px}
.guide-body h2{font:400 32px/1.1 var(--sans);letter-spacing:-.04em;margin:14px 0 12px}
.guide-body h2 span{color:var(--orange)}
.guide-lead{font:15px/1.6 var(--sans);color:#cdc6b9;max-width:56ch;margin:0 0 24px}
.guide-start{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 26px}
.guide-card{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line-2);border-radius:4px;background:#151412;font:13px/1.45 var(--sans);color:#c9c2b5}
.guide-card b{color:var(--ink);font-weight:800}
.guide-card .gi{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#ffffff08;color:var(--orange)}
.guide-card .gi svg,.guide-part summary .gi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
kbd{display:inline-block;min-width:18px;padding:1px 5px;border:1px solid #6f685d;border-radius:3px;font:10px/1.5 var(--mono);color:var(--ink);text-align:center;margin:0 1px}
.guide-parts{border-top:1px solid var(--line)}
.guide-part{border-bottom:1px solid var(--line)}
.guide-part>summary{display:flex;align-items:center;gap:13px;padding:12px 0;cursor:pointer;list-style:none}
.guide-part>summary::-webkit-details-marker{display:none}
.guide-part>summary .gi{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#ffffff08;color:#bdb6a9}
.guide-part>summary strong{display:block;font:15px/1.3 var(--sans);color:var(--ink);font-weight:400}
.guide-part>summary small{display:block;font:12px/1.4 var(--sans);color:var(--muted)}
.guide-part>summary:after{content:"";flex:none;width:7px;height:7px;margin:0 6px 0 auto;border-right:1.3px solid var(--muted);border-bottom:1.3px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.guide-part[open]>summary:after{transform:rotate(225deg)}
.guide-part>div{padding:0 0 16px 43px}
.guide-part p{font:14px/1.65 var(--sans);color:#c3bcaf;margin:8px 0;max-width:62ch}
.guide-part h4{font:9px var(--mono);letter-spacing:.11em;color:var(--orange);margin:16px 0 4px}
.guide-note{font:12px/1.5 var(--sans);color:var(--quiet);margin-top:20px}
.guide-section-label{display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.11em;color:var(--muted);margin:0 0 8px}

/* the notice */
#notice{background:var(--ink);color:var(--bg);font:11px var(--mono);letter-spacing:.04em;border-radius:3px;padding:11px 16px;bottom:22px}

footer{padding:16px var(--pad) 22px;font:9px var(--mono);letter-spacing:.1em;color:var(--quiet)}

/* ---- narrower: the field beside the step, then a phone ---- */

@media (max-width:1179px){
  .pd-work.workspace{grid-template-columns:minmax(0,1fr)}
  /* the field on the left; beside it, from its top, what it does, CAPTURE SOUND and the scope, one under the other, the
     room left below them (CAPTURE SOUND sat in the middle of the field's height, the scope under it: two empty bands
     between them; 19 Oct 2026, the second pass) */
  .pd-inspector.performance{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);grid-template-rows:auto auto auto auto auto 1fr auto;column-gap:28px;padding:16px var(--pad) 22px}
  .pd-inspector .pd-panel-head,.pd-inspector .field-top,.pd-inspector #field,.pd-inspector .field-bottom{grid-column:1}
  .pd-inspector .pd-note,.pd-inspector .snapshot,.pd-inspector .scope-wrap{grid-column:2}
  .pd-inspector .pd-panel-head{grid-row:1}
  .pd-inspector .field-top{grid-row:2}
  .pd-inspector #field{grid-row:3/7}
  .pd-inspector .field-bottom{grid-row:7}
  .pd-inspector .pd-note{grid-row:3;margin-top:0}
  .pd-inspector .snapshot{grid-row:4;align-self:start}
  .pd-inspector .scope-wrap{grid-row:5;align-self:start}
  .pd-macros.master{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-macros .macro:nth-child(2){border-right:0}
  .pd-macros .macro:nth-child(-n+2){border-bottom:1px solid var(--line)}
  #voicePanel .voice-header{flex-wrap:wrap}
  .pd-sound-full #voicePanel #voicePanelBody{grid-template-columns:minmax(0,1fr)}
  .pd-sound-full #voicePanelBody>*,.pd-sound-full .sculpt-media>.portrait-panel,.pd-sound-full .sculpt-media>:not(.portrait-panel){grid-column:1;grid-row:auto;position:static}
  .pd-sound-full #soundPortrait{height:min(58vh,560px);min-height:300px}
}
@media (max-width:930px){
  /* stuck so its voices sit under the bar's stuck row (pd-ui.js stickHead()) */
  #voicePanel .voice-header{top:var(--pd-head-stick,0px)}
}
@media (max-width:720px){
  :root{--pad:16px}
  .pd-fold>summary small{display:none}
  #tracks .track-controls{grid-template-columns:26px 22px 22px minmax(0,1fr);column-gap:6px}
  #tracks .track-controls .voice-name{grid-column:2/5}
  #tracks .track-controls .voice-sub{display:none}
  #tracks .track-controls .track-mute{grid-column:2;grid-row:2;justify-self:start}
  #tracks .track-controls .track-solo{grid-column:3;grid-row:2;justify-self:start}
  #tracks .track-mute,#tracks .track-solo{width:22px;height:22px}
  #tracks .track-end{display:none}
  .pd-stage{padding:14px var(--pad) 16px}
  .pd-toolbar.section-heading{gap:10px 14px}
  .pd-fold-button{margin-left:0}
  .pd-fold-button .pd-wide{display:none}
  .ruler{grid-template-columns:112px 1fr;gap:8px}
  #tracks .track{grid-template-columns:112px minmax(0,1fr);column-gap:8px;min-height:0}
  #tracks .lanes{grid-template-columns:112px minmax(0,1fr);column-gap:8px}
  #tracks .ln-toggle{justify-self:start;width:26px;padding:0;justify-content:center;gap:1px}
  #tracks .ln-toggle span{display:none}
  #tracks .ln-head{padding-left:0}
  #tracks .ln-head select{padding-right:20px}
  #tracks .ln-head.ln-mod select{width:100%}
  #tracks .ln-hits{height:48px}
  #tracks .ln-curve{height:68px}
  #tracks .ln-timing{padding-left:0}
  #tracks .ln-hits[data-view=note]{height:132px}
  #tracks .ln-key{flex-direction:column;align-items:stretch;width:100%}
  #tracks .ln-key select{width:100%}
  #tracks .ln-head.ln-mod .ln-key{flex-direction:row}
  #tracks .ln-head.ln-mod .ln-key select{width:0;flex:1 1 0}
  #tracks .sound-lane{grid-template-columns:112px minmax(0,1fr);column-gap:8px}
  #tracks .sl-name{padding-left:0}
  #tracks .sl-strip{height:40px}
  #tracks .sl-seg{padding:0 5px;font-size:9px;letter-spacing:.04em}
  #tracks .sl-edit{grid-column:1/-1}
  #tracks .rl-head{margin-left:30px;padding-left:0}
  #tracks .track:before{left:-9px}
  #tracks .track-controls{flex-wrap:wrap;row-gap:2px}
  #tracks .voice-pad{width:26px;height:26px}
  #tracks .steps{gap:4px}
  #tracks .step{height:44px}
  .sequence-footer>span:first-child{display:none}
  .pd-step .step-controls,.step-more>.step-more-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
  .pd-inspector.performance{display:block}
  .pd-macros.master{grid-template-columns:minmax(0,1fr)}
  .pd-macros .macro{border-right:0;border-bottom:1px solid var(--line)}
  .pd-macros .macro:last-child{border-bottom:0}
  /* the deeper groups' tabs one row, sliding sideways (the frame's tab row), by their names; the open one folds again
     from itself */
  .pd-drawer-tabs{gap:0;padding:0 6px}
  .drawer-tab{min-height:48px;padding:0 12px;gap:8px}
  .drawer-tab b{display:none}
  .drawer-close{display:none}
  .voice-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  #voicePanel .voice-header-actions #soundFull{position:static;margin-left:auto}
  .voice-strike{flex:1 1 100%}
  .voice-strike .strike{flex:1;justify-content:center}
  /* its head: the title and MUTATE SOUND's row first, the voices and TRIGGER's row last, and only these kept in view as
     the sound is scrolled (pd-ui.js stickHead() sets how far up it sticks) */
  #voicePanel .voice-header>div:first-child{flex:1 1 100%}
  #voicePanel .voice-header-actions{display:contents}
  #voiceChips{order:2;flex:1 1 100%}
  #voicePanel .voice-strike{order:3}
  .guide-start{grid-template-columns:1fr}
  .guide-part>div{padding-left:0}
}
/* a voice's M and S a finger's size where a finger presses them (Cyrus, 18 Oct 2026: "These buttons are hard to use"):
   36 by 32, beside the name on a tablet, under it on a phone */
@media (pointer:coarse){
  #tracks .track-mute,#tracks .track-solo{width:36px;height:32px;font-size:10px;border-color:var(--line)}
  #tracks .track-controls{grid-template-columns:30px minmax(0,1fr) 36px 36px}
}
/* Export's stems: WET or DRY, two buttons as one, the one chosen lit; the row only with STEMS chosen */
.cxf-dialog .cxf-row[hidden]{display:none}
.cxf-dialog .pd-stems{display:inline-flex;gap:0}
.pd-stems button{min-height:34px;min-width:64px;padding:0 14px;border:1px solid var(--line-2);background:none;color:var(--muted);font:11px/1 var(--mono);letter-spacing:.08em}
.pd-stems button:first-child{border-radius:3px 0 0 3px}
.pd-stems button:last-child{margin-left:-1px;border-radius:0 3px 3px 0}
.pd-stems button[aria-pressed=true]{position:relative;color:var(--orange);border-color:var(--orange-line);background:var(--orange-soft)}
@media(hover:hover){.pd-stems button:hover{color:var(--ink)}}
/* the lanes' controls a finger's size too, LANES reached a little past its edges */
@media (pointer:coarse){
  #tracks .ln-head.ln-mod{gap:3px}
  #tracks .ln-head select{height:32px;min-height:32px;padding-right:20px}
  #tracks .ln-mode{min-height:32px}
  #tracks .ln-x{width:28px;height:32px}
  #tracks .ln-tools .text-button{min-height:32px}
  #tracks .ln-toggle:after{content:"";position:absolute;inset:-4px -4px -8px}
  #tracks .sl-strip{height:44px}
  #tracks .sl-row select{height:36px;min-height:36px}
  #tracks .sl-morphs button{min-width:40px;min-height:36px}
  #tracks .sl-acts .text-button{min-height:32px}
}
/* the lanes' heads under the voice's name with a finger, but not on a phone, where their column is 112 px and all of it
   is their menus' (KEY and SCALE were 82 px wide there, Chromatic cut short) */
@media (pointer:coarse) and (min-width:721px){#tracks .ln-head{padding-left:30px}}
/* a lane's head on one row from 721 px, its menu, its GLIDE or HOLD and its x, a little closer: with a finger at 10 px
   the x had gone under them on its own row, and with a mouse beside FILTER and GLIDE (FM AMOUNT the menu's widest).
   TUNE's FREE, NOTES or IN KEY keeps its row under them */
@media (min-width:721px){
  #tracks .ln-head.ln-mod{column-gap:2px}
  #tracks .ln-head.ln-mod>select:not(.ln-snap){padding-left:5px;padding-right:21px!important}
  #tracks .ln-head.ln-mod>.ln-mode{padding:0 5px}
}
@media (pointer:coarse) and (max-width:720px){
  #tracks .track-controls{grid-template-columns:26px 36px 36px minmax(0,1fr)}
}
/* every slider a finger's height where a finger moves it, 28 px as the bar's are (they were 22: the sound's, the
   chain's and the output's), each row where it was, what it grows by taken from its own margins (19 Oct 2026, the
   second pass) */
@media (pointer:coarse){
  :root input[type=range]:not(.cxf-s){height:28px;margin-top:-3px;margin-bottom:-3px}
  :root .roll-spacing input[type=range]{margin-top:-1px;margin-bottom:-1px}
  :root .sculpt-range input[type=range],:root .cxc-rack .cxc-range input[type=range]{margin-top:-1px;margin-bottom:2px}
  :root .cxc-channel .cxc-setting input[type=range]{margin-top:0;margin-bottom:4px}
  :root .macro input[type=range]{margin-top:3px;margin-bottom:0}
  :root .step-control input[type=range]{margin-top:-1px;margin-bottom:1px}
}
@media (prefers-reduced-motion:reduce){
  .record[aria-pressed=true] .record-dot{animation:none}
  .pd-meter i{transition:none}
}

/* ---- VISUAL (17 Oct 2026, Cyrus: "a full screen play mode like matter where it becomes a very pretty show"): the
   stage over the whole screen (pd-show.js), the page under it put away so nothing of it shows round the stage; the
   title and Leave at the top, the strip at the foot (Play, the kit, four sliders, the tilt), fading as the hands rest,
   as Matter / Field's visual mode does ---- */
html.pd-show-on,html.pd-show-on body{background:#0b0a09;overflow:hidden}
body.pd-show-on>:not(.pd-show):not(dialog){visibility:hidden}
.pd-show{position:fixed;inset:0;z-index:90;overflow:hidden;visibility:visible;color:var(--ink);background:radial-gradient(ellipse 110% 85% at 50% 60%,#1b1814 0%,#0e0d0b 52%,#080706 100%);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.show-gl{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
.pd-show.idle .show-gl{cursor:none}
.show-words,.show-lenses{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.show-voice{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap;text-shadow:0 1px 8px #000,0 0 2px #000;will-change:transform}
.show-voice b{font:800 11px/1 var(--sans);letter-spacing:.14em;color:var(--c)}
.show-voice span{font:9px/1.2 var(--mono);letter-spacing:.03em;color:#a69f93}
.show-voice.muted{opacity:.4}
.show-voice.short span{display:none}
/* Headphone 3D: the listener seen from above, in the stage's corner (pd-show.js ears); only its voices take a hand, and
   the stage's hint keeps beside it (on a phone it is under the hint) */
.show-ears{position:absolute;right:24px;top:84px;width:168px;margin:0;pointer-events:none;transition:opacity .7s ease}
.show-ears[hidden]{display:none}
.pd-show.idle .show-ears{opacity:.5}
@media (min-width:721px){.pd-show.ears-on .show-hint{max-width:min(660px,calc(100vw - 416px))}}
.show-ears svg{display:block;width:100%;height:auto;overflow:visible}
.show-ears .ears-ground{fill:#0d0c0bb8}
.show-ears .ears-low{fill:none;stroke:#ece7dc2e;stroke-dasharray:2 4}
.show-ears .ears-ring{fill:#ece7dc08;stroke:#ece7dc33;stroke-dasharray:3 3}
.show-ears .ears-front{fill:none;stroke:#ece7dc99;stroke-width:1.2}
.show-ears .ears-side{fill:#ece7dc66;font:7px var(--mono);text-anchor:middle}
.show-ears .ears-head ellipse{fill:#121110;stroke:#ece7dcd9;stroke-width:1.4}
.show-ears .ears-ear{fill:none;stroke:#ece7dcd9;stroke-width:1.4;stroke-linecap:round}
.show-ears .ears-nose{fill:#ece7dcd9}
.show-ears .ears-leads line{stroke:var(--c);stroke-width:.8;opacity:.6}
.show-ears .ears-leads line[hidden]{display:none}
.show-ears .ears-hit,.show-ears .ears-dot,.show-ears .ears-tag{pointer-events:all;cursor:grab}
.show-ears .ears-hit:active,.show-ears .ears-dot:active,.show-ears .ears-tag:active{cursor:grabbing}
.show-ears .ears-hit,.show-ears .ears-tag rect{fill:transparent}
.show-ears .ears-dot{fill:var(--c);stroke:#0b0a09;stroke-width:2}
.show-ears .ears-tag text{fill:var(--c);font:800 10px var(--mono);text-anchor:middle;paint-order:stroke;stroke:#0b0a09;stroke-width:3px;stroke-linejoin:round}
.show-ears .muted{opacity:.4}
.show-ears figcaption{margin-top:4px;text-align:center;font:9px var(--mono);letter-spacing:.12em;color:#a69f93}
/* Check positions: the place sounding, a ring in the orange, its name over it */
.show-ears .ears-check[hidden]{display:none}
.show-ears .ears-check circle{fill:#ff632626;stroke:var(--orange);stroke-width:1.4}
.show-ears .ears-check .ears-check-pulse{fill:none;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:ears-check 1.05s ease-out infinite}
.show-ears .ears-check text{fill:var(--orange);font:800 9px var(--mono);letter-spacing:.08em;text-anchor:middle;paint-order:stroke;stroke:#0b0a09;stroke-width:3px;stroke-linejoin:round}
@keyframes ears-check{from{transform:scale(1);opacity:.9}to{transform:scale(2.2);opacity:0}}
@media (max-width:720px){
  .show-ears{right:max(12px,env(safe-area-inset-right));top:calc(max(66px,calc(env(safe-area-inset-top) + 52px)) + 80px);width:128px}
  .show-ears .ears-tag text{font-size:13px}
  .show-ears .ears-side{font-size:9px}
  .show-ears figcaption{font-size:9px}
}
/* a phone on its side: beside the hint, smaller */
@media (max-height:520px) and (min-width:600px){
  .show-ears{right:max(16px,env(safe-area-inset-right));top:max(56px,calc(env(safe-area-inset-top) + 46px));width:116px}
  .show-ears .ears-tag text{font-size:13px}
  .show-ears .ears-side{font-size:9px}
  .show-ears figcaption{font-size:9px}
  .pd-show.ears-on .show-hint{max-width:calc(100vw - 320px)}
}
.show-voice.held b{color:#fff}
.show-word{position:absolute;left:0;top:0;font:9px/1 var(--mono);letter-spacing:.18em;color:#ece7dc80;white-space:nowrap}
.show-word.dim{color:#ece7dc6b;letter-spacing:.1em}
.show-lenses,.show-word.dim{transition:opacity .4s}
@media (max-width:720px){.pd-show.hinting .show-lenses,.pd-show.hinting .show-word.dim{opacity:.12}}
.show-lens{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;height:28px;margin:0;padding:0 10px 0 9px;border:1px solid #ffffff1a;border-radius:3px;background:#0d0c0bb8;color:#ece7dc8c;font:9px/1 var(--mono);letter-spacing:.1em;white-space:nowrap;pointer-events:auto;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);will-change:transform}
.show-lens i{width:7px;height:7px;border-radius:50%;background:var(--c,#ece7dc);opacity:.3}
.show-lens b{font-weight:400;color:inherit}
.show-lens span{color:var(--quiet)}
@media(hover:hover){.show-lens:hover{color:#ece7dc;border-color:#ffffff3d}}
.show-lens[aria-pressed=true]{color:#ece7dc;border-color:var(--cl,#ffffff3d)}
.show-lens[aria-pressed=true] i{opacity:1;box-shadow:0 0 8px var(--c)}
.show-lens[aria-pressed=true] span{color:var(--c)}
.show-lens.quiet{border-color:#ffffff1f}
.show-lens.quiet i{opacity:.5;box-shadow:none}
.show-lens.quiet span{color:var(--quiet)}
.show-lens.chosen{border-color:var(--c);background:#16130fe0}
.show-touch{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.show-touch i{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border:1.5px solid var(--orange);border-radius:50%;box-shadow:0 0 18px #ff632666,inset 0 0 10px #ff632633}
.show-touch span{position:absolute;left:32px;top:-6px;font:9px/1 var(--mono);letter-spacing:.08em;color:#ece7dc;white-space:nowrap;text-shadow:0 1px 6px #000,0 0 2px #000}
.show-touch.left span{left:auto;right:32px}
.show-ui{position:absolute;inset:0;pointer-events:none;transition:opacity .7s ease}
.show-ui:focus{outline:none}
/* PRO and ?, the devices' shared kit's (ui/cx-visual.js), in the stage's own colours and type: its glass the strip's,
   its accent the page's orange, its symbols in the warm ink */
.pd-show{--cxv-ink:#ece7dc;--cxv-soft:#cfc8bb;--cxv-muted:#a69f93;--cxv-faint:var(--quiet);--cxv-line:#ffffff1c;--cxv-edge:#ffffff24;--cxv-glass:#100e0cb8;--cxv-sheet:#100e0cf7;--cxv-accent:var(--orange);--cxv-accent-soft:var(--orange-soft);--cxv-accent-line:var(--orange-line);--cxv-cool:#d8d2c6;--cxv-cool-soft:#ece7dc12;--cxv-font:var(--sans);--cxv-mono:var(--mono)}
.pd-show .cxv-help kbd{border-color:#5d564c;background:#171411}
.pd-show .cxv-pro-button[aria-pressed=true]{background:#1d120cd9}
.show-ui>*,.show-top>*,.show-bottom>*{pointer-events:auto}
.show-top,.show-bottom{pointer-events:none!important}
.pd-show.idle .show-ui{opacity:0}
.pd-show.idle .show-ui *{pointer-events:none!important}
.show-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left))}
.show-title{display:flex;align-items:center;gap:10px;min-width:0;font:800 13px/1 var(--sans);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.show-title img{width:22px;height:22px;flex-shrink:0}
.show-title b span{color:#8f887d;font-weight:400}
.show-title em{margin-left:2px;padding:4px 6px;border:1px solid var(--orange-line);border-radius:3px;font:9px/1 var(--mono);font-style:normal;letter-spacing:.14em;color:var(--orange)}
.show-exit{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;padding:0;border:1px solid #ffffff24;border-radius:50%;background:#0d0c0ba8;color:#d8d2c6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.show-exit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
@media(hover:hover){.show-exit:hover:not(:disabled){border-color:#ffffff4d;color:#fff}}
.show-hint{position:absolute;left:50%;top:max(72px,calc(env(safe-area-inset-top) + 58px));transform:translateX(-50%);width:max-content;max-width:min(660px,calc(100vw - 32px));margin:0;padding:8px 14px;border-radius:3px;background:#0d0c0bc2;font:10px/1.55 var(--mono);letter-spacing:.03em;color:#cfc8bb;text-align:center;opacity:0;transition:opacity .5s;pointer-events:none!important}
.show-hint.shown{opacity:1}
.show-bottom{position:absolute;left:0;right:0;bottom:max(22px,calc(env(safe-area-inset-bottom) + 10px));display:flex;flex-direction:column;align-items:center;gap:10px}
.show-lens-panel{display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:7px 8px 7px 14px;border:1px solid #ffffff1c;border-radius:12px;background:#100e0cd6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 40px #00000059}
#showLensName{font:10px/1.3 var(--mono);font-weight:400;letter-spacing:.07em;color:var(--c,#ece7dc)}
.show-mix{display:flex;align-items:center;gap:8px;margin:0;font:9px/1 var(--mono);letter-spacing:.1em;color:#9f988c}
.show-mix input{width:150px;height:28px;margin:0;accent-color:var(--orange)}
.show-mix output{min-width:34px;color:#ece7dc;letter-spacing:0}
.show-strip{display:flex;align-items:center;gap:22px;width:max-content;max-width:calc(100vw - 32px);padding:10px 16px 10px 12px;border:1px solid #ffffff1c;border-radius:16px;background:#100e0cb8;box-shadow:0 18px 50px #00000066;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.show-transport{display:flex;align-items:center;gap:4px;min-width:0}
.show-play{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:96px;margin-right:6px;padding:0 16px 0 14px;border:1px solid var(--orange);border-radius:22px;background:var(--orange);color:var(--on-orange);font:800 10px/1 var(--mono);letter-spacing:.12em}
.show-play svg{width:14px;height:14px;fill:currentColor}
.show-play .g-stop,.show-play.running .g-play{display:none}
.show-play.running .g-stop{display:inline}
@media(hover:hover){.show-play:hover:not(:disabled){background:#ff7a45;color:var(--on-orange)}}
.show-play.running{background:#ff632614;color:var(--orange);border-color:var(--orange-line)}
@media(hover:hover){.show-play.running:hover:not(:disabled){background:var(--orange-soft);color:var(--orange)}}
.show-step{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:#aea698}
.show-step svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.show-step:hover:not(:disabled){color:#fff;background:#ffffff0d}}
.show-kit{min-width:70px;max-width:190px;overflow:hidden;font:800 13px/1.2 var(--sans);letter-spacing:-.01em;color:#ece7dc;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.show-sliders{display:grid;grid-template-columns:repeat(4,minmax(96px,136px));gap:16px}
.show-slider{margin:0;color:#a69f93;font:9px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.show-slider>span{display:flex;justify-content:space-between;gap:8px;margin-bottom:2px}
.show-slider output{color:#ece7dc;letter-spacing:0}
.show-slider input{display:block;width:100%;height:28px;margin:0;accent-color:var(--orange)}
.show-row{display:contents}
.show-sliders{order:2}
.show-tools{order:3;display:flex;align-items:center;gap:6px}
.show-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid #ffffff24;border-radius:15px;background:transparent;color:#cfc8bb;font:9px/1 var(--mono);letter-spacing:.12em;white-space:nowrap}
.show-chip svg{display:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.show-chip:hover:not(:disabled){border-color:#ffffff4d;color:#fff;background:transparent}}
.show-chip[aria-pressed=true]{border-color:var(--orange);color:var(--orange)}
@media (max-width:1100px){
  .show-sliders{grid-template-columns:repeat(4,minmax(84px,110px));gap:12px}
  .show-strip{gap:16px}
}
@media (max-width:900px){
  .show-strip{flex-direction:column;align-items:stretch;gap:6px;width:calc(100vw - 32px);padding:10px 14px 10px}
  .show-row{display:flex;align-items:center;gap:8px}
  .show-transport{flex:1}
  .show-kit{flex:0 1 auto;max-width:none}
  .show-transport .show-step:last-child{margin-right:auto}
  .show-sliders{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
  .show-slider input{height:32px}
  .show-lens-panel{flex-wrap:wrap;justify-content:center;row-gap:4px;width:calc(100vw - 32px);padding:8px 10px}
  .show-mix{flex:1 1 220px}
  .show-mix input{flex:1;width:auto}
  .show-hint{top:max(66px,calc(env(safe-area-inset-top) + 52px))}
}
@media (max-width:900px) and (min-width:600px){
  .show-sliders{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px}
}
/* a phone on its side: one row, the sliders narrower */
@media (max-height:520px) and (min-width:600px){
  .show-strip{flex-direction:row;align-items:center;width:max-content;gap:12px;padding:6px 10px}
  .show-play{height:38px;min-width:44px;padding:0 12px}
  .show-play span{display:none}
  .show-kit{max-width:120px;flex:0 1 auto}
  .show-sliders{grid-template-columns:repeat(4,minmax(64px,92px));gap:10px}
  .show-slider input{height:26px}
  .show-top{padding-top:max(10px,env(safe-area-inset-top))}
  .show-exit,.pd-show .cxv-button{width:36px;min-width:36px;height:36px;min-height:36px}
  .pd-show .cxv-pro-button{width:auto;padding:0 12px}
  .show-hint{top:max(54px,calc(env(safe-area-inset-top) + 44px))}
  .show-voice span,.show-lens span{display:none}
  .show-voice b{font-size:10px}
  .show-lens{height:24px;padding:0 7px;gap:6px;font-size:9px}
}
@media (max-width:520px){
  .show-top{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .show-title{font-size:12px;gap:8px}
  .show-title em{display:none}
  .show-lens{height:24px;gap:6px;padding:0 7px;font-size:9px;letter-spacing:.06em}
  .show-lens span{display:none}
  .show-voice span{display:none}
  .show-voice b{font-size:10px}
  .show-play{min-width:44px;padding:0 14px}
  .show-play span{display:none}
  .show-chip{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%}
  .show-chip svg{display:block}
  .show-chip span{display:none}
}
@media (max-width:350px){
  .show-title b{display:none}
}
@media (prefers-reduced-motion:reduce){
  .show-ui,.show-hint,.show-ears,.show-lenses,.show-word.dim{transition:none}
  .show-ears .ears-check .ears-check-pulse{animation:none;opacity:0}
}

/* ---- the audit (19 Oct 2026, Cyrus: "i would like to do a ux ui audit and aesthetic cleanup fix anything out of place
   on both devices"): every view at twelve sizes, what overlaps, what is cut, what a finger can't hit, words too small
   or too dim ---- */
/* a voice's ratio lane, RATIO under its name and the lane under its steps, only where the voice uses one (its own
   changes, or GRID SCALE set off 1) or its LANES are open: 64 of the 75 kits use none, and its row was under every
   voice. LANES itself is in the row's flow, under END, where it had been laid over END and RATIO */
#tracks .track:not(.uses-ratio):not(.lanes-open)>:is(.rl-head,.rl-lane){display:none}
/* no word under 9 px, as Matter / Field's second pass has it: the sizes the base sets smaller where it narrows */
.pd-inspector .snapshot button{font-size:9px}
#voicePanelBody .sample-limit{font-size:9px}
#voicePanelBody .cross-labels,#voicePanelBody .cross-row select{font-size:9px}
#voicePanel .voice-header-actions .small-button{font-size:9px}
#tracks .rl-run,.ratio-picker .rp-group>.micro,.ratio-picker .rp-ratio small,.ratio-picker .rp-ratio em,.ratio-picker .rp-extra .small-button span{font-size:9px}
/* a ratio lane's GRID (a stretch on the master clock) in the page's quiet words, 4.5 to 1 at least, where ratio.css had it
   at 4.0 */
#tracks .rl-run.grid :is(b,i){color:var(--quiet)}
/* the ratio picker's words whole in their buttons at every width (QUINTUPLET ran past its button's inside edge at 9 px
   wherever five stood to a row in less than 480 px, by 3 to 21 px, and a slow tempo's 114.7 BPM at 320 and 340): five to
   a row from 480 px, the picker beside the lanes 480 px wide; four on a phone from 356 px; three below. The labels a
   little closer, QUINTUPLET as wide at 10 px as it was at 9 */
.ratio-picker{width:min(480px,calc(100vw - 24px))}
.ratio-picker .rp-ratio small{letter-spacing:.04em}
@media(max-width:479px){.ratio-picker .rp-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:355px){.ratio-picker .rp-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the bar from 1100 to 1159 px as the frame draws it up to 1099 (cx-frame.css), in two rows, its transport's row the one
   that stays: Polite Disorder's bar holds more than one row has room for there, four words in its transport and the
   bar's place beside TEMPO, so in one row TEMPO's word ran under its lock (14 px from 1100 to 1130, 3.6 at 1150: 31 Oct
   2026, Cyrus's picture of it) and REC was cut short (13 px at 1100); from 1160 the row has room for all of it. In two
   rows the transport and VISUAL keep their room, as at 1099, where the frame narrows them from 1100 to fit one row */
@media (min-width:1100px) and (max-width:1159px){
  .cxf-bar{grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-areas:"id . rec visual help" "transport transport levels levels levels";
    column-gap:14px}
  .cxf-bar.cxf-has-get{grid-template-columns:auto minmax(0,1fr) auto auto auto auto;
    grid-template-areas:"id . rec visual help get" "transport transport levels levels levels levels"}
  .cxf-bar .cxf-levels{grid-area:levels;display:flex;justify-content:flex-end;gap:18px;min-width:0}
  .cxf-bar .cxf-levels>.cxf-tempo,.cxf-bar .cxf-levels>.cxf-output{grid-area:auto}
  .cxf-bar .cxf-tempo{width:168px}
  .cxf-bar .cxf-output{width:176px}
  .cxf-bar .cxf-transport>button{padding:0 13px}
  .cxf-bar .cxf-transport>.cxf-play,.cxf-bar .cxf-transport>.cxf-play[aria-pressed=true]{min-width:118px}
  .cxf-bar .cxf-visual{width:auto;padding:0 12px}
  .cxf-bar .cxf-visual span{display:inline}
}
/* and in one row, from 1160 px, TEMPO its whole 168 px, which its word, its lock, its value and the bar's place need: the
   frame lets TEMPO give up room down to 124 px, and on CS/M's own page GET THE APP took it, TEMPO 162 px and its word
   over its lock by up to 6 px from 1194 to 1204 (1 Nov 2026). With none to give, GET THE APP goes under FILE there. The
   frame's own columns (the family pass, the same day: the name in a room of its own, so PLAY starts where it does on
   every device), TEMPO's track alone set here */
@media (min-width:1160px){
  .cxf-bar{--cxf-tempo-track:168px}
}
/* FILE's form (a menu, Save, Open and Export by their signs, or by their words) and the strip's gaps are the frame's,
   by the width alone, every device's (the family pass, 1 Nov 2026), where they were this page's own from 640 px */
/* and from 1100 px, where the strip is one row, the line never under 120 px, its actions whole: what the line still
   needs comes from the name's room, which holds the kits' names with a little to spare (200 px with a mouse, 184 with
   a finger, every name 178 px or less but Waltz for Broken Machines, 239, cut from 1100 px as it was): 3 px at 1100
   with a finger and a song on, the one width left short */
@media (min-width:1100px){
  .cxf-strip{grid-template-columns:minmax(calc(230px + var(--cxf-share-room)),calc(352px + var(--cxf-share-room))) minmax(120px,1fr) max-content}
}

/* Devine Disorder (pd-devine.js): DEVINE in the bar, the six voices' hues drifting under it while it is on; its drawer,
   how far and how fast, what it moves, FREEZE, KEEP and NEW, and its paths drawn */
.cxf-bar .cxf-transport>.pd-devine{position:relative;overflow:hidden}
.cxf-bar .cxf-transport>.pd-devine[aria-pressed=true]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--v0),var(--v1),var(--v2),var(--v3),var(--v4),var(--v5),var(--v0));background-size:200% 100%;
  animation:pd-devine 3s linear infinite}
@keyframes pd-devine{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.cxf-bar .cxf-transport>.pd-devine[aria-pressed=true]::after{animation:none}}
#drawerDevine .rack-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 16px;font:9px var(--mono);
  letter-spacing:.1em;color:var(--quiet)}
.devine-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,1.35fr);grid-template-areas:"main moves" "acts scope";
  gap:18px 28px;align-items:start}
.devine-main{grid-area:main;display:grid;gap:14px;min-width:0}
.devine-on{justify-self:start;min-width:88px;min-height:40px;padding:0 18px;border:1px solid var(--line-2);border-radius:3px;
  font:800 11px/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.devine-on[aria-pressed=true]{border-color:var(--orange);background:var(--orange);color:var(--on-orange)}
.devine-range{display:grid;gap:6px;min-width:0}
.devine-range>span{display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:.12em;color:var(--ink)}
.devine-range output{color:var(--orange)}
.devine-range small{font:11px/1.35 var(--sans);color:var(--muted)}
.devine-range input{width:100%}
.devine-moves{grid-area:moves;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;min-width:0}
.devine-moves button{display:grid;gap:5px;justify-items:start;align-content:center;min-height:52px;padding:9px 11px;border:1px solid var(--line-2);
  border-radius:3px;font:10px/1 var(--mono);letter-spacing:.12em;color:var(--muted);text-align:left}
.devine-moves button small{font:11px/1.25 var(--sans);letter-spacing:0;color:var(--quiet)}
.devine-moves button[aria-pressed=true]{border-color:var(--orange-line);background:#ffffff06;color:var(--ink)}
.devine-moves button[aria-pressed=true] small{color:var(--muted)}
.devine-acts{grid-area:acts;display:flex;flex-wrap:wrap;gap:6px}
.devine-acts button{min-height:40px;padding:0 16px;border:1px solid var(--line-2);border-radius:3px;font:10px/1 var(--mono);letter-spacing:.12em;
  color:var(--ink)}
.devine-acts button[aria-pressed=true]{border-color:var(--orange-line);color:var(--orange)}
.devine-acts button:disabled{opacity:.42;cursor:default}
.devine-scope{grid-area:scope;display:block;width:100%;height:132px;border:1px solid var(--line);border-radius:3px;background:#12110f}
#drawerDevine:not(.is-on) .devine-scope{opacity:.55}
@media(hover:hover){.devine-on:hover,.devine-moves button:hover,.devine-acts button:hover:not(:disabled){border-color:#7a7368}}
@media(max-width:720px){
  .devine-grid{grid-template-columns:1fr;grid-template-areas:"main" "moves" "acts" "scope"}
  #drawerDevine .rack-heading{flex-direction:column;align-items:flex-start;gap:6px}
  .devine-acts button{flex:1}
}

/* REPEAT held by the song's REPEAT lane (pd-repeat.js): lit in the accent, without the hands' ground */
.cxf-bar .cxf-transport>.cxf-act.pd-song-held{border-color:var(--cxf-accent-line);color:var(--cxf-accent)}
/* REPEAT's moves (pd-repeat.js): SIZE, its five lengths, and LATCH in one row, then the five chances, two or three to a
   row and one on a phone */
#drawerRepeat .rack-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 16px;font:9px var(--mono);
  letter-spacing:.1em;color:var(--quiet)}
.repeat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px 28px;align-items:start}
.repeat-size{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.repeat-size .pd-k{margin-right:6px;color:var(--ink)}
.repeat-size button{min-height:40px;min-width:56px;padding:0 12px;border:1px solid var(--line-2);border-radius:3px;font:10px/1 var(--mono);
  letter-spacing:.12em;color:var(--muted)}
.repeat-size button[aria-pressed=true]{border-color:var(--orange-line);background:#ffffff06;color:var(--ink)}
.repeat-size .repeat-latch{margin-left:auto;min-width:88px;font-weight:800}
.repeat-size .repeat-latch[aria-pressed=true]{border-color:var(--orange);background:var(--orange);color:var(--on-orange)}
@media(hover:hover){.repeat-size button:hover{border-color:#7a7368}}
@media(max-width:720px){
  #drawerRepeat .rack-heading{flex-direction:column;align-items:flex-start;gap:6px}
  .repeat-grid{grid-template-columns:1fr}
  .repeat-size button{flex:1 1 52px;min-width:0;padding:0 6px}
  .repeat-size .pd-k{flex:0 0 100%;margin:0 0 2px}
  .repeat-size .repeat-latch{flex:1 1 100%;margin-left:0}
}

/* LAYERS (pd-layers.js): YOUR SOUNDS beside the voice's picture, its two ways in and its layers listed; and each layer's
   card in the LAYERS fold, its sound drawn with the part played lit */
#sampleLoader .layer-second{flex:none;width:100%;margin-top:9px;min-height:34px;border:1px solid var(--line-2);border-radius:3px;font:700 10px/1.2 var(--mono);letter-spacing:.1em;color:var(--ink);padding:8px 12px}
@media(hover:hover){#sampleLoader .layer-second:hover:not(:disabled){border-color:var(--orange-line);color:var(--orange)}}
#sampleLoader .orange-button+.layer-second,#sampleLoader .layer-second+.orange-button{margin-top:9px}
#sampleLoader.has-layers .sample-body{flex:0 0 auto}
#sampleLoader .layer-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid #32322a;flex:1 1 auto}
#sampleLoader .layer-list button{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:baseline;width:100%;min-height:34px;padding:8px 2px;border-bottom:1px solid #32322a;text-align:left;font:10px/1.3 var(--mono);color:var(--ink)}
#sampleLoader .layer-list b{color:var(--orange);font-weight:400}
#sampleLoader .layer-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sampleLoader .layer-list small{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
@media(hover:hover){#sampleLoader .layer-list button:hover span{color:var(--orange)}}
#voicePanelBody .layer-card{border:1px solid var(--line);border-radius:3px;padding:12px 14px 4px;margin-bottom:12px;background:#ffffff04}
#voicePanelBody .layer-head{display:flex;align-items:center;gap:10px;min-width:0}
#voicePanelBody .layer-head b{font:400 11px var(--mono);color:var(--orange)}
#voicePanelBody .layer-head strong{flex:1;min-width:0;font:12px/1.3 var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#voicePanelBody .layer-head span{font:10px var(--mono);color:var(--muted);white-space:nowrap}
#voicePanelBody .layer-head .text-button{color:var(--orange);font-size:10px;min-height:32px;padding:6px 4px}
#voicePanelBody .layer-remove{width:32px;height:32px;font-size:20px;line-height:1;color:var(--muted);border:1px solid transparent;border-radius:3px;flex-shrink:0}
@media(hover:hover){#voicePanelBody .layer-remove:hover{color:var(--ink);border-color:var(--line-2)}}
#voicePanelBody .layer-wave{display:block;width:100%;height:44px;margin:8px 0 14px}
#voicePanelBody .layer-front,#voicePanelBody .layer-deep{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 26px;align-items:end}
#voicePanelBody .layer-flags{display:flex;gap:8px;flex-wrap:wrap}
#voicePanelBody .layer-flags .small-button{flex:1 1 auto;font-size:9px;padding:7px 8px}
#voicePanelBody .layer-more{margin-top:12px;border-top:1px solid var(--line)}
#voicePanelBody .layer-more>summary{font:10px var(--mono);letter-spacing:.08em;color:var(--muted);padding:10px 0;cursor:pointer;list-style:none;min-height:32px}
#voicePanelBody .layer-more>summary::-webkit-details-marker{display:none}
#voicePanelBody .layer-more>summary::before{content:'+ '}
#voicePanelBody .layer-more[open]>summary::before{content:'− '}
#voicePanelBody .layer-more[open]>summary{color:var(--orange)}
#voicePanelBody .layer-deep{grid-template-columns:repeat(3,minmax(0,1fr));padding:2px 0 14px}
#voicePanelBody .layers-foot p{margin:4px 0 0;font:12px/1.5 var(--sans);color:var(--quiet)}
@media(max-width:720px){
  #sampleLoader .sample-body{grid-template-columns:1fr 1fr}
  #sampleLoader .sample-body strong,#sampleLoader .sample-body>span,#sampleLoader .sample-body>.text-button{grid-column:1/-1}
  #sampleLoader .sample-body .orange-button,#sampleLoader .sample-body .layer-second{grid-row:auto;grid-column:auto;width:100%;margin:6px 0 0;min-height:40px;padding:10px 8px}
  #voicePanelBody .layer-front{grid-template-columns:repeat(2,minmax(0,1fr))}
  #voicePanelBody .layer-flags{grid-column:1/-1}
  #voicePanelBody .layer-deep{grid-template-columns:repeat(2,minmax(0,1fr))}
  #voicePanelBody .layer-head>span{display:none}
}

/* FILTER (24 Oct 2026): its picture beside its types and settings, one column on a phone; the curve in the voice's hue,
   its line warmer and wider with DRIVE, the envelope's sweep a band, its point dragged across for the cutoff and up for
   resonance */
#voicePanelBody .filter-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px 30px;padding-bottom:24px;border-bottom:1px solid var(--line)}
#voicePanelBody .filter-picture{min-width:0}
#voicePanelBody .filter-plot{position:relative;height:178px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:radial-gradient(ellipse at 50% 130%,color-mix(in srgb,var(--sound-hue,var(--orange)) 12%,transparent),transparent 70%),#0d0c0b}
#voicePanelBody #filterGraph{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#voicePanelBody #filterGraph:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
#filterGraph .fg-grid{stroke:#ffffff12;stroke-width:1;vector-effect:non-scaling-stroke}
#filterGraph .fg-zero{stroke:#ffffff26;stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
#filterGraph .fg-env{fill:color-mix(in srgb,var(--sound-hue,var(--orange)) 13%,transparent)}
#filterGraph .fg-area{fill:color-mix(in srgb,var(--sound-hue,var(--orange)) 17%,transparent)}
#filterGraph .fg-line{fill:none;stroke:var(--sound-hue,var(--orange));stroke-width:calc(1.6px + var(--heat,0) * 2.2px);vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 calc(var(--heat,0) * 7px) var(--sound-hue,var(--orange)))}
#filterGraph .fg-cut{stroke:color-mix(in srgb,var(--sound-hue,var(--orange)) 40%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
#voicePanelBody .filter-node{position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border:2px solid var(--sound-hue,var(--orange));border-radius:50%;background:#0d0c0b;box-shadow:0 0 0 4px color-mix(in srgb,var(--sound-hue,var(--orange)) 18%,transparent);pointer-events:none}
#voicePanelBody .filter-axis{position:absolute;bottom:5px;transform:translateX(4px);font:9px/1 var(--mono);letter-spacing:.06em;color:var(--quiet);pointer-events:none}
#voicePanelBody .filter-axis:last-of-type{transform:translateX(calc(-100% - 4px))}
#voicePanelBody .filter-line{margin:10px 0 0;font:12px/1.5 var(--sans,inherit);color:var(--muted)}
#voicePanelBody .filter-controls{display:flex;flex-direction:column;gap:20px;min-width:0}
#voicePanelBody .filter-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#voicePanelBody .filter-types button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:52px;padding:6px 4px 7px;border:1px solid var(--line);border-radius:3px;font:9px/1 var(--mono);letter-spacing:.07em;color:var(--muted)}
#voicePanelBody .filter-types svg{width:36px;height:20px}
#voicePanelBody .filter-types path{fill:none;stroke:currentColor;stroke-width:1.4}
#voicePanelBody .filter-types button[aria-pressed=true]{color:var(--ink);border-color:var(--sound-hue,var(--orange));background:color-mix(in srgb,var(--sound-hue,var(--orange)) 12%,transparent)}
#voicePanelBody .filter-types button[aria-pressed=true] path{stroke:var(--sound-hue,var(--orange))}
@media(hover:hover){#voicePanelBody .filter-types button:hover{color:var(--ink);border-color:var(--line-2)}}
#voicePanelBody .filter-parameters{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:0;border-bottom:0}
@media(max-width:720px){
  #voicePanelBody .filter-body{grid-template-columns:minmax(0,1fr)}
  #voicePanelBody .filter-plot{height:150px}
  #voicePanelBody .filter-types button{min-height:48px}
}

/* THE OUTPUT SECTION (ui/cx-output.js): the master chain and the master output, each in its sheet at the window's foot,
   their drawers' own spacing given up to the sheet's */
.cxo-sheet-body>.pd-drawer{margin:0;padding:0;border:0;background:none;scroll-margin-top:0}
.cxo-sheet-body>#drawerChain .rack-heading{justify-content:flex-start;margin:0 0 14px}

/* ---- the helpers (ui/cx-helpers.css; pd-helpers.js): the card asking for PLAY over the pattern, on its steps rather
   than its voices' names; under the pattern, in the stage's own margins, TRY; FIRST STEPS at the top of the field's
   column from 1180 px, and under 1180 under TRY, five to a row and on a phone two to a row (the shared rule) ---- */
.pd-pattern{position:relative;--cxh-card-shift:100px}
.pd-stage>.cxh-try{margin:8px 0 0;padding:8px 0}
.pd-stage>.cxh-steps{margin:0 0 4px;padding:10px 0 2px;border-top:1px solid var(--line)}
.pd-inspector>.cxh-steps{margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid var(--line)}
@media (min-width:721px){
  .pd-stage>.cxh-steps .cxh-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px 8px}
  .pd-stage>.cxh-steps .cxh-list button{align-items:start;min-height:44px}
}
@media (max-width:720px){
  .pd-pattern{--cxh-card-shift:56px}
}
/* the page's own small print a size up where only a finger points, as the frame's beside it (ui/cx-frame.css, its last
   rule; 1 Nov 2026, Cyrus, "Do all as you recommend", to the CS/M site's chat's "10–11 px on touch screens"): the
   pattern's bar and its LENGTH & SCALE row, the field's words and the LFOs' panel, the scope's line, the character's
   names and values, the drawers' badges, a voice's line, END and LANES, a step's marks and its editor's names, and the
   page's foot, at 10 px. Measured with a finger from 320 to 1180 px, a long kit's name in the strip, the field's LFOs
   open, LANES open and the grid at 1/32 to 1/128: nothing cut or over another. The sound view's words keep theirs (9
   and 9.5 px). The steps' numbers over the grid too since 2 Nov 2026 (the CS/M site's chat's find): they had kept 9 px
   because a phone's 320 px, turned from wider, held sixteen past its edge until the grid gave it its own eight a tenth
   of a second later, and the grid now does that at once as a width crosses 720 px (app.js). Since 2 Nov 2026 the SOUND
   lane's name and its changes, CAPTURE SOUND and RECALL, and the headings of the master chain's, REPEAT's and DEVINE's
   panels too, as the SONG window's and the master chain's own cards are (the shared parts, main's e1b45ca; Matter /
   Field's session found the master chain's heading left at 9 px), and their hints with them, DRAG A SLOT, OR USE ITS
   ARROWS, TO CHANGE THE ORDER among them: each its own span, which v1's studio.css sets at 9 px under 720 px (the CS/M
   site's chat found it in the chain's sheet); and, measured with a finger at 320, 390, 768 and 1024 px with each drawer
   and sheet open, LANES and the ratio picker too, VOICE over the grid, a step's ANCHOR, CLEAR and SOUND (9 px up to 390
   px in studio.css) and its SUBDIVIDE (9 px from 721 to 930), a ratio lane's GRID and its ratios, REPEAT's SIZE, a
   voice's LANES (their modes, menus and tools, ACCENT, the count of hits), the ratio picker's words, and the guide's
   small headings. Last in the file, so it comes after each word's rules */
@media (pointer:coarse){
  .pd-toolbar .pd-k,#pageLabel,.pd-fold-button,.pd-toolbar-deep .pd-k,.pd-toolbar-deep #endUnit,.pd-toolbar-deep #loopStatus,
  .pd-panel-head .eyebrow,.pd-inspector .field-top,.pd-inspector .field-bottom,.pd-inspector .field-corner,.pd-inspector .scope-wrap>div,
  .flp-close,.flp-rate,.flp-depth>span,.macro-top,.drawer-tab b,.step-control>span,.sequence-footer,footer,
  #tracks .voice-sub small,#tracks .ln-toggle,#tracks .ln-toggle b,#tracks .track-end,#tracks .track-end select,#tracks .step .step-meta,
  #tracks .rl-head,#tracks .sl-name small,#tracks .sl-name output,#tracks .sl-seg>span,.pd-inspector .snapshot button,
  #drawerChain .rack-heading,#drawerRepeat .rack-heading,#drawerDevine .rack-heading,
  #drawerChain .rack-heading>span,#drawerRepeat .rack-heading>span,#drawerDevine .rack-heading>span,
  .pd-stage .ruler-label,.pd-stage .ruler #stepNumbers,.pd-step .micro-title .text-button,.pd-step .micro-tools>label,#tracks .rl-run,#tracks .rl-run :is(b,i),
  .repeat-size .pd-k,
  #tracks .ln-mode,#tracks .ln-head output,#tracks .ln-head select,#tracks .ln-line,#tracks .ln-tools .text-button,
  .ratio-picker .rp-head .eyebrow,.ratio-picker .rp-group>.micro,.ratio-picker .rp-ratio small,.ratio-picker .rp-ratio em,
  .ratio-picker .rp-extra .small-button span,.pd-guide .guide-head .eyebrow,.guide-section-label,.guide-part h4{font-size:10px}
}
/* HOLD (ui/cx-env.js), the devices' second shape for an envelope (2 Nov 2026): each envelope card's head with its shape,
   ADSR or HOLD, and HOLD's editor in the voice's own hue */
.mod-card .env-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.mod-card .env-top h4{margin:0}
.env-shape{display:inline-flex;flex:none;border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.env-shape button{font:600 10px/1 var(--mono);letter-spacing:.1em;padding:6px 8px;min-height:26px;color:var(--muted);background:transparent;border:0;cursor:pointer}
.env-shape button+button{border-left:1px solid var(--line-2)}
.env-shape button[aria-pressed=true]{color:var(--ink);background:color-mix(in srgb,var(--hue,var(--orange)) 16%,transparent);box-shadow:inset 0 -2px var(--hue,var(--orange))}
.env-shape button:focus-visible{outline:2px solid var(--hue,var(--orange));outline-offset:-2px}
.env-hold{--cxe-hue:var(--hue,var(--orange));--cxe-mono:var(--mono);--cxe-ink:var(--ink);--cxe-muted:var(--muted);--cxe-line:var(--line);--cxe-well:var(--well);margin:0 0 10px}
@media (pointer:coarse){.env-shape button{min-height:36px;padding:8px 10px}}