/* ── 2. stage and rack: the field is the whole room, the rack is air ─────── */
#rack, #rackL { background: transparent; border-left: 0; padding: var(--card-gap); gap: var(--card-gap); opacity: 1; box-shadow: none; }
#rack > .dev, #rackL > .dev { box-shadow: var(--glass-shadow-flat); } /* no continuous rack slab, no veil: cards float alone */
@media (max-width: 860px) { #rack { border-top: 0; }
}
/* THE STATUS LINE GOES. It is the "secondary writing" — a right-aligned second string beside the
window's own name, changing under the eye while you read the name. Nothing is LOST: `device()`
already mirrors every status into the header's `title`, so the governor's PARKED sentence and the
readers' own notes are one hover away, which is where a caveat belongs. */
.dev-head > .dev-stat { display: none; }
.dev-stat { color: var(--ink-faint); }
.dev-stat.live { color: var(--acc); }
/* ── 9. rails, rows, chips, canvases — the same two depths, nothing louder ── */
.ladder, .ladder-c, .dyn-c, .slice-c, .orbit-c, .shadow-c, .mol-c, .qcd-c, .atm-c, .atm-r, .picker, .pal-ring { border-color: transparent; box-shadow: var(--neu-inset); }
.sp-row, .orbit-row { border-color: transparent; background: hsl(0 0% 100% / .03); box-shadow: var(--neu-flat); }
.sp-row.sel { background: var(--acc-soft); box-shadow: var(--neu-flat), 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent); }
.sp-b, .pk-c, .keys-chip, .pal-color { border-color: transparent; background: hsl(var(--glass-tint) / 1); box-shadow: var(--neu-raise); color: var(--ink-key); }
.sp-b:active, .pk-c:active { box-shadow: var(--neu-inset); background: var(--glass-well); }
.sp-b.on { background: var(--acc-soft); color: var(--acc); box-shadow: var(--neu-inset), 0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent); }
.sp-b.solo.on { color: var(--acc2); box-shadow: var(--neu-inset), 0 0 0 1px color-mix(in srgb, var(--acc2) 40%, transparent); }
.dyn-row { background: hsl(0 0% 100% / .03); box-shadow: var(--neu-flat); }
#title .ms { display: none; } /* the subtitle is a hover-level fact … */
#title:hover .ms { display: none; }
#sheet { border-radius: var(--card-r); } /* wave 53: the '?' bindings sheet wears the same glass as the EXACT/NUMERICAL one */
/* ── 10b. THE SKIP LINKS, AND THE ONE VISUALLY-HIDDEN SEAT (wave 62) ────────────────────────────────
Two anchors and only two: one at the head of #lab, one at the head of the mirror rack. 210 Tab
presses become 1 for the commonest journey, and this is the answer for keyboard-only users, who get
nothing from the 25 named regions. There is deliberately NO skip link to the stage: wave 57's rule
is that Tab cycles WINDOWS while #field has focus, so a link that landed a user there would drop
them somewhere Tab appears to be broken until they found Escape. Nothing may move focus to #field.
`.vh` is the same geometry without the reveal — a real, focusable seat that takes no space, which is
what IMPORT's is not focusable. */
.skip, .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; left: 8px; top: 8px; z-index: 9999; padding: 6px 10px;
border-radius: var(--r-pill); background: hsl(var(--glass-tint) / .98); color: var(--fg); box-shadow: var(--neu-raise);
font: var(--w-bold) var(--fs-small)/1 var(--font-ui); letter-spacing: var(--tr-wide); text-decoration: none; }
.pj-import:focus-within { border-color: var(--acc); color: var(--fg); } /* the input is 1 px; the LABEL is what the eye finds */
/* ── 11. the hide button (top-right) and the hidden state — the follow-up mounts `` ── */
.ui-hide { position: absolute; right: var(--sp-4); top: var(--sp-4); z-index: var(--z-banner); width: 30px; height: 30px; border: 0; border-radius: 50%;
background: hsl(var(--glass-tint) / var(--glass-opacity)); box-shadow: var(--neu-raise); color: var(--ink-key); font-size: 12px;
display: inline-flex; align-items: center; justify-content: center; opacity: .55; transition: opacity var(--t-fast); }
.ui-hide:hover, .ui-hide:focus-visible { opacity: 1; color: var(--fg); outline: none; }
.ui-hide:active { box-shadow: var(--neu-inset); }
body.ui-hidden .ui-hide { opacity: .25; } /* stays as the way back; does not compete with the field */
body.ui-hidden .ui-hide:hover { opacity: 1; }
body.ui-hidden #badges + .ui-hide { right: var(--sp-4); } /* the badges are hidden then; the button keeps its corner */
/* ── 12. the transport: `#transport.mini` — a 32-px subtitle bar, centred, the scrub a thin line ── */
#transport { border-radius: var(--card-r); }
#transport.mini { left: 50%; right: auto; bottom: 60px; transform: translateX(-50%); height: 46px; gap: 2px; padding: 2px 7px 3px; /* wave 92: the work bar's own height, gap and padding (modwindow.css .m2workbar) */
border-radius: 16px; border: var(--glass-border) solid var(--glass-border-color);
box-shadow: var(--glass-shadow); /* the pane itself comes from CARD STYLE below, like every window */
opacity: 1; }
/* AND THEY DO NOT SHRINK. Measured after the seats grew: `play` rendered 28 px of its 34 because
every item in this row is flex-shrinkable and the row is at its width budget (lab.css §the pill's
width budget says it wants 556 in 560, and that was at the OLD sizes). The seats are pinned and
the SCRUB — the one `flex: 1 1 auto` in the row — gives the room up, which is what it is there for. */
#transport.mini .tbtn { width: 34px; height: 34px; min-width: 0; flex: 0 0 auto; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--ink-key); font-size: 12px; }
#transport.mini .tbtn:hover { color: var(--fg); background: var(--glass-raise); }
#transport.mini .tbtn.play { width: 34px; color: var(--ink-faint); background: transparent;
border: 0; box-shadow: none; }
#transport.mini .tbtn.play.on { color: var(--acc); background: transparent; box-shadow: none; }
#transport.mini .tbtn.tempo-expand { border-radius: 10px; } /* a rounded rectangle, not the 50 % of the round seats */
#transport.mini .tbtn.modb { height: 34px;
border-radius: 9px; font: var(--w-bold) var(--fs-tiny) var(--font-ui); letter-spacing: var(--tr-wide);
color: var(--ink-faint); background: transparent; border: var(--glass-border) solid transparent; }
#transport.mini .tbtn.modb.on { background: transparent; border-color: transparent; }
#transport.mini .fd { height: 24px; border: 0; background: transparent; box-shadow: none; border-radius: 0; cursor: ew-resize; overflow: visible; } /* the value pill rides above the line */
#transport.mini .fd::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: hsl(0 0% 100% / .14); } /* the line */
#transport.mini .fd-fill { top: 50%; bottom: auto; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--acc); opacity: .85; }
#transport.mini .fd-edge { top: 50%; bottom: auto; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--fg); box-shadow: var(--neu-raise); }
#transport.mini .fd-lbl { display: none; } /* the bar's own place says "scrub" */
#transport.mini .fd-val { right: 0; top: -14px; bottom: auto; font-size: var(--fs-micro); padding: 0 5px; border-radius: var(--r-pill); background: hsl(var(--glass-tint) / .96); }
#transport.mini .k { width: 34px; gap: 0; flex: 0 0 auto; }
#transport.mini .k-lbl { display: none; } /* RATE reads by its position; its value comes on touch */
#transport.mini .k-dial { width: 30px; height: 30px; }
#transport.mini .k-needle { height: 11px; width: 1.4px; }
#transport.mini .k-val { position: absolute; top: -22px; left: 50%; transform: translate(-50%, 2px); font-size: var(--fs-micro); }
#transport.mini .k:hover .k-val, #transport.mini .k.drag .k-val, #transport.mini .k.active .k-val { transform: translate(-50%, 0); }
#transport.mini .ro { background: transparent; box-shadow: none; text-align: right; }
#transport.mini .ro-val { color: var(--ink-key); }
#transport.mini .ro-val.live { color: var(--acc); }
#transport.mini .ro-sub { display: none; }
#transport.mini .ro { order: 1; width: auto; padding: 0 2px;
display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 0; }
#transport.mini .ro.period { flex: 0 0 auto; min-width: 0; }
#transport.mini .ro-val { font-size: var(--fs-micro); line-height: 1.15; white-space: nowrap; }
#transport.mini .ro-lbl { display: none; }
#transport.mini .k { order: 2; }
#transport.mini .dock-btn, #transport.mini .mod-exp { order: 3; }
/* the scrub is the one thing that grows, so it absorbs whatever the seats above give up */
#transport.mini .fd { order: 0; }
#modwin.mir-modwindow .m2workbar button { display: inline-flex; align-items: center; justify-content: center; }
#modwin.mir-modwindow .m2workbar button > svg { display: block; margin: auto; }
#modwin.mir-modwindow .m2presave svg { width: 26px; height: 26px; }
/* ── 13. motion and touch courtesy ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { .dev, .k-val, .fd-val, .ro-sub, #rack, #transport.mini { transition: none; }
}
@media (hover: none) { #rack { opacity: 1; }
} /* SIL OFL — fonts/STIXTwoMath-OFL.txt · v2.0.2 subset — fonts/STIXTwoMath-SOURCE.txt */
#title .word { font-family: 'LW Title', var(--font-ui); color: #fff; letter-spacing: .06em; margin-right: -.06em; margin-left: .02em; }
#title .lam { font-family: 'STIX Two Math', 'Latin Modern Math', 'Libertinus Math', 'Noto Serif', 'DejaVu Serif', serif; font-style: italic; font-weight: 700; font-size: 1.3em; line-height: 1; letter-spacing: 0; margin-right: -.04em; }
#title .mark { margin-left: .05em; }
#title .ms { margin-left: 10px; }
body[data-theme="light"] #title .word { color: #000; }
/* the logo sits on the stage directly: no glass, no background, one word */
#title { pointer-events: auto; align-items: baseline; background: none; border: none; box-shadow: none; padding: 6px 10px; gap: 0; opacity: 1; }
#title .mark { align-self: center; }
body[data-theme="light"] #stage { background: #eef1f6; }
/* 2026-09-10 (Josh): THE TRANSPORT IS A PANE LIKE THE WINDOWS. It follows CARD STYLE (tinted / refractive), the
theme and FROST exactly as .dev does; it had kept a transparent surface of its own from an older wave. */
body[data-card="tinted"] #transport.mini { background: var(--glass-sheen), hsl(var(--glass-tint) / var(--card-opacity)); }
body[data-card="refractive"] #transport.mini { background: transparent; }
body.frost[data-card="tinted"] #transport.mini { -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter); }
body.frost[data-card="refractive"] .dev, body.frost[data-card="refractive"] .glass, body.frost #transport { -webkit-backdrop-filter: var(--frost-filter); backdrop-filter: var(--frost-filter); background: hsl(0 0% 100% / .10); }
body.frost.frost-hold .dev, body.frost.frost-hold .glass, body.frost.frost-hold #transport { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* `#floats > .dev { pointer-events: auto }` and `#rack > *` are ID rules (lab.css §55, §2) and a class-only
selector loses to them however many classes it stacks — MEASURED: the first build of this read back
`pointer-events: auto` on a rack card and the hole silently was not one. All three are named. On the
FLOAT layer the fall-through reaches the canvas, because `#floats` is itself pointer-transparent; in a
RACK it reaches the rack, which is a scroll container the finger still needs and which does nothing with
the press — the window's gap is a hole in the layer where a hole means something. */
body.disconnected:not(.phone) #floats > .dev,
body.disconnected:not(.phone) #rack > .dev,
body.disconnected:not(.phone) #rackL > .dev { pointer-events: none; }
/* ═══ wave 51 — W-MOBILE: THE PHONE ═══════════════════════════════════════════════════════════════
* A PHONE IS NOT A NARROW DESKTOP. The old small-screen rule (lab.css, `max-width: 860px`) drops the
* rack ALONG THE BOTTOM; that rule is the iPad's and a narrow desktop window's and it is left exactly
* as it was. A phone gets ONE RACK ON THE LEFT in both orientations, the transport docked at its top,
* opaque glass, 44-px fingers on 22-px ink, and the low-power path. This block is the LAST one in the
* LAST stylesheet, so wherever both queries match, the phone's rules win by source order alone.
*
* THE BREAKPOINT — a POINTER / SIZE PAIR, because width alone cannot tell a phone from a small window.
* The pointer half is `(hover: none)`: the house's own touch idiom (§13 above already reveals with it
* everything the desktop hides behind hover), and the one pointer feature a headless proof can reach.
* arm 1 · portrait no hover AND ≤ 700 px wide. Every phone portrait today is 440 CSS px or less
* (673 on an unfolded Fold); the NARROWEST tablet, the iPad mini, is 744. 700 sits
* in that gap with room on both sides.
* arm 2 · landscape no hover AND ≤ 520 px TALL AND ≤ 1000 px wide. A phone on its side is 440 tall
* at the largest; EVERY iPad in landscape is 744 tall or more. The width clause
* keeps a wide, short touch-screen desk display out.
* A desktop window shrunk to 390 px keeps `hover: hover` and keeps the desktop layout — that is exactly
* what "what the desktop keeps" means. THE IPAD IS UNTOUCHED by this wave: portrait 744–834 clears
* arm 1, landscape 744+ tall clears arm 2, so it keeps the 860-px rule it has today.
*
* `--phone: 1` is the SENTINEL: the breakpoint is written HERE, once, and rack.js reads this property
* back out of the computed style (as it already reads --rack-w) rather than carrying a second copy of
* the query in script. One definition, two readers.
*/
@media (hover: none) and (max-width: 700px),
(hover: none) and (max-height: 520px) and (max-width: 1000px) {
body.rack-hidden { --rack-edge: 0px; } /* … and follows to the screen edge when the rack has gone */
/* ── 1. ONE RACK, ON THE LEFT — portrait and landscape both ─────────────────────────────────── */
#rack { top: calc(env(safe-area-inset-top) + var(--top-bar)); bottom: 0; left: 0; right: auto;
width: var(--rack-w); height: auto; max-height: none; direction: ltr; /* ltr puts the 2-px scrollbar back on the rack's INNER edge */
padding: var(--card-gap) var(--card-gap) max(var(--card-gap), env(safe-area-inset-bottom)) max(var(--card-gap), env(safe-area-inset-left)); }
#rack > * { direction: ltr; }
body.rack-hidden #rack { transform: translateX(calc(-100% - 12px)); } /* it leaves to the LEFT now */
#rackL, #rackPeek, #rackPeekL { display: none !important; } /* the mirror rack and both hover-peek strips stand down */
/* ── 2. the masthead strip: the logo (which opens the menus) and the status tags ─────────────── */
#title { left: max(env(safe-area-inset-left), 8px); top: calc(env(safe-area-inset-top) + 3px); z-index: calc(var(--z-chrome) + 6); padding: 4px 6px; min-height: 40px; }
#title::after { content: ''; position: absolute; inset: -3px -8px; } /* the 44-px finger on the menu opener, the same ink */
#badges { left: max(env(safe-area-inset-left), 8px); right: max(env(safe-area-inset-right), 8px); top: env(safe-area-inset-top); height: var(--top-bar); align-items: center;
padding-left: 116px; justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; z-index: calc(var(--z-chrome) + 5); }
/* WAVE 59 · THE BAR IS A SUBSTITUTION HERE, NOT A SUPPRESSION. `display: none` was right that a phone has
no keys and wrong that it should also take away the three GESTURES in the same line — and the clause
naming `space = play` was the only place in the whole app that told anyone the thing can be played, on
the one device where discovery is hardest. So the keyboard legend stands down and the TOUCH one takes
its seat: same bar, same 9 s, same SETTINGS switch, same pointer-events: none. It wraps rather than
running off a 390-px screen, which is why the pill becomes a card at this width. */
/* AND IT MUST NOT FOLLOW THE RACK HERE. lab.css §174 fades the bar out with `body.rack-hidden` — right on
a desktop, where hiding the rack is a deliberate "get out of my way". On a phone the rack starts hidden
BY DESIGN (rack.js enterPhone), so that rule would have switched off the touch legend at exactly the
moment it is the only thing on the screen telling anyone what to do. Found by looking at the picture. */
/* an ABSOLUTE box with only `left` shrink-to-fits against the space to its RIGHT, so at left: 50% the bar
was 250 px on a 500-px screen and max-width could not widen it. The width is stated instead. */
/* ── 3. THE HIDE TOGGLE FOLLOWS THE RACK, and sits in the thumb zone (desktop's stays fixed) ──── */
#rackToggle { left: calc(max(env(safe-area-inset-left), 0px) + var(--rack-edge) + 6px); right: auto;
top: auto; bottom: calc(max(env(safe-area-inset-bottom), 0px) + 14px); transition: left var(--t-soft) ease; }
#rackAdd { left: calc(max(env(safe-area-inset-left), 0px) + var(--rack-edge) + 6px); right: auto;
top: auto; bottom: calc(max(env(safe-area-inset-bottom), 0px) + 60px); transition: left var(--t-soft) ease; }
/* wave 54: FAVOURITE LAYOUTS is the third button up the same stack, and it follows the rack exactly as the two
below it do — same left, same transition, same 44-px finger. Wave 51's law is one rule, not three copies. */
#rackFav { left: calc(max(env(safe-area-inset-left), 0px) + var(--rack-edge) + 6px); right: auto;
top: auto; bottom: calc(max(env(safe-area-inset-bottom), 0px) + 106px); transition: left var(--t-soft) ease; }
#rackToggle::after, #rackAdd::after, #rackFav::after { content: ''; position: absolute; inset: -8px; } /* 30 px of ink, 44 px of finger (an absolute inset runs from the PADDING box, so the 1-px glass edge is paid for twice) */
#rackAddList, #rackFavList { left: calc(max(env(safe-area-inset-left), 0px) + var(--rack-edge) + 6px); right: auto;
top: auto; bottom: calc(max(env(safe-area-inset-bottom), 0px) + 152px); max-width: calc(100vw - var(--rack-edge) - 24px); max-height: 50vh; overflow: auto; }
/* ── 4. OPAQUE: no backdrop-filter anywhere the phone paints every frame ─────────────────────── */
#notebook, #graphTip { -webkit-backdrop-filter: none; backdrop-filter: none; background: hsl(var(--glass-tint) / 1); }
body[data-theme="dark"] #notebook::before { display: none; }
#notebook { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100dvh !important; /* !important beats the inline width/height the desktop's resize grip wrote */
max-width: none; max-height: none; border-radius: 0; resize: none;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.nb-grip { display: none; }
.mb-list { max-width: calc(100vw - 24px); }
.mb-item { min-height: var(--touch); }
/* HIDEABLE, NEVER CLOSABLE: the transport has no × at this breakpoint — ▾ is its hide, and which way it
was left is remembered in this browser's settings (rack.js, `phoneTr`). */
.dev[data-id="transport"] .dev-close { display: none; }
.dev[data-id="observer"] .seg:has(> .seg-b:nth-child(6)) > .seg-b { min-width: var(--touch); }
.pk-c { min-width: var(--touch); min-height: var(--touch); } /* the mode chips wrap, so a wider seat costs a column, not a control */
.keys-chip { min-height: var(--touch); }
.hint-i { width: var(--touch); height: var(--touch); }
/* (c) SPECTRUM's lane is the one interior this wave re-flows: seven controls in one 274-px row cannot
all carry 44 px (4 + 50 + fader + 40 + 3 × 44 + gaps overruns by 20 px), so the lane becomes TWO
rows of 44 — name over fader, the phase/rate knobs and M / S / × beside them. Same seven controls,
same order, same identity; only the wrapping is the phone's. */
.sp-row { grid-template-columns: 4px minmax(0, 1fr) var(--touch) var(--touch) var(--touch);
grid-template-rows: var(--touch) var(--touch); height: auto; gap: 4px; }
.sp-row > .sp-band { grid-area: 1 / 1 / 3 / 2; }
.sp-row > .sp-id { grid-area: 1 / 2 / 2 / 3; }
.sp-row > .fd { grid-area: 2 / 2 / 3 / 3; height: var(--touch); }
.sp-row > .sp-knobs { grid-area: 1 / 3 / 3 / 4; height: 100%; gap: 2px; }
.sp-row > .sp-b.mute { grid-area: 1 / 4 / 2 / 5; }
.sp-row > .sp-b.solo { grid-area: 2 / 4 / 3 / 5; }
.sp-row > .sp-x { grid-area: 1 / 5 / 3 / 6; }
.sp-row > .sp-knobs { justify-content: space-between; }
.sp-row .sp-knobs .k { width: var(--touch); height: 46px; justify-content: center; }
.sp-row .sp-knobs .k-dial::before { left: -15px; right: -15px; top: -15px; bottom: -15px; } /* 17 px of ink, 45 px of finger */
/* ⚠ WAVE 106 · THE RATE DIAL SHRANK, SO ITS BAND GROWS BY THE SAME TWO PIXELS. The rule above is
written around the 17-px phase dial: 17 + 15 + 15 = 47. Giving RATE a 15-px ink to distinguish it
from PHASE left it at 15 + 30 = 45 nominal, and the gate MEASURED 43 — the seat sits on a
fractional x, so a pixel goes at each edge. Under the 44-px law by one pixel, which is exactly
the kind of thing a distinction is not allowed to cost. The ink stays 15 and the finger comes
back to 47: a smaller MARK must never mean a smaller TARGET. */
.sp-row .sp-knobs .k.rate .k-dial::before { left: -16px; right: -16px; top: -16px; bottom: -16px; }
.sp-b, .sp-x { position: relative; align-self: center; justify-self: center; }
.sp-b::after { content: ''; position: absolute; inset: -3px -6px; }
.sp-x::after { content: ''; position: absolute; inset: -4px -9px; }
/* (d) WAVE 52 — the modulation window's own furniture, on the same law: the SEAT grows, the ink
does not. The two round 22-px buttons (the row × and the playhead's ⤢ EXPAND) keep their puck
painted into the content box of a 44-px box, exactly as ⏻ ⓘ ⇱ already do above; the macro's
name field and its DRIVE menu take the full 44-px seat, and the strip — which is a READOUT and
takes no pointer — is left at the 12 px it is designed at. */
.mod-x, .mod-exp { width: var(--touch); height: var(--touch); padding: calc((var(--touch) - 22px) / 2);
border: 0; border-radius: 50%; background-origin: content-box; background-clip: content-box;
background-image: radial-gradient(closest-side, var(--glass-raise) calc(100% - 1.5px), var(--glass-hairline) calc(100% - 1.5px) 100%, transparent 100%); }
.mod-exp.live { background-image: radial-gradient(closest-side, var(--acc2-soft) calc(100% - 1.5px), color-mix(in srgb, var(--acc2) 55%, transparent) calc(100% - 1.5px) 100%, transparent 100%); }
.mod-name, .mod-drive, .mod-wave { min-height: var(--touch); }
.mod-mm { min-width: 64px; }
/* (e) WAVE 61 — the ROUTER's grip, on the same law again: a 22-px puck painted into the content
box of a 44-px button. AND THE MACRO HEADER WRAPS, for the reason wave 60's `.mod-srch` had to:
the row now carries five things, four of which take 44-px seats on a phone, and 250 px of card
does not hold them — an un-wrapped row overflows the rack rather than folding, and puts a button
where elementFromPoint answers `#rack`. Wrapping costs a row; not wrapping costs the control. */
.mod-macroh { flex-wrap: wrap; }
.mod-grip { width: var(--touch); height: var(--touch); padding: calc((var(--touch) - 22px) / 2);
border: 0; border-radius: 50%; background-origin: content-box; background-clip: content-box;
background-image: radial-gradient(closest-side, var(--acc2-soft) calc(100% - 1.5px),
color-mix(in srgb, var(--acc2) 45%, transparent) calc(100% - 1.5px) 100%, transparent 100%); }
.mod-grip.armed { box-shadow: none;
background-image: radial-gradient(closest-side, var(--acc2-soft) calc(100% - 2px), var(--acc2) calc(100% - 2px) 100%, transparent 100%); }
}
/* Native instruments, September 2026. Modulation retains its own vocabulary. */
.native-clean .dev-body { padding: 10px 12px; }
.native-clean .grp, .native-clean .grp .grp { border: 0; outline: 0; box-shadow: none; background: none; padding: 0; margin: 0 0 12px; }
.native-clean .grp-lbl { font-size: var(--fs-micro); color: var(--dim); letter-spacing: .12em; margin: 4px 0 8px; }
.native-clean .row { gap: 8px; align-items: center; justify-content: center; margin: 6px 0; }
.native-clean .seg-lbl { font-size: var(--fs-micro); }
.native-clean .ro { min-width: 0; box-shadow:var(--neu-inset);border:0;background:var(--glass-well); }
.native-clean .ro-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.native-clean .ro-sub { height: 2.6em; overflow: hidden; line-height: 1.3; }
.native-clean .row > .k { flex: 0 0 64px; }
.native-info { display: inline-flex; vertical-align: middle; position: relative; height: 28px; align-items: center; }
.native-info-button { width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--dim); cursor: pointer; font: italic var(--w-bold) 12px Georgia, 'Times New Roman', serif; }
.native-info-button:hover, .native-info-button:focus-visible, .native-info-button[aria-expanded="true"] { color: var(--acc); border-color: var(--glass-hairline); background: var(--glass-raise); outline: none; }
.native-info .native-info-content { display: none !important; z-index: 150; top: 100%; left: 0; width: min(340px, calc(100vw - 16px)); max-height: min(360px, calc(100vh - 16px)); overflow: auto; box-sizing: border-box; padding: 14px 16px; border-radius: var(--r-lg); color: var(--fg-soft); font: var(--fs-small)/1.5 var(--font-ui); }
.control-help { position: fixed; z-index: 10000; width: max-content; max-width: min(280px, calc(100vw - 16px)); box-sizing: border-box; padding: 8px 11px; border-radius: var(--r-md); color: var(--fg-soft); font: var(--fs-small)/1.5 var(--font-ui); pointer-events: none; }
.control-help[hidden] { display: none; }
.native-info .native-info-content, .control-help {
border: 1px solid hsl(0 0% 100% / .12) !important;
background: linear-gradient(160deg, hsl(0 0% 100% / .055), transparent 44%), hsl(214 16% 13% / .98) !important;
box-shadow: 0 8px 24px hsl(0 0% 0% / .34), inset 0 1px 0 hsl(0 0% 100% / .05) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body[data-theme="light"] .native-info .native-info-content, body[data-theme="light"] .control-help {
color: hsl(214 18% 20%);
border-color: hsl(214 20% 74% / .72) !important;
background: linear-gradient(160deg, hsl(0 0% 100% / .72), transparent 46%), hsl(214 24% 93% / .99) !important;
box-shadow: 0 8px 24px hsl(214 28% 28% / .18), inset 0 1px 0 hsl(0 0% 100% / .9) !important;
}
.native-clean[data-id="observer"] .grp { margin-bottom: 6px; }
.native-clean[data-id="observer"] .segw { flex: 1 1 100%; }
.native-clean[data-id="observer"] .row > .k { flex: 1 1 60px; }
.native-clean[data-id="observer"] .row { margin: 4px 0; }
.native-clean[data-id="settings"] .settings-section { margin-bottom: 18px; }
.native-clean[data-id="settings"] .segw { flex: 1 1 100%; }
.native-clean[data-id="settings"] .sw { flex: 1 1 110px; }
.native-clean[data-id="camera"] .row > .k { flex: 0 0 68px; }
.native-clean[data-id="palette"] .pal-preset { min-width: 0; }
.native-clean[data-id="palette"] .pal-nav { flex: 0 0 32px; width: 32px; }
.native-clean[data-id="palette"] .palette-action { flex: 1 1 90px; height: 34px; border-radius: 7px; justify-content: center; }
.native-clean .bow-hint { text-align: center; font-size: var(--fs-micro); color: var(--dim); }
.plane-model { display: block; width: 100%; height: 150px; touch-action: none; cursor: grab; }
.plane-model:active { cursor: grabbing; }
.plane-model:focus-visible { outline: 1px solid var(--acc); outline-offset: -2px; }
body.disconnected:not(.phone) .dev.native-selected > .dev-head,
body.disconnected:not(.phone) .dev.tab-hot > .dev-head { background: color-mix(in srgb,var(--acc) 24%,transparent); }
#transport .tempo-expand { order: 8; }
#transport .native-tempo { order: 9; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 12px; width: 100%; } /* 2026-09-10: MACROS | CLOCK, two tile rows high */
#transport .native-tempo[hidden] { display: none; }
.tempo-pane { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tempo-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 14px; font: var(--w-bold) var(--fs-micro)/1 var(--font-ui); letter-spacing: var(--tr-wider); color: var(--ink-faint); }
/* THE TRANSPORT'S MACRO TILES ARE THE WINDOW'S ROWS. These rules are the ported window's own (.mir-modwindow
.m2grip / .m2numseat / .m2num / .m2depthring, modwindow.css 583–607) and the host's overrides for them
(modhost.css 1037–1038, 1204, 1847–1848, 1865), re-scoped to the rail — copied, not redesigned. */
.tempo-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; max-height: 92px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fg) 22%, transparent) transparent; align-content: start; }
.tempo-tile { position: relative; height: 44px; border-radius: 8px; }
.tempo-tile.m2reorder { opacity: .55; }
.tempo-tile .m2slotrow { display: grid; grid-template-columns: 44px 44px 18px; align-items: center; height: 44px; }
.tempo-tile .m2grip { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; align-self: center; padding: 0; border: 0; background: transparent; color: var(--acc2); touch-action: none; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.tempo-tile .m2grip svg { width: 18px; height: 18px; display: block; pointer-events: none; }
.tempo-tile .m2grip:active { color: var(--fg); background: var(--glass-press); }
.tempo-tile .m2numseat { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 100%; padding: 0; border: 0; border-radius: 7px; background: transparent; touch-action: none; cursor: ns-resize; }
.tempo-tile .m2numseat:focus-visible { outline: 1px solid color-mix(in srgb, var(--fg) 72%, transparent); outline-offset: -3px; }
.tempo-tile .m2num { position: relative; z-index: 1; flex: 0 0 auto; pointer-events: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 0; color: var(--acc2); font: 600 10px var(--font-num); line-height: 1; }
.tempo-tile .m2depthring { position: absolute; z-index: 2; left: 7px; top: 50%; width: 30px; height: 30px; margin-top: -15px; overflow: visible; pointer-events: none; transform: rotate(-90deg); }
.tempo-tile .m2depthtrack, .tempo-tile .m2deptharc { fill: none; stroke-width: 2.2; }
.tempo-tile .m2depthtrack { stroke: transparent; }
.tempo-tile .m2deptharc { stroke: var(--acc); stroke-linecap: round; }
.tempo-tile .m2numseat.m2zero .m2deptharc { opacity: 0; }
.tempo-tile .m2numseat.drag .m2deptharc { stroke-width: 3; }
.tempo-tile .m2slottools { display: flex; align-items: center; width: 18px; height: 44px; }
.tempo-tile .m2rowgrip { width: 18px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--acc2); opacity: .6; touch-action: none; cursor: grab; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.tempo-tile .m2rowgrip:hover, .tempo-tile .m2rowgrip:active { opacity: 1; }
.tempo-tile .m2rowgrip svg { width: 13px; height: 13px; pointer-events: none; }
.tempo-tile [hidden] { display: none !important; }
#transport .native-tempo { position: relative; }
.tempo-info { position: absolute; top: 6px; right: 6px; }
.tempo-empty { font-size: var(--fs-micro); color: var(--ink-faint); line-height: 1.4; }
.tempo-empty { grid-column: 1 / -1; font-size: var(--fs-micro); color: var(--ink-faint); line-height: 1.4; }
.tempo-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; }
#transport.tempo-open { flex-wrap: wrap; }
/* Motion can change ink, never the dimensions of the controls around it. */
.native-clean .formula { white-space: normal; }
.native-clean .sp-rows[hidden] { display: none !important; }
@media (pointer: coarse) { .native-info-button, .native-clean[data-id="palette"] .pal-nav, .native-tempo .trig { min-width: 44px; min-height: 44px; }
}
.native-clean [hidden] { display: none !important; }
.native-clean .row > .trig { flex: 1 1 76px; min-width: 0; }
.native-clean .sp-head { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.native-clean .sp-head .trig { padding: 0 3px; font-size: 9px; }
.native-clean .sp-head .native-info { grid-row: 2; }
.native-clean[data-id="settings"] > .dev-body > .segw { margin-bottom: 12px; }
.native-clean[data-id="settings"] .settings-page > .row { margin: 10px 0 14px; }
.native-clean[data-id="settings"] .settings-help { display: flex; flex-wrap: wrap; }
.native-clean[data-id="palette"] .palette-presets { display: grid; grid-template-columns: 30px minmax(0,1fr) 30px; gap: 5px; }
.native-clean[data-id="palette"] .palette-presets .sel { width: 100%; min-width: 0; }
.native-clean[data-id="palette"] .palette-seam .ro { padding: 2px; }
.native-clean[data-id="palette"] .palette-seam .ro-sub { height: 1.3em; }
.native-clean[data-id="observer"] .segw > .k-lbl { margin-bottom: 5px; }
.native-clean[data-id="observer"] .row > .segw { width: 100%; flex: 1 1 100%; }
.native-clean .segw { align-items: stretch; }
.native-clean .segw > .seg { width: 100%; box-sizing: border-box; }
.native-clean[data-id="observer"] .seg-b { min-height: 32px; }
.native-clean .row { min-height: 0; }
.native-clean .grp > .row { padding: 0; }
.native-clean[data-id="palette"] .grp-lbl, .native-clean[data-id="clip"] .grp-lbl { display: none; }
.native-clean[data-id="observer"] .wave-row > .segw > .seg { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%; }
.native-clean[data-id="observer"] .wave-row-0 > .segw > .seg, .native-clean[data-id="observer"] .wave-row-6 > .segw > .seg { grid-template-columns:repeat(2,minmax(0,1fr)); }
.native-clean[data-id="observer"] .wave-row-6 > .segw { flex:1 1 150px;width:auto; }
.native-clean[data-id="observer"] .wave-row-6 > .k { flex:0 0 64px; }
.native-clean[data-id="observer"] .wave-row { margin: 0 0 10px; }
.native-clean[data-id="observer"] .wave-row-2, .native-clean[data-id="observer"] .wave-row-5 { margin-bottom:14px; }
.native-clean[data-id="observer"] .seg button { min-height:32px; padding:0 4px; }
.native-clean .window-help-book > .note, .native-clean .window-help-book > .sturm-note { display:block !important;position:static;margin:0; }
.native-clean[data-id="camera"] .camera-motion .sw { flex: 1 1 100%; }
.native-clean .native-info-content .ro-sub { height:auto; }
.native-clean .row:empty { display:none; }
.native-info .native-info-content { position:fixed !important; inset:auto; margin:0; border:0; }
.native-info .native-info-content:popover-open { display:block !important; }
.native-tempo-hz { display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:var(--fs-micro);font-variant-numeric:tabular-nums; }
.native-clean[data-id="spectrum"] .grp > .row > .segw { flex:1 1 100%; }
.native-clean[data-id="spectrum"] .grp > .row:first-of-type .seg { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
.native-clean[data-id="spectrum"] .grp .seg button { padding:0 5px;min-width:0; }
.native-clean[data-id="spectrum"] .grp .k-lbl { max-width:100%; }
.native-clean > .dev-body { gap:4px; }
.native-clean .k-val { position:absolute;top:100%;left:50%;transform:translate(-50%,2px);z-index:2; }
.native-clean .k:hover .k-val, .native-clean .k:focus-within .k-val, .native-clean .k.drag .k-val, .native-clean .k[data-live] .k-val { transform:translate(-50%,0); }
.native-clean[data-id="observer"] .wave-row { margin-bottom:8px; }
.native-clean[data-id="observer"] .wave-row-2, .native-clean[data-id="observer"] .wave-row-5 { margin-bottom:18px; }
.native-clean[data-id="palette"] .palette-seam .ro { display:flex;align-items:center;gap:10px; }
.native-clean[data-id="palette"] .palette-seam .ro-sub { display:none; }
.native-clean[data-id="clip"] .grp > .row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center; }
.native-clean[data-id="clip"] .grp > .row > .segw { grid-column:1/-1;width:100%; }
.native-clean[data-id="clip"] .grp > .row > .segw .seg { justify-content:center; }
@media (pointer:coarse) { .native-clean[data-id="observer"] .seg button { min-height:44px; }
}
.plane-model[aria-disabled="true"] { opacity:.35;cursor:default; }
.native-play-row { display:flex;align-items:center;gap:4px;flex-wrap:wrap;width:100%;min-width:0; }
#transport.mini .native-play-row { gap:2px; }
#transport { box-sizing:border-box;max-width:100%;overflow:hidden; }
#transport .native-play-row { min-width:0;width:100%;overflow:hidden; }
#transport .native-tempo { flex:none;box-sizing:border-box; }
#transport.mini.tempo-open { width:min(640px,calc(100vw - 24px));height:auto;min-height:46px;padding-bottom:8px; }
#transport .tempo-expand { position:relative;flex:0 0 72px;width:72px;height:34px;padding:4px 15px 4px 7px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr 1fr;column-gap:4px;align-items:center;border:1px solid var(--glass-hairline);border-radius:8px;background:var(--glass-well);box-shadow:var(--neu-inset);color:var(--fg-soft);touch-action:none; }
#transport .tempo-expand:hover,#transport .tempo-expand:focus-visible { border-color:color-mix(in srgb,var(--acc2) 60%,transparent);background:var(--glass-raise);outline:0; }
#transport .tempo-expand[aria-expanded="true"] { border-color:color-mix(in srgb,var(--acc2) 70%,transparent);box-shadow:var(--neu-inset),0 0 7px color-mix(in srgb,var(--acc2) 24%,transparent); }
#transport .tempo-number { grid-area:1/1/3/2;align-self:center;font:var(--w-bold) 12px/1 var(--font-num);font-variant-numeric:tabular-nums;color:var(--acc2); }
#transport .tempo-unit { align-self:end;font:var(--w-bold) 7px/1 var(--font-ui);letter-spacing:var(--tr-wide);color:var(--ink-key); }
#transport .tempo-hz { align-self:start;font:var(--w-med) 7px/1.1 var(--font-num);font-style:normal;font-variant-numeric:tabular-nums;color:var(--dim);white-space:nowrap; }
#transport .tempo-chevron { position:absolute;right:6px;top:50%;width:5px;height:5px;margin-top:-4px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform var(--t-fast);color:var(--dim); }
#transport .tempo-expand[aria-expanded="true"] .tempo-chevron { transform:translateY(3px) rotate(225deg); }
#transport .native-tempo { padding:8px;border-top:1px solid var(--glass-hairline);border-radius:0 0 10px 10px;background:linear-gradient(180deg,var(--glass-well),transparent); }
#transport.mini { width:min(640px,calc(100vw - 24px));contain:layout paint; }
#transport.mini .tempo-expand { flex-basis:72px;width:72px;min-width:72px; }
#transport.mini .native-play-row { flex-wrap:nowrap; }
#transport.mini .fd { flex:1 1 48px;min-width:40px; }
#transport.mini .ro { flex:0 1 auto;min-width:0;overflow:hidden; }
#transport.mini .ro.time { width:58px; }
#transport.mini .ro.period { width:76px; }
#transport.mini .ro-val { max-width:100%;overflow:hidden;text-overflow:ellipsis; }
#transport.mini .tbtn.modb { min-width:38px;width:38px;padding:0 5px; }
#transport.mini .tbtn.modb.on { color:var(--acc2); }
.native-clean .native-rotors { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;row-gap:14px; }
.native-clean .native-ab { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
.plane-model { object-fit:contain; background:var(--glass-well);box-shadow:var(--neu-inset);border-radius:8px; }
.native-clean[data-id="camera"] .camera-motion { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;row-gap:12px; }
.native-clean[data-id="camera"] .camera-motion .sw { grid-column:1/-1;width:100%; }
#transport .native-info { display:inline-flex;position:relative;align-items:center;flex:0 0 24px;order:7; }
#transport .native-info-content:popover-open { display:block !important; }
#transport.docked .native-play-row { display:grid;gap:5px; }
#transport.docked .native-play-row > .tbtn { min-width:0;width:100%;height:34px; }
#transport.docked .native-play-row > .fd { min-width:0;width:100%; }
#transport.docked .native-play-row > .k { width:auto;min-width:0; }
#transport.docked .native-play-row > .ro { min-width:0;width:auto;height:42px;padding:4px;overflow:hidden; }
#transport.docked .native-play-row .ro-sub { display:none; }
#transport.docked .native-play-row .ro-val { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#transport.docked .native-play-row .k-val { position:absolute;top:100%;left:50%;transform:translateX(-50%); }
#transport .native-tempo .trig { min-width:0;height:44px;min-height:44px;padding:0 3px;justify-content:center;font-size:8.5px;letter-spacing:.04em; } /* the window's seats are 44 px; the clock tiles match */
#transport .k-val { display:none; }
#transport .k:hover .k-val, #transport .k:focus-within .k-val, #transport .k.drag .k-val { display:block; }
#transport.docked .native-play-row { grid-template-columns:repeat(5,minmax(0,1fr)); }
#transport.docked .native-play-row > .fd { grid-column:1/5; }
#transport.docked .native-play-row > .ro { grid-column:span 2; }
#transport.docked .native-play-row > .ro.period { grid-column:span 3; }
#transport.docked .native-play-row .k-lbl { display:none; }
#transport .native-tempo .trig { min-height:44px; }
#transport.docked .native-play-row .fd-val { display:none; }
#transport.docked .native-play-row .fd:focus-visible .fd-val, #transport.docked .native-play-row .fd:hover .fd-val { display:block; }
#transport.docked .tempo-expand { grid-column:span 2;width:100%; }
#transport.docked .native-tempo { width:100%;grid-template-columns:minmax(0,1fr); }
#transport.docked .play { grid-area:1/1; }
#transport.docked .modb { grid-area:1/2; }
#transport.docked .transport-home { grid-area:1/3; }
#transport.docked .transport-step-back { grid-area:1/4; }
#transport.docked .transport-step-forward { grid-area:1/5; }
#transport.docked .fd { grid-area:2/1/3/5; }
#transport.docked .k { grid-area:2/5; }
#transport.docked .ro.time { grid-area:3/1/4/3; }
#transport.docked .ro.period { grid-area:3/3/4/6; }
#transport.docked .jump { grid-area:4/1; }
#transport.docked .dock-btn { grid-area:4/2; }
#transport.docked .mod-exp { grid-area:4/3; }
#transport.docked .tempo-expand { grid-area:4/4/5/6; }
@media (max-width:1000px) {
#transport.mini,#transport.mini.tempo-open { width:min(560px,calc(100vw - 24px)); }
#transport.mini .ro.period { display:none; }
}
@media (max-width:860px) {
#transport.mini,#transport.mini.tempo-open { left:calc(var(--rack-w) + 10px);right:10px;top:calc(env(safe-area-inset-top) + 112px);bottom:auto;width:auto;transform:none; }
#transport.mini .fd { min-width:32px; }
#transport.mini .ro.time { width:50px; }
#transport.mini .tbtn.modb { min-width:34px;width:34px; }
#transport.mini .tempo-expand { flex-basis:68px;width:68px;min-width:68px; }
}
@media (pointer:coarse) { #transport .native-tempo .trig { min-height:44px; }
}
/* Shared control relief: native redesign uses the same kit as PULSE and the other instruments. */
.dev:not(.mir-modwindow) .seg { padding:3px;gap:2px;border:1px solid var(--glass-hairline);border-radius:9px;background:var(--glass-well);box-shadow:var(--neu-inset); }
.dev:not(.mir-modwindow) .seg-b { border:0;border-radius:6px;background:transparent;color:var(--ink-key); }
.dev:not(.mir-modwindow) .seg-b:hover { background:var(--glass-raise); }
.dev:not(.mir-modwindow) .seg-b.on { background:hsl(var(--glass-tint) / 1);box-shadow:var(--neu-raise);color:var(--acc); }
.dev:not(.mir-modwindow) .trig { background:hsl(var(--glass-tint) / 1);border:1px solid transparent;box-shadow:var(--neu-raise);border-radius:8px; }
.dev:not(.mir-modwindow) .trig:active { background:var(--glass-well);box-shadow:var(--neu-inset); }
.dev:not(.mir-modwindow) .sw { border:1px solid transparent;border-radius:8px;box-shadow:var(--neu-flat); }
.dev:not(.mir-modwindow) .sw.on,
.dev:not(.mir-modwindow) .trig[aria-expanded="true"],
.dev:not(.mir-modwindow) .trig[aria-pressed="true"],
#transport .native-tempo .trig[aria-pressed="true"] { color:var(--fg);background:var(--acc-soft);border-color:color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:var(--neu-inset),0 0 5px color-mix(in srgb,var(--acc) 22%,transparent); }
.dev:not(.mir-modwindow) .sw.on .sw-led { background:var(--acc);box-shadow:0 0 6px color-mix(in srgb,var(--acc) 70%,transparent); }
.dev:not(.mir-modwindow) .trig[aria-expanded]::before,
.dev:not(.mir-modwindow) .trig[aria-pressed]::before,
#transport .native-tempo .trig[aria-pressed]::before { content:'';flex:0 0 5px;width:5px;height:5px;margin-right:3px;border-radius:50%;background:var(--glass-press); }
.dev:not(.mir-modwindow) .trig[aria-expanded="true"]::before,
.dev:not(.mir-modwindow) .trig[aria-pressed="true"]::before,
#transport .native-tempo .trig[aria-pressed="true"]::before { background:var(--acc);box-shadow:0 0 6px color-mix(in srgb,var(--acc) 70%,transparent); }
/* Window contents expand naturally. The rack/page handles navigation; History alone keeps its list scroll. */
#floats > .dev { max-height:none; }
#floats > .dev > .dev-body { overflow:visible; }
.dev .picker, .dev .keys-list, .dev .calc-table, .dev .pj-list { max-height:none;overflow:visible; }
.native-clean[data-id="settings"] .settings-viewport { height:auto;overflow:visible; }
.native-clean .sp-knobs .k-val { max-width:80px; }
.native-clean[data-id="settings"] .settings-actions > .trig { flex:1 1 70px; }
/* Spectrum lanes own their compact column sizes; general window knobs never size these stacks. */
@media (hover:hover) and (pointer:fine) { .dev[data-id="spectrum"] .sp-row { grid-template-columns:4px 48px minmax(42px,1fr) 34px 28px 28px 24px; }
}
.dev[data-id="spectrum"] .sp-row > .sp-b, .dev[data-id="spectrum"] .sp-row > .sp-x { width:100%;min-width:0;box-sizing:border-box; }
.dev[data-id="spectrum"] .sp-knobs { align-self:center; }
.dev[data-id="spectrum"] .sp-knobs > .k { flex:none;min-height:0; }
.dev[data-id="spectrum"] .sp-b { background:hsl(var(--glass-tint) / 1);box-shadow:var(--neu-raise); }
.dev[data-id="spectrum"] .sp-b.on { color:var(--acc);background:var(--acc-soft);border-color:var(--acc);box-shadow:var(--neu-inset),0 0 5px color-mix(in srgb,var(--acc) 25%,transparent); }
/* Explanatory pockets are optional; numerical interaction labels stay available. */
body.window-info-off .native-info,
body.window-info-off .native-info-content { display:none !important; }
body.window-info-off .row:has(> .native-info):not(:has(> :not(.native-info))),
body.window-info-off .settings-help { display:none; }
.native-clean[data-id="camera"] .camera-control { display:flex;flex-wrap:nowrap;gap:6px;align-items:stretch; }
.native-clean[data-id="camera"] .camera-control > .segw { flex:1 1 0;width:auto;min-width:0; }
.native-clean[data-id="camera"] .camera-control .seg { display:flex;width:100%;height:100%;box-sizing:border-box; }
.native-clean[data-id="camera"] .camera-control .seg-b { flex:1;min-width:0;padding:0 4px;letter-spacing:.04em; }
.native-clean[data-id="camera"] .camera-control > .sw { flex:0 0 auto;min-width:0;padding:0 7px;letter-spacing:.04em; }
.native-clean[data-id="camera"] .camera-export-row { display:flex;flex-wrap:nowrap;gap:6px; }
.native-clean[data-id="camera"] .camera-export-row > .trig:first-child { flex:1 1 0;min-width:0; }
.native-clean[data-id="camera"] .camera-export-row > .camera-export-toggle { flex:0 0 32px;min-width:32px;padding:0; }
.native-clean[data-id="camera"] .camera-export-toggle::before { display:none; }
.native-clean[data-id="settings"] .settings-status-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.native-clean[data-id="settings"] .settings-status-grid > .sw { width:100%;min-width:0;box-sizing:border-box; }
#menubar .mb-list { background:var(--glass-sheen),hsl(var(--glass-tint) / .65);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:var(--glass-shadow);border:1px solid var(--glass-border-color); }
.shadow-controls { display:flex;flex-wrap:nowrap;gap:6px; }
.shadow-controls > .segw { flex:1;min-width:0; }
.shadow-controls .seg { display:flex; }
.shadow-controls .seg-b { min-width:0;padding:0 4px;flex:1; }
.dev .shadow-controls > .shadow-details-toggle { flex:0 0 30px;padding:0; }
.shadow-details-toggle::before { display:none !important; }
.shadow-details-toggle svg { width:14px;height:14px;transform:rotate(-90deg); }
.shadow-details-toggle[aria-expanded="true"] svg { transform:none; }
.shadow-details:not([hidden]) { display:flex;flex-direction:column;gap:8px; }
.dev .shadow-controls { display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:stretch;gap:6px; }
.dev .shadow-controls > .segw { width:100%;min-width:0; }
.dev .shadow-controls .seg { width:100%;height:100%;box-sizing:border-box; }
.dev .shadow-controls .seg-b { flex:1 1 0;padding:0 4px; }
.dev .shadow-controls > .shadow-details-toggle { width:32px;min-width:32px; }
#transport.docked .native-play-row > .dock-btn { order:-1; }