/* The master chain's page, the same on every device's (cx-chain.js): the rack's four slots and the output channel's
   panels. Its colours and type are the device's own, through the frame's properties every page sets (--cxf-*, ui/
   cx-frame.css), and a few of its own below for a device to set beside them (--cx-panel, --cx-well and the meters'); what
   follows them are Polite Disorder's, where these were first. Each rule names its part, so a page's own rules for every
   button, select or slider give way to it. */
.cxc-rack,.cxc-channel{--cxc-ink:var(--cxf-ink,#ece7dc);--cxc-muted:var(--cxf-muted,#a69f93);--cxc-quiet:var(--cxf-quiet,#80796e);
  --cxc-line:var(--cxf-line,#34312c);--cxc-line-2:var(--cxf-line-2,#4b4740);--cxc-accent:var(--cxf-accent,#ff6326);
  --cxc-mono:var(--cxf-mono,monospace);--cxc-sans:var(--cxf-sans,sans-serif);--cxc-panel:var(--cx-panel,#191816);
  --cxc-well:var(--cx-well,#0c0b0a);--cxc-grid:color-mix(in srgb,var(--cxc-line) 72%,transparent);
  --cxc-in:var(--cx-meter-in,#d8d4c0);--cxc-limit:var(--cx-meter-limit,#b7a1d0);--cxc-out:var(--cx-meter-out,#88b6a6);
  --cxc-warm:var(--cx-warm,#d4bc8f)}

/* ---------- the rack: two slots a row, one on a phone ---------- */
.cxc-rack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cxc-rack .cxc-card{min-width:0;padding:18px;border:1px solid var(--cxc-line);border-radius:4px;background:var(--cxc-panel)}
.cxc-rack .cxc-card.cxc-bypassed{opacity:.8}
.cxc-rack .cxc-card-top{display:flex;align-items:center;gap:8px;margin-bottom:11px;font:11px var(--cxc-mono);color:var(--cxc-muted)}
.cxc-rack .cxc-card-top>span{color:var(--cxc-accent)}
.cxc-rack .cxc-card-top>button{background:none;border:0;color:inherit;cursor:pointer;font-family:var(--cxc-mono)}
.cxc-rack .cxc-card-top>button:disabled{opacity:.3;cursor:default}
.cxc-rack .cxc-grip{padding:0;font-size:20px;color:var(--cxc-muted);cursor:grab}
.cxc-rack .cxc-on{margin-left:auto;font-size:11px;letter-spacing:.05em}
.cxc-rack .cxc-move{padding:0 4px;font-size:20px;line-height:1}
/* a finger's size where nothing points but a finger: a card's grip and its ‹ › (15 to 20 px across before) */
@media(pointer:coarse){.cxc-rack .cxc-grip,.cxc-rack .cxc-move{min-width:36px;min-height:36px;padding:0}}
.cxc-rack .cxc-type{width:100%;margin:0 0 12px;font-size:13px;border-color:var(--cxc-line-2)}
/* a master chain's STARTING POINT, the whole chain's presets, across its top */
.cxc-rack .cxc-rack-head{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.cxc-rack .cxc-rack-head .cxc-preset{display:flex;align-items:center;gap:12px;font:12px var(--cxc-mono);color:var(--cxc-muted)}
.cxc-rack .cxc-rack-head select{min-width:0;max-width:320px;min-height:34px;font-size:12px}
.cxc-rack .cxc-rack-head .cxc-preset-line{flex:1 1 220px;margin:0;font:12px/1.55 var(--cxc-sans);color:var(--cxc-muted)}
/* its own switch, CHAIN ON / OFF, before STARTING POINT as CHANNEL is in the channel's head (2 Nov 2026, Cyrus: "an actual
   bypass button next to the master FX chain"), in the channel's switch's look; off, every card dimmed as an effect off
   is, each keeping its own ON */
.cxc-rack .cxc-rack-head .cxc-power{align-self:center;min-height:34px;padding:6px 0;border:0;background:none;font:10px/1.2 var(--cxc-mono);
  letter-spacing:.09em;white-space:nowrap;color:var(--cxc-muted);cursor:pointer;transition:color .15s}
@media (hover:hover){.cxc-rack .cxc-rack-head .cxc-power:hover{color:var(--cxc-ink)}}
.cxc-rack .cxc-rack-head .cxc-power.cxc-active{color:var(--cxc-accent)}
/* on a phone, STARTING POINT over its menu and the menu the row's width, as the channel's head has them, so a long name
   (a device's own, one device / LEAD SPACE) stays whole at 320 px */
@media (max-width:620px){.cxc-rack .cxc-rack-head .cxc-preset{width:100%;flex-direction:column;align-items:flex-start;gap:8px}
  .cxc-rack .cxc-rack-head select{width:100%;max-width:none}}
.cxc-rack.cxc-rack-off .cxc-card{opacity:.8}
.cxc-rack.cxc-rack-off .cxc-card-top>span,.cxc-rack.cxc-rack-off .cxc-on,.cxc-rack.cxc-rack-off .cxc-signal output{color:var(--cxc-muted)}
.cxc-rack.cxc-rack-off .cxc-response svg,.cxc-rack.cxc-rack-off .cxc-audio,.cxc-rack.cxc-rack-off .cxc-range input,
.cxc-rack.cxc-rack-off .cxc-motion-wave{opacity:.5}
/* its type and, on a master chain's card, its PRESETS beside it, each half */
.cxc-rack .cxc-heads{display:flex;gap:8px;margin:0 0 12px}
.cxc-rack .cxc-heads>select{flex:1 1 0;min-width:0;margin:0}
.cxc-rack .cxc-fxpreset{font-size:13px;border-color:var(--cxc-line-2)}
.cxc-rack .cxc-response{position:relative;margin-bottom:18px;padding:10px 10px 22px;border:1px solid var(--cxc-line);background:var(--cxc-well)}
.cxc-rack .cxc-response svg{display:block;width:100%;height:78px;overflow:hidden}
.cxc-rack .cxc-response>span{position:absolute;bottom:7px;left:10px;font:9px var(--cxc-mono);letter-spacing:.06em;color:var(--cxc-muted)}
.cxc-rack .cxc-grid{fill:none;stroke:var(--cxc-grid);stroke-width:.7}
.cxc-rack .cxc-curve{fill:none;stroke:var(--cxc-accent);stroke-width:1.5;vector-effect:non-scaling-stroke}
/* where an effect's two sides differ (a SPREAD, a SATURATION's sides), the second drawn quieter beside the first */
.cxc-rack .cxc-curve.cxc-second{stroke:var(--cxc-warm);stroke-dasharray:3 2}
.cxc-rack .cxc-reflection{fill:none;stroke:var(--cxc-warm);stroke-width:1;opacity:.65}
.cxc-rack .cxc-marker{stroke:var(--cxc-muted);stroke-dasharray:2 4;stroke-width:.8}
.cxc-rack .cxc-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.cxc-rack .cxc-control{min-width:0;margin:0}
.cxc-rack .cxc-control>span{font:10px var(--cxc-mono);color:var(--cxc-muted)}
.cxc-rack .cxc-range{display:flex;flex-direction:column;gap:9px}
.cxc-rack .cxc-range>span{display:flex;justify-content:space-between;gap:8px;letter-spacing:.025em}
.cxc-rack .cxc-range output{color:var(--cxc-ink);font-variant-numeric:tabular-nums}
.cxc-rack .cxc-range input{width:100%;margin:2px 0 5px}
.cxc-rack .cxc-choice{display:flex;flex-direction:column;gap:8px}
.cxc-rack .cxc-choice select{max-width:100%;min-height:27px;padding:3px 20px 3px 7px;font:11px var(--cxc-mono)}
.cxc-rack .cxc-control input:disabled,.cxc-rack .cxc-control select:disabled{opacity:.3}
.cxc-rack .cxc-control[data-key=mix],.cxc-rack .cxc-control[data-key=output]{padding-top:13px;border-top:1px solid var(--cxc-line)}
.cxc-rack .cxc-control[data-key=mix]{grid-column:1}
.cxc-rack .cxc-control[data-key=output]{grid-column:2}
.cxc-rack .cxc-signal{margin-top:15px;padding-top:9px;border-top:1px solid var(--cxc-line)}
.cxc-rack .cxc-signal>div{display:flex;justify-content:space-between;gap:8px;font:9px var(--cxc-mono);color:var(--cxc-muted)}
.cxc-rack .cxc-signal output{color:var(--cxc-accent)}
.cxc-rack .cxc-audio{display:block;width:100%;height:35px;margin-top:5px}
/* an effect switched off, and the output channel (19 Oct 2026, of Matter / Field's second pass: "Do all six as
   recommended"): its words at least 4.5 to 1 against their ground on both devices' colours, where at .55 they were about
   3 to 1 and its pictures' names under 2; its orange words grey, its picture and its sound's trace dimmer still */
.cxc-rack .cxc-card.cxc-bypassed .cxc-card-top>span,.cxc-rack .cxc-card.cxc-bypassed .cxc-signal output{color:var(--cxc-muted)}
.cxc-rack .cxc-card.cxc-bypassed .cxc-response svg,.cxc-rack .cxc-card.cxc-bypassed .cxc-audio,
.cxc-rack .cxc-card.cxc-bypassed .cxc-range input{opacity:.5}
/* MOTION (1 Nov 2026): a card's own LFO, its switch, what it moves and its shape, the dot riding the shape while it
   runs; its settings below, on, in the card's two columns */
.cxc-rack .cxc-motion{margin-top:15px;padding-top:11px;border-top:1px solid var(--cxc-line)}
.cxc-rack .cxc-motion-head{display:flex;align-items:center;gap:10px;min-width:0;font:10px var(--cxc-mono);color:var(--cxc-muted)}
.cxc-rack .cxc-motion-on{flex:none;padding:5px 9px;border:1px solid var(--cxc-line-2);border-radius:3px;background:none;color:var(--cxc-muted);
  font:10px var(--cxc-mono);letter-spacing:.08em;cursor:pointer}
.cxc-rack .cxc-motion-on[aria-pressed=true]{border-color:var(--cxc-accent);color:var(--cxc-accent)}
.cxc-rack .cxc-motion-head>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.04em}
.cxc-rack .cxc-moving .cxc-motion-head>span{color:var(--cxc-ink)}
.cxc-rack .cxc-motion-wave{flex:none;width:60px;height:20px;overflow:visible}
.cxc-rack .cxc-motion-wave path{fill:none;stroke:var(--cxc-quiet);stroke-width:1;vector-effect:non-scaling-stroke}
.cxc-rack .cxc-moving .cxc-motion-wave path{stroke:var(--cxc-muted)}
.cxc-rack .cxc-motion-wave circle{fill:var(--cxc-quiet)}
.cxc-rack .cxc-moving .cxc-motion-wave circle{fill:var(--cxc-accent)}
.cxc-rack .cxc-card.cxc-bypassed .cxc-motion-wave{opacity:.5}
.cxc-rack .cxc-motion-controls{margin-top:14px}
@media(pointer:coarse){.cxc-rack .cxc-motion-on{min-height:36px;padding:0 12px}}
@media (hover:hover){.cxc-rack .cxc-motion-on:hover{color:var(--cxc-ink)}}
@media (max-width:930px){.cxc-rack .cxc-move{padding:0 2px}}
@media (max-width:930px) and (min-width:721px){.cxc-rack .cxc-card-top{gap:5px}}
@media (max-width:600px){.cxc-rack{grid-template-columns:1fr}.cxc-rack .cxc-card{padding:16px}.cxc-rack .cxc-controls{gap:18px 20px}
  .cxc-rack .cxc-response svg{height:73px}}
@media (max-width:390px){.cxc-rack .cxc-card-top{gap:5px}}

/* ---------- the output channel: its heading and starting point, its meters, its three panels ---------- */
.cxc-channel{display:block;margin:0;padding:0;border:0;color:var(--cxc-ink)}
.cxc-channel .cxc-channel-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}
.cxc-channel .cxc-channel-heading>div:last-child{display:flex;align-items:center;gap:24px}
.cxc-channel .cxc-label{font:10px var(--cxc-mono);letter-spacing:.12em;white-space:nowrap;color:var(--cxc-ink)}
.cxc-channel .cxc-toggle,.cxc-channel .cxc-peak{padding:6px 0;border:0;background:none;font:10px/1.2 var(--cxc-mono);letter-spacing:.09em;white-space:nowrap;
  color:var(--cxc-muted);cursor:pointer;transition:color .15s}
@media (hover:hover){.cxc-channel .cxc-toggle:hover,.cxc-channel .cxc-peak:hover{color:var(--cxc-ink)}}
.cxc-channel .cxc-toggle.cxc-active{color:var(--cxc-accent)}
.cxc-channel .cxc-preset{display:flex;align-items:center;gap:12px;font:12px var(--cxc-mono);color:var(--cxc-muted)}
.cxc-channel .cxc-preset select{max-width:360px;min-height:34px;font-size:12px}
.cxc-channel .cxc-preset-line{margin:14px 0 22px;font:12px/1.55 var(--cxc-sans);color:var(--cxc-muted)}
.cxc-channel .cxc-meters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;padding:18px 0;border-top:1px solid var(--cxc-line);
  border-bottom:1px solid var(--cxc-line)}
.cxc-channel .cxc-meter>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px;font:12px var(--cxc-mono)}
.cxc-channel .cxc-meter>div:first-child>span{color:var(--cxc-muted)}
.cxc-channel .cxc-meter output{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--cxc-ink)}
.cxc-channel .cxc-meter-track{height:6px;overflow:hidden;background:repeating-linear-gradient(90deg,var(--cxc-grid) 0,var(--cxc-grid) calc(10% - 2px),
  transparent calc(10% - 2px),transparent 10%)}
.cxc-channel .cxc-meter-track i{display:block;width:0;height:100%;background:var(--cxc-in);transition:width .065s linear}
.cxc-channel .cxc-gr i{background:var(--cxc-accent)}
.cxc-channel .cxc-limit i{background:var(--cxc-limit)}
.cxc-channel .cxc-out i{background:var(--cxc-out)}
/* the scale's marks four spaces apart, and spread across the meter where that would not fit on one line */
.cxc-channel .cxc-meter small{display:flex;column-gap:calc(4ch + .2em);margin-top:8px;font:10px var(--cxc-mono);letter-spacing:.05em;white-space:nowrap;color:var(--cxc-quiet)}
@media (max-width:1020px){.cxc-channel .cxc-meter small{justify-content:space-between;column-gap:.5ch}}
.cxc-channel .cxc-history{display:grid;grid-template-columns:140px minmax(0,1fr) 130px;gap:20px;align-items:center;padding:16px 0 22px;
  font:11px/1.5 var(--cxc-mono);color:var(--cxc-muted)}
.cxc-channel .cxc-history span i{font-style:normal;color:var(--cxc-accent)}
.cxc-channel .cxc-history span em{font-style:normal;color:var(--cxc-limit)}
.cxc-channel .cxc-history svg{display:block;width:100%;height:40px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),
  var(--cxc-grid) calc(10% - 1px),var(--cxc-grid) 10%)}
.cxc-channel .cxc-history path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.cxc-channel .cxc-history-comp{stroke:var(--cxc-accent)}
.cxc-channel .cxc-history-limit{stroke:var(--cxc-limit)}
.cxc-channel .cxc-peak{font-size:11px;line-height:1.5;text-align:right}
.cxc-channel .cxc-peak output{display:block;color:var(--cxc-ink)}
.cxc-channel .cxc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cxc-channel .cxc-panel{min-width:0;padding:20px;border:1px solid var(--cxc-line);background:var(--cxc-panel)}
.cxc-channel .cxc-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:19px}
.cxc-channel .cxc-panel h3{margin:0;font:400 13px var(--cxc-mono);letter-spacing:.06em;color:var(--cxc-ink)}
.cxc-channel .cxc-panel-heading>span{font:11px var(--cxc-mono);color:var(--cxc-muted)}
.cxc-channel .cxc-picks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cxc-channel .cxc-pick{display:flex;flex-direction:column;gap:9px;min-width:0;font:12px var(--cxc-mono);color:var(--cxc-muted)}
.cxc-channel .cxc-pick select{width:100%;min-width:0;min-height:34px;padding-left:7px;font-size:12px}
.cxc-channel .cxc-key-hue{display:inline-block;width:8px;height:8px;margin-left:8px;vertical-align:1px}.cxc-channel .cxc-key-hue[hidden]{display:none}
.cxc-channel .cxc-curve-view{display:block;width:100%;height:85px;margin:18px 0 22px;overflow:hidden;border:1px solid var(--cxc-line);background:var(--cxc-well)}
.cxc-channel .cxc-curve-view path,.cxc-channel .cxc-curve-view line{fill:none;stroke-width:1.3;vector-effect:non-scaling-stroke}
.cxc-channel .cxc-curve-view line{stroke:var(--cxc-grid)}
.cxc-channel .cxc-reference{stroke:var(--cxc-line-2);stroke-dasharray:3 4}
.cxc-channel .cxc-colour-line{stroke:var(--cxc-warm)}
.cxc-channel .cxc-comp-line{stroke:var(--cxc-accent)}
.cxc-channel .cxc-comp-dot{fill:var(--cxc-ink)}
.cxc-channel .cxc-settings{display:grid;grid-template-columns:1fr 1fr;gap:21px 20px}
.cxc-channel .cxc-setting{display:flex;flex-direction:column;gap:13px;min-width:0}
.cxc-channel .cxc-setting>span{display:flex;justify-content:space-between;gap:7px;font:12px var(--cxc-mono);white-space:nowrap;color:var(--cxc-muted)}
.cxc-channel .cxc-setting output{display:inline-block;margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;color:var(--cxc-ink)}
/* a value keeps its room (22 Oct 2026, Cyrus: "changing amounts of digits shouldnt move interface positioning"): as wide
   as the longest it is ever written, its data-room under it unseen, so where a name and its value share a line they
   share it whatever it reads, and where they cannot, the value has its own line whatever it reads, at its right like
   the rest */
.cxc-channel .cxc-setting output::after{content:attr(data-room);display:block;height:0;overflow:hidden;visibility:hidden}
.cxc-channel .cxc-setting input{width:100%;margin:3px 0 7px}
.cxc-channel .cxc-more{margin-top:21px;padding-top:15px;border-top:1px solid var(--cxc-line)}
.cxc-channel .cxc-more summary{font:12px/1.6 var(--cxc-mono);color:var(--cxc-muted);cursor:pointer}
.cxc-channel .cxc-more .cxc-settings{padding-top:20px}
.cxc-channel .cxc-auto{margin-top:18px}
.cxc-channel .cxc-help{margin:17px 0 0;font:12px/1.55 var(--cxc-sans);color:var(--cxc-muted)}
.cxc-channel .cxc-key{margin-top:24px}
.cxc-channel .cxc-limiter-heading{margin-top:23px;padding-top:23px;border-top:1px solid var(--cxc-line-2)}
.cxc-channel .cxc-limiter-note{margin-top:18px;font:12px/1.55 var(--cxc-sans);color:var(--cxc-muted)}
.cxc-channel .cxc-channel-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px;margin-top:15px;font:11px/1.6 var(--cxc-mono);color:var(--cxc-muted)}
.cxc-channel .cxc-route{color:var(--cxc-ink)}
.cxc-channel.cxc-listening [data-toggle=listen]{padding:4px 7px;outline:1px solid var(--cxc-accent)}
.cxc-channel.cxc-off .cxc-panel:nth-child(-n+2){opacity:.8}
.cxc-channel.cxc-off .cxc-panel:nth-child(-n+2) .cxc-toggle.cxc-active{color:var(--cxc-muted)}
.cxc-channel.cxc-off .cxc-panel:nth-child(-n+2) input[type=range]{opacity:.5}
@media (max-width:1380px){.cxc-channel .cxc-cards{gap:13px}.cxc-channel .cxc-panel{padding:16px}.cxc-channel .cxc-settings{gap:20px 14px}
  .cxc-channel .cxc-setting>span{white-space:normal;flex-wrap:wrap}.cxc-channel .cxc-setting output{white-space:nowrap}
  .cxc-channel .cxc-preset select{max-width:320px}}
@media (max-width:1000px){.cxc-channel .cxc-cards{grid-template-columns:1fr 1fr}
  .cxc-channel .cxc-panel:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
  .cxc-channel .cxc-panel:last-child .cxc-panel-heading:first-child,.cxc-channel .cxc-panel:last-child .cxc-limiter-heading,
  .cxc-channel .cxc-panel:last-child .cxc-help{grid-column:1/-1}
  .cxc-channel .cxc-panel:last-child .cxc-key{margin-top:0}
  .cxc-channel .cxc-channel-heading{align-items:flex-start}
  .cxc-channel .cxc-channel-heading>div:last-child{flex-wrap:wrap;justify-content:flex-end;gap:12px}
  .cxc-channel .cxc-preset{flex-direction:column;gap:8px;align-items:flex-end}
  .cxc-channel .cxc-meters{gap:16px}.cxc-channel .cxc-meter>div:first-child{flex-direction:column;align-items:flex-start;gap:7px}
  .cxc-channel .cxc-meter small{font-size:9px}.cxc-channel .cxc-history{grid-template-columns:120px minmax(0,1fr) 90px;gap:14px}}
@media (max-width:620px){.cxc-channel .cxc-channel-heading{display:block}
  .cxc-channel .cxc-channel-heading>div:last-child{margin-top:17px;justify-content:space-between;gap:15px;align-items:flex-start}
  .cxc-channel .cxc-preset{width:100%;order:2;align-items:flex-start}.cxc-channel .cxc-preset select{width:100%;max-width:none}
  .cxc-channel .cxc-meters{grid-template-columns:1fr 1fr;gap:22px}
  .cxc-channel .cxc-meter>div:first-child{flex-direction:row;gap:6px;font-size:11px}.cxc-channel .cxc-meter small{font-size:9px}
  .cxc-channel .cxc-history{grid-template-columns:90px minmax(0,1fr) 78px;gap:10px;font-size:10px}.cxc-channel .cxc-peak{font-size:10px}
  .cxc-channel .cxc-cards{grid-template-columns:1fr;gap:17px}.cxc-channel .cxc-panel{padding:18px}
  .cxc-channel .cxc-panel:last-child{display:block;grid-column:auto}.cxc-channel .cxc-panel:last-child .cxc-key{margin-top:24px}
  .cxc-channel .cxc-setting>span{flex-wrap:nowrap}.cxc-channel .cxc-settings{column-gap:19px}
  .cxc-channel .cxc-channel-foot{font-size:10px}}
/* on a phone the menus take a row each: two to a row, FOLD / COMPLEX and COLOUR · COMP ran under their arrows */
@media (max-width:480px){.cxc-channel .cxc-picks{grid-template-columns:1fr}}
/* the small print where only a finger points, a size up as the frame's (cx-frame.css, its last rule; 1 Nov 2026, the CS/M
   site's chat's pass, Cyrus: "Do all you can as recommended"): a card's response label and its signal row, and the
   meters' scale where a narrow width sets it at 9 px, at 10 px. Last in the file, after the widths' rules */
@media(pointer:coarse){.cxc-rack .cxc-response>span,.cxc-rack .cxc-signal>div,.cxc-channel .cxc-meter small{font-size:10px}}