/* The output section (cx-output.js), the same on every device's page: a strip held at the window's foot, reading as the
   sound goes (what feeds it, the master chain, the master output, out, and the level going out), and the sheet each stage
   opens above it. In the frame's colours (--cxf-*, cx-frame.css), so it is the device's own; --cxo-h, its height, kept
   clear at the foot of the page and of the frame's full-height windows. */
.cxo{position:fixed;left:0;right:0;bottom:0;z-index:65;display:flex;flex-direction:column-reverse;max-height:100%;pointer-events:none}
.cxo>*{pointer-events:auto}
.cxo[hidden]{display:none}
body.cxo-on{padding-bottom:var(--cxo-h,56px)}
body.cxo-on .cxs-song{bottom:var(--cxo-h,0px)}
/* a control brought into view (by Tab, or a page scrolling to it) stops above the strip, not under it */
:root{scroll-padding-bottom:var(--cxo-h,0px)}

/* the strip: the stages in a row, an arrow between each */
.cxo-bar{display:flex;align-items:center;gap:0;min-height:56px;margin:0;padding:5px var(--cxf-pad,24px) calc(5px + env(safe-area-inset-bottom,0px));
  background:var(--cxo-bg,var(--cxf-strip,#151a1c));border-top:1px solid var(--cxf-line,#343d42);box-shadow:0 -12px 28px rgba(0,0,0,.32);
  box-sizing:border-box;overflow:hidden}
.cxo-from,.cxo-to{display:flex;align-items:center;flex:none;font:9px/1 var(--cxf-mono,monospace);letter-spacing:.16em;color:var(--cxf-quiet,#829298);
  white-space:nowrap}
.cxo-flow{display:flex;align-items:center;flex:0 0 40px;padding:0 9px;box-sizing:border-box;color:var(--cxf-line-2,#4b585e)}
.cxo-flow svg{display:block;width:100%;height:10px;fill:none;stroke:currentColor;stroke-width:1.2;overflow:visible}
/* a stage: its box (a hairline drawn inside it, so it takes no room), its switch at the left edge where it has one, and
   the button that opens its sheet */
.cxo-stage{display:flex;align-items:stretch;flex:none;min-width:0;height:46px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--cxf-line,#343d42)}
.cxo-part{display:grid;grid-template-columns:auto;grid-template-areas:"name" "say";align-content:center;justify-items:start;row-gap:6px;flex:none;
  min-width:0;height:100%;margin:0;padding:0 13px;border:0;border-radius:3px;background:none;box-sizing:border-box;
  color:var(--cxf-ink,#e7e2d8);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* its switch (2 Nov 2026, Cyrus: "an actual bypass button next to the master FX chain and also one next to the master
   out. and clearly state on or off"), as a pedal has its footswitch: a light over its state, ON lit in the accent as the
   lit chips are, OFF in grey; its room the same either way, so nothing moves as it is pressed */
.cxo-power{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:none;min-width:40px;height:100%;margin:0;
  padding:0 9px;border:0;border-radius:3px 0 0 3px;box-shadow:inset -1px 0 0 var(--cxf-line,#343d42);background:none;box-sizing:border-box;
  color:var(--cxf-quiet,#829298);font:700 9px/1 var(--cxf-mono,monospace);letter-spacing:.12em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cxo-power .cxo-light{display:block;width:7px;height:7px;border-radius:50%;background:var(--cxf-line-2,#4b585e)}
.cxo-power .cxo-state{display:block;white-space:nowrap}
/* (its look its own whatever a page gives its pressed buttons: Matter / Field's tint them and their edge) */
.cxo-power[aria-pressed=true]{color:var(--cxf-accent,#ed9369);background:none;border:0;box-shadow:inset -1px 0 0 var(--cxf-line,#343d42)}
.cxo-power[aria-pressed=true] .cxo-light{background:var(--cxf-accent,#ed9369);box-shadow:0 0 0 3px var(--cxf-accent-soft,#ed936912)}
.cxo-stage.has-power .cxo-part{border-radius:0 3px 3px 0}
/* off, the box says BYPASSED in grey and its chips dim, kept in sight: what comes back as it is turned on. Its words keep
   the room of the longer of the two, unseen (data-room, cx-output.js), so the box keeps its width as it is pressed */
.cxo-stage.is-off .cxo-part .cxo-say{color:var(--cxf-muted,#a2adb0)}
.cxo-stage.is-off .cxo-part .cxo-chips{opacity:.5}
.cxo-part .cxo-say[data-room]::after{content:attr(data-room);display:block;height:0;overflow:hidden;visibility:hidden}
.cxo-part.has-chips{grid-template-columns:auto auto;grid-template-areas:"name name" "say chips";column-gap:12px}
.cxo-part .cxo-name{grid-area:name;font:9px/1 var(--cxf-mono,monospace);letter-spacing:.16em;color:var(--cxf-muted,#a2adb0);white-space:nowrap}
.cxo-part .cxo-say{grid-area:say;font:700 11px/1 var(--cxf-mono,monospace);letter-spacing:.08em;color:var(--cxf-ink,#e7e2d8);white-space:nowrap}
.cxo-part .cxo-chips{grid-area:chips;display:flex;align-items:center;gap:4px}
.cxo-part .cxo-chips i{display:block;padding:2px 5px;border:1px solid var(--cxf-line,#343d42);border-radius:2px;font:9px/1 var(--cxf-mono,monospace);
  font-style:normal;letter-spacing:.1em;color:var(--cxf-quiet,#829298);white-space:nowrap}
.cxo-part .cxo-chips i.is-on{border-color:var(--cxf-accent-line,#ed93696b);color:var(--cxf-accent,#ed9369)}
@media (hover:hover){.cxo-stage:hover{box-shadow:inset 0 0 0 1px var(--cxf-line-2,#4b585e)}.cxo-power:hover{background:var(--cxf-accent-soft,#ed936912)}}
.cxo-stage.is-open{box-shadow:inset 0 0 0 1px var(--cxf-accent,#ed9369);background:var(--cxf-accent-soft,#ed936912)}
.cxo-part[aria-expanded=true] .cxo-name{color:var(--cxf-accent,#ed9369)}
.cxo-part:focus-visible,.cxo-power:focus-visible{outline:2px solid var(--cxf-accent,#ed9369);outline-offset:-3px}
.cxo-close:focus-visible{outline:2px solid var(--cxf-accent,#ed9369);outline-offset:2px}
.cxo-out{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
/* the meter: the left over the right, each its ranges in their colours (the body of the sound to -12 dB, loud to -3, the
   last 3 dB; IEC 60268-18's scale, CXOutput.deflect), dim where nothing reaches, the loudest of the last moments a mark,
   and the scale's marks under them in dB below full scale. Devices may set its colours: --cxo-ok, --cxo-loud, --cxo-hot
   and --cxo-clip */
.cxo-meter{--cxo-zones:linear-gradient(90deg,var(--cxo-ok,#c9c2a6) 0 70%,var(--cxo-loud,#e2bf68) 70% 92.5%,var(--cxo-hot,var(--cxf-accent,#ed9369)) 92.5%);
  position:relative;display:grid;align-content:center;row-gap:2px;flex:0 1 240px;min-width:40px;height:30px}
.cxo-ch{position:relative;display:block;height:3px;border-radius:1px;overflow:hidden}
.cxo-ch::before{content:"";position:absolute;inset:0;background:var(--cxo-zones);opacity:.26}
.cxo-ch .cxo-lit{position:absolute;inset:0;display:block;background:var(--cxo-zones);clip-path:inset(0 100% 0 0)}
.cxo-ch .cxo-hold{position:absolute;inset:0;display:block;transform:translateX(0);pointer-events:none}
.cxo-ch .cxo-hold::after{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--cxf-ink,#e7e2d8);opacity:0}
.cxo-ch .cxo-hold.is-on::after{opacity:.9}
.cxo-scale{position:relative;display:block;height:9px;margin-top:3px}
.cxo-scale i{position:absolute;top:0;transform:translateX(-50%);font:9px/1 var(--cxf-mono,monospace);font-style:normal;letter-spacing:0;
  color:var(--cxf-quiet,#829298);font-variant-numeric:tabular-nums}
.cxo-scale i:last-child{transform:translateX(-100%)}
.cxo-scale i[hidden]{display:none}
.cxo-meter.is-bare .cxo-scale{display:none}
/* the loudest peak since it was pressed, in its range's colour, and CLIP beside it, lit once anything reaches full scale */
.cxo-peak{display:inline-flex;align-items:center;gap:7px;flex:none;height:30px;margin:0;padding:0 9px;border:1px solid var(--cxf-line,#343d42);border-radius:3px;
  background:none;color:var(--cxf-muted,#a2adb0);font:9px/1 var(--cxf-mono,monospace);letter-spacing:.12em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cxo-peak .cxo-most{display:inline-block;min-width:5ch;text-align:right;font:700 11px/1 var(--cxf-mono,monospace);letter-spacing:0;
  font-variant-numeric:tabular-nums;color:var(--cxf-ink,#e7e2d8)}
.cxo-peak[data-zone=loud] .cxo-most{color:var(--cxo-loud,#e2bf68)}
.cxo-peak[data-zone=hot] .cxo-most{color:var(--cxo-hot,var(--cxf-accent,#ed9369))}
.cxo-peak .cxo-clip{padding:3px 4px;border-radius:2px;color:var(--cxf-quiet,#829298)}
.cxo-peak.is-clipped{border-color:var(--cxo-clip,#ff4b3e)}
.cxo-peak.is-clipped .cxo-most{color:var(--cxo-clip,#ff4b3e)}
.cxo-peak.is-clipped .cxo-clip{background:var(--cxo-clip,#ff4b3e);color:#fff}
@media (hover:hover){.cxo-peak:hover{border-color:var(--cxf-line-2,#4b585e)}}
.cxo-peak:focus-visible{outline:2px solid var(--cxf-accent,#ed9369);outline-offset:2px}

/* the sheet: the stage's own panel over the foot of the page, the page behind it left as it is */
.cxo-sheet{display:flex;flex-direction:column;min-height:0;max-height:min(62vh,720px);background:var(--cxf-strip,#151a1c);
  border-top:1px solid var(--cxf-line-2,#4b585e);box-shadow:0 -24px 48px rgba(0,0,0,.42)}
.cxo-sheet[hidden]{display:none}
.cxo-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;margin:0;padding:14px var(--cxf-pad,24px) 12px;
  border-bottom:1px solid var(--cxf-line,#343d42)}
.cxo-sheet-name{margin:0;font:800 15px/1 var(--cxf-sans,sans-serif);letter-spacing:.04em;color:var(--cxf-ink,#e7e2d8)}
.cxo-sheet-line{margin:7px 0 0;font:12px/1.4 var(--cxf-sans,sans-serif);color:var(--cxf-muted,#a2adb0)}
.cxo-sheet-line:empty{display:none}
.cxo-close{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:40px;margin:0;padding:0 14px;border:1px solid var(--cxf-line,#343d42);
  border-radius:3px;background:none;color:var(--cxf-ink,#e7e2d8);font:9px/1 var(--cxf-mono,monospace);letter-spacing:.14em;cursor:pointer}
.cxo-close svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
@media (hover:hover){.cxo-close:hover{border-color:var(--cxf-line-2,#4b585e)}}
.cxo-sheet-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px var(--cxf-pad,24px) 22px}
.cxo-sheet-body>[hidden]{display:none!important}

/* a tablet: the chips of a stage go, its words stay */
@media (max-width:900px){
  .cxo-part.has-chips{grid-template-columns:auto;grid-template-areas:"name" "say"}
  .cxo-part .cxo-chips{display:none}
}
/* narrower than a tablet: the stages and the level going out alone, what feeds them and OUT left out (from 561 px they
   had come back with no room for them, OUT up to 54 px past the bar's edge until about 654 px with the longest words:
   25 Oct 2026, every width measured on both devices' pages) */
@media (max-width:767px){
  .cxo-from,.cxo-from+.cxo-flow,.cxo-to{display:none}
}
/* a phone: the stages as close as a finger allows */
@media (max-width:560px){
  .cxo-bar{min-height:52px;padding:4px 10px calc(4px + env(safe-area-inset-bottom,0px))}
  .cxo-flow{flex:0 0 24px;padding:0 5px}
  .cxo-stage{height:44px}
  .cxo-part{padding:0 9px;row-gap:5px}
  .cxo-power{min-width:34px;padding:0 6px}
  .cxo-part .cxo-name{letter-spacing:.1em}
  .cxo-out{gap:6px}
  /* the meter what is left of the row, the loudest peak by its number alone (CLIP said by its colour and its edge) */
  .cxo-meter{flex:1 1 auto}
  .cxo-peak{padding:0 7px}
  .cxo-peak .cxo-clip{display:none}
  .cxo-sheet{max-height:min(74vh,720px)}
  .cxo-sheet-head{padding:12px 14px 10px}
  .cxo-sheet-body{padding:14px 14px 18px}
}
/* a narrow phone: what a stage says a size smaller, so the longest (BALANCED OUTPUT, SIDEWAYS BREATH) leaves the meter
   and its number their room in the row (at 375 px they ran 6 px past it, the number cut) */
@media (max-width:420px){
  .cxo-part .cxo-say{font-size:10px;letter-spacing:.04em}
}
/* the smallest phones, to 374 px: everything a little closer, so the meter and its number stay in the row (from 361 to
   374 px the longest words ran the number into the bar's padding) */
@media (max-width:374px){
  .cxo-bar{padding-left:8px;padding-right:8px}
  .cxo-flow{flex:0 0 14px;padding:0 3px}
  .cxo-part{padding:0 7px}
  .cxo-part .cxo-say{letter-spacing:0}
  .cxo-power{min-width:30px;padding:0 4px}
  .cxo-meter{min-width:24px}
  .cxo-peak{padding:0 5px}
}
/* the row fitted to its room where its words and the switches leave too little (CXOutput.fit, 2 Nov 2026), a step at a
   time: 1, the arrows between the stages a gap, the meter down to its least; 2, each stage's name its last word; 3, each
   switch its light alone, its state said by the box's words (BYPASSED) */
.cxo-bar.fit-1 .cxo-flow{flex:0 0 6px;padding:0}
.cxo-bar.fit-1 .cxo-flow svg{display:none}
.cxo-bar.fit-1 .cxo-meter{min-width:24px}
.cxo-bar.fit-2 .cxo-name .cxo-pre{display:none}
.cxo-bar.fit-3 .cxo-power{min-width:24px;padding:0}
.cxo-bar.fit-3 .cxo-power .cxo-state{display:none}
.cxo-bar.fit-3 .cxo-out{gap:4px}
/* the small print where only a finger points, a size up as the frame's (cx-frame.css, its last rule; 1 Nov 2026): what
   feeds the strip and OUT, the stages' names and chips, the meter's scale, the loudest peak's words and the sheet's
   CLOSE at 10 px. Last in the file, after the widths' rules */
@media(pointer:coarse){
  .cxo-from,.cxo-to,.cxo-part .cxo-name,.cxo-part .cxo-chips i,.cxo-scale i,.cxo-peak,.cxo-close,.cxo-power{font-size:10px}
  .cxo-scale{height:10px}
}
/* a switch's state at 10 px, its letters closer, so OFF keeps inside the room ON has (nothing moves as it is pressed) */
@media(pointer:coarse){.cxo-power{letter-spacing:.04em}}
/* (on a phone the stages' names as wide as they were at 9 px, their spacing the less, so the meter keeps its room: at their
   own spacing they took 17 px of it at 320 px) */
@media(pointer:coarse) and (max-width:560px){.cxo-part .cxo-name{letter-spacing:.03em}}