/* myOS design tokens. Generated by packages/tokens/scripts/build.mjs from src/tokens.{light,dark}.json
   (Design Tokens Format Module 2025.10); do not hand-edit. Theme: follows the OS; <html data-theme="light|dark">
   forces a side. Brand: the default layer below; an org's own values come from its /…/brand.css ([data-org]). */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  color-scheme: light dark;
  --color-bg-board: light-dark(#dedede, #0d0d0d); /* Board backdrop */
  --color-bg-shell: light-dark(#ececec, #131313); /* Titlebar, drawer, gaps */
  --color-bg-canvas: light-dark(#f2f2f2, #171717); /* Canvas tile ground */
  --color-bg-tile: light-dark(#f7f7f7, #1a1a1a); /* Tiles and docked panels */
  --color-bg-raised: light-dark(#ffffff, #232323); /* Buttons, node cards */
  --color-bg-overlay: light-dark(#ffffff, #2a2a2a); /* Menus, popovers, toasts */
  --color-bg-well: light-dark(#e2e2e2, #0e0e0e); /* Fields and media wells */
  --color-bg-pressed: light-dark(#e2e2e2, #1f1f1f); /* Pressed controls */
  --color-bg-scrim: light-dark(rgba(20, 20, 20, 0.28), rgba(0, 0, 0, 0.55)); /* Behind dialogs */
  --color-bg-tint: light-dark(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.035)); /* Compare column, regions */
  --color-bg-hover: light-dark(#e6e6e6, #2b2b2b); /* Hover, secondary buttons */
  --color-bg-hover-strong: light-dark(#dcdcdc, #333333); /* Second hover, on segment */
  --color-bg-raised-hover: light-dark(#ffffff, #2b2b2b); /* Hover on a raised card or chip; lifts to --sh2. Light never darkens a white card */
  --color-bg-overlay-hover: light-dark(#e6e6e6, #363636); /* Hover and selection inside an overlay */
  --color-bg-disabled: light-dark(#e2e2e2, #0e0e0e); /* Disabled controls */
  --color-bg-drop-disabled: var(--color-bg-disabled); /* A drop target that takes nothing right now */
  --color-text-strong: light-dark(#141414, #f2f2f2); /* Titles and strong text */
  --color-text-default: light-dark(#2e2e2e, #d4d4d4); /* Body text */
  --color-text-muted: light-dark(#555555, #a3a3a3); /* Secondary text */
  --color-text-soft: var(--color-text-muted); /* Captions, meta, icons. The sheet's own instruction: at build, alias --soft to --muted (decided 11 Oct) */
  --color-text-faint: light-dark(#626262, #8a8a8a); /* Hints and dashed edges. 2026-10-18: was #b0b0b0 / #5a5a5a; now ≥ 4.5:1 on every surface in both themes */
  --color-text-on-primary: light-dark(#ffffff, #111111); /* Text on primary */
  --color-text-on-danger: var(--color-text-on-primary); /* Text on destructive */
  --color-text-on-warning: light-dark(#ffffff, #111111); /* Text on a warning fill */
  --color-text-disabled: light-dark(#8f8f8f, #5c5c5c); /* Disabled labels (exempt from contrast, still legible) */
  --color-text-strip: light-dark(#555555, #a3a3a3);
  --color-border-default: light-dark(#dadada, #2a2a2a); /* Hairlines, dividers */
  --color-border-overlay: light-dark(#dadada, #3a3a3a); /* Hairlines inside an overlay */
  --color-border-field: light-dark(#7e7e7e, #6e6e6e); /* Field and checkbox outline: ≥ 3:1 against tile, raised and well */
  --color-border-drop-disabled: var(--color-text-disabled); /* Its dashed edge */
  --color-action-primary: light-dark(#141414, #f2f2f2); /* The primary action's fill: its own token, separate from title text (ruled 2026-10-18) */
  --color-action-primary-hover: light-dark(#000000, #ffffff); /* Primary button hover */
  --color-action-primary-press: light-dark(#2b2b2b, #d2d2d2); /* Primary button pressed */
  --color-focus-ring: light-dark(rgba(20, 20, 20, 0.7), rgba(255, 255, 255, 0.7)); /* Focus ring */
  --color-selection-ring: light-dark(#141414, #ffffff); /* Selection ring and fill */
  --color-selection-multi: light-dark(rgba(20, 20, 20, 0.3), rgba(255, 255, 255, 0.32)); /* Multi-select ring */
  --color-selection-text: rgba(128, 128, 128, 0.35); /* Selected text in fields */
  --color-signal-attention: var(--color-text-strong); /* Needs-you dot and count. White or near-black, never yellow. Legacy name: --amber */
  --color-signal-success: light-dark(#3c6c47, #93c29c); /* Ready, done, Final. 2026-10-18: light was #4c8a5a; now ≥ 4.5:1 as text and under white text */
  --color-signal-danger: light-dark(#a1463f, #da7770); /* Problem, destructive. 2026-10-18: light was #b8514a; now ≥ 4.5:1 on fields and the board */
  --color-signal-idle: light-dark(#a8a8a8, #6a6a6a); /* Status dot at rest. Legacy name: --led-off */
  --color-signal-warning: light-dark(#815a13, #d9a441); /* Warning: "do not leave this screen", nearing a limit. Text ≥ 4.5:1 */
  --color-signal-danger-hover: light-dark(#8e3e37, #de8781); /* The danger button hovered: away from its text (≥ 7:1) */
  --color-signal-danger-press: light-dark(#ac5c56, #c26b65); /* The danger button pressed: toward its text (≥ 4.75:1) */
  --color-user-silver: light-dark(#6e6e6e, #b8b8b8);
  --color-user-fog: light-dark(#5d6c7c, #8b98a6);
  --color-user-stone: light-dark(#7c705f, #a69c90);
  --color-user-lichen: light-dark(#5e6e61, #8e9a8f);
  --color-user-ash: light-dark(#4a4a4a, #757575);
  --color-user-pewter: light-dark(#7a7a7a, #9c9c9c); /* Canvas */
  --color-control-segment-on: light-dark(#ffffff, #333333); /* The selected segment of a segmented control */
  --color-control-knob-off: light-dark(#ffffff, #a3a3a3); /* An off switch's knob */
  --color-control-keycap-on-primary: rgba(128, 128, 128, 0.22); /* Keycap inside primary */
  --color-control-check-fill: light-dark(#141414, #f2f2f2); /* Checked box fill */
  --color-control-check-mark: light-dark(#ffffff, #111111); /* The tick */
  --color-waveform-played: light-dark(#141414, #ffffff); /* Played part of a waveform */
  --color-waveform-unplayed: light-dark(#9e9e9e, #4a4a4a); /* Unplayed part. Legacy names: --waveoff, --wave-off */
  --color-waveform-idle: var(--color-text-muted); /* Thumbnail of a file not on a node; files on a node use the node's color */
  --color-progress-track: light-dark(#e2e2e2, #0e0e0e); /* Progress track */
  --color-progress-fill: light-dark(#141414, #f2f2f2); /* Progress while uploading; done uses --green, failed --red */
  --color-badge-fill: light-dark(#a1463f, #da7770);
  --color-badge-text: light-dark(#ffffff, #111111);
  --color-brand-plate-bg: light-dark(#ffffff, #232323); /* Behind the logo, so any logo reads on either theme */
  --color-card-pill-scrim: rgba(0, 0, 0, 0.6); /* Behind a pill on the card's art; 0.6 keeps the pill text ≥ 4.5:1 even over white art */
  --color-card-pill-text: #f7f8f8;
  --color-sendbar-bg: light-dark(#f7f7f7, #1a1a1a);
  --color-sendbar-text: light-dark(#555555, #a3a3a3);
  --shadow-control-danger: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.25); /* Destructive button */
  --shadow-control-knob: 0 1px 2px 0 rgba(0, 0, 0, 0.3); /* Switch knob */
  --font-family-sans: "Instrument Sans", sans-serif; /* Everything, previews too */
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Codes and link tokens (system stack; no second face) */
  --font-size-caption: 11px; /* Meta, keycaps, captions */
  --font-size-body: 13px; /* Body and controls */
  --font-size-title: 15px; /* Tile and section titles */
  --font-size-display: 24px; /* Board titles only */
  --font-size-field: 13px; /* Field text. web.css raises it to 16px on touch screens (iOS zooms below 16) */
  --font-size-code: 24px; /* Code digits */
  --font-size-link-title: var(--font-size-page-title); /* The link page's title: the page title's size */
  --font-size-page-title: 24px; /* A client-facing page's title on phones (32px from 600px wide, web.css) */
  --font-weight-regular: 400; /* Body text */
  --font-weight-medium: 500; /* Labels, names, rows */
  --font-weight-semibold: 600; /* Titles, primary buttons */
  --font-line-height-body: 1.35; /* Body line height */
  --radius-mark: 2px; /* Bars, tracks, tiny marks under 12px only */
  --radius-chip: 4px; /* Chips, keycaps, swatches */
  --radius-control: 6px; /* Buttons, fields, rows */
  --radius-card: 10px; /* Menus, cards, toasts */
  --radius-tile: 14px; /* Tiles and dialogs */
  --radius-pill: 999px; /* Dots, discs, pills */
  --radius-plate: var(--radius-control); /* The logo plate's corners; the plate is at least square and as wide as the logo */
  --space-2: 2px; /* Hairline gaps */
  --space-4: 4px; /* Menu inset, icon gaps */
  --space-8: 8px; /* Row padding, tile gaps */
  --space-12: 12px; /* Button and field padding */
  --space-16: 16px; /* Inside tiles */
  --space-20: 20px; /* Dialog padding */
  --space-24: 24px; /* Panel padding, groups */
  --space-32: 32px; /* Between sections */
  --space-40: 40px; /* Board margin */
  --space-48: 48px; /* Tile top, under titlebar */
  --size-control-xs: 24px; /* Dense icon buttons */
  --size-control-sm: 28px; /* Small buttons, tooltips */
  --size-control-md: 32px; /* Buttons and fields */
  --size-control-lg: 40px; /* Large fields, composer */
  --size-row-menu: 28px; /* Menu rows */
  --size-row-dense: 32px; /* Dense list rows */
  --size-row-file: 40px; /* File rows */
  --size-row-double: 56px; /* Two-line rows */
  --size-row-type-width: 40px; /* A file row's type chip ("WAV", "PDF"), so names line up whatever the type */
  --size-tile-header: 36px; /* Tile header */
  --size-keycap-height: 20px; /* Keycap height */
  --size-field-min-width: 180px;
  --size-field-inline-min-width: 96px;
  --size-field-line-height: 20px;
  --size-checkbox-box: 18px; /* Checkbox box (the tap target stays ≥ 44px) */
  --size-progress-height: 4px; /* Upload progress bar height */
  --size-code-cell-width: 48px; /* One digit of the six-digit code input */
  --size-code-cell-height: 56px;
  --size-code-cell-gap: 8px; /* Between the six code cells (web.css narrows the cells under 360px) */
  --size-strip-height: 40px; /* The "powered by" strip under client-facing pages */
  --size-badge-size: 18px; /* Count badge (unread, needs-you) */
  --size-brand-logo-height: 32px; /* The account logo in a client-facing header */
  --size-brand-band-height: 64px; /* The account's header band on client-facing pages (72px from 600px wide, web.css) */
  --size-brand-plate: 48px; /* The logo plate: a square that holds the logo */
  --size-brand-plate-padding: 8px; /* Inside the plate */
  --size-card-logo: 112px; /* The logo's box on the 1200x630 preview card when there's no art */
  --size-sendbar-height: 48px; /* The "sending to" bar above a delivery */
  --size-focus-ring-width: 2px; /* The focus ring's width */
  --size-focus-ring-offset: 2px; /* The focus ring's gap from the control */
  --size-icon-md: 16px; /* An icon inside a control (play, pause, download): its box */
  --size-scrubber-thumb: 12px; /* The scrubber's thumb */
  --size-scrubber-track: var(--size-progress-height); /* The scrubber's track: the progress bar's height */
  --motion-duration-instant: 0ms; /* Keyboard moves */
  --motion-duration-quick: 100ms; /* Press */
  --motion-duration-base: 160ms; /* Hover, fades, menus */
  --motion-duration-panel: 220ms; /* Panels and tiles */
  --motion-duration-sheet: 300ms; /* Dialogs and Settings */
  --motion-easing-out: cubic-bezier(0.23, 1, 0.32, 1); /* Menus, toasts, fades */
  --motion-easing-spring: cubic-bezier(0.22, 1.12, 0.36, 1); /* Panels and drags */
  --font-tracking-display: -0.02em;
  --font-numeric-tabular: tabular-nums;
  --size-field-multiline-min-height: calc(3 * var(--size-field-line-height) + 2 * var(--space-8));
  --elevation-1: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 2px 0 rgba(0, 0, 0, 0.55), 0 6px 18px 2px rgba(0, 0, 0, 0.45);
  --elevation-2: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 3px 6px 0 rgba(0, 0, 0, 0.5), 0 14px 34px 4px rgba(0, 0, 0, 0.55);
  --elevation-3: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 1px 1px rgba(0, 0, 0, 0.5), 0 3px 8px 0 rgba(0, 0, 0, 0.45), 0 16px 40px 4px rgba(0, 0, 0, 0.5);
  --elevation-4: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 1px 1px rgba(0, 0, 0, 0.5), 0 4px 12px 0 rgba(0, 0, 0, 0.45), 0 22px 54px 6px rgba(0, 0, 0, 0.52);
  --elevation-5: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 1px 1px rgba(0, 0, 0, 0.5), 0 8px 20px 0 rgba(0, 0, 0, 0.5), 0 36px 80px 8px rgba(0, 0, 0, 0.6);
  --elevation-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.045);
  --shadow-control-button: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-control-primary: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 0 rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.45);
  --shadow-control-keycap: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 -1px 0 0 rgba(0, 0, 0, 0.45);
  --shadow-control-segment-on: inset 0 1px 0 0 rgba(255, 255, 255, 0.045), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-field-inset: inset 0 1px 0 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 0 0 rgba(255, 255, 255, 0.035);
  --shadow-field-hover: 0 0 0 1px rgba(255, 255, 255, 0.12);
  --material-lift-rest: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 4px 12px 0 rgba(0, 0, 0, 0.32);
  --material-lift-hover: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 3px 6px 0 rgba(0, 0, 0, 0.5), 0 12px 28px 3px rgba(0, 0, 0, 0.5);
  --material-lift-press: inset 0 1px 0 0 rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 1px 0 rgba(0, 0, 0, 0.45);
  --material-lift-drop: 0 4px 12px 0 rgba(0, 0, 0, 0.32);
  --material-lift-drop-hover: 0 3px 6px 0 rgba(0, 0, 0, 0.35), 0 12px 28px 3px rgba(0, 0, 0, 0.5);
  --material-lift-row: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --material-lift-segment: inset 0 1px 0 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 2px 6px 0 rgba(0, 0, 0, 0.22);
  --material-lift-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.075);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --elevation-1: 0 0 0 1px rgba(16, 24, 40, 0.07), 0 1px 2px 0 rgba(16, 24, 40, 0.08), 0 6px 16px -2px rgba(16, 24, 40, 0.12);
  --elevation-2: 0 0 0 1px rgba(16, 24, 40, 0.08), 0 2px 4px 0 rgba(16, 24, 40, 0.08), 0 14px 32px -4px rgba(16, 24, 40, 0.18);
  --elevation-3: 0 0 0 1px rgba(16, 24, 40, 0.08), 0 3px 6px 0 rgba(16, 24, 40, 0.07), 0 14px 34px -6px rgba(16, 24, 40, 0.18);
  --elevation-4: 0 0 0 1px rgba(16, 24, 40, 0.08), 0 4px 10px 0 rgba(16, 24, 40, 0.07), 0 20px 48px -6px rgba(16, 24, 40, 0.2);
  --elevation-5: 0 0 0 1px rgba(16, 24, 40, 0.09), 0 10px 20px 0 rgba(16, 24, 40, 0.08), 0 36px 72px -8px rgba(16, 24, 40, 0.24);
  --elevation-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.85);
  --shadow-control-button: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.06);
  --shadow-control-primary: inset 0 1px 0 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 0 rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 2px 0 rgba(0, 0, 0, 0.16);
  --shadow-control-keycap: 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 rgba(0, 0, 0, 0.12);
  --shadow-control-segment-on: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.06);
  --shadow-field-inset: inset 0 1px 0 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(255, 255, 255, 0.9);
  --shadow-field-hover: 0 0 0 1px rgba(0, 0, 0, 0.16);
  --material-lift-rest: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(16, 24, 40, 0.1), 0 1px 2px 0 rgba(16, 24, 40, 0.08), 0 3px 8px -2px rgba(16, 24, 40, 0.12);
  --material-lift-hover: inset 0 1px 0 0 #ffffff, 0 0 0 1px rgba(16, 24, 40, 0.11), 0 2px 4px 0 rgba(16, 24, 40, 0.08), 0 10px 22px -4px rgba(16, 24, 40, 0.2);
  --material-lift-press: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(16, 24, 40, 0.13), 0 1px 1px 0 rgba(16, 24, 40, 0.08);
  --material-lift-drop: 0 3px 8px -2px rgba(16, 24, 40, 0.16);
  --material-lift-drop-hover: 0 2px 4px 0 rgba(16, 24, 40, 0.08), 0 10px 22px -4px rgba(16, 24, 40, 0.26);
  --material-lift-row: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(16, 24, 40, 0.08), 0 1px 2px 0 rgba(16, 24, 40, 0.1);
  --material-lift-segment: inset 0 1px 0 0 #ffffff, 0 0 0 1px rgba(16, 24, 40, 0.09), 0 1px 2px 0 rgba(16, 24, 40, 0.1), 0 3px 6px -2px rgba(16, 24, 40, 0.12);
  --material-lift-highlight: inset 0 1px 0 0 #ffffff;
} }
:root[data-theme="light"] { color-scheme: light;
  --elevation-1: 0 0 0 1px rgba(16, 24, 40, 0.07), 0 1px 2px 0 rgba(16, 24, 40, 0.08), 0 6px 16px -2px rgba(16, 24, 40, 0.12);
  --elevation-2: 0 0 0 1px rgba(16, 24, 40, 0.08), 0 2px 4px 0 rgba(16, 24, 40, 0.08), 0 14px 32px -4px rgba(16, 24, 40, 0.18);
  --elevation-3: 0 0 0 1px rgba(16, 24, 40, 0.08), 0 3px 6px 0 rgba(16, 24, 40, 0.07), 0 14px 34px -6px rgba(16, 24, 40, 0.18);
  --elevation-4: 0 0 0 1px rgba(16, 24, 40, 0.08), 0 4px 10px 0 rgba(16, 24, 40, 0.07), 0 20px 48px -6px rgba(16, 24, 40, 0.2);
  --elevation-5: 0 0 0 1px rgba(16, 24, 40, 0.09), 0 10px 20px 0 rgba(16, 24, 40, 0.08), 0 36px 72px -8px rgba(16, 24, 40, 0.24);
  --elevation-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.85);
  --shadow-control-button: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.06);
  --shadow-control-primary: inset 0 1px 0 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 0 rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 2px 0 rgba(0, 0, 0, 0.16);
  --shadow-control-keycap: 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 -1px 0 0 rgba(0, 0, 0, 0.12);
  --shadow-control-segment-on: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.06);
  --shadow-field-inset: inset 0 1px 0 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(255, 255, 255, 0.9);
  --shadow-field-hover: 0 0 0 1px rgba(0, 0, 0, 0.16);
  --material-lift-rest: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(16, 24, 40, 0.1), 0 1px 2px 0 rgba(16, 24, 40, 0.08), 0 3px 8px -2px rgba(16, 24, 40, 0.12);
  --material-lift-hover: inset 0 1px 0 0 #ffffff, 0 0 0 1px rgba(16, 24, 40, 0.11), 0 2px 4px 0 rgba(16, 24, 40, 0.08), 0 10px 22px -4px rgba(16, 24, 40, 0.2);
  --material-lift-press: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(16, 24, 40, 0.13), 0 1px 1px 0 rgba(16, 24, 40, 0.08);
  --material-lift-drop: 0 3px 8px -2px rgba(16, 24, 40, 0.16);
  --material-lift-drop-hover: 0 2px 4px 0 rgba(16, 24, 40, 0.08), 0 10px 22px -4px rgba(16, 24, 40, 0.26);
  --material-lift-row: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(16, 24, 40, 0.08), 0 1px 2px 0 rgba(16, 24, 40, 0.1);
  --material-lift-segment: inset 0 1px 0 0 #ffffff, 0 0 0 1px rgba(16, 24, 40, 0.09), 0 1px 2px 0 rgba(16, 24, 40, 0.1), 0 3px 6px -2px rgba(16, 24, 40, 0.12);
  --material-lift-highlight: inset 0 1px 0 0 #ffffff;
}
:root[data-theme="dark"] { color-scheme: dark;
  --elevation-1: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 2px 0 rgba(0, 0, 0, 0.55), 0 6px 18px 2px rgba(0, 0, 0, 0.45);
  --elevation-2: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 3px 6px 0 rgba(0, 0, 0, 0.5), 0 14px 34px 4px rgba(0, 0, 0, 0.55);
  --elevation-3: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 1px 1px rgba(0, 0, 0, 0.5), 0 3px 8px 0 rgba(0, 0, 0, 0.45), 0 16px 40px 4px rgba(0, 0, 0, 0.5);
  --elevation-4: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 1px 1px rgba(0, 0, 0, 0.5), 0 4px 12px 0 rgba(0, 0, 0, 0.45), 0 22px 54px 6px rgba(0, 0, 0, 0.52);
  --elevation-5: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 1px 1px rgba(0, 0, 0, 0.5), 0 8px 20px 0 rgba(0, 0, 0, 0.5), 0 36px 80px 8px rgba(0, 0, 0, 0.6);
  --elevation-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.045);
  --shadow-control-button: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-control-primary: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 0 rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.45);
  --shadow-control-keycap: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 -1px 0 0 rgba(0, 0, 0, 0.45);
  --shadow-control-segment-on: inset 0 1px 0 0 rgba(255, 255, 255, 0.045), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-field-inset: inset 0 1px 0 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 0 0 rgba(255, 255, 255, 0.035);
  --shadow-field-hover: 0 0 0 1px rgba(255, 255, 255, 0.12);
  --material-lift-rest: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 4px 12px 0 rgba(0, 0, 0, 0.32);
  --material-lift-hover: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 3px 6px 0 rgba(0, 0, 0, 0.5), 0 12px 28px 3px rgba(0, 0, 0, 0.5);
  --material-lift-press: inset 0 1px 0 0 rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 1px 0 rgba(0, 0, 0, 0.45);
  --material-lift-drop: 0 4px 12px 0 rgba(0, 0, 0, 0.32);
  --material-lift-drop-hover: 0 3px 6px 0 rgba(0, 0, 0, 0.35), 0 12px 28px 3px rgba(0, 0, 0, 0.5);
  --material-lift-row: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --material-lift-segment: inset 0 1px 0 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 2px 6px 0 rgba(0, 0, 0, 0.22);
  --material-lift-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.075);
}
/* The brand layer's defaults: the neutral myOS look when an org sets nothing. An org sheet sets --brand-*, scoped
   [data-org="<id>"]: on <html> for a client-facing page, or on an element inside the app (its live preview of the
   client's view), so the layer is derived on every [data-org] element, not only the root (ASKS-2 §2.2). */
:root, [data-org] {
  --color-brand-fill: var(--brand-fill, var(--color-text-strong));
  --color-brand-on-fill: var(--brand-on-fill, var(--color-text-on-primary));
  --color-brand-button: var(--brand-button, var(--color-action-primary));
  --color-brand-on-button: var(--brand-on-button, var(--color-text-on-primary));
  --color-brand-button-hover: var(--brand-button-hover, var(--color-action-primary-hover));
  --color-brand-button-press: var(--brand-button-press, var(--color-action-primary-press));
  --color-brand-tint: color-mix(in oklab, var(--color-brand-fill) 14%, transparent);
  /* The line: 40% of the fill, unless the org sheet wrote --brand-line because the fill misses 3:1 on the ground in
     a theme (then it is the field edge there). */
  --color-brand-line: var(--brand-line, color-mix(in oklab, var(--color-brand-fill) 40%, transparent));
  /* The header band: its ground the tint, its bottom edge the line. */
  --color-brand-band-bg: var(--color-brand-tint);
  --color-brand-band-line: var(--color-brand-line);
  --color-brand-played: var(--brand-played, var(--color-waveform-played));
  --brand-logo-image: var(--brand-logo, none);
  /* Spaces main names, read by the lifted PlayerScrubber (--ion, --border-strong) and WaveformStrip (--text-soft) */
  --ion: var(--color-brand-played);
  --border-strong: var(--color-waveform-unplayed);
  --text-soft: var(--color-waveform-idle);
}
:root[data-theme="dark"], :root[data-theme="dark"] [data-org] { --brand-logo-image: var(--brand-logo-on-dark, var(--brand-logo, none)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-org] { --brand-logo-image: var(--brand-logo-on-dark, var(--brand-logo, none)); } }
@media (prefers-reduced-motion: reduce) { :root { --motion-easing-spring: var(--motion-easing-out); } }