/* v2 shell (LEI-288): the layout from docs/DESIGN.md section 3. The live
   site's own top bar, sidebar and panels, laid out in a grid with a tool
   rail, a wide artboard and the recorder strip. v2.css lays blocks out;
   the parts wear style.css. */
body.v2-on {
  --v2-ink: var(--text);
  --v2-ink-2: var(--text-muted);
  --v2-ink-3: var(--text-soft);
  --v2-line: var(--border-strong);
  --v2-line-2: var(--border);
  --v2-ground: var(--bg);
  --v2-paper: var(--surface);
  --v2-record: #e3452b;
  --v2-t0: 11px; --v2-t1: 12px; --v2-t2: 13px; --v2-t3: 14px; --v2-t4: 16px;
  --v2-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  background: var(--v2-ground);
  color: var(--v2-ink);
  overflow: hidden;
  /* the top bar breathes: 60 tall, its controls centred, so the wordmark
     and the buttons sit clear of the window's edge (Raad, 2026-09-21) */
  --topbar-h: 60px;
}
/* the Pattern's one picker replaces the Field select and the follow chip */
.st-pattern-picker .row:has(#fluid-field), .st-pattern-picker #fluid-inherit { display: none; }
/* the classic layout stands down; its sidebar lives in the side card now */
body.v2-on > .layout, body.v2-on .section-nav, body.v2-on .jump-rail { display: none !important; }

/* the grid: the top bar, then the tool rail, the artboard, the side; the strip at the foot */
.v2-app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 380px;
  grid-template-rows: var(--topbar-h, 48px) minmax(0, 1fr) auto;
  column-gap: 16px;
  padding: 0 16px;
}
body.v2-on .topbar.v2-top { grid-column: 1 / -1; margin: 0 -16px; gap: 16px; }
body.v2-on .topbar .brand-sub { display: none; }
/* Dither and Raw sit in the top bar's middle (until the selected row carries it) */
body.v2-on .topbar .stage-toolbar { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 10px; }
body.v2-on .stage-toolbar .stage-meta { display: none; }
/* the frame line (Raad, 2026-10-01, the top area): the aspect as a ratio,
   the size only on Custom, Fit and Crop, the Transparency checker; on a desk
   in the top bar beside Dither and Raw, on a tablet or a phone one slim line
   right above the picture */
body.v2-on .v2-frameline { flex: none; display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; }
/* in the top bar the frame line keeps its own width beside Dither and Raw (the bar's stage rule would stretch it) */
body.v2-on .topbar .v2-frameline { flex: none; justify-content: flex-start; margin-left: 4px; }
/* small on every screen: the live touch rule makes these 40 to 44 tall under 880 */
body.v2-on .v2-frameline #aspect-select, body.v2-on .v2-frameline .dim-input { min-height: 32px; height: 32px; }
body.v2-on .v2-frameline .size-controls { width: auto; flex: none; flex-wrap: nowrap; gap: 6px; }
body.v2-on .v2-frameline #aspect-select { width: auto; flex: none; padding-top: 0; padding-bottom: 0; font-size: 12px; }
body.v2-on .v2-frameline:not(.is-custom) #output-w, body.v2-on .v2-frameline:not(.is-custom) #output-h, body.v2-on .v2-frameline:not(.is-custom) .dim-sep { display: none; }
body.v2-on .v2-frameline .dim-input { width: 58px; font-size: 12px; }
body.v2-on .v2-checker-btn { flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); display: grid; place-items: center; cursor: pointer; }
body.v2-on .v2-checker-btn svg { width: 15px; height: 15px; }
body.v2-on .v2-checker-btn:hover { color: var(--text); }
body.v2-on .v2-checker-btn.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* the phone's one tool button: the current tool and a chevron; its pop-up is the rail itself */
.v2-tool-now { flex: none; height: 32px; padding: 0 8px 0 10px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; }
.v2-tool-now svg { width: 16px; height: 16px; }
.v2-tool-now .v2-tool-chev { width: 10px; height: 10px; color: var(--text-muted); }
.v2-tool-now.is-on { background: var(--surface-2); }
/* the play line: Record, Play and the clock under the picture on every tab, the toast at its right end */
.v2-playline { justify-self: stretch; display: flex; align-items: center; gap: 8px; min-height: 44px; padding-top: 8px; min-width: 0; font-feature-settings: "tnum" 1; }
/* the pill: one line, 999 radius, transparent; on is ink */
.v2-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; font: 500 13px/1 var(--font-sans, system-ui); color: var(--text); cursor: pointer; white-space: nowrap; }
.v2-pill.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* the status read is a toast at the frame line's right end */
.v2-toast { position: fixed; top: calc(var(--topbar-h, 48px) + 8px); right: 16px; z-index: 40; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.08); font: 400 11px/1 var(--font-mono); color: var(--text-muted); opacity: 0; transform: translateY(-4px); transition: opacity var(--t), transform var(--t); pointer-events: none; }
.v2-toast.is-on { opacity: 1; transform: none; }
.v2-playline .v2-toast { position: static; margin-left: auto; box-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.v2-toast .status { display: flex; align-items: center; gap: 6px; }

/* the tool rail: a card of icon buttons, one on */
.v2-toolrail { margin: 12px 0; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0,0,0,.06); align-self: start; }
.v2-toolrail .v2-tool { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); display: grid; place-items: center; cursor: pointer; }
.v2-toolrail .v2-tool svg { width: 16px; height: 16px; }
.v2-toolrail .v2-tool:hover { background: var(--surface-2); color: var(--text); }
.v2-toolrail .v2-tool.is-on { background: var(--accent); color: var(--on-accent); }
.v2-toolrail .v2-tool.is-soft { color: var(--text-soft); cursor: default; }
.v2-toolrail .v2-tool:nth-child(3) { margin-top: 8px; }
body[data-v2-tool="eyedropper"] #canvas { cursor: crosshair; }
body[data-v2-tool="text"] #canvas { cursor: text; }
body[data-v2-tool="crop"] #canvas { cursor: move; touch-action: none; }
body[data-v2-tool="gradient"] #canvas { cursor: crosshair; touch-action: none; }

/* the stage: a grid, so the artboard's row is definite and the canvas fits inside it */
.v2-stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; align-items: center; padding: 12px 0; min-height: 0; min-width: 0; }
.v2-stage .canvas-wrap { height: 100%; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.v2-stage .canvas-wrap canvas { max-width: 100%; max-height: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08); }
/* the empty artboard reads as paper; the Transparency pill shows the checker */
body.v2-on:not(.v2-checker) .canvas-wrap { background-image: none; background-color: var(--v2-paper); }

/* the side: a card holding the live site's own sidebar */
/* the card grows and shrinks with the open tab's content (Raad, 2026-09-21): a short
   tab is a short card; a tall one stops at the artboard's foot and scrolls inside */
.v2-side { position: relative; margin: 12px 0; min-height: 0; max-height: calc(100% - 24px); align-self: start; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0,0,0,.06); overflow: hidden; }
/* the sidebar sits in the card's flow, whatever its own rules say about the viewport */
/* the studio's own rule pins the sidebar at 340 wide; in the card it is the card's width */
body.v2-on .v2-side .sidebar { position: relative !important; inset: auto; width: 100% !important; height: auto !important; max-height: none; min-height: 0; margin: 0 !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; display: flex; flex-direction: column; flex: 0 1 auto; }
body.v2-on .v2-side .sidebar-pinned { position: relative; flex: none; max-height: 42vh; overflow: auto; }
body.v2-on .v2-side .sidebar-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 0; }
/* the Layers head carries + and the fold; a press anywhere on it folds or opens the stack */
body.v2-on .sidebar-pinned .panel-head { cursor: pointer; }
body.v2-on .sidebar-pinned .panel-head .v2-head-btns { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
/* the Whole Artwork row at the top of the stack: a row like any layer's, its tag the frame's size */
body.v2-on .sidebar-pinned .v2-frame-row { --sel-hue: var(--accent); cursor: pointer; }
body.v2-on .sidebar-pinned .v2-frame-row .v2-kindtag { right: 12px; text-transform: none; letter-spacing: 0; }
body.v2-on .sidebar-pinned .v2-frame-row .layer-row-name { padding-right: 96px; }
/* the frame's own tag stays when a layer's tag is removed */
body.v2-on .sidebar-pinned .v2-frame-row:not(.is-sel) .v2-frame-tag { color: var(--text-soft); }
body.v2-on .sidebar-pinned .v2-add, body.v2-on .sidebar-pinned .v2-fold { width: 28px; height: 28px; border-radius: 50%; padding: 0; border: 1px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; color: var(--text); cursor: pointer; }
/* the fold is the plain chevron every panel head wears, on the same line as theirs */
/* its hit area is 28 wide with the chevron at its right end, so a click meant for it never lands on the + (Raad, 2026-09-29) */
body.v2-on .sidebar-pinned .v2-fold { width: 28px; height: 28px; border-radius: 0; color: var(--text-muted); background: transparent; border: 0; display: grid; place-items: center end; }
body.v2-on .sidebar-pinned .panel.is-closed .v2-fold .chev { transform: rotate(-45deg); }
body.v2-on .sidebar-pinned .v2-add.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
body.v2-on .sidebar-pinned .panel.is-closed .panel-body { display: none; }
body.v2-on .sidebar-pinned .v2-icons { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; }
body.v2-on .sidebar-pinned .v2-ic { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: var(--surface-2); color: var(--text-muted); font: 600 10px/1 var(--font-mono); cursor: pointer; }
body.v2-on .sidebar-pinned .v2-ic.is-sel { outline: 2px solid var(--accent); outline-offset: -1px; color: var(--text); }
/* a row is one line; no note on a row; no add row (the + is the way) */
body.v2-on .layer-row .layer-row-note, body.v2-on .st-add-row { display: none; }
/* the picker: a card under the +, one kind per line */
/* it floats from the side card's root, over the stack, on solid paper (the
   sidebar's own --surface is glass, so the body's alias is the fill) */
body.v2-on > .v2-picker { position: fixed; top: 46px; right: 28px; width: 232px; z-index: 60; background: var(--v2-paper); border: 1px solid var(--border-strong); border-radius: 10px; padding: 6px; box-shadow: 0 10px 30px rgba(21, 22, 26, .14); }
body.v2-on .v2-picker .v2-kind { display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: 10px; width: 100%; min-height: 38px; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
body.v2-on .v2-picker .v2-kind:hover, body.v2-on .v2-picker .v2-kind:focus-visible { background: var(--surface-2); }
body.v2-on .v2-picker .v2-kind .st-add-icon { width: 28px; height: 28px; margin: 0; pointer-events: none; }
body.v2-on .v2-picker .v2-kind .v2-kn { font: 500 13px/1.2 var(--font-sans, system-ui); }
body.v2-on .v2-picker .v2-kind .v2-kn small { display: block; font: 400 11px/1.3 var(--font-mono); color: var(--text-soft); margin-top: 2px; }
body.v2-on .v2-picker .v2-sep { height: 1px; background: var(--border); margin: 6px 4px; }
/* the row's arrows sit on the row's centre line like the eye and the ✕ (the classic 4 px drop is gone) */
body.v2-on .layer-row .st-arrows { margin-top: 0; }
/* the kind tag (Dithered or Raw) on the selected row's right side, clear of the eye and the arrows */
body.v2-on .layer-row .v2-kindtag { position: absolute; right: 68px; top: 50%; translate: 0 -50%; font: 500 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); pointer-events: none; }
body.v2-on .layer-row.st-grabbable.is-sel .v2-kindtag { right: 120px; }
body.v2-on .layer-row.is-sel .layer-row-name { padding-right: 120px; }
body.v2-on .layer-row.st-grabbable.is-sel .layer-row-name { padding-right: 172px; }
/* the artboard's corners match the live site: the frame wears the quiet line and the card radius, the canvas its 6 */
body.v2-on .v2-stage .canvas-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); }
body.v2-on .v2-stage .canvas-wrap canvas { border-radius: 6px; }
/* the scene read in the strip */
.v2-inst .rec-scene { flex: none; font: 400 var(--v2-t0)/1 var(--v2-mono); color: var(--v2-ink-2); white-space: nowrap; }
/* the old Same as Source chips: the Follow the Source switch says it now */
body.v2-on #grid-inherit, body.v2-on #marks-inherit, body.v2-on #color-inherit { display: none; }
/* the Studio host keeps its own head in the Compose tab, as on the live site */
/* no long help cues in the panels (Raad); the info mark carries the one line */
body.v2-on .v2-side .panel-body > p.hint { display: none; }

/* recorder */
/* v2-recorder.js draws the timeline strip into .v2-inst: the transport, the
   ruler, the Scenes lane over the Track lane (V1 over A1), all full width and
   always the same height. Shell tokens only, so both themes follow the theme
   button. The timeline is the truth: the clips are the scenes. */
body.v2-on .v2-app { grid-template-rows: var(--topbar-h, 48px) minmax(0, 1fr) 198px; }
.v2-inst {
  --v2-bass: #d64545; --v2-mids: #e0a12b; --v2-treble: #2b9c8e; --v2-level: #7a6fd6;
  --rec-lane: 104px;
  position: relative; grid-column: 1 / -1;
  display: block; overflow: hidden;
  border-top: 1px solid var(--v2-line-2);
  font: 400 var(--v2-t2)/1.3 var(--font-sans, system-ui);
  font-feature-settings: "tnum" 1;
}
.v2-inst .rec-stash { position: absolute; left: -9999px; top: 0; width: 320px; height: 1px; overflow: hidden; }
.v2-inst .rec-strip { display: flex; flex-direction: column; min-width: 0; padding-bottom: 6px; }
:is(.v2-inst, .v2-playline) button { font: inherit; color: inherit; cursor: pointer; }
:is(.v2-inst, .v2-playline) button:disabled { opacity: .38; cursor: default; }
:is(.v2-inst, .v2-playline) button:focus-visible { outline: 2px solid var(--v2-ink); outline-offset: 2px; }

/* row 1: the transport */
.v2-inst .rec-transport { height: 44px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.v2-inst .rec-tp-btns { display: flex; align-items: center; gap: 8px; flex: none; }
:is(.v2-inst, .v2-playline) .rec-btn {
  width: 32px; height: 32px; border-radius: 50%; padding: 0; flex: none;
  border: 1px solid var(--v2-line); background: var(--v2-paper);
  display: grid; place-items: center; color: var(--v2-ink);
}
:is(.v2-inst, .v2-playline) .rec-btn.rec-rec { border: 2px solid var(--v2-record); background: transparent; }
:is(.v2-inst, .v2-playline) .rec-btn.rec-rec i { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--v2-record); }
:is(.v2-inst, .v2-playline) .rec-btn.rec-rec.is-on i { border-radius: 2px; }
:is(.v2-inst, .v2-playline) .rec-clock { flex: none; font: 500 14px/1 var(--v2-mono); color: var(--v2-ink); white-space: nowrap; }
:is(.v2-inst, .v2-playline) .rec-clock .rec-of { color: var(--v2-ink-3); }
.v2-inst .rec-io-wrap { display: inline-flex; gap: 6px; flex: none; }
.v2-inst .rec-io { font-family: var(--v2-mono); font-weight: 400; }
.v2-inst .rec-meta { flex: none; font: 400 var(--v2-t0)/1 var(--v2-mono); color: var(--v2-ink-2); white-space: nowrap; }
/* on a narrow screen the transport keeps the transport: the format read
   steps aside so the pills stay whole */
@media (max-width: 1399px) { .v2-inst .rec-meta { display: none; } }
.v2-inst .rec-spacer { flex: 1 1 auto; min-width: 6px; }
/* the pills keep their names at every width (Raad): a narrow window wraps
   the middle of the transport onto a second line instead of hiding them */
.v2-inst .rec-mid { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 6px; }
.v2-inst .rec-transport { height: auto; min-height: 44px; padding: 4px 0; }
body.v2-on .v2-app { grid-template-rows: var(--topbar-h, 48px) minmax(0, 1fr) auto; }
body.v2-on:has(.v2-inst.is-rest) .v2-app { grid-template-rows: var(--topbar-h, 48px) minmax(0, 1fr) auto; }
.v2-inst .rec-io[aria-pressed="true"] { background: var(--v2-ink); color: var(--v2-paper); border-color: var(--v2-ink); }

.v2-inst .rec-io-wrap { display: inline-flex; gap: 6px; flex: none; }
.v2-inst .rec-io { font-family: var(--v2-mono); font-weight: 400; }
.v2-inst .rec-io[aria-pressed="true"] { background: var(--v2-ink); color: var(--v2-paper); border-color: var(--v2-ink); }
.v2-inst .rec-spacer { flex: 1 1 auto; min-width: 6px; }
/* the pills keep their names at every width (Raad): a narrow window wraps
   the middle of the transport onto a second line instead of hiding them */
.v2-inst .rec-mid { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 6px; }
.v2-inst .rec-transport { height: auto; min-height: 44px; padding: 4px 0; }
body.v2-on .v2-app { grid-template-rows: var(--topbar-h, 48px) minmax(0, 1fr) auto; }
body.v2-on:has(.v2-inst.is-rest) .v2-app { grid-template-rows: var(--topbar-h, 48px) minmax(0, 1fr) auto; }
.v2-inst .rec-io[aria-pressed="true"] { background: var(--v2-ink); color: var(--v2-paper); border-color: var(--v2-ink); }

/* row 1b: the live site's In and Out editor, on one line under the pills */
.v2-inst .rec-edit { display: flex; align-items: center; min-width: 0; padding: 2px 0 6px calc(var(--rec-lane) - 10px); }
.v2-inst .rec-edit .xp-editor { display: flex; align-items: center; gap: 14px; margin: 0; }
.v2-inst .rec-edit .xp-editor-top { display: flex; align-items: center; gap: 10px; margin: 0; }
.v2-inst .rec-edit .xp-keys { margin: 0; }
.v2-inst .rec-edit .xp-readout-line { margin: 0; white-space: nowrap; }
.v2-inst .rec-io-wrap { display: inline-flex; gap: 6px; margin: 0; }
.v2-inst .rec-spacer { flex: 1 1 auto; min-width: 6px; }
/* the pills keep their names at every width (Raad): a narrow window wraps
   the middle of the transport onto a second line instead of hiding them */
.v2-inst .rec-mid { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 6px; }
.v2-inst .rec-transport { height: auto; min-height: 44px; padding: 4px 0; }
body.v2-on .v2-app { grid-template-rows: var(--topbar-h, 48px) minmax(0, 1fr) auto; }
body.v2-on:has(.v2-inst.is-rest) .v2-app { grid-template-rows: var(--topbar-h, 48px) minmax(0, 1fr) auto; }
.v2-inst .rec-io[aria-pressed="true"] { background: var(--v2-ink); color: var(--v2-paper); border-color: var(--v2-ink); }

/* row 1b: the In and Out editor under the pills (the live site's, proxied) */
.v2-inst .rec-edit { height: 28px; display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: calc(var(--rec-lane) - 10px); }
.v2-inst .rec-edit.is-idle { opacity: .38; }
.v2-inst .rec-edit-label { flex: none; width: 64px; font: 500 var(--v2-t0)/1 var(--v2-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--v2-ink-2); }
.v2-inst .rec-key { height: 22px; padding: 0 8px; gap: 5px; font-weight: 400; }
.v2-inst .rec-key .rec-key-glyph { font-size: 8px; letter-spacing: -1px; }
.v2-inst .rec-key .rec-key-cap { font: 400 var(--v2-t0)/1 var(--v2-mono); color: var(--v2-ink-2); }
.v2-inst .rec-key-set .rec-key-glyph { font-size: 11px; letter-spacing: 0; }
.v2-inst .rec-field {
  flex: none; width: 76px; height: 22px; padding: 0 8px; text-align: center;
  border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-paper); color: var(--v2-ink);
  font: 500 var(--v2-t1)/1 var(--v2-mono);
}
.v2-inst .rec-field:focus { outline: 2px solid var(--v2-ink); outline-offset: 1px; }
.v2-inst .rec-range-read { margin-left: 8px; font: 400 var(--v2-t0)/1 var(--v2-mono); color: var(--v2-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.v2-inst .rec-seg, .v2-inst .rec-bands { display: inline-flex; gap: 6px; flex: none; }
.v2-inst .rec-pill, .v2-playline .rec-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 26px; padding: 0 11px; border: 1px solid var(--v2-line); border-radius: 999px;
  background: transparent; color: var(--v2-ink);
  font: 500 var(--v2-t1)/1 var(--font-sans, system-ui); white-space: nowrap;
}
.v2-inst .rec-pill.is-on { background: var(--v2-ink); color: var(--v2-paper); border-color: var(--v2-ink); }
.v2-inst .rec-band { border-color: var(--v2-line-2); padding: 0 9px; }
.v2-inst .rec-band i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.v2-inst .rec-band .rec-n { font: 400 var(--v2-t0)/1 var(--v2-mono); color: var(--v2-ink-3); }
.v2-inst .rec-band.is-off i { background: transparent !important; border: 1.5px solid var(--v2-ink-3); }
.v2-inst .rec-band[data-b="bass"] i { background: var(--v2-bass); }
.v2-inst .rec-band[data-b="mids"] i { background: var(--v2-mids); }
.v2-inst .rec-band[data-b="treble"] i { background: var(--v2-treble); }
.v2-inst .rec-band[data-b="level"] i { background: var(--v2-level); }

/* rows 2 to 4: the ruler and the two lanes */
.v2-inst .rec-lanes { position: relative; min-width: 0; padding-right: 12px; }
.v2-inst .rec-track-x { font: 500 11px/1 var(--font-sans, system-ui); }
.v2-inst .rec-row { display: flex; align-items: center; min-width: 0; }
.v2-inst .rec-lane-label {
  width: var(--rec-lane); flex: none; padding-right: 10px; gap: 8px;
  display: flex; align-items: center;
  font: 500 var(--v2-t0)/1 var(--v2-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--v2-ink-3); white-space: nowrap; overflow: hidden;
}
.v2-inst .rec-bar { position: relative; flex: 1 1 auto; min-width: 0; touch-action: none; }
.v2-inst .rec-add {
  width: 22px; height: 22px; padding: 0; flex: none; border-radius: 50%;
  border: 1px solid var(--v2-line); background: var(--v2-paper); color: var(--v2-ink);
  display: grid; place-items: center;
}
.v2-inst .rec-add svg { display: block; }

/* at rest: one line. A Track or a second scene opens the timeline. */
.v2-inst.is-rest .rec-lanes { display: none; }
body.v2-on:has(.v2-inst.is-rest) .v2-app { grid-template-rows: var(--topbar-h, 48px) minmax(0, 1fr) 48px; }
.v2-inst .rec-len { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.v2-inst .rec-len-label, .v2-inst .rec-len-unit { font: 500 var(--v2-t0)/1 var(--v2-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--v2-ink-2); }
.v2-inst .rec-len input {
  width: 58px; height: 26px; padding: 0 6px; text-align: right;
  border: 1px solid var(--v2-line); border-radius: 4px; background: var(--v2-paper); color: var(--v2-ink);
  font: 500 var(--v2-t2)/1 var(--v2-mono);
}
.v2-inst .rec-len input:focus { outline: 2px solid var(--v2-ink); outline-offset: 1px; }
.v2-inst .rec-chev { width: 26px; height: 26px; padding: 0; flex: none; border: 1px solid var(--v2-line); border-radius: 50%; background: transparent; color: var(--v2-ink-2); display: grid; place-items: center; margin-left: 4px; }
.v2-inst .rec-chev.is-open svg { transform: rotate(180deg); }

.v2-inst .rec-ruler { height: 20px; }
.v2-inst .rec-ruler .rec-bar { height: 20px; border-bottom: 1px solid var(--v2-line-2); cursor: text; }
.v2-inst .rec-tick { position: absolute; bottom: 0; width: 1px; height: 5px; background: var(--v2-line); }
.v2-inst .rec-tick-t { position: absolute; bottom: 6px; transform: translateX(-50%); font: 400 11px/1 var(--v2-mono); color: var(--v2-ink-3); white-space: nowrap; }
.v2-inst .rec-tick-t.is-start { transform: none; }
.v2-inst .rec-tick-t.is-end { transform: translateX(-100%); }

/* the Scenes lane sits over the Track lane, one artboard over one track */
.v2-inst .rec-lane-scenes { height: 48px; }
.v2-inst .rec-lane-scenes .rec-bar { height: 40px; }
.v2-inst .rec-lane-track { height: 46px; }
.v2-inst .rec-lane-track .rec-bar { height: 38px; border: 1px solid var(--v2-line-2); border-radius: 4px; background: var(--v2-paper); }

.v2-inst .rec-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2-inst .rec-fades { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--v2-ink-3); }
.v2-inst .rec-fades polygon { fill: currentColor; opacity: .3; }
.v2-inst .rec-range { position: absolute; top: 0; bottom: 0; background: var(--v2-ink-3); opacity: .14; pointer-events: none; z-index: 2; }
/* outside In to Out the Track is still there, just out of the take */
.v2-inst .rec-dim { position: absolute; top: 0; bottom: 0; background: var(--v2-paper); opacity: .66; pointer-events: none; z-index: 2; }
.v2-inst .rec-grip {
  position: absolute; top: -1px; bottom: -1px; width: 8px; margin-left: -4px;
  background: var(--v2-ink); border-radius: 2px; cursor: ew-resize; z-index: 3; touch-action: none;
}
.v2-inst .rec-fade {
  position: absolute; top: 1px; width: 9px; height: 9px; margin-left: -4.5px;
  background: var(--v2-paper); border: 1px solid var(--v2-ink); border-radius: 2px;
  cursor: ew-resize; z-index: 4; touch-action: none;
}
.v2-inst .rec-fade-v { top: auto; bottom: 1px; }
.v2-inst .rec-drop {
  position: absolute; inset: 0; width: 100%; border: 1px dashed var(--v2-line); border-radius: 4px;
  background: transparent; display: flex; align-items: center; justify-content: center;
  font: 400 var(--v2-t1)/1 var(--font-sans, system-ui); color: var(--v2-ink-2); z-index: 5;
}
.v2-inst .rec-drop.is-over { border-color: var(--v2-record); color: var(--v2-ink); }

/* the Scenes lane ends at Out: the clips are cut there */
.v2-inst .rec-clips { --rec-cut: 0%; position: absolute; inset: 0; clip-path: inset(0 var(--rec-cut) 0 0); }
.v2-inst .rec-cut {
  position: absolute; top: 0; bottom: 0; width: 6px; margin-left: -6px; z-index: 4; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--v2-ink-3) 0 1.5px, transparent 1.5px 4px);
  opacity: .8;
}

/* the clips: one per scene, end to end along the ruler */
.v2-inst .rec-clip {
  position: absolute; top: 0; bottom: 0; overflow: hidden; z-index: 1;
  border: 1px solid var(--v2-line-2); border-radius: 3px; background: var(--v2-paper);
  font: 400 11px/1 var(--v2-mono); color: var(--v2-ink-2);
  display: flex; align-items: center; gap: 6px; padding: 0 5px;
  white-space: nowrap; touch-action: none; user-select: none;
}
.v2-inst .rec-clip.is-real { cursor: grab; }
.v2-inst .rec-clip.is-sel { outline: 2px solid var(--v2-ink); outline-offset: -1px; color: var(--v2-ink); z-index: 2; }
.v2-inst .rec-clip.is-dragging { opacity: .72; cursor: grabbing; z-index: 7; }
.v2-inst .rec-clip-thumb { width: 36px; height: 27px; flex: none; border-radius: 2px; background: var(--v2-line-2); overflow: hidden; }
.v2-inst .rec-clip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-inst .rec-clip-t { overflow: hidden; text-overflow: clip; }
.v2-inst .rec-clip-grip { top: 12px; bottom: 0; width: 7px; margin-left: -3.5px; opacity: .55; }
.v2-inst .rec-clip-grip:hover { opacity: 1; }

/* the join between two clips: one small mark, its menu right there */
.v2-inst .rec-join {
  position: absolute; top: -2px; width: 12px; height: 12px; margin-left: -6px; padding: 0;
  border: 0; background: transparent; color: var(--v2-ink); z-index: 5;
  display: grid; place-items: center;
}
.v2-inst .rec-join svg { display: block; }
.v2-inst .rec-jmenu {
  position: absolute; bottom: 6px; transform: translateX(-50%); z-index: 9;
  display: flex; align-items: center; gap: 4px; padding: 4px 6px;
  border: 1px solid var(--v2-line); border-radius: 999px; background: var(--v2-paper);
  box-shadow: 0 6px 18px rgba(21, 22, 26, .16);
}
.v2-inst .rec-jpill { height: 22px; padding: 0 9px; font-size: var(--v2-t0); }
.v2-inst .rec-jsep { width: 1px; height: 16px; background: var(--v2-line-2); flex: none; }
.v2-inst .rec-drop-line { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--v2-record); z-index: 8; pointer-events: none; }

/* the playhead: one line through the lanes, a triangle on the ruler */
.v2-inst .rec-playhead {
  --f: 0;
  position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; z-index: 6;
  left: calc(var(--rec-lane) + var(--f) * (100% - var(--rec-lane)));
  color: var(--v2-record);
}
.v2-inst .rec-ph-tri { position: absolute; top: 0; left: -5px; display: block; }
.v2-inst .rec-ph-line { position: absolute; top: 8px; bottom: 3px; left: -1px; width: 2px; background: var(--v2-record); }

/* a narrow screen (a phone, frame 3 is not drawn yet): one column that
   scrolls, the artboard first, the stack and the chain under it, the strip
   pinned at the foot with its rows wrapping */
@media (max-width: 880px) {
  /* the page is the scroller (the live site's body is a 100vh box that never
     scrolls; a scroll here went nowhere and the panels sat out of reach) */
  html:has(body.v2-on) { height: auto; overflow-y: auto; overflow-x: hidden; }
  /* the body stays overflow visible: any clip on it would make it the strip's scrollport and unstick the strip */
  body.v2-on { height: auto; min-height: 100vh; overflow: visible; }
  body.v2-on .v2-app { position: static; display: flex; flex-direction: column; padding: 0 12px; min-height: 100vh; }
  /* the top bar in two rows: the wordmark with the history, the looks, the theme and help; then the stage controls */
  body.v2-on .topbar.v2-top { flex: none; height: auto; min-height: 48px; flex-wrap: wrap; padding: 6px 12px; margin: 0 -12px; row-gap: 6px; }
  /* Dither and Raw stay on the top row while they fit; on a phone they wrap under it */
  body.v2-on .topbar .stage-toolbar { flex: 1 1 auto; justify-content: center; }
  body.v2-on .topbar .topbar-end { margin-left: auto; }
  /* the artboard keeps its 46vh less the padding; the frame line sits under it, not inside it */
  .v2-stage { flex: none; height: auto; padding: 10px 0; }
  .v2-stage .canvas-wrap { height: calc(46vh - 20px); }
  /* the card keeps the column's width on every tab (align-self start shrank it) */
  .v2-side { order: 2; flex: none; align-self: stretch; width: auto; max-height: none; overflow: visible; margin: 12px 0; }
  /* the live touch rule makes a seg button 40 tall; a 37 by 40 capsule read as squashed */
  body.v2-on .stage-toolbar .seg .seg-btn { min-height: 32px; padding: 5px 16px; font-size: 12px; }
  /* the strip's chevron holds the line's right end, so it reads as the lanes' switch */
  .v2-inst .rec-chev { order: 99; margin-left: auto; }
  body.v2-on .v2-side .sidebar { position: static !important; height: auto; }
  body.v2-on .v2-side .sidebar-pinned { max-height: none; overflow: visible; }
  body.v2-on .v2-side .sidebar-scroll { flex: none; overflow: visible; }
  .v2-inst { order: 3; position: sticky; bottom: 0; z-index: 20; background: var(--v2-ground); flex: none; margin-top: 12px; --rec-lane: 100px; }
  .v2-inst .rec-bands, .v2-inst .rec-meta { display: none; }
  .v2-inst .rec-transport { height: auto; flex-wrap: wrap; row-gap: 6px; padding: 6px 0; }
  .v2-inst .rec-spacer { display: none; }
  .v2-inst .rec-lane-label span:first-child { display: none; }
}
/* a tablet: the frame line above the picture, the rail standing beside it */
body.v2-narrow .v2-stage, body.v2-phone .v2-stage { grid-template-rows: auto auto auto; }
body.v2-narrow .v2-stage { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; justify-items: stretch; }
body.v2-narrow .v2-stage > * { grid-column: 2; }
body.v2-narrow .v2-stage > .v2-frameline { grid-row: 1; padding-bottom: 8px; }
body.v2-narrow .v2-stage > .canvas-wrap { grid-row: 2; }
body.v2-narrow .v2-stage > .v2-playline { grid-row: 3; }
body.v2-narrow .v2-stage > .v2-toolrail { grid-column: 1; grid-row: 2; margin: 0; align-self: start; }
/* a phone: the frame line above the picture ends in the one tool button; the rail pops up under it */
body.v2-phone .v2-stage > .v2-frameline { justify-self: stretch; padding-bottom: 8px; }
body.v2-phone .v2-stage > .v2-toolrail { position: absolute; top: 46px; left: 0; z-index: 30; margin: 0; display: none; }
body.v2-phone .v2-stage > .v2-toolrail.is-open { display: flex; }
/* between a desk and a phone the side narrows, so the artboard keeps its room */
@media (max-width: 1280px) and (min-width: 881px) { .v2-app { grid-template-columns: 48px minmax(0, 1fr) 340px; } }
@media (max-width: 1100px) and (min-width: 881px) { .v2-app { grid-template-columns: 48px minmax(0, 1fr) 320px; column-gap: 12px; } }

/* the rings (LEI-263 round 2): every knob of a layer can follow the music.
   Hollow: not mapped. Filled in the band's colour: mapped (band colours mean audio). */
body.v2-on .st-ring { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: transparent; padding: 0; margin-left: 8px; flex: none; display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; }
body.v2-on .st-ring.is-on { border-color: transparent; background: var(--b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b) 22%, transparent); }
body.v2-on .st-ring.is-on::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
body.v2-on .row-head:has(.st-ring) { align-items: center; }
body.v2-on .row-head:has(.st-ring) .val { margin-left: auto; }
body.v2-on .st-ring-read { font: 400 10px/1 var(--font-mono); color: var(--text-soft); letter-spacing: .04em; margin-top: -4px; }

/* the top area's parts share one height (32) and one gap (8). Dither / Raw
   shows its word on a desk and a tablet, its icon on a phone */
body.v2-on .stage-toolbar .seg.v2-iconseg, body.v2-on .v2-frameline .seg { padding: 2px; gap: 2px; border-radius: 999px; flex: none; }
body.v2-on .stage-toolbar .seg.v2-iconseg .seg-btn, body.v2-on .v2-frameline .seg .seg-btn { height: 26px; min-height: 26px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 12px; }
body.v2-on .seg.v2-iconseg .seg-btn svg { width: 15px; height: 15px; display: none; }
body.v2-on.v2-phone .stage-toolbar .seg.v2-iconseg .seg-btn { width: 30px; padding: 0; }
body.v2-on.v2-phone .seg.v2-iconseg .seg-btn svg { display: block; }
body.v2-on.v2-phone .seg.v2-iconseg .v2-seg-word { display: none; }
body.v2-on.v2-phone .v2-frameline .seg[aria-label="Source fit"] .seg-btn { padding: 0 10px; }
/* a panel's Render choice (Dithered, Raw): the choices share the row evenly */
body.v2-on .v2-side .st-seg .seg-btn { flex: 1 1 0; }
body.v2-on .topbar .v2-topmid { gap: 8px; }
body.v2-on .topbar .v2-topmid .v2-frameline { margin-left: 0; }
/* a tablet and a phone: the top bar is one row, the document only */
body.v2-narrow .topbar.v2-top, body.v2-phone .topbar.v2-top { flex-wrap: nowrap; }
body.v2-phone .topbar.v2-top { gap: 8px; }
body.v2-phone .topbar .brand { order: 0; } body.v2-phone .topbar .history-controls { order: 1; } body.v2-phone .topbar .topbar-end { order: 2; }
/* a phone: the history, the looks, theme and help at 32, in three groups */
body.v2-phone .topbar .history-controls { flex: none; width: auto; margin-left: auto; gap: 4px; justify-content: flex-start; }
body.v2-phone .topbar .history-controls .slot-btn:not(.slot-btn + .slot-btn) { margin-left: 6px; }
body.v2-phone .topbar .topbar-end { flex: none; margin-left: 0; gap: 4px; }
body.v2-narrow .topbar .history-controls { margin-left: auto; }
body.v2-narrow .topbar .topbar-end { margin-left: 8px; }
body.v2-phone .topbar .hist-btn { width: 32px; height: 32px; }
body.v2-phone .topbar .brand-logo { height: 26px; width: auto; }
/* a phone's strip at rest is one line: the transport, Length, + Track, + Scene and the chevron (no Output pill) */
body.v2-on.v2-phone .v2-inst .rec-transport { column-gap: 8px; }
body.v2-on.v2-phone .v2-inst.is-rest .rec-transport { flex-wrap: nowrap; }
body.v2-on.v2-phone .v2-inst .rec-tp-btns { gap: 6px; }
body.v2-on.v2-phone .v2-inst .rec-mid { column-gap: 8px; min-width: 0; }
body.v2-on.v2-phone .v2-inst .rec-len input { width: 44px; padding-left: 2px; padding-right: 2px; text-align: center; }
body.v2-on.v2-phone .v2-inst .rec-mid .rec-pill { padding: 0 10px; }

/* the SOURCE / MARKS / OUTPUT pills on the panel heads were the old drawing
   steps, not the layer a panel acts on; the titles name the layer (Raad, 2026-10-03) */
body.v2-on .panel-head .layer-tag { display: none; }

/* the spacing round (Raad, 2026-10-03, "yes to all"): one rhythm in the
   panels: 10 between rows, 12 under a panel's head, 16 before a new group or
   a delete button, one height for the buttons of one row */
/* 1. the Source's drop sits clear of the kind buttons above it */
body.v2-on #st-host #media-drop { margin-top: 10px; }
/* 2. a layer's own Motion rows */
body.v2-on .v2-own-motion > .row + .row { margin-top: 10px; }
/* 3. Marks: the switch and the opacity row under it */
body.v2-on #dither-over-raw-controls > .row + .row { margin-top: 10px; }
/* 4. the selected row: the tag stands clear of the arrows */
body.v2-on .layer-row.st-grabbable.is-sel .v2-kindtag { right: 128px; }
body.v2-on .layer-row.st-grabbable.is-sel .layer-row-name { padding-right: 180px; }
/* 5. the first control sits 12 under its panel's head */
body.v2-on .v2-side .sidebar-scroll .panel-body { padding-top: 12px; }
/* 6. Line art and Fluid: the borrowed pane keeps the rows' own rhythm (no
   group gap on top of it), the hint sits off the slider, a new group 16 down */
body.v2-on #st-host .st-pattern-fields + div { gap: 0; }
body.v2-on #st-host #fluid-geo-controls > p.hint { margin-top: 6px; }
body.v2-on #st-host .st-controls > * + .st-acc { margin-top: 16px; }
/* 7. Export: Conocle's link sits on the left edge like everything else */
body.v2-on #conocle-connect { align-self: flex-start; text-align: left; }
/* 8. text buttons start on the labels' edge */
body.v2-on .v2-side .btn-link { padding-left: 0; padding-right: 0; }
/* 9. an audio mapping's row: the selects, INV and the remove at one height */
body.v2-on #mod-rows .mod-row-top .select, body.v2-on #mod-rows .mod-pill, body.v2-on #mod-rows .mod-remove { height: 26px; min-height: 26px; box-sizing: border-box; }
/* 10. four choices sit two by two, not three and one; a delete button stands 16 off */
body.v2-on #st-host .st-chips:has(> :nth-child(4):last-child) { display: grid; grid-template-columns: 1fr 1fr; }
body.v2-on #st-host .st-delete { margin-top: 6px; }
/* Export: the Video block keeps the Image block's rhythm */
body.v2-on #audio-fade-in + .row-head { margin-top: 10px; }
body.v2-on #audio-stop { margin-top: 6px; }
body.v2-on #export-fixed-row { margin-top: 8px; }
/* the demo pictures and the Source scale under them; a field's tiles under Render; the mappings under their summary */
body.v2-on #st-host .demo-row + * { margin-top: 6px; }
body.v2-on #st-host .st-pattern-fields { margin-top: 10px; }
body.v2-on #audio-mappings-adv > #mod-rows { margin-top: 8px; }
body.v2-on.v2-phone .v2-inst .rec-len { gap: 4px; }

/* the canvas tools (v2-canvas-tools.js): the view zoom and the Crop box */
body.v2-on .v2-stage .canvas-wrap { position: relative; overflow: hidden; }
body.v2-on .v2-stage .canvas-wrap canvas { transform-origin: center center; }
body.v2-panning .canvas-wrap, body.v2-panning #canvas { cursor: grab !important; }
.v2-zoomchip { position: absolute; right: 10px; bottom: 10px; z-index: 6; height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 500 11px/1 var(--font-mono); cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.v2-cropbox { position: absolute; z-index: 5; border: 1.5px solid #fff; outline: 1px solid rgba(0,0,0,.35); box-shadow: 0 0 0 9999px rgba(12,12,12,.45); cursor: move; touch-action: none; }
.v2-cropbox::before, .v2-cropbox::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 0 solid rgba(255,255,255,.35); }
.v2-cropbox::before { border-left-width: 1px; border-right-width: 1px; left: 33.33%; right: 33.33%; }
.v2-cropbox::after { border-top-width: 1px; border-bottom-width: 1px; top: 33.33%; bottom: 33.33%; }
.v2-crop-h { position: absolute; width: 14px; height: 14px; background: #fff; border: 1px solid rgba(0,0,0,.4); border-radius: 3px; touch-action: none; }
/* the handles sit inside the box's edge, so a box the full height of the artboard keeps them in reach */
.v2-crop-nw { left: 0; top: 0; cursor: nwse-resize; z-index: 1; } .v2-crop-ne { right: 0; top: 0; cursor: nesw-resize; }
.v2-crop-sw { left: 0; bottom: 0; cursor: nesw-resize; } .v2-crop-se { right: 0; bottom: 0; cursor: nwse-resize; }
.v2-crop-n, .v2-crop-s { left: 50%; margin-left: -12px; width: 24px; height: 7px; } .v2-crop-n { top: 0; cursor: ns-resize; } .v2-crop-s { bottom: 0; cursor: ns-resize; }
.v2-crop-e, .v2-crop-w { top: 50%; margin-top: -12px; width: 7px; height: 24px; } .v2-crop-e { right: 0; cursor: ew-resize; } .v2-crop-w { left: 0; cursor: ew-resize; }
.v2-cropbar { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.v2-cropratios, .v2-cropacts { display: flex; gap: 6px; }
.v2-cropratios .v2-pill { height: 26px; padding: 0 10px; font-size: 11px; }
/* the size the frame becomes, on the box's top left corner */
.v2-croplabel { position: absolute; left: 24px; top: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(12,12,12,.72); color: #fff; font: 500 11px/1 var(--font-mono); white-space: nowrap; pointer-events: none; }
.v2-cropbar .v2-pill { height: 30px; font-size: 12px; }
@media (pointer: coarse) { .v2-crop-nw, .v2-crop-ne, .v2-crop-sw, .v2-crop-se { width: 24px; height: 24px; } }

/* a phone or a tablet (v2-narrow.js, the frames of 2026-09-28): the top bar,
   the frame line, the picture and the play line stay at the top; the four
   tabs sit at the foot; the tab's panels scroll between */
body.v2-tabsfoot { --v2-tabs-h: 52px; }
body.v2-tabsfoot .topbar.v2-top { position: sticky; top: 0; z-index: 26; background: var(--bg); }
body.v2-tabsfoot .v2-stage { position: sticky; top: var(--v2-top-h, 48px); z-index: 25; background: var(--bg); padding-top: 8px; padding-bottom: 4px; box-shadow: 0 1px 0 var(--border); }
body.v2-tabsfoot .v2-app { padding-bottom: calc(var(--v2-tabs-h) + env(safe-area-inset-bottom, 0px)); }
body.v2-tabsfoot .v2-side { margin-top: 10px; }
body.v2-tabsfoot > .workspace-tabs.v2-tabbar { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--v2-tabs-h) + env(safe-area-inset-bottom, 0px)); padding: 0 8px env(safe-area-inset-bottom, 0px); margin: 0; border-top: 1px solid var(--border); background: var(--surface); display: flex; align-items: stretch; box-shadow: 0 -6px 18px rgba(0,0,0,.05); }
body.v2-tabsfoot > .workspace-tabs.v2-tabbar .ws-tab { flex: 1 1 0; }
/* the stack lives in Compose; the other tabs name the layer with the chip */
body.v2-tabsfoot:not([data-v2-ws="compose"]) .v2-side .sidebar-pinned { display: none; }
body.v2-tabsfoot[data-v2-ws="compose"] .v2-layerchip { display: none; }
.v2-layerchip { display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); height: 34px; margin: 12px 12px 4px; padding: 0 10px 0 8px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); font: 600 13px/1 var(--font-sans); color: var(--text); cursor: pointer; }
.v2-layerchip i { width: 4px; height: 16px; border-radius: 99px; background: var(--accent); flex: none; }
.v2-layerchip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.v2-layerchip .chev { transform: rotate(-45deg); margin: 0 2px 0 2px; flex: none; }
.v2-layerchip.is-read { border-color: transparent; background: transparent; padding-left: 0; cursor: default; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.v2-layerchip.is-read i, .v2-layerchip.is-read .chev { display: none; }
/* Perform opens with the timeline; the other tabs leave it out */
body.v2-tabsfoot .v2-side .v2-inst { position: static; order: 0; margin: 0; padding: 4px 12px 8px; border-bottom: 1px solid var(--border); background: transparent; }
body.v2-tabsfoot:not([data-v2-ws="perform"]) .v2-side .v2-inst { display: none; }
/* a phone or a tablet: a panel's title bar stays under the picture while its
   controls scroll, so the layer you are changing stays named (Raad, 2026-10-03) */
body.v2-tabsfoot .v2-side .sidebar-scroll .panel-head { position: sticky; top: calc(var(--v2-top-h, 48px) + var(--v2-stage-h, 0px)); z-index: 12; }

/* the tab bar on a phone or a tablet (Raad, 2026-10-03, "B"): the words, the tab you are on as an ink pill, a darker bar */
body.v2-tabsfoot > .workspace-tabs.v2-tabbar { gap: 6px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--surface-2); border-top: 1px solid var(--border-strong); box-shadow: 0 -8px 24px rgba(0,0,0,.08); }
body.v2-tabsfoot > .workspace-tabs.v2-tabbar .ws-tab { border: 0; border-radius: 999px; padding: 0; font-size: 11px; color: var(--text-muted); }
body.v2-tabsfoot > .workspace-tabs.v2-tabbar .ws-tab.is-active { background: var(--accent); color: var(--on-accent); }

/* the phone design pass (Raad, 2026-10-03) */
/* the frame line runs edge to edge under the top bar, like the row above it */
body.v2-on.v2-phone .v2-stage > .v2-frameline { justify-content: space-between; gap: 0; }
/* the music on the play line: Add music, or the track's name */
.v2-playline .v2-musicpill { flex: 0 1 auto; min-width: 0; margin-left: auto; max-width: 46%; cursor: pointer; }
.v2-playline .v2-musicname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.v2-playline .v2-toast { margin-left: auto; }
.v2-playline .v2-toast:not(.is-on) { display: none; }
.v2-playline .v2-toast.is-on + .v2-musicpill { margin-left: 8px; }
/* the timeline in Perform on a phone: a narrow lane column (the + and the x),
   the transport, In, Out and Loop on one line, the capture choice under it */
body.v2-tabsfoot .v2-side .v2-inst { --rec-lane: 40px; }
body.v2-tabsfoot .v2-side .v2-inst .rec-lane-label { padding-right: 6px; gap: 0; justify-content: flex-start; }
body.v2-tabsfoot .v2-side .v2-inst .rec-transport { flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 8px; padding: 8px 0 6px; }
body.v2-tabsfoot .v2-side .v2-inst .rec-mid { display: contents; }
body.v2-tabsfoot .v2-side .v2-inst .rec-tp-btns { order: 1; }
body.v2-tabsfoot .v2-side .v2-inst .rec-io-wrap { order: 2; gap: 6px; }
body.v2-tabsfoot .v2-side .v2-inst .rec-pill:not(.rec-add-track):not(.rec-add-scene), body.v2-tabsfoot .v2-side .v2-inst .rec-io { height: 30px; padding: 0 10px; font-size: 12px; }
body.v2-tabsfoot .v2-side .v2-inst .rec-len { order: 2; }
body.v2-tabsfoot .v2-side .v2-inst .rec-add-track, body.v2-tabsfoot .v2-side .v2-inst .rec-add-scene { order: 3; }
body.v2-tabsfoot .v2-side .v2-inst .rec-seg { order: 4; }
body.v2-tabsfoot .v2-side .v2-inst .rec-scene { order: 6; flex-basis: 100%; }
body.v2-tabsfoot .v2-side .v2-inst .rec-chev { order: 5; margin-left: auto; }
body.v2-tabsfoot .v2-side .v2-inst .rec-loop { order: 2; }
/* on a phone or a tablet the status floats just above the play line, so it never squeezes the music */
body.v2-tabsfoot .v2-playline { position: relative; }
body.v2-tabsfoot .v2-playline .v2-toast { position: absolute; right: 0; top: -30px; bottom: auto; max-width: 70%; z-index: 3; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
body.v2-tabsfoot .v2-playline .v2-toast.is-on + .v2-musicpill { margin-left: auto; }

/* Buy me a coffee: the foot of Output only, the Quick reference, once after a save */
body.v2-on:not([data-v2-ws="output"]) .sidebar-footer { display: none; }
.help-coffee { margin: 0; font: 400 13px/1.4 var(--font-sans); color: var(--text-muted); }
.bmc-inline { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.v2-thanks { position: fixed; left: 50%; bottom: calc(var(--v2-tabs-h, 0px) + 16px + env(safe-area-inset-bottom, 0px)); translate: -50% 12px; z-index: 60; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 32px); padding: 8px 8px 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.14); font: 400 13px/1.3 var(--font-sans); color: var(--text-muted); opacity: 0; transition: opacity var(--t), translate var(--t); }
.v2-thanks.is-on { opacity: 1; translate: -50% 0; }
.v2-thanks-x { width: 26px; height: 26px; margin-left: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 16px; cursor: pointer; }

/* the Gradient tool's line and its two ends on the picture (LEI-338) */
.v2-gradline { position: absolute; z-index: 5; pointer-events: none; overflow: visible; }
.v2-gradline line { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 1px rgba(0,0,0,.7)); }
.v2-gradline circle { fill: #fff; stroke: rgba(0,0,0,.55); stroke-width: 1.5; }

/* the gradient, compact (Raad, 2026-10-05): the shape, one bar that shows the
   gradient, the four colours as dots under it, the presets as small swatches */
body.v2-on .gradient-stops { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
body.v2-on .gradient-stops > * { width: 100%; }
body.v2-on .grad-shape-row { align-items: stretch; }
body.v2-on .grad-shape-row .seg { display: flex; width: 100%; }
body.v2-on .gradient-stops[hidden] { display: none; }
body.v2-on .grad-bar { display: block; height: 26px; border-radius: 999px; border: 1px solid var(--border); }
body.v2-on .grad-dots { display: flex; justify-content: space-between; margin-top: -2px; }
body.v2-on .gradient-stops .grad-dots input[type="color"] { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); }
body.v2-on .gradient-stops .grad-dots input[type="color"]::-webkit-color-swatch { border-radius: 50%; }
body.v2-on .gradient-stops .grad-dots input[type="color"]::-moz-color-swatch { border-radius: 50%; }
body.v2-on .grad-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
body.v2-on .grad-presets .btn-link { height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--grad, var(--surface-2)); color: transparent; overflow: hidden; }
body.v2-on .grad-presets .btn-link:hover { border-color: var(--border-strong); }