/* ==========================================================================
   DOTCLOUD · Glass & Metal, integrated (design system v3)
   --------------------------------------------------------------------------
   David, 2026-09-30: "time to integrate the new design system".

   BEHIND A FLAG until he approves it. Every rule here is scoped to
   :root[data-ds="3"], set by the inline script at the top of app.html from
   ?ds=3 (remembered in localStorage, ?ds=0 turns it off). With the flag off
   this file matches nothing and the studio is exactly as it was, which keeps
   the branch shippable for the builds already waiting on his "live", and makes
   before/after a reload apart.

   The source of truth is the Paper file "DOTCLOUD" (01M3PBZS0VZKKRZK74KFHDMDXD),
   artboards 02 to 13. Values come from design-system/tokens.css; the map from
   old values to tokens is design-system/TOKEN_MAP.md. Components reference
   SEMANTIC tokens only.

   Layer 1 (this file, first pass):
     the old :root names re-pointed at tokens · Geist Mono as the one mono face ·
     materials (matte glass with grain on every instrument, metal in its four
     roles) · the five controls of 13 · the modals · the rail · focus.
   ========================================================================== */

/* ── 1. The old names, re-pointed ─────────────────────────────────────────
   Every colour below is the SAME value it was (TOKEN_MAP §1: all exact), so
   this changes nothing on its own; it makes the tokens the source. The motion
   and the modal radius move to their decided values. */
:root[data-ds="3"] {
  --bg-void:    var(--color-bg-base-canvas);
  --bg-panel:   var(--color-bg-base-surface);
  --bg-raised:  var(--color-bg-base-raised);
  --bg-control: var(--color-bg-action-secondary-default);
  --bg-hover:   var(--color-bg-action-secondary-hover);
  --text-0: var(--color-fg-base-primary);
  --text-1: var(--color-fg-base-secondary);
  --text-2: var(--color-fg-base-tertiary);
  --text-3: var(--color-fg-base-disabled);
  --cream:  var(--color-cream-50);
  --state-modified: var(--color-state-modified);
  --state-error:    var(--color-state-negative);
  --state-live:     var(--color-state-live);
  --line:        var(--color-border-base-default);
  --line-strong: var(--color-border-base-strong);
  --focus:       var(--color-border-focus);
  --t-xs:  var(--text-caps);
  --t-sm:  var(--text-label);
  --t-md:  var(--text-body-sm);
  --t-lg:  var(--text-body);
  --t-xl:  var(--text-title);
  --t-2xl: var(--text-headline);
  --t-3xl: var(--text-display);
  --r-sm: var(--shape-chip);
  --r-md: var(--shape-control);
  --r-lg: var(--shape-card);
  --r-xl: var(--shape-panel);
  --e-1: var(--shadow-1);
  --e-2: var(--shadow-2);
  --e-3: var(--shadow-3);
  --duration-quick:  var(--motion-exit-duration);          /* 150, closes */
  --duration-fast:   var(--motion-enter-duration);         /* 250 -> 220 */
  --duration-medium: var(--motion-sheet-exit-duration);    /* 350 -> 250 */
  --duration-slow:   var(--motion-sheet-enter-duration);   /* 400 -> 360 */
  --ease-smooth-out: var(--motion-ease-out);
  --scale-large:     var(--motion-enter-scale);

  /* One mono face (decided 2026-09-29). app.html writes its mono stacks as
     var(--mono-face, <old stack>), so they fall back when the flag is off. */
  --mono-face: var(--font-mono);

  /* ── Metal, 03 Materials. Made from the neutral ladder plus cream, so it is
        warm and adds no new greys. Four roles only: selector, rim, grip,
        hallmark. Never bigger than a control. ── */
  --metal-chrome-stops:
    var(--color-cream-50) 0%, var(--color-neutral-50) 24%, var(--color-neutral-300) 47%,
    var(--color-neutral-800) 50%, var(--color-neutral-400) 55%, var(--color-neutral-200) 78%,
    var(--color-neutral-50) 100%;
  --metal-chrome: linear-gradient(180deg, var(--metal-chrome-stops));
  /* Satin: the selector's fill, the chrome with its horizon softened so a
     dark label reads across it (fg.on-primary on the darkest band, 7.9:1). */
  --metal-satin: linear-gradient(180deg,
    var(--color-cream-50) 0%, var(--color-neutral-50) 34%, var(--color-neutral-200) 52%,
    var(--color-neutral-300) 58%, var(--color-neutral-200) 80%, var(--color-cream-100) 100%);
  --metal-gunmetal: linear-gradient(180deg,
    var(--color-neutral-800) 0%, var(--color-neutral-850) 48%, var(--color-neutral-900) 52%,
    var(--color-neutral-850) 100%);

  /* ── Glass, 03 Materials. Matte is the instrument: every panel, bar and
        dialog. The lit top edge and a fine grain are what make it glass and
        not a grey rectangle. ── */
  --ds-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ds-edge: inset 0 1px 0 var(--color-glass-edge-light);
  --ds-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23A3A3A3' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* A radius never changes on focus (07). The old global ring rounded every
   focused element to 4; app.html now applies that only without the flag. */
:root[data-ds="3"] :focus-visible {
  outline: var(--border-width-focus) solid var(--color-border-focus);
  outline-offset: var(--border-offset-focus);
}

:root[data-ds="3"] body {
  color: var(--color-fg-base-primary);
}

/* ── 2. Matte glass on the instruments ────────────────────────────────────
   92% of the surface over the work, blur 24, grain, a lit top edge and a
   hairline inside the edge. Over a pure-white canvas every text tier still
   passes (tertiary 5.9:1), which is what lets the panel be glass again after
   2026-08-21 made it opaque: the grade was chosen to hold that floor. */
:root[data-ds="3"] .sidebar,
:root[data-ds="3"] .draw-toolbar,
:root[data-ds="3"] .pillars,
:root[data-ds="3"] .hud,
:root[data-ds="3"] .project-menu,
:root[data-ds="3"] #info-toast {
  background-color: var(--color-glass-matte);
  background-image: var(--ds-grain);
  background-size: 160px 160px;
  -webkit-backdrop-filter: blur(var(--blur-glass-matte));
  backdrop-filter: blur(var(--blur-glass-matte));
  outline: var(--border-width-default) solid var(--color-border-base-default);
  outline-offset: var(--border-offset-inset);
  border: 0;
}
:root[data-ds="3"] .sidebar {
  border-radius: var(--shape-panel);
  box-shadow: var(--ds-edge);
  padding: var(--spacing-inset-lg);
}
:root[data-ds="3"] .draw-open {
  background-color: var(--color-glass-matte);
  background-image: var(--ds-grain);
  background-size: 160px 160px;
  -webkit-backdrop-filter: blur(var(--blur-glass-matte));
  backdrop-filter: blur(var(--blur-glass-matte));
  outline: var(--border-width-default) solid var(--color-border-base-default);
  outline-offset: var(--border-offset-inset);
  height: var(--size-control-default);
  padding: 0 var(--spacing-inset-sm);
  border-radius: var(--shape-card);
  box-shadow: var(--ds-edge), var(--shadow-2);
  color: var(--color-fg-base-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-caps);
  font-weight: var(--font-weight-medium);
  transition: color var(--motion-feedback-duration) var(--motion-feedback-easing);
}
:root[data-ds="3"] .draw-open:hover { color: var(--color-fg-base-primary); }
:root[data-ds="3"] .draw-toolbar {
  border-radius: var(--shape-panel);
  padding: var(--spacing-inset-xs);
  gap: var(--spacing-inline-xs);
  box-shadow: var(--ds-edge), var(--shadow-2);
}
:root[data-ds="3"] .project-menu { border-radius: var(--shape-card); box-shadow: var(--ds-edge), var(--shadow-2); }
:root[data-ds="3"] #info-toast { border-radius: var(--shape-control); box-shadow: var(--ds-edge), var(--shadow-2); color: var(--color-fg-base-secondary); }

/* ── 3. The rail: 12 outside, 8 inside (decided 2026-09-29) ── */
:root[data-ds="3"] .panel-rail { border-radius: var(--shape-tab-rail); }
:root[data-ds="3"] .panel-tab { border-radius: var(--shape-tab); color: var(--color-fg-base-secondary); }
:root[data-ds="3"] .panel-tab:hover { background: var(--color-bg-action-ghost-hover); color: var(--color-fg-base-primary); }
:root[data-ds="3"] .panel-tab.active { background: var(--color-bg-state-selected); color: var(--color-fg-on-primary); }

/* ── 4. The five controls, 13 · Controls ──────────────────────────────── */

/* 4.1 Preset pill: 24 tall, a fill you can find without its line.
   NO `display` here, deliberately: this rule is more specific than most of the
   app's own hiding rules, and setting display showed pills that are meant to
   be hidden (measured: "Add as a layer" appeared under Template). A button
   centres its own label vertically, so height alone does the job. */
:root[data-ds="3"] .preset-pill {
  height: var(--size-control-compact);
  padding: 0 var(--spacing-inset-xs);
  border: 0;
  border-radius: var(--shape-control);
  background: var(--color-bg-action-secondary-default);
  color: var(--color-fg-base-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  transition: background var(--motion-feedback-duration) var(--motion-feedback-easing),
              color var(--motion-feedback-duration) var(--motion-feedback-easing);
}
:root[data-ds="3"] .preset-pill:hover { background: var(--color-bg-action-secondary-hover); color: var(--color-fg-base-primary); }
:root[data-ds="3"] .preset-pill:active { background: var(--color-bg-action-secondary-pressed); }
:root[data-ds="3"] .preset-pill.active,
:root[data-ds="3"] .preset-pill[aria-pressed="true"] { background: var(--color-bg-state-selected); color: var(--color-fg-on-primary); }
:root[data-ds="3"] .preset-pill:disabled { background: var(--color-bg-state-disabled); color: var(--color-fg-base-disabled); cursor: default; }

/* 4.2 Toggle: two labelled halves, the ON half cream. Real per-half colours
   instead of the old difference blend: the words are one line of text filled
   with a gradient split exactly at the middle, so each half takes its own
   colour and neither depends on what is under the other. */
:root[data-ds="3"] .toggle {
  width: 60px;
  height: var(--size-control-compact);
  background: var(--color-bg-base-raised);
  outline: var(--border-width-default) solid var(--color-border-base-subtle);
  outline-offset: var(--border-offset-inset);
  border-radius: var(--shape-control);
  font-family: var(--font-mono);
  font-size: var(--text-caps);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  transition: outline-color var(--motion-feedback-duration) var(--motion-feedback-easing);
  --half-off: var(--color-fg-base-secondary);
  --half-on:  var(--color-fg-base-tertiary);
}
:root[data-ds="3"] .toggle:hover { outline-color: var(--color-border-base-strong); }
:root[data-ds="3"] .toggle:focus-visible { outline: var(--border-width-focus) solid var(--color-border-focus); outline-offset: var(--border-offset-focus); }
:root[data-ds="3"] .toggle::before {
  top: 4px; left: 4px; width: 26px; height: 16px;
  border-radius: var(--shape-chip);
  background: var(--color-bg-action-secondary-hover);
  transition: transform var(--motion-feedback-duration) var(--motion-feedback-easing),
              background var(--motion-feedback-duration) var(--motion-feedback-easing);
}
:root[data-ds="3"] .toggle.on::before { transform: translateX(26px); background: var(--color-bg-state-selected); }
:root[data-ds="3"] .toggle::after {
  inset: 0 4px;
  mix-blend-mode: normal;
  color: transparent;
  background: linear-gradient(90deg, var(--half-off) 50%, var(--half-on) 50%);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-ds="3"] .toggle.on { --half-off: var(--color-fg-base-tertiary); --half-on: var(--color-fg-on-primary); }

/* 4.3 Slider, a fill row: 32 tall, the fill width is the value, the chrome
   grip appears only on the row in your hand, and the fill follows the hand
   with no easing on its width. */
:root[data-ds="3"] .slider-group {
  height: var(--size-control-default);
  border: 0;
  border-radius: var(--shape-control);
  background: var(--color-bg-base-raised);
  transition: background var(--motion-feedback-duration) var(--motion-feedback-easing);
}
:root[data-ds="3"] .slider-group:hover,
:root[data-ds="3"] .slider-group:focus-within { background: var(--color-bg-base-raised); border: 0; }
:root[data-ds="3"] .slider-group::before {
  background: var(--color-bg-action-secondary-default);
  transition: background var(--motion-feedback-duration) var(--motion-feedback-easing);
}
:root[data-ds="3"] .slider-group:hover::before,
:root[data-ds="3"] .slider-group:focus-within::before { background: var(--color-bg-action-secondary-hover); }
:root[data-ds="3"] .slider-group::after {
  top: 0; height: 100%; width: 2px; border-radius: 0;
  transform: translateX(-50%);
  background: var(--metal-chrome);
  box-shadow: none;
  transition: opacity var(--motion-feedback-duration) var(--motion-feedback-easing);
}
:root[data-ds="3"] .slider-group:hover::after,
:root[data-ds="3"] .slider-group:focus-within::after { height: 100%; }
:root[data-ds="3"] .slider-group:focus-within { outline: var(--border-width-focus) solid var(--color-border-focus); outline-offset: var(--border-offset-focus); }
/* The music's reach over a moving row, under the tick at your value. */
:root[data-ds="3"] .slider-reach { background: var(--color-border-base-default); }
:root[data-ds="3"] .slider-group .slider-label {
  padding: 0 var(--spacing-inset-sm);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-base-primary);
  text-shadow: none;
}
:root[data-ds="3"] .slider-group .slider-label span:last-child,
:root[data-ds="3"] .slider-group .dial-value {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--color-fg-base-primary) !important;
}

/* 4.4 Select: a drawn field over the native list, which stays. */
:root[data-ds="3"] .preset-select,
:root[data-ds="3"] .kt-select,
:root[data-ds="3"] .draw-select {
  height: var(--size-control-default);
  /* A floor as well as a height: `flex: 1` grows from nothing, so in a column
     a dropdown kept only its text's height (14 px), wherever no rule had
     caught that box (Use a local font's picker, David 2026-10-17). */
  min-height: var(--size-control-default);
  padding: 0 28px 0 var(--spacing-inset-sm);
  background: var(--color-bg-base-raised) var(--ds-chevron) no-repeat right 10px center / 12px 12px;
  border: 0;
  outline: var(--border-width-default) solid var(--color-border-base-default);
  outline-offset: var(--border-offset-inset);
  border-radius: var(--shape-control);
  color: var(--color-fg-base-primary);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  -webkit-appearance: none; appearance: none;
  transition: outline-color var(--motion-feedback-duration) var(--motion-feedback-easing);
}
:root[data-ds="3"] .preset-select:hover,
:root[data-ds="3"] .kt-select:hover,
:root[data-ds="3"] .draw-select:hover { outline-color: var(--color-border-base-strong); }
/* The ring replaces the hairline while focus lasts; .kt-select used to kill it. */
:root[data-ds="3"] .preset-select:focus-visible,
:root[data-ds="3"] .kt-row .kt-select:focus-visible,
:root[data-ds="3"] .draw-select:focus-visible { outline: var(--border-width-focus) solid var(--color-border-focus); outline-offset: var(--border-offset-focus); }
/* A text box that borrows the select's field (the Tempo box) is typed in, not
   opened: no chevron, and its text runs to the same inset on both sides. */
:root[data-ds="3"] input.draw-select { background-image: none; padding-right: var(--spacing-inset-sm); cursor: text; }
:root[data-ds="3"] .preset-select option,
:root[data-ds="3"] .kt-select option,
:root[data-ds="3"] .layer-blend option,
:root[data-ds="3"] .layer-blend optgroup { background: var(--color-bg-base-raised); color: var(--color-fg-base-primary); }
/* A layer's blend menu: the row's own small chip, in the type of the panel. */
:root[data-ds="3"] .layer-blend { font-family: var(--font-sans); font-weight: var(--font-weight-medium); }

/* 4.5 Modal: matte glass on the scrim, 24 in every sense. */
:root[data-ds="3"] .modal-backdrop {
  background: var(--color-scrim);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  z-index: var(--layer-modal);
  transition: opacity var(--motion-exit-duration) var(--motion-exit-easing);
}
:root[data-ds="3"] .modal-backdrop.open { transition: opacity var(--motion-enter-duration) var(--motion-enter-easing); }
:root[data-ds="3"] .modal-card {
  background-color: var(--color-glass-matte);
  background-image: var(--ds-grain);
  background-size: 160px 160px;
  -webkit-backdrop-filter: blur(var(--blur-glass-matte)); backdrop-filter: blur(var(--blur-glass-matte));
  border-radius: var(--shape-modal);
  outline: var(--border-width-default) solid var(--color-border-base-default);
  outline-offset: var(--border-offset-inset);
  box-shadow: var(--ds-edge), var(--shadow-3);
  padding: var(--spacing-inset-xl);
  transition: transform var(--motion-exit-duration) var(--motion-exit-easing);
}
:root[data-ds="3"] .modal-backdrop.open .modal-card { transition: transform var(--motion-enter-duration) var(--motion-enter-easing); }
:root[data-ds="3"] .modal-card::after {
  bottom: calc(-1 * var(--spacing-inset-xl));
  margin: 8px calc(-1 * var(--spacing-inset-xl)) calc(-1 * var(--spacing-inset-xl));
  background: linear-gradient(to top, var(--color-bg-base-surface), transparent);
}

/* ── 5. The toolbar: matte pills, and the one primary action in cream with
        a chrome rim (metal's rim role). ── */
:root[data-ds="3"] .toolbar-btn {
  height: var(--size-control-default);
  padding: 0 var(--spacing-inset-sm);
  border: 0;
  border-radius: var(--shape-card);
  background-color: var(--color-glass-matte);
  background-image: var(--ds-grain);
  background-size: 160px 160px;
  -webkit-backdrop-filter: blur(var(--blur-glass-matte)); backdrop-filter: blur(var(--blur-glass-matte));
  outline: var(--border-width-default) solid var(--color-border-base-default);
  outline-offset: var(--border-offset-inset);
  box-shadow: var(--ds-edge);
  color: var(--color-fg-base-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-caps);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  transition: color var(--motion-feedback-duration) var(--motion-feedback-easing),
              background-color var(--motion-feedback-duration) var(--motion-feedback-easing);
}
:root[data-ds="3"] .toolbar-btn:hover { color: var(--color-fg-base-primary); background-color: color-mix(in srgb, var(--color-neutral-800) 92%, transparent); }
:root[data-ds="3"] .toolbar-btn.primary {
  border: var(--border-width-md) solid transparent;
  outline: 0;
  background: linear-gradient(var(--color-bg-action-primary-default), var(--color-bg-action-primary-default)) padding-box,
              var(--metal-chrome) border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--shadow-1);
  color: var(--color-fg-on-primary);
  font-weight: var(--font-weight-semibold);
}
:root[data-ds="3"] .toolbar-btn.primary:hover {
  background: linear-gradient(var(--color-bg-action-primary-hover), var(--color-bg-action-primary-hover)) padding-box,
              var(--metal-chrome) border-box;
}
:root[data-ds="3"] .toolbar-btn.active-panel {
  background: var(--color-bg-state-selected); color: var(--color-fg-on-primary);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ── 6. The dock: one matte bar, the mode you are in in satin chrome
        (metal's selector role). Inside 16 minus 4 is 12. ── */
:root[data-ds="3"] .pillars {
  padding: var(--spacing-inline-xs);
  gap: var(--spacing-inline-xs);
  border-radius: var(--shape-panel);
  box-shadow: var(--ds-edge), var(--shadow-2);
}
:root[data-ds="3"] .pillar-btn {
  height: var(--size-control-default);
  padding: 0 var(--spacing-inset-sm);
  background: transparent;
  border-radius: var(--shape-card);
  color: var(--color-fg-base-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-caps);
  font-weight: var(--font-weight-medium);
  transition: background var(--motion-feedback-duration) var(--motion-feedback-easing),
              color var(--motion-feedback-duration) var(--motion-feedback-easing);
}
:root[data-ds="3"] .pillar-btn:hover { background: var(--color-bg-action-ghost-hover); color: var(--color-fg-base-primary); }
:root[data-ds="3"] .pillar-btn.active {
  background: var(--metal-satin);
  color: var(--color-fg-on-primary);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-neutral-0) 70%, transparent), var(--shadow-1);
}
:root[data-ds="3"] .tempo-pill { background: transparent; border-radius: var(--shape-card); }
/* Draw inside the dock (2026-10-23): one of the dock's buttons, not a glass pill of its own. */
:root[data-ds="3"] .pillars .draw-open {
  background: transparent; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  outline: 0; box-shadow: none; border-radius: var(--shape-card);
}
:root[data-ds="3"] .pillars .draw-open:hover { background: var(--color-bg-action-ghost-hover); }
/* The rooms in the panel: the dock's chrome, smaller, on the panel's glass. */
:root[data-ds="3"] .room-switch { border-radius: var(--shape-card); }
:root[data-ds="3"] .room-switch .pillar-btn { height: var(--size-control-default); border-radius: calc(var(--shape-card) - 3px); }

/* ── 7. Fallbacks, 03: no backdrop-filter, reduced transparency or more
        contrast asked for, and every grade becomes matte at 97%. ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-ds="3"] .sidebar, :root[data-ds="3"] .draw-toolbar, :root[data-ds="3"] .pillars,
  :root[data-ds="3"] .modal-card, :root[data-ds="3"] .toolbar-btn:not(.primary) {
    background-color: color-mix(in srgb, var(--color-neutral-950) 97%, transparent);
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root[data-ds="3"] .sidebar, :root[data-ds="3"] .draw-toolbar, :root[data-ds="3"] .pillars,
  :root[data-ds="3"] .modal-card, :root[data-ds="3"] .toolbar-btn:not(.primary),
  :root[data-ds="3"] .project-menu, :root[data-ds="3"] #info-toast {
    background-color: color-mix(in srgb, var(--color-neutral-950) 97%, transparent);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ── 8. Smoked glass: the cards that sit over the work ────────────────────
   Export, the sync check, the shared floor. Adaptive (decided 2026-09-29, option D): the base
   here is the ceiling, 92%, which passes over anything; app-main.js
   (dsSmokedAdapt) reads the canvas under the card and lowers it to the least
   its text needs, easing over 700 ms, and holds still in Break. */
:root[data-ds="3"] .export-panel,
:root[data-ds="3"] .av-check-card,
:root[data-ds="3"] .floor-card {
  background-color: color-mix(in srgb, var(--color-neutral-1000) var(--opacity-smoked-max), transparent);
  background-image: none;
  -webkit-backdrop-filter: blur(var(--blur-glass-smoked)); backdrop-filter: blur(var(--blur-glass-smoked));
  outline: var(--border-width-default) solid var(--color-border-base-default);
  outline-offset: var(--border-offset-inset);
  box-shadow: var(--ds-edge), var(--shadow-2);
  transition: background-color var(--motion-glass-adapt-duration) var(--motion-ease-out);
}
:root[data-ds="3"] .export-panel { border-radius: var(--shape-card); }
:root[data-ds="3"] .av-check-card,
:root[data-ds="3"] .floor-card { border-radius: var(--shape-panel); }
:root[data-ds="3"] .av-check { background: var(--color-scrim); }

/* ── 9. The Capsule picker is a sheet: matte, 24 at the corner ── */
:root[data-ds="3"] .capsule-picker.open { background: var(--color-scrim); }
:root[data-ds="3"] .capsule-picker-sheet {
  background-color: var(--color-glass-matte);
  background-image: var(--ds-grain);
  background-size: 160px 160px;
  -webkit-backdrop-filter: blur(var(--blur-glass-matte)); backdrop-filter: blur(var(--blur-glass-matte));
  border: 0;
  outline: var(--border-width-default) solid var(--color-border-base-default);
  outline-offset: var(--border-offset-inset);
  border-radius: var(--shape-sheet);
  box-shadow: var(--ds-edge), var(--shadow-3);
  clip-path: inset(0 round var(--shape-sheet));
}
:root[data-ds="3"] .capsule-picker-eyebrow,
:root[data-ds="3"] .picker-projects-h { font-family: var(--font-mono); font-size: var(--text-caps); color: var(--color-fg-base-tertiary); }
:root[data-ds="3"] .capsule-picker-lede { font-size: var(--text-body-sm); color: var(--color-fg-base-secondary); }
:root[data-ds="3"] .capsule-chip { height: var(--size-control-compact); background: var(--color-bg-action-secondary-default); border: 0; font-size: var(--text-label); color: var(--color-fg-base-secondary); }
:root[data-ds="3"] .capsule-chip:hover { background: var(--color-bg-action-secondary-hover); color: var(--color-fg-base-primary); }
:root[data-ds="3"] .capsule-chip[aria-pressed="true"] { background: var(--color-bg-state-selected); color: var(--color-fg-on-primary); }
:root[data-ds="3"] .capsule-chip-n { font-family: var(--font-mono); }
:root[data-ds="3"] .capsule-picker-close { background: var(--color-bg-action-secondary-default); border-radius: var(--shape-control); color: var(--color-fg-base-secondary); }
:root[data-ds="3"] .capsule-picker-close:hover { background: var(--color-bg-action-secondary-hover); color: var(--color-fg-base-primary); }
:root[data-ds="3"] .project-card-name { color: var(--color-fg-base-primary); }
:root[data-ds="3"] .project-card-when { color: var(--color-fg-base-tertiary); }
:root[data-ds="3"] .project-card.is-open .project-card-cover { outline-color: var(--color-border-selected); }

/* ── 10. The hallmark: a stamp of status (BETA, NEW), metal's fourth role.
        Satin, 10px caps, static, one per view. The old BETA was a violet
        #6854F6 set inline, the last of the three violets the palette
        removed in August. ── */
:root[data-ds="3"] .kaomoji-beta,
:root[data-ds="3"] .pill-forever-tag,
:root[data-ds="3"] [style*="color:#6854F6"] {
  display: inline-block;
  padding: 3px 6px 2px !important;
  border-radius: var(--shape-pill);
  background: var(--metal-satin);
  color: var(--color-fg-on-primary) !important;
  font: var(--font-weight-semibold) var(--text-caps)/1 var(--font-sans) !important;
  letter-spacing: 0.08em !important;
  vertical-align: 1px;
}

/* ── 11. Inline literals the stylesheet can still reach ──
   Hint greys written into style="" (#949494 in 80 places, #878787 in 23) sit
   between tiers; they take tertiary. A SENTENCE never goes below 12px
   (decided 2026-09-29), and the panel's inline hint paragraphs were 9 and
   10px. Caps labels are untouched: 10px is their floor. */
:root[data-ds="3"] [style*="color:#949494"],
:root[data-ds="3"] [style*="color: #949494"],
:root[data-ds="3"] [style*="color:#878787"],
:root[data-ds="3"] [style*="color: #878787"] { color: var(--color-fg-base-tertiary) !important; }
:root[data-ds="3"] p[style*="font-size:10px"],
:root[data-ds="3"] p[style*="font-size: 10px"],
:root[data-ds="3"] p[style*="font-size:9px"],
:root[data-ds="3"] p[style*="font-size: 9px"] { font-size: var(--text-body-sm) !important; line-height: 1.45 !important; }

/* ══ 12. Surfaces, Paper 14 ═══════════════════════════════════════════════
   The six pieces of chrome the system never drew, as proposed in Paper
   "14 · Surfaces" and approved by David on 2026-09-30 ("All yes", calls A to
   L). The behaviour half lives in app-main.js under DS_SURFACES; everything
   here is the look, and every rule is scoped to the flag like the rest.

   Still no `display` on anything that can be hidden by the app, with two
   deliberate exceptions that only ever HIDE: the header icons (A) and the
   parts of the export panel the new layout replaces (F). Hiding cannot
   reveal a thing that was meant to be hidden, which is the failure the rule
   is there to prevent. */

/* ── 12.1 Section header (A, B) ──
   A label, not a banner: 11, semibold, caps, secondary. The icon goes (the
   tab rail already says where you are), the chevron takes a fixed lane at
   the right edge, and the red dot IS the reset: it sits in the reset's
   target and turns into ↺ under the pointer or keyboard focus. */
:root[data-ds="3"] .section-title:not(.subblock-title) {
  min-height: var(--size-control-default);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-caps);
  color: var(--color-fg-base-secondary);
  gap: 0;
}
:root[data-ds="3"] .section-title > svg.lucide:first-child { display: none; }
:root[data-ds="3"] .section-title > .section-caret {
  order: 3;
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin-left: auto;
  font-size: 0;
  color: transparent;
  background: var(--ds-chevron) center / 12px 12px no-repeat;
}
:root[data-ds="3"] .section-title > .section-tools {
  order: 2;
  margin-left: auto;
  position: relative;
  width: 24px; height: 24px;
  justify-content: center;
  gap: 0;
}
:root[data-ds="3"] .section-title:has(> .section-tools) > .section-caret { margin-left: 0; }
/* The randomize button (RANDOMIZE AN ACCORDION) sits between the reset dot
   and the chevron, in the same 24px target. */
:root[data-ds="3"] .section-title > .section-roll {
  order: 3; width: 24px; height: 24px; margin: 0;
  border-radius: var(--shape-control); color: var(--color-fg-base-secondary);
}
:root[data-ds="3"] .section-title > .section-roll:hover { color: var(--color-fg-base-primary); background: var(--color-bg-action-ghost-hover); }
:root[data-ds="3"] .section-title:has(> .section-roll) > .section-caret { order: 4; }
:root[data-ds="3"] .section-title:not(:has(> .section-tools)) > .section-roll { margin-left: auto; }
:root[data-ds="3"] .section-dot { width: 6px; height: 6px; background: var(--color-state-modified); }
:root[data-ds="3"] .section-reset {
  position: absolute; inset: 0;
  margin: 0; padding: 0;
  border-radius: var(--shape-control);
  color: var(--color-fg-base-primary);
}
:root[data-ds="3"] .section-reset.on { opacity: 0; }
:root[data-ds="3"] .section-tools:hover .section-reset.on,
:root[data-ds="3"] .section-reset.on:focus-visible { opacity: 1; background: var(--color-bg-action-ghost-hover); }
:root[data-ds="3"] .section-tools:hover .section-dot,
:root[data-ds="3"] .section-tools:focus-within .section-dot { opacity: 0; }
/* The die (a nudge) has a 24px target of its own, left of the dot and reset; it once sat on top of
   the reset (both inset 0), so a press on the lit dot hit the die. */
:root[data-ds="3"] .section-title > .section-tools:has(> .section-dice) { width: auto; justify-content: flex-end; gap: 0; }
:root[data-ds="3"] .section-tools > .section-dice { position: relative; inset: auto; width: 24px; height: 24px; flex: none; margin-right: 24px; }
:root[data-ds="3"] .section-tools:has(> .section-dice) > .section-reset:not(.section-dice) { inset: 0 0 0 auto; width: 24px; }
:root[data-ds="3"] .section-tools:has(> .section-dice) > .section-dot { position: absolute; right: 9px; top: 50%; margin-top: -3px; }

/* A rule, then air: a hairline above every section but the first. */
:root[data-ds="3"] .section + .section {
  border-top: var(--border-width-default) solid var(--color-border-base-subtle);
  padding-top: var(--spacing-inset-sm);
}

/* Sub-blocks hang off a line, sentence case, one level down (5). */
:root[data-ds="3"] .subblock-title {
  min-height: 28px;
  padding-left: var(--spacing-inset-sm);
  border-left: var(--border-width-default) solid var(--color-border-base-default);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-fg-base-tertiary);
}
:root[data-ds="3"] .subblock-title:hover { color: var(--color-fg-base-secondary); }

/* Roll sits under the field it rolls (C), as a pill rather than a bar. */
:root[data-ds="3"] #template-roll-btn { order: 2; align-self: flex-start; margin: -6px 0 0 !important; }
/* The empty timeline block would otherwise sit between the field and Roll and
   cost a whole 14px gap of nothing. */
:root[data-ds="3"] .section-body:has(> #template-roll-btn) > .tl-block { order: 3; }
:root[data-ds="3"] .section-body > .tl-block:not(:has(> :not([hidden]))) { display: none; }

/* ── 12.2 Template picker (D) ──
   Beside the panel, over the canvas: a matte sheet, three across, landscape
   tiles only (never tall, 2026-09-28). app-main.js moves the list to <body>,
   because a fixed popover inside the glass panel is clipped by it. */
:root[data-ds="3"] #template-dropdown-list.dsx-picker {
  position: fixed;
  top: 16px; left: 312px; right: auto;
  width: 552px;
  max-height: min(640px, calc(100vh - 32px));
  padding: 0 var(--spacing-inset-md) var(--spacing-inset-md);
  z-index: var(--layer-sheet);
  border-radius: var(--shape-panel);
  background-color: var(--color-glass-matte);
  background-image: var(--ds-grain);
  background-size: 160px 160px;
  -webkit-backdrop-filter: blur(var(--blur-glass-matte)); backdrop-filter: blur(var(--blur-glass-matte));
  outline: var(--border-width-default) solid var(--color-border-base-default);
  outline-offset: var(--border-offset-inset);
  box-shadow: var(--ds-edge), var(--shadow-3);
  overscroll-behavior: contain;
}
/* Three across at the least (David, 2026-10-16: "three columns minimum in
   desktop view"): a grid of three shares whatever width is left, so a visible
   scrollbar (about 15px of the 552) narrows the tiles instead of wrapping the
   third onto the next row, as fixed 168px tiles did. Each tile carries 4px of
   room round its picture for the selection ring (offset 2px, 2px wide), which
   the tile's own clip (for a long name's ellipsis) cut to its bottom curve. */
:root[data-ds="3"] #template-dropdown-list.dsx-picker.open {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start;
  gap: 6px 0;
  padding-left: calc(var(--spacing-inset-md) - 4px); padding-right: calc(var(--spacing-inset-md) - 4px);
}
:root[data-ds="3"] #template-dropdown-list.dsx-picker.open > .dsx-tpl-head {
  grid-column: 1 / -1;
  margin-left: calc(4px - var(--spacing-inset-md)); margin-right: calc(4px - var(--spacing-inset-md));
  padding-left: var(--spacing-inset-md); padding-right: var(--spacing-inset-md);
}
:root[data-ds="3"] #template-dropdown-list.dsx-picker.open > .dsx-tpl-empty { grid-column: 1 / -1; }
:root[data-ds="3"] #template-dropdown-list.dsx-picker #tpl-cat-root,
:root[data-ds="3"] #template-dropdown-list.dsx-picker #tpl-cat-back { display: none !important; }
:root[data-ds="3"] .dsx-tpl-head {
  position: sticky; top: 0; z-index: 2;
  flex: 0 0 calc(100% + 2 * var(--spacing-inset-md));
  display: flex; flex-direction: column; gap: var(--spacing-gap-md);
  margin: 0 calc(-1 * var(--spacing-inset-md));
  padding: var(--spacing-inset-md) var(--spacing-inset-md) var(--spacing-gap-sm);
  background: var(--color-neutral-950);
  border-radius: var(--shape-panel) var(--shape-panel) 0 0;
}
:root[data-ds="3"] .dsx-tpl-row { display: flex; gap: var(--spacing-gap-sm); align-items: center; }
:root[data-ds="3"] .dsx-tpl-search {
  flex: 1; height: var(--size-control-default);
  display: flex; align-items: center; gap: var(--spacing-inline-md);
  padding: 0 var(--spacing-inset-sm);
  border-radius: var(--shape-control);
  background: var(--color-bg-base-raised);
  outline: var(--border-width-default) solid var(--color-border-base-default);
  outline-offset: var(--border-offset-inset);
}
:root[data-ds="3"] .dsx-tpl-search:focus-within { outline: var(--border-width-focus) solid var(--color-border-focus); outline-offset: var(--border-offset-focus); }
:root[data-ds="3"] .dsx-tpl-search svg { flex: 0 0 14px; color: var(--color-fg-base-tertiary); }
:root[data-ds="3"] .dsx-tpl-search input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; outline: 0; padding: 0;
  color: var(--color-fg-base-primary);
  font: var(--font-weight-regular) var(--text-body)/var(--leading-body) var(--font-sans);
}
:root[data-ds="3"] .dsx-tpl-search input::placeholder { color: var(--color-fg-base-tertiary); }
:root[data-ds="3"] .dsx-tpl-search input:focus-visible { outline: 0; }
:root[data-ds="3"] .dsx-close {
  flex: 0 0 var(--size-control-default);
  width: var(--size-control-default); height: var(--size-control-default);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--shape-control);
  background: none; color: var(--color-fg-base-tertiary); cursor: pointer;
}
:root[data-ds="3"] .dsx-close:hover { background: var(--color-bg-action-ghost-hover); color: var(--color-fg-base-primary); }
:root[data-ds="3"] .dsx-tpl-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-inline-sm); }
:root[data-ds="3"] .dsx-tpl-chips .preset-pill { font-family: var(--font-mono); display: inline-flex; align-items: center; gap: var(--spacing-inline-sm); }
:root[data-ds="3"] .dsx-tpl-chips .preset-pill span { color: var(--color-fg-base-tertiary); }
:root[data-ds="3"] .dsx-tpl-chips .preset-pill.active span { color: color-mix(in srgb, var(--color-fg-on-primary) 60%, transparent); }
/* Capsules, then Grounds (ticket #6): each kind's drawers on a line under its name. */
:root[data-ds="3"] .dsx-tpl-chips .dsx-tpl-kind {
  flex-basis: 100%;
  font: var(--text-caps)/var(--leading-caps) var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-fg-base-tertiary);
}
:root[data-ds="3"] .dsx-tpl-empty { flex: 0 0 100%; padding: var(--spacing-inset-xl) 0; text-align: center; color: var(--color-fg-base-tertiary); font: var(--text-body-sm)/var(--leading-body-sm) var(--font-sans); }

:root[data-ds="3"] #template-dropdown-list.dsx-picker .template-dropdown-item {
  min-width: 0; width: auto;
  padding: 4px;
  flex-direction: column; align-items: stretch; gap: var(--spacing-stack-xs);
  background: none;
  border-radius: var(--shape-card);
  color: var(--color-fg-base-secondary);
  font: var(--font-weight-medium) var(--text-body-sm)/var(--leading-body-sm) var(--font-sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root[data-ds="3"] #template-dropdown-list.dsx-picker .template-dropdown-item .dd-thumb {
  width: 100%; height: auto; aspect-ratio: 16 / 10;
  border-radius: var(--shape-card);
  outline: var(--border-width-default) solid var(--color-border-base-subtle);
  outline-offset: var(--border-offset-inset);
  background: var(--color-bg-base-canvas);
  transition: outline-color var(--motion-feedback-duration) var(--motion-feedback-easing);
}
:root[data-ds="3"] #template-dropdown-list.dsx-picker .template-dropdown-item:hover { background: none; color: var(--color-fg-base-primary); }
:root[data-ds="3"] #template-dropdown-list.dsx-picker .template-dropdown-item:hover .dd-thumb { outline-color: var(--color-border-base-strong); }
:root[data-ds="3"] #template-dropdown-list.dsx-picker .template-dropdown-item.active { background: none; color: var(--color-fg-base-primary); }
:root[data-ds="3"] #template-dropdown-list.dsx-picker .template-dropdown-item.active .dd-thumb {
  outline: var(--border-width-selected) solid var(--color-border-selected);
  outline-offset: 2px;
}
:root[data-ds="3"] #template-dropdown-list.dsx-picker .template-dropdown-item:focus-visible { outline: 0; }
:root[data-ds="3"] #template-dropdown-list.dsx-picker .template-dropdown-item:focus-visible .dd-thumb {
  outline: var(--border-width-focus) solid var(--color-border-focus); outline-offset: var(--border-offset-focus);
}
:root[data-ds="3"] .template-dropdown-btn.dsx-open .arrow { transform: rotate(180deg); }

/* ── 12.3 Export panel (F, G) ──
   Ratios drawn in their true shape, five across, named only when chosen;
   the settings as segmented rows with their labels in one 64px lane; the one
   rimmed button on the page. */
:root[data-ds="3"] #video-export-panel.dsx-exp { padding: var(--spacing-inset-md); border-radius: var(--shape-panel); }
/* Never past the window: on a short one it scrolls (2026-10-18, it ran 14 px past 1440 by 900). */
:root[data-ds="3"] #video-export-panel.dsx-exp { max-height: calc(100vh - 84px); overflow-y: auto; overscroll-behavior: contain; }
:root[data-ds="3"] #video-export-panel.dsx-exp > .dsx-hide,
:root[data-ds="3"] #video-export-panel.dsx-exp .export-panel-title,
:root[data-ds="3"] #video-export-panel.dsx-exp #resolution-dims { display: none; }
:root[data-ds="3"] .dsx-exp-head { display: flex; align-items: center; justify-content: space-between; height: var(--size-control-compact); margin-bottom: var(--spacing-stack-md); }
:root[data-ds="3"] .dsx-exp-head h3 { margin: 0; font: var(--font-weight-semibold) var(--text-body)/var(--leading-body) var(--font-sans); color: var(--color-fg-base-primary); }
:root[data-ds="3"] #video-export-panel.dsx-exp .export-panel-close { position: static; width: var(--size-control-compact); height: var(--size-control-compact); border-radius: var(--shape-control); color: var(--color-fg-base-tertiary); }
:root[data-ds="3"] #video-export-panel.dsx-exp .export-panel-close:hover { background: var(--color-bg-action-ghost-hover); color: var(--color-fg-base-primary); }

:root[data-ds="3"] #video-export-panel.dsx-exp .ratio-grid { grid-template-columns: repeat(5, 1fr); gap: var(--spacing-gap-xs); margin-bottom: var(--spacing-stack-sm); }
:root[data-ds="3"] #video-export-panel.dsx-exp .ratio-btn {
  height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-stack-xs);
  padding: 0;
  background: none;
  outline: var(--border-width-default) solid transparent;
  outline-offset: var(--border-offset-inset);
  border-radius: var(--shape-control);
  color: var(--color-fg-base-tertiary);
}
:root[data-ds="3"] #video-export-panel.dsx-exp .ratio-btn::before {
  content: '';
  width: var(--dsx-gw, 22px); height: var(--dsx-gh, 22px);
  margin: calc((26px - var(--dsx-gh, 22px)) / 2) 0;
  border-radius: var(--radius-xs);
  outline: 1.2px solid currentColor; outline-offset: -1.2px;
}
:root[data-ds="3"] #video-export-panel.dsx-exp .ratio-btn:hover { background: var(--color-bg-action-ghost-hover); color: var(--color-fg-base-secondary); }
:root[data-ds="3"] #video-export-panel.dsx-exp .ratio-btn.active { background: var(--color-bg-base-raised); outline-color: var(--color-border-selected); color: var(--color-fg-base-primary); }
:root[data-ds="3"] #video-export-panel.dsx-exp .ratio-btn.active::before { background: var(--color-bg-state-selected); outline-color: transparent; }
:root[data-ds="3"] #video-export-panel.dsx-exp .ratio-btn .ratio-label { font: var(--font-weight-regular) var(--text-caps)/var(--leading-caps) var(--font-mono); color: inherit; }
:root[data-ds="3"] #video-export-panel.dsx-exp .ratio-btn .ratio-desc { display: none; }
:root[data-ds="3"] .dsx-ratio-caption { display: flex; justify-content: space-between; gap: var(--spacing-gap-md); margin-bottom: var(--spacing-stack-md); font: var(--text-body-sm)/var(--leading-body-sm) var(--font-sans); color: var(--color-fg-base-secondary); }
:root[data-ds="3"] .dsx-ratio-caption span:last-child { font-family: var(--font-mono); color: var(--color-fg-base-tertiary); }

:root[data-ds="3"] .dsx-exp-rows {
  display: flex; flex-direction: column; gap: var(--spacing-stack-sm);
  padding-top: var(--spacing-inset-sm);
  border-top: var(--border-width-default) solid var(--color-border-base-subtle);
}
:root[data-ds="3"] .dsx-exp-row { display: flex; align-items: center; gap: var(--spacing-gap-md); }
/* Beat snap sets the length in bars: Seconds and Poster first stand aside while it is on. */
:root[data-ds="3"] .dsx-exp-pair { display: flex; gap: var(--spacing-inset-md); margin-top: 10px; }
:root[data-ds="3"] .dsx-exp-pair > .toggle-row { flex: 1 1 0; min-width: 0; gap: var(--spacing-inset-sm); }
:root[data-ds="3"] .dsx-exp-pair select { width: auto; min-width: 0; }
:root[data-ds="3"] .dsx-exp .dsx-off { opacity: 0.4; pointer-events: none; }
:root[data-ds="3"] .dsx-exp-row > b {
  flex: 0 0 64px;
  font: var(--font-weight-regular) var(--text-caps)/var(--leading-caps) var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-fg-base-tertiary);
}
:root[data-ds="3"] .dsx-exp-row > .preset-row {
  flex: 1; display: flex; flex-wrap: nowrap; gap: var(--spacing-100);
  margin: 0 !important; padding: var(--spacing-100);
  border-radius: var(--shape-control);
  background: var(--color-bg-base-raised);
}
:root[data-ds="3"] .dsx-exp-row > .preset-row .preset-pill {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 var(--spacing-200);
  border-radius: calc(var(--radius-md) - var(--spacing-100));
  background: transparent;
  font-family: var(--font-mono);
}
:root[data-ds="3"] .dsx-exp-row > .preset-row .preset-pill:hover { background: var(--color-bg-action-secondary-default); }
:root[data-ds="3"] .dsx-exp-row > .preset-row .preset-pill.active { background: var(--color-bg-state-selected); color: var(--color-fg-on-primary); }
:root[data-ds="3"] .dsx-exp-row > .preset-row .preset-pill.pill-locked { color: var(--color-fg-base-tertiary); }
/* G: Forever, as a satin dot. The word is on the pill's hover and in the plan sheet. */
:root[data-ds="3"] #resolution-row .pill-forever-tag {
  width: 7px; height: 7px; padding: 0 !important;
  font-size: 0 !important; line-height: 0 !important;
  vertical-align: 0;
  overflow: hidden;
}
:root[data-ds="3"] #video-export-panel.dsx-exp #compression-desc {
  margin: var(--spacing-stack-sm) 0 0 !important; padding-left: calc(64px + var(--spacing-gap-md));
  font: var(--text-body-sm)/var(--leading-body-sm) var(--font-sans) !important;
  color: var(--color-fg-base-tertiary) !important;
}
:root[data-ds="3"] .dsx-exp-commit {
  display: flex; flex-direction: column; gap: var(--spacing-stack-sm);
  margin-top: var(--spacing-stack-md); padding-top: var(--spacing-inset-sm);
  border-top: var(--border-width-default) solid var(--color-border-base-subtle);
}
:root[data-ds="3"] .dsx-exp-summary { font: var(--text-label)/var(--leading-label) var(--font-mono); color: var(--color-fg-base-secondary); }
/* The one primary action on the page, so it takes the rim. */
:root[data-ds="3"] #export-video-go-btn {
  height: var(--size-control-prominent);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-inline-md);
  border: var(--border-width-md) solid transparent;
  outline: 0;
  border-radius: var(--shape-card);
  background: linear-gradient(var(--color-bg-action-primary-default), var(--color-bg-action-primary-default)) padding-box,
              var(--metal-chrome) border-box;
  box-shadow: var(--shadow-1);
  color: var(--color-fg-on-primary);
  font: var(--font-weight-semibold) var(--text-body)/1 var(--font-sans) !important;
}
:root[data-ds="3"] #export-video-go-btn:hover {
  background: linear-gradient(var(--color-bg-action-primary-hover), var(--color-bg-action-primary-hover)) padding-box,
              var(--metal-chrome) border-box;
  color: var(--color-fg-on-primary);
}
:root[data-ds="3"] #export-video-go-btn:active { transform: scale(var(--motion-scale-sm)); }

/* ── 12.4 Command palette (H, I) ──
   Names, not tags: results under group labels, descriptions in Geist 12
   beside the name, mono kept for values and keys. Corner 16: a tool you
   pass through, not a dialog you answer. */
:root[data-ds="3"] .cmdk-backdrop { background: var(--color-scrim); z-index: var(--layer-command); }
:root[data-ds="3"] .cmdk {
  border-radius: var(--shape-panel);
  background-color: var(--color-glass-matte);
  background-image: var(--ds-grain);
  background-size: 160px 160px;
  -webkit-backdrop-filter: blur(var(--blur-glass-matte)); backdrop-filter: blur(var(--blur-glass-matte));
  outline: var(--border-width-default) solid var(--color-border-base-default);
  outline-offset: var(--border-offset-inset);
  box-shadow: var(--ds-edge), var(--shadow-3);
}
:root[data-ds="3"] .dsx-cmdk-in {
  display: flex; align-items: center; gap: var(--spacing-gap-md);
  height: 52px; padding: 0 var(--spacing-inset-md);
  border-bottom: var(--border-width-default) solid var(--color-border-base-subtle);
}
:root[data-ds="3"] .dsx-cmdk-in svg { flex: 0 0 16px; color: var(--color-fg-base-tertiary); }
:root[data-ds="3"] .dsx-cmdk-in .cmdk-input {
  flex: 1; min-width: 0; padding: 0; border: 0;
  color: var(--color-fg-base-primary); caret-color: var(--color-fg-emphasis);
  font: var(--font-weight-regular) var(--text-title)/var(--leading-title) var(--font-sans);
}
:root[data-ds="3"] .dsx-cmdk-in .cmdk-input::placeholder { color: var(--color-fg-base-tertiary); }
/* The caret and the open palette show where focus is; the 2px bar was the
   global ring clipped by the card. */
:root[data-ds="3"] .cmdk-input:focus-visible { outline: 0; }
:root[data-ds="3"] .dsx-kbd {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border-radius: var(--shape-chip);
  outline: var(--border-width-default) solid var(--color-border-base-default); outline-offset: var(--border-offset-inset);
  font: var(--text-caps)/1 var(--font-mono);
  color: var(--color-fg-base-tertiary);
  flex-shrink: 0;
}
:root[data-ds="3"] .cmdk-list { padding: 6px var(--spacing-inset-xs) var(--spacing-inset-xs); }
:root[data-ds="3"] .dsx-cmdk-group {
  padding: var(--spacing-inset-xs) 10px 6px;
  font: var(--text-caps)/var(--leading-caps) var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-fg-base-tertiary);
}
:root[data-ds="3"] .cmdk-item {
  height: 36px; padding: 0 10px; gap: 10px;
  border-radius: var(--shape-control);
  font: var(--font-weight-medium) var(--text-body)/var(--leading-body) var(--font-sans);
  color: var(--color-fg-base-primary);
}
:root[data-ds="3"] .cmdk-item[aria-selected="true"] { background: var(--color-bg-action-secondary-default); }
:root[data-ds="3"] .cmdk-item .cmdk-kind { display: none; }
:root[data-ds="3"] .cmdk-item .cmdk-label { flex: 0 1 auto; }
:root[data-ds="3"] .cmdk-item .cmdk-hint {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--font-weight-regular) var(--text-body-sm)/var(--leading-body-sm) var(--font-sans);
  color: var(--color-fg-base-tertiary);
}
:root[data-ds="3"] .cmdk-item .dsx-cmdk-val {
  flex: 0 0 auto; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-left: auto;
  font: var(--text-label)/var(--leading-label) var(--font-mono);
  color: var(--color-fg-base-secondary);
}
:root[data-ds="3"] .cmdk-item .dsx-kbd { display: none; margin-left: auto; }
:root[data-ds="3"] .cmdk-item[aria-selected="true"] .dsx-kbd { display: inline-flex; }
:root[data-ds="3"] .cmdk-item[aria-selected="true"] .dsx-cmdk-val + .dsx-kbd { margin-left: 0; }
:root[data-ds="3"] .cmdk-foot {
  gap: var(--spacing-gap-lg); padding: 10px var(--spacing-inset-md);
  border-top: var(--border-width-default) solid var(--color-border-base-subtle);
  font: var(--text-caps)/var(--leading-caps) var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-fg-base-tertiary);
}
:root[data-ds="3"] .cmdk-foot kbd { background: none; padding: 0; margin-right: 5px; font: inherit; }

/* ── 12.5 Info and tooltips (J, K) ──
   One matte toast for the help dots, and one drawn tooltip for the chrome
   in place of the browser's grey one. */
:root[data-ds="3"] #info-toast {
  max-width: 280px;
  padding: var(--spacing-inset-sm) 14px;
  border-radius: var(--shape-card);
  outline-color: var(--color-border-base-strong);
  font: var(--text-body-sm)/18px var(--font-sans);
  color: var(--color-fg-base-secondary);
}
:root[data-ds="3"] #info-toast strong { color: var(--color-fg-base-primary); font-weight: var(--font-weight-medium); }
:root[data-ds="3"] #info-toast .info-sep { border-top: var(--border-width-default) solid var(--color-border-base-default); }
/* The only serif in the chrome, and the one hand-set touch (K). */
:root[data-ds="3"] .info-dot {
  width: 16px; height: 16px;
  background: none;
  outline: var(--border-width-default) solid var(--color-border-base-strong);
  outline-offset: var(--border-offset-inset);
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--font-weight-regular);
  font-size: 12px;
  color: var(--color-fg-base-tertiary);
}
:root[data-ds="3"] .info-dot:hover,
:root[data-ds="3"] .slider-group > .info-dot:hover { background: none; outline: var(--border-width-default) solid var(--color-border-selected); outline-offset: var(--border-offset-inset); color: var(--color-fg-emphasis); text-shadow: none; }
:root[data-ds="3"] .info-dot:focus-visible,
:root[data-ds="3"] .slider-group > .info-dot:focus-visible { background: none; outline: var(--border-width-focus) solid var(--color-border-focus); outline-offset: var(--border-offset-focus); color: var(--color-fg-emphasis); text-shadow: none; }

:root[data-ds="3"] .dsx-tip {
  position: fixed; left: 0; top: 0;
  z-index: var(--layer-toast);
  max-width: 240px;
  min-height: var(--size-control-compact);
  display: flex; align-items: center;
  padding: 4px var(--spacing-inset-xs);
  border-radius: var(--shape-control);
  background-color: var(--color-glass-matte);
  -webkit-backdrop-filter: blur(var(--blur-glass-matte)); backdrop-filter: blur(var(--blur-glass-matte));
  outline: var(--border-width-default) solid var(--color-border-base-strong);
  outline-offset: var(--border-offset-inset);
  box-shadow: var(--ds-edge), var(--shadow-2);
  font: var(--font-weight-medium) var(--text-body-sm)/var(--leading-body-sm) var(--font-sans);
  color: var(--color-fg-base-primary);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-feedback-exit-duration) var(--motion-exit-easing);
}
:root[data-ds="3"] .dsx-tip.show { opacity: 1; transition: opacity var(--motion-feedback-duration) var(--motion-feedback-easing); }
/* The rail's own fluid tip, in the same glass. */
:root[data-ds="3"] .panel-tip {
  padding: 6px var(--spacing-inset-xs);
  border-radius: var(--shape-control);
  background-color: var(--color-glass-matte);
  -webkit-backdrop-filter: blur(var(--blur-glass-matte)); backdrop-filter: blur(var(--blur-glass-matte));
  outline: var(--border-width-default) solid var(--color-border-base-strong);
  outline-offset: var(--border-offset-inset);
  box-shadow: var(--ds-edge), var(--shadow-2);
  color: var(--color-fg-base-primary);
  font: var(--text-body-sm)/var(--leading-body-sm) var(--font-sans);
}
:root[data-ds="3"] .panel-tip::before { display: none; }
:root[data-ds="3"] .panel-tip-name { font-weight: var(--font-weight-medium); }
:root[data-ds="3"] .panel-tip-blurb { opacity: 1; color: var(--color-fg-base-tertiary); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }

/* ── 12.6 Tempo pill (L) ──
   Eight pips for the phrase: the beat you are on in cream and taller, the
   ones behind in secondary, the ones ahead a strong line. Mono tempo, like
   every other value, and a hairline between the instrument and the modes. */
:root[data-ds="3"] .tempo-pill {
  gap: 10px;
  padding: 0 var(--spacing-inset-xs) 0 var(--spacing-inset-sm);
  margin-right: 6px;
  border-right: var(--border-width-default) solid var(--color-border-base-default);
  border-radius: 0;
  font-family: var(--font-mono);
}
:root[data-ds="3"] .tp-bpm { font-family: var(--font-mono); font-size: var(--text-body); font-weight: var(--font-weight-semibold); min-width: 5ch; }
:root[data-ds="3"] .tp-unit { font-family: var(--font-mono); font-size: var(--text-caps); letter-spacing: var(--tracking-caps); color: var(--color-fg-base-tertiary); margin-left: -6px; }
:root[data-ds="3"] .tempo-pill .tp-step {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Bar and beat, then the section, which holds on a click (2026-10-10). */
:root[data-ds="3"] .tp-bar-unit { margin-left: 0; margin-right: -6px; }
:root[data-ds="3"] .tp-bar { font-family: var(--font-mono); font-size: var(--text-body); font-weight: var(--font-weight-semibold); min-width: 4ch; }
:root[data-ds="3"] .tp-sec {
  height: 22px; border-radius: var(--shape-pill);
  border: var(--border-width-default) solid var(--color-border-base-strong);
  background: transparent; color: var(--color-fg-base-secondary);
  font: var(--font-weight-semibold) var(--text-caps)/1 var(--font-mono);
  letter-spacing: var(--tracking-caps);
}
:root[data-ds="3"] .tp-sec:hover { border-color: var(--color-fg-emphasis); color: var(--color-fg-emphasis); }
:root[data-ds="3"] .tp-sec.on { background: var(--color-bg-action-primary-default); border-color: transparent; color: var(--color-fg-on-primary); }
:root[data-ds="3"] .hud { border-radius: var(--shape-panel); box-shadow: var(--ds-edge), var(--shadow-2); padding: var(--spacing-inline-xs) var(--spacing-inset-sm); }
:root[data-ds="3"] .hud-src { font-family: var(--font-mono); letter-spacing: var(--tracking-caps); color: var(--color-fg-base-tertiary); }
:root[data-ds="3"] .hud-src i { background: var(--color-border-base-default); }
:root[data-ds="3"] .hud-src b { background: var(--color-fg-emphasis); }
:root[data-ds="3"] .dsx-pips { display: inline-flex; align-items: center; gap: 3px; height: 14px; }
:root[data-ds="3"] .dsx-pips i {
  width: 3px; height: 10px; border-radius: 1px;
  background: var(--color-border-base-strong);
}
:root[data-ds="3"] .dsx-pips i.past { background: var(--color-fg-base-secondary); }
:root[data-ds="3"] .dsx-pips i.now { height: 14px; background: var(--color-fg-emphasis); }
:root[data-ds="3"] .tp-tap {
  height: 22px;
  background: var(--color-bg-action-primary-default); color: var(--color-fg-on-primary);
  font: var(--font-weight-semibold) var(--text-caps)/1 var(--font-sans);
  letter-spacing: var(--tracking-caps);
  box-shadow: var(--ring-halo);
}
:root[data-ds="3"] .tp-tap:hover { box-shadow: var(--ring-halo-hover); }
:root[data-ds="3"] .tp-stop {
  height: 22px; margin-left: calc(-1 * var(--spacing-inset-xs));
  border-color: var(--color-border-selected); color: var(--color-fg-emphasis);
  font: var(--font-weight-semibold) var(--text-caps)/1 var(--font-mono);
  letter-spacing: var(--tracking-caps);
}
:root[data-ds="3"] .tp-stop:hover { background: var(--color-bg-action-ghost-hover); border-color: var(--color-fg-emphasis); }

/* ══ 13. Liquid metal, 16 · System 01 ═════════════════════════════════════
   A rim's light turns once on hover, 120° over motion.slow, and stops; it
   turns back on the way out. It needs the angle registered, or a gradient
   cannot be animated at all. Reduced motion sets the turn to 0, so the fill's
   own hover lift is all that is left. Rims only: the primary toolbar button
   and Export video, the two in the chrome today. */
@property --ds-metal-angle { syntax: '<angle>'; inherits: false; initial-value: 180deg; }
:root[data-ds="3"] .toolbar-btn.primary,
:root[data-ds="3"] #export-video-go-btn {
  --ds-metal-angle: 180deg;
  background: linear-gradient(var(--color-bg-action-primary-default), var(--color-bg-action-primary-default)) padding-box,
              linear-gradient(var(--ds-metal-angle), var(--metal-chrome-stops)) border-box;
  transition: --ds-metal-angle var(--motion-exit-duration) var(--motion-exit-easing),
              color var(--motion-feedback-duration) var(--motion-feedback-easing);
}
:root[data-ds="3"] .toolbar-btn.primary:hover,
:root[data-ds="3"] #export-video-go-btn:hover {
  --ds-metal-angle: calc(180deg + var(--motion-metal-turn));
  background: linear-gradient(var(--color-bg-action-primary-hover), var(--color-bg-action-primary-hover)) padding-box,
              linear-gradient(var(--ds-metal-angle), var(--metal-chrome-stops)) border-box;
  transition: --ds-metal-angle var(--motion-metal-duration) var(--motion-ease-out),
              color var(--motion-feedback-duration) var(--motion-feedback-easing);
}

/* ══ 14. Reduced motion, 16 · System 02 ══════════════════════════════════
   The tokens carry most of it (tokens.css, mode 3). What they cannot reach:
   presses stop scaling, the toggle knob jumps, the tempo pip stops growing
   and the tick stops flipping. The artwork is untouched: it is the content. */
@media (prefers-reduced-motion: reduce) {
  :root[data-ds="3"] #export-video-go-btn:active,
  :root[data-ds="3"] .tp-tap:active, :root[data-ds="3"] .tp-stop:active { transform: none; }
  :root[data-ds="3"] .toggle::before { transition: none; }
  :root[data-ds="3"] .dsx-pips i.now { height: 10px; }
  :root[data-ds="3"] .tp-tick.flip svg { transform: none; }
}

/* ══ 15. Density, 16 · System 03 ══════════════════════════════════════════
   The fill row takes its height from the density row, which is 32 at the
   default, so nothing changes until data-density is set. */
:root[data-ds="3"] .slider-group { height: var(--density-row, var(--size-control-default)); }

/* COMPARE A SETTING (app-main.js): one still a value, over the board. Tokens only; instant hover. */
.cmp-sheet {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9000;
  max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto;
  padding: var(--spacing-inset-md); border-radius: var(--shape-sheet);
  background: var(--color-bg-base-surface); color: var(--color-fg-base-primary);
  border: 1px solid var(--color-border-base-default);
  box-shadow: var(--shadow-3, var(--shadow-2));
  font-family: var(--font-sans);
}
.cmp-head { display: flex; align-items: center; gap: var(--spacing-inset-sm); margin-bottom: var(--spacing-inset-sm); }
.cmp-head h3 { margin: 0; flex: 1; font-size: var(--text-title); font-weight: var(--font-weight-medium); }
.cmp-head .cmp-against { width: auto; max-width: 220px; }
.cmp-close { background: none; border: 0; color: var(--color-fg-base-secondary); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: var(--shape-control); }
.cmp-close:hover { color: var(--color-fg-base-primary); }
.cmp-grid { display: grid; gap: var(--spacing-inset-sm); align-items: center; }
.cmp-axis { font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-fg-base-secondary); white-space: nowrap; }
.cmp-axis-b { text-align: right; padding-right: 4px; }
.cmp-cell { display: flex; flex-direction: column; gap: 4px; padding: 0; background: none; border: 0; cursor: pointer; color: inherit; text-align: left; transition-duration: 0s !important; }
.cmp-still { display: block; width: 100%; border-radius: var(--shape-chip); overflow: hidden; background: var(--color-bg-base-raised); outline: 1px solid var(--color-border-base-subtle); outline-offset: 0; }
.cmp-img { display: block; width: 100%; height: 100%; }
.cmp-cell:hover .cmp-still { outline-color: var(--color-border-base-strong); }
.cmp-cell[aria-pressed="true"] .cmp-still { outline: 2px solid var(--color-border-selected); }
.cmp-cell:focus-visible { outline: none; }
.cmp-cell:focus-visible .cmp-still { outline: 2px solid var(--color-border-focus); }
.cmp-val { font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-fg-base-secondary); }
.cmp-cell[aria-pressed="true"] .cmp-val { color: var(--color-fg-base-primary); }

/* PICTURES IN THE LISTS (app-main.js): each choice as a still, its name and tags. Tokens only; instant hover. */
.pick-sheet {
  position: fixed; z-index: 9000; overflow: auto; overscroll-behavior: contain;
  padding: var(--spacing-inset-sm); border-radius: var(--shape-sheet);
  background: var(--color-bg-base-surface); color: var(--color-fg-base-primary);
  border: 1px solid var(--color-border-base-default); box-shadow: var(--shadow-3, var(--shadow-2));
  font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--spacing-inset-sm);
  /* The filter stays in view and a focused still scrolls clear of it. */
  scroll-padding-top: calc(2 * var(--size-control-default, 30px) + 3 * var(--spacing-inset-sm));
}
/* The field and its filters stay in view together, the filters right under the field. */
/* The scroll bar stays inside the card's rounded corners (David, 2026-10-21: it ran past the card at the
   top): its track is inset by the corner's radius top and bottom, as the start picker's is. */
.pick-sheet::-webkit-scrollbar { width: 8px; }
.pick-sheet::-webkit-scrollbar-track { background: transparent; margin: var(--shape-sheet) 0; }
.pick-sheet::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.pick-sheet::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }
.pick-sheet::-webkit-scrollbar-thumb:active { background: rgba(255,255,255,0.30); }
.pick-head {
  position: sticky; top: calc(-1 * var(--spacing-inset-sm)); z-index: 1; flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--spacing-inline-sm);
  background: var(--color-bg-base-surface);
  box-shadow: 0 0 0 var(--spacing-inset-sm) var(--color-bg-base-surface);
}
.pick-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-inline-sm); }
.pick-chips[hidden] { display: none; }
.pick-filter {
  flex-shrink: 0; min-height: var(--size-control-default, 30px); height: var(--size-control-default, 30px); padding: 0 var(--spacing-inset-sm); border-radius: var(--shape-control);
  border: 1px solid var(--color-border-base-default); background: var(--color-bg-base-raised); color: var(--color-fg-base-primary);
  font: inherit; font-size: var(--text-label);
}
.pick-filter:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.pick-grid { display: grid; gap: 8px; flex-shrink: 0; }
.pick-cell { display: flex; flex-direction: column; gap: 3px; padding: 0; background: none; border: 0; cursor: pointer; color: inherit; text-align: left; min-width: 0; transition-duration: 0s !important; }
.pick-cell[hidden] { display: none; }
.pick-still { display: block; width: 100%; border-radius: var(--shape-chip); overflow: hidden; background: var(--color-bg-base-raised); outline: 1px solid var(--color-border-base-subtle); }
.pick-img { display: block; width: 100%; height: 100%; }
.pick-cell:hover .pick-still { outline-color: var(--color-border-base-strong); }
.pick-cell[aria-selected="true"] .pick-still { outline: 2px solid var(--color-border-selected); }
.pick-cell:focus-visible { outline: none; }
/* The house focus ring (:root[data-ds="3"] :focus-visible) outranks the line above and drew a second
   frame round the whole cell; the still's own ring is the focus here, as in the template picker. */
:root[data-ds="3"] .pick-cell:focus-visible { outline: 0; }
.pick-cell:focus-visible .pick-still { outline: 2px solid var(--color-border-focus); }
.pick-name { font-size: var(--text-label); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-tags { font-size: 10px; color: var(--color-fg-base-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 12px; }

/* GPU TIME PER EFFECT (app-main.js, staff only): the readout under the Effects menu. */
.fx-gpu-ms { font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-fg-base-tertiary); margin: 4px 0 2px; min-height: 1em; }
.fx-gpu-ms:empty { display: none; }

/* MIDI KNOBS (app-main.js): the status line and the learnt knobs. */
.midi-status { font-family: var(--font-mono); font-size: var(--text-label); color: var(--color-fg-base-tertiary); margin: 4px 0 0; }
.midi-maps { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.midi-map { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--text-label); color: var(--color-fg-base-secondary); }