/* The frame, what every device's page shows the same way (cx-frame.js; ui/README.md, The frame): the bar, the preset
   strip, the picture's corners, the tab rows, and the two dialogs every device has (Export, and Keep, where a take, an
   export or a saved file is kept). A device writes its own controls into these parts, marked by these classes, and
   gives them its look through the --cxf-* properties; these are Matter / Field's, the first. The page loads this
   before its own stylesheet, so nothing of the frame is drawn late and the device can fine-tune after it. Each rule
   names its part as well as its control, so a device's own rules for every button or label give way to it. */
:where(:root){--cxf-bar:#1a1e20;--cxf-strip:#151a1c;--cxf-line:#343d42;--cxf-line-2:#4b585e;--cxf-ink:#e7e2d8;--cxf-muted:#a2adb0;
  --cxf-quiet:#829298;--cxf-accent:#ed9369;--cxf-accent-soft:#ed936912;--cxf-accent-line:#ed93696b;--cxf-on-accent:#161918;
  --cxf-rec:#a67666;--cxf-meter:#c2cbb1;--cxf-glass:rgba(17,22,25,.82);--cxf-menu:#1c2226;--cxf-dialog:linear-gradient(140deg,#202b31,#141d23);
  --cxf-dialog-edge:#5a707d;--cxf-sans:Matter,Arial,sans-serif;--cxf-mono:MatterMono,monospace;--cxf-pad:24px;--cxf-id-room:250px}

/* ---------- the bar: the mark and the name, the transport, TEMPO, OUTPUT, REC, VISUAL and ?, in that order ---------- */
/* PLAY in the same place on every device (1 Nov 2026, the family pass; Cyrus: "make sure they are all working intuitively
   as a family of devices"): the name in a room of its own, as wide as the longest device's (--cxf-id-room, Minor
   Resistance's 249 px), then the transport, then the room to spare, then TEMPO, OUTPUT, REC, VISUAL and ? at the right,
   each in the same place on every device too. The spare room had been before the transport, so a device with fewer
   actions had PLAY further right (at 1440 px 471 on Matter / Field, 612 on one device). A device's TEMPO its own track
   (--cxf-tempo-track), the columns the frame's */
.cxf-bar{position:sticky;top:var(--cxf-stick,0px);z-index:40;display:grid;
  grid-template-columns:minmax(var(--cxf-id-room),max-content) auto minmax(0,1fr) var(--cxf-tempo-track,minmax(124px,168px)) minmax(160px,176px) auto auto auto;
  grid-template-areas:"id transport . tempo output rec visual help";align-items:center;column-gap:14px;row-gap:12px;min-height:72px;
  margin:0;padding:14px var(--cxf-pad);background:var(--cxf-bar);border-bottom:1px solid var(--cxf-line);box-sizing:border-box}
.cxf-bar button{font-family:var(--cxf-mono)}
.cxf-bar .cxf-levels{display:contents}
.cxf-bar .cxf-id{grid-area:id;display:flex;align-items:center;gap:13px;min-width:0;margin:0;color:var(--cxf-ink);text-decoration:none}
.cxf-bar .cxf-mark{display:block;width:30px;height:30px;flex:none}
.cxf-bar .cxf-title{display:block;min-width:0}
/* (in the one row, the mark and the name only as wide as they are, so the room beside them is no link) */
@media(min-width:1100px){.cxf-bar .cxf-id{justify-self:start}}
.cxf-bar .cxf-id h1{margin:0;font:800 21px/1 var(--cxf-sans);letter-spacing:-.045em;white-space:nowrap;color:var(--cxf-ink)}
.cxf-bar .cxf-id h1 span{margin:0 .05em;font-weight:400;color:var(--cxf-quiet)}
.cxf-bar .cxf-id .cxf-kind{display:block;margin:7px 0 0;font:9px/1 var(--cxf-mono);letter-spacing:.13em;color:var(--cxf-muted);white-space:nowrap;
  text-transform:uppercase}

/* PLAY, in the accent, then the device's own actions, each a word */
.cxf-bar .cxf-transport{grid-area:transport;display:flex;align-items:stretch;gap:4px;margin:0}
.cxf-bar .cxf-transport>button{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:none;min-width:0;height:40px;min-height:40px;
  margin:0;padding:0 13px;border:1px solid transparent;border-radius:3px;background:none;color:var(--cxf-ink);font:10px/1 var(--cxf-mono);
  letter-spacing:.1em;white-space:nowrap}
.cxf-bar .cxf-transport>.cxf-act[aria-pressed=true]{border-color:var(--cxf-accent-line);background:var(--cxf-accent-soft);color:var(--cxf-accent)}
.cxf-bar .cxf-transport>button:disabled{opacity:.38;cursor:default}
.cxf-bar .cxf-transport>.cxf-play,.cxf-bar .cxf-transport>.cxf-play[aria-pressed=true]{min-width:118px;padding:0 18px;border-color:var(--cxf-accent);
  background:var(--cxf-accent);color:var(--cxf-on-accent);font-weight:800;letter-spacing:.14em}
.cxf-bar .cxf-play svg{width:13px;height:14px;fill:currentColor;flex:none}

/* TEMPO and OUTPUT: a word, a value, a slider; TEMPO's lock beside its value, OUTPUT's word opening the device's master
   output, and its meter and its mute under and beside it; a device's position in time (a bar's number) follows TEMPO's
   value */
.cxf-bar .cxf-tempo,.cxf-bar .cxf-output{position:relative;display:grid;align-items:center;column-gap:8px;row-gap:4px;margin:0;padding:0 0 0 16px;
  box-sizing:border-box}
.cxf-bar .cxf-tempo{grid-area:tempo;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"k v pos" "s s pos";width:auto;min-width:0}
.cxf-bar .cxf-output{grid-area:output;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"k v mute" "s s mute" "m m mute";width:auto;min-width:0}
.cxf-bar .cxf-tempo::before,.cxf-bar .cxf-output::before,.cxf-bar .cxf-rec::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;
  background:var(--cxf-line)}
.cxf-bar .cxf-k{grid-area:k;justify-self:start;display:flex;align-items:center;gap:5px;width:auto;height:auto;min-height:0;margin:0;padding:0;border:0;
  border-radius:0;background:none;font:9px/1 var(--cxf-mono);letter-spacing:.12em;color:var(--cxf-muted);text-transform:uppercase}
.cxf-bar .cxf-k svg,.cxf-bar .cxf-k .ui-icon{width:10px;height:10px;flex:none}
.cxf-bar .cxf-tempo>.cxf-host,.cxf-bar .cxf-k .cxf-host{grid-area:k;justify-self:end;padding:2px 5px 1px;border:1px solid var(--cxf-accent-line);
  border-radius:2px;background:none;color:var(--cxf-accent);font:9px/1 var(--cxf-mono);letter-spacing:.1em;text-transform:uppercase}
/* TEMPO's lock: at the end of its word's cell, where HOST shows in a host (which hides it: the host keeps the tempo), in the
   accent while it is on; on a touch screen a finger's size round it, its row as it was */
.cxf-bar .cxf-tempo>.cxf-lock{grid-area:k;justify-self:end;position:relative;display:grid;place-items:center;width:14px;min-width:0;height:14px;
  min-height:0;margin:-2px 0;padding:0;border:0;border-radius:2px;background:none;color:var(--cxf-muted);cursor:pointer}
.cxf-bar .cxf-tempo>.cxf-lock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cxf-bar .cxf-tempo>.cxf-lock .shut,.cxf-bar .cxf-tempo>.cxf-lock[aria-pressed=true] .open{display:none}
.cxf-bar .cxf-tempo>.cxf-lock[aria-pressed=true]{color:var(--cxf-accent)}
.cxf-bar .cxf-tempo>.cxf-lock[aria-pressed=true] .shut{display:inline}
.cxf-bar .cxf-tempo>.cxf-host:not([hidden])~.cxf-lock{display:none}
@media(pointer:coarse){.cxf-bar .cxf-tempo>.cxf-lock::after{content:"";position:absolute;inset:-12px -9px -3px}}
/* and HOST its room beside the word: a device's place in time put away while it shows, as the host shows its own bars
   (Polite Disorder's BAR beside the value left HOST too little, over the word by 19 px at every width), and under 360 px
   TEMPO's value without its BPM, which the word says (HOST over the word by up to 18 px at 320: 31 Oct 2026); HOST
   before the place and the value in the bar, as the devices write it */
.cxf-bar .cxf-tempo>.cxf-host:not([hidden])~.cxf-pos{display:none}
@media(max-width:359px){.cxf-bar .cxf-tempo>.cxf-host:not([hidden])~.cxf-v{gap:0;font-size:0}}
.cxf-bar .cxf-v{grid-area:v;justify-self:end;display:flex;align-items:baseline;gap:4px;margin:0;font:9px/1 var(--cxf-mono);letter-spacing:.08em;
  color:var(--cxf-muted)}
.cxf-bar .cxf-v output,.cxf-bar .cxf-v b,.cxf-bar .cxf-v .cxf-pct{font:800 16px/1 var(--cxf-sans);letter-spacing:-.03em;color:var(--cxf-ink);
  font-variant-numeric:tabular-nums}
.cxf-bar .cxf-v .cxf-pct{margin-left:-4px}
/* a number keeps its room as it gains or loses a digit (22 Oct 2026, Cyrus: "changing amounts of digits shouldnt move
   interface positioning"): TEMPO's and OUTPUT's as wide as three of their digits (a hidden 000 under them, in their own
   type, so the room is theirs exactly in any device's type), against their unit, so the lock and the word before them
   stay put from 99 to 100 */
.cxf-bar .cxf-v output,.cxf-bar .cxf-v b{display:inline-block;text-align:right}
.cxf-bar .cxf-v output::after,.cxf-bar .cxf-v b::after,.cxf-bar .cxf-pos>:last-child::after{content:"000";display:block;height:0;
  overflow:hidden;visibility:hidden}
.cxf-bar .cxf-s{grid-area:s;display:block;width:100%;height:20px;min-height:0;margin:0}
.cxf-bar .cxf-meter{grid-area:m;height:2px;margin:0;background:var(--cxf-line);overflow:hidden}
.cxf-bar .cxf-meter>i{display:block;width:0;height:100%;background:var(--cxf-meter);transition:width .08s}
.cxf-bar .cxf-mute{grid-area:mute;display:grid;place-items:center;width:32px;min-width:32px;height:32px;min-height:32px;margin:0;padding:0;border:0;
  border-radius:3px;background:none;color:var(--cxf-muted)}
.cxf-bar .cxf-mute svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cxf-bar .cxf-mute .cross{display:none}
.cxf-bar .cxf-mute[aria-pressed=true]{border:0;background:none;color:var(--cxf-accent)}
.cxf-bar .cxf-mute[aria-pressed=true] .waves{display:none}
.cxf-bar .cxf-mute[aria-pressed=true] .cross{display:inline}
/* (the place's number has a hidden 000 under it, three digits' room, and centred in it; its padding the less for it, so
   TEMPO's word and lock keep their room) */
.cxf-bar .cxf-pos{grid-area:pos;display:grid;justify-items:center;gap:3px;margin:0;padding:0 0 0 4px}
.cxf-bar .cxf-pos>:first-child{font:9px/1 var(--cxf-mono);letter-spacing:.12em;color:var(--cxf-muted)}
.cxf-bar .cxf-pos>:last-child{font:800 16px/1 var(--cxf-sans);color:var(--cxf-accent);font-variant-numeric:tabular-nums;text-align:center}

/* REC records what is heard; VISUAL, the device alone, by one sign on every device; ?, the guide, last */
.cxf-bar .cxf-rec{grid-area:rec;position:relative;display:inline-flex;align-items:center;gap:8px;min-width:0;height:36px;min-height:36px;margin:0;
  padding:0 10px 0 22px;border:1px solid transparent;border-radius:3px;background:none;color:var(--cxf-ink);font:10px/1 var(--cxf-mono);
  letter-spacing:.1em}
.cxf-bar .cxf-rec-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--cxf-rec)}
.cxf-bar .cxf-rec[aria-pressed=true]{border-color:transparent;background:none;color:var(--cxf-accent)}
.cxf-bar .cxf-rec[aria-pressed=true] .cxf-rec-dot{background:var(--cxf-accent);box-shadow:0 0 10px var(--cxf-accent)}
.cxf-bar .cxf-rec:disabled{opacity:.38}
.cxf-bar .cxf-visual{grid-area:visual;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:36px;min-height:36px;
  margin:0;padding: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:.1em;text-transform:uppercase}
.cxf-bar .cxf-visual svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.cxf-bar .cxf-visual svg circle{fill:var(--cxf-accent);stroke:none}
.cxf-bar .cxf-visual[aria-pressed=true]{border-color:var(--cxf-accent-line);background:var(--cxf-accent-soft);color:var(--cxf-accent)}
/* VISUAL's invitation (cx-frame.js, INVITE; 31 Oct 2026, Cyrus: "the 'visual' button should be more engaging on first use
   ... maybe have it pulse for a few seconds at first load"): lit in the accent for a few seconds as the page opens, a ring
   going out round it and its corners breathing out, three times; under reduced motion lit, and nothing moving */
.cxf-bar .cxf-visual.cxf-invite{border-color:var(--cxf-accent-line);color:var(--cxf-accent)}
@media(prefers-reduced-motion:no-preference){
  .cxf-bar .cxf-visual.cxf-invite{animation:cxf-invite-ring 1.2s ease-out 3}
  .cxf-bar .cxf-visual.cxf-invite svg path{transform-origin:10px 10px;animation:cxf-invite-frame 1.2s ease-in-out 3}
  .cxf-bar .cxf-visual.cxf-invite svg circle{transform-origin:10px 10px;animation:cxf-invite-dot 1.2s ease-in-out 3}
}
@keyframes cxf-invite-ring{0%{box-shadow:0 0 0 0 var(--cxf-accent-line)}80%,100%{box-shadow:0 0 0 7px transparent}}
@keyframes cxf-invite-frame{0%,100%{transform:scale(1)}45%{transform:scale(1.16)}}
@keyframes cxf-invite-dot{0%,100%{transform:scale(1)}45%{transform:scale(1.45)}}
.cxf-bar .cxf-help{grid-area:help;display:grid;place-items:center;width:36px;min-width:36px;height:36px;min-height:36px;margin:0;padding:0;
  border:1px solid var(--cxf-line-2);border-radius:50%;background:none;color:var(--cxf-muted)}
.cxf-bar .cxf-help svg,.cxf-bar .cxf-help .ui-icon{width:18px;height:18px}
@media(hover:hover){
  .cxf-bar .cxf-transport>.cxf-act:hover:not(:disabled):not([aria-pressed=true]){border-color:var(--cxf-line-2);background:#ffffff08}
  .cxf-bar .cxf-transport>.cxf-play:hover:not(:disabled){filter:brightness(1.07)}
  .cxf-bar .cxf-k:hover,.cxf-bar .cxf-mute:hover,.cxf-bar .cxf-tempo>.cxf-lock:hover:not([aria-pressed=true]){color:var(--cxf-ink)}
  .cxf-bar .cxf-rec:hover:not(:disabled),.cxf-bar .cxf-visual:hover,.cxf-bar .cxf-help:hover{border-color:var(--cxf-line-2);background:#ffffff08;
    color:var(--cxf-ink)}
}

/* ---------- the preset strip: what is loaded, its line, and the ways to change it ---------- */
.cxf-strip{position:relative;z-index:30;display:grid;
  grid-template-columns:minmax(calc(230px + var(--cxf-share-room)),calc(352px + var(--cxf-share-room))) minmax(0,1fr) auto;grid-template-areas:"preset line actions";
  align-items:center;column-gap:22px;row-gap:8px;min-height:86px;margin:0;padding:13px var(--cxf-pad);background:var(--cxf-strip);
  border-bottom:1px solid var(--cxf-line);box-sizing:border-box}
.cxf-strip button{font-family:var(--cxf-mono)}
.cxf-strip .cxf-preset{position:relative;grid-area:preset;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eyebrow eyebrow" "name step";
  column-gap:8px;align-items:center;min-width:0;margin:0}
.cxf-strip .cxf-eyebrow{grid-area:eyebrow;display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0;margin:0 0 5px;
  font:9px/1.2 var(--cxf-mono);letter-spacing:.13em;color:var(--cxf-quiet);text-transform:uppercase;white-space:nowrap}
.cxf-strip .cxf-eyebrow .cxf-kind{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cxf-strip .cxf-eyebrow .cxf-kind b{font-weight:400;color:var(--cxf-muted)}
.cxf-strip .cxf-count{flex:none;font-variant-numeric:tabular-nums}
.cxf-strip .cxf-name{grid-area:name;justify-self:start;display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;width:auto;height:auto;
  min-height:34px;margin:0;padding:1px 0 2px;border:0;border-radius:0;background:none;color:var(--cxf-ink);text-align:left}
.cxf-strip .cxf-name strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 22px/1.25 var(--cxf-sans);
  letter-spacing:-.035em;color:var(--cxf-ink)}
/* a name too long for one line at its floor, on two in the same box (cx-frame.js, NAME_TWO) */
.cxf-strip .cxf-name strong.cxf-two{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;line-height:1.1}
.cxf-strip .cxf-chevron{display:grid;place-items:center;width:18px;height:18px;flex:none;color:var(--cxf-accent)}
.cxf-strip .cxf-chevron svg,.cxf-strip .cxf-chevron .ui-icon{width:18px;height:18px}
.cxf-strip .cxf-step{grid-area:step;display:flex;gap:1px;margin:0}
.cxf-strip .cxf-step button{display:grid;place-items:center;width:32px;min-width:32px;height:34px;min-height:34px;margin:0;padding:0;border:0;
  border-radius:3px;background:none;color:var(--cxf-muted)}
.cxf-strip .cxf-step svg,.cxf-strip .cxf-step .ui-icon{width:14px;height:17px}
/* SHARE (cx-share.js): a link to what is loaded, its sign beside the arrows and as quiet as they are, a little apart from
   them; the column wider by it where the strip has it, so a name keeps the room it had (31 Oct 2026, Cyrus, in the CS/M
   site's chat: "a direct link share button somewhere in all the apps"). Under it for a moment, the word that the link
   was copied, over what is below and never moving it */
.cxf-strip{--cxf-share-room:0px}
.cxf-strip:has(.cxf-share){--cxf-share-room:34px}
.cxf-strip .cxf-share{grid-area:share;display:grid;place-items:center;width:32px;min-width:32px;height:34px;min-height:34px;margin:0;padding:0;
  border:0;border-radius:3px;background:none;color:var(--cxf-muted)}
.cxf-strip .cxf-share svg{width:16px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cxf-strip .cxf-share:disabled{cursor:default;color:var(--cxf-quiet);opacity:.6}
.cxf-strip .cxf-share:active:not(:disabled){background:var(--cxf-accent-soft);color:var(--cxf-accent)}
.cxf-strip .cxf-share-note{position:absolute;grid-area:share;z-index:2;top:100%;right:0;margin:6px 0 0;padding:7px 9px;border:1px solid var(--cxf-line-2);
  border-radius:3px;background:var(--cxf-menu);box-shadow:0 10px 24px #0008;color:var(--cxf-ink);font:9px/1 var(--cxf-mono);letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;pointer-events:none;transition:opacity .24s}
.cxf-strip .cxf-share-note[hidden]{display:none}
/* a longer word (what of yours a link leaves out, after "Link copied."): on as many lines as it needs, never wider than
   the screen leaves beside SHARE */
.cxf-strip .cxf-share-note.cxf-long{width:max-content;max-width:min(240px,calc(100vw - 32px));white-space:normal;line-height:1.5}
.cxf-strip .cxf-share-note.cxf-error{border-color:var(--cxf-rec)}
.cxf-strip .cxf-share-note.cxf-gone{opacity:0}
@media(prefers-reduced-motion:reduce){.cxf-strip .cxf-share-note{transition:none}}
/* a link copied the old way (a browser without the clipboard's own), out of sight for the moment it is there */
.cxf-copy-field{position:fixed;top:0;left:0;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.cxf-strip .cxf-line{grid-area:line;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-width:0;max-width:560px;margin:0;padding:0;
  overflow:hidden;font:12px/1.55 var(--cxf-sans);letter-spacing:0;text-transform:none;color:var(--cxf-muted)}
.cxf-strip .cxf-line.cxf-open{display:block;-webkit-line-clamp:unset}
.cxf-strip .cxf-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;gap:18px;min-width:0;margin:0}
/* from 640 px the arrows and the count one pager beside the name, "‹ 11 / 75 ›", the label alone above it across the
   column; the count's room kept for the longest it says (--cxf-count, its characters: 7 for "NN / NN", a device with more
   setting its own), so the arrows stay where they are as it changes; the column wider by the count, so a name has the
   room it had (19 Oct 2026, Cyrus, of Polite Disorder's strip on his iPad: "sloppy preset area on web": the arrows apart
   from each other and from the name, the count over them). A phone keeps the label and the count across its row. */
@media(min-width:640px){
  .cxf-strip .cxf-preset{grid-template-columns:minmax(0,1fr) auto auto auto auto;
    grid-template-areas:"eyebrow eyebrow eyebrow eyebrow eyebrow" "name prev count next share";column-gap:0}
  .cxf-strip .cxf-share{margin-left:2px}
  .cxf-strip .cxf-eyebrow,.cxf-strip .cxf-step{display:contents}
  .cxf-strip .cxf-eyebrow .cxf-kind{grid-area:eyebrow;margin:0 0 5px}
  .cxf-strip .cxf-count{grid-area:count;align-self:center;box-sizing:content-box;min-width:calc(var(--cxf-count, 7) * (1ch + .13em) + 1px);padding:0;
    text-align:center}
  .cxf-strip .cxf-step button:first-child{grid-area:prev}
  .cxf-strip .cxf-step button:last-child{grid-area:next}
  .cxf-strip .cxf-name{margin-right:8px}
}
/* Undo and Redo: one pair beside GENERATE, boxed as it is and as tall, each its arrow and its word, the arrows outward;
   an arrow lit while there is something to take back or put back, and with nothing, the word and the arrow quiet but
   the box kept, so the pair is always where the eye looks for it (19 Oct 2026, Cyrus: "Undo redo need to be easier to
   find or more defined on the devicesa") */
.cxf-strip .cxf-edit{display:flex;flex:none;margin:0}
.cxf-strip .cxf-edit button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:0;height:44px;min-height:44px;
  margin:0;padding:0 13px 0 11px;border:1px solid var(--cxf-line-2);border-right:0;border-radius:3px 0 0 3px;background:none;color:var(--cxf-ink);
  font:10px/1 var(--cxf-mono);letter-spacing:.12em;white-space:nowrap}
.cxf-strip .cxf-edit .cxf-redo{padding:0 11px 0 13px;border-right:1px solid var(--cxf-line-2);border-radius:0 3px 3px 0}
.cxf-strip .cxf-edit svg,.cxf-strip .cxf-edit .ui-icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;color:var(--cxf-accent)}
.cxf-strip .cxf-redo svg,.cxf-strip .cxf-redo .ui-icon{order:2}
.cxf-strip .cxf-edit button:disabled{opacity:1;cursor:default;color:var(--cxf-quiet)}
.cxf-strip .cxf-edit button:disabled svg,.cxf-strip .cxf-edit button:disabled .ui-icon{color:var(--cxf-quiet)}
.cxf-strip .cxf-edit button:active:not(:disabled){background:var(--cxf-accent-soft)}

/* GENERATE says what it is set to make; its settings are behind its arrow */
.cxf-strip .cxf-generate{position:relative;display:flex;align-items:stretch;min-width:0;margin:0}
.cxf-strip .cxf-gen{display:flex;align-items:center;gap:11px;width:auto;min-width:0;height:44px;min-height:44px;margin:0;padding:0 14px 0 13px;
  border:1px solid var(--cxf-line-2);border-right:0;border-radius:3px 0 0 3px;background:none;color:var(--cxf-ink);text-align:left;
  font:10px/1 var(--cxf-mono);letter-spacing:.1em}
.cxf-strip .cxf-gen>svg,.cxf-strip .cxf-gen>.ui-icon{width:19px;height:19px;flex:none;color:var(--cxf-accent)}
.cxf-strip .cxf-gen:disabled{opacity:.38;cursor:default}
.cxf-strip .cxf-gen-text{display:grid;gap:5px;min-width:0}
.cxf-strip .cxf-gen-text>:first-child{font:10px/1 var(--cxf-mono);letter-spacing:.12em;color:var(--cxf-ink)}
.cxf-strip .cxf-gen-sum{overflow:hidden;text-overflow:ellipsis;font:9px/1 var(--cxf-mono);letter-spacing:.1em;color:var(--cxf-quiet);
  text-transform:uppercase;white-space:nowrap}
.cxf-strip .cxf-gen-more{display:grid;place-items:center;flex:none;width:30px;min-width:30px;height:44px;min-height:44px;margin:0;padding:0;
  border:1px solid var(--cxf-line-2);border-radius:0 3px 3px 0;background:none;color:var(--cxf-muted)}
.cxf-strip .cxf-generate.cxf-open .cxf-gen-more{border-color:var(--cxf-accent-line);color:var(--cxf-accent)}

/* Save, Open and Export: in the row beside SONG where there is room, under FILE on a phone */
.cxf-strip .cxf-file{position:relative;display:flex;align-items:center;margin:0}
.cxf-strip .cxf-file-menu{display:none}
.cxf-strip .cxf-file>.cxf-menu{position:static;display:flex;flex-direction:row;gap:2px;min-width:0;padding:0;border:0;background:none;box-shadow:none}
.cxf-strip .cxf-file-item{display:inline-flex;align-items:center;gap:7px;width:auto;height:36px;min-height:36px;margin:0;padding:0 9px;border:0;
  border-radius:3px;background:none;color:var(--cxf-muted);font:12px/1 var(--cxf-sans);letter-spacing:0;white-space:nowrap;text-decoration:none}
.cxf-strip .cxf-file-item svg,.cxf-strip .cxf-file-item .ui-icon{width:16px;height:16px;flex:none}
/* Reset's sign, the frame's own (a turn back, the dot it comes back to), drawn as the other signs are on every device */
.cxf-strip .cxf-reset svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.cxf-strip .cxf-reset svg circle{fill:currentColor;stroke:none}
.cxf-strip .cxf-file-item:disabled{opacity:.38;cursor:default}
/* in the row, one boxed group, joined as Undo and Redo are, as tall and in the strip's own type, the same gap from SONG as
   SONG from GENERATE (19 Oct 2026, Cyrus, of the strip at 990 px: "sloppy preset area on web": Save and Open were its
   only words unboxed and in the page's type, after a rule, and from 768 to 1099 px pushed to the row's far end).
   FILE's items are buttons, the first and the last of them the group's ends */
@media(min-width:640px){
  .cxf-strip .cxf-file>.cxf-menu{gap:0}
  .cxf-strip .cxf-file-item{justify-content:center;gap:8px;height:44px;min-height:44px;padding:0 13px 0 11px;border:1px solid var(--cxf-line-2);
    border-right:0;border-radius:0;color:var(--cxf-ink);font:10px/1 var(--cxf-mono);letter-spacing:.12em;text-transform:uppercase}
  .cxf-strip .cxf-file-item:first-of-type{border-radius:3px 0 0 3px}
  .cxf-strip .cxf-file-item:last-of-type{border-right:1px solid var(--cxf-line-2);border-radius:0 3px 3px 0}
  .cxf-strip .cxf-file-item:only-of-type{border-radius:3px}
  .cxf-strip .cxf-file-item:active:not(:disabled){background:var(--cxf-accent-soft)}
}
@media(hover:hover){
  .cxf-strip .cxf-step button:hover,.cxf-strip .cxf-share:hover:not(:disabled),.cxf-strip .cxf-file-item:hover:not(:disabled){background:#ffffff08;color:var(--cxf-ink)}
  .cxf-strip .cxf-gen:hover:not(:disabled),.cxf-strip .cxf-gen-more:hover,.cxf-strip .cxf-edit button:hover:not(:disabled){
    border-color:var(--cxf-accent-line);background:var(--cxf-accent-soft)}
  .cxf-strip .cxf-name:hover strong{color:#fff}
}
@media(hover:hover) and (min-width:640px){
  .cxf-strip .cxf-file-item:hover:not(:disabled){border-color:var(--cxf-accent-line);background:var(--cxf-accent-soft)}
}

/* ---------- a menu: Generate's settings, FILE on a phone, the picture's VIEW; one open at a time ---------- */
.cxf-menu{position:absolute;z-index:60;top:calc(100% + 6px);right:0;display:none;flex-direction:column;align-items:stretch;gap:12px;min-width:236px;
  margin:0;padding:14px;border:1px solid var(--cxf-line-2);border-radius:4px;background:var(--cxf-menu);box-shadow:0 18px 40px #0009;
  box-sizing:border-box;text-align:left}
.cxf-open>.cxf-menu{display:flex}
.cxf-menu-title{margin:0;font:9px/1 var(--cxf-mono);letter-spacing:.13em;color:var(--cxf-quiet);text-transform:uppercase}
.cxf-menu-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
/* GENERATE's menu, one shape on every device (cx-frame.js, shapeGenerate; 1 Nov 2026, the family pass): GENERATE CHANGES,
   its choices as chips lit while on (a checkbox's label, or each of a select's choices, one lit at a time), AMOUNT a row
   of its own where the device has one, and its closing line, Undo takes it back. Named by the part, so a device's own
   rules for its checkboxes, selects and rows give way to these */
.cxf-strip .cxf-generate>.cxf-menu{width:max-content;max-width:min(320px,calc(100vw - 32px))}
.cxf-strip .cxf-generate .cxf-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.cxf-strip .cxf-generate .cxf-chips-label{flex:0 0 100%;margin:0 0 1px;font:9px/1 var(--cxf-mono);letter-spacing:.12em;color:var(--cxf-muted);
  text-transform:uppercase}
.cxf-strip .cxf-generate .cxf-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;width:auto;min-width:0;
  height:auto;min-height:32px;margin:0;padding:0 11px;border:1px solid var(--cxf-line-2);border-radius:3px;background:none;color:var(--cxf-muted);
  font:10px/1 var(--cxf-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;box-sizing:border-box}
.cxf-strip .cxf-generate .cxf-chip[aria-pressed=true],.cxf-strip .cxf-generate .cxf-chip:has(>input:checked){border-color:var(--cxf-accent-line);
  background:var(--cxf-accent-soft);color:var(--cxf-accent)}
.cxf-strip .cxf-generate .cxf-chip:disabled,.cxf-strip .cxf-generate .cxf-chip:has(>input:disabled){opacity:.38;cursor:default}
/* a checkbox under its chip: there for the keyboard and a screen reader, the chip its look */
.cxf-strip .cxf-generate .cxf-chip>input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:inherit}
.cxf-strip .cxf-generate .cxf-chip:has(>input:focus-visible){outline:2px solid var(--cxf-accent);outline-offset:2px}
.cxf-strip .cxf-generate .cxf-chip-source{display:none}
.cxf-strip .cxf-generate .cxf-gen-amount{display:grid;grid-template-columns:auto minmax(0,1fr) 4.5ch;align-items:center;gap:10px;width:auto;margin:0;
  padding:0;font:9px/1 var(--cxf-mono);letter-spacing:.12em;color:var(--cxf-muted);text-transform:uppercase}
.cxf-strip .cxf-generate .cxf-gen-amount>span{grid-column:1;margin:0;font:inherit;letter-spacing:inherit;color:inherit}
.cxf-strip .cxf-generate .cxf-gen-amount>input{grid-column:2;width:100%;min-width:0;margin:0;accent-color:var(--cxf-accent)}
.cxf-strip .cxf-generate .cxf-gen-amount>output{grid-column:3;min-width:0;text-align:right;font:10px/1 var(--cxf-mono);color:var(--cxf-ink);
  font-variant-numeric:tabular-nums}
.cxf-strip .cxf-generate .cxf-gen-note{max-width:260px;margin:0;font:11.5px/1.45 var(--cxf-sans);letter-spacing:0;color:var(--cxf-quiet);
  text-transform:none}
@media(hover:hover){.cxf-strip .cxf-generate .cxf-chip:hover:not(:disabled):not([aria-pressed=true]):not(:has(>input:checked)):not(:has(>input:disabled)){
  border-color:var(--cxf-muted);color:var(--cxf-ink)}}
@media(pointer:coarse){.cxf-strip .cxf-generate .cxf-chip{min-height:40px;padding:0 13px}}

/* ---------- the picture: its controls in its four corners, one small group each ---------- */
.cxf-corner{position:absolute;z-index:6;display:flex;gap:6px;margin:0;pointer-events:none}
.cxf-corner>*{pointer-events:auto}
.cxf-tl{left:16px;top:14px;flex-direction:column;align-items:flex-start}
.cxf-tr{right:16px;top:14px;flex-direction:column;align-items:flex-end}
.cxf-bl{left:16px;bottom:14px;align-items:flex-end}
.cxf-br{right:16px;bottom:14px;align-items:flex-end}
.cxf-readout{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;margin:0;padding:0;font:9px/1 var(--cxf-mono);letter-spacing:.1em;
  color:var(--cxf-quiet);white-space:nowrap}
.cxf-readout b{font-weight:400;color:var(--cxf-ink)}
.cxf-view{position:relative}
.cxf-view-button{display:inline-flex;align-items:center;gap:8px;width:auto;height:32px;min-height:32px;margin:0;padding:0 11px;
  border:1px solid var(--cxf-line-2);border-radius:3px;background:var(--cxf-glass);color:var(--cxf-ink);font:9px/1 var(--cxf-mono);letter-spacing:.12em}
.cxf-view-button svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cxf-view.cxf-open .cxf-view-button{border-color:var(--cxf-accent-line);color:var(--cxf-accent)}
.cxf-view>.cxf-menu{top:auto;bottom:calc(100% + 8px);left:0;right:auto;min-width:250px;max-width:calc(100vw - 32px);background:var(--cxf-glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* one line wherever it fits, two where it does not, as on a phone (on an iPad held upright one line had run past the
   picture's edge, the end of a long hint cut off: 23 Oct 2026, the pass) */
.cxf-hint{position:absolute;left:16px;right:16px;bottom:58px;z-index:5;box-sizing:border-box;margin:0;
  font:9px/1.5 var(--cxf-mono);letter-spacing:.06em;color:var(--cxf-quiet);text-align:center;text-wrap:balance;pointer-events:none}
.cxf-gen-more svg,.cxf-file-menu svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- a tab row: one row, which slides sideways where it is wider than the screen ---------- */
.cxf-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.cxf-tabs::-webkit-scrollbar{display:none}
.cxf-tabs>*{flex:none}
/* a tab's badge (its count, or its state named) kept to one short line, so a long name, a chain's, never pushes its tab
   past the screen; the device gives the tab its whole name as its title */
.cxf-tabs .cxf-badge{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxf-tabs.cxf-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}

/* ---------- the dialogs every device has: Export (how long, which format) and Keep (what was made) ---------- */
.cxf-dialog{box-sizing:border-box;width:min(520px,94vw);max-height:90vh;overflow:auto;margin:auto;padding:24px;border:1px solid var(--cxf-dialog-edge);
  border-radius:6px;background:var(--cxf-dialog);color:var(--cxf-ink);box-shadow:0 30px 90px #0009}
.cxf-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 18px;font:9px/1 var(--cxf-mono);letter-spacing:.055em;
  color:var(--cxf-muted)}
/* every dialog the same over the page, the help's and the frame's alike (1 Nov 2026, the family pass): the page behind
   dimmed and softened as much on every device (two had the browser's own, a tenth dimmed and crisp behind the help), and
   CLOSE at the top right of its head, in the accent's outline (button.cxf-close where a device's head is its own). The
   backdrop's colours written out, as a backdrop takes none of the page's properties in every WebKit the apps run on */
dialog::backdrop{background:rgba(5,8,11,.76);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cxf-dialog-top button,button.cxf-close{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:0;height:auto;min-height:32px;
  margin:0;padding:0 12px;border:1px solid var(--cxf-accent-line);border-radius:3px;background:none;color:var(--cxf-accent);font:9px/1 var(--cxf-mono);
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
@media(hover:hover){.cxf-dialog-top button:hover,button.cxf-close:hover{border-color:var(--cxf-accent);background:var(--cxf-accent-soft)}}
@media(pointer:coarse){.cxf-dialog-top button,button.cxf-close{min-height:40px;padding:0 14px}}
.cxf-dialog h2{margin:0;font:400 26px/1.15 var(--cxf-sans);letter-spacing:-.03em;color:var(--cxf-ink)}
.cxf-dialog>p{margin:12px 0 0;font:13px/1.6 var(--cxf-sans);color:var(--cxf-muted)}
.cxf-dialog .cxf-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:center;margin:12px 0 0;font:9px/1.3 var(--cxf-mono);
  letter-spacing:.05em;color:var(--cxf-muted)}
.cxf-dialog .cxf-row select{width:100%;min-height:34px;margin:0}
.cxf-dialog .cxf-row>span+span{display:flex;align-items:center;gap:8px;font:12px/1.4 var(--cxf-sans);letter-spacing:0}
.cxf-dialog progress{display:block;width:100%;height:6px;margin:18px 0 0;accent-color:var(--cxf-accent)}
.cxf-dialog-actions{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0}
.cxf-dialog-actions>a,.cxf-dialog-actions>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;margin:0;
  padding:0 18px;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;text-decoration:none;cursor:pointer}
.cxf-dialog-actions>.cxf-primary{border-color:var(--cxf-accent);color:var(--cxf-accent)}
.cxf-dialog-actions>[hidden]{display:none}
.cxf-dialog-actions svg{width:12px;height:12px;fill:currentColor;flex:none}
.cxf-dialog .cxf-dialog-note{margin:14px 0 0;font:12px/1.5 var(--cxf-sans);color:var(--cxf-muted)}
@media(hover:hover){.cxf-dialog-actions>a:hover,.cxf-dialog-actions>button:hover:not(:disabled){background:#ffffff08;border-color:var(--cxf-muted)}
  .cxf-dialog-actions>.cxf-primary:hover{border-color:var(--cxf-accent);background:var(--cxf-accent-soft)}}

/* ---------- a laptop, or an iPad held sideways: one row still, the levels narrower and VISUAL by its sign ---------- */
@media(min-width:1100px) and (max-width:1279px){
  .cxf-bar{column-gap:12px}
  /* the name whole, the tempo and the output giving up the room it needs (Matter / Field's ran 23 px past its box at
     1100 px, the tempo and the output at their widest) */
  .cxf-bar .cxf-id{min-width:max-content}
  .cxf-bar .cxf-transport>button{padding:0 10px}
  .cxf-bar .cxf-transport>.cxf-play,.cxf-bar .cxf-transport>.cxf-play[aria-pressed=true]{min-width:104px}
  .cxf-bar .cxf-visual{width:38px;padding:0}
  .cxf-bar .cxf-visual span{display:none}
}
/* the strip on one row and short of room, from 1100 to 1439 px: the gaps closer, Undo and Redo by their arrows, boxed,
   and GENERATE no wider than 200 px, its line the longest of its forms that fits, so the preset's line keeps its room
   (1 Nov 2026, the family pass: each device had closed these at widths of its own, the line left 79 to 104 px at 1100) */
@media(min-width:1100px) and (max-width:1439px){
  .cxf-strip{column-gap:12px}
  .cxf-strip .cxf-actions{gap:10px}
  .cxf-strip .cxf-edit button,.cxf-strip .cxf-edit .cxf-redo{width:44px;padding:0}
  .cxf-strip .cxf-edit-word{display:none}
  .cxf-strip .cxf-gen{max-width:200px}
}

/* ---------- FILE's form by the width alone, the same on every device ---------- */
/* (1 Nov 2026, the family pass: at 1440 px two devices showed FILE by its signs and two by its words, at 1180 two a
   menu and two signs.) A menu on a phone and from 1100 to 1279 px, where the strip is one row and tightest; its items
   by their signs from 640 to 1099 px and from 1280 to 1599; by their words from 1600. Four words beside GENERATE and
   SONG are wider than an upright iPad's row, so up to 1099 px they go by their signs; each sign is still named by its
   word for a screen reader and by its title. The preset's line and GENERATE's summary give way round FILE, never FILE.
   Named from the root, so a device's own rules for its items give way to these */
@media(min-width:640px) and (max-width:1099px),(min-width:1280px) and (max-width:1599px){
  :root .cxf-strip .cxf-file .cxf-file-item{width:44px;padding:0;justify-content:center}
  :root .cxf-strip .cxf-file .cxf-file-item>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(max-width:639px),(min-width:1100px) and (max-width:1279px){
  :root .cxf-strip .cxf-file-menu{display:inline-flex;align-items:center;gap:7px;width:auto;height:44px;min-height:44px;margin:0;padding: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:.1em}
  :root .cxf-strip .cxf-file>.cxf-menu{position:absolute;z-index:60;top:calc(100% + 6px);right:0;left:auto;display:none;flex-direction:column;
    align-items:stretch;gap:0;min-width:180px;padding:8px;border:1px solid var(--cxf-line-2);border-radius:4px;background:var(--cxf-menu);
    box-shadow:0 18px 40px #0009}
  :root .cxf-strip .cxf-file.cxf-open>.cxf-menu{display:flex}
  :root .cxf-strip .cxf-file.cxf-open>.cxf-file-menu{border-color:var(--cxf-accent-line);color:var(--cxf-accent)}
  :root .cxf-strip .cxf-file .cxf-file-item{justify-content:flex-start;width:auto;height:44px;min-height:44px;padding:0 9px;border:0;border-radius:3px;
    color:var(--cxf-ink);font:12px/1 var(--cxf-sans);letter-spacing:0;text-transform:none}
  :root .cxf-strip .cxf-file .cxf-file-item>span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none}
}
@media(hover:hover) and (max-width:639px),(hover:hover) and (min-width:1100px) and (max-width:1279px){
  :root .cxf-strip .cxf-file-menu:hover{border-color:var(--cxf-accent-line);background:var(--cxf-accent-soft)}
  :root .cxf-strip .cxf-file .cxf-file-item:hover:not(:disabled){background:#ffffff08}
}

/* ---------- an iPad held upright, a small laptop: two rows, the transport's the one that stays ---------- */
@media(max-width:1099px){
  .cxf-bar{grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-areas:"id . rec visual help" "transport transport 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}
  /* the preset's room the longest name's beside the pager (Polite Disorder's, Waltz for Broken Machines, 239 px, whole
     with a finger, as it was before the pager); the actions one even run from the left */
  .cxf-strip{grid-template-columns:minmax(calc(230px + var(--cxf-share-room)),calc(410px + var(--cxf-share-room))) minmax(0,1fr);
    grid-template-areas:"preset line" "actions actions";row-gap:10px}
  .cxf-strip .cxf-actions{justify-content:flex-start;gap:14px}
}
/* the preset's line beside the name block from its top, as the label is (centred on the block, its top met nothing) */
@media(min-width:640px) and (max-width:1099px){
  .cxf-strip .cxf-line{align-self:start;margin-top:-2px}
}

/* ---------- a phone held sideways, a small tablet: the bar in a phone's three rows, its strip a tablet's ---------- */
/* from 640 to 767 px the transport and the levels together are wider than their row (Polite Disorder's name and
   transport ran 20 px past their boxes at 640, Matter / Field's transport over TEMPO up to 744), so each takes a row of
   its own, as on a phone, the levels side by side with their meters and the bar's position, the transport across */
@media(min-width:640px) and (max-width:767px){
  .cxf-bar{grid-template-areas:"id . rec visual help" "levels levels levels levels levels" "transport transport transport transport transport"}
  .cxf-bar .cxf-levels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px}
  .cxf-bar .cxf-tempo,.cxf-bar .cxf-output{width:auto}
  .cxf-bar .cxf-tempo{padding:0}
  .cxf-bar .cxf-tempo::before{display:none}
  .cxf-bar .cxf-transport>button{flex:1}
  .cxf-bar .cxf-transport>.cxf-play,.cxf-bar .cxf-transport>.cxf-play[aria-pressed=true]{flex:1.75}
  .cxf-strip .cxf-edit button,.cxf-strip .cxf-edit .cxf-redo{width:44px;padding:0}
  .cxf-strip .cxf-edit-word{display:none}
}

/* ---------- a phone: three rows (the name with REC, VISUAL and ?; the levels; the transport), the strip stacked ---------- */
@media(max-width:639px){
  :where(:root){--cxf-pad:16px}
  .cxf-bar{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"id rec visual help" "levels levels levels levels"
    "transport transport transport transport";column-gap:4px;row-gap:12px;min-height:0;padding:10px var(--cxf-pad)}
  .cxf-bar .cxf-id{gap:11px}
  .cxf-bar .cxf-mark{width:28px;height:28px}
  /* a name longer than its room breaks at its slash, onto two lines (Polite Disorder's under 414 px, Matter / Field's
     under 360), never under REC */
  .cxf-bar .cxf-id h1{font-size:19px;white-space:normal}
  .cxf-bar .cxf-id .cxf-kind{display:none}
  .cxf-bar .cxf-levels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px}
  .cxf-bar .cxf-tempo,.cxf-bar .cxf-output{width:auto;padding:0}
  .cxf-bar .cxf-tempo::before,.cxf-bar .cxf-output::before,.cxf-bar .cxf-rec::before{display:none}
  .cxf-bar .cxf-output{grid-template-areas:"k v mute" "s s mute";row-gap:2px}
  .cxf-bar .cxf-meter,.cxf-bar .cxf-pos{display:none}
  .cxf-bar .cxf-v output,.cxf-bar .cxf-v b,.cxf-bar .cxf-v .cxf-pct{font-size:15px}
  .cxf-bar .cxf-transport>button{flex:1;height:46px;min-height:46px;padding:0 4px;font-size:10px;letter-spacing:.08em}
  .cxf-bar .cxf-transport>.cxf-play,.cxf-bar .cxf-transport>.cxf-play[aria-pressed=true]{flex:1.75;min-width:0}
  .cxf-bar .cxf-rec{height:38px;min-height:38px;padding:0 8px}
  .cxf-bar .cxf-visual{width:38px;height:38px;min-height:38px;padding:0}
  .cxf-bar .cxf-visual span{display:none}
  .cxf-bar .cxf-help{width:38px;min-width:38px;height:38px;min-height:38px}
  .cxf-strip{grid-template-columns:minmax(0,1fr);grid-template-areas:"preset" "line" "actions";row-gap:6px;padding:11px var(--cxf-pad) 12px}
  .cxf-strip .cxf-eyebrow{margin-bottom:3px}
  .cxf-strip:has(.cxf-share) .cxf-preset{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"eyebrow eyebrow eyebrow" "name step share"}
  .cxf-strip .cxf-name strong{font-size:21px}
  .cxf-strip .cxf-line{-webkit-line-clamp:1;font-size:12.5px;cursor:pointer}
  .cxf-strip .cxf-actions{gap:6px;margin-top:2px}
  /* Undo and Redo by their arrows alone, boxed as SONG and FILE are beside them, so GENERATE keeps its word */
  .cxf-strip .cxf-edit button,.cxf-strip .cxf-edit .cxf-redo{width:44px;padding:0}
  .cxf-strip .cxf-edit-word{display:none}
  .cxf-strip .cxf-generate{flex:1}
  .cxf-strip .cxf-gen{flex:1}
  .cxf-strip .cxf-generate>.cxf-menu{left:0;right:auto}
  .cxf-tl,.cxf-tr{top:12px}
  .cxf-tl,.cxf-bl{left:12px}
  .cxf-tr,.cxf-br{right:12px}
  .cxf-bl,.cxf-br{bottom:12px}
  .cxf-hint{left:12px;right:12px;bottom:60px;white-space:normal;font-size:9px}
  .cxf-dialog{padding:19px;max-height:92dvh}
}

/* the narrowest phones (under 360 px): GENERATE its word and its summary, its sign put away, so its word is whole; and
   OUTPUT more of the row than TEMPO, which needs less (half each, OUTPUT's word ran into its level at 320 px) */
@media(max-width:359px){
  .cxf-strip .cxf-gen>svg,.cxf-strip .cxf-gen>.ui-icon{display:none}
  .cxf-strip .cxf-edit button,.cxf-strip .cxf-edit .cxf-redo{width:40px}
  .cxf-bar .cxf-levels{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
}

/* phones under 380 px: OUTPUT's word alone, its arrow put away, so its level keeps the room of 100% beside it with space
   between (22 Oct 2026, a number keeps its room); the word still opens the master output */
@media(max-width:379px){.cxf-bar .cxf-output .cxf-k>svg,.cxf-bar .cxf-output .cxf-k>.ui-icon{display:none}}

/* a finger's size where nothing points but a finger */
@media(pointer:coarse){
  .cxf-strip .cxf-step button,.cxf-strip .cxf-edit button,.cxf-strip .cxf-share{min-width:40px;min-height:40px}
  .cxf-strip:has(.cxf-share){--cxf-share-room:42px}
  .cxf-bar .cxf-mute{width:40px;min-width:40px;height:40px;min-height:40px}
  .cxf-view-button{min-height:40px}
  /* OUTPUT, a word 9 px high, a finger's size round it (1 Nov 2026, the family pass: 70 by 22 px on a phone): the words'
     row of TEMPO and OUTPUT 24 px high, and OUTPUT's press reaching up through the room above it and out to its left
     (::after, as the lock's), short of its slider below and of its level beside it, 64 by 36 px or so (out to its right
     too it would be taken for words past their box); and the two sliders a finger's height */
  .cxf-bar .cxf-tempo>.cxf-k,.cxf-bar .cxf-output>.cxf-k{min-height:24px}
  .cxf-bar button.cxf-k{position:relative}
  .cxf-bar button.cxf-k::after{content:"";position:absolute;inset:-12px 0 0 -10px}
  .cxf-bar .cxf-s{height:28px;margin:-4px 0}
}

/* ---------- in a browser: GET THE APP (cx-unlock.js), at the bar's end after ?, and what the app keeps, tagged ---------- */
/* in the bar only where the device's page in a browser puts it (cxf-has-get), so every app's and plug-in's bar is as it
   was; its form (its word and its sign, or its sign) the one that fits, cx-unlock.js choosing as the bar's width changes,
   else under FILE */
.cxf-bar.cxf-has-get{grid-template-columns:minmax(var(--cxf-id-room),max-content) auto minmax(0,1fr) var(--cxf-tempo-track,minmax(124px,168px))
  minmax(160px,176px) auto auto auto auto;grid-template-areas:"id transport . tempo output rec visual help get"}
@media(max-width:1099px){.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"}}
@media(min-width:640px) and (max-width:767px){.cxf-bar.cxf-has-get{grid-template-areas:"id . rec visual help get" "levels levels levels levels levels levels"
  "transport transport transport transport transport transport"}}
@media(max-width:639px){.cxf-bar.cxf-has-get{grid-template-columns:minmax(0,1fr) auto auto auto auto;grid-template-areas:"id rec visual help get"
  "levels levels levels levels levels" "transport transport transport transport transport"}}
.cxf-bar .cxf-get{grid-area:get;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:36px;min-height:36px;margin:0;
  padding:0 12px;border:1px solid var(--cxf-accent-line);border-radius:3px;background:none;color:var(--cxf-accent);font:10px/1 var(--cxf-mono);
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.cxf-bar .cxf-get[hidden]{display:none}
.cxf-bar .cxf-get svg,.cxf-strip .cxf-get-item svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;
  stroke-linejoin:round}
.cxf-bar .cxf-get[data-form=short]{width:36px;padding:0}
.cxf-bar .cxf-get[data-form=short] .cxf-get-word{display:none}
/* (room to spare while its place is being chosen) */
.cxf-bar .cxf-get.cxf-get-spare{margin-left:16px}
.cxf-strip .cxf-get-item{color:var(--cxf-accent)}
@media(hover:hover){.cxf-bar .cxf-get:hover{background:var(--cxf-accent-soft)}}
@media(max-width:639px){.cxf-bar .cxf-get{height:38px;min-height:38px;padding:0 9px}.cxf-bar .cxf-get[data-form=short]{width:38px;padding:0}}
/* what the app keeps, the browser's control for it tagged APP (unlock.ownSound() and the like opening GET THE APP's
   dialog when it is pressed); the tag gone once a code is taken */
.cxu-locked::after{content:"APP";display:inline-block;margin-left:7px;padding:2px 4px 1px;border:1px solid var(--cxf-accent-line);border-radius:2px;
  color:var(--cxf-accent);font:9px/1 var(--cxf-mono);letter-spacing:.1em;vertical-align:1px}

/* ---------- the small print where only a finger points ---------- */
/* the frame's 9 px words a size up on a touch screen (1 Nov 2026, the CS/M site's chat's pass over the four devices,
   Cyrus: "Do all as you recommend", to its "The tiny labels (TEMPO, OUTPUT, preset counts) are 9 px, smaller than
   iPhone's own minimum. Recommended: 10–11 px on touch screens"): 10 px, each word's line height, spacing and room as
   its own rule has them (a room in ch grows with it, so a count or a value still holds still). Last in the file, so it
   comes after each word's rules for its widths; a word a width puts away by its size (TEMPO's BPM beside HOST under
   360 px) keeps it, its rule the stronger */
@media(pointer:coarse){
  .cxf-bar .cxf-id .cxf-kind,.cxf-bar .cxf-k,.cxf-bar .cxf-tempo>.cxf-host,.cxf-bar .cxf-k .cxf-host,.cxf-bar .cxf-v,.cxf-bar .cxf-pos>:first-child,
  .cxf-strip .cxf-eyebrow,.cxf-strip .cxf-gen-sum,.cxf-strip .cxf-share-note,.cxf-menu-title,.cxf-strip .cxf-generate .cxf-chips-label,
  .cxf-strip .cxf-generate .cxf-gen-amount,.cxf-readout,.cxf-view-button,.cxf-hint,.cxf-dialog-top,.cxf-dialog-top button,button.cxf-close,
  .cxf-dialog .cxf-row,.cxu-locked::after{font-size:10px}
  /* where the room is short, a word as wide as it was at 9 px, its letters closer: GENERATE's line, so each device's
     longest form still fits where it did (at its own spacing a 13-letter line was cut at 360 px); TEMPO's and OUTPUT's
     words, their units and HOST, so TEMPO keeps clear of its lock (at their own spacing it ran into it from 770 to
     870 px and at 320) */
  .cxf-strip .cxf-gen-sum{letter-spacing:.02em}
  .cxf-bar .cxf-k{letter-spacing:.04em}
  .cxf-bar .cxf-v{letter-spacing:0}
  .cxf-bar .cxf-tempo>.cxf-host,.cxf-bar .cxf-k .cxf-host{letter-spacing:.03em}
}
/* (and the preset's label and count as wide as they were at 9 px: on a phone across their row, so a long group keeps
   whole where it did (Polite Disorder's SHOW AND TELL · SOUND LANE was cut short at 320 to 390 px at its own spacing);
   from 640 px the count's room beside the arrows, so the name keeps its own (Polite Disorder's longest kit was cut from
   640 to 1032 px)) */
@media(pointer:coarse){.cxf-strip .cxf-eyebrow{letter-spacing:.06em}}
@media(pointer:coarse) and (min-width:640px){.cxf-strip .cxf-count{min-width:calc(var(--cxf-count, 7) * (1ch + .06em) + 1px)}}