/* The SONG window, every device's (cx-song.js; ui/README.md, The song's window): SONG in the preset strip, beside
   GENERATE, and the window it opens under the bar, the timeline and its AUTOMATION, the list to add from and the block or
   lane chosen. Its look is
   the frame's (the --cxf-* properties the device sets), so it reads as either device's. The page links this after
   cx-frame.css, so SONG is drawn with the strip; cx-song.js links it where the page has not. */

/* ---------- SONG in the preset strip: lit while the song is on, saying where it is as it plays ---------- */
.cxf-strip .cxs-strip-song{display:inline-flex;align-items:center;gap:10px;flex:none;min-width:0;height:44px;min-height:44px;margin:0;padding:0 13px 0 12px;
  border:1px solid var(--cxf-line-2);border-radius:3px;background:none;color:var(--cxf-ink);font:10px/1 var(--cxf-mono);letter-spacing:.12em;
  text-align:left;white-space:nowrap;cursor:pointer}
.cxf-strip .cxs-strip-song svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.cxf-strip .cxs-strip-text{display:grid;gap:5px;min-width:0}
/* where the song is, by number (2 / 6 · 45%), its room kept for the longest this song can say (--cxs-place, in
   characters of the mono, each 1ch and its spacing), so the strip stays where it is as it plays */
.cxf-strip .cxs-strip-song em{min-width:calc(var(--cxs-place, 0) * (1ch + .1em));overflow:hidden;text-overflow:ellipsis;font:normal 9px/1 var(--cxf-mono);
  letter-spacing:.1em;color:var(--cxf-quiet)}
.cxf-strip .cxs-strip-song em:empty{display:none}
.cxf-strip .cxs-strip-song.cxs-lit{border-color:var(--cxf-accent-line);background:var(--cxf-accent-soft);color:var(--cxf-accent)}
.cxf-strip .cxs-strip-song.cxs-lit svg path:last-child{fill:var(--cxf-accent-soft)}
.cxf-strip .cxs-strip-song.cxs-live svg path:last-child{fill:var(--cxf-accent);animation:cxs-pulse 1.2s ease-in-out infinite}
.cxf-strip .cxs-strip-song.cxs-open{border-color:var(--cxf-accent)}
@keyframes cxs-pulse{50%{opacity:.45}}

/* ---------- the window, under the bar: PLAY, TEMPO, OUTPUT and REC stay in reach ---------- */
html.cxs-on{overflow:hidden}
.cxs-song{position:fixed;z-index:35;left:0;right:0;top:var(--cxs-top,0px);bottom:0;display:grid;grid-template-rows:auto minmax(0,1fr);margin:0;
  border-top:1px solid var(--cxf-line);background:var(--cxf-strip);color:var(--cxf-ink);font:13px/1.4 var(--cxf-sans);box-sizing:border-box}
.cxs-song[hidden]{display:none}
.cxs-song *,.cxs-song *::before,.cxs-song *::after{box-sizing:border-box}
.cxs-song :focus-visible{outline:2px solid var(--cxf-accent);outline-offset:2px}
.cxs-k{font:9px/1.2 var(--cxf-mono);letter-spacing:.12em;color:var(--cxf-muted);text-transform:uppercase}

/* a button, a choice of several, a stepper: the frame's look */
.cxs-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;margin:0;padding:0 11px;border:1px solid var(--cxf-line-2);
  border-radius:3px;background:none;color:var(--cxf-ink);font:10px/1 var(--cxf-mono);letter-spacing:.1em;white-space:nowrap;cursor:pointer}
.cxs-btn svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cxs-btn[aria-pressed=true]{border-color:var(--cxf-accent-line);background:var(--cxf-accent-soft);color:var(--cxf-accent)}
.cxs-btn:disabled{opacity:.35;cursor:default}
.cxs-btn[hidden]{display:none}
.cxs-seg{display:inline-flex;flex-wrap:nowrap;max-width:100%;border:1px solid var(--cxf-line-2);border-radius:3px;overflow:hidden}
.cxs-seg[hidden]{display:none}
.cxs-seg button{min-height:30px;margin:0;padding:0 10px;border:0;border-left:1px solid var(--cxf-line);background:none;color:var(--cxf-muted);
  font:10px/1 var(--cxf-mono);letter-spacing:.08em;white-space:nowrap;cursor:pointer}
.cxs-seg button:first-child{border-left:0}
.cxs-seg button[aria-pressed=true]{background:var(--cxf-accent);color:var(--cxf-on-accent)}
.cxs-seg button:disabled{opacity:.3;cursor:default}

/* its head: what the song is, and its own actions */
.cxs-head{display:flex;align-items:center;gap:12px 14px;min-width:0;padding:12px var(--cxf-pad);border-bottom:1px solid var(--cxf-line);background:var(--cxf-bar)}
.cxs-title{display:grid;gap:5px;min-width:0;margin-right:auto;outline:none}
.cxs-song .cxs-title:focus-visible{outline:none}
.cxs-title strong{font:800 22px/1 var(--cxf-sans);letter-spacing:-.035em;color:var(--cxf-ink);white-space:nowrap}
.cxs-title strong span{color:var(--cxf-accent)}
.cxs-count{white-space:nowrap}
/* the song's name: a ready-made song's, with their list behind it and its arrows, as the strip has them for what is
   loaded */
.cxs-head{position:relative}
/* the count over the name, the arrows beside both, so the title is no taller than one without them; the name answers a
   press over the count too, a finger's height in all */
.cxs-title:has(> .cxs-songpick){grid-template-columns:minmax(0,max-content) auto;align-items:center;column-gap:8px}
.cxs-title:has(> .cxs-songpick)>.cxs-count{grid-column:1;grid-row:1}
.cxs-songpick{display:contents}
.cxs-name{position:relative;grid-column:1;grid-row:2;justify-self:start;display:flex;align-items:center;justify-content:flex-start;gap:10px;min-width:0;
  max-width:100%;min-height:0;margin:0;padding:0;border:0;background:none;color:var(--cxf-ink);text-align:left;cursor:pointer}
.cxs-name::before{content:"";position:absolute;left:-6px;right:-6px;top:-18px;bottom:-6px}
.cxs-name strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cxs-name:disabled{cursor:default}
.cxs-name:disabled .cxs-chevron{display:none}
.cxs-chevron{display:grid;place-items:center;width:18px;height:18px;flex:none;color:var(--cxf-accent)}
.cxs-chevron svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.cxs-name[aria-expanded=true] .cxs-chevron svg{transform:rotate(180deg)}
.cxs-step{grid-column:2;grid-row:1/span 2;display:flex;gap:1px;flex:none}
.cxs-step button{display:grid;place-items:center;width:32px;height:32px;min-height:0;margin:0;padding:0;border:0;border-radius:3px;background:none;
  color:var(--cxf-muted);cursor:pointer}
.cxs-step button:disabled{opacity:.3;cursor:default}
.cxs-step svg{width:14px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* their list, under the head: each its name, how long it is and its line, the one loaded marked */
.cxs-songs{position:absolute;z-index:12;top:calc(100% + 1px);left:var(--cxf-pad);display:grid;gap:14px;width:min(560px,calc(100% - 2 * var(--cxf-pad)));
  max-height:min(64vh,620px);overflow:auto;padding:14px 14px 16px;border:1px solid var(--cxf-line-2);border-radius:4px;background:var(--cxf-menu);
  box-shadow:0 18px 40px #0009;overscroll-behavior:contain}
.cxs-songs[hidden]{display:none}
.cxs-songs-top{display:grid;gap:6px;margin:0}
.cxs-songs-top>span:last-child{font:12px/1.45 var(--cxf-sans);color:var(--cxf-muted)}
.cxs-songs-list{display:grid;gap:16px}
.cxs-song-group{display:grid;gap:6px}
.cxs-song-item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name small" "line line";align-items:baseline;gap:4px 12px;
  width:100%;margin:0;padding:10px 12px;border:1px solid var(--cxf-line);border-radius:3px;background:none;color:var(--cxf-ink);text-align:left;cursor:pointer}
.cxs-song-item strong{grid-area:name;min-width:0;font:600 14px/1.3 var(--cxf-sans);letter-spacing:-.01em}
.cxs-song-item small{grid-area:small;font:9px/1 var(--cxf-mono);letter-spacing:.12em;color:var(--cxf-quiet);white-space:nowrap}
.cxs-song-item span{grid-area:line;font:12px/1.45 var(--cxf-sans);color:var(--cxf-muted)}
.cxs-song-item[aria-pressed=true]{border-color:var(--cxf-accent-line);background:var(--cxf-accent-soft)}
.cxs-song-item[aria-pressed=true] strong{color:var(--cxf-accent)}
.cxs-song-item:disabled{opacity:.4;cursor:default}
.cxs-tools{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
.cxs-power i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--cxf-quiet)}
.cxs-power[aria-pressed=true] i{background:var(--cxf-accent);box-shadow:0 0 8px var(--cxf-accent)}
/* Undo and Redo, the strip's pair (cx-frame.css): joined, each its arrow and its word, the arrow lit while there is
   something to take back or put back, and quiet but in its box when there is nothing */
.cxs-edit{display:inline-flex;gap:0}
.cxs-edit .cxs-btn{gap:8px;padding:0 12px 0 10px;border-right:0;border-radius:3px 0 0 3px;font:10px/1 var(--cxf-mono);letter-spacing:.12em}
.cxs-edit .cxs-redo{padding:0 10px 0 12px;border-right:1px solid var(--cxf-line-2);border-radius:0 3px 3px 0}
.cxs-edit .cxs-btn svg{color:var(--cxf-accent)}
.cxs-edit .cxs-redo svg{order:2}
.cxs-edit .cxs-btn:disabled{opacity:1;color:var(--cxf-quiet)}
.cxs-edit .cxs-btn:disabled svg{color:var(--cxf-quiet)}
.cxs-add{display:none}
.cxs-close{width:34px;padding:0;font:18px/1 var(--cxf-sans)}

/* the list to add from, the timeline beside it, and the block chosen under it */
.cxs-body{position:relative;display:grid;grid-template-columns:250px minmax(0,1fr);min-height:0}
.cxs-browser{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px 16px 20px;
  border-right:1px solid var(--cxf-line)}
.cxs-sheet-top{display:none}
.cxs-find{width:100%;min-height:34px;margin:0;padding:0 10px;border:1px solid var(--cxf-line-2);border-radius:3px;background:none;color:var(--cxf-ink);
  font:11px/1 var(--cxf-mono);letter-spacing:.06em}
.cxs-find::placeholder{color:var(--cxf-quiet)}
.cxs-groups{display:grid;gap:14px}
.cxs-group{display:grid;gap:7px}
.cxs-items{display:grid;gap:4px}
.cxs-items.cxs-row{display:flex;flex-wrap:wrap;gap:6px}
.cxs-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:36px;margin:0;padding:6px 9px;
  border:1px solid var(--cxf-line);border-radius:3px;background:#ffffff05;color:var(--cxf-ink);font:12.5px/1.25 var(--cxf-sans);text-align:left;cursor:grab}
.cxs-item>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cxs-item small{flex:none;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:9px/1.2 var(--cxf-mono);letter-spacing:.08em;
  color:var(--cxf-quiet);text-transform:uppercase}
.cxs-item.cxs-square{justify-content:center;width:40px;padding:0;font:11px/1 var(--cxf-mono)}
.cxs-item:disabled{opacity:.4;cursor:default}
.cxs-ghost{position:fixed;left:0;top:0;z-index:90;margin:0;border-color:var(--cxf-accent-line);background:var(--cxf-menu);box-shadow:0 8px 24px #0009;
  pointer-events:none;cursor:grabbing}
.cxs-hint{margin:0;font:9px/1.6 var(--cxf-mono);letter-spacing:.1em;color:var(--cxf-quiet)}
/* the timeline at least its blocks' height and the block chosen at least a little room, each a share of a short screen,
   the timeline growing with its lanes until the block chosen is down to its least; on a screen too short for the two,
   the whole column slides */
.cxs-main{display:grid;grid-template-rows:minmax(min(152px,42vh),auto) auto minmax(min(132px,24vh),1fr);min-width:0;min-height:0;overflow-y:auto;
  overscroll-behavior:contain}
/* each in its own row, whether or not the line between them shows: with nothing to say or keep the line's row goes, and
   the block chosen had taken it, squeezed into a box that slid by itself over its own row left empty (19 Oct 2026,
   Cyrus, of an empty song on a phone: "Just wasted space and making navigation weird?") */
.cxs-main>.cxs-time{grid-row:1}
.cxs-main>.cxs-now{grid-row:2}
.cxs-main>.cxs-inspect{grid-row:3}

/* the timeline: the bars, the blocks and the playhead, and the lanes under them, sliding sideways where it is wider than
   its room, and down where its lanes are taller than theirs (the block or lane chosen keeps its own room under it) */
.cxs-time{position:relative;padding:12px var(--cxf-pad) 8px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.cxs-ruler{position:relative;width:var(--cxs-w,100%);height:16px}
.cxs-ruler span{position:absolute;top:0;font:9px/1 var(--cxf-mono);letter-spacing:.04em;color:var(--cxf-quiet)}
.cxs-ruler span::before{content:"";position:absolute;left:0;top:11px;width:1px;height:5px;background:var(--cxf-line-2)}
.cxs-lane{position:relative;width:var(--cxs-w,100%);height:104px;margin-top:4px;border-top:1px solid var(--cxf-line);border-bottom:1px solid var(--cxf-line);
  background:repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px var(--cxs-bar,40px))}
.cxs-block{position:absolute;top:9px;bottom:9px;display:grid;grid-template-columns:minmax(0,1fr);align-content:space-between;gap:4px;min-width:0;margin:0;padding:16px 10px 7px;overflow:hidden;
  border:1px solid var(--cxf-line-2);border-radius:4px;background:var(--cxs-tile,#ffffff0b);color:var(--cxf-ink);font:inherit;text-align:left;
  cursor:grab;touch-action:pan-x;-webkit-user-select:none;user-select:none}
.cxs-block>*{position:relative;min-width:0}
.cxs-tile-k{overflow:hidden;font:9px/1 var(--cxf-mono);letter-spacing:.1em;color:var(--cxf-muted);text-overflow:ellipsis;white-space:nowrap}
.cxs-block b{display:block;overflow:hidden;font:600 13px/1.15 var(--cxf-sans);color:var(--cxf-ink);text-overflow:ellipsis;white-space:nowrap}
/* what it takes, one row: the chips with no room for them whole counted in the last, +2 (fitTakes() in cx-song.js) */
.cxs-takes{display:flex;flex-wrap:wrap;gap:4px;height:16px;overflow:hidden}
.cxs-takes>[hidden]{display:none}
.cxs-takes>i,.cxs-takes>.cxs-more{flex:none;padding:3px 5px;border:1px solid var(--cxf-line-2);border-radius:2px;font:normal 9px/1 var(--cxf-mono);
  letter-spacing:.08em;color:var(--cxf-muted)}
/* its MORPH, the ramp at its left, how far through it drawn as it plays; a CUT, a line */
.cxs-block .cxs-ramp{position:absolute;left:0;top:0;bottom:0;width:var(--ramp,0px);border-right:1px dashed var(--cxf-accent-line);
  background:linear-gradient(to top right,transparent 49.5%,var(--cxf-accent-soft) 50%)}
.cxs-block .cxs-ramp.cxs-cut{width:3px;border:0;background:var(--cxf-ink);opacity:.45}
.cxs-block.cxs-playing .cxs-ramp{background:linear-gradient(to top right,transparent 49.5%,var(--cxf-accent-line) 50%)}
.cxs-block.cxs-playing .cxs-ramp:not(.cxs-cut)::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--p,1) * 100% - 1px);width:2px;
  background:var(--cxf-accent)}
.cxs-block.cxs-playing{border-color:var(--cxf-accent);box-shadow:inset 0 0 0 1px var(--cxf-accent-line)}
.cxs-block.cxs-sel{outline:2px solid var(--cxf-ink);outline-offset:2px}
.cxs-block.cxs-gen{border-style:dashed}
.cxs-block.cxs-dragging{opacity:.7;cursor:grabbing}
.cxs-block.cxs-flash{animation:cxs-flash .9s ease-out}
@keyframes cxs-flash{from{box-shadow:0 0 0 3px var(--cxf-accent)}to{box-shadow:0 0 0 0 transparent}}
/* its two handles: its length at its right edge, its MORPH at the ramp's top corner, above the tile's lines (its dot
   sat over KIT · 8 BARS's first letters when the block was chosen: 19 Oct 2026, the second pass) */
.cxs-block .cxs-len{position:absolute;right:0;top:0;bottom:0;width:12px;cursor:ew-resize;touch-action:none}
.cxs-block .cxs-len::after{content:"";position:absolute;right:3px;top:50%;width:2px;height:18px;margin-top:-9px;border-radius:1px;background:var(--cxf-line-2);
  opacity:0}
.cxs-block .cxs-mh{position:absolute;left:max(0px,calc(var(--ramp,0px) - 9px));top:0;width:18px;height:18px;cursor:ew-resize;touch-action:none}
.cxs-block .cxs-mh::after{content:"";position:absolute;left:4px;top:3px;width:10px;height:10px;border:2px solid var(--cxf-strip);border-radius:50%;
  background:var(--cxf-accent);opacity:0}
.cxs-block.cxs-sel .cxs-len::after,.cxs-block.cxs-sel .cxs-mh::after,.cxs-block:focus-visible .cxs-len::after,.cxs-block:focus-visible .cxs-mh::after{opacity:1}
.cxs-play{position:absolute;left:0;top:-4px;bottom:0;width:2px;background:var(--cxf-accent);pointer-events:none;will-change:transform}
.cxs-play[hidden]{display:none}
.cxs-play::before{content:attr(data-at);position:absolute;top:-1px;left:5px;padding:0 3px;background:var(--cxf-strip);font:9px/1 var(--cxf-mono);
  letter-spacing:.06em;color:var(--cxf-accent);white-space:nowrap}
.cxs-drop{position:absolute;left:-1px;top:3px;bottom:3px;width:3px;border-radius:2px;background:var(--cxf-accent);pointer-events:none}
.cxs-drop[hidden]{display:none}
.cxs-empty{position:absolute;left:0;right:auto;width:min(100%,var(--cxs-room,100%));top:9px;bottom:9px;display:grid;place-items:center;margin:0;padding:0 14px;border:1px dashed var(--cxf-line-2);
  border-radius:4px;font:9px/1.5 var(--cxf-mono);letter-spacing:.1em;color:var(--cxf-quiet);text-align:center}

/* ---------- AUTOMATION, under the blocks: a control drawn over the song, a lane each ---------- */
.cxs-autos{position:relative;width:var(--cxs-w,100%);margin-top:10px}
.cxs-autos[hidden]{display:none}
/* its head, held at the timeline's left as it slides: the lanes folded away, and + LANE, the native menu over its button */
.cxs-auto-head{position:sticky;left:0;z-index:2;display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;padding:0 0 8px}
.cxs-auto-fold{display:inline-flex;align-items:center;gap:9px;min-height:32px;margin:0;padding:0 4px 0 0;border:0;background:none;color:var(--cxf-ink);cursor:pointer}
.cxs-auto-fold i{width:7px;height:7px;margin:0 2px;border-right:1.5px solid var(--cxf-muted);border-bottom:1.5px solid var(--cxf-muted);transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.cxs-auto-fold[aria-expanded=false] i{transform:rotate(-45deg)}
.cxs-auto-fold .cxs-k{color:var(--cxf-ink)}
.cxs-auto-fold em{font:normal 9px/1 var(--cxf-mono);letter-spacing:.1em;color:var(--cxf-quiet)}
.cxs-auto-add{position:relative;display:inline-flex}
.cxs-auto-add>span{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 11px;border:1px solid var(--cxf-line-2);border-radius:3px;
  font:10px/1 var(--cxf-mono);letter-spacing:.1em;color:var(--cxf-ink);white-space:nowrap;pointer-events:none}
.cxs-auto-add svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.cxs-auto-add select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;font-size:16px;cursor:pointer}
.cxs-auto-add select:disabled{cursor:default}
.cxs-auto-add.cxs-full>span{opacity:.35}
.cxs-auto-add:focus-within>span{outline:2px solid var(--cxf-accent);outline-offset:2px}
.cxs-auto-hint{position:sticky;left:0;max-width:min(62ch,calc(100vw - 2 * var(--cxf-pad)));margin:0 0 4px;font:12px/1.5 var(--cxf-sans);color:var(--cxf-quiet)}
/* a lane: its line and what lies under it on the bars, quieter past the song's end; drawn by a drag, wherever a finger or
   a mouse presses it */
.cxs-auto-lanes{position:relative;border-top:1px solid var(--cxf-line)}
.cxs-auto{position:relative;border-bottom:1px solid var(--cxf-line);background:repeating-linear-gradient(90deg,#ffffff08 0 1px,transparent 1px var(--cxs-bar,40px));
  cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}
.cxs-auto svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cxs-auto-line{fill:none;stroke:var(--cxf-accent);stroke-width:1.6;stroke-linejoin:round}
.cxs-auto-fill{fill:var(--cxf-accent-soft);stroke:none}
.cxs-auto circle{fill:var(--cxf-strip);stroke:var(--cxf-accent);stroke-width:1.5}
.cxs-auto-after{fill:#0000003d}
.cxs-auto.cxs-sel{background-color:#ffffff07;box-shadow:inset 3px 0 0 var(--cxf-accent)}
.cxs-auto.cxs-idle .cxs-auto-line,.cxs-auto.cxs-lost .cxs-auto-line{stroke:var(--cxf-quiet)}
.cxs-auto.cxs-idle .cxs-auto-fill,.cxs-auto.cxs-lost .cxs-auto-fill{fill:#ffffff08}
/* its name, held at the timeline's left, its value where the song is beside it */
.cxs-auto-name{position:sticky;left:0;z-index:1;display:inline-flex;align-items:baseline;gap:8px;max-width:min(280px,72vw);margin:5px 0 0 5px;padding:4px 7px;
  border:1px solid var(--cxf-line);border-radius:2px;background:var(--cxf-strip);color:var(--cxf-ink);font:9px/1.2 var(--cxf-mono);letter-spacing:.08em;
  white-space:nowrap;cursor:pointer}
.cxs-auto-name b{min-width:0;overflow:hidden;font-weight:400;text-overflow:ellipsis}
.cxs-auto-name em{flex:none;font-style:normal;color:var(--cxf-accent)}
.cxs-auto-name em:empty{display:none}
.cxs-auto-name[aria-pressed=true]{border-color:var(--cxf-accent-line)}
.cxs-auto.cxs-idle .cxs-auto-name em,.cxs-auto.cxs-lost .cxs-auto-name em{color:var(--cxf-quiet)}
/* a lane a switch keeps silent (its effect, the channel, its compressor or its limiter off): drawn quieter, the switch's
   word beside its name, as its button says it, in place of its value (shown again under the hand as it is drawn) */
.cxs-auto.cxs-off .cxs-auto-line{stroke:var(--cxf-quiet)}
.cxs-auto.cxs-off .cxs-auto-fill{fill:#ffffff08}
.cxs-auto.cxs-off:not(.cxs-drawing) .cxs-auto-name em{display:none}
.cxs-auto.cxs-off .cxs-auto-name em{color:var(--cxf-quiet)}
.cxs-auto-name i{flex:none;font-style:normal;color:var(--cxf-muted)}
.cxs-off-note{color:var(--cxf-ink)}
.cxs-auto-play{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cxf-accent);opacity:.75;pointer-events:none;will-change:transform}
.cxs-auto-play[hidden]{display:none}

/* where it is, as it plays, and KEEP */
.cxs-now{display:flex;align-items:center;gap:12px;min-height:42px;padding:2px var(--cxf-pad) 10px}
.cxs-now-line{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;min-width:0;margin:0;font:10px/1.5 var(--cxf-mono);letter-spacing:.07em;
  color:var(--cxf-muted)}
.cxs-now-line b{font-weight:400;color:var(--cxf-accent)}
/* nothing to say and nothing to keep: no row for it */
.cxs-now:has(>.cxs-now-line:empty):has(>.cxs-keep[hidden]){display:none}
.cxs-keep{margin-left:auto}

/* the block chosen */
.cxs-inspect{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));align-content:start;gap:18px 26px;min-height:0;overflow:auto;
  overscroll-behavior:contain;padding:16px var(--cxf-pad) 28px;border-top:1px solid var(--cxf-line)}
.cxs-row{display:grid;align-content:start;justify-items:start;gap:8px;min-width:0}
.cxs-row.cxs-wide{grid-column:span 2}
.cxs-v{display:grid;gap:4px;min-width:0}
.cxs-v b{overflow:hidden;font:700 17px/1.2 var(--cxf-sans);letter-spacing:-.01em;color:var(--cxf-ink);text-overflow:ellipsis;white-space:nowrap}
.cxs-v small{font:9px/1.3 var(--cxf-mono);letter-spacing:.1em;color:var(--cxf-quiet)}
.cxs-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.cxs-stepper{display:inline-flex;align-items:center;width:max-content;border:1px solid var(--cxf-line-2);border-radius:3px}
.cxs-stepper button{width:34px;height:32px;margin:0;padding:0;border:0;background:none;color:var(--cxf-ink);font:17px/1 var(--cxf-sans);cursor:pointer}
.cxs-stepper button:disabled{opacity:.3;cursor:default}
.cxs-stepper output{min-width:78px;font:10.5px/1 var(--cxf-mono);letter-spacing:.08em;text-align:center}
.cxs-pick{display:inline-grid;gap:4px;min-width:0}
.cxs-pick select{min-height:32px;max-width:100%;margin:0;padding:0 8px;border:1px solid var(--cxf-line-2);border-radius:3px;background:var(--cxf-menu);
  color:var(--cxf-ink);font:10.5px/1 var(--cxf-mono);letter-spacing:.06em}
.cxs-lead,.cxs-note{grid-column:1/-1;max-width:76ch;margin:0;font:12.5px/1.55 var(--cxf-sans);color:var(--cxf-muted)}
/* the four ways a value moves, the same words on every device, folded under one line until it is opened, as AUTOMATION
   folds its lanes (19 Oct 2026: open, they took a phone's screen under every block chosen) */
.cxs-ways-fold{grid-column:1/-1;padding-top:6px;border-top:1px solid var(--cxf-line)}
.cxs-ways-fold>summary{display:inline-flex;align-items:center;gap:9px;min-height:32px;padding:0 4px 0 0;color:var(--cxf-ink);list-style:none;cursor:pointer}
.cxs-ways-fold>summary::-webkit-details-marker{display:none}
.cxs-ways-fold>summary i{width:7px;height:7px;margin:0 2px;border-right:1.5px solid var(--cxf-muted);border-bottom:1.5px solid var(--cxf-muted);
  transform:rotate(-45deg);transition:transform .15s}
.cxs-ways-fold[open]>summary i{transform:translateY(-2px) rotate(45deg)}
.cxs-ways-fold>summary .cxs-k{color:var(--cxf-ink)}
.cxs-ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:10px 0 2px}
.cxs-way{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:5px 11px}
.cxs-way svg{grid-row:span 2;width:36px;height:27px;fill:none;stroke:var(--cxf-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cxs-way svg .cxs-dash{stroke:var(--cxf-quiet);stroke-dasharray:2 2}
.cxs-way svg circle{fill:var(--cxf-muted);stroke:none}
.cxs-way svg circle.cxs-new{fill:var(--cxf-accent)}
.cxs-way p{margin:0;font:11.5px/1.5 var(--cxf-sans);color:var(--cxf-quiet)}

@media(hover:hover){
  .cxf-strip .cxs-strip-song:hover{border-color:var(--cxf-accent-line);background:var(--cxf-accent-soft)}
  .cxs-btn:hover:not(:disabled):not([aria-pressed=true]),.cxs-stepper button:hover:not(:disabled){background:#ffffff0a}
  .cxs-seg button:hover:not(:disabled):not([aria-pressed=true]){color:var(--cxf-ink);background:#ffffff08}
  .cxs-item:hover:not(:disabled){border-color:var(--cxf-line-2);background:#ffffff0b}
  .cxs-block:hover:not(.cxs-playing){border-color:var(--cxf-muted)}
  .cxs-song-item:hover:not(:disabled):not([aria-pressed=true]){border-color:var(--cxf-line-2);background:#ffffff0b}
  .cxs-step button:hover:not(:disabled){background:#ffffff0a;color:var(--cxf-ink)}
  .cxs-name:hover:not(:disabled) strong{color:#fff}
  /* no box of a page's own round the name as it is pointed at */
  .cxs-title .cxs-name:hover{background:none}
  .cxs-block:hover .cxs-len::after,.cxs-block:hover .cxs-mh::after{opacity:1}
  .cxs-auto-add:hover:not(.cxs-full)>span,.cxs-auto-fold:hover .cxs-k,.cxs-ways-fold>summary:hover .cxs-k{color:var(--cxf-accent)}
  .cxs-auto-name:hover{border-color:var(--cxf-muted)}
  .cxs-block .cxs-len:hover::after{background:var(--cxf-accent)}
}

/* ---------- an iPad held upright, a small laptop: the head in two rows, × beside the title (it wrapped onto a row of
   its own, 19 Oct 2026, the audit), the list narrower, the four ways two by two ---------- */
@media(max-width:1099px){
  .cxs-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title close" "tools tools";gap:10px 12px}
  .cxs-title{grid-area:title}
  .cxs-close{grid-area:close}
  .cxs-tools{grid-area:tools;justify-content:flex-start}
  .cxs-body{grid-template-columns:220px minmax(0,1fr)}
  .cxs-ways{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- a phone: the head in two rows, the list a sheet from below, everything else one column ---------- */
@media(max-width:767px){
  .cxf-strip .cxs-strip-song em{display:none}
  /* Undo and Redo by their arrows, so the head's tools stay short */
  .cxs-edit .cxs-btn,.cxs-edit .cxs-redo{width:40px;padding:0}
  .cxs-edit-word{display:none}
  .cxs-head{padding:10px var(--cxf-pad)}
  .cxs-title strong{font-size:19px}
  /* the songs' list as wide as the screen, under the head */
  .cxs-songs{left:0;width:100%;max-height:70vh;border-width:1px 0;border-radius:0 0 8px 8px}
  .cxs-tools{flex-wrap:nowrap;margin:0 calc(-1 * var(--cxf-pad));padding:0 var(--cxf-pad);overflow-x:auto;scrollbar-width:none}
  .cxs-tools::-webkit-scrollbar{display:none}
  .cxs-tools.cxs-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  .cxs-tools>*{flex:none;order:4}
  /* SONG ON, ADD and GENERATE SONG first: the row's main actions in sight, the rest a slide away (GENERATE SONG was off
     the end of it, 19 Oct 2026, the audit) */
  .cxs-tools>.cxs-power{order:1}
  .cxs-tools>.cxs-add{order:2}
  .cxs-tools>.cxs-gensong{order:3}
  .cxs-add{display:inline-flex}
  .cxs-body{grid-template-columns:minmax(0,1fr)}
  .cxs-browser{position:absolute;z-index:5;left:0;right:0;bottom:0;max-height:74%;padding:8px 16px 22px;border:0;border-top:1px solid var(--cxf-line-2);
    border-radius:12px 12px 0 0;background:var(--cxf-menu);box-shadow:0 -14px 36px #000a;transform:translateY(104%);visibility:hidden;
    transition:transform .22s ease,visibility 0s linear .22s}
  .cxs-adding .cxs-browser{transform:none;visibility:visible;transition:transform .22s ease}
  .cxs-sheet-top{position:sticky;z-index:1;top:-8px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-8px -16px 0;
    padding:12px 16px 8px;background:var(--cxf-menu)}
  .cxs-sheet-top::before{content:"";position:absolute;left:50%;top:7px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:var(--cxf-line-2)}
  /* one column that slides as one, the timeline with its lanes and the block chosen each as tall as it is: no box that
     slides inside another, and nothing kept for a row with nothing in it */
  .cxs-main{display:block}
  .cxs-time{padding:10px var(--cxf-pad) 6px}
  .cxs-now{flex-wrap:wrap;padding:2px var(--cxf-pad) 8px}
  .cxs-inspect{grid-template-columns:minmax(0,1fr);gap:16px;padding:14px var(--cxf-pad) 28px;overflow:visible}
  .cxs-row.cxs-wide{grid-column:auto}
  /* a choice of several, as chips that wrap: a MORPH's seven are wider than a phone */
  .cxs-seg{flex-wrap:wrap;gap:6px;border:0;border-radius:0;overflow:visible}
  .cxs-seg button,.cxs-seg button:first-child{border:1px solid var(--cxf-line-2);border-radius:3px}
  .cxs-seg button[aria-pressed=true]{border-color:var(--cxf-accent)}
  .cxs-ways{grid-template-columns:minmax(0,1fr)}
}
/* ---------- a short screen, a phone on its side: one column that slides as one, as on a phone held upright (the
   timeline and the panel had each slid inside it, in about 150 px, 19 Oct 2026, the audit) ---------- */
@media(min-width:768px) and (max-height:500px){
  .cxs-main{display:block}
  .cxs-inspect{overflow:visible}
}
/* a phone: five things in the strip's one row, so the narrower it is the more of them go by their signs alone,
   GENERATE's word always whole and its line too from 360 px: SONG under 480 px; FILE by its folder under 440 px;
   GENERATE by its words under 400 px; the row closer under 375 px (its line, PATTERN · 32%, was cut short at 360, 400 to
   429 and 440 px, on an iPhone 17 Pro among them: 19 Oct 2026, the audit) */
@media(max-width:479px){
  .cxf-strip .cxs-strip-song{width:44px;padding:0;justify-content:center}
  .cxf-strip .cxs-strip-text{display:none}
}
@media(max-width:439px){
  .cxf-strip .cxf-actions:has(> .cxs-strip-song) .cxf-file-menu{justify-content:center;gap:0;width:44px;padding:0;font-size:0;letter-spacing:0}
}
@media(max-width:399px){
  .cxf-strip .cxf-actions:has(> .cxs-strip-song) .cxf-gen>svg,.cxf-strip .cxf-actions:has(> .cxs-strip-song) .cxf-gen>.ui-icon{display:none}
}
@media(max-width:374px){
  .cxf-strip .cxf-actions:has(> .cxs-strip-song){gap:4px}
  .cxf-strip .cxf-actions:has(> .cxs-strip-song) .cxf-gen{padding:0 9px}
}

/* a finger's size where nothing points but a finger */
@media(pointer:coarse){
  .cxs-btn,.cxs-seg button{min-height:40px}
  .cxs-close{width:40px}
  .cxs-sheet-close{width:40px;padding:0}
  .cxs-step button{width:40px;height:40px}
  .cxs-chips>[data-act=earlier],.cxs-chips>[data-act=later]{min-width:40px}
  .cxs-song-item{min-height:48px}
  .cxs-item{min-height:44px}
  .cxs-item.cxs-square{width:44px}
  .cxs-find{min-height:40px}
  .cxs-stepper button{width:44px;height:40px}
  .cxs-pick select{min-height:40px}
  .cxs-block .cxs-len{width:24px}
  .cxs-block .cxs-len::after{right:6px}
  .cxs-block .cxs-mh{left:max(0px,calc(var(--ramp,0px) - 14px));width:28px;height:28px}
  .cxs-block .cxs-mh::after{left:8px;top:5px;width:12px;height:12px}
  .cxs-block{padding-top:19px}
  .cxs-auto-fold,.cxs-auto-add>span,.cxs-ways-fold>summary{min-height:40px}
  .cxs-auto-name{padding:6px 9px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .cxs-browser,.cxs-adding .cxs-browser{transition:none}
  .cxs-auto-fold i,.cxs-ways-fold>summary i{transition:none}
  .cxf-strip .cxs-strip-song.cxs-live svg path:last-child{animation:none}
}

/* ---------- the small print where only a finger points ---------- */
/* the SONG window's 9 px words a size up on a touch screen, 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", to its dense panels' words at 10 px): the kind lines
   and labels, a ready-made song's length, a list item's group and the list's hint, the bars over the blocks, a tile's
   kind and what it takes, the playhead's place, an empty song's line, AUTOMATION's count, a value's line, and SONG's place
   in the strip as a song plays, at 10 px, each word's line height and room as its own rule has them. Last in the file,
   after the widths' rules */
@media(pointer:coarse){
  .cxf-strip .cxs-strip-song em,.cxs-k,.cxs-song-item small,.cxs-item small,.cxs-hint,.cxs-ruler span,.cxs-tile-k,.cxs-takes>i,
  .cxs-takes>.cxs-more,.cxs-play::before,.cxs-empty,.cxs-auto-fold em,.cxs-v small{font-size:10px}
  /* where the room is short, a word as wide as it was at 9 px, its letters closer: SONG's place in the strip, its room
     kept for the longest place this song can say, so the strip's line stays where it was as a song plays; the song's
     count over its name (on a phone at 9 px it already ran past its room, under the arrows); a tile's kind and what it
     takes, each chip the height it was (the row shows 16 px of its 17, as before), so a tile keeps as many whole as it
     did; and a list item's line beside its name */
  .cxf-strip .cxs-strip-song em{min-width:calc(var(--cxs-place, 0) * (1ch + .03em));letter-spacing:.03em}
  .cxs-title .cxs-count{letter-spacing:.045em}
  .cxs-tile-k{letter-spacing:.03em}
  .cxs-takes>i,.cxs-takes>.cxs-more{padding:2px 5px 3px;letter-spacing:.01em}
  .cxs-item small{letter-spacing:.01em}
}