/* Generated by tools/styles/build-runtime-css.mjs. Do not edit directly. */
/* entry: shared/styles/hub/legal.css */
/* source: shared/styles/bundles/app-legal-shell.css */
/*
  Shared legal page shell.
  App-owned legal styles import this once, then add app-specific legal visuals.
*/

/* source: shared/styles/bundles/framework.css */
/*
  Shared design framework bundle.
  Keep this limited to family-wide tokens, base rules, layout primitives,
  and reusable low-level components.
*/

/* source: shared/styles/layers.css */
/*
  Motion Typography cascade contract.

  Keep import order aligned with the layer order: layers.css, tokens, base,
  layout primitives, component primitives, feature CSS, mobile overrides, and
  optional utilities.
*/
@layer tokens, base, layout, components, features, mobile, utilities;

/* source: shared/styles/tokens/ui-tokens.css */
/* Motion Typograph shared design-system tokens.
   The product theme is defined here as semantic --tc-* values. Component files
   consume this layer directly so pages and states stay consistent. */

/* Token search map
   SEARCH: CORE_COLOR_TOKENS
     Theme primitives and shared color aliases: RGB values, page backgrounds,
     surfaces, glass, text, borders, highlight overlays, filters.
   SEARCH: STATE_COLOR_TOKENS
     Accent, notices, export states, semantic status colors, hover/active/focus.
   SEARCH: RADIUS_TOKENS
     Global radius scale and component radius aliases.
   SEARCH: SPACING_SCALE_TOKENS
     Global spacing scale, compact control sizing, compact popup layout.
   SEARCH: LAYOUT_PRIMITIVE_TOKENS
     Breakpoints, container widths, section spacing, panels, modal dimensions.
   SEARCH: CONTROL_BUTTON_TOKENS
     Buttons, inputs, segmented controls, tabs, toolbar controls, icon sizes.
   SEARCH: POPUP_GALLERY_SHARED_TOKENS
     Shared popup/mobile gallery primitives used by editor style galleries:
     card shell, media aspect, checkerboard, surfaces, desktop/mobile bg.
   SEARCH: INDEX_GALLERY_TOKENS
     Landing page gallery classes: .gallery, .preview-card, .preview-shell,
     .media-shell, .poster-canvas, .animated-preview, .card-footer.
   SEARCH: INDEX_GALLERY_PAGE_TOKENS
     Landing page shell classes: .page, .site-main, .js-scroll, sticky gallery.
   SEARCH: SELECT_GALLERY_TOKENS
     Style picker popup classes: .tc-select--gallery, .tc-select-options,
     .tc-select-option.has-preview, .tc-select-option-preview.
   SEARCH: COMBINED_STYLE_GALLERY_TOKENS
     Editor combined-style classes: .modal-style-combined-thumb,
     .mobile-combined-style-modal, .mobile-combined-style-card.
   SEARCH: GALLERY_SEARCH_TOKENS
     Landing gallery search/filter classes: .toolbar, .search,
     .search-icon, .search-count, .search-clear, .style-filter-pills.
   SEARCH: INDEX_GALLERY_CARD_ACTION_TOKENS
     Landing gallery card footer actions: .card-footer, .card-actions,
     .action-link, .action-icon.
   SEARCH: GALLERY_FOOTER_TOKENS
     Landing footer classes: .footer-shell, .footer-panel, .footer-brand,
     .footer-stats, .footer-links.
   SEARCH: CARD_MODAL_PANEL_TOKENS
     Shared cards, panels, modal surfaces, popup shells, scrollbars, shadows.
   SEARCH: EDITOR_SHELL_TOKENS
     Editor frame, selection handles, shell sizing, stage/header spacing.
   SEARCH: EDITOR_POPUP_TOKENS
     Editor compact popup colors, scrub controls, list states, transform dots.
   SEARCH: SELECT_RUNTIME_TOKENS
     Runtime select variables: open select colors, progress, dimming.
   SEARCH: MOTION_RUNTIME_TOKENS
     Runtime animation values: popup anchors, load delays, progress, transforms.
   SEARCH: MEDIA_ROTATE_KEYBOARD_TOKENS
     Checkerboards, masks, rotate lock overlay, mobile keyboard, illustrations.
   SEARCH: THEME_OVERRIDE_TOKENS
     Theme-specific overrides for touch glass, dark glass, warm, colorful. */

@layer tokens {
:root {
  color-scheme: dark;

  /* Typography */
  --tc-font-body: Inter, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --tc-font-size-page: var(--tc-type-root-size-desktop, 16px);
  --tc-font-size-page-compact: var(--tc-type-root-size-compact, 16px);
  --tc-font-size-page-mobile: var(--tc-type-root-size-mobile, 16px);
  --tc-line-height-ui: var(--tc-type-ui-line-desktop, 1.2);
  --tc-letter-spacing-ui: 0;


  /* Core aliases kept semantic so component code does not reach for raw values. */
  --tc-white: #ffffff;
  --tc-black: #000000;
  --tc-accent: var(--tc-accent-main);
  --tc-font-size-xs: var(--tc-type-font-xs-desktop, 12px);
  --tc-font-size-sm: var(--tc-type-font-sm-desktop, 14px);
  --tc-font-size-md: var(--tc-type-font-md-desktop, 16px);
  --tc-font-size-lg: var(--tc-type-font-lg-desktop, 18px);
  --tc-font-size-xl: var(--tc-type-font-xl-desktop, 20px);
  --tc-font-weight-regular: var(--tc-type-weight-regular, 400);
  --tc-font-weight-medium: var(--tc-type-weight-medium, 500);
  --tc-font-weight-semibold: var(--tc-type-weight-semibold, 600);
  --tc-font-weight-bold: var(--tc-type-weight-bold, 700);

  /* SEARCH: CORE_COLOR_TOKENS
     Primitive RGB values used to build alpha-aware semantic tokens. */
  --tc-rgb-page: 11, 11, 11;
  --tc-rgb-surface-main: 17, 17, 17;
  --tc-rgb-surface-panel: 18, 18, 18;
  --tc-rgb-surface-raised: 25, 25, 25;
  --tc-rgb-surface-muted: 13, 13, 13;
  --tc-rgb-surface-popup: 24, 24, 24;
  --tc-rgb-control: 36, 36, 36;
  --tc-rgb-control-hover: 45, 45, 45;
  --tc-rgb-control-active: 51, 51, 51;
  --tc-rgb-text: 255, 255, 255;
  --tc-rgb-text-soft: 244, 244, 245;
  --tc-rgb-black: 0, 0, 0;
  --tc-accent-rgb: 0, 153, 255;

  /* SEARCH: CORE_COLOR_TOKENS
     Page and app backgrounds */
  --tc-bg-page: rgb(var(--tc-rgb-page));
  --tc-bg-app: var(--tc-bg-page);
  --tc-bg-canvas: var(--tc-bg-page);
  --tc-bg-sunken: #060606;
  --tc-bg-solid: #0e0e0e;
  --tc-bg-strong: #0e0e0e;
  --tc-bg-overlay-soft: rgba(var(--tc-rgb-black), 0.24);
  --tc-bg-overlay: rgba(var(--tc-rgb-black), 0.42);
  --tc-bg-overlay-combined-modal: rgba(var(--tc-rgb-black), 0.62);
  --tc-bg-overlay-combined-modal-strong: rgba(var(--tc-rgb-black), 0.9);
  --tc-bg-overlay-strong: rgba(var(--tc-rgb-black), 0.7);
  --tc-bg-grid-line: rgba(var(--tc-rgb-text), 0.045);
  --tc-bg-grid-line-soft: rgba(var(--tc-rgb-text), 0.006);
  --tc-bg-grid-image:
    linear-gradient(var(--tc-bg-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tc-bg-grid-line) 1px, transparent 1px);
  --tc-bg-grid-image-soft:
    linear-gradient(var(--tc-bg-grid-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--tc-bg-grid-line-soft) 1px, transparent 1px);
  --tc-bg-grid-size: 58px 58px;
  --tc-bg-grid-mask: linear-gradient(to bottom, black 0%, transparent 76%);
  --tc-bg-grid-opacity: 0;

  /* SEARCH: CORE_COLOR_TOKENS
     Surfaces */
  --tc-surface-main: rgb(var(--tc-rgb-surface-main));
  --tc-surface-muted: rgb(var(--tc-rgb-surface-muted));
  --tc-surface-raised: rgb(var(--tc-rgb-surface-raised));
  --tc-surface-panel: rgb(var(--tc-rgb-surface-panel));
  --tc-surface-panel-muted: var(--tc-surface-muted);
  --tc-surface-panel-raised: var(--tc-surface-raised);
  --tc-surface-card: #151515;
  --tc-surface-card-hover: #1b1b1b;
  --tc-surface-card-active: var(--tc-surface-card-hover);
  --tc-surface-card-box: var(--tc-surface-panel);
  --tc-surface-card-box-hover: #171717;
  --tc-surface-popup: rgb(var(--tc-rgb-surface-popup));
  --tc-surface-modal: var(--tc-surface-panel);
  --tc-surface-modal-header: var(--tc-surface-raised);
  --tc-surface-control: rgb(var(--tc-rgb-control));
  --tc-surface-control-hover: rgb(var(--tc-rgb-control-hover));
  --tc-surface-control-active: rgb(var(--tc-rgb-control-active));
  --tc-surface-control-key: #2a2a2a;
  --tc-surface-control-key-hover: #343434;
  --tc-surface-control-key-active: #3a3a3a;
  --tc-surface-control-action: #202020;
  --tc-surface-control-action-strong: #262626;
  --tc-color-transparent: transparent;
  --tc-surface-transparent: var(--tc-color-transparent);
  --tc-surface-popover-glass: color-mix(in srgb, var(--tc-surface-popup) 90%, var(--tc-color-transparent));
  --tc-surface-popover-scrim: color-mix(in srgb, var(--tc-surface-popup) 72%, var(--tc-color-transparent));
  --tc-surface-preview-dim-overlay: color-mix(in srgb, var(--tc-bg-canvas) 54%, var(--tc-color-transparent));
  --tc-surface-canvas-scrim-soft: color-mix(in srgb, var(--tc-bg-canvas) 36%, var(--tc-color-transparent));
  --tc-surface-compact-play: rgba(var(--tc-glass-rgb), 0.78);
  --tc-surface-compact-play-hover: rgba(var(--tc-glass-muted-rgb), 0.9);
  --tc-selection-fragment-bg: rgba(var(--tc-accent-rgb), 0.32);
  --tc-transform-armed-marker: radial-gradient(circle at 50% var(--tc-space-2), var(--tc-accent-muted) 0 2px, var(--tc-color-transparent) 2.35px);
  --tc-compact-transform-marker-display: none;

  /* SEARCH: CORE_COLOR_TOKENS
     Glass surfaces: subtle by default; disabled on coarse pointers below. */
  --tc-glass-rgb: var(--tc-rgb-surface-main);
  --tc-glass-raised-rgb: 31, 31, 31;
  --tc-glass-muted-rgb: 10, 10, 10;
  --tc-surface-glass: rgba(var(--tc-glass-rgb), 0.7);
  --tc-surface-glass-soft: rgba(var(--tc-glass-rgb), 0.58);
  --tc-surface-glass-strong: rgba(var(--tc-glass-rgb), 0.86);
  --tc-surface-glass-muted: rgba(var(--tc-glass-muted-rgb), 0.96);
  --tc-surface-glass-preview: rgba(var(--tc-glass-muted-rgb), 0.46);
  --tc-surface-glass-panel: var(--tc-surface-panel);
  --tc-surface-glass-popup: var(--tc-surface-popup);
  --tc-surface-glass-card: var(--tc-surface-raised);
  --tc-surface-glass-card-hover: #202020;
  --tc-glass-filter: saturate(112%) blur(14px);
  --tc-glass-filter-soft: saturate(108%) blur(10px);
  --tc-popover-filter: blur(14px) saturate(1.04);

  /* SEARCH: CORE_COLOR_TOKENS
     Text */
  --tc-text-main: #f2f2f2;
  --tc-text-bright: rgba(var(--tc-rgb-text), 0.96);
  --tc-text-strong: rgba(var(--tc-rgb-text), 0.94);
  --tc-text-readable: rgba(var(--tc-rgb-text), 0.84);
  --tc-text-muted: rgba(var(--tc-rgb-text), 0.62);
  --tc-text-subtle: rgba(var(--tc-rgb-text), 0.5);
  --tc-text-faint: rgba(var(--tc-rgb-text), 0.38);
  --tc-text-disabled: rgba(var(--tc-rgb-text), 0.34);
  --tc-text-inverse: #050505;
  --tc-text-on-accent: #0b0b0d;

  /* SEARCH: CORE_COLOR_TOKENS
     Borders and dividers */
  --tc-border-transparent: transparent;
  --tc-border-faint: rgba(var(--tc-rgb-text), 0.035);
  --tc-border-soft: rgba(var(--tc-rgb-text), 0.055);
  --tc-border-default: rgba(var(--tc-rgb-text), 0.082);
  --tc-border-strong: rgba(var(--tc-rgb-text), 0.13);
  --tc-border-emphasis: rgba(var(--tc-rgb-text), 0.18);
  --tc-border-selected: rgba(var(--tc-rgb-text), 0.28);
  --tc-border-highlight: rgba(var(--tc-rgb-text), 0.42);

  /* SEARCH: STATE_COLOR_TOKENS
     Accent, notices, and semantic status colors */
  --tc-accent-main: rgb(var(--tc-accent-rgb));
  --tc-accent-strong: #1aa3ff;
  --tc-accent-muted: rgba(var(--tc-accent-rgb), 0.72);
  --tc-accent-hover: var(--tc-accent-strong);
  --tc-accent-glow: rgba(var(--tc-accent-rgb), 0.32);
  --tc-accent-glow-soft: rgba(var(--tc-accent-rgb), 0.22);
  --tc-accent-aura: rgba(var(--tc-accent-rgb), 0.046);
  --tc-accent-aura-faint: rgba(var(--tc-accent-rgb), 0.014);
  --tc-accent-border-soft: rgba(var(--tc-accent-rgb), 0.2);
  --tc-accent-border: rgba(var(--tc-accent-rgb), 0.28);
  --tc-accent-border-medium: rgba(var(--tc-accent-rgb), 0.34);
  --tc-accent-border-focus: rgba(var(--tc-accent-rgb), 0.4);
  --tc-accent-border-strong: rgba(var(--tc-accent-rgb), 0.46);
  --tc-accent-border-frame: rgba(var(--tc-accent-rgb), 0.82);
  --tc-accent-bg-soft: rgba(var(--tc-accent-rgb), 0.055);
  --tc-accent-bg: rgba(var(--tc-accent-rgb), 0.082);
  --tc-accent-bg-focus: rgba(var(--tc-accent-rgb), 0.105);
  --tc-accent-bg-emphasis: rgba(var(--tc-accent-rgb), 0.12);
  --tc-accent-bg-strong: rgba(var(--tc-accent-rgb), 0.145);
  --tc-accent-overlay: rgba(var(--tc-accent-rgb), 0.22);
  --tc-accent-solid: rgba(var(--tc-accent-rgb), 0.68);
  --tc-accent-solid-strong: rgba(var(--tc-accent-rgb), 0.74);
  --tc-accent-handle-fill: rgba(var(--tc-accent-rgb), 0.92);
  --tc-accent-progress: rgba(var(--tc-accent-rgb), 0.78);
  --tc-accent-text: rgba(var(--tc-accent-rgb), 0.86);
  --tc-accent-text-soft: rgba(var(--tc-accent-rgb), 0.74);
  --tc-accent-text-shadow: 0 0 10px rgba(var(--tc-accent-rgb), 0.16);
  --tc-accent-icon-glow: drop-shadow(0 0 6px rgba(var(--tc-accent-rgb), 0.3));
  --tc-accent-icon-glow-soft: drop-shadow(0 0 6px rgba(var(--tc-accent-rgb), 0.22));
  --tc-danger-main: #ffb4b4;
  --tc-warning-main: #ffb43d;
  --tc-warning-border: rgba(245, 170, 48, 0.7);
  --tc-warning-bg: rgba(245, 178, 60, 0.12);
  --tc-warning-bg-strong: rgba(245, 178, 60, 0.18);
  --tc-warning-bg-soft: rgba(240, 150, 30, 0.12);
  --tc-success-main: var(--tc-accent-main);
  --tc-export-danger-main: #ff1f1f;
  --tc-export-danger-border: rgba(255, 31, 31, 0.92);
  --tc-export-danger-border-soft: rgba(255, 31, 31, 0.28);
  --tc-export-danger-bg: rgba(255, 31, 31, 0.18);
  --tc-export-danger-glow: rgba(255, 31, 31, 0.34);
  --tc-export-paused-main: #ff7a1a;
  --tc-export-paused-border: rgba(255, 122, 26, 0.84);
  --tc-export-paused-border-soft: rgba(255, 122, 26, 0.18);
  --tc-export-paused-glow: rgba(255, 122, 26, 0.24);
  --tc-export-lock-opacity: 0.42;
  --tc-export-lock-filter: grayscale(0.25) saturate(0.55);


  /* SEARCH: CORE_COLOR_TOKENS
     Shared highlight, overlay, and exact-purpose colors used by component states */
  --tc-surface-highlight-faint: rgba(var(--tc-rgb-text), 0.004);
  --tc-surface-highlight-min: rgba(var(--tc-rgb-text), 0.008);
  --tc-surface-highlight-soft: rgba(var(--tc-rgb-text), 0.012);
  --tc-surface-highlight-low: rgba(var(--tc-rgb-text), 0.018);
  --tc-surface-highlight-medium: rgba(var(--tc-rgb-text), 0.028);
  --tc-surface-highlight-strong: rgba(var(--tc-rgb-text), 0.04);
  --tc-surface-highlight-hover: rgba(var(--tc-rgb-text), 0.05);
  --tc-surface-highlight-active: rgba(var(--tc-rgb-text), 0.065);
  --tc-surface-highlight-selected: rgba(var(--tc-rgb-text), 0.095);
  --tc-surface-track: rgba(var(--tc-rgb-text), 0.1);
  --tc-surface-fill-soft: rgba(var(--tc-rgb-text), 0.16);
  --tc-surface-fill: rgba(var(--tc-rgb-text), 0.18);
  --tc-surface-fill-strong: rgba(var(--tc-rgb-text), 0.24);
  --tc-timeline-fill-bg: linear-gradient(90deg, rgba(var(--tc-accent-rgb), 0.7), rgba(var(--tc-accent-rgb), 0.96));
  --tc-timeline-thumb-bg: rgba(var(--tc-accent-rgb), 0.96);
  --tc-surface-dark-glass: rgba(10, 10, 12, 0.72);
  --tc-surface-dark-glass-soft: rgba(10, 10, 12, 0.45);
  --tc-surface-dark-glass-strong: rgba(10, 10, 12, 0.86);
  --tc-surface-dark-panel: rgba(12, 12, 14, 0.92);
  --tc-surface-dark-panel-soft: rgba(14, 14, 16, 0.7);
  --tc-surface-hero-control: rgba(16, 16, 18, 0.76);
  --tc-surface-hero-control-muted: rgba(10, 10, 12, 0.78);
  --tc-shadow-color-faint: rgba(var(--tc-rgb-black), 0.18);
  --tc-shadow-color-soft: rgba(var(--tc-rgb-black), 0.22);
  --tc-shadow-color-low: rgba(var(--tc-rgb-black), 0.26);
  --tc-shadow-color-medium: rgba(var(--tc-rgb-black), 0.28);
  --tc-shadow-color-strong: rgba(var(--tc-rgb-black), 0.34);
  --tc-shadow-color-stronger: rgba(var(--tc-rgb-black), 0.38);
  --tc-shadow-color-heavy: rgba(var(--tc-rgb-black), 0.42);
  --tc-shadow-color-max: rgba(var(--tc-rgb-black), 0.48);
  --tc-shadow-color-intense: rgba(var(--tc-rgb-black), 0.58);
  --tc-shadow-color-readable: rgba(var(--tc-rgb-black), 0.72);
  --tc-icon-glow-soft: rgba(var(--tc-rgb-text), 0.08);
  --tc-text-high: rgba(var(--tc-rgb-text), 0.88);
  --tc-text-medium: rgba(var(--tc-rgb-text), 0.78);
  --tc-text-low: rgba(var(--tc-rgb-text), 0.58);
  --tc-text-placeholder: rgba(var(--tc-rgb-text), 0.46);

  /* SEARCH: STATE_COLOR_TOKENS
     States */
  --tc-state-hover-bg: rgba(var(--tc-rgb-text), 0.052);
  --tc-state-hover-bg-strong: rgba(var(--tc-rgb-text), 0.075);
  --tc-state-active-bg: rgba(var(--tc-rgb-text), 0.072);
  --tc-state-selected-bg: rgba(var(--tc-rgb-text), 0.09);
  --tc-state-pressed-bg: rgba(var(--tc-rgb-text), 0.12);
  --tc-state-disabled-opacity: 0.45;
  --tc-focus-ring: 0 0 0 1px var(--tc-accent-border-focus), 0 0 0 4px rgba(var(--tc-accent-rgb), 0.11);
  --tc-focus-outline: 1px solid var(--tc-accent-border);
  --tc-filter-thumb-muted: saturate(0.84) brightness(0.82);
  --tc-filter-thumb-hover: saturate(0.86) brightness(0.86);
  --tc-filter-thumb-selected: saturate(0.9) brightness(0.9);
  --tc-filter-thumb-image: saturate(0.9) brightness(0.92);
  --tc-filter-thumb-image-active: saturate(1) brightness(1);
  --tc-filter-gallery-loading: saturate(0.68) brightness(0.72);
  --tc-filter-style-value-open: saturate(0.58);
  --tc-filter-control-disabled: saturate(0.65);
  --tc-filter-control-muted: saturate(0.72);
  --tc-filter-export-disabled: saturate(0.6);
  --tc-filter-brightness-034: brightness(0.34);
  --tc-filter-brightness-046: brightness(0.46);
  --tc-filter-brightness-056: brightness(0.56);
  --tc-filter-brightness-068: brightness(0.68);
  --tc-filter-brightness-072: brightness(0.72);
  --tc-filter-brightness-074: brightness(0.74);
  --tc-filter-brightness-082: brightness(0.82);
  --tc-filter-brightness-092: brightness(0.92);
  --tc-filter-brightness-100: brightness(1);
  --tc-filter-brightness-106: brightness(1.06);
  --tc-filter-brightness-112: brightness(1.12);
  --tc-filter-brightness-120: brightness(1.2);
  --tc-filter-brightness-200: brightness(2);
  --tc-filter-pricing-burst: brightness(calc(0.34 + (var(--burst-progress) * 0.5)));

  /* SEARCH: RADIUS_TOKENS
     Radii */
  --tc-radius-none: 0;
  --tc-radius-hairline: 1px;
  --tc-radius-2xs: 2px;
  --tc-radius-xs: 3px;
  --tc-radius-sm: 5px;
  --tc-radius-chip: 6px;
  --tc-radius-control-compact: 4px;
  --tc-radius-md: 8px;
  --tc-radius-lg: 12px;
  --tc-radius-xl: 16px;
  --tc-radius-2xl: 20px;
  --tc-radius-panel: var(--tc-radius-xl);
  --tc-radius-card: var(--tc-radius-md);
  --tc-radius-control: var(--tc-radius-md);
  --tc-radius-modal: var(--tc-radius-xl);
  --tc-radius-pill: 999px;
  --tc-radius-round: 50%;
  --tc-button-radius: var(--tc-radius-pill);
  --tc-icon-button-radius: var(--tc-radius-control);
  --tc-icon-button-radius-sm: var(--tc-radius-sm);
  --tc-tab-button-radius: var(--tc-radius-sm);
  --tc-tab-button-radius-compact: var(--tc-radius-control);
  --tc-panel-radius: var(--tc-radius-lg);
  --tc-card-radius: var(--tc-radius-card);
  --tc-modal-surface-radius: var(--tc-radius-modal);
  --tc-surface-flat-radius: var(--tc-radius-none);
  --tc-field-control-radius: var(--tc-radius-control);
  --tc-textarea-radius: var(--tc-radius-control);
  --tc-segmented-radius: var(--tc-radius-control);
  --tc-segmented-item-radius: var(--tc-radius-sm);
  --tc-segmented-item-radius-sm: var(--tc-radius-xs);
  --tc-notice-radius: var(--tc-radius-control);
  --tc-notice-radius-sm: var(--tc-radius-xs);
  --tc-modal-lead-radius: var(--tc-radius-sm);
  --tc-value-pill-radius: var(--tc-radius-control);
  --tc-compact-control-radius: var(--tc-radius-sm);
  --tc-compact-panel-border-color: var(--tc-color-transparent);
  --tc-compact-pill-radius: var(--tc-radius-chip);
  --tc-scrub-radius: var(--tc-radius-control);
  --tc-scrub-radius-sm: var(--tc-radius-sm);
  --tc-select-control-radius: var(--tc-radius-control);
  --tc-select-menu-radius: var(--tc-radius-lg);
  --tc-select-option-radius: var(--tc-radius-control);
  --tc-select-preview-radius: var(--tc-radius-sm);
  --tc-select-empty-action-radius: var(--tc-radius-sm);
  --tc-select-gallery-shell-radius: var(--tc-popup-gallery-shell-radius);
  --tc-select-gallery-search-radius: var(--tc-radius-md);
  --tc-select-gallery-card-radius-default: var(--tc-popup-gallery-card-shell-radius);
  --tc-select-gallery-preview-radius-default: var(--tc-popup-gallery-card-media-radius);
  --tc-select-gallery-scroll-radius-default: var(--tc-popup-gallery-shell-radius);
  --tc-select-filter-pills-radius: var(--tc-radius-sm);
  --tc-select-filter-pill-radius: var(--tc-radius-xs);

  /* SEARCH: SPACING_SCALE_TOKENS
     Spacing scale */
  --tc-space-0: 0px;
  --tc-space-hairline: 1px;
  --tc-space-1: 2px;
  --tc-space-1-5: 3px;
  --tc-space-2: 4px;
  --tc-space-2-5: 5px;
  --tc-space-3: 6px;
  --tc-space-3-5: 7px;
  --tc-space-4: 8px;
  --tc-space-4-5: 9px;
  --tc-space-5: 10px;
  --tc-space-5-5: 11px;
  --tc-space-6: 12px;
  --tc-space-7: 14px;
  --tc-space-8: 16px;
  --tc-space-9: 18px;
  --tc-space-10: 20px;
  --tc-space-12: 24px;
  --tc-space-14: 28px;
  --tc-space-16: 32px;
  --tc-space-20: 40px;
  --tc-space-page-x: clamp(18px, 4vw, 56px);
  --tc-space-panel: var(--tc-space-8);
  --tc-space-control-gap: var(--tc-space-3);
  --tc-field-gap: var(--tc-space-2);
  --tc-compact-pill-offset: -8px;
  --tc-compact-pill-max-width: calc(6ch + 12px);
  --tc-compact-pill-padding-x: var(--tc-space-3);
  --tc-compact-square-size: 44px;
  --tc-compact-control-width: calc(var(--tc-compact-square-size) *0.84);
  --tc-compact-control-height: calc(var(--tc-compact-control-width)*1);
  --tc-compact-control-gap: calc(var(--tc-compact-square-size) * 0.27);
  --tc-compact-rail-gap: var(--tc-compact-control-gap);
  --tc-compact-category-inset: calc(var(--tc-compact-square-size) * 0.145);
  --tc-compact-category-size-extra: 0px;
  --tc-compact-category-width-extra: 0px;
  --tc-compact-category-height-extra: var(--tc-space-4);
  --tc-compact-category-content-shift-y: var(--tc-space-3);
  --tc-compact-label-space: var(--tc-space-8);
  --tc-compact-font-base: 13px;
  --tc-compact-label-offset: var(--tc-space-5);
  --tc-compact-label-min-width: 0px;
  --tc-compact-label-extra-width: 12px;
  --tc-compact-popup-min-width: 158px;
  --tc-compact-popup-control-width: 180px;
  --tc-compact-popup-controls-gap: var(--tc-space-8);
  --tc-compact-popup-anchor-offset: var(--tc-space-4-5);
  --tc-compact-popup-scrollbar-margin: var(--tc-space-5);
  --tc-compact-select-menu-min-width: var(--tc-compact-popup-control-width);
  --tc-compact-select-category-label-space: var(--tc-compact-label-space);
  --tc-compact-popup-list-padding-x: calc(var(--tc-compact-category-inset) + var(--tc-compact-select-category-label-space) - var(--tc-space-1));
  --tc-compact-popup-item-width: calc(var(--tc-compact-popup-control-width) - var(--tc-compact-popup-list-padding-x) - var(--tc-compact-popup-list-padding-x));
  --tc-compact-select-option-min-height: calc(var(--tc-control-height-compact) + var(--tc-space-hairline));
  --tc-compact-select-option-padding-x: var(--tc-space-4);
  --tc-compact-select-option-bg: var(--tc-color-transparent);
  --tc-compact-select-option-hover-bg: var(--tc-editor-ui-list-hover-bg);
  --tc-compact-select-option-active-bg: var(--tc-surface-control);
  --tc-compact-select-option-color: var(--tc-text-muted);
  --tc-compact-select-option-hover-color: var(--tc-text-readable);
  --tc-compact-select-option-active-color: var(--tc-text-main);
  --tc-compact-select-option-disabled-color: var(--tc-text-disabled);
  --tc-compact-select-option-opacity: 0.9;
  --tc-compact-select-option-hover-opacity: 0.9;
  --tc-compact-select-option-active-opacity: 1;
  --tc-compact-select-option-disabled-opacity: 0.62;
  --tc-compact-popup-slider-menu-min-width: var(--tc-compact-popup-control-width);
  --tc-compact-popup-slider-card-gap: var(--tc-space-3);
  --tc-compact-popup-slider-height: var(--tc-compact-select-option-min-height);
  --tc-compact-popup-slider-card-radius: var(--tc-radius-sm);
  --tc-compact-popup-slider-shell-padding-x: var(--tc-compact-popup-list-padding-x);
  --tc-compact-popup-slider-padding-y: var(--tc-space-1);
  --tc-compact-popup-slider-padding-x: var(--tc-space-3);
  --tc-compact-popup-slider-content-gap: var(--tc-space-1);
  --tc-compact-popup-slider-content-shift-y: -2px;
  --tc-compact-popup-slider-bg: rgba(var(--tc-rgb-text), 0.036);
  --tc-compact-popup-slider-bg-hover: var(--tc-editor-ui-popup-control-hover);
  --tc-compact-popup-slider-bg-active: var(--tc-editor-ui-popup-control-active);
  --tc-compact-popup-slider-label-space: var(--tc-space-9);
  --tc-compact-popup-slider-label-gap: 0px;
  --tc-compact-popup-slider-track-height: 3px;
  --tc-compact-popup-slider-track-bottom: var(--tc-space-1);
  --tc-compact-popup-slider-track-inset: var(--tc-space-4);
  --tc-compact-popup-bottom-breathing: var(--tc-space-6);
  --tc-compact-popup-slider-shell-bottom-extra: var(--tc-compact-popup-bottom-breathing);
  --tc-compact-popup-slider-value-gap: var(--tc-space-2);
  --tc-compact-popup-slider-value-unit-gap: var(--tc-space-1);
  --tc-compact-popup-column-width: var(--tc-compact-popup-control-width);
  --tc-compact-popup-column-gap: var(--tc-compact-popup-slider-card-gap);
  --tc-compact-popup-two-column-width: calc(
    var(--tc-compact-popup-column-width) +
    var(--tc-compact-popup-column-width) +
    var(--tc-compact-popup-column-gap)
  );
  --tc-compact-popup-column-padding:
    calc(var(--tc-compact-popup-slider-label-space) + var(--tc-compact-category-inset) + var(--tc-compact-popup-slider-label-gap))
    var(--tc-compact-popup-slider-shell-padding-x)
    calc(var(--tc-compact-category-inset) + var(--tc-compact-popup-slider-shell-bottom-extra));
  --tc-compact-disabled-hint-inset-y: var(--tc-space-1);
  --tc-compact-disabled-hint-inset-x: var(--tc-space-2);
  --tc-compact-disabled-hint-radius: var(--tc-radius-xs);
  --tc-compact-disabled-hint-bg: var(--tc-warning-bg);
  --tc-compact-disabled-hint-border: var(--tc-warning-border);
  --tc-compact-disabled-hint-color: var(--tc-warning-main);
  --tc-compact-disabled-hint-font-size: var(--tc-type-editor-popup-slider-label-size);
  --tc-compact-disabled-hint-font-weight: var(--tc-type-editor-popup-slider-label-weight);
  --tc-compact-disabled-hint-line-height: var(--tc-type-editor-popup-slider-label-line);
  --tc-compact-disabled-hint-muted-opacity: 0.2;
  --tc-compact-disabled-hint-transition-duration: 140ms;
  --tc-compact-disabled-guide-pulse-line: var(--tc-compact-disabled-hint-border);
  --tc-compact-disabled-guide-pulse-line-strong: var(--tc-compact-disabled-hint-color);
  --tc-compact-disabled-guide-pulse-glow: var(--tc-compact-disabled-hint-border);
  --tc-compact-fixed-popup-min-height: 220px;
  --tc-compact-fixed-popup-max-height: 320px;
  --tc-compact-spacing-popup-min-height: 520px;
  --tc-compact-spacing-popup-max-height: 560px;
  --tc-compact-popup-subgroup-margin-top: var(--tc-space-4);
  --tc-compact-popup-subgroup-label-space: var(--tc-space-7);
  --tc-compact-popup-subgroup-label-top: 0px;
  --tc-compact-popup-subgroup-label-left: calc(var(--tc-compact-category-inset) - var(--tc-compact-popup-slider-shell-padding-x));
  --tc-compact-popup-subgroup-scroll-label-offset: calc(var(--tc-compact-popup-slider-shell-padding-x) - var(--tc-compact-category-inset));
  --tc-compact-popup-scroll-list-width: calc(
    var(--tc-compact-popup-item-width) +
    var(--tc-compact-popup-subgroup-scroll-label-offset) +
    var(--tc-compact-popup-subgroup-scroll-label-offset)
  );
  --tc-compact-popup-scroll-cue-arrow-size: var(--tc-space-3);
  --tc-compact-popup-scroll-cue-arrow-stroke: 1.5px;
  --tc-compact-popup-scroll-cue-arrow-color: var(--tc-text-faint);
  --tc-compact-popup-scroll-cue-arrow-offset: var(--tc-space-2);
  --tc-compact-popup-subgroup-gap: var(--tc-compact-popup-slider-card-gap);
  --tc-compact-popup-subgroup-control-gap: 0px;
  --tc-compact-popup-action-height: var(--tc-compact-popup-slider-height);
  --tc-compact-popup-action-padding-x: var(--tc-space-3);
  --tc-compact-popup-action-radius: var(--tc-compact-popup-slider-card-radius);
  --tc-compact-popup-action-content-shift-x: calc(var(--tc-space-2) * -1);
  --tc-compact-popup-action-bg: var(--tc-editor-ui-popup-control);
  --tc-compact-popup-action-bg-hover: var(--tc-editor-ui-popup-control-hover);
  --tc-compact-popup-action-bg-active: var(--tc-editor-ui-popup-control-active);
  --tc-compact-popup-action-color: var(--tc-editor-ui-popup-text-muted);
  --tc-compact-popup-action-color-hover: var(--tc-editor-ui-popup-text-strong);
  --tc-compact-popup-action-font-family: var(--tc-font-body);
  --tc-compact-popup-action-font-size: var(--tc-type-editor-popup-action-size);
  --tc-compact-popup-action-font-weight: var(--tc-type-editor-popup-action-weight);
  --tc-compact-popup-action-line-height: var(--tc-type-editor-popup-action-line);
  --tc-compact-popup-action-icon-size: var(--tc-icon-size-lg);
  --tc-compact-popup-action-icon-gap: var(--tc-space-2);
  --tc-compact-popup-action-meta-color: var(--tc-editor-ui-popup-text-muted);
  --tc-compact-popup-action-meta-opacity: 0.66;
  --tc-compact-popup-group-corner-action-top: var(--tc-space-2);
  --tc-compact-popup-group-corner-action-right: var(--tc-space-3);
  --tc-compact-popup-icon-toggle-size: var(--tc-field-height-2xs);
  --tc-compact-popup-icon-toggle-icon-size: calc(var(--tc-icon-size-md) - var(--tc-space-1));
  --tc-compact-popup-icon-toggle-bg: var(--tc-color-transparent);
  --tc-compact-popup-icon-toggle-bg-hover: var(--tc-color-transparent);
  --tc-compact-popup-icon-toggle-bg-active: var(--tc-color-transparent);
  --tc-compact-popup-icon-toggle-color: var(--tc-editor-ui-popup-text-muted);
  --tc-compact-popup-icon-toggle-color-hover: var(--tc-editor-ui-popup-text-strong);
  --tc-compact-popup-icon-toggle-color-active: var(--tc-accent-main);
  --tc-compact-popup-icon-toggle-opacity: 0.56;
  --tc-compact-popup-icon-toggle-opacity-hover: 0.78;
  --tc-compact-popup-icon-toggle-opacity-active: 1;
  --tc-compact-switch-min-width: var(--tc-compact-popup-item-width);
  --tc-compact-switch-columns: 2;
  --tc-compact-switch-gap: var(--tc-space-1);
  --tc-compact-switch-padding: var(--tc-space-1);
  --tc-compact-switch-margin-bottom: 0px;
  --tc-compact-switch-height: var(--tc-compact-popup-slider-height);
  --tc-compact-switch-radius: var(--tc-compact-popup-slider-card-radius);
  --tc-compact-switch-segment-min-width: 0px;
  --tc-compact-switch-segment-height: calc(var(--tc-compact-switch-height) - (var(--tc-compact-switch-padding) * 2));
  --tc-compact-switch-segment-padding-x: var(--tc-space-1);
  --tc-compact-switch-segment-radius: var(--tc-compact-popup-slider-card-radius);
  --tc-compact-switch-bg: var(--tc-editor-ui-control-bg);
  --tc-compact-switch-bg-hover: var(--tc-editor-ui-control-bg-hover);
  --tc-compact-switch-segment-bg: var(--tc-color-transparent);
  --tc-compact-switch-segment-bg-hover: var(--tc-editor-ui-popup-control-hover);
  --tc-compact-switch-segment-bg-active: var(--tc-editor-ui-popup-control-active);
  --tc-compact-switch-segment-color: var(--tc-control-text-muted);
  --tc-compact-switch-segment-color-hover: var(--tc-control-text-hover);
  --tc-compact-switch-segment-color-active: var(--tc-control-text-hover);
  --tc-compact-switch-segment-font-family: var(--tc-font-body);
  --tc-compact-switch-segment-font-size: var(--tc-type-compact-switch-seg-size);
  --tc-compact-switch-segment-font-weight: var(--tc-type-compact-switch-seg-weight);
  --tc-compact-switch-segment-font-weight-active: var(--tc-type-compact-switch-seg-active-weight);
  --tc-compact-switch-segment-line-height: var(--tc-type-compact-switch-seg-line);
  --tc-compact-switch-segment-opacity: 0.78;
  --tc-compact-switch-segment-opacity-hover: 0.9;
  --tc-compact-switch-segment-opacity-active: 1;
  --tc-compact-scrub-bg: var(--tc-editor-ui-control-bg);
  --tc-compact-scrub-bg-hover: var(--tc-editor-ui-control-bg-hover);
  --tc-compact-scrub-bg-active: var(--tc-editor-ui-control-bg-active);
  --tc-compact-scrub-grid-edge: 8px;
  --tc-compact-scrub-gap-y: var(--tc-space-1);
  --tc-compact-scrub-padding-y: var(--tc-space-3-5);
  --tc-compact-scrub-padding-x: var(--tc-space-2-5);
  --tc-compact-scrub-value-color: var(--tc-control-text-muted);
  --tc-compact-scrub-value-color-active: var(--tc-control-text-muted);
  --tc-compact-scrub-value-opacity: 0.78;
  --tc-compact-scrub-value-opacity-active: 0.78;
  --tc-compact-scrub-arrow-color: var(--tc-control-text-muted);
  --tc-compact-scrub-arrow-color-active: var(--tc-control-text-muted);
  --tc-compact-scrub-arrow-opacity: 0.58;
  --tc-compact-scrub-arrow-opacity-active: 0.58;
  --tc-compact-scrub-label-color: var(--tc-control-text-muted);
  --tc-compact-scrub-label-color-active: var(--tc-control-text-muted);
  --tc-compact-scrub-label-opacity: 0.74;
  --tc-compact-scrub-label-opacity-active: 0.74;


  /* SEARCH: LAYOUT_PRIMITIVE_TOKENS
     Layout primitives */
  --tc-breakpoint-xs: 360px;
  --tc-breakpoint-sm: 680px;
  --tc-breakpoint-md: 760px;
  --tc-breakpoint-lg: 1100px;
  --tc-breakpoint-xl: 1480px;
  --tc-container-max: 92.5rem;
  --tc-container-pad-x: var(--tc-space-page-x);
  --tc-section-pad-y: clamp(var(--tc-space-12), 6vw, 5rem);
  --tc-section-pad-y-compact: clamp(var(--tc-space-9), 4vw, 3rem);
  --tc-layout-gap-none: var(--tc-space-0);
  --tc-layout-gap-2xs: var(--tc-space-2);
  --tc-layout-gap-xs: var(--tc-space-3);
  --tc-layout-gap-sm: var(--tc-space-4);
  --tc-layout-gap-md: var(--tc-space-6);
  --tc-layout-gap-lg: var(--tc-space-8);
  --tc-layout-gap-xl: var(--tc-space-12);
  --tc-box-pad-none: var(--tc-space-0);
  --tc-box-pad-xs: var(--tc-space-3);
  --tc-box-pad-sm: var(--tc-space-5);
  --tc-box-pad-md: var(--tc-space-8);
  --tc-box-pad-lg: var(--tc-space-10);
  --tc-box-pad-xl: var(--tc-space-12);
  --tc-box-pad: var(--tc-box-pad-md);
  --tc-box-pad-compact: var(--tc-box-pad-sm);
  --tc-card-grid-min: 16rem;
  --tc-split-min: 18rem;
  --tc-sidebar-width: 18rem;
  --tc-sidebar-gap: var(--tc-layout-gap-lg);
  --tc-scroll-area-max-height: min(32rem, 70dvh);
  --tc-panel-layout-gap: var(--tc-layout-gap-md);
  --tc-modal-layout-gap: var(--tc-layout-gap-md);
  --tc-density-comfortable: 1;
  --tc-density-compact: 0.875;
  --tc-density-dense: 0.75;
  --tc-toolbar-height-sm: var(--tc-control-height-sm);
  --tc-toolbar-height-md: var(--tc-control-height-md);
  --tc-toolbar-height-lg: var(--tc-control-height-lg);
  --tc-panel-width-sm: 18rem;
  --tc-panel-width-md: 24rem;
  --tc-panel-width-lg: 32rem;
  --tc-panel-height-sm: 16rem;
  --tc-panel-height-md: 24rem;
  --tc-panel-height-lg: 34rem;
  --tc-modal-width-sm: 24rem;
  --tc-modal-width-md: 40rem;
  --tc-modal-width-lg: 56rem;
  --tc-modal-max-height: min(48rem, calc(100dvh - var(--tc-space-12)));

  /* SEARCH: CONTROL_BUTTON_TOKENS
     Controls */
  --tc-control-height-xs: 25px;
  --tc-control-height-compact: 29px;
  --tc-control-height-sm: 32px;
  --tc-control-height-scrub: 32px;
  --tc-control-height-field: 34px;
  --tc-control-height-md: 38px;
  --tc-control-height-lg: 44px;
  --tc-control-height-xl: 50px;

  --tc-control-height-touch: var(--tc-control-height-xl);
  --tc-opacity-disabled: var(--tc-state-disabled-opacity);
  --tc-compact-muted-group-opacity: 0.42;
  --tc-compact-muted-control-opacity: 0.42;
  --tc-compact-open-control-opacity: 1;
  --tc-compact-pulsed-control-opacity: 1;
  --tc-compact-pulsed-control-return-duration: 140ms;
  --tc-blur-panel: 1.125rem;
  --tc-preview-action-size: 34px;
  --tc-control-padding-x-sm: var(--tc-space-4);
  --tc-control-padding-x-md: var(--tc-space-5);
  --tc-control-padding-x-lg: var(--tc-space-7);
  --tc-control-padding-y-sm: var(--tc-space-2);
  --tc-control-padding-y-md: var(--tc-space-3);
  --tc-control-padding-y-lg: var(--tc-space-4);
  --tc-control-gap: var(--tc-space-2);
  --tc-textarea-height: 64px;
  --tc-textarea-height-sm: 60px;
  --tc-textarea-padding-y: var(--tc-space-4);
  --tc-textarea-padding-x: var(--tc-space-5);
  --tc-textarea-line-height: var(--tc-type-body-line);
  --tc-segmented-gap: var(--tc-space-hairline);
  --tc-segmented-min-track: 32px;
  --tc-segmented-item-height: var(--tc-control-height-xs);
  --tc-segmented-item-height-sm: 1.5rem;
  --tc-segmented-item-padding-x: var(--tc-space-2-5);
  --tc-segmented-aspect-width-sm: 4.75rem;
  --tc-notice-inline-gap: var(--tc-space-hairline);
  --tc-notice-editor-top: clamp(8px, 0.7vw, 12px);
  --tc-notice-editor-max-width: calc(100% - 32px);
  --tc-notice-editor-max-width-sm: min(calc(100% - 28px), 34rem);
  --tc-notice-editor-font-size: clamp(10px, 0.65vw, 11px);
  --tc-notice-editor-font-size-portrait: clamp(9px, 0.58vw, 10px);
  --tc-notice-editor-link-weight: var(--tc-type-weight-medium);
  --tc-notice-link-padding-y-sm: var(--tc-space-2);
  --tc-notice-link-padding-x-sm: var(--tc-space-4);
  --tc-notice-link-margin-y-sm: -4px;
  --tc-notice-link-margin-x-sm: -8px;
  --tc-modal-header-gap: var(--tc-space-9);
  --tc-modal-header-gap-sm: var(--tc-space-7);
  --tc-modal-header-padding-top: var(--tc-space-10);
  --tc-modal-header-padding-x: 22px;
  --tc-modal-header-padding-bottom: var(--tc-space-8);
  --tc-modal-header-padding-top-sm: var(--tc-space-9);
  --tc-modal-header-padding-x-sm: var(--tc-space-9);
  --tc-modal-header-padding-bottom-sm: 15px;
  --tc-modal-body-padding-top: var(--tc-space-8);
  --tc-modal-body-padding-x: 22px;
  --tc-modal-body-padding-bottom: var(--tc-space-10);
  --tc-modal-body-padding-top-sm: 15px;
  --tc-modal-body-padding-x-sm: var(--tc-space-9);
  --tc-modal-body-padding-bottom-sm: var(--tc-space-9);
  --tc-modal-list-row-padding-y: var(--tc-space-6);
  --tc-modal-footer-gap-y: var(--tc-space-4);
  --tc-modal-footer-gap-x: var(--tc-space-6);
  --tc-modal-footer-margin-top: var(--tc-space-7);
  --tc-modal-footer-padding-top: var(--tc-space-6);
  --tc-tab-button-gap: var(--tc-space-1-5);
  --tc-tab-button-editor-gap: 0.22rem;
  --tc-tab-button-editor-padding-y: 0.18rem;
  --tc-tab-button-editor-padding-x: 0.2rem;
  --tc-tab-button-compact-padding: var(--tc-space-2);
  --tc-tab-list-gap: var(--tc-space-4);
  --tc-tab-list-editor-gap: clamp(var(--tc-space-4), 1.4vw, var(--tc-space-7));
  --tc-toolbar-gap: var(--tc-space-3);
  --tc-editor-action-padding-y: var(--tc-space-3);
  --tc-editor-action-padding-x: var(--tc-space-5);
  --tc-select-value-gap: var(--tc-space-3-5);
  --tc-select-preview-value-gap: 0.875rem;
  --tc-select-control-gap: var(--tc-space-5);
  --tc-select-control-padding-y: var(--tc-space-3-5);
  --tc-select-control-padding-x: var(--tc-space-4-5);
  --tc-select-menu-padding: var(--tc-space-4);
  --tc-select-menu-padding-touch: var(--tc-space-2-5);
  --tc-select-menu-gap: var(--tc-space-2-5);
  --tc-select-menu-max-height: min(250px, 48dvh);
  --tc-select-menu-compact-max-height: min(220px, 42dvh);
  --tc-select-search-padding-x: var(--tc-space-6);
  --tc-select-search-padding-x-touch: var(--tc-space-5);
  --tc-select-search-padding-bottom-touch: var(--tc-space-2);
  --tc-select-options-gap: var(--tc-space-1);
  --tc-select-option-min-height: var(--tc-control-height-field);
  --tc-select-option-gap: var(--tc-space-4-5);
  --tc-select-option-padding-y: var(--tc-space-4);
  --tc-select-option-padding-x: var(--tc-space-5);
  --tc-select-option-font-size: var(--tc-type-select-option-size);
  --tc-select-option-font-weight: var(--tc-type-select-option-weight);
  --tc-select-option-line-height: var(--tc-type-select-option-line);
  --tc-select-empty-padding-y: var(--tc-space-6);
  --tc-select-empty-padding-x: var(--tc-space-4);
  --tc-select-empty-gallery-gap: var(--tc-space-4);
  --tc-select-empty-gallery-padding-y: clamp(var(--tc-space-9), 3vw, 30px);
  --tc-select-empty-gallery-padding-x: var(--tc-space-6);
  --tc-select-empty-actions-gap: var(--tc-space-3-5);
  --tc-select-empty-actions-margin-top: var(--tc-space-1);
  --tc-select-empty-action-padding-x: var(--tc-space-5-5);

  /* SEARCH: POPUP_GALLERY_SHARED_TOKENS
     Popup/mobile style gallery values. Change these to affect the editor
     popup gallery and its mobile sheet together without changing index cards. */
  --tc-popup-gallery-card-shell-padding: clamp(var(--tc-space-3-5), 0.75vw, var(--tc-space-5));
  --tc-popup-gallery-shell-radius: clamp(var(--tc-radius-sm), 0.45vw, var(--tc-radius-md));
  --tc-popup-gallery-card-shell-radius: var(--tc-popup-gallery-shell-radius);
  --tc-popup-gallery-card-media-aspect: 16 / 10;
  --tc-popup-gallery-card-media-aspect-value: 1.6;
  --tc-popup-gallery-card-media-radius: var(--tc-radius-sm);
  --tc-popup-gallery-card-media-checker-size-mobile: 17px;
  --tc-popup-gallery-card-media-checker-offset-mobile: 8.5px;
  --tc-popup-gallery-card-media-checker-size: var(--tc-popup-gallery-card-media-checker-size-mobile);
  --tc-popup-gallery-card-media-checker-offset: var(--tc-popup-gallery-card-media-checker-offset-mobile);
  --tc-popup-gallery-card-media-inset: clamp(var(--tc-space-2), calc(var(--tc-index-gallery-card-media-inset) * 0.5), var(--tc-space-5));
  --tc-popup-gallery-card-image-max-width: 92%;
  --tc-popup-gallery-card-image-max-height: 88%;
  --tc-popup-gallery-card-bg: var(--tc-card-box-bg);
  --tc-popup-gallery-card-bg-hover: var(--tc-card-box-bg-hover);
  --tc-popup-gallery-card-bg-active: var(--tc-card-box-bg-hover);
  --tc-popup-gallery-card-border: var(--tc-color-transparent);
  --tc-popup-gallery-card-label-color: var(--tc-text-main);
  --tc-popup-gallery-card-action-color: var(--tc-button-icon);
  --tc-popup-gallery-card-action-color-hover: var(--tc-button-icon-hover);
  --tc-popup-gallery-card-action-color-active: var(--tc-accent-main);
  --tc-popup-gallery-card-action-opacity: 0.86;
  --tc-popup-gallery-card-action-opacity-hover: 1;
  --tc-popup-gallery-card-action-opacity-active: 1;
  --tc-popup-gallery-card-action-filter: none;
  --tc-select-gallery-popup-bg-desktop: #0a0a0a;
  --tc-select-gallery-popup-bg-mobile: var(--tc-select-gallery-popup-bg-desktop);
  --tc-select-gallery-popup-bg: var(--tc-select-gallery-popup-bg-desktop);
  --tc-select-gallery-desktop-container-inset: clamp(var(--tc-space-5), 1.25vw, var(--tc-space-8));
  /* Keep the desktop gallery rail proportional as the editor viewport grows,
     while preserving useful card widths at both ends. */
  --tc-select-gallery-desktop-menu-width: clamp(320px, 28vw, 560px);
  --tc-select-gallery-desktop-menu-gap: var(--tc-space-8);
  --tc-popup-gallery-search-height: 38px;
  --tc-popup-gallery-search-padding: 0 var(--tc-space-9);
  --tc-popup-gallery-close-padding: 0 var(--tc-space-7);

  /* SEARCH: SELECT_GALLERY_TOKENS
     Classes: .tc-select--gallery, .tc-select-options,
     .tc-select-option.has-preview, .tc-select-option-preview. */
  --tc-select-gallery-shell-gap: var(--tc-space-9);
  --tc-select-gallery-toolbar-gap: var(--tc-space-7);
  --tc-select-gallery-card-padding: var(--tc-space-4);
  --tc-select-gallery-gap: var(--tc-space-4);
  --tc-select-gallery-touch-apply-height: var(--tc-gallery-card-actions-height-mobile);
  --tc-select-gallery-shell-space: var(--tc-space-8);
  --tc-select-gallery-grid-gap: var(--tc-space-7);
  --tc-select-gallery-row-gap: var(--tc-space-7);
  --tc-select-gallery-edge-space: var(--tc-space-0);
  --tc-select-gallery-bottom-space: var(--tc-space-8);
  --tc-select-gallery-scroll-lane: var(--tc-space-6);
  --tc-select-gallery-preview-aspect: var(--tc-popup-gallery-card-media-aspect);
  --tc-select-gallery-media-aspect-value: var(--tc-popup-gallery-card-media-aspect-value);
  --tc-select-gallery-media-checker-size: var(--tc-popup-gallery-card-media-checker-size);
  --tc-select-gallery-media-checker-offset: var(--tc-popup-gallery-card-media-checker-offset);
  --tc-select-gallery-preview-image-inset: var(--tc-popup-gallery-card-media-inset);
  --tc-select-gallery-preview-image-max-width: var(--tc-popup-gallery-card-image-max-width);
  --tc-select-gallery-preview-image-max-height: var(--tc-popup-gallery-card-image-max-height);
  --tc-select-gallery-search-height: var(--tc-popup-gallery-search-height);
  --tc-select-gallery-search-padding: var(--tc-popup-gallery-search-padding);
  --tc-select-gallery-close-padding: var(--tc-popup-gallery-close-padding);
  --tc-select-gallery-card-bg: var(--tc-popup-gallery-card-bg);
  --tc-select-gallery-card-bg-hover: var(--tc-popup-gallery-card-bg-hover);
  --tc-select-gallery-card-bg-active: var(--tc-popup-gallery-card-bg-active);
  --tc-select-gallery-card-border: var(--tc-popup-gallery-card-border);
  --tc-select-gallery-card-label-color: var(--tc-popup-gallery-card-label-color);
  --tc-select-gallery-card-action-color: var(--tc-popup-gallery-card-action-color);
  --tc-select-gallery-card-action-color-hover: var(--tc-popup-gallery-card-action-color-hover);
  --tc-select-gallery-card-action-color-active: var(--tc-popup-gallery-card-action-color-active);
  --tc-select-gallery-card-action-opacity: var(--tc-popup-gallery-card-action-opacity);
  --tc-select-gallery-card-action-opacity-hover: var(--tc-popup-gallery-card-action-opacity-hover);
  --tc-select-gallery-card-action-opacity-active: var(--tc-popup-gallery-card-action-opacity-active);
  --tc-select-gallery-card-action-filter: var(--tc-popup-gallery-card-action-filter);
  /* Static fallbacks for browsers without container-query units; select.css
     overrides both per menu width. */
  --tc-select-gallery-columns: repeat(2, minmax(0, 1fr));
  --tc-select-gallery-thumb-height: 84px;
  --tc-select-gallery-title-height: 1.08rem;
  --tc-select-gallery-progress-height: var(--tc-space-1);
  --tc-select-gallery-label-size: var(--tc-type-select-gallery-label-size);

  /* SEARCH: INDEX_GALLERY_TOKENS
     Classes: .gallery, .preview-card, .preview-shell, .media-shell,
     .poster-canvas, .animated-preview. */
  --tc-index-page-pad: clamp(14px, 2.8vw, 64px);
  --tc-index-page-pad-mobile: 10px;
  --tc-index-content-max: 1480px;
  --tc-index-gallery-gap: clamp(12px, 1.7vw, 32px);
  --tc-index-gallery-gap-mobile: 8px;
  --tc-index-gallery-columns: repeat(3, minmax(0, 1fr));
  --tc-index-gallery-columns-mobile: repeat(2, minmax(0, 1fr));
  --tc-index-gallery-padding-top: clamp(var(--tc-space-5), 1.2vw, var(--tc-space-9));
  --tc-index-gallery-padding-bottom: clamp(var(--tc-space-9), 2.4vw, 34px);
  --tc-index-gallery-padding-bottom-mobile: 26px;
  --tc-index-gallery-card-shell-padding: clamp(var(--tc-space-3-5), 0.75vw, var(--tc-space-5));
  --tc-index-gallery-card-shell-radius: clamp(var(--tc-radius-sm), 0.45vw, var(--tc-radius-md));
  --tc-index-gallery-card-media-aspect: 16 / 10;
  --tc-index-gallery-card-media-radius: var(--tc-radius-sm);
  --tc-index-gallery-card-media-checker-size: clamp(17px, 2vw, 28px);
  --tc-index-gallery-card-media-checker-offset: clamp(8.5px, 1vw, 14px);
  --tc-index-gallery-card-media-inset: clamp(10px, 1.45vw, 18px);
  --tc-index-gallery-load-more-gap: 1rem;
  --tc-index-gallery-load-more-gap-mobile: 0.9rem;
  --tc-index-gallery-load-more-padding: clamp(var(--tc-space-9), 2vw, 30px) 0 clamp(42px, 4.8vw, 74px);
  --tc-index-gallery-load-more-padding-mobile: var(--tc-space-9) 0 42px;
  --tc-index-gallery-load-actions-columns: minmax(0, min(76vw, 24.5rem)) auto;
  --tc-index-gallery-load-actions-columns-mobile: minmax(0, 1fr) auto;
  --tc-index-gallery-load-actions-column-gap: 0.75rem;
  --tc-index-gallery-load-actions-column-gap-mobile: 0.45rem;
  --tc-index-gallery-load-actions-padding: 0.7rem 0;
  --tc-index-gallery-load-actions-padding-mobile: 0.58rem 0;
  --tc-index-gallery-load-main-gap: 0.55rem;
  --tc-index-gallery-pricing-break-height: clamp(4px, 1vh, 12px);
  --tc-index-gallery-pricing-break-height-desktop: clamp(2px, 0.6vh, 8px);
  --tc-index-gallery-empty-min-height: clamp(220px, 32vh, 360px);
  --tc-index-gallery-empty-padding: clamp(var(--tc-space-14), 4vw, 56px);
  --tc-index-gallery-empty-copy-max-width: 360px;
  --tc-index-gallery-empty-copy-margin: -4px 0 0;
  --tc-page-pad: var(--tc-index-page-pad);
  --tc-content-max: var(--tc-index-content-max);
  --tc-gallery-gap: var(--tc-index-gallery-gap);

  /* SEARCH: INDEX_GALLERY_PAGE_TOKENS
     Classes: .page, .site-main, .js-scroll, plus gallery sticky spacing. */
  --tc-index-gallery-toolbar-gap: clamp(18px, 2.4vw, 28px);
  --tc-index-gallery-toolbar-gap-mobile: 10px;
  --tc-index-section-anchor-gap: clamp(18px, 2.4vw, 28px);
  --tc-index-styles-anchor-gap-mobile: 54px;
  --tc-index-section-anchor-gap-mobile: 96px;
  --tc-index-gallery-toolbar-release-desktop: 130px;
  --tc-index-gallery-toolbar-release-mobile: 74px;
  --tc-index-gallery-toolbar-mask-bottom: 12px;
  --tc-index-gallery-toolbar-mask-bottom-mobile: 8px;
  --tc-index-card-frame-inset: 10px;
  --tc-index-card-frame-inset-mobile: 8px;
  --tc-index-gallery-visual-gap: 4px;
  --tc-index-gallery-visual-gap-mobile: 0px;
  --tc-index-gallery-hover-clearance: 12px;
  --tc-index-gallery-hover-clearance-mobile: 10px;
  --tc-index-gallery-top-clearance-mobile: 14px;
  --tc-index-gallery-toolbar-pinned-mask-bottom-mobile: 16px;
  --tc-index-gallery-scroll-rail-width: 28px;
  --tc-index-gallery-scroll-rail-width-mobile: var(--tc-icon-size-xl);
  --tc-index-gallery-scroll-rail-right-mobile: max(-6px, env(safe-area-inset-right));
  --tc-index-theme-picker-top: calc(clamp(12px, 2vw, 22px) + 54px);
  --tc-gallery-toolbar-gap: var(--tc-index-gallery-toolbar-gap);
  --tc-section-anchor-gap: var(--tc-index-section-anchor-gap);
  --tc-gallery-toolbar-release-desktop: var(--tc-index-gallery-toolbar-release-desktop);
  --tc-gallery-toolbar-release-mobile: var(--tc-index-gallery-toolbar-release-mobile);
  --tc-gallery-toolbar-mask-bottom: var(--tc-index-gallery-toolbar-mask-bottom);
  --card-frame-inset: var(--tc-index-card-frame-inset);
  --gallery-visual-gap: var(--tc-index-gallery-visual-gap);
  --gallery-hover-clearance: var(--tc-index-gallery-hover-clearance);
  --tc-scroll-rail-width: var(--tc-index-gallery-scroll-rail-width);
  --tc-theme-picker-top: var(--tc-index-theme-picker-top);

  /* SEARCH: GALLERY_SEARCH_TOKENS
     Classes: .toolbar, .search, .search-icon, .search-count,
     .search-clear, .style-filter-pills. */
  --tc-gallery-toolbar-inner-gap: clamp(var(--tc-space-7), 1.4vw, 22px);
  --tc-gallery-search-width: clamp(460px, 34vw, 640px);
  --tc-gallery-search-height: 46px;
  --tc-gallery-search-icon-left: 18px;
  --tc-gallery-search-icon-size: 15px;
  --tc-gallery-search-icon-stroke: 2;
  --tc-gallery-search-input-padding: 0 112px 0 44px;
  --tc-gallery-search-count-right: 14px;
  --tc-gallery-search-count-max-width: 62px;
  --tc-gallery-search-clear-right: 82px;
  --tc-gallery-search-clear-width: 24px;
  --tc-gallery-search-clear-icon-size: 11px;
  --tc-gallery-search-clear-mark-width: 13px;
  --tc-gallery-search-clear-mark-height: 1.5px;
  --tc-gallery-search-icon-left-mobile: 13px;
  --tc-gallery-search-icon-size-mobile: 13px;
  --tc-gallery-search-icon-stroke-mobile: 1.9;
  --tc-gallery-search-input-padding-mobile: 0 76px 0 34px;
  --tc-gallery-search-count-right-mobile: 10px;
  --tc-gallery-search-count-max-width-mobile: 46px;
  --tc-gallery-search-clear-right-mobile: 52px;

  /* SEARCH: INDEX_GALLERY_CARD_ACTION_TOKENS
     Classes: .card-footer, .card-actions, .action-link, .action-icon. */
  --tc-gallery-card-footer-height: 3rem;
  --tc-gallery-card-footer-height-mobile: 3.5rem;
  --tc-gallery-card-footer-pad-y: 0.1875rem;
  --tc-gallery-card-footer-pad-x: 0.5625rem;
  --tc-gallery-card-footer-padding-mobile: 0.5rem 0.5625rem;
  --tc-gallery-card-footer-gap-mobile: 0.625rem;
  --tc-gallery-card-footer-condensed-gap: 0.625rem;
  --tc-gallery-card-footer-active-height: var(--tc-gallery-card-footer-height);
  --tc-gallery-card-footer-active-pad-x: 0px;
  --tc-gallery-card-shell-edge: calc(var(--tc-index-gallery-card-shell-padding) + var(--tc-space-hairline));
  --tc-gallery-card-actions-gap-mobile: 1.125rem;
  --tc-gallery-card-actions-height-mobile: 2rem;
  --tc-gallery-card-action-mobile-size: 2.5rem;
  --tc-gallery-card-action-padding-mobile: 0.4375rem;
  --tc-gallery-card-action-margin-mobile: -0.1875rem;
  --tc-gallery-card-action-icon-size-mobile: 0.875rem;
  --tc-gallery-card-action-icon-stroke-mobile: 1.85;
  --tc-gallery-card-footer-condensed-min-height: calc(var(--tc-gallery-card-action-mobile-size) + (clamp(10px, 1.35vw, 16px) * 2));
  --tc-gallery-card-touch-actions-gap: var(--tc-space-5);
  --tc-gallery-card-favorite-mobile-offset: var(--tc-space-3);
  --tc-gallery-editor-button-height: 2.625rem;
  --tc-gallery-editor-button-radius: var(--tc-radius-md);

  /* SEARCH: GALLERY_FOOTER_TOKENS
     Classes: .footer-shell, .footer-panel, .footer-brand,
     .footer-stats, .footer-links. */
  --tc-gallery-footer-shell-max-width: 1220px;
  --tc-gallery-footer-shell-max-width-mobile: 420px;
  --tc-gallery-footer-panel-columns: minmax(280px, 0.82fr) minmax(0, 1.55fr);
  --tc-gallery-footer-panel-columns-mobile: 1fr;
  --tc-gallery-footer-panel-gap: clamp(34px, 4.8vw, 72px);
  --tc-gallery-footer-panel-gap-mobile: var(--tc-space-12);
  --tc-gallery-footer-panel-padding: clamp(22px, 2.8vw, 34px);
  --tc-gallery-footer-brand-gap: 15px;
  --tc-gallery-footer-brand-copy-max-width: 430px;
  --tc-gallery-footer-brand-copy-max-width-mobile: 560px;
  --tc-gallery-footer-stat-min-height: 27px;
  --tc-gallery-footer-stat-min-height-mobile: 26px;
  --tc-gallery-footer-links-columns: repeat(4, minmax(0, 1fr));
  --tc-gallery-footer-links-columns-mobile: repeat(2, minmax(0, 1fr));
  --tc-gallery-footer-links-gap: clamp(var(--tc-space-8), 2.6vw, 38px);
  --tc-gallery-footer-links-gap-mobile: 15px var(--tc-space-6);
  --tc-gallery-footer-links-gap-tablet: var(--tc-space-9);

  /* SEARCH: COMBINED_STYLE_GALLERY_TOKENS
     Classes: .modal-style-combined-thumb, .mobile-combined-style-modal,
     .mobile-combined-style-card, .mobile-combined-style-card__preview. */
  --tc-combined-style-thumb-size: 2.5rem;
  --tc-combined-style-thumb-size-mobile: 2.75rem;
  --tc-combined-style-strip-visible-width: 12.25rem;
  --tc-combined-style-strip-visible-width-mobile: 13.375rem;
  --tc-combined-style-card-preview-width: clamp(6rem, 20vw, 7.5rem);
  --tc-combined-style-card-preview-height: 2.75rem;
  --tc-combined-style-card-grid-gap: 0.625rem;
  --tc-combined-style-card-min-height: 3.375rem;
  --tc-combined-style-thumb-radius: var(--tc-popup-gallery-card-media-radius);
  --tc-combined-style-thumb-image-radius: calc(var(--tc-combined-style-thumb-radius) - 1px);
  --tc-combined-style-preview-radius: calc(var(--tc-popup-gallery-card-media-radius) - 1px);
  --tc-combined-style-preview-bg: var(--tc-bg-canvas);
  --tc-combined-style-preview-grid-image: var(--tc-bg-grid-image-soft);
  --tc-combined-style-preview-grid-size: var(--tc-bg-grid-size);
  --tc-combined-style-modal-panel-width: min(38rem, calc(100vw - 2rem));
  --tc-combined-style-modal-panel-max-height: min(calc(100dvh - 1.5rem), 36rem);
  --tc-scrub-grid-edge: 12px;
  --tc-scrub-gap: var(--tc-space-3);
  --tc-scrub-padding-y: var(--tc-space-3);
  --tc-scrub-padding-x: var(--tc-space-4);
  --tc-scrub-mobile-height: 2.125rem;
  --tc-scrub-mobile-grid-edge: 1rem;
  --tc-scrub-mobile-gap: 0.375rem;
  --tc-scrub-mobile-padding-x: 0.4375rem;
  --tc-value-pill-min-width: 50px;
  --tc-value-pill-min-width-sm: 2.5rem;
  --tc-value-pill-padding-y: var(--tc-space-2-5);
  --tc-value-pill-padding-x: var(--tc-space-3-5);
  --tc-value-pill-padding-y-sm: 0.1875rem;
  --tc-value-pill-padding-x-sm: 0.3125rem;
  --tc-control-bg: transparent;
  --tc-control-bg-hover: var(--tc-surface-control-hover);
  --tc-control-bg-active: var(--tc-surface-control-active);
  --tc-control-border: var(--tc-border-transparent);
  --tc-control-border-hover: var(--tc-border-transparent);
  --tc-control-border-active: var(--tc-border-transparent);
  --tc-control-text: var(--tc-text-readable);
  --tc-control-text-hover: var(--tc-text-strong);
  --tc-control-text-muted: var(--tc-text-muted);
  --tc-button-bg: var(--tc-surface-control);
  --tc-button-bg-hover: var(--tc-surface-control-hover);
  --tc-button-bg-active: var(--tc-surface-control-active);
  --tc-button-border: var(--tc-border-transparent);
  --tc-button-border-strong: var(--tc-border-transparent);
  --tc-button-text: var(--tc-text-readable);
  --tc-button-text-hover: var(--tc-text-strong);
  --tc-button-icon: var(--tc-text-subtle);
  --tc-button-icon-hover: var(--tc-text-readable);
  --tc-input-bg: rgba(var(--tc-rgb-text), 0.024);
  --tc-input-bg-hover: rgba(var(--tc-rgb-text), 0.04);
  --tc-input-bg-active: rgba(var(--tc-rgb-text), 0.058);
  --tc-input-border: var(--tc-border-transparent);
  --tc-icon-button-size-sm: 32px;
  --tc-icon-button-size-md: 38px;
  --tc-icon-button-size-lg: 44px;
  --tc-icon-size-2xs: 4px;
  --tc-icon-size-xs: 5px;
  --tc-icon-size-sm: 6px;
  --tc-icon-size-md: 14px;
  --tc-icon-size-lg: 16px;
  --tc-icon-size-xl: 18px;
  --tc-icon-size-2xl: 22px;
  --tc-field-height-2xs: 17px;
  --tc-field-height-xs: 22px;
  --tc-field-height-sm: 24px;
  --tc-field-height-md: 30px;
  --tc-field-height-lg: 36px;
  --tc-caret-width: 3px;
  --tc-caret-min-height: 32px;

  /* SEARCH: CARD_MODAL_PANEL_TOKENS
     Cards, panels, modals, and popups */
  --tc-card-bg: var(--tc-surface-card);
  --tc-card-bg-hover: var(--tc-surface-card-hover);
  --tc-card-bg-active: var(--tc-surface-card-active);
  --tc-card-border: var(--tc-border-transparent);
  --tc-card-border-hover: var(--tc-border-transparent);
  --tc-card-border-active: var(--tc-border-transparent);
  --tc-card-box-bg: var(--tc-surface-card-box);
  --tc-card-box-bg-hover: var(--tc-surface-card-box-hover);
  --tc-card-gradient: none;
  --tc-card-gradient-hover: none;
  --tc-card-filter: var(--tc-glass-filter-soft);
  --tc-card-shadow: none;
  --tc-panel-bg: var(--tc-surface-glass-panel);
  --tc-panel-border: var(--tc-border-soft);
  --tc-panel-shadow: none;
  --tc-popup-bg: var(--tc-surface-glass-popup);
  --tc-popup-border: var(--tc-border-soft);
  --tc-popup-shadow: 0 18px 56px rgba(var(--tc-rgb-black), 0.44);
  --tc-modal-scrim: var(--tc-bg-canvas);
  --tc-modal-panel: var(--tc-panel-bg);
  --tc-modal-body: var(--tc-surface-panel);
  --tc-modal-header: var(--tc-surface-raised);
  --tc-modal-shadow: none;

  /* SEARCH: CARD_MODAL_PANEL_TOKENS
     Scrollbars */
  --tc-scrollbar-size: 7px;
  --tc-scrollbar-thumb-min: 28px;
  --tc-scrollbar-thumb-inset: 2px;
  --tc-scrollbar-track: transparent;
  --tc-scrollbar-thumb: var(--tc-text-faint);
  --tc-scrollbar-thumb-hover: var(--tc-text-subtle);

  /* SEARCH: CARD_MODAL_PANEL_TOKENS
     Motion and shadows */
  --tc-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --tc-ease-press: cubic-bezier(0.2, 0.76, 0.26, 1);
  --tc-transition-fast: 160ms var(--tc-ease-standard);
  --tc-transition-standard: 220ms var(--tc-ease-standard);
  --tc-shadow-none: none;
  --tc-shadow-soft: 0 16px 42px rgba(var(--tc-rgb-black), 0.28);
  --tc-legal-panel-shadow: 0 24px 80px var(--tc-shadow-color-stronger);
  --tc-shadow-panel: 0 18px 48px rgba(var(--tc-rgb-black), 0.32);
  --tc-shadow-popup: var(--tc-popup-shadow);
  --tc-shadow-control: none;
  --tc-shadow-card: none;

  /* SEARCH: EDITOR_SHELL_TOKENS
     Editor-specific shared tokens */
  --tc-editor-frame: var(--tc-accent-main);
  --tc-editor-frame-active: var(--tc-accent-strong);
  --tc-editor-frame-border: var(--tc-accent-border);
  --tc-editor-frame-border-strong: var(--tc-accent-border-strong);
  --tc-editor-handle-stroke: var(--tc-accent-main);
  --tc-editor-handle-fill: var(--tc-accent-handle-fill);
  --tc-editor-frame-idle-line: rgba(var(--tc-rgb-text), 0.46);
  --tc-editor-frame-idle-outline: rgba(var(--tc-rgb-text), 0.3);
  --tc-editor-frame-idle-handle: rgba(var(--tc-rgb-text), 0.52);
  --tc-editor-frame-handle-stroke: rgba(var(--tc-rgb-black), 0.72);
  --tc-editor-frame-utility: rgba(var(--tc-rgb-text), 0.76);
  --tc-editor-frame-bright-idle-line: rgba(var(--tc-rgb-black), 0.48);
  --tc-editor-frame-bright-idle-outline: rgba(var(--tc-rgb-black), 0.32);
  --tc-editor-frame-bright-idle-handle: rgba(var(--tc-rgb-black), 0.54);
  --tc-editor-frame-bright-handle-stroke: rgba(var(--tc-rgb-text), 0.76);
  --tc-editor-inner: rgba(var(--tc-rgb-text), 0.2);
  --tc-editor-radius: var(--tc-radius-2xs);
  --tc-editor-offset: 3px;
  --tc-editor-corner: 22px;
  --tc-editor-handle-size: 6px;
  --tc-editor-handle-half: 3px;
  --tc-editor-handle-inset: 1px;
  --tc-editor-viewport-max-width: 1420px;
  --tc-editor-viewport-max-height: 920px;
  --tc-editor-viewport-desktop-gutter-x: clamp(20px, 1.5vw, 40px);
  /* One shared outer gutter keeps the header and tab rail equally inset.
     Gallery state and aspect ratio must not change the editor shell height. */
  --tc-editor-viewport-desktop-gutter-y: 64px;
  --tc-editor-shell-max-width: 1240px;
  --tc-editor-shell-max-height: 820px;
  /* Desktop previews keep this established compact width until their shared
     height requires a wider 16:9 frame. */
  --tc-editor-desktop-frame-width: 1240px;
  /* Preserve the approved header width while the preview frame grows. */
  --tc-editor-desktop-header-width: min(80%, 992px);
  /* Compensate the editor-window border so the tabs' painted edge mirrors the
     relocated header's viewport inset at the browser's 1/64px layout unit. */
  --tc-editor-desktop-dock-bottom-inset: -1.015625px;
  --tc-editor-desktop-stack-gap: 16px;
  --tc-editor-shell-radius: var(--tc-radius-lg);
  --tc-editor-header-radius: var(--tc-radius-xl);
  --tc-editor-shell-pad: clamp(var(--tc-space-3), 1vw, var(--tc-space-6));
  --tc-editor-shell-tab-offset: 42px;
  --tc-editor-shell-gap: var(--tc-space-0);
  --tc-editor-panel-height: clamp(174px, 20dvh, 208px);
  --tc-editor-stage-inset: clamp(18px, 1.8vw, 28px);
  --tc-editor-header-inset: clamp(10px, 1.1vw, 16px);
  --tc-editor-header-padding-y: var(--tc-space-4);
  --tc-editor-header-padding-x: clamp(var(--tc-space-5), 1vw, var(--tc-space-7));
  --tc-editor-floating-stack-gap: clamp(16px, 1.2cqw, 20px);
  --tc-editor-tabs-height: 48px;

  /* SEARCH: EDITOR_POPUP_TOKENS
     Editor compact popup typography aliases and scrub color tokens. */
  --tc-editor-popup-font: var(--tc-type-compact-popup-option-size);
  --tc-editor-popup-pill-font: var(--tc-type-editor-popup-pill-size);
  --tc-editor-popup-slider-label-font: var(--tc-type-editor-popup-slider-label-size);
  --tc-editor-popup-slider-value-font: var(--tc-type-editor-popup-slider-value-size);
  --tc-editor-popup-slider-unit-font: var(--tc-type-editor-popup-slider-unit-size);
  --tc-editor-scrub-bg: rgba(var(--tc-rgb-text), 0.046);
  --tc-editor-scrub-bg-hover: rgba(var(--tc-rgb-text), 0.074);
  --tc-editor-scrub-bg-active: rgba(var(--tc-rgb-text), 0.105);
  --tc-editor-scrub-track: rgba(var(--tc-rgb-text), 0.18);
  --tc-editor-scrub-fill: rgba(var(--tc-rgb-text), 0.46);
  --tc-editor-scrub-fill-active: rgba(var(--tc-rgb-text), 0.66);
  --tc-editor-group-base: rgb(var(--tc-rgb-surface-panel));
  --tc-editor-group-base-soft: rgba(var(--tc-rgb-text), 0.076);
  --tc-editor-group-base-muted: rgb(var(--tc-rgb-surface-muted));
  --tc-editor-group-line: rgba(var(--tc-rgb-text), 0.13);
  --tc-editor-group-line-strong: rgba(var(--tc-rgb-text), 0.26);
  --tc-editor-group-shadow: 0 10px 28px rgba(var(--tc-rgb-black), 0.2);

  /* SEARCH: EDITOR_POPUP_TOKENS
     Editor popup surfaces, control states, list states, transform markers. */
  --tc-editor-ui-glass: rgb(var(--tc-rgb-surface-panel));
  --tc-editor-ui-glass-soft: rgb(var(--tc-rgb-surface-raised));
  --tc-editor-ui-glass-muted: rgba(var(--tc-rgb-text), 0.044);
  --tc-editor-ui-popup: var(--tc-surface-panel);
  --tc-editor-ui-popup-control: rgba(var(--tc-rgb-text), 0.048);
  --tc-editor-ui-popup-control-hover: rgba(var(--tc-rgb-text), 0.078);
  --tc-editor-ui-popup-control-active: rgba(var(--tc-rgb-text), 0.104);
  --tc-editor-ui-popup-text: rgba(var(--tc-rgb-text), 0.9);
  --tc-editor-ui-popup-text-strong: rgba(var(--tc-rgb-text), 0.96);
  --tc-editor-ui-popup-text-muted: rgba(var(--tc-rgb-text), 0.68);
  --tc-editor-ui-popup-scrollbar: var(--tc-scrollbar-thumb);
  --tc-editor-ui-popup-scrollbar-hover: var(--tc-scrollbar-thumb-hover);
  --tc-editor-ui-control-bg: rgba(var(--tc-rgb-text), 0.05);
  --tc-editor-ui-control-bg-hover: rgba(var(--tc-rgb-text), 0.08);
  --tc-editor-ui-control-bg-active: rgba(var(--tc-rgb-text), 0.108);
  --tc-editor-ui-control-bg-click: rgba(var(--tc-rgb-text), 0.132);
  --tc-editor-ui-control-text-click: var(--tc-text-bright);
  --tc-editor-ui-list-hover-bg: rgba(var(--tc-rgb-text), 0.066);
  --tc-editor-ui-list-active-bg: rgba(var(--tc-rgb-text), 0.096);
  --tc-editor-ui-list-state-line: rgba(var(--tc-rgb-text), 0.24);
  --tc-editor-ui-attention-line-default: rgba(var(--tc-accent-rgb), 0.22);
  --tc-editor-ui-attention-line-strong-default: rgba(var(--tc-accent-rgb), 0.82);
  --tc-editor-ui-attention-glow-default: rgba(var(--tc-accent-rgb), 0.28);
  --tc-editor-ui-attention-line: var(--tc-editor-ui-attention-line-default);
  --tc-editor-ui-attention-line-strong: var(--tc-editor-ui-attention-line-strong-default);
  --tc-editor-ui-attention-glow: var(--tc-editor-ui-attention-glow-default);
  --tc-editor-ui-icon-idle-opacity: 0.78;
  --tc-editor-ui-icon-hover-opacity: 0.96;
  --tc-editor-ui-icon-active-opacity: 0.98;
  --tc-editor-ui-transform-dot: rgba(var(--tc-rgb-text), 0.72);
  --tc-editor-ui-transform-dot-active: rgba(var(--tc-rgb-text), 0.9);
  --tc-editor-ui-line: rgba(var(--tc-rgb-text), 0.14);
  --tc-editor-ui-line-strong: rgba(var(--tc-rgb-text), 0.28);
  --tc-editor-ui-popup-shadow: none;

  /* SEARCH: MEDIA_ROTATE_KEYBOARD_TOKENS
     Media and decorative elements */
  --tc-checker-base: #060606;
  --tc-checker-mark: rgba(var(--tc-rgb-text), 0.045);
  --tc-checker-bright-base: #bfc5c9;
  --tc-checker-bright-mark: rgba(var(--tc-rgb-black), 0.065);
  --tc-checker-bright-control-bg: rgba(var(--tc-rgb-black), 0.075);
  --tc-checker-bright-control-bg-hover: rgba(var(--tc-rgb-black), 0.11);
  --tc-checker-bright-ink: rgba(22, 24, 27, 0.72);
  --tc-mask-solid: #000;
  --tc-rotate-lock-bg: var(--tc-bg-strong);
  --tc-rotate-lock-icon-color: var(--tc-white);
  --tc-rotate-lock-content-gap: var(--tc-space-5);
  --tc-rotate-lock-content-padding: var(--tc-space-9);
  --tc-rotate-lock-content-radius: var(--tc-radius-md);
  --tc-rotate-lock-content-max-width: 360px;
  --tc-rotate-lock-icon-size: clamp(3rem, 14vw, 4.5rem);
  --tc-rotate-lock-z: 2147483647;
  --tc-rotate-lock-font-family: var(--tc-font-body);
  --tc-rotate-lock-title-color: var(--tc-text-readable);
  --tc-rotate-lock-title-size: var(--tc-font-size-lg);
  --tc-rotate-lock-title-weight: var(--tc-font-weight-medium);
  --tc-rotate-lock-detail-color: var(--tc-text-medium);
  --tc-rotate-lock-detail-size: var(--tc-font-size-md);
  --tc-rotate-lock-detail-weight: var(--tc-font-weight-regular);
  --tc-rotate-lock-text-gap: var(--tc-space-1);
  --tc-rotate-lock-line-height: var(--tc-type-body-line);
  --tc-mobile-keyboard-z: 2147483000;
  --tc-mobile-keyboard-caret-z: var(--tc-mobile-keyboard-z);
  --tc-mobile-keyboard-selection-z: var(--tc-mobile-keyboard-z);
  --tc-illustration-ink: #050505;
  --tc-illustration-paper: #f8f8f3;
  --tc-illustration-radius: 0.28rem;
  --tc-illustration-radius-pill: 99px;
  --tc-keyboard-selection-radius: 14px 14px 9px 9px;
  --tc-illustration-shadow: 0 0.36rem 0.58rem rgba(var(--tc-rgb-black), 0.26);
}

:root {
  /* SEARCH: SELECT_RUNTIME_TOKENS */
  --tc-select-bg: var(--tc-surface-transparent);
  --tc-select-menu-bg: var(--tc-editor-ui-popup);
  --tc-select-line: var(--tc-control-border);
  --tc-select-line-strong: var(--tc-control-border-hover);
  --tc-select-text: var(--tc-text-main);
  --tc-select-muted: var(--tc-text-muted);
  --tc-select-accent: var(--tc-accent-main);
  --tc-select-progress: 0;
  --tc-select-dim-opacity: 0.58;
  --tc-select-dim-filter: var(--tc-filter-gallery-loading);

  --tc-progress-fill-bg: var(--tc-control-bg-active);
  --tc-progress-fill-opacity: 1;
  --tc-progress-fill-transition: opacity 240ms var(--tc-ease-standard), transform 190ms var(--tc-ease-press);
  --tc-progress-fill-origin: left center;

  /* SEARCH: MOTION_RUNTIME_TOKENS */
  --tc-compact-menu-anchor: 50%;
  --tc-compact-menu-attention-repeats: 2;
  --tc-gallery-card-load-delay: 0ms;
  --tc-hero-scroll-cue-pulse-duration: 2800ms;
  --tc-hero-scroll-cue-opacity-low: 0.35;
  --tc-hero-scroll-cue-opacity-high: 0.78;
  --tc-hero-scroll-cue-opacity-hover: 1;
  --tc-hero-scroll-cue-arrow-y-low: 1px;
  --tc-hero-scroll-cue-arrow-y-high: -3px;
  --tc-hero-scroll-cue-arrow-delay: 0ms;
  --tc-editor-payment-marquee-distance: -50%;
  --tc-mobile-keyboard-height: 0px;
  --tc-editor-prepare-progress: 0;
  --tc-editor-preparing-left: 0px;
  --tc-editor-preparing-top: 0px;
  --tc-editor-preparing-width: 100%;
  --tc-editor-preparing-height: 100%;
  --tc-editor-preparing-surface-radius: var(--tc-radius-lg);
  --tc-float-brightness: 0.88;
  --tc-active-brightness: var(--tc-float-brightness);
  --tc-move-x: 0px;
  --tc-move-y: 0px;
  --tc-scale: 1;
}

/* SEARCH: THEME_OVERRIDE_TOKENS
   Glass/backdrop filters are disabled on touch-primary devices for GPU cost.
   Touch-capable desktops keep the desktop glass look. */
@media (hover: none) and (pointer: coarse) {
  :root {
    --tc-glass-filter: none;
    --tc-glass-filter-soft: none;
    --tc-card-filter: none;
    --tc-surface-glass: var(--tc-surface-main);
    --tc-surface-glass-strong: var(--tc-surface-raised);
    --tc-surface-glass-panel: var(--tc-surface-panel);
    --tc-surface-glass-card: var(--tc-surface-raised);
    --tc-surface-glass-card-hover: var(--tc-surface-card-hover);
    --tc-panel-bg: var(--tc-surface-glass-panel);
    --tc-modal-panel: var(--tc-editor-ui-glass);
    --tc-modal-body: var(--tc-editor-ui-glass-soft);
    --tc-modal-header: var(--tc-editor-ui-glass);
  }
}


/* SEARCH: THEME_OVERRIDE_TOKENS
   Dark glass theme overrides. */
:root[data-theme="dark-glass"],
[data-theme="dark-glass"] {
  color-scheme: dark;
  --tc-rgb-page: 8, 9, 11;
  --tc-rgb-surface-main: 14, 15, 18;
  --tc-rgb-surface-panel: 16, 17, 21;
  --tc-rgb-surface-raised: 24, 25, 30;
  --tc-rgb-surface-muted: 10, 11, 14;
  --tc-rgb-surface-popup: 18, 19, 23;
  --tc-glass-rgb: 14, 15, 18;
  --tc-glass-raised-rgb: 26, 27, 32;
  --tc-surface-glass: rgba(var(--tc-glass-rgb), 0.74);
  --tc-surface-glass-soft: rgba(var(--tc-glass-rgb), 0.62);
  --tc-surface-glass-strong: rgba(var(--tc-glass-rgb), 0.88);
  --tc-panel-bg: var(--tc-surface-glass-panel);
}

/* SEARCH: THEME_OVERRIDE_TOKENS
   Warm paper theme overrides. */
:root[data-theme="warm-paper"],
:root[data-theme="warm"],
[data-theme="warm-paper"],
[data-theme="warm"] {
  --tc-accent-rgb: 207, 167, 119;
  --tc-accent-main: #cfa777;
  --tc-accent-strong: #dec096;
  --tc-accent-glow: rgba(var(--tc-accent-rgb), 0.28);
  --tc-accent-aura: rgba(var(--tc-accent-rgb), 0.042);
  --tc-accent-aura-faint: rgba(var(--tc-accent-rgb), 0.014);
  --tc-accent-border-soft: rgba(var(--tc-accent-rgb), 0.18);
  --tc-accent-border: rgba(var(--tc-accent-rgb), 0.25);
  --tc-accent-border-medium: rgba(var(--tc-accent-rgb), 0.31);
  --tc-accent-border-focus: rgba(var(--tc-accent-rgb), 0.36);
  --tc-accent-border-strong: rgba(var(--tc-accent-rgb), 0.42);
  --tc-accent-border-frame: rgba(var(--tc-accent-rgb), 0.74);
  --tc-accent-bg-soft: rgba(var(--tc-accent-rgb), 0.045);
  --tc-accent-bg: rgba(var(--tc-accent-rgb), 0.068);
  --tc-accent-bg-focus: rgba(var(--tc-accent-rgb), 0.09);
  --tc-accent-bg-emphasis: rgba(var(--tc-accent-rgb), 0.1);
  --tc-accent-bg-strong: rgba(var(--tc-accent-rgb), 0.12);
  --tc-accent-overlay: rgba(var(--tc-accent-rgb), 0.18);
  --tc-accent-solid: rgba(var(--tc-accent-rgb), 0.62);
  --tc-accent-solid-strong: rgba(var(--tc-accent-rgb), 0.68);
  --tc-accent-handle-fill: rgba(var(--tc-accent-rgb), 0.86);
  --tc-accent-progress: rgba(var(--tc-accent-rgb), 0.72);
}

/* SEARCH: THEME_OVERRIDE_TOKENS
   Colorful abstract theme overrides. */
:root[data-theme="colorful-abstract"],
[data-theme="colorful-abstract"] {
  color-scheme: dark;
  --tc-accent-rgb: 132, 119, 255;
  --tc-accent-main: rgb(var(--tc-accent-rgb));
  --tc-accent-strong: #a79cff;
  --tc-accent-glow: rgba(var(--tc-accent-rgb), 0.32);
  --tc-accent-aura: rgba(var(--tc-accent-rgb), 0.052);
  --tc-accent-border-soft: rgba(var(--tc-accent-rgb), 0.2);
  --tc-accent-border: rgba(var(--tc-accent-rgb), 0.3);
  --tc-accent-border-medium: rgba(var(--tc-accent-rgb), 0.36);
  --tc-accent-border-focus: rgba(var(--tc-accent-rgb), 0.42);
  --tc-accent-border-strong: rgba(var(--tc-accent-rgb), 0.5);
  --tc-accent-border-frame: rgba(var(--tc-accent-rgb), 0.82);
  --tc-accent-bg-soft: rgba(var(--tc-accent-rgb), 0.06);
  --tc-accent-bg: rgba(var(--tc-accent-rgb), 0.09);
  --tc-accent-bg-focus: rgba(var(--tc-accent-rgb), 0.12);
  --tc-accent-bg-emphasis: rgba(var(--tc-accent-rgb), 0.13);
  --tc-accent-bg-strong: rgba(var(--tc-accent-rgb), 0.16);
  --tc-accent-overlay: rgba(var(--tc-accent-rgb), 0.23);
  --tc-accent-solid: rgba(var(--tc-accent-rgb), 0.68);
  --tc-accent-solid-strong: rgba(var(--tc-accent-rgb), 0.76);
  --tc-accent-handle-fill: rgba(var(--tc-accent-rgb), 0.92);
  --tc-accent-progress: rgba(var(--tc-accent-rgb), 0.8);
}
}

/* source: shared/styles/tokens/typography.css */
/* Motion Typograph shared typography tokens.
   SEARCH: TYPE_BASE_TOKENS
     Root, body, UI, scale aliases, and font weights.
   SEARCH: TYPE_FORM_CONTROL_TOKENS
     Field labels, segmented controls, pills, select controls, empty states.
   SEARCH: TYPE_GALLERY_TOKENS
     Gallery filters, search, shared compact gallery labels, popup gallery
     cards, gallery cards, load states.
   SEARCH: TYPE_MODAL_NOTICE_TOKENS
     Notices, modals, eyebrows, primary buttons.
   SEARCH: TYPE_EDITOR_TOKENS
     Editor style selector, actions, tabs, timeline, compact controls, popups.
   SEARCH: TYPE_FOOTER_TOKENS
     Footer body, stats, headings, links, logo, meta.
   SEARCH: TYPE_PRICING_BADGE_TOKENS
     Pricing badge type and compact badge layout.
   SEARCH: TYPE_MOBILE_OVERRIDE_TOKENS
     Mobile type scale overrides. */

@layer tokens {
:root {
  /* SEARCH: TYPE_BASE_TOKENS */
  --tc-type-root-size-desktop: 16px;
  --tc-type-root-size-compact: 16px;
  --tc-type-root-size-mobile: 16px;
  --tc-type-body-size-desktop: 14px;
  --tc-type-body-size-mobile: 14px;
  --tc-type-body-line-desktop: 1.38;
  --tc-type-body-line-mobile: 1.36;
  --tc-type-ui-line-desktop: 1.2;
  --tc-type-ui-line-mobile: 1.2;
  --tc-type-font-xs-desktop: 12px;
  --tc-type-font-xs-mobile: 12px;
  --tc-type-font-sm-desktop: 14px;
  --tc-type-font-sm-mobile: 14px;
  --tc-type-font-md-desktop: 16px;
  --tc-type-font-md-mobile: 16px;
  --tc-type-font-lg-desktop: 18px;
  --tc-type-font-lg-mobile: 18px;
  --tc-type-font-xl-desktop: 20px;
  --tc-type-font-xl-mobile: 20px;
  --tc-font-size-page: var(--tc-type-root-size-desktop);
  --tc-font-size-page-compact: var(--tc-type-root-size-compact);
  --tc-font-size-page-mobile: var(--tc-type-root-size-mobile);
  --tc-line-height-ui: var(--tc-type-ui-line-desktop);
  --tc-font-size-xs: var(--tc-type-font-xs-desktop);
  --tc-font-size-sm: var(--tc-type-font-sm-desktop);
  --tc-font-size-md: var(--tc-type-font-md-desktop);
  --tc-font-size-lg: var(--tc-type-font-lg-desktop);
  --tc-font-size-xl: var(--tc-type-font-xl-desktop);
  --tc-type-weight-regular-desktop: 400;
  --tc-type-weight-regular-mobile: 400;
  --tc-type-weight-medium-desktop: 500;
  --tc-type-weight-medium-mobile: 500;
  --tc-type-weight-semibold-desktop: 600;
  --tc-type-weight-semibold-mobile: 600;
  --tc-type-weight-bold-desktop: 700;
  --tc-type-weight-bold-mobile: 700;
  --tc-type-weight-regular: var(--tc-type-weight-regular-desktop);
  --tc-type-weight-medium: var(--tc-type-weight-medium-desktop);
  --tc-type-weight-semibold: var(--tc-type-weight-semibold-desktop);
  --tc-type-weight-bold: var(--tc-type-weight-bold-desktop);
  --tc-font-weight-regular: var(--tc-type-weight-regular);
  --tc-font-weight-medium: var(--tc-type-weight-medium);
  --tc-font-weight-semibold: var(--tc-type-weight-semibold);
  --tc-font-weight-bold: var(--tc-type-weight-bold);
  --tc-type-body-size: var(--tc-type-body-size-desktop);
  --tc-type-body-line: var(--tc-type-body-line-desktop);

  /* SEARCH: TYPE_FORM_CONTROL_TOKENS */
  --tc-type-field-label-size-desktop: 9px;
  --tc-type-field-label-size-mobile: 9px;
  --tc-type-field-label-weight-desktop: 560;
  --tc-type-field-label-weight-mobile: 560;
  --tc-type-field-label-line-desktop: 1.25;
  --tc-type-field-label-line-mobile: 1.25;
  --tc-type-field-label-size: var(--tc-type-field-label-size-desktop);
  --tc-type-field-label-weight: var(--tc-type-field-label-weight-desktop);
  --tc-type-field-label-line: var(--tc-type-field-label-line-desktop);

  /* SEARCH: TYPE_FORM_CONTROL_TOKENS */
  --tc-type-segmented-control-size-desktop: 9px;
  --tc-type-segmented-control-size-mobile: 9px;
  --tc-type-segmented-control-weight-desktop: 560;
  --tc-type-segmented-control-weight-mobile: 560;
  --tc-type-segmented-control-line-desktop: 1;
  --tc-type-segmented-control-line-mobile: 1;
  --tc-type-segmented-control-size: var(--tc-type-segmented-control-size-desktop);
  --tc-type-segmented-control-weight: var(--tc-type-segmented-control-weight-desktop);
  --tc-type-segmented-control-line: var(--tc-type-segmented-control-line-desktop);

  /* SEARCH: TYPE_FORM_CONTROL_TOKENS */
  --tc-type-size-pill-xs-desktop: 10px;
  --tc-type-size-pill-xs-mobile: 10px;
  --tc-type-size-pill-sm-desktop: 11px;
  --tc-type-size-pill-sm-mobile: 11px;
  --tc-type-size-pill-md-desktop: 11px;
  --tc-type-size-pill-md-mobile: 11px;
  --tc-type-size-pill-lg-desktop: 12px;
  --tc-type-size-pill-lg-mobile: 12px;
  --tc-type-size-pill-xs: var(--tc-type-size-pill-xs-desktop);
  --tc-type-size-pill-sm: var(--tc-type-size-pill-sm-desktop);
  --tc-type-size-pill-md: var(--tc-type-size-pill-md-desktop);
  --tc-type-size-pill-lg: var(--tc-type-size-pill-lg-desktop);
  --tc-type-line-pill-desktop: 1;
  --tc-type-line-pill-mobile: 1;
  --tc-type-weight-pill-desktop: 650;
  --tc-type-weight-pill-mobile: 650;
  --tc-type-line-pill: var(--tc-type-line-pill-desktop);
  --tc-type-weight-pill: var(--tc-type-weight-pill-desktop);

  /* SEARCH: TYPE_PRICING_BADGE_TOKENS */
  --tc-type-pricing-badge-size-desktop: var(--tc-type-size-pill-xs-desktop);
  --tc-type-pricing-badge-size-mobile: var(--tc-type-size-pill-xs-mobile);
  --tc-type-pricing-badge-size-compact-desktop: 7.5px;
  --tc-type-pricing-badge-size-compact-mobile: 7px;
  --tc-type-pricing-badge-size-short-desktop: 7px;
  --tc-type-pricing-badge-size-short-mobile: 7px;
  --tc-type-pricing-badge-size: var(--tc-type-size-pill-xs);
  --tc-type-pricing-badge-size-compact: var(--tc-type-pricing-badge-size-compact-desktop);
  --tc-type-pricing-badge-size-short: var(--tc-type-pricing-badge-size-short-desktop);

  /* SEARCH: TYPE_GALLERY_TOKENS */
  --tc-type-gallery-filter-pill-size-desktop: 12px;
  --tc-type-gallery-filter-pill-size-mobile: 11px;
  --tc-type-gallery-filter-pill-weight-desktop: 600;
  --tc-type-gallery-filter-pill-weight-mobile: 600;
  --tc-type-gallery-filter-pill-line-desktop: 1;
  --tc-type-gallery-filter-pill-line-mobile: 1;
  --tc-type-gallery-filter-count-size-desktop: 11px;
  --tc-type-gallery-filter-count-size-mobile: 11px;
  --tc-type-gallery-filter-count-weight-desktop: 600;
  --tc-type-gallery-filter-count-weight-mobile: 600;
  --tc-type-gallery-filter-count-line-desktop: 1;
  --tc-type-gallery-filter-count-line-mobile: 1;
  --tc-type-gallery-filter-pill-size: var(--tc-type-gallery-filter-pill-size-desktop);
  --tc-type-gallery-filter-pill-weight: var(--tc-type-gallery-filter-pill-weight-desktop);
  --tc-type-gallery-filter-pill-line: var(--tc-type-gallery-filter-pill-line-desktop);
  --tc-type-gallery-filter-count-size: var(--tc-type-gallery-filter-count-size-desktop);
  --tc-type-gallery-filter-count-weight: var(--tc-type-gallery-filter-count-weight-desktop);
  --tc-type-gallery-filter-count-line: var(--tc-type-gallery-filter-count-line-desktop);

  /* SEARCH: TYPE_GALLERY_TOKENS */
  --tc-type-gallery-search-input-size-desktop: 13px;
  --tc-type-gallery-search-input-size-mobile: 12px;
  --tc-type-gallery-search-input-weight-desktop: 500;
  --tc-type-gallery-search-input-weight-mobile: 450;
  --tc-type-gallery-search-count-size-desktop: 10px;
  --tc-type-gallery-search-count-size-mobile: 9px;
  --tc-type-gallery-search-count-weight-desktop: 600;
  --tc-type-gallery-search-count-weight-mobile: 600;
  --tc-type-gallery-search-input-size: var(--tc-type-gallery-search-input-size-desktop);
  --tc-type-gallery-search-input-weight: var(--tc-type-gallery-search-input-weight-desktop);
  --tc-type-gallery-search-count-size: var(--tc-type-gallery-search-count-size-desktop);
  --tc-type-gallery-search-count-weight: var(--tc-type-gallery-search-count-weight-desktop);

  /* SEARCH: TYPE_GALLERY_TOKENS */
  --tc-type-popup-gallery-filter-pill-size-desktop: var(--tc-type-gallery-filter-pill-size-mobile);
  --tc-type-popup-gallery-filter-pill-size-mobile: var(--tc-type-gallery-filter-pill-size-mobile);
  --tc-type-popup-gallery-filter-pill-weight-desktop: var(--tc-type-gallery-filter-pill-weight-mobile);
  --tc-type-popup-gallery-filter-pill-weight-mobile: var(--tc-type-gallery-filter-pill-weight-mobile);
  --tc-type-popup-gallery-filter-pill-line-desktop: var(--tc-type-gallery-filter-pill-line-mobile);
  --tc-type-popup-gallery-filter-pill-line-mobile: var(--tc-type-gallery-filter-pill-line-mobile);
  --tc-type-popup-gallery-filter-count-size-desktop: var(--tc-type-gallery-filter-count-size-mobile);
  --tc-type-popup-gallery-filter-count-size-mobile: var(--tc-type-gallery-filter-count-size-mobile);
  --tc-type-popup-gallery-filter-count-weight-desktop: var(--tc-type-gallery-filter-count-weight-mobile);
  --tc-type-popup-gallery-filter-count-weight-mobile: var(--tc-type-gallery-filter-count-weight-mobile);
  --tc-type-popup-gallery-filter-count-line-desktop: var(--tc-type-gallery-filter-count-line-mobile);
  --tc-type-popup-gallery-filter-count-line-mobile: var(--tc-type-gallery-filter-count-line-mobile);
  --tc-type-popup-gallery-search-input-size-desktop: var(--tc-type-gallery-search-input-size-desktop);
  --tc-type-popup-gallery-search-input-size-mobile: var(--tc-type-gallery-search-input-size-mobile);
  --tc-type-popup-gallery-search-input-weight-desktop: var(--tc-type-gallery-search-input-weight-desktop);
  --tc-type-popup-gallery-search-input-weight-mobile: var(--tc-type-gallery-search-input-weight-mobile);
  --tc-type-popup-gallery-close-size-desktop: 10px;
  --tc-type-popup-gallery-close-size-mobile: 10px;
  --tc-type-popup-gallery-close-weight-desktop: 700;
  --tc-type-popup-gallery-close-weight-mobile: 700;
  --tc-type-popup-gallery-close-line-desktop: 1;
  --tc-type-popup-gallery-close-line-mobile: 1;
  --tc-type-gallery-card-label-compact-size-desktop: 10px;
  --tc-type-gallery-card-label-compact-size-mobile: 10px;
  --tc-type-gallery-card-label-compact-weight-desktop: 560;
  --tc-type-gallery-card-label-compact-weight-mobile: 560;
  --tc-type-gallery-card-label-compact-line-desktop: 1;
  --tc-type-gallery-card-label-compact-line-mobile: 1;
  --tc-type-popup-gallery-card-label-size-desktop: var(--tc-type-gallery-card-label-compact-size-desktop);
  --tc-type-popup-gallery-card-label-size-mobile: var(--tc-type-gallery-card-label-compact-size-mobile);
  --tc-type-popup-gallery-card-label-weight-desktop: var(--tc-type-gallery-card-label-compact-weight-desktop);
  --tc-type-popup-gallery-card-label-weight-mobile: var(--tc-type-gallery-card-label-compact-weight-mobile);
  --tc-type-popup-gallery-card-label-line-desktop: var(--tc-type-gallery-card-label-compact-line-desktop);
  --tc-type-popup-gallery-card-label-line-mobile: var(--tc-type-gallery-card-label-compact-line-mobile);
  --tc-type-popup-gallery-filter-pill-size: var(--tc-type-popup-gallery-filter-pill-size-desktop);
  --tc-type-popup-gallery-filter-pill-weight: var(--tc-type-popup-gallery-filter-pill-weight-desktop);
  --tc-type-popup-gallery-filter-pill-line: var(--tc-type-popup-gallery-filter-pill-line-desktop);
  --tc-type-popup-gallery-filter-count-size: var(--tc-type-popup-gallery-filter-count-size-desktop);
  --tc-type-popup-gallery-filter-count-weight: var(--tc-type-popup-gallery-filter-count-weight-desktop);
  --tc-type-popup-gallery-filter-count-line: var(--tc-type-popup-gallery-filter-count-line-desktop);
  --tc-type-popup-gallery-search-input-size: var(--tc-type-popup-gallery-search-input-size-desktop);
  --tc-type-popup-gallery-search-input-weight: var(--tc-type-popup-gallery-search-input-weight-desktop);
  --tc-type-popup-gallery-close-size: var(--tc-type-popup-gallery-close-size-desktop);
  --tc-type-popup-gallery-close-weight: var(--tc-type-popup-gallery-close-weight-desktop);
  --tc-type-popup-gallery-close-line: var(--tc-type-popup-gallery-close-line-desktop);
  --tc-type-popup-gallery-card-label-size: var(--tc-type-popup-gallery-card-label-size-desktop);
  --tc-type-popup-gallery-card-label-weight: var(--tc-type-popup-gallery-card-label-weight-desktop);
  --tc-type-popup-gallery-card-label-line: var(--tc-type-popup-gallery-card-label-line-desktop);

  /* SEARCH: TYPE_GALLERY_TOKENS */
  --tc-type-gallery-card-title-size-desktop: 14px;
  --tc-type-gallery-card-title-size-mobile: 12px;
  --tc-type-gallery-card-title-weight-desktop: 660;
  --tc-type-gallery-card-title-weight-mobile: 650;
  --tc-type-gallery-card-title-line-desktop: 1.18;
  --tc-type-gallery-card-title-line-mobile: 1.2;
  --tc-type-gallery-card-action-size-desktop: 12px;
  --tc-type-gallery-card-action-size-mobile: 11px;
  --tc-type-gallery-card-action-weight-desktop: 650;
  --tc-type-gallery-card-action-weight-mobile: 650;
  --tc-type-gallery-card-action-line-desktop: 1;
  --tc-type-gallery-card-action-line-mobile: 1;
  --tc-type-gallery-live-editor-size-desktop: 14px;
  --tc-type-gallery-live-editor-size-mobile: 12px;
  --tc-type-gallery-live-editor-weight-desktop: 760;
  --tc-type-gallery-live-editor-weight-mobile: 720;
  --tc-type-gallery-live-editor-line-desktop: 1;
  --tc-type-gallery-live-editor-line-mobile: 1;
  --tc-type-gallery-card-title-size: var(--tc-type-gallery-card-title-size-desktop);
  --tc-type-gallery-card-title-weight: var(--tc-type-gallery-card-title-weight-desktop);
  --tc-type-gallery-card-title-line: var(--tc-type-gallery-card-title-line-desktop);
  --tc-type-gallery-card-action-size: var(--tc-type-gallery-card-action-size-desktop);
  --tc-type-gallery-card-action-weight: var(--tc-type-gallery-card-action-weight-desktop);
  --tc-type-gallery-card-action-line: var(--tc-type-gallery-card-action-line-desktop);
  --tc-type-gallery-live-editor-size: var(--tc-type-gallery-live-editor-size-desktop);
  --tc-type-gallery-live-editor-weight: var(--tc-type-gallery-live-editor-weight-desktop);
  --tc-type-gallery-live-editor-line: var(--tc-type-gallery-live-editor-line-desktop);

  /* SEARCH: TYPE_FORM_CONTROL_TOKENS */
  --tc-type-select-button-size-desktop: 12px;
  --tc-type-select-button-size-mobile: 12px;
  --tc-type-select-button-weight-desktop: 500;
  --tc-type-select-button-weight-mobile: 500;
  --tc-type-select-button-line-desktop: 1.15;
  --tc-type-select-button-line-mobile: 1.15;
  --tc-type-select-search-input-size-desktop: 13px;
  --tc-type-select-search-input-size-mobile: 13px;
  --tc-type-select-search-input-weight-desktop: 620;
  --tc-type-select-search-input-weight-mobile: 560;
  --tc-type-select-empty-size-desktop: 12px;
  --tc-type-select-empty-size-mobile: 12px;
  --tc-type-select-empty-title-size-desktop: 14px;
  --tc-type-select-empty-title-size-mobile: 13px;
  --tc-type-select-empty-title-weight-desktop: 660;
  --tc-type-select-empty-title-weight-mobile: 660;
  --tc-type-select-empty-title-line-desktop: 1.22;
  --tc-type-select-empty-title-line-mobile: 1.22;
  --tc-type-select-empty-copy-size-desktop: 11px;
  --tc-type-select-empty-copy-size-mobile: 11px;
  --tc-type-select-empty-copy-weight-desktop: 540;
  --tc-type-select-empty-copy-weight-mobile: 540;
  --tc-type-select-empty-copy-line-desktop: 1.45;
  --tc-type-select-empty-copy-line-mobile: 1.45;
  --tc-type-select-empty-action-size-desktop: 10.5px;
  --tc-type-select-empty-action-size-mobile: 10.5px;
  --tc-type-select-empty-action-weight-desktop: 680;
  --tc-type-select-empty-action-weight-mobile: 680;
  --tc-type-select-empty-action-line-desktop: 1;
  --tc-type-select-empty-action-line-mobile: 1;
  --tc-type-select-button-size: var(--tc-type-select-button-size-desktop);
  --tc-type-select-button-weight: var(--tc-type-select-button-weight-desktop);
  --tc-type-select-button-line: var(--tc-type-select-button-line-desktop);
  --tc-type-select-search-input-size: var(--tc-type-select-search-input-size-desktop);
  --tc-type-select-search-input-weight: var(--tc-type-select-search-input-weight-desktop);
  --tc-type-select-empty-size: var(--tc-type-select-empty-size-desktop);
  --tc-type-select-empty-title-size: var(--tc-type-select-empty-title-size-desktop);
  --tc-type-select-empty-title-weight: var(--tc-type-select-empty-title-weight-desktop);
  --tc-type-select-empty-title-line: var(--tc-type-select-empty-title-line-desktop);
  --tc-type-select-empty-copy-size: var(--tc-type-select-empty-copy-size-desktop);
  --tc-type-select-empty-copy-weight: var(--tc-type-select-empty-copy-weight-desktop);
  --tc-type-select-empty-copy-line: var(--tc-type-select-empty-copy-line-desktop);
  --tc-type-select-empty-action-size: var(--tc-type-select-empty-action-size-desktop);
  --tc-type-select-empty-action-weight: var(--tc-type-select-empty-action-weight-desktop);
  --tc-type-select-empty-action-line: var(--tc-type-select-empty-action-line-desktop);

  /* SEARCH: TYPE_FORM_CONTROL_TOKENS */
  --tc-type-select-option-size-desktop: 13px;
  --tc-type-select-option-size-mobile: 13px;
  --tc-type-select-option-weight-desktop: 600;
  --tc-type-select-option-weight-mobile: 600;
  --tc-type-select-option-line-desktop: 1.1;
  --tc-type-select-option-line-mobile: 1.1;
  --tc-type-select-gallery-label-size-desktop: var(--tc-type-popup-gallery-card-label-size-desktop);
  --tc-type-select-gallery-label-size-mobile: var(--tc-type-popup-gallery-card-label-size-mobile);
  --tc-type-select-option-size: var(--tc-type-select-option-size-desktop);
  --tc-type-select-option-weight: var(--tc-type-select-option-weight-desktop);
  --tc-type-select-option-line: var(--tc-type-select-option-line-desktop);
  --tc-type-select-gallery-label-size: var(--tc-type-select-gallery-label-size-desktop);

  /* SEARCH: TYPE_MODAL_NOTICE_TOKENS */
  --tc-type-notice-panel-size-desktop: 12px;
  --tc-type-notice-panel-size-mobile: 11px;
  --tc-type-notice-panel-weight-desktop: 680;
  --tc-type-notice-panel-weight-mobile: 660;
  --tc-type-notice-panel-line-desktop: 1.25;
  --tc-type-notice-panel-line-mobile: 1.25;
  --tc-type-modal-body-size-desktop: 13px;
  --tc-type-modal-body-size-mobile: 12px;
  --tc-type-modal-body-weight-desktop: 400;
  --tc-type-modal-body-weight-mobile: 400;
  --tc-type-modal-body-line-desktop: 1.48;
  --tc-type-modal-body-line-mobile: 1.42;
  --tc-type-modal-lead-size-desktop: 12px;
  --tc-type-modal-lead-size-mobile: 11px;
  --tc-type-modal-lead-weight-desktop: 400;
  --tc-type-modal-lead-weight-mobile: 400;
  --tc-type-modal-lead-line-desktop: 1.3;
  --tc-type-modal-lead-line-mobile: 1.3;
  --tc-type-eyebrow-size-desktop: 11px;
  --tc-type-eyebrow-size-mobile: 10px;
  --tc-type-eyebrow-weight-desktop: 650;
  --tc-type-eyebrow-weight-mobile: 650;
  --tc-type-eyebrow-line-desktop: 1.1;
  --tc-type-eyebrow-line-mobile: 1.1;
  --tc-type-button-primary-size-desktop: 13px;
  --tc-type-button-primary-size-mobile: 12px;
  --tc-type-button-primary-weight-desktop: 720;
  --tc-type-button-primary-weight-mobile: 700;
  --tc-type-notice-panel-size: var(--tc-type-notice-panel-size-desktop);
  --tc-type-notice-panel-weight: var(--tc-type-notice-panel-weight-desktop);
  --tc-type-notice-panel-line: var(--tc-type-notice-panel-line-desktop);
  --tc-type-modal-body-size: var(--tc-type-modal-body-size-desktop);
  --tc-type-modal-body-weight: var(--tc-type-modal-body-weight-desktop);
  --tc-type-modal-body-line: var(--tc-type-modal-body-line-desktop);
  --tc-type-modal-lead-size: var(--tc-type-modal-lead-size-desktop);
  --tc-type-modal-lead-weight: var(--tc-type-modal-lead-weight-desktop);
  --tc-type-modal-lead-line: var(--tc-type-modal-lead-line-desktop);
  --tc-type-eyebrow-size: var(--tc-type-eyebrow-size-desktop);
  --tc-type-eyebrow-weight: var(--tc-type-eyebrow-weight-desktop);
  --tc-type-eyebrow-line: var(--tc-type-eyebrow-line-desktop);
  --tc-type-button-primary-size: var(--tc-type-button-primary-size-desktop);
  --tc-type-button-primary-weight: var(--tc-type-button-primary-weight-desktop);

  /* SEARCH: TYPE_GALLERY_TOKENS */
  --tc-type-gallery-load-label-size-desktop: 15px;
  --tc-type-gallery-load-label-size-mobile: 14px;
  --tc-type-gallery-load-label-weight-desktop: 820;
  --tc-type-gallery-load-label-weight-mobile: 780;
  --tc-type-gallery-load-label-line-desktop: 1;
  --tc-type-gallery-load-label-line-mobile: 1;
  --tc-type-gallery-load-all-size-desktop: 13px;
  --tc-type-gallery-load-all-size-mobile: 12px;
  --tc-type-gallery-load-all-weight-desktop: 760;
  --tc-type-gallery-load-all-weight-mobile: 720;
  --tc-type-gallery-empty-button-size-desktop: 11px;
  --tc-type-gallery-empty-button-size-mobile: 11px;
  --tc-type-gallery-empty-button-weight-desktop: 680;
  --tc-type-gallery-empty-button-weight-mobile: 660;
  --tc-type-gallery-load-hint-size-desktop: 11.5px;
  --tc-type-gallery-load-hint-size-mobile: 11px;
  --tc-type-gallery-load-hint-weight-desktop: 500;
  --tc-type-gallery-load-hint-weight-mobile: 500;
  --tc-type-gallery-load-hint-line-desktop: 1.25;
  --tc-type-gallery-load-hint-line-mobile: 1.45;
  --tc-type-gallery-message-size-desktop: 15px;
  --tc-type-gallery-message-size-mobile: 13px;
  --tc-type-gallery-empty-title-size-desktop: clamp(16px, 1.4vw, 21px);
  --tc-type-gallery-empty-title-size-mobile: 16px;
  --tc-type-gallery-empty-title-weight-desktop: 650;
  --tc-type-gallery-empty-title-weight-mobile: 650;
  --tc-type-gallery-empty-title-line-desktop: 1.2;
  --tc-type-gallery-empty-title-line-mobile: 1.2;
  --tc-type-gallery-empty-copy-size-desktop: 12px;
  --tc-type-gallery-empty-copy-size-mobile: 11px;
  --tc-type-gallery-empty-copy-weight-desktop: 520;
  --tc-type-gallery-empty-copy-weight-mobile: 520;
  --tc-type-gallery-empty-copy-line-desktop: 1.5;
  --tc-type-gallery-empty-copy-line-mobile: 1.45;
  --tc-type-gallery-load-label-size: var(--tc-type-gallery-load-label-size-desktop);
  --tc-type-gallery-load-label-weight: var(--tc-type-gallery-load-label-weight-desktop);
  --tc-type-gallery-load-label-line: var(--tc-type-gallery-load-label-line-desktop);
  --tc-type-gallery-load-all-size: var(--tc-type-gallery-load-all-size-desktop);
  --tc-type-gallery-load-all-weight: var(--tc-type-gallery-load-all-weight-desktop);
  --tc-type-gallery-empty-button-size: var(--tc-type-gallery-empty-button-size-desktop);
  --tc-type-gallery-empty-button-weight: var(--tc-type-gallery-empty-button-weight-desktop);
  --tc-type-gallery-load-hint-size: var(--tc-type-gallery-load-hint-size-desktop);
  --tc-type-gallery-load-hint-weight: var(--tc-type-gallery-load-hint-weight-desktop);
  --tc-type-gallery-load-hint-line: var(--tc-type-gallery-load-hint-line-desktop);
  --tc-type-gallery-message-size: var(--tc-type-gallery-message-size-desktop);
  --tc-type-gallery-empty-title-size: var(--tc-type-gallery-empty-title-size-desktop);
  --tc-type-gallery-empty-title-weight: var(--tc-type-gallery-empty-title-weight-desktop);
  --tc-type-gallery-empty-title-line: var(--tc-type-gallery-empty-title-line-desktop);
  --tc-type-gallery-empty-copy-size: var(--tc-type-gallery-empty-copy-size-desktop);
  --tc-type-gallery-empty-copy-weight: var(--tc-type-gallery-empty-copy-weight-desktop);
  --tc-type-gallery-empty-copy-line: var(--tc-type-gallery-empty-copy-line-desktop);

  /* SEARCH: TYPE_EDITOR_TOKENS */
  --tc-type-editor-style-select-size-desktop: 15px;
  --tc-type-editor-style-select-size-mobile: 14px;
  --tc-type-editor-style-select-weight-desktop: 760;
  --tc-type-editor-style-select-weight-mobile: 720;
  --tc-type-editor-style-select-line-desktop: 1.1;
  --tc-type-editor-style-select-line-mobile: 1.1;
  --tc-type-editor-style-hint-size-desktop: 9.5px;
  --tc-type-editor-style-hint-size-mobile: 9px;
  --tc-type-editor-style-hint-weight-desktop: 760;
  --tc-type-editor-style-hint-weight-mobile: 720;
  --tc-type-editor-style-hint-line-desktop: 1;
  --tc-type-editor-style-hint-line-mobile: 1;
  --tc-type-editor-style-after-size-desktop: 8px;
  --tc-type-editor-style-after-size-mobile: 8px;
  --tc-type-editor-style-after-weight-desktop: 520;
  --tc-type-editor-style-after-weight-mobile: 520;
  --tc-type-editor-style-after-line-desktop: 1;
  --tc-type-editor-style-after-line-mobile: 1;
  --tc-type-editor-style-select-size: var(--tc-type-editor-style-select-size-desktop);
  --tc-type-editor-style-select-weight: var(--tc-type-editor-style-select-weight-desktop);
  --tc-type-editor-style-select-line: var(--tc-type-editor-style-select-line-desktop);
  --tc-type-editor-style-hint-size: var(--tc-type-editor-style-hint-size-desktop);
  --tc-type-editor-style-hint-weight: var(--tc-type-editor-style-hint-weight-desktop);
  --tc-type-editor-style-hint-line: var(--tc-type-editor-style-hint-line-desktop);
  --tc-type-editor-style-after-size: var(--tc-type-editor-style-after-size-desktop);
  --tc-type-editor-style-after-weight: var(--tc-type-editor-style-after-weight-desktop);
  --tc-type-editor-style-after-line: var(--tc-type-editor-style-after-line-desktop);

  /* SEARCH: TYPE_EDITOR_TOKENS */
  --tc-type-editor-action-size-desktop: 11px;
  --tc-type-editor-action-size-mobile: 11px;
  --tc-type-editor-action-weight-desktop: 600;
  --tc-type-editor-action-weight-mobile: 600;
  --tc-type-editor-tab-size-desktop: 8.5px;
  --tc-type-editor-tab-size-mobile: 8px;
  --tc-type-editor-tab-weight-desktop: 500;
  --tc-type-editor-tab-weight-mobile: 500;
  --tc-type-editor-tab-line-desktop: 1.05;
  --tc-type-editor-tab-line-mobile: 1.05;
  --tc-type-editor-timeline-size-desktop: 10px;
  --tc-type-editor-timeline-size-mobile: 9px;
  --tc-type-editor-timeline-weight-desktop: 680;
  --tc-type-editor-timeline-weight-mobile: 660;
  --tc-type-editor-timeline-line-desktop: 1.1;
  --tc-type-editor-timeline-line-mobile: 1.1;

  /* SEARCH: TYPE_FOOTER_TOKENS */
  --tc-type-footer-body-size-desktop: 14px;
  --tc-type-footer-body-size-mobile: 13px;
  --tc-type-footer-body-weight-desktop: 420;
  --tc-type-footer-body-weight-mobile: 420;
  --tc-type-footer-body-line-desktop: 1.5;
  --tc-type-footer-body-line-mobile: 1.45;
  --tc-type-footer-stat-size-desktop: 10.5px;
  --tc-type-footer-stat-size-mobile: 10px;
  --tc-type-footer-stat-weight-desktop: 560;
  --tc-type-footer-stat-weight-mobile: 560;
  --tc-type-footer-stat-line-desktop: 1;
  --tc-type-footer-stat-line-mobile: 1;
  --tc-type-footer-heading-size-desktop: 10px;
  --tc-type-footer-heading-size-mobile: 10px;
  --tc-type-footer-heading-weight-desktop: 700;
  --tc-type-footer-heading-weight-mobile: 700;
  --tc-type-footer-heading-line-desktop: 1;
  --tc-type-footer-heading-line-mobile: 1;
  --tc-type-footer-link-size-desktop: 12px;
  --tc-type-footer-link-size-mobile: 12px;
  --tc-type-footer-link-weight-desktop: 450;
  --tc-type-footer-link-weight-mobile: 450;
  --tc-type-footer-link-line-desktop: 1.3;
  --tc-type-footer-link-line-mobile: 1.3;
  --tc-type-footer-logo-size-desktop: 16px;
  --tc-type-footer-logo-size-mobile: 15px;
  --tc-type-footer-logo-weight-desktop: 720;
  --tc-type-footer-logo-weight-mobile: 700;
  --tc-type-footer-logo-line-desktop: 1;
  --tc-type-footer-logo-line-mobile: 1;
  --tc-type-footer-meta-size-desktop: 11px;
  --tc-type-footer-meta-size-mobile: 10.5px;
  --tc-type-footer-meta-weight-desktop: 430;
  --tc-type-footer-meta-weight-mobile: 430;
  --tc-type-footer-meta-line-desktop: 1.4;
  --tc-type-footer-meta-line-mobile: 1.35;
  --tc-type-editor-action-size: var(--tc-type-editor-action-size-desktop);
  --tc-type-editor-action-weight: var(--tc-type-editor-action-weight-desktop);
  --tc-type-editor-tab-size: var(--tc-type-editor-tab-size-desktop);
  --tc-type-editor-tab-weight: var(--tc-type-editor-tab-weight-desktop);
  --tc-type-editor-tab-line: var(--tc-type-editor-tab-line-desktop);
  --tc-type-editor-timeline-size: var(--tc-type-editor-timeline-size-desktop);
  --tc-type-editor-timeline-weight: var(--tc-type-editor-timeline-weight-desktop);
  --tc-type-editor-timeline-line: var(--tc-type-editor-timeline-line-desktop);
  --tc-type-footer-body-size: var(--tc-type-footer-body-size-desktop);
  --tc-type-footer-body-weight: var(--tc-type-footer-body-weight-desktop);
  --tc-type-footer-body-line: var(--tc-type-footer-body-line-desktop);
  --tc-type-footer-stat-size: var(--tc-type-footer-stat-size-desktop);
  --tc-type-footer-stat-weight: var(--tc-type-footer-stat-weight-desktop);
  --tc-type-footer-stat-line: var(--tc-type-footer-stat-line-desktop);
  --tc-type-footer-heading-size: var(--tc-type-footer-heading-size-desktop);
  --tc-type-footer-heading-weight: var(--tc-type-footer-heading-weight-desktop);
  --tc-type-footer-heading-line: var(--tc-type-footer-heading-line-desktop);
  --tc-type-footer-link-size: var(--tc-type-footer-link-size-desktop);
  --tc-type-footer-link-weight: var(--tc-type-footer-link-weight-desktop);
  --tc-type-footer-link-line: var(--tc-type-footer-link-line-desktop);
  --tc-type-footer-logo-size: var(--tc-type-footer-logo-size-desktop);
  --tc-type-footer-logo-weight: var(--tc-type-footer-logo-weight-desktop);
  --tc-type-footer-logo-line: var(--tc-type-footer-logo-line-desktop);
  --tc-type-footer-meta-size: var(--tc-type-footer-meta-size-desktop);
  --tc-type-footer-meta-weight: var(--tc-type-footer-meta-weight-desktop);
  --tc-type-footer-meta-line: var(--tc-type-footer-meta-line-desktop);

  /* SEARCH: TYPE_EDITOR_TOKENS */
  --tc-type-compact-popup-category-size-desktop: 7.5px;
  --tc-type-compact-popup-category-size-mobile: 7.5px;
  --tc-type-compact-popup-category-weight-desktop: 650;
  --tc-type-compact-popup-category-weight-mobile: 650;
  --tc-type-compact-popup-category-line-desktop: 1;
  --tc-type-compact-popup-category-line-mobile: 1;
  --tc-type-compact-popup-option-size-desktop: 9px;
  --tc-type-compact-popup-option-size-mobile: 9px;
  --tc-type-compact-popup-option-weight-desktop: 560;
  --tc-type-compact-popup-option-weight-mobile: 560;
  --tc-type-compact-popup-option-active-weight-desktop: 600;
  --tc-type-compact-popup-option-active-weight-mobile: 600;
  --tc-type-compact-popup-option-muted-weight-desktop: 560;
  --tc-type-compact-popup-option-muted-weight-mobile: 560;
  --tc-type-compact-popup-option-emphasis-weight-desktop: 700;
  --tc-type-compact-popup-option-emphasis-weight-mobile: 700;
  --tc-type-compact-popup-option-line-desktop: 1.05;
  --tc-type-compact-popup-option-line-mobile: 1.05;
  --tc-type-compact-popup-category-size: var(--tc-type-compact-popup-category-size-desktop);
  --tc-type-compact-popup-category-weight: var(--tc-type-compact-popup-category-weight-desktop);
  --tc-type-compact-popup-category-line: var(--tc-type-compact-popup-category-line-desktop);
  --tc-type-compact-popup-option-size: var(--tc-type-compact-popup-option-size-desktop);
  --tc-type-compact-popup-option-weight: var(--tc-type-compact-popup-option-weight-desktop);
  --tc-type-compact-popup-option-active-weight: var(--tc-type-compact-popup-option-active-weight-desktop);
  --tc-type-compact-popup-option-muted-weight: var(--tc-type-compact-popup-option-muted-weight-desktop);
  --tc-type-compact-popup-option-emphasis-weight: var(--tc-type-compact-popup-option-emphasis-weight-desktop);
  --tc-type-compact-popup-option-line: var(--tc-type-compact-popup-option-line-desktop);

  /* SEARCH: TYPE_EDITOR_TOKENS */
  --tc-type-compact-control-category-size-desktop: var(--tc-type-compact-popup-category-size-desktop);
  --tc-type-compact-control-category-size-mobile: var(--tc-type-compact-popup-category-size-mobile);
  --tc-type-compact-control-category-weight-desktop: var(--tc-type-compact-popup-category-weight-desktop);
  --tc-type-compact-control-category-weight-mobile: var(--tc-type-compact-popup-category-weight-mobile);
  --tc-type-compact-control-category-line-desktop: var(--tc-type-compact-popup-category-line-desktop);
  --tc-type-compact-control-category-line-mobile: var(--tc-type-compact-popup-category-line-mobile);
  --tc-type-compact-control-label-size-desktop: 5.5px;
  --tc-type-compact-control-label-size-mobile: 5.5px;
  --tc-type-compact-control-label-weight-desktop: 600;
  --tc-type-compact-control-label-weight-mobile: 600;
  --tc-type-compact-control-label-line-desktop: 1.05;
  --tc-type-compact-control-label-line-mobile: 1.05;
  --tc-type-compact-control-value-size-desktop: 8px;
  --tc-type-compact-control-value-size-mobile: 8px;
  --tc-type-compact-control-value-weight-desktop: 580;
  --tc-type-compact-control-value-weight-mobile: 580;
  --tc-type-compact-control-category-size: var(--tc-type-compact-control-category-size-desktop);
  --tc-type-compact-control-category-weight: var(--tc-type-compact-control-category-weight-desktop);
  --tc-type-compact-control-category-line: var(--tc-type-compact-control-category-line-desktop);
  --tc-type-compact-control-label-size: var(--tc-type-compact-control-label-size-desktop);
  --tc-type-compact-control-label-weight: var(--tc-type-compact-control-label-weight-desktop);
  --tc-type-compact-control-label-line: var(--tc-type-compact-control-label-line-desktop);
  --tc-type-compact-control-value-size: var(--tc-type-compact-control-value-size-desktop);
  --tc-type-compact-control-value-weight: var(--tc-type-compact-control-value-weight-desktop);

  /* SEARCH: TYPE_EDITOR_TOKENS */
  --tc-type-compact-switch-seg-size-desktop: 7.5px;
  --tc-type-compact-switch-seg-size-mobile: 7.5px;
  --tc-type-compact-switch-seg-weight-desktop: 540;
  --tc-type-compact-switch-seg-weight-mobile: 540;
  --tc-type-compact-switch-seg-active-weight-desktop: 620;
  --tc-type-compact-switch-seg-active-weight-mobile: 620;
  --tc-type-compact-switch-seg-line-desktop: 1;
  --tc-type-compact-switch-seg-line-mobile: 1;
  --tc-type-compact-switch-seg-size: var(--tc-type-compact-switch-seg-size-desktop);
  --tc-type-compact-switch-seg-weight: var(--tc-type-compact-switch-seg-weight-desktop);
  --tc-type-compact-switch-seg-active-weight: var(--tc-type-compact-switch-seg-active-weight-desktop);
  --tc-type-compact-switch-seg-line: var(--tc-type-compact-switch-seg-line-desktop);

  /* SEARCH: TYPE_EDITOR_TOKENS */
  --tc-type-editor-popup-pill-size-desktop: 8px;
  --tc-type-editor-popup-pill-size-mobile: 8px;
  --tc-type-editor-popup-pill-weight-desktop: 560;
  --tc-type-editor-popup-pill-weight-mobile: 560;
  --tc-type-editor-popup-pill-line-desktop: 1;
  --tc-type-editor-popup-pill-line-mobile: 1;
  --tc-type-editor-popup-action-size-desktop: 8px;
  --tc-type-editor-popup-action-size-mobile: 8px;
  --tc-type-editor-popup-action-weight-desktop: 600;
  --tc-type-editor-popup-action-weight-mobile: 600;
  --tc-type-editor-popup-action-line-desktop: 1;
  --tc-type-editor-popup-action-line-mobile: 1;
  --tc-type-editor-popup-slider-label-size-desktop: 8px;
  --tc-type-editor-popup-slider-label-size-mobile: 8px;
  --tc-type-editor-popup-slider-label-weight-desktop: 600;
  --tc-type-editor-popup-slider-label-weight-mobile: 600;
  --tc-type-editor-popup-slider-label-line-desktop: 1.05;
  --tc-type-editor-popup-slider-label-line-mobile: 1.05;
  --tc-type-editor-popup-slider-value-size-desktop: 8px;
  --tc-type-editor-popup-slider-value-size-mobile: 8px;
  --tc-type-editor-popup-slider-value-weight-desktop: 600;
  --tc-type-editor-popup-slider-value-weight-mobile: 600;
  --tc-type-editor-popup-slider-unit-size-desktop: 6px;
  --tc-type-editor-popup-slider-unit-size-mobile: 6px;
  --tc-type-editor-popup-slider-unit-weight-desktop: 580;
  --tc-type-editor-popup-slider-unit-weight-mobile: 580;
  --tc-type-editor-popup-pill-size: var(--tc-type-editor-popup-pill-size-desktop);
  --tc-type-editor-popup-pill-weight: var(--tc-type-editor-popup-pill-weight-desktop);
  --tc-type-editor-popup-pill-line: var(--tc-type-editor-popup-pill-line-desktop);
  --tc-type-editor-popup-action-size: var(--tc-type-editor-popup-action-size-desktop);
  --tc-type-editor-popup-action-weight: var(--tc-type-editor-popup-action-weight-desktop);
  --tc-type-editor-popup-action-line: var(--tc-type-editor-popup-action-line-desktop);
  --tc-type-editor-popup-slider-label-size: var(--tc-type-editor-popup-slider-label-size-desktop);
  --tc-type-editor-popup-slider-label-weight: var(--tc-type-editor-popup-slider-label-weight-desktop);
  --tc-type-editor-popup-slider-label-line: var(--tc-type-editor-popup-slider-label-line-desktop);
  --tc-type-editor-popup-slider-value-size: var(--tc-type-editor-popup-slider-value-size-desktop);
  --tc-type-editor-popup-slider-value-weight: var(--tc-type-editor-popup-slider-value-weight-desktop);
  --tc-type-editor-popup-slider-unit-size: var(--tc-type-editor-popup-slider-unit-size-desktop);
  --tc-type-editor-popup-slider-unit-weight: var(--tc-type-editor-popup-slider-unit-weight-desktop);

  /* SEARCH: TYPE_PRICING_BADGE_TOKENS */
  --tc-layout-pricing-badge-height: var(--tc-icon-size-2xl);
  --tc-layout-pricing-badge-height-compact: var(--tc-field-height-2xs);
  --tc-layout-pricing-badge-height-short: var(--tc-icon-size-lg);
  --tc-layout-pricing-badge-padding-x: var(--tc-space-4);
  --tc-layout-pricing-badge-padding-x-compact: var(--tc-space-2-5);
  --tc-layout-pricing-badge-padding-x-short: var(--tc-space-2-5);
}

/* SEARCH: TYPE_MOBILE_OVERRIDE_TOKENS
   Mobile type scale: compact widths, plus touch-primary devices up to tablet
   size. Desktop-sized screens always keep the desktop type scale. */
@media (max-width: 680px), (max-width: 900px) and (hover: none) and (pointer: coarse) {
  :root {
    --tc-font-size-page: var(--tc-type-root-size-mobile);
    --tc-font-size-page-compact: var(--tc-type-root-size-mobile);
    --tc-font-size-page-mobile: var(--tc-type-root-size-mobile);
    --tc-line-height-ui: var(--tc-type-ui-line-mobile);
    --tc-font-size-xs: var(--tc-type-font-xs-mobile);
    --tc-font-size-sm: var(--tc-type-font-sm-mobile);
    --tc-font-size-md: var(--tc-type-font-md-mobile);
    --tc-font-size-lg: var(--tc-type-font-lg-mobile);
    --tc-font-size-xl: var(--tc-type-font-xl-mobile);
    --tc-type-weight-regular: var(--tc-type-weight-regular-mobile);
    --tc-type-weight-medium: var(--tc-type-weight-medium-mobile);
    --tc-type-weight-semibold: var(--tc-type-weight-semibold-mobile);
    --tc-type-weight-bold: var(--tc-type-weight-bold-mobile);
    --tc-font-weight-regular: var(--tc-type-weight-regular);
    --tc-font-weight-medium: var(--tc-type-weight-medium);
    --tc-font-weight-semibold: var(--tc-type-weight-semibold);
    --tc-font-weight-bold: var(--tc-type-weight-bold);
    --tc-type-body-size: var(--tc-type-body-size-mobile);
    --tc-type-body-line: var(--tc-type-body-line-mobile);
    --tc-type-field-label-size: var(--tc-type-field-label-size-mobile);
    --tc-type-field-label-weight: var(--tc-type-field-label-weight-mobile);
    --tc-type-field-label-line: var(--tc-type-field-label-line-mobile);
    --tc-type-segmented-control-size: var(--tc-type-segmented-control-size-mobile);
    --tc-type-segmented-control-weight: var(--tc-type-segmented-control-weight-mobile);
    --tc-type-segmented-control-line: var(--tc-type-segmented-control-line-mobile);
    --tc-type-size-pill-xs: var(--tc-type-size-pill-xs-mobile);
    --tc-type-size-pill-sm: var(--tc-type-size-pill-sm-mobile);
    --tc-type-size-pill-md: var(--tc-type-size-pill-md-mobile);
    --tc-type-size-pill-lg: var(--tc-type-size-pill-lg-mobile);
    --tc-type-line-pill: var(--tc-type-line-pill-mobile);
    --tc-type-weight-pill: var(--tc-type-weight-pill-mobile);
    --tc-type-pricing-badge-size: var(--tc-type-pricing-badge-size-mobile);
    --tc-type-pricing-badge-size-compact: var(--tc-type-pricing-badge-size-compact-mobile);
    --tc-type-pricing-badge-size-short: var(--tc-type-pricing-badge-size-short-mobile);
    --tc-type-gallery-filter-pill-size: var(--tc-type-gallery-filter-pill-size-mobile);
    --tc-type-gallery-filter-pill-weight: var(--tc-type-gallery-filter-pill-weight-mobile);
    --tc-type-gallery-filter-pill-line: var(--tc-type-gallery-filter-pill-line-mobile);
    --tc-type-gallery-filter-count-size: var(--tc-type-gallery-filter-count-size-mobile);
    --tc-type-gallery-filter-count-weight: var(--tc-type-gallery-filter-count-weight-mobile);
    --tc-type-gallery-filter-count-line: var(--tc-type-gallery-filter-count-line-mobile);
    --tc-type-gallery-search-input-size: var(--tc-type-gallery-search-input-size-mobile);
    --tc-type-gallery-search-input-weight: var(--tc-type-gallery-search-input-weight-mobile);
    --tc-type-gallery-search-count-size: var(--tc-type-gallery-search-count-size-mobile);
    --tc-type-gallery-search-count-weight: var(--tc-type-gallery-search-count-weight-mobile);
    --tc-type-popup-gallery-filter-pill-size: var(--tc-type-popup-gallery-filter-pill-size-mobile);
    --tc-type-popup-gallery-filter-pill-weight: var(--tc-type-popup-gallery-filter-pill-weight-mobile);
    --tc-type-popup-gallery-filter-pill-line: var(--tc-type-popup-gallery-filter-pill-line-mobile);
    --tc-type-popup-gallery-filter-count-size: var(--tc-type-popup-gallery-filter-count-size-mobile);
    --tc-type-popup-gallery-filter-count-weight: var(--tc-type-popup-gallery-filter-count-weight-mobile);
    --tc-type-popup-gallery-filter-count-line: var(--tc-type-popup-gallery-filter-count-line-mobile);
    --tc-type-popup-gallery-search-input-size: var(--tc-type-popup-gallery-search-input-size-mobile);
    --tc-type-popup-gallery-search-input-weight: var(--tc-type-popup-gallery-search-input-weight-mobile);
    --tc-type-popup-gallery-close-size: var(--tc-type-popup-gallery-close-size-mobile);
    --tc-type-popup-gallery-close-weight: var(--tc-type-popup-gallery-close-weight-mobile);
    --tc-type-popup-gallery-close-line: var(--tc-type-popup-gallery-close-line-mobile);
    --tc-type-popup-gallery-card-label-size: var(--tc-type-popup-gallery-card-label-size-mobile);
    --tc-type-popup-gallery-card-label-weight: var(--tc-type-popup-gallery-card-label-weight-mobile);
    --tc-type-popup-gallery-card-label-line: var(--tc-type-popup-gallery-card-label-line-mobile);
    --tc-type-gallery-card-title-size: var(--tc-type-gallery-card-title-size-mobile);
    --tc-type-gallery-card-title-weight: var(--tc-type-gallery-card-title-weight-mobile);
    --tc-type-gallery-card-title-line: var(--tc-type-gallery-card-title-line-mobile);
    --tc-type-gallery-card-action-size: var(--tc-type-gallery-card-action-size-mobile);
    --tc-type-gallery-card-action-weight: var(--tc-type-gallery-card-action-weight-mobile);
    --tc-type-gallery-card-action-line: var(--tc-type-gallery-card-action-line-mobile);
    --tc-type-gallery-live-editor-size: var(--tc-type-gallery-live-editor-size-mobile);
    --tc-type-gallery-live-editor-weight: var(--tc-type-gallery-live-editor-weight-mobile);
    --tc-type-gallery-live-editor-line: var(--tc-type-gallery-live-editor-line-mobile);
    --tc-type-select-button-size: var(--tc-type-select-button-size-mobile);
    --tc-type-select-button-weight: var(--tc-type-select-button-weight-mobile);
    --tc-type-select-button-line: var(--tc-type-select-button-line-mobile);
    --tc-type-select-search-input-size: var(--tc-type-select-search-input-size-mobile);
    --tc-type-select-search-input-weight: var(--tc-type-select-search-input-weight-mobile);
    --tc-type-select-empty-size: var(--tc-type-select-empty-size-mobile);
    --tc-type-select-empty-title-size: var(--tc-type-select-empty-title-size-mobile);
    --tc-type-select-empty-title-weight: var(--tc-type-select-empty-title-weight-mobile);
    --tc-type-select-empty-title-line: var(--tc-type-select-empty-title-line-mobile);
    --tc-type-select-empty-copy-size: var(--tc-type-select-empty-copy-size-mobile);
    --tc-type-select-empty-copy-weight: var(--tc-type-select-empty-copy-weight-mobile);
    --tc-type-select-empty-copy-line: var(--tc-type-select-empty-copy-line-mobile);
    --tc-type-select-empty-action-size: var(--tc-type-select-empty-action-size-mobile);
    --tc-type-select-empty-action-weight: var(--tc-type-select-empty-action-weight-mobile);
    --tc-type-select-empty-action-line: var(--tc-type-select-empty-action-line-mobile);
    --tc-type-select-option-size: var(--tc-type-select-option-size-mobile);
    --tc-type-select-option-weight: var(--tc-type-select-option-weight-mobile);
    --tc-type-select-option-line: var(--tc-type-select-option-line-mobile);
    --tc-type-select-gallery-label-size: var(--tc-type-select-gallery-label-size-mobile);
    --tc-type-notice-panel-size: var(--tc-type-notice-panel-size-mobile);
    --tc-type-notice-panel-weight: var(--tc-type-notice-panel-weight-mobile);
    --tc-type-notice-panel-line: var(--tc-type-notice-panel-line-mobile);
    --tc-type-modal-body-size: var(--tc-type-modal-body-size-mobile);
    --tc-type-modal-body-weight: var(--tc-type-modal-body-weight-mobile);
    --tc-type-modal-body-line: var(--tc-type-modal-body-line-mobile);
    --tc-type-modal-lead-size: var(--tc-type-modal-lead-size-mobile);
    --tc-type-modal-lead-weight: var(--tc-type-modal-lead-weight-mobile);
    --tc-type-modal-lead-line: var(--tc-type-modal-lead-line-mobile);
    --tc-type-eyebrow-size: var(--tc-type-eyebrow-size-mobile);
    --tc-type-eyebrow-weight: var(--tc-type-eyebrow-weight-mobile);
    --tc-type-eyebrow-line: var(--tc-type-eyebrow-line-mobile);
    --tc-type-button-primary-size: var(--tc-type-button-primary-size-mobile);
    --tc-type-button-primary-weight: var(--tc-type-button-primary-weight-mobile);
    --tc-type-gallery-load-label-size: var(--tc-type-gallery-load-label-size-mobile);
    --tc-type-gallery-load-label-weight: var(--tc-type-gallery-load-label-weight-mobile);
    --tc-type-gallery-load-label-line: var(--tc-type-gallery-load-label-line-mobile);
    --tc-type-gallery-load-all-size: var(--tc-type-gallery-load-all-size-mobile);
    --tc-type-gallery-load-all-weight: var(--tc-type-gallery-load-all-weight-mobile);
    --tc-type-gallery-empty-button-size: var(--tc-type-gallery-empty-button-size-mobile);
    --tc-type-gallery-empty-button-weight: var(--tc-type-gallery-empty-button-weight-mobile);
    --tc-type-gallery-load-hint-size: var(--tc-type-gallery-load-hint-size-mobile);
    --tc-type-gallery-load-hint-weight: var(--tc-type-gallery-load-hint-weight-mobile);
    --tc-type-gallery-load-hint-line: var(--tc-type-gallery-load-hint-line-mobile);
    --tc-type-gallery-message-size: var(--tc-type-gallery-message-size-mobile);
    --tc-type-gallery-empty-title-size: var(--tc-type-gallery-empty-title-size-mobile);
    --tc-type-gallery-empty-title-weight: var(--tc-type-gallery-empty-title-weight-mobile);
    --tc-type-gallery-empty-title-line: var(--tc-type-gallery-empty-title-line-mobile);
    --tc-type-gallery-empty-copy-size: var(--tc-type-gallery-empty-copy-size-mobile);
    --tc-type-gallery-empty-copy-weight: var(--tc-type-gallery-empty-copy-weight-mobile);
    --tc-type-gallery-empty-copy-line: var(--tc-type-gallery-empty-copy-line-mobile);
    --tc-type-editor-style-select-size: var(--tc-type-editor-style-select-size-mobile);
    --tc-type-editor-style-select-weight: var(--tc-type-editor-style-select-weight-mobile);
    --tc-type-editor-style-select-line: var(--tc-type-editor-style-select-line-mobile);
    --tc-type-editor-style-hint-size: var(--tc-type-editor-style-hint-size-mobile);
    --tc-type-editor-style-hint-weight: var(--tc-type-editor-style-hint-weight-mobile);
    --tc-type-editor-style-hint-line: var(--tc-type-editor-style-hint-line-mobile);
    --tc-type-editor-style-after-size: var(--tc-type-editor-style-after-size-mobile);
    --tc-type-editor-style-after-weight: var(--tc-type-editor-style-after-weight-mobile);
    --tc-type-editor-style-after-line: var(--tc-type-editor-style-after-line-mobile);
    --tc-type-editor-action-size: var(--tc-type-editor-action-size-mobile);
    --tc-type-editor-action-weight: var(--tc-type-editor-action-weight-mobile);
    --tc-type-editor-tab-size: var(--tc-type-editor-tab-size-mobile);
    --tc-type-editor-tab-weight: var(--tc-type-editor-tab-weight-mobile);
    --tc-type-editor-tab-line: var(--tc-type-editor-tab-line-mobile);
    --tc-type-editor-timeline-size: var(--tc-type-editor-timeline-size-mobile);
    --tc-type-editor-timeline-weight: var(--tc-type-editor-timeline-weight-mobile);
    --tc-type-editor-timeline-line: var(--tc-type-editor-timeline-line-mobile);
    --tc-type-footer-body-size: var(--tc-type-footer-body-size-mobile);
    --tc-type-footer-body-weight: var(--tc-type-footer-body-weight-mobile);
    --tc-type-footer-body-line: var(--tc-type-footer-body-line-mobile);
    --tc-type-footer-stat-size: var(--tc-type-footer-stat-size-mobile);
    --tc-type-footer-stat-weight: var(--tc-type-footer-stat-weight-mobile);
    --tc-type-footer-stat-line: var(--tc-type-footer-stat-line-mobile);
    --tc-type-footer-heading-size: var(--tc-type-footer-heading-size-mobile);
    --tc-type-footer-heading-weight: var(--tc-type-footer-heading-weight-mobile);
    --tc-type-footer-heading-line: var(--tc-type-footer-heading-line-mobile);
    --tc-type-footer-link-size: var(--tc-type-footer-link-size-mobile);
    --tc-type-footer-link-weight: var(--tc-type-footer-link-weight-mobile);
    --tc-type-footer-link-line: var(--tc-type-footer-link-line-mobile);
    --tc-type-footer-logo-size: var(--tc-type-footer-logo-size-mobile);
    --tc-type-footer-logo-weight: var(--tc-type-footer-logo-weight-mobile);
    --tc-type-footer-logo-line: var(--tc-type-footer-logo-line-mobile);
    --tc-type-footer-meta-size: var(--tc-type-footer-meta-size-mobile);
    --tc-type-footer-meta-weight: var(--tc-type-footer-meta-weight-mobile);
    --tc-type-footer-meta-line: var(--tc-type-footer-meta-line-mobile);
    --tc-type-compact-popup-category-size: var(--tc-type-compact-popup-category-size-mobile);
    --tc-type-compact-popup-category-weight: var(--tc-type-compact-popup-category-weight-mobile);
    --tc-type-compact-popup-category-line: var(--tc-type-compact-popup-category-line-mobile);
    --tc-type-compact-popup-option-size: var(--tc-type-compact-popup-option-size-mobile);
    --tc-type-compact-popup-option-weight: var(--tc-type-compact-popup-option-weight-mobile);
    --tc-type-compact-popup-option-active-weight: var(--tc-type-compact-popup-option-active-weight-mobile);
    --tc-type-compact-popup-option-muted-weight: var(--tc-type-compact-popup-option-muted-weight-mobile);
    --tc-type-compact-popup-option-emphasis-weight: var(--tc-type-compact-popup-option-emphasis-weight-mobile);
    --tc-type-compact-popup-option-line: var(--tc-type-compact-popup-option-line-mobile);
    --tc-type-compact-control-category-size: var(--tc-type-compact-control-category-size-mobile);
    --tc-type-compact-control-category-weight: var(--tc-type-compact-control-category-weight-mobile);
    --tc-type-compact-control-category-line: var(--tc-type-compact-control-category-line-mobile);
    --tc-type-compact-control-label-size: var(--tc-type-compact-control-label-size-mobile);
    --tc-type-compact-control-label-weight: var(--tc-type-compact-control-label-weight-mobile);
    --tc-type-compact-control-label-line: var(--tc-type-compact-control-label-line-mobile);
    --tc-type-compact-control-value-size: var(--tc-type-compact-control-value-size-mobile);
    --tc-type-compact-control-value-weight: var(--tc-type-compact-control-value-weight-mobile);
    --tc-type-compact-switch-seg-size: var(--tc-type-compact-switch-seg-size-mobile);
    --tc-type-compact-switch-seg-weight: var(--tc-type-compact-switch-seg-weight-mobile);
    --tc-type-compact-switch-seg-active-weight: var(--tc-type-compact-switch-seg-active-weight-mobile);
    --tc-type-compact-switch-seg-line: var(--tc-type-compact-switch-seg-line-mobile);
    --tc-type-editor-popup-pill-size: var(--tc-type-editor-popup-pill-size-mobile);
    --tc-type-editor-popup-pill-weight: var(--tc-type-editor-popup-pill-weight-mobile);
    --tc-type-editor-popup-pill-line: var(--tc-type-editor-popup-pill-line-mobile);
    --tc-type-editor-popup-action-size: var(--tc-type-editor-popup-action-size-mobile);
    --tc-type-editor-popup-action-weight: var(--tc-type-editor-popup-action-weight-mobile);
    --tc-type-editor-popup-action-line: var(--tc-type-editor-popup-action-line-mobile);
    --tc-type-editor-popup-slider-label-size: var(--tc-type-editor-popup-slider-label-size-mobile);
    --tc-type-editor-popup-slider-label-weight: var(--tc-type-editor-popup-slider-label-weight-mobile);
    --tc-type-editor-popup-slider-label-line: var(--tc-type-editor-popup-slider-label-line-mobile);
    --tc-type-editor-popup-slider-value-size: var(--tc-type-editor-popup-slider-value-size-mobile);
    --tc-type-editor-popup-slider-value-weight: var(--tc-type-editor-popup-slider-value-weight-mobile);
    --tc-type-editor-popup-slider-unit-size: var(--tc-type-editor-popup-slider-unit-size-mobile);
    --tc-type-editor-popup-slider-unit-weight: var(--tc-type-editor-popup-slider-unit-weight-mobile);
  }
}
}

/* source: shared/styles/base/document.css */
@layer base {
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  min-width: 0;
}

html {
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  tab-size: 4;
  font-family: var(--tc-font-body);
  font-size: var(--tc-font-size-page);
  line-height: var(--tc-line-height-ui);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 1100px) {
  html {
    font-size: var(--tc-font-size-page-compact);
  }
}

@media (max-width: 680px) {
  html {
    font-size: var(--tc-font-size-page-mobile);
  }
}

body {
  max-width: 100%;
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--tc-bg-page);
  color: var(--tc-text-main);
  font-family: var(--tc-font-body);
  font-size: var(--tc-type-body-size);
  line-height: var(--tc-type-body-line);
  touch-action: manipulation;
}

a,
button,
input,
textarea,
select,
label,
[role="button"],
[tabindex] {
  touch-action: manipulation;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

iframe,
dialog {
  border: 0;
}

button,
input,
textarea,
select {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  text-align: inherit;
  text-transform: none;
}

button,
label,
select,
summary,
[role="button"] {
  -webkit-tap-highlight-color: var(--tc-color-transparent);
}

button:not(:disabled),
select:not(:disabled),
summary,
[role="button"] {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: default;
}

input,
textarea {
  border-radius: var(--tc-radius-none);
}

textarea {
  resize: none;
}

input[type="search"] {
  appearance: textfield;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

@media (max-width: 680px), (hover: none) and (pointer: coarse) {
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  input[type="date"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  select,
  textarea {
    font-size: 16px;
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
  }

  a,
  button,
  img,
  svg,
  canvas,
  .hero-landing,
  .preview-card,
  .glyph-item {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: 0;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: var(--tc-focus-outline);
  outline-offset: var(--tc-space-1);
  box-shadow: none;
}

a {
  color: inherit;
  text-decoration: none;
}

@-moz-document url-prefix() {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--tc-scrollbar-thumb) var(--tc-color-transparent);
  }
}

*::-webkit-scrollbar {
  width: var(--tc-scrollbar-size);
  height: var(--tc-scrollbar-size);
}

*::-webkit-scrollbar-track {
  margin-block: var(--tc-space-5);
  margin-inline: var(--tc-space-5);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-color-transparent);
}

*::-webkit-scrollbar-thumb {
  min-height: var(--tc-scrollbar-thumb-min);
  border: var(--tc-scrollbar-thumb-inset) solid var(--tc-color-transparent);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-scrollbar-thumb);
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--tc-scrollbar-thumb-hover);
  background-clip: content-box;
}

*::-webkit-scrollbar-corner {
  background: var(--tc-color-transparent);
}

.app-rotate-lock {
  position: fixed;
  inset: 0;
  z-index: var(--tc-rotate-lock-z);
  display: none;
  place-items: center;
  padding: var(--tc-rotate-lock-content-padding);
  background: var(--tc-rotate-lock-bg);
  pointer-events: none;
}

.app-rotate-lock__content {
  display: grid;
  place-items: center;
  gap: var(--tc-rotate-lock-content-gap);
  width: min(var(--tc-rotate-lock-content-max-width), 100%);
  padding: var(--tc-rotate-lock-content-padding);
  border-radius: var(--tc-rotate-lock-content-radius);
  font-family: var(--tc-rotate-lock-font-family);
  line-height: var(--tc-rotate-lock-line-height);
  text-align: center;
}

.app-rotate-lock__icon {
  width: var(--tc-rotate-lock-icon-size);
  height: var(--tc-rotate-lock-icon-size);
  color: var(--tc-rotate-lock-icon-color);
}

.app-rotate-lock p {
  margin: 0;
}

.app-rotate-lock__text {
  display: grid;
  gap: var(--tc-rotate-lock-text-gap);
}

.app-rotate-lock__title {
  color: var(--tc-rotate-lock-title-color);
  font-size: var(--tc-rotate-lock-title-size);
  font-weight: var(--tc-rotate-lock-title-weight);
  line-height: var(--tc-rotate-lock-line-height);
}

.app-rotate-lock__detail {
  color: var(--tc-rotate-lock-detail-color);
  font-size: var(--tc-rotate-lock-detail-size);
  font-weight: var(--tc-rotate-lock-detail-weight);
  line-height: var(--tc-rotate-lock-line-height);
}

*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:increment {
  display: none;
  width: 0;
  height: 0;
  background: none;
}

@media (hover: none) and (pointer: coarse) {
  html,
  body {
    overflow-x: clip;
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html,
  body {
    overflow: hidden;
    touch-action: none;
  }

  body > :not(.app-rotate-lock) {
    pointer-events: none;
    visibility: hidden;
  }

  .app-rotate-lock {
    display: grid;
    pointer-events: auto;
    visibility: visible;
  }
}
}

/* source: shared/styles/layout/primitives.css */
/* Motion Typograph shared layout primitives.
   Own reusable structure only: no colors, shadows, decorative borders, or component visuals. */

@layer layout {
  :where(
    .tc-container,
    .tc-section,
    .tc-box,
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-center,
    .tc-between,
    .tc-stack,
    .tc-cluster,
    .tc-grid,
    .tc-card-grid,
    .tc-split,
    .tc-sidebar-layout,
    .tc-toolbar-row,
    .tc-control-row,
    .tc-scroll-area,
    .tc-modal-layout,
    .tc-panel-layout
  ) {
    box-sizing: border-box;
    min-width: 0;
  }

  :where(.tc-container) {
    width: min(calc(100% - (var(--tc-container-pad-x) * 2)), var(--tc-container-max));
    max-width: var(--tc-container-max);
    margin-inline: auto;
  }

  :where(.tc-container[data-width="narrow"]) {
    --tc-container-max: 48rem;
  }

  :where(.tc-container[data-width="wide"]) {
    --tc-container-max: 100rem;
  }

  :where(.tc-section) {
    position: relative;
    padding-block: var(--tc-section-pad-y);
    scroll-margin-block-start: var(--tc-section-scroll-margin, var(--tc-space-12));
  }

  :where(.tc-section[data-density="compact"]) {
    padding-block: var(--tc-section-pad-y-compact);
  }

  :where(.tc-box) {
    max-width: 100%;
    min-height: 0;
    padding: var(--tc-box-padding, var(--tc-box-pad-md));
    border-radius: var(--tc-box-radius, var(--tc-radius-none));
    overflow: var(--tc-box-overflow, visible);
  }

  :where(.tc-box[data-density="compact"]) {
    --tc-box-padding: var(--tc-box-pad-sm);
  }

  :where(.tc-box[data-pad="none"]) { --tc-box-padding: var(--tc-box-pad-none); }
  :where(.tc-box[data-pad="xs"]) { --tc-box-padding: var(--tc-box-pad-xs); }
  :where(.tc-box[data-pad="sm"]) { --tc-box-padding: var(--tc-box-pad-sm); }
  :where(.tc-box[data-pad="md"]) { --tc-box-padding: var(--tc-box-pad-md); }
  :where(.tc-box[data-pad="lg"]) { --tc-box-padding: var(--tc-box-pad-lg); }
  :where(.tc-box[data-pad="xl"]) { --tc-box-padding: var(--tc-box-pad-xl); }

  :where(.tc-box[data-radius="none"]) { --tc-box-radius: var(--tc-radius-none); }
  :where(.tc-box[data-radius="sm"]) { --tc-box-radius: var(--tc-radius-sm); }
  :where(.tc-box[data-radius="md"]) { --tc-box-radius: var(--tc-radius-md); }
  :where(.tc-box[data-radius="lg"]) { --tc-box-radius: var(--tc-radius-lg); }
  :where(.tc-box[data-radius="xl"]) { --tc-box-radius: var(--tc-radius-xl); }
  :where(.tc-box[data-radius="pill"]) { --tc-box-radius: var(--tc-radius-pill); }

  :where(.tc-box[data-overflow="visible"]) { --tc-box-overflow: visible; }
  :where(.tc-box[data-overflow="hidden"]) { --tc-box-overflow: hidden; }
  :where(.tc-box[data-overflow="auto"]) { --tc-box-overflow: auto; }

  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-center,
    .tc-between,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  ) {
    --tc-flex-direction: row;
    --tc-flex-gap: var(--tc-layout-gap-sm);
    --tc-flex-align: stretch;
    --tc-flex-justify: flex-start;
    --tc-flex-wrap: nowrap;
    display: flex;
    flex-direction: var(--tc-flex-direction);
    flex-wrap: var(--tc-flex-wrap);
    align-items: var(--tc-flex-align);
    justify-content: var(--tc-flex-justify);
    gap: var(--tc-flex-gap);
  }

  :where(.tc-row) {
    --tc-flex-align: center;
  }

  :where(.tc-column) {
    --tc-flex-direction: column;
  }

  :where(.tc-center) {
    --tc-flex-align: center;
    --tc-flex-justify: center;
  }

  :where(.tc-between) {
    --tc-flex-align: center;
    --tc-flex-justify: space-between;
    --tc-flex-wrap: wrap;
  }

  :where(.tc-stack) {
    --tc-flex-direction: column;
    --tc-flex-gap: var(--tc-stack-gap, var(--tc-layout-gap-sm));
  }

  :where(.tc-cluster) {
    --tc-flex-align: center;
    --tc-flex-wrap: wrap;
    --tc-flex-gap: var(--tc-cluster-gap, var(--tc-layout-gap-xs));
  }

  :where(.tc-toolbar-row) {
    --tc-flex-align: center;
    --tc-flex-wrap: wrap;
    --tc-flex-gap: var(--tc-toolbar-row-gap, var(--tc-layout-gap-xs));
  }

  :where(.tc-control-row) {
    --tc-flex-align: center;
    --tc-flex-wrap: wrap;
    --tc-flex-gap: var(--tc-control-row-gap, var(--tc-toolbar-row-gap, var(--tc-layout-gap-xs)));
  }

  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-center,
    .tc-between,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-gap="none"] { --tc-flex-gap: var(--tc-layout-gap-none); }
  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-center,
    .tc-between,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-gap="xs"] { --tc-flex-gap: var(--tc-layout-gap-xs); }
  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-center,
    .tc-between,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-gap="sm"] { --tc-flex-gap: var(--tc-layout-gap-sm); }
  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-center,
    .tc-between,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-gap="md"] { --tc-flex-gap: var(--tc-layout-gap-md); }
  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-center,
    .tc-between,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-gap="lg"] { --tc-flex-gap: var(--tc-layout-gap-lg); }
  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-center,
    .tc-between,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-gap="xl"] { --tc-flex-gap: var(--tc-layout-gap-xl); }

  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-align="start"] { --tc-flex-align: flex-start; }
  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-align="center"] { --tc-flex-align: center; }
  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-align="end"] { --tc-flex-align: flex-end; }
  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-align="stretch"] { --tc-flex-align: stretch; }

  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-justify="start"] { --tc-flex-justify: flex-start; }
  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-justify="center"] { --tc-flex-justify: center; }
  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-justify="end"] { --tc-flex-justify: flex-end; }
  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-justify="between"] { --tc-flex-justify: space-between; }

  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-wrap="true"] { --tc-flex-wrap: wrap; }
  :where(
    .tc-flex,
    .tc-row,
    .tc-column,
    .tc-stack,
    .tc-cluster,
    .tc-toolbar-row,
    .tc-control-row
  )[data-wrap="false"] { --tc-flex-wrap: nowrap; }

  :where(.tc-grid) {
    display: grid;
    grid-template-columns: repeat(var(--tc-grid-columns, 1), minmax(0, 1fr));
    gap: var(--tc-grid-gap, var(--tc-layout-gap-md));
  }

  :where(.tc-card-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tc-card-grid-min)), 1fr));
    gap: var(--tc-card-grid-gap, var(--tc-layout-gap-md));
  }

  :where(.tc-grid, .tc-card-grid)[data-gap="none"] {
    --tc-grid-gap: var(--tc-layout-gap-none);
    --tc-card-grid-gap: var(--tc-layout-gap-none);
  }

  :where(.tc-grid, .tc-card-grid)[data-gap="xs"] {
    --tc-grid-gap: var(--tc-layout-gap-xs);
    --tc-card-grid-gap: var(--tc-layout-gap-xs);
  }

  :where(.tc-grid, .tc-card-grid)[data-gap="sm"] {
    --tc-grid-gap: var(--tc-layout-gap-sm);
    --tc-card-grid-gap: var(--tc-layout-gap-sm);
  }

  :where(.tc-grid, .tc-card-grid)[data-gap="md"] {
    --tc-grid-gap: var(--tc-layout-gap-md);
    --tc-card-grid-gap: var(--tc-layout-gap-md);
  }

  :where(.tc-grid, .tc-card-grid)[data-gap="lg"] {
    --tc-grid-gap: var(--tc-layout-gap-lg);
    --tc-card-grid-gap: var(--tc-layout-gap-lg);
  }

  :where(.tc-grid, .tc-card-grid)[data-gap="xl"] {
    --tc-grid-gap: var(--tc-layout-gap-xl);
    --tc-card-grid-gap: var(--tc-layout-gap-xl);
  }

  :where(.tc-split) {
    display: grid;
    grid-template-columns: repeat(2, minmax(min(100%, var(--tc-split-min)), 1fr));
    gap: var(--tc-split-gap, var(--tc-layout-gap-lg));
    align-items: var(--tc-split-align, center);
  }

  :where(.tc-sidebar-layout) {
    display: grid;
    grid-template-columns: minmax(0, var(--tc-sidebar-width)) minmax(0, 1fr);
    gap: var(--tc-sidebar-gap);
    align-items: start;
  }

  :where(.tc-scroll-area) {
    min-height: 0;
    max-height: var(--tc-scroll-area-max-height);
    overflow: auto;
    overscroll-behavior: contain;
  }

  :where(.tc-modal-layout) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--tc-modal-layout-gap);
    max-height: var(--tc-modal-max-height);
    min-height: 0;
  }

  :where(.tc-panel-layout) {
    display: grid;
    align-content: start;
    gap: var(--tc-panel-layout-gap);
    min-height: 0;
  }

  /* Existing-markup layout bridges.
     These visual-neutral aliases let the current product selectors consume the
     same box/flex/grid structure while templates are migrated additively.
     Keep these below the explicit primitives and delete each alias after the
     matching HTML/JS receives the tc-* class. Feature-layer CSS still wins. */
  :where(
    .toolbar,
    .search,
    .legal-topbar,
    .editor-modal-actions,
    .toolbar-row,
    .editor-payment-strip__track,
    .editor-payment-strip__group,
    .check-field,
    .modal-style-combined-strip
  ) {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    align-items: center;
  }

  :where(.pricing-price) {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    align-items: baseline;
  }

  :where(
    .card-footer,
    .pricing-card-topline,
    .pricing-one-time-export,
    .footer-bottom,
    .faq-item summary,
    .site-nav,
    .editor-access-modal__header,
    .editor-access-modal__footer,
    .editor-full-access-modal__header,
    .editor-full-access-modal__footer
  ) {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  :where(
    .card-actions,
    .site-nav__links,
    .pricing-one-time-export__action
  ) {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  :where(
    .gallery-empty__actions,
    .legal-nav,
    .legal-actions,
    .footer-stats,
    .footer-bottom p,
    .control-cluster,
    .editor-modal-actions,
    .editor-access-modal__footer,
    .export-cancel-confirm__actions,
    .compact-popup-actions
  ) {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  :where(.gallery-empty__actions, .export-cancel-confirm__actions) {
    justify-content: center;
  }

  :where(.footer-bottom p, .legal-actions) {
    justify-content: flex-end;
  }

  :where(.legal-nav) {
    justify-content: center;
  }

  :where(
    .legal-content,
    .pricing-shell,
    .pricing-content,
    .faq-list,
    .panel-stack,
    .preview-shell,
    .editor-modal-frame
  ) {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  :where(.legal-rules, .pricing-options, .pricing-testimonials, .footer-links) {
    box-sizing: border-box;
    min-width: 0;
    display: grid;
  }

  :where(.legal-rules, .pricing-options, .pricing-testimonials) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tc-card-grid-min)), 1fr));
  }

  :where(.compact-switch__segment, .compact-popup-slider) {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :where(.compact-popup-slider) {
    justify-content: space-between;
  }

  :where(.editor-modal-body) {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
  }

  @media (max-width: 760px) {
    :where(.tc-container) {
      width: min(calc(100% - (var(--tc-space-5) * 2)), var(--tc-container-max));
    }

    :where(.tc-section) {
      padding-block: var(--tc-section-pad-y-compact);
    }

    :where(.tc-split),
    :where(.tc-sidebar-layout) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

/* source: shared/styles/components/primitives.css */
/*
  Motion Typograph shared UI kit bridge.

  Additive, low-specificity component API. Existing product classes remain the
  visual source of truth. Standalone .tc-* classes work as primitives; mixed
  product classes opt in with data-tc-component to avoid surprise restyles.
*/

@layer components {
  :where(.tc-btn, .tc-icon-btn, .tc-toolbar-btn):where(:not([class*=" "]), [data-tc-component]) {
    -webkit-tap-highlight-color: var(--tc-color-transparent);
    align-items: center;
    appearance: none;
    border: 1px solid var(--tc-button-border);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: var(--tc-control-gap);
    justify-content: center;
    line-height: 1;
    min-height: var(--tc-control-height-md);
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-user-select: none;
    transition:
      background-color var(--tc-transition-fast),
      border-color var(--tc-transition-fast),
      color var(--tc-transition-fast),
      opacity var(--tc-transition-fast),
      box-shadow var(--tc-transition-fast);
    user-select: none;
  }

  :where(.tc-btn):where(:not([class*=" "]), [data-tc-component]) {
    padding: 0 var(--tc-control-padding-x-md);
    border-radius: var(--tc-button-radius);
    background: var(--tc-button-bg);
    color: var(--tc-button-text);
  }

  :where(.tc-btn):where(:not([class*=" "]), [data-tc-component])[data-size="xs"] {
    min-height: var(--tc-control-height-xs);
    padding-inline: var(--tc-control-padding-x-sm);
    font-size: var(--tc-font-size-xs);
  }

  :where(.tc-btn):where(:not([class*=" "]), [data-tc-component])[data-size="sm"] {
    min-height: var(--tc-control-height-sm);
    padding-inline: var(--tc-control-padding-x-sm);
    font-size: var(--tc-font-size-sm);
  }

  :where(.tc-btn):where(:not([class*=" "]), [data-tc-component])[data-size="touch"] {
    min-height: var(--tc-control-height-touch);
    padding-inline: var(--tc-control-padding-x-lg);
  }

  :where(.tc-btn):where(:not([class*=" "]), [data-tc-component])[data-variant="primary"] {
    border-color: var(--tc-accent-main);
    background: var(--tc-accent-main);
    color: var(--tc-text-on-accent);
  }

  :where(.tc-btn):where(:not([class*=" "]), [data-tc-component])[data-variant="secondary"] {
    background: var(--tc-button-bg);
    color: var(--tc-button-text);
  }

  :where(.tc-btn):where(:not([class*=" "]), [data-tc-component])[data-variant="ghost"] {
    border-color: var(--tc-border-transparent);
    background: var(--tc-color-transparent);
    color: var(--tc-control-text-muted);
  }

  :where(.tc-btn):where(:not([class*=" "]), [data-tc-component])[data-variant="danger"] {
    border-color: var(--tc-export-danger-border-soft);
    background: var(--tc-export-danger-bg);
    color: var(--tc-export-danger-main);
  }

  :where(.tc-icon-btn, .tc-toolbar-btn):where(:not([class*=" "]), [data-tc-component]) {
    aspect-ratio: 1;
    min-width: var(--tc-icon-button-size-md);
    min-height: var(--tc-icon-button-size-md);
    padding: 0;
    border-radius: var(--tc-icon-button-radius);
    background: var(--tc-control-bg);
    color: var(--tc-control-text);
  }

  :where(.tc-icon-btn, .tc-toolbar-btn):where(:not([class*=" "]), [data-tc-component])[data-size="sm"] {
    min-width: var(--tc-icon-button-size-sm);
    min-height: var(--tc-icon-button-size-sm);
  }

  :where(.tc-icon-btn, .tc-toolbar-btn):where(:not([class*=" "]), [data-tc-component])[data-size="lg"] {
    min-width: var(--tc-icon-button-size-lg);
    min-height: var(--tc-icon-button-size-lg);
  }

  :where(.tc-btn, .tc-icon-btn, .tc-toolbar-btn):where(:not([class*=" "]), [data-tc-component]):where(:hover, :focus-visible) {
    border-color: var(--tc-button-border-strong);
    background: var(--tc-button-bg-hover);
    color: var(--tc-button-text-hover);
    outline: 0;
  }

  :where(.tc-btn, .tc-icon-btn, .tc-toolbar-btn):where(:not([class*=" "]), [data-tc-component]):active {
    background: var(--tc-button-bg-active);
  }

  :where(.tc-btn, .tc-icon-btn, .tc-toolbar-btn):where(:not([class*=" "]), [data-tc-component]):where([aria-pressed="true"], [aria-expanded="true"], [aria-selected="true"], [data-state="selected"], .is-active) {
    border-color: var(--tc-control-border-active);
    background: var(--tc-control-bg-active);
    color: var(--tc-control-text-hover);
  }

  :where(.tc-btn, .tc-icon-btn, .tc-toolbar-btn):where(:not([class*=" "]), [data-tc-component]):focus-visible {
    box-shadow: var(--tc-focus-ring);
  }

  :where(.tc-btn, .tc-icon-btn, .tc-toolbar-btn):where(:not([class*=" "]), [data-tc-component]):where(:disabled, [aria-disabled="true"], [data-state="disabled"]) {
    cursor: not-allowed;
    opacity: var(--tc-opacity-disabled);
  }

  :where(.tc-card, .tc-style-card, .tc-panel, .tc-glass-panel, .tc-modal-panel, .tc-bottom-sheet, .tc-popover):where(:not([class*=" "]), [data-tc-component]) {
    border: 1px solid var(--tc-border-soft);
    box-sizing: border-box;
    color: var(--tc-text-main);
  }

  :where(.tc-card, .tc-style-card):where(:not([class*=" "]), [data-tc-component]) {
    border-color: var(--tc-card-border);
    border-radius: var(--tc-card-radius);
    background: var(--tc-card-bg);
    box-shadow: var(--tc-card-shadow);
  }

  :where(.tc-card, .tc-style-card):where(:not([class*=" "]), [data-tc-component])[data-interactive="true"] {
    cursor: pointer;
    transition:
      background-color var(--tc-transition-fast),
      border-color var(--tc-transition-fast),
      box-shadow var(--tc-transition-fast),
      transform var(--tc-transition-fast);
  }

  :where(.tc-card, .tc-style-card):where(:not([class*=" "]), [data-tc-component])[data-interactive="true"]:where(:hover, :focus-within) {
    border-color: var(--tc-card-border-hover);
    background: var(--tc-card-bg-hover);
  }

  :where(.tc-card, .tc-style-card):where(:not([class*=" "]), [data-tc-component]):where([aria-selected="true"], [data-state="selected"]) {
    border-color: var(--tc-accent-border-strong);
    background: var(--tc-accent-bg);
  }

  :where(.tc-panel, .tc-glass-panel):where(:not([class*=" "]), [data-tc-component]) {
    border-color: var(--tc-panel-border);
    border-radius: var(--tc-panel-radius);
    background: var(--tc-panel-bg);
    box-shadow: var(--tc-panel-shadow);
  }

  :where(.tc-glass-panel, .tc-panel[data-tone="glass"]):where(:not([class*=" "]), [data-tc-component]) {
    background: var(--tc-surface-glass);
    -webkit-backdrop-filter: var(--tc-glass-filter);
    backdrop-filter: var(--tc-glass-filter);
  }

  :where(.tc-panel):where(:not([class*=" "]), [data-tc-component])[data-density="compact"],
  :where(.tc-card):where(:not([class*=" "]), [data-tc-component])[data-density="compact"] {
    border-radius: var(--tc-radius-lg);
  }

  :where(.tc-modal):where(:not([class*=" "]), [data-tc-component]) {
    color: var(--tc-text-main);
  }

  :where(.tc-modal-panel):where(:not([class*=" "]), [data-tc-component]) {
    border-color: var(--tc-panel-border);
    border-radius: var(--tc-modal-surface-radius);
    background: var(--tc-modal-panel);
    box-shadow: var(--tc-modal-shadow);
  }

  :where(.tc-bottom-sheet):where(:not([class*=" "]), [data-tc-component]) {
    border-color: var(--tc-panel-border);
    border-radius: var(--tc-radius-xl) var(--tc-radius-xl) 0 0;
    background: var(--tc-modal-panel);
    box-shadow: var(--tc-shadow-panel);
  }

  :where(.tc-popover):where(:not([class*=" "]), [data-tc-component]) {
    border-color: var(--tc-popup-border);
    border-radius: var(--tc-radius-lg);
    background: var(--tc-popup-bg);
    box-shadow: var(--tc-popup-shadow);
  }

  :where(.tc-input, .tc-search, .tc-select-button, .tc-select-trigger):where(:not([class*=" "]), [data-tc-component]) {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--tc-control-height-md);
    border: 1px solid var(--tc-input-border);
    border-radius: var(--tc-field-control-radius);
    background: var(--tc-input-bg);
    color: var(--tc-control-text);
    font: inherit;
    outline: 0;
    padding: var(--tc-control-padding-y-md) var(--tc-control-padding-x-md);
    transition:
      background-color var(--tc-transition-fast),
      border-color var(--tc-transition-fast),
      color var(--tc-transition-fast),
      box-shadow var(--tc-transition-fast);
  }

  :where(.tc-input, .tc-search, .tc-select-button, .tc-select-trigger):where(:not([class*=" "]), [data-tc-component]):where(:hover, :focus, :focus-visible, [aria-expanded="true"]) {
    border-color: var(--tc-control-border-hover);
    background: var(--tc-input-bg-hover);
    color: var(--tc-control-text-hover);
  }

  :where(.tc-input, .tc-search, .tc-select-button, .tc-select-trigger):where(:not([class*=" "]), [data-tc-component]):focus-visible {
    box-shadow: var(--tc-focus-ring);
  }

  :where(.tc-select, .tc-tabs, .tc-toolbar, .tc-control-group):where(:not([class*=" "]), [data-tc-component]) {
    align-items: center;
    display: flex;
    gap: var(--tc-control-gap);
    min-width: 0;
  }

  :where(.tc-tabs):where(:not([class*=" "]), [data-tc-component]) {
    gap: var(--tc-tab-list-gap);
  }

  :where(.tc-chip, .tc-badge):where(:not([class*=" "]), [data-tc-component]) {
    align-items: center;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-pill);
    box-sizing: border-box;
    display: inline-flex;
    font-size: var(--tc-font-size-xs);
    gap: var(--tc-space-2);
    line-height: 1;
    min-height: var(--tc-control-height-xs);
    padding: 0 var(--tc-space-3);
  }

  :where(.tc-chip):where(:not([class*=" "]), [data-tc-component]) {
    background: var(--tc-control-bg);
    color: var(--tc-control-text-muted);
  }

  :where(.tc-chip):where(:not([class*=" "]), [data-tc-component]):where(:hover, [aria-pressed="true"], [data-state="selected"]) {
    border-color: var(--tc-control-border-active);
    background: var(--tc-control-bg-active);
    color: var(--tc-control-text-hover);
  }

  :where(.tc-badge):where(:not([class*=" "]), [data-tc-component]) {
    background: var(--tc-accent-bg);
    color: var(--tc-accent-text);
  }

  :where(.tc-scrub):where(:not([class*=" "]), [data-tc-component]) {
    min-height: var(--tc-control-height-scrub);
    border-radius: var(--tc-scrub-radius);
    background: var(--tc-editor-scrub-bg);
    color: var(--tc-control-text);
  }

  :where(.tc-empty-state, .tc-loading-state, .tc-notice):where(:not([class*=" "]), [data-tc-component]) {
    color: var(--tc-text-muted);
  }

  :where(.tc-notice):where(:not([class*=" "]), [data-tc-component]) {
    border-radius: var(--tc-notice-radius);
  }



  /* Existing-markup visual bridges.
     These move repeated card/panel surface visuals into the component layer without requiring template changes yet. */
  :where(.faq-item, .pricing-testimonial, .legal-card, .legal-topbar, .legal-panel) {
    box-sizing: border-box;
    border: 1px solid var(--tc-card-border);
    border-radius: var(--tc-card-radius);
    background: var(--tc-card-bg);
  }

  :where(.legal-topbar, .legal-panel) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--tc-legal-panel-shadow);
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.tc-btn, .tc-icon-btn, .tc-toolbar-btn, .tc-card, .tc-style-card):where(:not([class*=" "]), [data-tc-component]) {
      transition-duration: 0.001ms;
    }
  }
}

/* source: shared/styles/components/framework.css */
@layer components {
  /* Canonical engine-backed animation thumbnails, shared by landing cards and
     editor select galleries. Gallery-specific sizing stays with each surface. */
  .mt-animation-preset-preview {
    position: relative;
  }

  .mt-animation-preset-preview__viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .mt-animation-preset-preview__viewport[data-master-text-animator-preview-fit-ready="true"] {
    opacity: 1;
  }

  .mt-animation-preset-preview__stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 320px;
    height: 180px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    perspective: 1000px;
    transform: translate(-50%, -50%) scale(var(--mt-animation-preset-preview-scale, 0));
    transform-origin: center;
    contain: layout style;
  }

  .mt-animation-preset-preview__text {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: max-content;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    place-self: center;
    color: var(--tc-text-main);
    font-family: var(--tc-font-display, var(--tc-font-body));
    font-size: var(--mt-animation-preset-preview-font-size, 96px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    text-shadow: none;
    white-space: nowrap;
    transform: scale3d(
      var(--mt-animation-preset-preview-text-scale, 1),
      var(--mt-animation-preset-preview-text-scale, 1),
      var(--mt-animation-preset-preview-text-scale, 1)
    );
    transform-origin: center;
    transform-style: preserve-3d;
  }

  .mt-animation-preset-preview__unit {
    display: inline-block;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
  }

  .tc-btn,
  :where(nav, nav *, button, [role="button"], .tc-icon-btn, .tc-tab-btn, .tc-segmented-control label, .tc-segmented-control label > span) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  :where(nav, button, [role="button"], .tc-btn, .tc-icon-btn, .tc-tab-btn, .tc-segmented-control label) :where(*) {
    -webkit-user-select: none;
    user-select: none;
  }

  .tc-btn,
  .tc-icon-btn,
  .tc-tab-btn {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tc-control-gap);
    border: 1px solid var(--tc-color-transparent);
    font: inherit;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
  }

  .tc-btn {
    min-height: var(--tc-control-height-md);
    padding: 0 var(--tc-control-padding-x-sm);
    border-radius: var(--tc-button-radius);
    background: var(--tc-control-bg);
    color: var(--tc-control-text);
  }

  .tc-btn:hover,
  .tc-btn:focus-visible {
    border-color: var(--tc-control-border-hover);
    background: var(--tc-control-bg-hover);
    color: var(--tc-control-text-hover);
    outline: 0;
  }

  .tc-btn:disabled,
  .tc-btn[aria-disabled="true"] {
    color: var(--tc-text-disabled);
    cursor: default;
    opacity: var(--tc-state-disabled-opacity);
  }

  .tc-btn--primary {
    border-color: var(--tc-accent-main);
    background: var(--tc-accent-main);
    color: var(--tc-text-on-accent);
  }

  .tc-btn--ghost {
    border-color: var(--tc-color-transparent);
    background: var(--tc-color-transparent);
    color: var(--tc-control-text-muted);
  }

  .tc-icon-btn,
  .tc-tab-btn {
    width: var(--tc-control-height-md);
    min-width: var(--tc-control-height-md);
    height: var(--tc-control-height-md);
    min-height: var(--tc-control-height-md);
    padding: 0;
    border-radius: var(--tc-icon-button-radius);
    background: var(--tc-control-bg);
    color: var(--tc-control-text);
  }

  .tc-icon-btn svg,
  .tc-tab-btn svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .tc-icon-btn--history {
    width: 30px;
    min-width: 30px;
    height: var(--tc-field-height-md);
    min-height: var(--tc-field-height-md);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--tc-icon-button-radius-sm);
    background: var(--tc-color-transparent);
    color: var(--tc-control-text-muted);
    box-shadow: none;
  }

  .tc-icon-btn--history svg {
    width: 17px;
    height: var(--tc-field-height-2xs);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tc-icon-btn--history:hover,
  .tc-icon-btn--history:focus-visible {
    background: var(--tc-control-bg-hover);
    color: var(--tc-control-text-hover);
    outline: 0;
  }

  .tc-icon-btn--checker-mode[aria-pressed="true"] {
    background: var(--tc-checker-bright-base);
    color: var(--tc-checker-bright-ink);
    box-shadow: inset 0 0 0 1px var(--tc-checker-bright-mark);
  }

  .tc-icon-btn--history:disabled,
  .tc-icon-btn--history[aria-disabled="true"] {
    background: var(--tc-color-transparent);
    color: var(--tc-text-disabled);
    cursor: default;
    opacity: var(--tc-state-disabled-opacity);
  }

  .tc-icon-btn--modal-close {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    display: grid;
    place-items: center;
    border-color: var(--tc-color-transparent);
    border-radius: var(--tc-icon-button-radius);
    background: var(--tc-surface-control);
    color: var(--tc-control-text-muted);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .tc-icon-btn--modal-close svg {
    width: var(--tc-icon-size-xl);
    height: var(--tc-icon-size-xl);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tc-icon-btn--modal-close svg path {
    fill: none;
    stroke: currentColor;
  }

  .tc-icon-btn--modal-close:hover,
  .tc-icon-btn--modal-close:focus-visible {
    border-color: var(--tc-color-transparent);
    background: var(--tc-surface-control-hover);
    color: var(--tc-control-text-hover);
    outline: 0;
    box-shadow: none;
  }

  .tc-icon-btn--modal-close:active {
    border-color: var(--tc-color-transparent);
    background: var(--tc-surface-control-active);
    color: var(--tc-control-text-hover);
  }

  .tc-icon-btn--modal-close:disabled,
  .tc-icon-btn--modal-close[aria-disabled="true"] {
    color: var(--tc-text-disabled);
    cursor: default;
    opacity: var(--tc-state-disabled-opacity);
  }

  .tc-icon-btn--editor-action {
    width: auto;
    min-width: 0;
    min-height: var(--tc-control-height-scrub);
    height: var(--tc-control-height-scrub);
    padding: var(--tc-editor-action-padding-y) var(--tc-editor-action-padding-x);
    border-color: var(--tc-control-border);
    border-radius: var(--tc-icon-button-radius);
    background: var(--tc-control-bg);
    color: var(--tc-control-text);
    font-size: var(--tc-type-editor-action-size);
    font-weight: var(--tc-type-editor-action-weight);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
  }

  .tc-icon-btn--editor-action:hover,
  .tc-icon-btn--editor-action:focus-visible {
    border-color: var(--tc-control-border-hover);
    background: var(--tc-control-bg-hover);
    color: var(--tc-control-text-hover);
    outline: 0;
    box-shadow: none;
  }

  .tc-icon-btn--editor-action.is-active,
  .tc-icon-btn--editor-action[aria-pressed="true"] {
    border-color: var(--tc-control-border-active);
    background: var(--tc-control-bg-active);
    color: var(--tc-control-text-hover);
    box-shadow: inset 0 0 0 1px var(--tc-control-border-active);
  }

  .tc-icon-btn--editor-action:disabled,
  .tc-icon-btn--editor-action[aria-disabled="true"] {
    color: var(--tc-text-disabled);
    cursor: default;
    opacity: var(--tc-state-disabled-opacity);
  }

  .tc-icon-btn--preview-action {
    --tc-preview-action-opacity: 0.78;
    --tc-preview-action-pulse-opacity: 1;
    --tc-preview-action-pulse-duration: 2000ms;
    width: var(--tc-preview-action-size, 32px);
    min-width: var(--tc-preview-action-size, 32px);
    max-width: var(--tc-preview-action-size, 32px);
    height: var(--tc-preview-action-size, 32px);
    min-height: var(--tc-preview-action-size, 32px);
    max-height: var(--tc-preview-action-size, 32px);
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--tc-icon-button-radius-sm);
    background: var(--tc-editor-ui-control-bg, var(--tc-surface-control));
    color: var(--tc-control-text, var(--tc-text-muted));
    box-shadow: none;
    opacity: var(--tc-preview-action-opacity);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .tc-icon-btn--preview-action:hover,
  .tc-icon-btn--preview-action:focus-visible {
    border-color: var(--tc-color-transparent);
    background: var(--tc-surface-control, var(--tc-surface-raised));
    color: var(--tc-control-text-hover, var(--tc-text-strong));
    outline: 0;
    box-shadow: none;
    opacity: var(--tc-preview-action-pulse-opacity);
  }

  body[data-preview-checker-mode="bright"] .tc-icon-btn--preview-action {
    background: var(--tc-checker-bright-control-bg);
    color: var(--tc-checker-bright-ink);
    opacity: var(--tc-preview-action-pulse-opacity);
  }

  body[data-preview-checker-mode="bright"] .tc-icon-btn--preview-action:hover,
  body[data-preview-checker-mode="bright"] .tc-icon-btn--preview-action:focus-visible {
    background: var(--tc-checker-bright-control-bg-hover);
    color: var(--tc-checker-bright-ink);
  }

  .tc-icon-btn--preview-action .control-icon {
    width: var(--tc-icon-size-xl);
    height: var(--tc-icon-size-xl);
    display: block;
  }

  body[data-editor-compact-controls="on"] .editor-controls .tc-compact-control,
  .editor-controls.compact-controls .tc-compact-control,
  body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact,
  .editor-controls.compact-controls .tc-icon-btn--compact {
    position: relative;
    width: var(--compact-control-width);
    min-width: var(--compact-control-width);
    max-width: var(--compact-control-width);
    height: var(--compact-control-height);
    min-height: var(--compact-control-height);
    max-height: var(--compact-control-height);
    aspect-ratio: auto;
    display: inline-grid;
    place-items: center;
    padding: 0;
    overflow: visible;
    border-color: var(--tc-color-transparent);
    border-radius: var(--tc-compact-control-radius);
    background: var(--tc-editor-ui-control-bg);
    color: var(--tc-control-text);
    outline: 0;
    box-shadow: none;
  }

  body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact:hover,
  body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact:focus-visible,
  .editor-controls.compact-controls .tc-icon-btn--compact:hover,
  .editor-controls.compact-controls .tc-icon-btn--compact:focus-visible {
    border-color: var(--tc-color-transparent);
    background: var(--tc-surface-control);
    color: var(--tc-control-text-hover);
    outline: 0;
    box-shadow: none;
  }

  body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact.is-active,
  body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact[aria-pressed="true"],
  body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact[aria-expanded="true"],
  .editor-controls.compact-controls .tc-icon-btn--compact.is-active,
  .editor-controls.compact-controls .tc-icon-btn--compact[aria-pressed="true"],
  .editor-controls.compact-controls .tc-icon-btn--compact[aria-expanded="true"] {
    border-color: var(--tc-color-transparent);
    background: var(--tc-editor-ui-control-bg-click);
    color: var(--tc-editor-ui-control-text-click);
    box-shadow: none;
  }

  /* Playback controls are one shared themed affordance. Idle Play is a clear
     app-colored button with a white glyph; active Stop keeps its lifecycle
     treatment below. */
  body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact[data-editor-action="play-animation"]:not(.is-active):not([aria-pressed="true"]),
  .editor-controls.compact-controls .tc-icon-btn--compact[data-editor-action="play-animation"]:not(.is-active):not([aria-pressed="true"]),
  body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact[data-editor-action="play-animation"]:not(.is-active):not([aria-pressed="true"]):hover,
  body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact[data-editor-action="play-animation"]:not(.is-active):not([aria-pressed="true"]):focus-visible,
  .editor-controls.compact-controls .tc-icon-btn--compact[data-editor-action="play-animation"]:not(.is-active):not([aria-pressed="true"]):hover,
  .editor-controls.compact-controls .tc-icon-btn--compact[data-editor-action="play-animation"]:not(.is-active):not([aria-pressed="true"]):focus-visible {
    border-color: var(--tc-app-accent, var(--tc-accent-main));
    background: var(--tc-app-accent, var(--tc-accent-main));
    color: var(--tc-white);
  }

  body.is-animation-playing[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact[data-editor-action="play-animation"],
  body.is-animation-playing .editor-controls.compact-controls .tc-icon-btn--compact[data-editor-action="play-animation"],
  body.is-animation-playing[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact[data-editor-action="test-jitter"],
  body.is-animation-playing .editor-controls.compact-controls .tc-icon-btn--compact[data-editor-action="test-jitter"] {
    border-color: var(--tc-color-transparent);
    background: var(--tc-surface-control);
    color: var(--tc-control-text-hover);
    box-shadow: none;
  }

  body[data-editor-compact-controls="on"] .editor-controls .tc-compact-pill,
  .editor-controls.compact-controls .tc-compact-pill {
    position: absolute;
    top: var(--tc-compact-pill-offset);
    right: var(--tc-compact-pill-offset);
    z-index: 3;
    box-sizing: border-box;
    max-width: var(--tc-compact-pill-max-width);
    height: var(--tc-field-height-2xs);
    min-height: var(--tc-field-height-2xs);
    display: block;
    padding: 0 var(--tc-compact-pill-padding-x);
    overflow: hidden;
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-compact-pill-radius);
    background:
      linear-gradient(180deg, var(--tc-border-soft), var(--tc-surface-highlight-low)),
      var(--tc-surface-raised);
    color: var(--tc-text-muted);
    font-size: var(--compact-font-pill);
    font-weight: var(--tc-type-editor-popup-pill-weight);
    line-height: var(--tc-field-height-2xs);
    text-align: center;
    text-overflow: ellipsis;
    text-transform: lowercase;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: inset 0 1px 0 var(--tc-surface-highlight-low);
  }

  body[data-editor-compact-controls="on"] .editor-controls [data-compact-pill-case="preserve"] > .tc-compact-pill,
  .editor-controls.compact-controls [data-compact-pill-case="preserve"] > .tc-compact-pill {
    text-transform: none;
  }

  body[data-editor-compact-controls="on"] .editor-controls [data-compact-label]::after,
  .editor-controls.compact-controls [data-compact-label]::after {
    content: attr(data-compact-label);
    position: absolute;
    top: calc(100% + var(--tc-compact-label-offset));
    left: 50%;
    width: max-content;
    max-width: max(var(--tc-compact-label-min-width), calc(var(--compact-control-width) + var(--tc-compact-label-extra-width)));
    transform: translateX(-50%);
    color: var(--tc-text-muted);
    font-size: var(--compact-font-label);
    font-weight: var(--tc-type-compact-control-label-weight);
    line-height: var(--tc-type-compact-control-label-line);
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
  }

  @media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .tc-icon-btn--modal-close {
      width: 2.375rem;
      min-width: 2.375rem;
      height: 2.375rem;
      min-height: 2.375rem;
      border: 0;
      background: var(--tc-color-transparent);
      color: var(--tc-text-muted);
    }

    .tc-icon-btn--modal-close:hover,
    .tc-icon-btn--modal-close:focus-visible {
      background: var(--tc-color-transparent);
      color: var(--tc-text-medium);
      outline: 0;
    }

    .tc-icon-btn--modal-close svg {
      width: 1.125rem;
      height: 1.125rem;
      stroke-width: 2.15;
    }
  }

  /* The editor may focus Close when its modal opens. Keep that initial/focus
     state neutral; red is a pointer-hover warning only. */
  .editor-close-button:hover {
    color: var(--tc-export-danger-main);
  }

  .tc-tab-btn {
    flex-direction: column;
    gap: var(--tc-tab-button-gap);
  }

  .tc-tab-btn--editor {
    --tc-tab-btn-size: clamp(2.75rem, 8.75vw, 3.25rem);
    position: relative;
    flex: 0 0 var(--tc-tab-btn-size);
    width: var(--tc-tab-btn-size);
    min-width: var(--tc-tab-btn-size);
    max-width: var(--tc-tab-btn-size);
    height: var(--tc-tab-btn-size);
    min-height: var(--tc-tab-btn-size);
    display: inline-grid;
    grid-template-rows: 1rem max-content;
    place-items: center;
    align-content: center;
    gap: var(--tc-tab-button-editor-gap);
    padding: var(--tc-tab-button-editor-padding-y) var(--tc-tab-button-editor-padding-x);
    border-color: var(--tc-color-transparent);
    border-radius: var(--tc-tab-button-radius);
    background: var(--tc-color-transparent);
    color: var(--tc-control-text-muted);
    font-size: var(--tc-type-editor-tab-size);
    font-weight: var(--tc-type-editor-tab-weight);
    white-space: nowrap;
    box-shadow: none;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  }

  .tc-tab-btn--editor:hover,
  .tc-tab-btn--editor:focus-visible {
    border-color: var(--tc-control-border-hover);
    background: var(--tc-control-bg-hover);
    color: var(--tc-control-text-hover);
  }

  .tc-tab-btn--editor.is-active,
  .tc-tab-btn--editor[aria-selected="true"] {
    border-color: var(--tc-control-border-active);
    background: var(--tc-control-bg-active);
    color: var(--tc-control-text-hover);
    box-shadow: inset 0 0 0 1px var(--tc-control-border-active);
  }

  .tc-tab-btn--editor[aria-disabled="true"],
  .tc-tab-btn--editor:disabled {
    color: var(--tc-text-disabled);
    cursor: default;
    opacity: var(--tc-state-disabled-opacity);
  }

  .tc-tab-btn--editor:disabled:hover,
  .tc-tab-btn--editor:disabled:focus-visible {
    border-color: var(--tc-color-transparent);
    background: var(--tc-color-transparent);
  }

  .tc-tab-btn__icon {
    width: var(--tc-icon-size-md);
    height: var(--tc-icon-size-md);
    display: inline-grid;
    place-items: center;
    color: currentColor;
  }

  .tc-tab-btn__label {
    min-width: 0;
    max-width: 100%;
    display: block;
    overflow: hidden;
    color: currentColor;
    font-size: var(--tc-type-editor-tab-size);
    font-weight: var(--tc-type-editor-tab-weight);
    line-height: var(--tc-type-editor-tab-line);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tc-tab-btn--editor .tc-tab-btn__label {
    opacity: 0.88;
  }

  .tc-tab-btn--editor .tc-tab-btn__icon svg [stroke] {
    stroke-width: 1.65;
  }

  .tc-tab-btn:hover,
  .tc-tab-btn:focus-visible,
  .tc-tab-btn.is-active,
  .tc-tab-btn[aria-selected="true"] {
    background: var(--tc-control-bg-hover);
    color: var(--tc-control-text-hover);
    outline: 0;
  }

  .tc-tab-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tc-tab-list-gap);
  }

  .tc-tab-list--editor {
    width: auto;
    gap: var(--tc-tab-list-editor-gap);
    padding: 0;
    border: 0;
    border-radius: var(--tc-radius-none);
    background: var(--tc-color-transparent);
    box-shadow: none;
  }

  .tc-toolbar {
    display: flex;
    align-items: center;
    gap: var(--tc-toolbar-gap);
  }

  .tc-divider {
    flex: 0 0 1px;
    width: 1px;
    height: var(--tc-field-height-md);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-border-soft);
    pointer-events: none;
  }

  .tc-divider--editor-tabs {
    height: 32px;
    align-self: center;
    opacity: 0.82;
  }

  body[data-editor-compact-controls="on"] .tc-tab-list--editor,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-list--editor {
    height: 100%;
    width: auto;
    margin-inline: auto;
    gap: var(--tc-tab-list-gap);
  }

  body[data-editor-compact-controls="on"] .tc-divider--editor-tabs,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-divider--editor-tabs {
    height: var(--tc-field-height-md);
    margin-inline: 1px;
    background: var(--tc-surface-fill);
    opacity: 0.84;
  }

  body[data-editor-compact-controls="on"] .tc-tab-btn--editor,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor {
    --tc-tab-btn-size: var(--editor-tabs-height, 48px);
    grid-template-rows: 15px max-content;
    gap: var(--tc-tab-button-gap);
    padding: var(--tc-tab-button-compact-padding);
    border-color: var(--tc-color-transparent);
    border-radius: var(--tc-tab-button-radius-compact);
    background: var(--compact-glass-surface, var(--tc-editor-ui-control-bg));
    color: var(--tc-text-subtle);
    font-size: var(--compact-font-tab, 0.365rem);
    transition: none;
  }

  body[data-editor-compact-controls="on"] .tc-tab-btn--editor:hover,
  body[data-editor-compact-controls="on"] .tc-tab-btn--editor:focus-visible,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor:hover,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor:focus-visible {
    border-color: var(--tc-color-transparent);
    background:
      linear-gradient(180deg, var(--tc-state-hover-bg), var(--tc-surface-highlight-low)),
      var(--compact-glass-surface, var(--tc-editor-ui-control-bg-hover));
    color: var(--tc-text-main);
    box-shadow: none;
  }

  body[data-editor-compact-controls="on"] .tc-tab-btn--editor.is-active,
  body[data-editor-compact-controls="on"] .tc-tab-btn--editor[aria-selected="true"],
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor.is-active,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor[aria-selected="true"] {
    border-color: var(--tc-color-transparent);
    background:
      linear-gradient(180deg, var(--tc-surface-highlight-active), var(--tc-surface-highlight-low)),
      var(--compact-glass-surface, var(--tc-editor-ui-control-bg-click));
    color: var(--tc-text-strong);
    box-shadow: var(--compact-glass-shadow, none);
  }

  body[data-editor-compact-controls="on"] .tc-tab-btn--editor .tc-tab-btn__icon,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor .tc-tab-btn__icon {
    opacity: var(--tc-editor-ui-icon-idle-opacity, 0.74);
    transition: opacity 120ms var(--tc-ease-standard), color 120ms var(--tc-ease-standard);
  }

  body[data-editor-compact-controls="on"] .tc-tab-btn--editor .tc-tab-btn__label,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor .tc-tab-btn__label {
    font-size: calc(var(--compact-font-tab, 0.365rem) * 1.08);
  }

  body[data-editor-compact-controls="on"] .tc-tab-btn--editor:not(.is-active) .tc-tab-btn__label,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor:not(.is-active) .tc-tab-btn__label {
    opacity: 0.74;
  }

  body[data-editor-compact-controls="on"] .tc-tab-btn--editor:hover .tc-tab-btn__icon,
  body[data-editor-compact-controls="on"] .tc-tab-btn--editor:focus-visible .tc-tab-btn__icon,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor:hover .tc-tab-btn__icon,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor:focus-visible .tc-tab-btn__icon {
    opacity: var(--tc-editor-ui-icon-hover-opacity, 0.9);
  }

  body[data-editor-compact-controls="on"] .tc-tab-btn--editor.is-active .tc-tab-btn__icon,
  body[data-editor-compact-controls="on"] .tc-tab-btn--editor.is-active .tc-tab-btn__label,
  body[data-editor-compact-controls="on"] .tc-tab-btn--editor[aria-selected="true"] .tc-tab-btn__icon,
  body[data-editor-compact-controls="on"] .tc-tab-btn--editor[aria-selected="true"] .tc-tab-btn__label,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor.is-active .tc-tab-btn__icon,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor.is-active .tc-tab-btn__label,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor[aria-selected="true"] .tc-tab-btn__icon,
  body[data-editor-compact-controls="on"] .editor-dialog .tc-tab-btn--editor[aria-selected="true"] .tc-tab-btn__label {
    opacity: var(--tc-editor-ui-icon-active-opacity, 1);
  }

  .tc-panel,
  .tc-card,
  .tc-modal-surface {
    box-sizing: border-box;
    border: 1px solid var(--tc-border-soft);
    background: var(--tc-panel-bg);
    color: var(--tc-text-main);
  }

  .tc-panel {
    border-radius: var(--tc-panel-radius);
  }

  .tc-panel.tc-panel--editor-window {
    min-height: 0;
    border-color: var(--tc-border-soft);
    background: var(--tc-color-transparent);
    box-shadow: none;
  }

  body.is-embed .tc-panel.tc-panel--editor-window {
    border-color: var(--tc-color-transparent);
  }

  .tc-panel.tc-panel--editor-header {
    border: 0;
    border-radius: var(--tc-surface-flat-radius);
    background: var(--tc-panel-bg);
    box-shadow: none;
  }

  .tc-panel.tc-panel--editor-preview {
    border-color: var(--tc-card-border);
    background: var(--tc-panel-bg);
    box-shadow: none;
  }

  .tc-panel.tc-panel--control {
    border: 0;
    border-radius: var(--tc-surface-flat-radius);
    background: var(--tc-color-transparent);
    box-shadow: none;
  }

  .tc-panel.tc-panel--pricing-modal {
    background: var(--tc-editor-ui-glass-muted);
  }

  .tc-panel.tc-panel--footer {
    border-color: var(--tc-card-border);
    border-radius: var(--tc-card-radius);
    -webkit-backdrop-filter: var(--tc-card-filter);
    backdrop-filter: var(--tc-card-filter);
  }

  .tc-card {
    border-radius: var(--tc-card-radius);
  }

  .tc-card.tc-card--pricing-option {
    border-color: var(--tc-card-border);
    background: var(--tc-card-bg);
    -webkit-backdrop-filter: var(--tc-card-filter);
    backdrop-filter: var(--tc-card-filter);
    transition: none;
  }

  .tc-card.tc-card--pricing-option:hover,
  .tc-card.tc-card--pricing-option:focus-within,
  .tc-card.tc-card--pricing-option.is-selected {
    border-color: var(--tc-card-border-hover);
    background: var(--tc-card-bg-hover);
    box-shadow: var(--tc-card-shadow);
  }

  .tc-card.tc-card--pricing-option.pricing-option-card--featured {
    border-color: var(--tc-card-border-active);
    background: var(--tc-card-bg-active);
  }

  .tc-panel--pricing-modal .tc-card.tc-card--pricing-option,
  .tc-panel--pricing-modal .tc-card.tc-card--pricing-secondary,
  .tc-panel--pricing-modal .tc-card.tc-card--testimonial {
    border-color: var(--tc-color-transparent);
    background: var(--tc-card-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .tc-panel--pricing-modal .tc-card.tc-card--pricing-option:hover,
  .tc-panel--pricing-modal .tc-card.tc-card--pricing-option:focus-within,
  .tc-panel--pricing-modal .tc-card.tc-card--pricing-option.is-selected,
  .tc-panel--pricing-modal .tc-card.tc-card--pricing-secondary:hover,
  .tc-panel--pricing-modal .tc-card.tc-card--pricing-secondary:focus-within {
    border-color: var(--tc-color-transparent);
    background: var(--tc-card-bg-hover);
  }

  .tc-card.tc-card--pricing-secondary,
  .tc-card.tc-card--testimonial {
    border-color: var(--tc-card-border);
    background: var(--tc-card-bg);
    -webkit-backdrop-filter: var(--tc-card-filter);
    backdrop-filter: var(--tc-card-filter);
  }

  .tc-card.tc-card--pricing-secondary {
    min-height: 96px;
    padding: var(--tc-space-9) var(--tc-space-10);
    overflow: visible;
    isolation: isolate;
    transition: none;
  }

  .tc-card.tc-card--pricing-secondary:hover,
  .tc-card.tc-card--pricing-secondary:focus-within {
    border-color: var(--tc-card-border-hover);
    background: var(--tc-card-bg-hover);
    box-shadow: var(--tc-card-shadow);
  }

  .tc-panel--pricing-modal .tc-card.tc-card--pricing-secondary {
    min-height: 96px;
    padding: var(--tc-space-12) 26px;
  }

  .tc-modal-surface {
    border-radius: var(--tc-modal-surface-radius);
  }

  .tc-modal-surface.tc-modal-surface--editor-modal {
    border: 0;
    border-radius: var(--tc-surface-flat-radius);
    background: var(--tc-color-transparent);
    box-shadow: none;
  }

  .tc-modal-surface.tc-modal-surface--access {
    overflow: hidden;
    border-color: var(--tc-color-transparent);
    border-radius: var(--tc-card-radius);
    background: var(--tc-editor-ui-popup);
    box-shadow: var(--tc-editor-ui-popup-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .tc-modal-surface.tc-modal-surface--full-access {
    overflow: hidden;
    border-color: var(--tc-popup-border, var(--tc-border-default));
    border-radius: var(--tc-card-radius);
    background: var(--tc-popup-bg, var(--tc-editor-ui-popup));
    box-shadow: var(--tc-modal-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .tc-field {
    min-width: 0;
    display: grid;
    gap: var(--tc-field-gap);
  }

  .tc-field__label {
    color: var(--tc-text-muted);
    font-size: var(--tc-type-field-label-size);
    font-weight: var(--tc-type-field-label-weight);
    line-height: var(--tc-type-field-label-line);
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .tc-input,
  .tc-select-control {
    width: 100%;
    min-width: 0;
    min-height: var(--tc-control-height-md);
    border: 1px solid var(--tc-control-border);
    border-radius: var(--tc-field-control-radius);
    background: var(--tc-control-bg);
    color: var(--tc-control-text);
    font: inherit;
  }

  .tc-input--range {
    width: 100%;
    accent-color: var(--tc-accent-main);
  }

  .tc-input--search {
    min-height: var(--tc-control-height-md);
  }

  .tc-textarea,
  .tc-native-select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--tc-control-border);
    border-radius: var(--tc-textarea-radius);
    background: var(--tc-control-bg);
    color: var(--tc-control-text);
    font: inherit;
    outline: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: border-color var(--tc-transition-fast), background-color var(--tc-transition-fast), color var(--tc-transition-fast);
  }

  .tc-textarea {
    height: var(--tc-textarea-height);
    min-height: 0;
    padding: var(--tc-textarea-padding-y) var(--tc-textarea-padding-x);
    line-height: var(--tc-textarea-line-height);
    resize: none;
  }

  .tc-native-select {
    min-height: var(--tc-control-height-md);
    padding: var(--tc-control-padding-y-lg) var(--tc-control-padding-x-md);
  }

  .tc-textarea:focus,
  .tc-native-select:focus {
    border-color: var(--tc-control-border-hover);
    background: var(--tc-control-bg-hover);
    color: var(--tc-control-text-hover);
    box-shadow: none;
  }

  .tc-segmented-control {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(var(--tc-segmented-min-track), 1fr));
    gap: var(--tc-segmented-gap);
    padding: 0;
    border: 0;
    border-radius: var(--tc-segmented-radius);
    background: var(--tc-control-bg);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .tc-segmented-control label {
    margin: 0;
  }

  .tc-segmented-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .tc-segmented-control label > span {
    min-height: var(--tc-segmented-item-height);
    display: grid;
    place-items: center;
    padding: 0 var(--tc-segmented-item-padding-x);
    border: 0;
    border-radius: var(--tc-segmented-item-radius);
    background: var(--tc-color-transparent);
    color: var(--tc-control-text-muted);
    font-size: var(--tc-type-segmented-control-size);
    font-weight: var(--tc-type-segmented-control-weight);
    line-height: var(--tc-type-segmented-control-line);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: color var(--tc-transition-fast), background-color var(--tc-transition-fast), border-color var(--tc-transition-fast), box-shadow var(--tc-transition-fast), opacity var(--tc-transition-fast);
  }

  .tc-segmented-control label > span:hover {
    background: var(--tc-control-bg-hover);
    color: var(--tc-control-text-hover);
    box-shadow: none;
  }

  .tc-segmented-control input:checked + span {
    background: var(--tc-control-bg-active);
    color: var(--tc-control-text-hover);
    box-shadow: none;
  }

  .tc-segmented-control input:focus-visible + span {
    outline: var(--tc-focus-outline);
    outline-offset: 1px;
    box-shadow: none;
  }

  .tc-notice {
    box-sizing: border-box;
    color: var(--tc-text-muted);
  }

  .tc-notice--editor-access {
    position: absolute;
    top: var(--tc-notice-editor-top);
    left: 50%;
    z-index: 1005;
    width: max-content;
    max-width: var(--tc-notice-editor-max-width);
    display: grid;
    justify-items: center;
    gap: var(--tc-notice-inline-gap);
    padding: 0;
    border: 0;
    border-radius: var(--tc-radius-none);
    background: var(--tc-color-transparent);
    font-size: var(--tc-notice-editor-font-size);
    font-weight: var(--tc-type-gallery-empty-copy-weight);
    line-height: var(--tc-type-gallery-empty-copy-line);
    text-align: center;
    letter-spacing: 0;
    pointer-events: auto;
    transform: translateX(-50%);
    text-shadow: 0 1px 8px var(--tc-shadow-color-readable);
  }

  body.editor-ratio-portrait .tc-notice--editor-access {
    font-size: var(--tc-notice-editor-font-size-portrait);
  }

  body[data-preview-checker-mode="bright"] .tc-notice--editor-access {
    color: var(--tc-checker-bright-ink);
    text-shadow: none;
  }

  .tc-notice--editor-access,
  .tc-notice--editor-access * {
    pointer-events: auto;
  }

  .tc-notice--editor-access span {
    min-width: 0;
    max-width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tc-notice--editor-access span:first-child {
    color: var(--tc-text-muted);
    font-weight: var(--tc-type-weight-regular);
  }

  body[data-preview-checker-mode="bright"] .tc-notice--editor-access span:first-child,
  body[data-preview-checker-mode="bright"] .tc-notice--editor-access .tc-notice__link {
    color: var(--tc-checker-bright-ink);
  }

  .tc-notice--editor-access span + span {
    padding-left: 0;
  }

  .tc-notice--editor-access span + span::before {
    content: none;
  }

  .tc-notice__link,
  .tc-link-button {
    appearance: none;
    border: 0;
    background: var(--tc-color-transparent);
    color: var(--tc-accent-muted);
    font: inherit;
    font-weight: var(--tc-type-weight-semibold);
    line-height: var(--tc-type-modal-lead-line);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
  }

  .tc-notice__link {
    position: relative;
    z-index: 1;
    display: inline;
    font-weight: var(--tc-type-weight-semibold);
    line-height: var(--tc-type-modal-lead-line);
  }

  .tc-notice--editor-access .tc-notice__link {
    font-weight: var(--tc-notice-editor-link-weight);
  }

  .tc-notice__link:hover,
  .tc-notice__link:focus-visible,
  .tc-link-button:hover,
  .tc-link-button:focus-visible {
    color: var(--tc-accent-strong);
    text-decoration: underline;
    outline: 0;
  }

  .tc-notice--interaction {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: clamp(var(--tc-space-9), 3vw, 34px);
    border-radius: inherit;
    background: var(--tc-shadow-color-heavy);
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 140ms ease, transform 140ms ease;
  }

  .tc-notice--interaction.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .tc-notice__panel {
    width: min(18rem, 100%);
    padding: var(--tc-space-5) var(--tc-space-6);
    border: 1px solid var(--tc-color-transparent);
    border-radius: var(--tc-notice-radius);
    background: var(--tc-editor-ui-popup);
    color: var(--tc-text-main);
    font-size: var(--tc-type-notice-panel-size);
    font-weight: var(--tc-type-notice-panel-weight);
    line-height: var(--tc-type-notice-panel-line);
    text-align: center;
    box-shadow: var(--tc-editor-ui-popup-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .tc-notice--modal-lead {
    width: max-content;
    max-width: 100%;
    margin: var(--tc-space-5) 0 0;
    padding: var(--tc-space-3) var(--tc-space-4);
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-modal-lead-radius);
    background: var(--tc-control-bg-hover);
    color: var(--tc-text-muted);
    font-size: var(--tc-type-modal-lead-size);
    font-weight: var(--tc-type-modal-lead-weight);
    line-height: var(--tc-type-modal-lead-line);
  }

  .tc-eyebrow {
    margin: 0 0 var(--tc-space-3);
    color: var(--tc-accent-main);
    font-size: var(--tc-type-eyebrow-size);
    font-weight: var(--tc-type-eyebrow-weight);
    line-height: var(--tc-type-eyebrow-line);
    text-transform: uppercase;
  }

  .tc-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tc-modal-header-gap);
    padding: var(--tc-modal-header-padding-top) var(--tc-modal-header-padding-x) var(--tc-modal-header-padding-bottom);
    border-bottom: 1px solid var(--tc-border-soft);
    background: var(--tc-panel-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .tc-modal-body {
    display: grid;
    gap: 0;
    padding: var(--tc-modal-body-padding-top) var(--tc-modal-body-padding-x) var(--tc-modal-body-padding-bottom);
    background: var(--tc-bg-app);
    color: var(--tc-text-muted);
    font-size: var(--tc-type-modal-body-size);
    font-weight: var(--tc-type-modal-body-weight);
    line-height: var(--tc-type-modal-body-line);
  }

  .tc-modal-list {
    display: grid;
    gap: 0;
  }

  .tc-modal-list-row {
    display: block;
    padding: var(--tc-modal-list-row-padding-y) 0;
  }

  .tc-modal-list-row + .tc-modal-list-row {
    border-top: 1px solid var(--tc-border-soft);
  }

  .tc-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-modal-footer-gap-y) var(--tc-modal-footer-gap-x);
    margin-top: var(--tc-modal-footer-margin-top);
    padding-top: var(--tc-modal-footer-padding-top);
  }

  .tc-loader {
    --tc-loader-progress: 0;
    --tc-loader-radius: var(--tc-radius-lg);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: clamp(var(--tc-space-5), 1.6vmin, var(--tc-space-7));
    padding: 0;
    border: 1px solid var(--tc-card-border);
    border-radius: var(--tc-loader-radius);
    background: var(--tc-panel-bg);
    color: var(--tc-text-main);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .tc-loader[hidden] {
    display: none;
  }

  /* Every editor-opening loader uses one borderless presentation surface.
     The preview/canvas frame is temporarily hidden by the shared editor
     lifecycle, so no inner rectangle remains around "Preparing editor". */
  .tc-loader.tc-loader--editor {
    border: 0;
  }

  .tc-loader__mark {
    display: grid;
    grid-template-columns: repeat(4, 8px);
    gap: var(--tc-space-3);
    align-items: center;
    justify-content: center;
    height: var(--tc-icon-size-xl);
  }

  .tc-loader__mark span {
    width: 8px;
    height: 8px;
    border-radius: var(--tc-radius-pill);
    background: currentColor;
    opacity: 0.36;
    animation: tc-loader-pulse 900ms ease-in-out infinite;
    animation-delay: var(--tc-loader-mark-phase, 0ms);
  }

  .tc-loader__mark span:nth-child(2) {
    animation-delay: calc(var(--tc-loader-mark-phase, 0ms) + 90ms);
  }

  .tc-loader__mark span:nth-child(3) {
    animation-delay: calc(var(--tc-loader-mark-phase, 0ms) + 180ms);
  }

  .tc-loader__mark span:nth-child(4) {
    animation-delay: calc(var(--tc-loader-mark-phase, 0ms) + 270ms);
  }

  /*
    Progress completion is held for one final paint before a loader leaves.
    Settle every shared/adopted loader mark on its baseline during that hold so
    a delayed dot can never finish in the pulse's raised keyframe.
  */
  [data-shared-loader-visual="true"][data-shared-loader-complete="true"] .tc-loader__mark span {
    animation: none;
    opacity: 0.32;
    transform: translateY(0);
  }

  .tc-progress {
    overflow: hidden;
    border-radius: var(--tc-radius-pill);
    background: var(--tc-border-soft);
  }

  .tc-progress > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--tc-accent-progress);
    transform: scaleX(var(--tc-loader-progress));
    transform-origin: left center;
    transition: transform 160ms ease;
  }

  .tc-progress--loader {
    width: min(240px, 70%);
    height: clamp(4px, 0.6vmin, 6px);
  }

  .tc-progress--loader > span {
    position: relative;
    overflow: hidden;
  }

  .tc-progress--loader > span::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      var(--tc-color-transparent) 12%,
      rgba(var(--tc-rgb-text), 0.28) 48%,
      var(--tc-color-transparent) 84%
    );
    content: "";
    opacity: 0;
    transform: translateX(-115%);
    pointer-events: none;
  }

  .tc-loader-visual[data-shared-loader-pending="true"] .tc-progress--loader > span::after {
    opacity: 1;
    animation: tc-loader-progress-activity 1100ms ease-in-out infinite;
  }

  .tc-loader__text {
    max-width: min(280px, 90%);
    overflow: hidden;
    color: var(--tc-text-main);
    font-size: var(--tc-type-modal-body-size);
    font-weight: var(--tc-type-weight-semibold);
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @keyframes tc-loader-pulse {
    0%,
    100% {
      opacity: 0.32;
      transform: translateY(0);
    }

    50% {
      opacity: 0.9;
      transform: translateY(-2px);
    }
  }

  @keyframes tc-loader-progress-activity {
    from {
      transform: translateX(-115%);
    }

    to {
      transform: translateX(115%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tc-loader-visual[data-shared-loader-pending="true"] .tc-progress--loader > span::after {
      animation: none;
      opacity: 0;
    }
  }

  .tc-btn--modal-back {
    gap: var(--tc-space-3);
    border-radius: var(--tc-icon-button-radius-sm);
  }

  .tc-btn--pricing {
    min-height: var(--tc-control-height-lg);
    border-color: var(--tc-color-transparent);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-surface-control);
    color: var(--tc-text-readable);
    font-size: var(--tc-type-button-primary-size);
    font-weight: var(--tc-type-button-primary-weight);
    box-shadow: none;
  }

  .tc-btn--pricing:hover,
  .tc-btn--pricing:focus-visible {
    border-color: var(--tc-color-transparent);
    background: var(--tc-surface-control-active);
    color: var(--tc-text-bright);
    outline: 0;
    box-shadow: inset 0 0 0 1px var(--tc-border-default);
  }

  .tc-card--pricing-option.pricing-option-card--featured .tc-btn--pricing {
    background: var(--tc-accent-main);
    color: var(--tc-text-bright);
  }

  .tc-card--pricing-option.pricing-option-card--featured .tc-btn--pricing:hover,
  .tc-card--pricing-option.pricing-option-card--featured .tc-btn--pricing:focus-visible {
    background: var(--tc-accent-strong);
    color: var(--tc-text-bright);
    box-shadow: inset 0 0 0 1px var(--tc-surface-fill);
  }

  .tc-badge {
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--tc-button-border);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-button-bg);
    color: var(--tc-text-muted);
    line-height: var(--tc-type-line-pill);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .tc-badge--pricing {
    min-height: var(--tc-layout-pricing-badge-height);
    padding: 0 var(--tc-layout-pricing-badge-padding-x);
    font-size: var(--tc-type-pricing-badge-size);
    font-weight: var(--tc-type-weight-pill);
  }

  .tc-card--pricing-option.pricing-option-card--featured .tc-badge--pricing {
    border-color: var(--tc-color-transparent);
    background: var(--tc-accent-main);
    color: var(--tc-text-bright);
  }

  .tc-btn--gallery-load,
  .tc-btn--gallery-load-all {
    position: relative;
    z-index: 1;
    min-height: 3.9rem;
    display: inline-grid;
    align-items: center;
    justify-content: center;
    padding: 0 1.45rem;
    border-color: var(--tc-color-transparent);
    border-radius: var(--tc-radius-xs);
    background: var(--tc-button-bg);
    color: var(--tc-button-text);
    box-shadow: none;
    -webkit-backdrop-filter: var(--tc-glass-filter-soft);
    backdrop-filter: var(--tc-glass-filter-soft);
    transition:
      border-color 220ms var(--tc-ease-standard),
      background-color 220ms var(--tc-ease-standard),
      color 220ms var(--tc-ease-standard),
      transform 260ms var(--tc-ease-standard);
  }

  .tc-btn--gallery-load {
    min-width: min(76vw, 24.5rem);
    justify-items: center;
  }

  .tc-btn--gallery-load-all {
    align-self: start;
    min-width: 4.7rem;
    padding-inline: 1.05rem;
    font-size: var(--tc-type-gallery-load-all-size);
    font-weight: var(--tc-type-gallery-load-all-weight);
  }

  .tc-btn--gallery-load:hover,
  .tc-btn--gallery-load:focus-visible,
  .tc-btn--gallery-load-all:hover,
  .tc-btn--gallery-load-all:focus-visible {
    border-color: var(--tc-color-transparent);
    background: var(--tc-button-bg-hover);
    color: var(--tc-button-text-hover);
    outline: 0;
    transform: translateY(-1px);
  }

  .tc-btn--gallery-load.is-loading-more,
  .tc-btn--gallery-load-all.is-loading-more {
    animation: load-more-button-pulse 560ms var(--tc-ease-standard) 2 both;
  }

  .tc-btn--gallery-load .gallery-load-more__label {
    font-size: var(--tc-type-gallery-load-label-size);
    font-weight: var(--tc-type-gallery-load-label-weight);
    line-height: var(--tc-type-gallery-load-label-line);
    text-align: center;
  }

  .tc-btn--gallery-load .gallery-load-more__label em {
    color: var(--tc-text-muted);
    font-style: italic;
    font-weight: var(--tc-type-weight-regular);
  }

  .tc-btn--gallery-empty {
    min-height: var(--tc-caret-min-height);
    padding: 0 var(--tc-space-6);
    border-color: var(--tc-color-transparent);
    border-radius: var(--tc-radius-xs);
    background: var(--tc-button-bg);
    color: var(--tc-button-text);
    font-size: var(--tc-type-gallery-empty-button-size);
    font-weight: var(--tc-type-gallery-empty-button-weight);
    box-shadow: none;
    transition:
      border-color 240ms var(--tc-ease-standard),
      background-color 240ms var(--tc-ease-standard),
      color 240ms var(--tc-ease-standard);
  }

  .tc-btn--gallery-empty:hover,
  .tc-btn--gallery-empty:focus-visible {
    border-color: var(--tc-color-transparent);
    background: var(--tc-button-bg-hover);
    color: var(--tc-button-text-hover);
    outline: 0;
  }

  .tc-btn--gallery-editor {
    min-width: 0;
    width: var(--tc-gallery-editor-button-width, auto);
    height: var(--tc-gallery-editor-button-height, 2.625rem);
    min-height: var(--tc-gallery-editor-button-height, 2.625rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    padding-inline: 0.875rem;
    border-color: var(--tc-gallery-editor-button-border, var(--tc-color-transparent));
    border-radius: var(--tc-gallery-editor-button-radius, var(--tc-radius-md));
    background: var(--tc-gallery-editor-button-bg, var(--tc-color-transparent));
    background-clip: padding-box;
    color: var(--tc-gallery-editor-button-text, var(--tc-button-icon));
    font-weight: var(--tc-type-gallery-card-action-weight);
    box-shadow: none;
  }

  .tc-btn--gallery-editor:hover,
  .tc-btn--gallery-editor:focus-visible,
  .tc-btn--gallery-editor.is-opening-editor {
    border-color: var(--tc-button-border-strong);
    background: var(--tc-button-bg-hover);
    color: var(--tc-button-text-hover);
    outline: 0;
  }

  .tc-btn--gallery-editor .action-icon,
  .tc-btn--gallery-editor .action-ready-overlay .action-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 auto;
  }

  .tc-btn--gallery-editor .action-label {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    line-height: var(--tc-type-gallery-card-action-line);
    font-weight: var(--tc-type-gallery-card-action-weight);
    opacity: 1;
    transform: none;
  }

  @media (max-width: 760px) {
    .tc-btn--gallery-load,
    .tc-btn--gallery-load-all {
      min-height: 3.75rem;
      border-radius: var(--tc-radius-xs);
    }

    .tc-btn--gallery-load {
      padding-inline: 1rem;
    }

    .tc-btn--gallery-load-all {
      min-width: 4rem;
      padding-inline: 0.8rem;
    }

    .tc-btn--gallery-load .gallery-load-more__label {
      font-size: var(--tc-type-gallery-load-label-size);
    }
  }

  .tc-filter-pills {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--tc-space-4);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--tc-space-6) var(--tc-space-4) var(--tc-space-7);
    border-radius: var(--tc-radius-sm);
    clip-path: inset(0 round var(--tc-radius-sm));
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-x;
    user-select: none;
    -webkit-user-select: none;
  }

  .tc-filter-pills[hidden],
  .tc-select-filter-pills[hidden] {
    display: none;
  }

  .tc-select-filter-pills {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }

  .tc-filter-pills::-webkit-scrollbar {
    display: none;
  }

  .tc-filter-pills.is-dragging {
    cursor: grabbing;
  }

  .tc-filter-pills.is-dragging .tc-btn--filter-pill {
    cursor: grabbing;
  }

  .tc-btn--filter-pill {
    position: relative;
    flex: 0 0 auto;
    min-height: var(--tc-caret-min-height);
    padding: 0 var(--tc-space-6);
    border-color: var(--tc-color-transparent);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-card-bg);
    color: var(--tc-control-text-muted);
    font-size: var(--tc-type-gallery-filter-pill-size);
    font-weight: var(--tc-type-gallery-filter-pill-weight);
    line-height: var(--tc-type-gallery-filter-pill-line);
    letter-spacing: 0;
    white-space: nowrap;
    transition:
      border-color 260ms var(--tc-ease-standard),
      background-color 260ms var(--tc-ease-standard),
      color 260ms var(--tc-ease-standard),
      opacity 180ms var(--tc-ease-standard);
  }

  .tc-btn--filter-pill::before,
  .tc-btn--filter-pill::after {
    content: none;
  }

  .tc-btn--filter-pill:hover,
  .tc-btn--filter-pill:focus-visible {
    border-color: var(--tc-color-transparent);
    background: var(--tc-surface-control-hover);
    color: var(--tc-control-text-hover);
    outline: 0;
    box-shadow: none;
  }

  .tc-btn--filter-pill.is-active {
    border-color: var(--tc-color-transparent);
    background: var(--tc-surface-control-active);
    color: var(--tc-control-text-hover);
  }

  .tc-btn--filter-favorite {
    gap: var(--tc-space-3-5);
    padding-inline: var(--tc-space-5) var(--tc-space-4-5);
    border-style: dashed;
    border-color: var(--tc-card-border);
    background: var(--tc-color-transparent);
    color: var(--tc-control-text-muted);
  }

  .tc-btn--filter-favorite:not(.is-dimmed):hover,
  .tc-btn--filter-favorite:not(.is-dimmed):focus-visible,
  .tc-btn--filter-favorite.is-active {
    border-style: solid;
    border-color: var(--tc-button-border-strong);
    background: var(--tc-button-bg-active);
    color: var(--tc-button-text-hover);
  }

  .tc-btn--filter-favorite.is-dimmed,
  .tc-btn--filter-favorite.is-dimmed:hover,
  .tc-btn--filter-favorite.is-dimmed:focus-visible {
    border-style: dashed;
    border-color: var(--tc-card-border);
    background: var(--tc-color-transparent);
    color: var(--tc-text-disabled);
    cursor: default;
    opacity: var(--tc-state-disabled-opacity);
  }

  .tc-btn--filter-favorite .style-filter-pill__icon {
    width: 13px;
    height: 13px;
    color: currentColor;
    fill: currentColor;
    stroke: none;
    opacity: 0.28;
  }

  .tc-btn--filter-favorite .style-filter-pill__icon * {
    fill: currentColor;
    stroke: none;
  }

  .tc-btn--filter-favorite:not(.is-dimmed):hover .style-filter-pill__icon,
  .tc-btn--filter-favorite:not(.is-dimmed):focus-visible .style-filter-pill__icon {
    opacity: 0.56;
  }

  .tc-btn--filter-favorite.is-active .style-filter-pill__icon,
  .tc-btn--filter-favorite.is-active:hover .style-filter-pill__icon,
  .tc-btn--filter-favorite.is-active:focus-visible .style-filter-pill__icon {
    opacity: 0.96;
  }

  .tc-btn--filter-favorite.is-dimmed .style-filter-pill__icon,
  .tc-btn--filter-favorite.is-dimmed:hover .style-filter-pill__icon,
  .tc-btn--filter-favorite.is-dimmed:focus-visible .style-filter-pill__icon {
    opacity: 0.22;
  }

  .style-filter-pill__count {
    display: inline;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: var(--tc-color-transparent);
    color: currentColor;
    font-size: var(--tc-type-gallery-filter-count-size);
    font-weight: var(--tc-type-gallery-filter-count-weight);
    line-height: var(--tc-type-gallery-filter-count-line);
    opacity: 0.62;
  }

  @media (max-width: 680px), (hover: none) and (pointer: coarse) {
    .tc-filter-pills {
      padding: 0 0 var(--tc-space-2);
    }
  }

  .tc-scrub-field {
    min-width: 0;
  }

  .tc-scrub-control {
    min-height: var(--tc-control-height-scrub);
  }

  .tc-panel--control .tc-select-control {
    min-height: var(--tc-control-height-scrub);
    height: var(--tc-control-height-scrub);
    padding: var(--tc-control-padding-y-md) var(--tc-select-control-padding-x);
    border-color: var(--tc-editor-ui-line);
    background: var(--tc-color-transparent);
    font-size: var(--tc-type-select-button-size);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .tc-panel--control .tc-select-menu {
    max-height: var(--tc-select-menu-compact-max-height);
  }

  .tc-panel--control .tc-select-control:hover,
  .tc-panel--control .tc-select-control:focus-visible,
  .tc-panel--control .tc-select.is-open .tc-select-control {
    border-color: var(--tc-control-border-hover);
    background: var(--tc-control-bg-hover);
    color: var(--tc-control-text-hover);
    outline: 0;
    box-shadow: none;
  }

  .editor-controls .tc-scrub.tc-scrub-control:not(.tc-scrub--compact-menu) {
    --tc-scrub-bg: var(--tc-editor-scrub-bg);
    --tc-scrub-line: var(--tc-color-transparent);
    --tc-scrub-line-strong: var(--tc-control-border-hover);
    --tc-scrub-accent: var(--tc-accent-main);
    height: var(--tc-control-height-scrub);
    min-height: var(--tc-control-height-scrub);
    border-color: var(--tc-color-transparent);
    background: var(--tc-editor-scrub-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .editor-controls .tc-scrub.tc-scrub-control:not(.tc-scrub--compact-menu):hover,
  .editor-controls .tc-scrub.tc-scrub-control:not(.tc-scrub--compact-menu):focus-visible {
    border-color: var(--tc-color-transparent);
    background: var(--tc-editor-scrub-bg-hover);
  }

  .editor-controls .tc-scrub.tc-scrub-control:not(.tc-scrub--compact-menu).is-scrubbing,
  .editor-controls .tc-scrub.tc-scrub-control:not(.tc-scrub--compact-menu).is-armed {
    border-color: var(--tc-color-transparent);
    background: var(--tc-editor-scrub-bg-active);
    color: var(--tc-text-bright);
  }

  .tc-value-pill {
    min-width: var(--tc-value-pill-min-width);
    padding: var(--tc-value-pill-padding-y) var(--tc-value-pill-padding-x);
    border: 1px solid var(--tc-border-default);
    border-radius: var(--tc-value-pill-radius);
    background: var(--tc-editor-ui-control-bg);
    color: var(--tc-text-main);
    font-size: var(--tc-type-editor-popup-pill-size);
    text-align: center;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  @media (max-width: 560px) {
    .tc-filter-pills {
      width: 100%;
      max-width: none;
      gap: var(--tc-space-3);
      padding: 0 0 var(--tc-space-hairline);
      scroll-padding-inline: var(--tc-space-5);
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }

    .tc-textarea {
      height: var(--tc-textarea-height-sm);
    }

    .tc-segmented-control--aspect {
      width: var(--tc-segmented-aspect-width-sm);
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-radius: var(--editor-mobile-radius, var(--tc-segmented-radius));
      background: var(--tc-color-transparent);
    }

    .tc-segmented-control--aspect label > span {
      min-height: var(--tc-segmented-item-height-sm);
      padding: 0 var(--tc-space-2);
      border-radius: var(--editor-mobile-radius, var(--tc-segmented-item-radius));
      background: var(--tc-color-transparent);
    }

    .tc-segmented-control--aspect label:first-child > span,
    .tc-segmented-control--aspect label:last-child > span {
      border-radius: calc(var(--editor-mobile-radius, var(--tc-segmented-item-radius)) - 2px);
    }

    .tc-notice--editor-access {
      top: 10px;
      max-width: var(--tc-notice-editor-max-width-sm);
      line-height: var(--tc-type-gallery-empty-copy-line);
      gap: var(--tc-notice-inline-gap);
    }

    .tc-notice--editor-access span {
      white-space: normal;
    }

  .tc-notice--editor-access .tc-notice__link {
    min-height: var(--tc-control-height-xs);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: var(--tc-notice-link-margin-y-sm) var(--tc-notice-link-margin-x-sm);
      padding: var(--tc-notice-link-padding-y-sm) var(--tc-notice-link-padding-x-sm);
      border-radius: var(--tc-notice-radius-sm);
    }

    .tc-modal-header {
      gap: var(--tc-modal-header-gap-sm);
      padding: var(--tc-modal-header-padding-top-sm) var(--tc-modal-header-padding-x-sm) var(--tc-modal-header-padding-bottom-sm);
    }

    .tc-modal-body {
      padding: var(--tc-modal-body-padding-top-sm) var(--tc-modal-body-padding-x-sm) var(--tc-modal-body-padding-bottom-sm);
    }

    .tc-notice--modal-lead {
      width: auto;
      font-size: var(--tc-type-modal-lead-size);
    }

    .tc-value-pill {
      min-width: var(--tc-value-pill-min-width-sm);
      padding: var(--tc-value-pill-padding-y-sm) var(--tc-value-pill-padding-x-sm);
    }
  }
  .editor-preview {
    position: relative;
  }

  .tc-animation-time-indicator {
    position: absolute;
    left: clamp(10px, 1.2vw, 16px);
    right: clamp(10px, 1.2vw, 16px);
    bottom: var(--tc-preview-timeline-bottom, clamp(10px, 1.2vw, 16px));
    z-index: 1004;
    width: auto;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) 4.8rem;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.34rem 0.5rem;
    border-radius: var(--tc-radius-md);
    background: var(--tc-surface-transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tc-transition-fast);
  }

  body.editor-ratio-portrait .tc-animation-time-indicator {
    left: clamp(7px, 0.8vw, 10px);
    right: clamp(7px, 0.8vw, 10px);
    grid-template-columns: 1.35rem minmax(0, 1fr) 3.3rem;
    gap: 0.4rem;
    padding: 0.22rem 0.34rem;
  }

  body.editor-ratio-portrait .tc-animation-time-stop {
    width: 1.2rem;
    height: 1.2rem;
    margin-left: -0.2rem;
  }

  body.editor-ratio-portrait .tc-animation-time-stop svg {
    width: 0.65rem;
    height: 0.65rem;
  }

  body.editor-ratio-portrait .tc-animation-time-text {
    font-size: var(--tc-type-editor-timeline-size-mobile);
  }

  .tc-animation-time-indicator.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .tc-animation-time-bar {
    position: relative;
    height: 1.15rem;
    margin-block: -0.475rem;
    background: var(--tc-surface-transparent);
    overflow: visible;
    border-radius: var(--tc-radius-pill);
    cursor: default;
    touch-action: pan-y;
  }

  .tc-animation-time-indicator.is-scrubbable .tc-animation-time-bar {
    cursor: ew-resize;
    touch-action: none;
  }

  .tc-animation-time-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0.2rem;
    transform: translateY(-50%);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-surface-track);
  }

  .tc-animation-time-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1.15rem;
    transform: translateY(-50%);
    border-radius: var(--tc-radius-pill);
  }

  .tc-animation-time-markers {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
  }

  .tc-animation-time-marker {
    position: absolute;
    top: 50%;
    display: block;
    width: 10px;
    height: 0.25rem;
    transform: translate(-50%, -50%);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-checker-base);
    opacity: 1;
    pointer-events: none;
  }

  .tc-animation-time-fill {
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 0%;
    height: 0.2rem;
    transform: translateY(-50%);
    background: var(--tc-timeline-fill-bg);
    border-radius: inherit;
  }

  .tc-animation-time-fill::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 0.48rem;
    height: 0.48rem;
    transform: translate(50%, -50%) scale(0.82);
    border-radius: var(--tc-radius-pill);
    background: var(--tc-timeline-thumb-bg);
    opacity: 0;
    transition: opacity var(--tc-transition-fast), transform var(--tc-transition-fast);
  }

  .tc-animation-time-indicator.is-scrubbable .tc-animation-time-bar:hover .tc-animation-time-fill::after,
  .tc-animation-time-indicator.is-scrubbable .tc-animation-time-bar:focus-visible .tc-animation-time-fill::after,
  .tc-animation-time-indicator.is-scrubbing .tc-animation-time-fill::after {
    opacity: 1;
    transform: translate(50%, -50%) scale(1);
  }

  .tc-animation-time-bar:focus-visible {
    outline: 0;
  }

  .tc-animation-time-text {
    width: 100%;
    color: var(--tc-text-faint);
    font-family: inherit;
    font-size: var(--tc-type-editor-timeline-size);
    font-weight: var(--tc-type-editor-timeline-weight);
    line-height: var(--tc-type-editor-timeline-line);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-align: right;
    white-space: nowrap;
    transition: color var(--tc-transition-fast);
  }

  .tc-animation-time-indicator.is-playing .tc-animation-time-text {
    color: var(--tc-text-high);
  }

  .tc-animation-time-stop {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-grid;
    place-items: center;
    justify-self: start;
    margin-left: -0.28rem;
    padding: 0;
    border: 1px solid var(--tc-editor-ui-line);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-editor-ui-control-bg);
    color: var(--tc-app-accent, var(--tc-accent-main));
    cursor: pointer;
    opacity: 1;
    transition: background var(--tc-transition-fast), border-color var(--tc-transition-fast), color var(--tc-transition-fast);
  }

  .tc-animation-time-stop:hover,
  .tc-animation-time-stop:focus-visible {
    border-color: var(--tc-editor-ui-line-strong);
    background: var(--tc-editor-ui-control-bg-hover);
    color: var(--tc-app-accent, var(--tc-accent-main));
    outline: 0;
  }

  body[data-preview-checker-mode="bright"] .tc-animation-time-bar::before {
    background: var(--tc-checker-bright-control-bg-hover);
  }

  body[data-preview-checker-mode="bright"] .tc-animation-time-fill {
    background: var(--tc-checker-bright-ink);
  }

  body[data-preview-checker-mode="bright"] .tc-animation-time-fill::after {
    background: var(--tc-checker-bright-ink);
  }

  body[data-preview-checker-mode="bright"] .tc-animation-time-marker {
    background: var(--tc-checker-bright-base);
  }

  body[data-preview-checker-mode="bright"] .tc-animation-time-text,
  body[data-preview-checker-mode="bright"] .tc-animation-time-indicator.is-playing .tc-animation-time-text {
    color: var(--tc-checker-bright-ink);
  }

  body[data-preview-checker-mode="bright"] .tc-animation-time-stop {
    border-color: var(--tc-checker-bright-mark);
    background: var(--tc-checker-bright-control-bg);
    color: var(--tc-app-accent, var(--tc-accent-main));
  }

  body[data-preview-checker-mode="bright"] .tc-animation-time-stop:hover,
  body[data-preview-checker-mode="bright"] .tc-animation-time-stop:focus-visible {
    border-color: var(--tc-checker-bright-mark);
    background: var(--tc-checker-bright-control-bg-hover);
    color: var(--tc-app-accent, var(--tc-accent-main));
  }

  .tc-animation-time-stop svg {
    width: 0.74rem;
    height: 0.74rem;
    fill: currentColor;
    stroke: none;
  }

  .tc-animation-time-stop .tc-animation-time-icon--stop {
    display: none;
  }

  .tc-animation-time-stop .tc-animation-time-icon--play {
    display: block;
  }

  .tc-animation-time-indicator.is-playing .tc-animation-time-stop .tc-animation-time-icon--stop {
    display: block;
  }

  .tc-animation-time-indicator.is-playing .tc-animation-time-stop .tc-animation-time-icon--play {
    display: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .tc-animation-time-indicator {
      grid-template-columns: 1.4rem minmax(0, 1fr) 3.4rem;
      gap: 0.45rem;
      padding: 0.22rem 0.36rem;
    }

    .tc-animation-time-stop {
      width: 1.2rem;
      height: 1.2rem;
      margin-left: -0.2rem;
    }

    .tc-animation-time-stop svg {
      width: 0.65rem;
      height: 0.65rem;
    }

    .tc-animation-time-text {
      font-size: var(--tc-type-editor-timeline-size-mobile);
    }
  }

  @media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .tc-animation-time-bar {
      height: 2.35rem;
      margin-block: -1.075rem;
    }

    .tc-animation-time-bar::after {
      height: 2.35rem;
    }

    .tc-animation-time-fill::after {
      width: 0.72rem;
      height: 0.72rem;
    }
  }

  #tc-runtime-diagnostics-host {
    position: fixed;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 2147483647;
    color: var(--tc-text-bright);
    font-family: var(--tc-font-mono);
    line-height: 1.35;
  }

  #tc-runtime-diagnostics-host * {
    box-sizing: border-box;
  }

  #tc-runtime-diagnostics-host button {
    font: inherit;
  }

  #tc-runtime-diagnostics-host .toggle {
    border: 1px solid var(--tc-border-highlight);
    border-radius: var(--tc-radius-pill);
    padding: 8px 11px;
    background: var(--tc-surface-main);
    color: var(--tc-text-bright);
    box-shadow: 0 4px 18px var(--tc-shadow-color-strong);
    font-weight: 700;
  }

  #tc-runtime-diagnostics-host .panel {
    position: absolute;
    right: 0;
    bottom: 44px;
    width: min(92vw, 520px);
    max-height: min(72vh, 680px);
    display: none;
    overflow: auto;
    border: 1px solid var(--tc-border-selected);
    border-radius: var(--tc-radius-lg);
    padding: 12px;
    background: var(--tc-popup-bg);
    box-shadow: 0 12px 42px var(--tc-shadow-color-heavy);
  }

  #tc-runtime-diagnostics-host .panel.open {
    display: block;
  }

  #tc-runtime-diagnostics-host .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }

  #tc-runtime-diagnostics-host .title {
    font-weight: 800;
  }

  #tc-runtime-diagnostics-host .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  #tc-runtime-diagnostics-host .actions button {
    border: 1px solid var(--tc-border-selected);
    border-radius: var(--tc-radius-control);
    padding: 6px 8px;
    background: var(--tc-surface-control);
    color: var(--tc-text-bright);
  }

  #tc-runtime-diagnostics-host .summary {
    margin: 0;
    color: var(--tc-text-readable);
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
  }

  #tc-runtime-diagnostics-host .hint {
    margin-top: 8px;
    color: var(--tc-text-muted);
    font-size: 10px;
  }
.tc-hidden {
    display: none;
  }

  .tc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .tc-w-full {
    width: 100%;
  }

  .tc-min-w-0 {
    min-width: 0;
  }

/* Migrated component ownership from feature CSS. */
/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .tc-tab-btn[data-panel-tier="advanced"],
.editor-controls.compact-controls .tc-tab-btn[data-panel-tier="advanced"] {
  display: inline-grid;
}

/* Migrated tc-* feature rules into component ownership. */
/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-category-random .variation-control,
.editor-controls.compact-controls .compact-category-random .variation-control {
flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  max-width: 100%;
  height: var(--compact-control-height);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--editor-control-gap);
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact[hidden],
.editor-controls.compact-controls .tc-icon-btn--compact[hidden] {
display: none;
}

/* Migrated from styles/features/editor-controls/compact-scrub-export.css. */
body[data-editor-compact-controls="on"] .editor-controls button.is-active .control-icon,
.editor-controls.compact-controls button.is-active .control-icon,
body[data-editor-compact-controls="on"] .editor-controls button[aria-pressed="true"] .control-icon,
.editor-controls.compact-controls button[aria-pressed="true"] .control-icon,
body[data-editor-compact-controls="on"] .editor-controls button[aria-expanded="true"] .control-icon,
.editor-controls.compact-controls button[aria-expanded="true"] .control-icon,
body[data-editor-compact-controls="on"] .editor-controls .compact-menu-attention-pulse .control-icon,
.editor-controls.compact-controls .compact-menu-attention-pulse .control-icon {
opacity: var(--tc-editor-ui-icon-active-opacity);
}

/* Migrated from styles/features/editor-controls/compact-shell.css. */
.editor-controls .compact-transform-deck {
display: none;
}
}

/* source: shared/styles/components/app-switch-progress-overlay.css */
@layer components {
  .tc-app-switch-progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--tc-app-switch-cover-bg, var(--tc-bg-page));
    color: var(--tc-text-main);
    pointer-events: auto;
    touch-action: none;
    contain: strict;
  }

  [data-app-switch-cover="true"] {
    display: none;
  }

  html[data-app-switch-cover-active="true"] [data-app-switch-cover="true"] {
    display: grid;
  }

  .tc-loader--app-switch {
    --tc-loader-progress: var(--tc-app-switch-arrival-progress, 0.08);
    --tc-loader-mark-phase: var(--tc-app-switch-loader-phase, 0ms);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--tc-color-transparent);
  }
}

/* source: shared/styles/components/editor-frame.css */
@layer components {
.editor-frame-overlay {
  --editor-frame: var(--tc-editor-frame);
  --editor-frame-border: var(--tc-editor-frame-border);
  --editor-frame-handle: var(--tc-editor-handle-stroke);
  --editor-frame-handle-fill: var(--tc-editor-handle-fill);
  --editor-frame-offset: var(--tc-editor-offset);
  --editor-frame-corner: var(--tc-editor-corner);
  --editor-frame-radius: 0px;
  --editor-frame-handle-size: var(--tc-editor-handle-size);
  --editor-frame-handle-half: var(--tc-editor-handle-half);
  --editor-frame-handle-inset: var(--tc-editor-handle-inset);
  position: absolute;
  inset: -10px;
  z-index: 12;
  pointer-events: none;
  visibility: hidden;
  filter: var(--tc-filter-brightness-074);
  transition: filter 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.editor-frame-box {
  position: absolute;
  inset: var(--editor-frame-offset);
  border: 1px solid var(--editor-frame-border);
  border-radius: var(--tc-radius-none);
  background:
    linear-gradient(var(--editor-frame), var(--editor-frame)) left top / var(--editor-frame-corner) 1px no-repeat,
    linear-gradient(var(--editor-frame), var(--editor-frame)) left top / 1px var(--editor-frame-corner) no-repeat,
    linear-gradient(var(--editor-frame), var(--editor-frame)) right top / var(--editor-frame-corner) 1px no-repeat,
    linear-gradient(var(--editor-frame), var(--editor-frame)) right top / 1px var(--editor-frame-corner) no-repeat,
    linear-gradient(var(--editor-frame), var(--editor-frame)) left bottom / var(--editor-frame-corner) 1px no-repeat,
    linear-gradient(var(--editor-frame), var(--editor-frame)) left bottom / 1px var(--editor-frame-corner) no-repeat,
    linear-gradient(var(--editor-frame), var(--editor-frame)) right bottom / var(--editor-frame-corner) 1px no-repeat,
    linear-gradient(var(--editor-frame), var(--editor-frame)) right bottom / 1px var(--editor-frame-corner) no-repeat;
}

.editor-frame-handle {
  position: absolute;
  z-index: 1;
  width: var(--editor-frame-handle-size);
  height: var(--editor-frame-handle-size);
  border: 1px solid var(--editor-frame-handle);
  background: var(--editor-frame-handle-fill);
}

.editor-frame-handle--top-left {
  left: calc(var(--editor-frame-offset) - var(--editor-frame-handle-half) + var(--editor-frame-handle-inset));
  top: calc(var(--editor-frame-offset) - var(--editor-frame-handle-half) + var(--editor-frame-handle-inset));
}

.editor-frame-handle--top {
  left: calc(50% - var(--editor-frame-handle-half));
  top: calc(var(--editor-frame-offset) - var(--editor-frame-handle-half) + var(--editor-frame-handle-inset));
}

.editor-frame-handle--top-right {
  right: calc(var(--editor-frame-offset) - var(--editor-frame-handle-half) + var(--editor-frame-handle-inset));
  top: calc(var(--editor-frame-offset) - var(--editor-frame-handle-half) + var(--editor-frame-handle-inset));
}

.editor-frame-handle--left {
  left: calc(var(--editor-frame-offset) - var(--editor-frame-handle-half) + var(--editor-frame-handle-inset));
  top: calc(50% - var(--editor-frame-handle-half));
}

.editor-frame-handle--right {
  right: calc(var(--editor-frame-offset) - var(--editor-frame-handle-half) + var(--editor-frame-handle-inset));
  top: calc(50% - var(--editor-frame-handle-half));
}

.editor-frame-handle--bottom-left {
  left: calc(var(--editor-frame-offset) - var(--editor-frame-handle-half) + var(--editor-frame-handle-inset));
  bottom: calc(var(--editor-frame-offset) - var(--editor-frame-handle-half) + var(--editor-frame-handle-inset));
}

.editor-frame-handle--bottom {
  left: calc(50% - var(--editor-frame-handle-half));
  bottom: calc(var(--editor-frame-offset) - var(--editor-frame-handle-half) + var(--editor-frame-handle-inset));
}

.editor-frame-handle--bottom-right {
  right: calc(var(--editor-frame-offset) - var(--editor-frame-handle-half) + var(--editor-frame-handle-inset));
  bottom: calc(var(--editor-frame-offset) - var(--editor-frame-handle-half) + var(--editor-frame-handle-inset));
}
}

/* source: shared/styles/components/gallery-card-view.css */
@layer components {
/*
  One shared card structure with the two established shared size profiles:
  full landing/index cards and compact editor-popup cards.
*/
.tc-gallery-card {
  position: relative;
  min-width: 0;
}

.tc-gallery-card--select {
  --tc-gallery-card-view-shell-padding: var(--tc-popup-gallery-card-shell-padding);
  --tc-gallery-card-view-shell-radius: var(--tc-popup-gallery-card-shell-radius);
  --tc-gallery-card-view-shell-gap: var(--tc-select-gallery-gap);
  --tc-gallery-card-view-media-aspect: var(--tc-popup-gallery-card-media-aspect);
  --tc-gallery-card-view-media-radius: var(--tc-popup-gallery-card-media-radius);
  --tc-gallery-card-view-media-inset: var(--tc-popup-gallery-card-media-inset);
  --tc-gallery-card-view-checker-size: var(--tc-popup-gallery-card-media-checker-size);
  --tc-gallery-card-view-checker-offset: var(--tc-popup-gallery-card-media-checker-offset);
  --tc-gallery-card-view-footer-height: var(--tc-select-gallery-title-height);
  --tc-gallery-card-view-footer-padding: 0 0 0 var(--tc-space-hairline);
  --tc-gallery-card-view-footer-gap: var(--tc-select-option-gap);
  --tc-gallery-card-view-actions-gap: var(--tc-space-4);
  --tc-gallery-card-view-title-size: var(--tc-type-popup-gallery-card-label-size);
  --tc-gallery-card-view-title-weight: var(--tc-type-popup-gallery-card-label-weight);
  --tc-gallery-card-view-title-line: var(--tc-type-popup-gallery-card-label-line);
}

.tc-gallery-card--select.tc-gallery-card__shell,
.tc-gallery-card--select .tc-gallery-card__shell {
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--tc-gallery-card-view-shell-gap);
  padding: var(--tc-gallery-card-view-shell-padding);
  border-radius: var(--tc-gallery-card-view-shell-radius);
  overflow: hidden;
}

.tc-gallery-card--select .tc-gallery-card__media {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  aspect-ratio: var(--tc-gallery-card-view-media-aspect);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--tc-gallery-card-view-media-radius);
  background-color: var(--tc-checker-base);
  background-image:
    linear-gradient(45deg, var(--tc-checker-mark) 25%, var(--tc-color-transparent) 25%, var(--tc-color-transparent) 75%, var(--tc-checker-mark) 75%),
    linear-gradient(45deg, var(--tc-checker-mark) 25%, var(--tc-color-transparent) 25%, var(--tc-color-transparent) 75%, var(--tc-checker-mark) 75%);
  background-size: var(--tc-gallery-card-view-checker-size) var(--tc-gallery-card-view-checker-size);
  background-position: 0 0, var(--tc-gallery-card-view-checker-offset) var(--tc-gallery-card-view-checker-offset);
  isolation: isolate;
}

.tc-gallery-card--select .tc-gallery-card__preview {
  box-sizing: border-box;
  position: absolute;
  inset: var(--tc-gallery-card-view-media-inset);
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.tc-gallery-card--select .tc-gallery-card__preview:not(img) {
  display: grid;
  place-items: center;
}

.tc-gallery-card--select img.tc-gallery-card__preview,
.tc-gallery-card--select .tc-gallery-card__preview > img {
  display: block;
  object-fit: contain;
  object-position: center;
}

.tc-gallery-card--select .tc-gallery-card__preview > img {
  width: auto;
  height: auto;
  max-width: var(--tc-popup-gallery-card-image-max-width);
  max-height: var(--tc-popup-gallery-card-image-max-height);
  align-self: center;
  justify-self: center;
}

.tc-gallery-card--select .tc-gallery-card__footer {
  box-sizing: border-box;
  flex: 0 0 var(--tc-gallery-card-view-footer-height);
  min-width: 0;
  width: 100%;
  height: var(--tc-gallery-card-view-footer-height);
  min-height: var(--tc-gallery-card-view-footer-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-gallery-card-view-footer-gap);
  padding: var(--tc-gallery-card-view-footer-padding);
}

.tc-gallery-card--select .tc-gallery-card__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--tc-text-main);
  font-size: var(--tc-gallery-card-view-title-size);
  font-weight: var(--tc-gallery-card-view-title-weight);
  line-height: var(--tc-gallery-card-view-title-line);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-gallery-card--select .tc-gallery-card__status {
  flex: 0 0 auto;
  min-width: 0;
}

.tc-gallery-card--select .tc-gallery-card__actions {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tc-gallery-card-view-actions-gap);
}

.tc-gallery-card--select .tc-gallery-card__favorite,
.tc-gallery-card--select .tc-gallery-card__apply {
  box-sizing: border-box;
  flex: 0 0 auto;
}
}

/* source: shared/styles/components/theme-picker.css */
@layer components {
.theme-picker {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  top: var(--tc-theme-picker-top, max(12px, env(safe-area-inset-top)));
  z-index: 1400;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  min-height: var(--tc-control-height-compact);
  max-width: calc(100vw - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--tc-radius-none);
  background: var(--tc-color-transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--tc-text-readable);
  box-shadow: none;
}

.theme-picker__label {
  display: none;
  color: var(--tc-text-faint);
  font-size: 0.625rem;
  font-weight: 740;
  line-height: 1;
  text-transform: uppercase;
}

.theme-picker__select-wrap {
  position: relative;
  min-width: 0;
}

.theme-picker__select {
  appearance: none;
  min-width: 96px;
  max-width: 132px;
  min-height: var(--tc-control-height-xs);
  padding: 0 22px 0 0;
  border: 0;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-color-transparent);
  color: var(--tc-text-muted);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}

.theme-picker__select:focus-visible {
  outline: 0;
  color: var(--tc-text-strong);
}

.theme-picker__select option {
  background: var(--tc-bg-solid);
  color: var(--tc-text-strong);
}

.theme-picker__select-wrap::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: var(--tc-icon-size-sm);
  height: var(--tc-icon-size-sm);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--tc-accent-muted);
  pointer-events: none;
  transform: translateY(-60%) rotate(45deg);
}

body.is-embed .theme-picker {
  display: none;
}

@media (max-width: 680px) {
  .theme-picker {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }

  .theme-picker__label {
    display: none;
  }

  .theme-picker__select {
    min-width: 92px;
    max-width: 112px;
  }
}
}

/* source: shared/styles/components/app-switcher.css */
@layer components {
  /*
    First-paint facade for the server-owned brand anchor. Its geometry matches
    the hydrated trigger, so enhancing the header never removes and then
    re-adds the app thumbnail across two painted states.
  */
  .site-nav.has-app-switcher > .site-nav__brand:not(.app-switcher) {
    min-width: 0;
    min-height: 1.8rem;
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-2);
    padding: 0;
    border-radius: var(--tc-radius-chip);
    white-space: nowrap;
  }

  .site-nav.has-app-switcher > .site-nav__brand:not(.app-switcher)::before {
    content: attr(data-app-switcher-mark);
    flex: 0 0 1.45rem;
    width: 1.45rem;
    height: 1.45rem;
    display: inline-grid;
    place-items: center;
    border-radius: var(--tc-radius-xs);
    background:
      linear-gradient(135deg, var(--tc-accent-main), rgba(12, 12, 12, 0.82) 68%),
      var(--tc-surface-control);
    color: var(--tc-text-bright);
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 1;
  }

  .site-nav.has-app-switcher > .site-nav__brand:not(.app-switcher)::after {
    content: "";
    flex: 0 0 auto;
    width: 0.42rem;
    height: 0.42rem;
    margin-left: var(--tc-space-1);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.58;
    transform: translateY(-18%) rotate(45deg);
  }

  .app-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .app-switcher__trigger {
    appearance: none;
    min-width: 0;
    min-height: 1.8rem;
    display: inline-flex;
    align-items: center;
    gap: var(--tc-space-2);
    padding: 0;
    border: 0;
    border-radius: var(--tc-radius-chip);
    background: var(--tc-color-transparent);
    color: var(--tc-text-strong);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
  }

  .app-switcher__trigger:hover,
  .app-switcher__trigger:focus-visible,
  .app-switcher.is-open .app-switcher__trigger {
    color: var(--tc-text-bright);
    outline: 0;
  }

  .app-switcher__mark,
  .app-switcher__item-mark {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: var(--tc-radius-xs);
    background:
      linear-gradient(135deg, var(--tc-app-switcher-accent, var(--tc-accent-main)), rgba(12, 12, 12, 0.82) 68%),
      var(--tc-surface-control);
    color: var(--tc-text-bright);
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
  }

  .app-switcher__mark {
    width: 1.45rem;
    height: 1.45rem;
    font-size: 0.55rem;
  }

  .app-switcher__label {
    overflow: hidden;
    max-width: 11rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-switcher__chevron {
    width: 0.42rem;
    height: 0.42rem;
    margin-left: var(--tc-space-1);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.58;
    transform: translateY(-18%) rotate(45deg);
  }

  .app-switcher__menu {
    position: absolute;
    left: 0;
    top: calc(100% + var(--tc-space-3));
    z-index: 1800;
    width: min(22rem, calc(100vw - 28px));
    max-height: min(28rem, calc(100vh - 86px));
    padding: var(--tc-space-3);
    border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-md);
    background: var(--tc-surface-popup);
    color: var(--tc-text-main);
    overflow: auto;
    box-shadow: var(--tc-shadow-popup);
  }

  .app-switcher__menu[hidden] {
    display: none;
  }

  .app-switcher__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--tc-space-3);
    min-height: 3rem;
    padding: var(--tc-space-2);
    border-radius: var(--tc-radius-sm);
    color: var(--tc-text-medium);
    text-decoration: none;
    touch-action: manipulation;
  }

  .app-switcher__item:hover,
  .app-switcher__item:focus-visible,
  .app-switcher__item.is-active {
    background: var(--tc-surface-control-hover);
    color: var(--tc-text-bright);
    outline: 0;
  }

  .app-switcher[data-app-switch-departure="true"] .app-switcher__menu {
    display: none;
    pointer-events: none;
  }

  /* Touch browsers can retain a synthetic :hover after a tap. Only the real
     active app remains selected on hoverless devices; :active supplies the
     short press acknowledgement before the menu closes in the click task. */
  @media (hover: none) {
    .app-switcher__item:hover:not(.is-active) {
      background: var(--tc-color-transparent);
      color: var(--tc-text-medium);
    }

    .app-switcher__item:active:not(.is-active) {
      background: var(--tc-surface-control-hover);
      color: var(--tc-text-bright);
    }
  }

  .app-switcher__item-mark {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.68rem;
  }

  .app-switcher__item-text {
    min-width: 0;
    display: grid;
    gap: var(--tc-space-1);
  }

  .app-switcher__item-text strong,
  .app-switcher__item-text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-switcher__item-text strong {
    color: currentColor;
    font-size: 0.76rem;
    font-weight: 760;
    line-height: 1;
  }

  .app-switcher__item-text span {
    color: var(--tc-text-muted);
    font-size: 0.62rem;
    font-weight: 620;
    line-height: 1;
  }

  @media (max-width: 760px) {
    .site-nav.has-app-switcher > .site-nav__brand:not(.app-switcher) {
      justify-content: center;
      gap: 0;
    }

    .site-nav.has-app-switcher > .site-nav__brand:not(.app-switcher)::before {
      flex-basis: 1.65rem;
      width: 1.65rem;
      height: 1.65rem;
    }

    .site-nav.has-app-switcher > .site-nav__brand:not(.app-switcher)::after {
      display: none;
    }
  }

}

/* source: shared/styles/components/select.css */
@layer components {
.tc-select {
  position: relative;
  min-width: 0;
}

.tc-select--gallery {
  --tc-select-option-font-size: var(--tc-type-select-option-size);
  --tc-select-option-font-weight: var(--tc-type-select-option-weight);
  --tc-select-option-line-height: var(--tc-type-select-option-line);
  --tc-select-gallery-label-size: var(--tc-type-gallery-card-title-size);
}

.tc-select-native {
  position: absolute;
  inset: auto;
  width: 1px;
  height: 1px;
  min-width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.tc-select-button {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: var(--tc-control-height-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px;
  align-items: center;
  gap: var(--tc-select-control-gap);
  border: 1px solid var(--tc-select-line);
  border-radius: var(--tc-select-control-radius);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: var(--tc-select-control-padding-y) var(--tc-select-control-padding-x);
  font-size: var(--tc-type-select-button-size);
  font-weight: var(--tc-type-select-button-weight);
  line-height: var(--tc-type-select-button-line);
  text-align: left;
  cursor: pointer;
}

.tc-select-button:focus-visible,
.tc-select.is-open .tc-select-button {
  border-color: var(--tc-select-line-strong);
  outline: 0;
  box-shadow: none;
}

.tc-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-select-value-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-select-value.has-bookmark {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-select-value-gap);
}

.tc-select-value.has-preview {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--tc-select-preview-value-gap);
}

.tc-select--gallery .tc-select-value.has-preview {
  overflow: hidden;
}

.tc-select-value-preview {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
  overflow: hidden;
  border: 1px solid var(--tc-state-hover-bg-strong);
  border-radius: var(--tc-select-preview-radius);
  background-color: var(--tc-bg-canvas);
  background-image: var(--tc-bg-grid-image-soft);
  background-size: var(--tc-bg-grid-size);
}

.tc-select-value-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  overflow: hidden;
  border-radius: calc(var(--tc-select-preview-radius) - 1px);
}

.tc-select-bookmark-icon,
.tc-select-option-bookmark {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--tc-select-accent);
  filter: drop-shadow(0 0 8px var(--tc-accent-glow));
}

.tc-select-bookmark-icon svg,
.tc-select-option-bookmark svg {
  width: 100%;
  height: 100%;
  fill: var(--tc-color-transparent);
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.tc-select-option-bookmark {
  justify-self: end;
  width: var(--tc-icon-size-lg);
  height: var(--tc-icon-size-lg);
}

.tc-select-icon {
  justify-self: end;
  width: var(--tc-icon-size-sm);
  height: var(--tc-icon-size-sm);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--tc-select-muted);
  transform: translateY(-1px) rotate(45deg);
}

.tc-select-more-hint {
  display: none;
}

.tc-select-menu {
  --tc-select-menu-surface: var(--tc-surface-raised);
  --tc-select-menu-anchor: 50%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--tc-select-menu-gap);
  max-height: var(--tc-select-menu-max-height);
  overflow: visible;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: var(--tc-select-menu-padding);
  border-radius: var(--tc-select-menu-radius);
  pointer-events: auto;
  transform-origin: var(--tc-select-menu-anchor) calc(100% + 9px);
  animation: tc-select-menu-rise 55ms ease-out;
}

.tc-select-menu::after {
  content: "";
  display: none;
  position: absolute;
  left: clamp(18px, var(--tc-select-menu-anchor), calc(100% - 18px));
  width: 24px;
  height: 13px;
  border: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.tc-select.is-above .tc-select-menu {
  transform-origin: var(--tc-select-menu-anchor) calc(100% + 9px);
}

.tc-select.is-above .tc-select-menu::after,
.tc-select-menu[data-tc-select-placement="top"]::after {
  bottom: -12px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.tc-select:not(.is-above) .tc-select-menu::after,
.tc-select-menu[data-tc-select-placement="bottom"]::after {
  top: -12px;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.tc-select-menu[hidden] {
  display: none;
}

.tc-select-search[hidden] {
  display: none;
}

.tc-select-search {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0 0 var(--tc-space-3);
}

.tc-select-search-input {
  appearance: none;
  width: 100%;
  min-height: var(--tc-control-height-md);
  border: 1px solid var(--tc-editor-ui-line, var(--tc-select-line));
  border-radius: var(--tc-select-control-radius);
  padding: 0 var(--tc-select-search-padding-x);
  font: inherit;
  font-size: var(--tc-type-select-search-input-size);
  font-weight: var(--tc-type-select-search-input-weight);
  line-height: 1;
  outline: 0;
}

.tc-select-search-input::placeholder {
  opacity: 0.78;
}

/* Touch affordance: larger tap targets on touch-primary devices only. */
@media (hover: none) and (pointer: coarse) {
  .tc-select-menu {
    padding: var(--tc-select-menu-padding-touch);
  }

  .tc-select-search {
    padding-bottom: var(--tc-select-search-padding-bottom-touch);
  }

  .tc-select-search-input {
    min-height: var(--tc-control-height-field);
    padding: 0 var(--tc-select-search-padding-x-touch);
    font-size: var(--tc-type-select-search-input-size);
    font-weight: var(--tc-type-select-search-input-weight);
  }
}

.tc-select-options {
  min-height: 0;
  display: grid;
  gap: var(--tc-select-options-gap);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.tc-select--gallery .tc-select-options {
  cursor: grab;
}

.tc-select--gallery .tc-select-options.is-drag-scrolling {
  cursor: grabbing;
  user-select: none;
}

.tc-select--gallery .tc-select-options.is-drag-scrolling .tc-select-option {
  pointer-events: none;
}

.tc-select-option {
  appearance: none;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: var(--tc-select-option-min-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7px;
  align-items: center;
  gap: var(--tc-select-option-gap);
  overflow: hidden;
  border-radius: var(--tc-select-option-radius);
  padding: var(--tc-select-option-padding-y) var(--tc-select-option-padding-x);
  font-size: var(--tc-select-option-font-size);
  font-weight: var(--tc-select-option-font-weight);
  line-height: var(--tc-select-option-line-height);
  text-align: left;
  cursor: pointer;
}

.tc-select-option[hidden],
.tc-select-option.is-filtered-out,
.tc-select-empty[hidden],
.tc-select-empty.is-filtered-out {
  display: none;
}

.tc-select-option::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  border-radius: inherit;
  background: var(--tc-progress-fill-bg);
  opacity: 0;
  transform: scaleX(var(--tc-select-progress, 0));
  transform-origin: var(--tc-progress-fill-origin);
  pointer-events: none;
  transition: var(--tc-progress-fill-transition);
}

.tc-select-option > * {
  position: relative;
  z-index: 1;
}

.tc-select-option:not(.has-badge)::after {
  content: "";
  position: relative;
  z-index: 1;
  width: var(--tc-icon-size-sm);
  height: var(--tc-icon-size-sm);
  justify-self: end;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-color-transparent);
}

.tc-select-option.is-loading {
  color: var(--tc-select-text);
  box-shadow: none;
}

.tc-select-option.is-loading::before {
  opacity: var(--tc-progress-fill-opacity);
}

.tc-select-option.has-badge {
  grid-template-columns: minmax(0, 1fr) auto;
}

.tc-select-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-select-option[aria-selected="true"] {
  outline: 0;
}

.tc-select-option[aria-selected="true"]:not(.has-badge)::after {
  background: currentColor;
}

.tc-select-option:disabled,
.tc-select-option[aria-disabled="true"] {
  cursor: default;
  opacity: 0.42;
}

.tc-select-empty {
  padding: var(--tc-select-empty-padding-y) var(--tc-select-empty-padding-x);
  color: var(--tc-select-muted);
  font-size: var(--tc-type-select-empty-size);
  text-align: center;
}

.tc-select--gallery .tc-select-empty {
  grid-column: 1 / -1;
  align-self: stretch;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--tc-select-empty-gallery-gap);
  min-height: 100%;
  height: 100%;
  padding: var(--tc-select-empty-gallery-padding-y) var(--tc-select-empty-gallery-padding-x);
  border-radius: inherit;
  background: var(--tc-color-transparent);
  color: var(--tc-text-faint);
  text-align: center;
}

.tc-select-empty__title,
.tc-select-empty__copy {
  margin: 0;
}

.tc-select-empty__title {
  max-width: min(360px, 92%);
  font-size: var(--tc-type-select-empty-title-size);
  font-weight: var(--tc-type-select-empty-title-weight);
  line-height: var(--tc-type-select-empty-title-line);
}

.tc-select-empty__copy {
  max-width: min(320px, 88%);
  font-size: var(--tc-type-select-empty-copy-size);
  font-weight: var(--tc-type-select-empty-copy-weight);
  line-height: var(--tc-type-select-empty-copy-line);
}

.tc-select-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tc-select-empty-actions-gap);
  margin-top: var(--tc-select-empty-actions-margin-top);
}

.tc-select-empty__action {
  appearance: none;
  min-height: var(--tc-control-height-sm);
  padding: 0 var(--tc-select-empty-action-padding-x);
  border: 1px solid var(--tc-button-border);
  border-radius: var(--tc-select-empty-action-radius);
  cursor: pointer;
  font: inherit;
  font-size: var(--tc-type-select-empty-action-size);
  font-weight: var(--tc-type-select-empty-action-weight);
  line-height: var(--tc-type-select-empty-action-line);
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.tc-select-empty__action:hover,
.tc-select-empty__action:focus-visible {
  outline: 0;
}

.tc-select--gallery .tc-select-menu {
  --tc-select-menu-surface: var(--tc-editor-group-base);
  --tc-select-accent: var(--tc-text-muted);
  --tc-select-gallery-card-radius: var(--tc-select-gallery-card-radius-default);
  --tc-select-gallery-preview-radius: var(--tc-select-gallery-preview-radius-default);
  --tc-select-gallery-scroll-radius: var(--tc-select-gallery-scroll-radius-default);
  container-type: inline-size;
  gap: var(--tc-select-gallery-shell-gap);
  padding: var(--tc-select-gallery-shell-space);
  background: var(--tc-select-gallery-popup-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-radius: var(--tc-select-gallery-shell-radius);
  overflow: hidden;
}

.tc-select.tc-select--gallery .tc-select-menu {
  grid-template-rows: auto auto minmax(0, 1fr);
  animation: none;
  gap: var(--tc-select-gallery-toolbar-gap);
  padding: var(--tc-select-gallery-shell-space);
  border-radius: var(--tc-select-gallery-shell-radius);
  overflow: hidden;
  box-shadow: none;
  contain: layout paint style;
}

/* Touch UI (stamped by the runtime profile): the gallery is a fullscreen
   sheet, so it drops the popup radius and respects device safe areas. */
:root[data-tc-touch-ui="true"] .tc-select.tc-select--gallery .tc-select-menu {
  --tc-select-gallery-popup-bg: var(--tc-select-gallery-popup-bg-mobile);
  border-radius: var(--tc-radius-none);
  padding-top: max(var(--tc-select-gallery-shell-space), env(safe-area-inset-top));
  padding-bottom: max(var(--tc-select-gallery-shell-space), env(safe-area-inset-bottom));
}

/* One two-column gallery card system everywhere. Preview height follows the
   shared media ratio so popup and mobile cards preserve the same proportions
   as the index gallery. */
@supports (width: 1cqw) {
  .tc-select.tc-select--gallery .tc-select-options {
    --tc-select-gallery-columns-count: 2;
    --tc-select-gallery-columns: repeat(var(--tc-select-gallery-columns-count), minmax(0, 1fr));
    --tc-select-gallery-card-width: calc(
      (100cqw - (var(--tc-select-gallery-columns-count) - 1) * var(--tc-select-gallery-grid-gap))
      / var(--tc-select-gallery-columns-count)
    );
    --tc-select-gallery-preview-width: calc(
      var(--tc-select-gallery-card-width) - (var(--tc-select-gallery-card-padding) * 2)
    );
    --tc-select-gallery-thumb-height: max(
      56px,
      calc(var(--tc-select-gallery-preview-width) / var(--tc-select-gallery-media-aspect-value))
    );
  }

}

:root[data-tc-touch-ui="true"] .tc-select.tc-select--gallery .tc-select-options {
  --tc-select-gallery-columns-count: 2;
  --tc-select-gallery-columns: repeat(2, minmax(0, 1fr));
}

.tc-select--gallery .tc-select-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tc-select-gallery-toolbar-gap);
  padding: 0;
}

.tc-select--gallery .tc-select-search-input {
  border-color: var(--tc-color-transparent);
  border-radius: var(--tc-select-gallery-search-radius);
  background: var(--tc-surface-control);
  min-height: var(--tc-select-gallery-search-height);
  height: var(--tc-select-gallery-search-height);
  padding: var(--tc-select-gallery-search-padding);
  font-size: var(--tc-type-popup-gallery-search-input-size);
  font-weight: var(--tc-type-popup-gallery-search-input-weight);
  line-height: 1;
}

.tc-select-gallery-close {
  appearance: none;
  min-height: var(--tc-select-gallery-search-height);
  height: var(--tc-select-gallery-search-height);
  border-radius: var(--tc-select-gallery-search-radius);
  padding: var(--tc-select-gallery-close-padding);
  font: inherit;
  font-size: var(--tc-type-popup-gallery-close-size);
  font-weight: var(--tc-type-popup-gallery-close-weight);
  line-height: var(--tc-type-popup-gallery-close-line);
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.82;
  box-shadow: none;
}

.tc-select-gallery-close[hidden] {
  display: none;
}

.tc-select-gallery-close:hover,
.tc-select-gallery-close:focus-visible {
  opacity: 1;
  outline: 0;
  box-shadow: none;
}

.tc-select--gallery .tc-select-search-input:focus,
.tc-select--gallery .tc-select-search-input:focus-visible,
.tc-select.tc-select--gallery .tc-select-search-input:focus,
.tc-select.tc-select--gallery .tc-select-search-input:focus-visible {
  border-color: var(--tc-color-transparent);
  background: var(--tc-surface-control-hover);
  box-shadow: none;
}

.tc-select--gallery .tc-select-options {
  grid-template-columns: var(--tc-select-gallery-columns);
  column-gap: var(--tc-select-gallery-grid-gap);
  row-gap: var(--tc-select-gallery-row-gap);
  padding: var(--tc-select-gallery-edge-space) var(--tc-select-gallery-edge-space) var(--tc-select-gallery-bottom-space);
  scroll-padding-bottom: var(--tc-select-gallery-bottom-space);
}

.tc-select--gallery .tc-select-option {
  background: var(--tc-select-gallery-card-bg);
}

.tc-select--gallery .tc-select-option.has-preview {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(1rem, auto);
  gap: var(--tc-select-gallery-gap);
  padding: var(--tc-select-gallery-card-padding);
  border: 0;
  border-radius: var(--tc-select-gallery-card-radius);
  background: var(--tc-select-gallery-card-bg);
  color: var(--tc-select-text);
  opacity: 0.72;
  filter: var(--tc-filter-thumb-muted);
  box-shadow: none;
  transition:
    opacity 150ms ease,
    filter 150ms ease,
    background 150ms ease;
}

.tc-select--gallery .tc-select-option.has-preview::before {
  top: auto;
  height: 3px;
  border-radius: var(--tc-radius-none) var(--tc-radius-none) inherit inherit;
  background: var(--tc-editor-ui-line-strong);
}

.tc-select--gallery .tc-select-option.has-preview.is-loading {
  opacity: var(--tc-select-dim-opacity, 0.58);
  filter: var(--tc-select-dim-filter);
}

.tc-select--gallery .tc-select-option.has-preview::after {
  display: none;
}

.tc-select--gallery .tc-select-option.has-applied-status .tc-select-option-content {
  display: flex;
  align-items: center;
  gap: var(--tc-select-option-gap);
}

.tc-select--gallery .tc-select-option-applied {
  display: none;
  margin-left: auto;
  color: var(--tc-accent-main);
  font-size: calc(var(--tc-select-gallery-label-size) * 0.72);
  font-weight: var(--tc-font-weight-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tc-select--gallery .tc-select-option[aria-selected="true"] .tc-select-option-applied {
  display: inline-flex;
}

.tc-select--gallery .tc-select-option.has-preview .tc-select-option-label {
  color: var(--tc-select-gallery-card-label-color);
}

/* Exact shared thumbnail-gallery contract for every searchable style dropdown. */
.tc-select.tc-select--gallery .tc-select-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tc-select-gallery-toolbar-gap);
  padding: 0;
}

.tc-select.tc-select--gallery .tc-select-search-input {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: var(--tc-select-gallery-search-height);
  height: var(--tc-select-gallery-search-height);
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-select-gallery-search-radius);
  background: var(--tc-surface-control);
  color: var(--tc-select-text);
  padding: var(--tc-select-gallery-search-padding);
  font: inherit;
  font-size: var(--tc-type-popup-gallery-search-input-size);
  font-weight: var(--tc-type-popup-gallery-search-input-weight);
  line-height: 1;
  outline: 0;
  box-shadow: none;
}

.tc-select.tc-select--gallery .tc-select-search-input[readonly],
.tc-select.tc-select--gallery .tc-select-search-input[inputmode="none"],
.tc-select.tc-select--gallery .tc-select-search-input.is-mobile-keyboard-target {
  caret-color: var(--tc-color-transparent);
}

.tc-select.tc-select--gallery .tc-select-search-input::placeholder {
  color: var(--tc-select-muted);
  opacity: 0.82;
}

.tc-select.tc-select--gallery .tc-select-search-input[readonly]:focus::placeholder,
.tc-select.tc-select--gallery .tc-select-search-input[inputmode="none"]:focus::placeholder,
.tc-select.tc-select--gallery .tc-select-search-input.is-mobile-keyboard-target::placeholder {
  color: var(--tc-color-transparent);
  opacity: 0;
}

.tc-select.tc-select--gallery .tc-select-options {
  box-sizing: border-box;
  width: calc(100% + var(--tc-select-gallery-scroll-lane));
  max-width: none;
  margin-right: calc(var(--tc-select-gallery-scroll-lane) * -1);
  border-radius: var(--tc-select-gallery-scroll-radius);
  clip-path: inset(0 round var(--tc-select-gallery-scroll-radius));
  grid-template-columns: var(--tc-select-gallery-columns);
  grid-auto-rows: auto;
  column-gap: var(--tc-select-gallery-grid-gap);
  row-gap: var(--tc-select-gallery-row-gap);
  align-content: start;
  align-items: start;
  padding: 0.125rem var(--tc-select-gallery-edge-space) var(--tc-select-gallery-bottom-space);
  scroll-padding-bottom: var(--tc-select-gallery-bottom-space);
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  contain: layout paint style;
}

.tc-select.tc-select--gallery .tc-select-options.is-empty {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: var(--tc-select-gallery-shell-radius);
}

.tc-select.tc-select--gallery .tc-select-options::-webkit-scrollbar {
  width: var(--tc-scrollbar-size, 7px);
  height: var(--tc-scrollbar-size, 7px);
}

.tc-select.tc-select--gallery .tc-select-options::-webkit-scrollbar-track {
  margin-block: 10px;
  margin-inline: 10px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-color-transparent);
}

.tc-select.tc-select--gallery .tc-select-options::-webkit-scrollbar-thumb {
  min-height: var(--tc-scrollbar-thumb-min, 28px);
  border: var(--tc-scrollbar-thumb-inset, 2px) solid var(--tc-color-transparent);
  border-radius: var(--tc-radius-pill);
}

.tc-select.tc-select--gallery .tc-select-options::-webkit-scrollbar-button,
.tc-select.tc-select--gallery .tc-select-options::-webkit-scrollbar-button:single-button,
.tc-select.tc-select--gallery .tc-select-options::-webkit-scrollbar-button:vertical:start:decrement,
.tc-select.tc-select--gallery .tc-select-options::-webkit-scrollbar-button:vertical:end:increment,
.tc-select.tc-select--gallery .tc-select-options::-webkit-scrollbar-button:horizontal:start:decrement,
.tc-select.tc-select--gallery .tc-select-options::-webkit-scrollbar-button:horizontal:end:increment {
  display: none;
  width: 0;
  height: 0;
  background: none;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview {
  display: flex;
  flex-direction: column;
  gap: var(--tc-gallery-card-view-shell-gap);
  /* The min-height mirrors the fixed rows: intrinsic grid row sizing never
     sees aspect-ratio-derived heights, so the card must carry its own
     definite height or the options grid collapses rows and cards overlap. */
  min-height: calc(
    var(--tc-select-gallery-thumb-height) +
    var(--tc-select-gallery-title-height) +
    var(--tc-gallery-card-view-shell-gap) +
    var(--tc-select-gallery-card-padding) +
    var(--tc-select-gallery-card-padding)
  );
  padding: var(--tc-select-gallery-card-padding);
  border: 0;
  border-radius: var(--tc-select-gallery-card-radius);
  background: var(--tc-select-gallery-card-bg);
  opacity: 1;
  filter: none;
  box-shadow: none;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 10rem 11rem;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview::before {
  position: absolute;
  left: var(--tc-select-gallery-card-padding);
  right: var(--tc-select-gallery-card-padding);
  bottom: 3px;
  top: auto;
  width: auto;
  height: var(--tc-select-gallery-progress-height);
  border-radius: var(--tc-radius-pill);
  z-index: 3;
  background: var(--tc-editor-ui-line-strong);
  transform: scaleX(var(--tc-select-progress, 0));
  transform-origin: left center;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview::after {
  display: none;
  content: none;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview[hidden],
.tc-select.tc-select--gallery .tc-select-option.has-preview.is-filtered-out {
  display: none;
}

.tc-select.tc-select--gallery .tc-select-option-preview {
  flex: 0 0 var(--tc-select-gallery-thumb-height);
  height: var(--tc-select-gallery-thumb-height);
  aspect-ratio: auto;
  contain: paint;
}

.tc-select.tc-select--gallery .tc-select-option-preview-image {
  width: auto;
  height: auto;
  max-width: var(--tc-select-gallery-preview-image-max-width);
  max-height: var(--tc-select-gallery-preview-image-max-height);
  object-fit: contain;
  object-position: center;
  align-self: center;
  justify-self: center;
  opacity: 1;
  filter: none;
}

.tc-select.tc-select--gallery .tc-gallery-card__preview.mt-animation-preset-preview {
  overflow: hidden;
  place-items: center;
  color: var(--tc-text-main);
}

.tc-select.tc-select--gallery .tc-select-option-content {
  flex: 0 0 var(--tc-select-gallery-title-height);
  height: var(--tc-select-gallery-title-height);
  min-height: var(--tc-select-gallery-title-height);
  z-index: 2;
}

.tc-select.tc-select--gallery .tc-select-option-actions {
  height: 100%;
  gap: var(--tc-gallery-card-view-actions-gap);
  margin-left: auto;
}

.tc-select.tc-select--gallery .tc-select-option-touch-apply {
  --tc-gallery-editor-button-width: 100%;
  --tc-gallery-editor-button-height: var(--tc-select-gallery-touch-apply-height);
  --tc-gallery-editor-button-radius: var(--tc-select-gallery-preview-radius);
  --tc-gallery-editor-button-border: var(--tc-button-bg);
  --tc-gallery-editor-button-bg: var(--tc-button-bg);
  --tc-gallery-editor-button-text: var(--tc-button-text-hover);
  box-sizing: border-box;
  display: none;
  width: 100%;
  min-width: 0;
  height: var(--tc-gallery-editor-button-height);
  min-height: var(--tc-gallery-editor-button-height);
  align-items: center;
  justify-content: center;
  margin: 0;
  background-clip: border-box;
  font-size: var(--tc-select-gallery-label-size);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tc-select.tc-select--gallery
  .tc-select-option.has-touch-preview-apply.is-touch-preview-armed
  .tc-select-option-content {
  position: absolute;
  left: var(--tc-select-gallery-card-padding);
  right: var(--tc-select-gallery-card-padding);
  bottom: var(--tc-select-gallery-card-padding);
  grid-column: auto;
  grid-row: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  justify-items: stretch;
  box-sizing: border-box;
  width: auto;
  height: calc(
    var(--tc-select-gallery-touch-apply-height) +
    var(--tc-select-gallery-gap)
  );
  min-height: 0;
  padding: var(--tc-select-gallery-gap) 0 0;
  border-radius: var(--tc-select-gallery-preview-radius);
  background: var(--tc-select-gallery-card-bg);
  z-index: 4;
}

.tc-select.tc-select--gallery
  .tc-select-option.has-touch-preview-apply.is-touch-preview-armed
  .tc-select-option-actions {
  display: flex;
  flex: 1 1 100%;
  width: 100%;
  min-width: 100%;
  max-width: none;
  height: var(--tc-select-gallery-touch-apply-height);
  margin-left: 0;
  justify-content: stretch;
}

.tc-select.tc-select--gallery
  .tc-select-option.has-touch-preview-apply.is-touch-preview-armed
  :is(.tc-select-option-label, .tc-select-option-applied, .tc-select-option-favorite, .tc-select-option-bookmark) {
  display: none;
  pointer-events: none;
}

.tc-select.tc-select--gallery
  .tc-select-option.has-touch-preview-apply.is-touch-preview-armed
  .tc-select-option-touch-apply {
  display: inline-flex;
  flex: 1 1 100%;
  width: 100%;
  min-width: 100%;
  max-width: none;
}

.tc-select.tc-select--gallery
  .tc-select-option.has-touch-preview-apply.is-touch-preview-applying
  .tc-select-option-touch-apply {
  opacity: var(--tc-state-disabled-opacity);
  pointer-events: none;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview .tc-select-option-label {
  transform: none;
  color: var(--tc-select-gallery-card-label-color);
  opacity: 1;
  transition: opacity 150ms ease, color 150ms ease;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview .tc-select-option-bookmark {
  position: relative;
  margin: 0 var(--tc-space-hairline) 0 0;
  top: auto;
  right: auto;
  width: var(--tc-gallery-card-action-icon-size-mobile);
  height: var(--tc-gallery-card-action-icon-size-mobile);
  color: var(--tc-select-gallery-card-action-color);
  opacity: var(--tc-select-gallery-card-action-opacity);
  filter: var(--tc-select-gallery-card-action-filter);
  transform: translate(-2px, 1px);
}

.tc-select.tc-select--gallery .tc-select-option-favorite {
  position: relative;
  z-index: 2;
  width: var(--tc-gallery-card-action-icon-size-mobile);
  height: var(--tc-gallery-card-action-icon-size-mobile);
  display: grid;
  place-items: center;
  color: var(--tc-select-gallery-card-action-color);
  opacity: var(--tc-select-gallery-card-action-opacity);
  cursor: pointer;
  filter: var(--tc-select-gallery-card-action-filter);
  transform: none;
  transition: color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview .tc-select-option-favorite {
  margin: 0 var(--tc-space-hairline) 0 0;
  opacity: var(--tc-select-gallery-card-action-opacity);
}

.tc-select.tc-select--gallery .tc-select-option-favorite svg {
  width: 100%;
  height: 100%;
  fill: var(--tc-color-transparent);
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.tc-select.tc-select--gallery .tc-select-option-favorite:hover,
.tc-select.tc-select--gallery .tc-select-option-favorite:focus-visible,
.tc-select.tc-select--gallery .tc-select-option-favorite.is-favorited {
  color: var(--tc-select-gallery-card-action-color-hover);
  opacity: var(--tc-select-gallery-card-action-opacity-hover);
  outline: 0;
}

.tc-select.tc-select--gallery .tc-select-option-favorite.is-favorited svg {
  fill: currentColor;
  stroke: none;
}

.tc-select-menu.has-style-apply-scope .tc-select-option-favorite {
  z-index: 1;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview .tc-select-option-bookmark svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):hover,
.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):focus-visible,
.tc-select.tc-select--gallery .tc-select-option.has-preview[aria-selected="true"] {
  opacity: 1;
  filter: none;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):hover .tc-select-option-preview-image,
.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):focus-visible .tc-select-option-preview-image,
.tc-select.tc-select--gallery .tc-select-option.has-preview[aria-selected="true"] .tc-select-option-preview-image {
  opacity: 1;
  filter: none;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):hover .tc-select-option-label,
.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):focus-visible .tc-select-option-label,
.tc-select.tc-select--gallery .tc-select-option.has-preview[aria-selected="true"] .tc-select-option-label {
  color: var(--tc-select-gallery-card-label-color);
  opacity: 1;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):hover .tc-select-option-bookmark,
.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):focus-visible .tc-select-option-bookmark,
.tc-select.tc-select--gallery .tc-select-option.has-preview[aria-selected="true"] .tc-select-option-bookmark {
  color: var(--tc-select-gallery-card-action-color-hover);
  opacity: var(--tc-select-gallery-card-action-opacity-hover);
}

.tc-select.tc-select--gallery .tc-select-option.has-preview.is-loading {
  opacity: 1;
  filter: none;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview.is-loading .tc-select-option-preview-image {
  opacity: var(--tc-select-dim-opacity, 0.58);
  filter: var(--tc-select-dim-filter);
}

.tc-select.tc-select--gallery .tc-select-option.has-preview.is-loading .tc-select-option-label {
  opacity: var(--tc-select-dim-opacity, 0.58);
}

@keyframes tc-select-menu-rise {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tc-select-button {
  border-color: var(--tc-control-border);
  background: var(--tc-control-bg);
  color: var(--tc-control-text);
  transition:
    border-color var(--tc-transition-fast),
    background-color var(--tc-transition-fast),
    color var(--tc-transition-fast),
    opacity var(--tc-transition-fast);
}

.tc-select-button:hover,
.tc-select-button:focus-visible,
.tc-select.is-open .tc-select-button {
  border-color: var(--tc-control-border-hover);
  background: var(--tc-control-bg-hover);
  color: var(--tc-control-text-hover);
  outline: 0;
  box-shadow: none;
}

.tc-select-menu {
  border: 1px solid var(--tc-color-transparent);
  background: var(--tc-select-menu-bg, var(--tc-editor-ui-popup));
  box-shadow: var(--tc-editor-ui-popup-shadow, var(--tc-shadow-popup));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.tc-select-menu::after {
  background: var(--tc-select-menu-bg, var(--tc-editor-ui-popup));
  filter: none;
}

.tc-select-search-input {
  border-color: var(--tc-editor-ui-line);
  background: var(--tc-editor-ui-control-bg);
  color: var(--tc-select-gallery-card-label-color);
}

.tc-select-search-input::placeholder {
  color: var(--tc-text-disabled);
}

.tc-select-search-input:focus,
.tc-select-search-input:focus-visible {
  border-color: var(--tc-editor-ui-line-strong);
  background: var(--tc-editor-ui-control-bg-hover);
  color: var(--tc-text-main);
  outline: 0;
  box-shadow: none;
}

.tc-select-option {
  border: 1px solid var(--tc-color-transparent);
  background: var(--tc-color-transparent);
  color: var(--tc-text-muted);
  transition:
    border-color var(--tc-transition-fast),
    background-color var(--tc-transition-fast),
    color var(--tc-transition-fast),
    opacity var(--tc-transition-fast);
}

.tc-select-option:not(:disabled):hover,
.tc-select-option:not(:disabled):focus-visible {
  border-color: var(--tc-control-border-hover);
  background: var(--tc-control-bg-hover);
  color: var(--tc-control-text-hover);
  outline: 0;
  box-shadow: none;
}

.tc-select-option[aria-selected="true"] {
  border-color: var(--tc-control-border-active);
  background: var(--tc-control-bg-active);
  color: var(--tc-control-text-hover);
  box-shadow: none;
}

.tc-select-option:disabled,
.tc-select-option[aria-disabled="true"],
.tc-select-option.is-disabled {
  color: var(--tc-text-disabled);
  opacity: var(--tc-state-disabled-opacity);
}

.tc-select-value-preview,
.tc-select-option-preview {
  border-color: var(--tc-card-border);
}

.tc-select-empty,
.tc-select--gallery .tc-select-empty {
  color: var(--tc-text-disabled);
}

.tc-select-empty__title {
  color: var(--tc-text-main);
}

.tc-select-empty__copy {
  color: var(--tc-text-disabled);
}

.tc-select-empty__action {
  border-color: var(--tc-control-border-active);
  background: var(--tc-control-bg-active);
  color: var(--tc-control-text);
}

.tc-select-empty__action:hover,
.tc-select-empty__action:focus-visible {
  border-color: var(--tc-control-border-active);
  background: var(--tc-button-bg-hover);
  color: var(--tc-control-text-hover);
}

.tc-select.tc-select--gallery .tc-select-menu,
.tc-select--gallery .tc-select-menu {
  --tc-select-menu-surface: var(--tc-select-gallery-popup-bg);
  --tc-select-accent: var(--tc-text-muted);
  border: 1px solid var(--tc-color-transparent);
  background: var(--tc-select-gallery-popup-bg);
  box-shadow: var(--tc-editor-ui-popup-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.tc-select.tc-select--gallery .tc-select-search-input,
.tc-select--gallery .tc-select-search-input {
  border-color: var(--tc-color-transparent);
  background: var(--tc-surface-control);
  color: var(--tc-text-main);
}

.tc-select.tc-select--gallery .tc-select-search-input:focus,
.tc-select.tc-select--gallery .tc-select-search-input:focus-visible,
.tc-select--gallery .tc-select-search-input:focus,
.tc-select--gallery .tc-select-search-input:focus-visible {
  border-color: var(--tc-color-transparent);
  background: var(--tc-surface-control-hover);
  color: var(--tc-text-main);
}

.tc-select-gallery-close {
  border: 1px solid var(--tc-color-transparent);
  background: var(--tc-surface-control);
  color: var(--tc-control-text);
}

.tc-select-gallery-close:hover,
.tc-select-gallery-close:focus-visible {
  border-color: var(--tc-color-transparent);
  background: var(--tc-surface-control-hover);
  color: var(--tc-control-text-hover);
}

.tc-select.tc-select--gallery .tc-select-options {
  scrollbar-color: var(--tc-scrollbar-thumb) var(--tc-color-transparent);
}

.tc-select.tc-select--gallery .tc-select-options.is-empty {
  background: var(--tc-select-gallery-popup-bg);
}

.tc-select.tc-select--gallery .tc-select-options::-webkit-scrollbar-thumb {
  background: var(--tc-scrollbar-thumb);
  background-clip: content-box;
}

.tc-select.tc-select--gallery .tc-select-options::-webkit-scrollbar-thumb:hover {
  background: var(--tc-scrollbar-thumb-hover);
  background-clip: content-box;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview,
.tc-select--gallery .tc-select-option.has-preview {
  border: 1px solid var(--tc-select-gallery-card-border);
  background: var(--tc-select-gallery-card-bg);
  color: var(--tc-select-gallery-card-label-color);
  box-shadow: none;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview::before,
.tc-select--gallery .tc-select-option.has-preview::before {
  background: var(--tc-control-border-active);
}

.tc-select.tc-select--gallery .tc-select-option-preview,
.tc-select--gallery .tc-select-option-preview {
  border: 0;
  background-color: var(--tc-checker-base);
}

.tc-select.tc-select--gallery .tc-select-option.has-preview .tc-select-option-label,
.tc-select--gallery .tc-select-option.has-preview .tc-select-option-label {
  color: var(--tc-select-gallery-card-label-color);
}

.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):hover,
.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):focus-visible,
.tc-select--gallery .tc-select-option.has-preview:not(:disabled):hover,
.tc-select--gallery .tc-select-option.has-preview:not(:disabled):focus-visible {
  border-color: var(--tc-color-transparent);
  background: var(--tc-select-gallery-card-bg-hover);
  color: var(--tc-select-gallery-card-label-color);
}

.tc-select.tc-select--gallery .tc-select-option.has-preview[aria-selected="true"],
.tc-select--gallery .tc-select-option.has-preview[aria-selected="true"] {
  border-color: var(--tc-color-transparent);
  background: var(--tc-select-gallery-card-bg-active);
  color: var(--tc-select-gallery-card-label-color);
}

.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):hover .tc-select-option-label,
.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):focus-visible .tc-select-option-label,
.tc-select.tc-select--gallery .tc-select-option.has-preview[aria-selected="true"] .tc-select-option-label,
.tc-select--gallery .tc-select-option.has-preview:not(:disabled):hover .tc-select-option-label,
.tc-select--gallery .tc-select-option.has-preview:not(:disabled):focus-visible .tc-select-option-label,
.tc-select--gallery .tc-select-option.has-preview[aria-selected="true"] .tc-select-option-label {
  color: var(--tc-select-gallery-card-label-color);
}

.tc-select.tc-select--gallery .tc-select-option.has-preview .tc-select-option-bookmark,
.tc-select.tc-select--gallery .tc-select-option-favorite {
  filter: none;
}

.tc-select.tc-select--gallery .tc-select-option-favorite:hover,
.tc-select.tc-select--gallery .tc-select-option-favorite:focus-visible,
.tc-select.tc-select--gallery .tc-select-option-favorite.is-favorited {
  color: var(--tc-select-gallery-card-action-color-hover);
}

/* Filled popup-gallery icons: inactive state stays dim, active state keeps existing color. */
.tc-select-bookmark-icon svg,
.tc-select-option-bookmark svg,
.tc-select.tc-select--gallery .tc-select-option-favorite svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.tc-select.tc-select--gallery .tc-select-option.has-preview .tc-select-option-bookmark,
.tc-select.tc-select--gallery .tc-select-option-favorite {
  color: var(--tc-select-gallery-card-action-color);
  opacity: var(--tc-select-gallery-card-action-opacity);
}

.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):hover .tc-select-option-bookmark,
.tc-select.tc-select--gallery .tc-select-option.has-preview:not(:disabled):focus-visible .tc-select-option-bookmark,
.tc-select.tc-select--gallery .tc-select-option.has-preview[aria-selected="true"] .tc-select-option-bookmark,
.tc-select.tc-select--gallery .tc-select-option-favorite:hover,
.tc-select.tc-select--gallery .tc-select-option-favorite:focus-visible {
  color: var(--tc-select-gallery-card-action-color-hover);
  opacity: var(--tc-select-gallery-card-action-opacity-hover);
}

.tc-select.tc-select--gallery .tc-select-option-favorite.is-favorited {
  color: var(--tc-select-gallery-card-action-color-active);
  opacity: var(--tc-select-gallery-card-action-opacity-active);
}

/* Popup gallery favorite clarity: mirrors index card icon colors and active state. */
.tc-select.tc-select--gallery .tc-select-option-favorite:not(.is-favorited) {
  color: var(--tc-select-gallery-card-action-color);
  opacity: var(--tc-select-gallery-card-action-opacity);
}

.tc-select.tc-select--gallery .tc-select-option-favorite:not(.is-favorited):hover,
.tc-select.tc-select--gallery .tc-select-option-favorite:not(.is-favorited):focus-visible {
  color: var(--tc-select-gallery-card-action-color-hover);
  opacity: var(--tc-select-gallery-card-action-opacity-hover);
}

.tc-select.tc-select--gallery .tc-select-option-favorite.is-favorited,
.tc-select.tc-select--gallery .tc-select-option-favorite.is-favorited:hover,
.tc-select.tc-select--gallery .tc-select-option-favorite.is-favorited:focus-visible {
  color: var(--tc-select-gallery-card-action-color-active);
  opacity: var(--tc-select-gallery-card-action-opacity-active);
}
}

/* source: shared/styles/components/compact-control-popups.css */
@layer components {
/* Compact control popup menus and options. */
.compact-select-menu__option .tc-select-option-label {
  width: 100%;
  display: block;
  min-width: 0;
  font-size: var(--compact-font-popup-option, var(--tc-type-compact-popup-option-size));
  font-weight: var(--tc-type-compact-popup-option-weight);
  line-height: var(--tc-type-compact-popup-option-line);
  text-align: left;
}

.compact-select-menu__option.tc-select-option::after,
.compact-select-menu__option.tc-select-option[aria-selected="true"]:not(.has-badge)::after {
  display: none;
  content: none;
}

.compact-select-menu__option[aria-disabled="true"] .tc-select-option-label {
  font-weight: var(--tc-type-compact-popup-option-muted-weight);
}

.compact-select-menu__option[aria-disabled="true"] .tc-select-option-label em {
  color: var(--tc-editor-ui-popup-text-strong);
  font-style: italic;
  font-weight: var(--tc-type-compact-popup-option-emphasis-weight);
}

.compact-select-menu__option .tc-select-option-label .compact-option-light-emphasis {
  color: var(--tc-editor-ui-popup-text-muted);
  font-style: italic;
  font-weight: var(--tc-type-compact-popup-option-muted-weight);
}

.compact-select-menu__option.tc-select-option {
  width: var(--tc-compact-popup-item-width);
  max-width: 100%;
  min-height: var(--tc-compact-select-option-min-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--tc-space-0);
  touch-action: pan-y;
  border: 0;
  border-radius: var(--tc-radius-sm);
  padding: 0 var(--tc-compact-select-option-padding-x);
  background: var(--tc-compact-select-option-bg);
  color: var(--tc-compact-select-option-color);
  opacity: var(--tc-compact-select-option-opacity);
  font-size: var(--compact-font-popup-option);
  font-weight: var(--tc-type-compact-popup-option-weight);
  line-height: var(--tc-type-compact-popup-option-line);
  text-align: left;
  box-shadow: none;
  transition:
    background-color 120ms var(--tc-ease-standard),
    color 120ms var(--tc-ease-standard),
    opacity 120ms var(--tc-ease-standard);
}

.compact-select-menu__option.tc-select-option[hidden] {
  display: none;
}

.compact-popup-subgroup--scroll-list > .compact-select-menu__option.tc-select-option {
  width: 100%;
}

.compact-select-menu__options {
  display: grid;
  gap: var(--tc-space-2);
}

.compact-select-menu__options[hidden] {
  display: none;
}

.compact-popup-subgroup--scroll-list {
  cursor: grab;
}

.compact-popup-subgroup--scroll-list.is-drag-scrolling {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.compact-popup-subgroup--scroll-list.is-drag-scrolling > .compact-select-menu__option.tc-select-option {
  cursor: grabbing;
}

.compact-popup-subgroup--scroll-list.is-wheel-scrolling > .compact-select-menu__option.tc-select-option {
  transition: none;
}

.compact-select-menu__option.has-variation-action {
  gap: var(--tc-space-2);
  padding-right: var(--tc-space-1);
}

.compact-select-menu__option.has-variation-action > .tc-select-option-label {
  flex: 1 1 auto;
  min-width: 0;
}

.compact-select-menu__option.tc-select-option:not(:disabled):not([aria-disabled="true"]):hover,
.compact-select-menu__option.tc-select-option:not(:disabled):not([aria-disabled="true"]):focus-visible {
  border-color: var(--tc-color-transparent);
  background: var(--tc-compact-select-option-hover-bg);
  color: var(--tc-compact-select-option-hover-color);
  opacity: var(--tc-compact-select-option-hover-opacity);
  outline: 0;
  box-shadow: none;
}

.compact-popup-subgroup--scroll-list.is-wheel-scrolling > .compact-select-menu__option.tc-select-option:not(:disabled):not([aria-disabled="true"]):not(.is-active):not([aria-selected="true"]):hover,
.compact-popup-subgroup--scroll-list.is-wheel-scrolling > .compact-select-menu__option.tc-select-option:not(:disabled):not([aria-disabled="true"]):not(.is-active):not([aria-selected="true"]):focus-visible {
  background: var(--tc-compact-select-option-bg);
  color: var(--tc-compact-select-option-color);
  opacity: var(--tc-compact-select-option-opacity);
}

.compact-select-menu__option.tc-select-option:not(:disabled):not([aria-disabled="true"]).is-active,
.compact-select-menu__option.tc-select-option:not(:disabled):not([aria-disabled="true"])[aria-selected="true"] {
  border-color: var(--tc-color-transparent);
  background: var(--tc-compact-select-option-active-bg);
  color: var(--tc-compact-select-option-active-color);
  opacity: var(--tc-compact-select-option-active-opacity);
  font-weight: var(--tc-type-compact-popup-option-active-weight);
  outline: 0;
  box-shadow: none;
}

.compact-popup-slider-menu[data-compact-menu-layout="preset-timing"]:has(
  .compact-popup-slider[data-editor-tooltip-input-id="animationStrengthRange"].is-disabled-hint-visible
) .compact-select-menu__option[aria-selected="true"] > .tc-select-option-label {
  animation:
    compact-disabled-guide-text-color
    460ms
    cubic-bezier(0.4, 0, 0.2, 1)
    0s
    var(--tc-compact-menu-attention-repeats, 2)
    both;
  will-change: color;
}

@keyframes compact-disabled-guide-text-color {
  0%,
  100% {
    color: var(--tc-compact-select-option-active-color);
  }

  50% {
    color: var(--tc-compact-disabled-hint-color);
  }
}

.compact-select-menu__option.tc-select-option:disabled,
.compact-select-menu__option.tc-select-option[aria-disabled="true"],
.compact-select-menu__option.tc-select-option[aria-disabled="true"]:hover,
.compact-select-menu__option.tc-select-option[aria-disabled="true"]:focus-visible {
  color: var(--tc-compact-select-option-disabled-color);
  opacity: var(--tc-compact-select-option-disabled-opacity);
  background: var(--tc-color-transparent);
  cursor: default;
  box-shadow: none;
}

.compact-select-menu__option.tc-select-option[aria-disabled="true"] .tc-select-option-label,
.compact-select-menu__option.tc-select-option[aria-disabled="true"] .tc-select-option-label em,
.compact-select-menu__option.tc-select-option[aria-disabled="true"] .compact-option-light-emphasis {
  color: var(--tc-compact-select-option-disabled-color);
}

.compact-select-menu__option[data-disabled-hint="true"][aria-disabled="true"] .tc-select-option-label {
  opacity: var(--tc-compact-disabled-hint-muted-opacity);
}

.compact-bubble-menu.tc-select-menu {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  min-width: var(--tc-compact-popup-min-width);
  display: grid;
  grid-template-rows: none;
  gap: var(--tc-compact-menu-gap, var(--tc-space-1-5));
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--tc-compact-menu-padding, var(--tc-space-3-5));
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: contain;
  border: var(--tc-compact-menu-border, 0);
  border-radius: var(--tc-compact-menu-radius, var(--tc-radius-lg));
  background: var(--tc-compact-menu-bg, var(--tc-editor-ui-popup));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--tc-editor-ui-popup-text);
  box-shadow: var(--tc-compact-menu-shadow, var(--tc-editor-ui-popup-shadow));
  pointer-events: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--tc-editor-ui-popup-scrollbar) var(--tc-color-transparent);
  transform-origin: var(--tc-compact-menu-anchor, 50%) calc(100% + var(--tc-compact-popup-anchor-offset));
  animation: compact-menu-rise 55ms ease-out;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.compact-select-menu--font .compact-select-menu__option.tc-select-option {
  min-height: calc(var(--tc-compact-select-option-min-height) + 4px);
}

.compact-select-menu--font .compact-select-menu__option .tc-select-option-label {
  font-size: max(var(--compact-font-popup-option, var(--tc-type-compact-popup-option-size)), 13px);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

/* Keep the popup's final occupied geometry while remote sample faces warm,
   but never expose a fallback-font frame that visibly swaps underneath it. */
.compact-select-menu--font[data-font-previews-ready="pending"] .compact-select-menu__option {
  visibility: hidden;
}

.compact-select-menu--font .compact-font-preview-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: var(--tc-compact-menu-bg, var(--tc-editor-ui-popup));
  pointer-events: auto;
}

.compact-bubble-menu.tc-select-menu::-webkit-scrollbar,
.compact-popup-subgroup--scroll-list::-webkit-scrollbar {
  width: var(--tc-scrollbar-size);
  height: var(--tc-scrollbar-size);
}

.compact-bubble-menu.tc-select-menu::-webkit-scrollbar-track,
.compact-popup-subgroup--scroll-list::-webkit-scrollbar-track {
  margin-block: var(--tc-compact-popup-scrollbar-margin);
  margin-inline: var(--tc-compact-popup-scrollbar-margin);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-color-transparent);
}

.compact-bubble-menu.tc-select-menu::-webkit-scrollbar-thumb,
.compact-popup-subgroup--scroll-list::-webkit-scrollbar-thumb {
  min-height: var(--tc-scrollbar-thumb-min);
  border: var(--tc-scrollbar-thumb-inset) solid var(--tc-color-transparent);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-editor-ui-popup-scrollbar);
  background-clip: content-box;
}

.compact-bubble-menu.tc-select-menu::-webkit-scrollbar-thumb:hover,
.compact-popup-subgroup--scroll-list::-webkit-scrollbar-thumb:hover {
  background: var(--tc-editor-ui-popup-scrollbar-hover);
  background-clip: content-box;
}

.compact-bubble-menu.tc-select-menu::-webkit-scrollbar-button,
.compact-bubble-menu.tc-select-menu::-webkit-scrollbar-button:single-button,
.compact-bubble-menu.tc-select-menu::-webkit-scrollbar-button:vertical:start:decrement,
.compact-bubble-menu.tc-select-menu::-webkit-scrollbar-button:vertical:end:increment,
.compact-bubble-menu.tc-select-menu::-webkit-scrollbar-button:horizontal:start:decrement,
.compact-bubble-menu.tc-select-menu::-webkit-scrollbar-button:horizontal:end:increment,
.compact-popup-subgroup--scroll-list::-webkit-scrollbar-button,
.compact-popup-subgroup--scroll-list::-webkit-scrollbar-button:single-button,
.compact-popup-subgroup--scroll-list::-webkit-scrollbar-button:vertical:start:decrement,
.compact-popup-subgroup--scroll-list::-webkit-scrollbar-button:vertical:end:increment,
.compact-popup-subgroup--scroll-list::-webkit-scrollbar-button:horizontal:start:decrement,
.compact-popup-subgroup--scroll-list::-webkit-scrollbar-button:horizontal:end:increment {
  display: none;
  width: 0;
  height: 0;
  background: none;
}

.compact-bubble-menu.tc-select-menu::-webkit-scrollbar-corner,
.compact-popup-subgroup--scroll-list::-webkit-scrollbar-corner {
  background: var(--tc-color-transparent);
}

.compact-bubble-menu.tc-select-menu[hidden] {
  display: none;
}

.compact-bubble-menu.tc-select-menu.compact-select-menu {
  --compact-square-size: var(--tc-compact-square-size);
  --compact-category-inset: var(--tc-compact-category-inset);
  --compact-label-space: var(--tc-compact-label-space);
  --compact-category-label-space: var(--tc-compact-select-category-label-space);
  --compact-category-pad-x: var(--tc-compact-popup-list-padding-x);
  --compact-category-pad-top: var(--compact-category-inset);
  --compact-category-pad-bottom: var(--compact-category-inset);
  --compact-font-base: var(--tc-compact-font-base);
  --compact-font-category: var(--tc-type-compact-popup-category-size);
  --compact-font-popup-option: var(--tc-type-compact-popup-option-size);
  --compact-glass-surface: var(--tc-editor-ui-popup-control);
  --compact-glass-surface-soft: var(--tc-editor-ui-popup-control-hover);
  --compact-glass-line: var(--tc-editor-ui-line);
  --compact-glass-line-strong: var(--tc-editor-ui-line-strong);
  min-width: var(--tc-compact-select-menu-min-width);
  gap: var(--tc-space-2);
  padding:
    calc(var(--compact-category-label-space) + var(--compact-category-pad-top))
    var(--compact-category-pad-x)
    calc(var(--compact-category-pad-bottom) + var(--tc-compact-popup-bottom-breathing));
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-radius-md);
  background: var(--tc-editor-ui-popup);
  box-shadow: var(--tc-editor-ui-popup-shadow);
  scrollbar-gutter: auto;
}

.compact-bubble-menu.tc-select-menu.compact-select-menu.has-popup-slider {
  box-sizing: border-box;
  padding-top: calc(var(--compact-category-pad-top) + var(--tc-space-1));
}

.compact-bubble-menu.tc-select-menu.compact-select-menu::before {
  content: attr(data-compact-group-label);
  position: absolute;
  top: calc(var(--compact-category-inset) + var(--tc-space-hairline));
  left: var(--compact-category-inset);
  right: var(--compact-category-pad-x);
  color: var(--tc-text-faint);
  font-size: var(--compact-font-category);
  font-weight: var(--tc-type-compact-popup-category-weight);
  line-height: var(--tc-type-compact-popup-category-line);
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
  pointer-events: none;
}

.compact-bubble-menu.tc-select-menu.compact-select-menu.has-popup-slider::before {
  content: none;
  display: none;
}

.compact-bubble-menu.tc-select-menu.compact-select-menu[data-compact-fab-menu="shuffleStyleToggle"].has-popup-slider,
.compact-bubble-menu.tc-select-menu.compact-select-menu[data-compact-fab-menu="animationBasedOnToggle"].has-popup-slider,
.compact-bubble-menu.tc-select-menu.compact-select-menu[data-compact-fab-menu="abstractToggle"].has-popup-slider {
  padding-top: calc(var(--compact-category-label-space) + var(--compact-category-pad-top));
}

.compact-bubble-menu.tc-select-menu.compact-select-menu[data-compact-fab-menu="shuffleStyleToggle"].has-popup-slider::before,
.compact-bubble-menu.tc-select-menu.compact-select-menu[data-compact-fab-menu="animationBasedOnToggle"].has-popup-slider::before,
.compact-bubble-menu.tc-select-menu.compact-select-menu[data-compact-fab-menu="abstractToggle"].has-popup-slider::before {
  content: attr(data-compact-group-label);
  display: block;
}

}

/* source: shared/styles/components/component-overrides.css */
@layer features {
/*
  ============================================================================
  COMPONENT CONTEXT OVERRIDES  —  transitional file, meant to be deleted.
  ============================================================================

  WHAT THIS IS
  Context rules that restyle shared components (.tc-select, .tc-select-button,
  .tc-scrub, gallery-modal surfaces) inside specific feature CONTEXTS. They were
  migrated out of feature CSS so select.css holds only the real select
  component. Audited 2026-07: retired editor-header/style branches were removed;
  the remaining rules target current compact-control and modal surfaces.

  THE CONTEXTS (families) PRESENT, by their state hook:
    - compact controls : body[data-editor-compact-controls="on"], .compact-controls
    - editor dialog    : .editor-dialog, .modal-style-field
    - gallery modal    : .tc-select--gallery, .editor-modal, gallery menus

  WHY IT EXISTS (and why it's not "the framework overriding itself")
  These are legitimate feature/state styles. The global layer order is active,
  and this file intentionally places contextual rules in the `features` layer
  so they can refine base components without redefining those components.
  Their ownership is still transitional because unrelated feature families are
  collected in one component-directory file.

  ORDER IS LOAD-BEARING
  The framework bundle imports this file immediately after select.css. The
  global layer order resolves components-versus-features precedence, but source
  order still resolves rules within the `features` layer. Keep the block order
  and the bundle import position unchanged until focused computed-style and
  screenshot comparisons prove an ownership move is equivalent.

  HOW THIS FILE GETS DISSOLVED (the only safe path)
    1. Teach the CSS ownership guard to allow contextual .tc-* selectors in a
       declared feature owner while still blocking bare component redefinition.
    2. With the visual-diff harness in place, move one family at a time back to
       its feature folder, keep it in `@layer features`, and preserve or verify
       its relative cascade position.
    3. Regenerate the runtime CSS and pass computed-style, screenshot, desktop,
       and touch checks after every family move.
    4. When the last block leaves, remove this file's framework-bundle import.
  ============================================================================
*/
/* Migrated component ownership from feature CSS. */
body.is-animation-popup-open[data-editor-compact-controls="on"] .tc-animation-time-indicator,
body.is-animation-popup-open[data-editor-compact-controls="on"] .editor-dialog .tc-animation-time-indicator {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Migrated from styles/features/editor/editor-export.css. */
.field.is-disabled .tc-select {
  pointer-events: none;
}

/* Migrated from styles/features/editor/editor-panels-controls.css.
   The old document-wide relational form re-evaluated on every class change in the
   page; the select UI maintains the equivalent has-open-plain-select state
   class in updateOpenState, keeping the visual behavior identical. */
body.has-open-plain-select .type-hint {
  opacity: 0;
  pointer-events: none;
}

/* Migrated from styles/features/editor/editor-shell.css. */
.editor-dialog .tc-select-button:hover,
.editor-dialog .tc-select-button:focus-visible,
.editor-dialog .tc-select.is-open .tc-select-button {
  border-color: var(--tc-control-border-hover);
  background: var(--tc-control-bg-hover);
  color: var(--tc-control-text-hover);
  box-shadow: none;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (min-width: 761px) and (pointer: fine) {
.modal-style-field .tc-select.tc-select--gallery .tc-select-menu {
    width: var(--modal-gallery-menu-width);
    min-width: var(--modal-gallery-menu-width);
    max-width: calc(100vw - (var(--tc-select-gallery-desktop-container-inset) * 2));
    background: var(--tc-select-gallery-popup-bg);
  }
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (min-width: 761px) and (pointer: fine) {
.modal-style-field .tc-select.tc-select--gallery .tc-select-menu[data-tc-select-full-width="true"] {
    background: var(--tc-select-gallery-popup-bg);
  }
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select.modal-title-select .tc-select-button {
  pointer-events: none;
  cursor: default;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select.is-open .tc-select-value {
  opacity: 1;
  filter: none;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select.is-open .tc-select-more-hint {
  color: var(--tc-accent-text);
  opacity: 1;
  text-shadow: var(--tc-accent-text-shadow);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.editor-modal-header:hover .modal-style-field .tc-select:not(.is-open) .tc-select-value {
    opacity: 1;
    filter: none;
  }
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.editor-modal-header:hover .modal-style-field .tc-select-more-hint,
  .modal-style-field .tc-select.is-open .tc-select-more-hint,
  .modal-style-field .tc-select-button:focus-visible .tc-select-more-hint {
    width: 4.25rem;
  }
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.editor-modal-header:hover .modal-style-field .tc-select-more-hint::before,
  .modal-style-field .tc-select.is-open .tc-select-more-hint::before,
  .modal-style-field .tc-select-button:focus-visible .tc-select-more-hint::before {
    opacity: 0;
    transform: translate(5px, -50%);
  }
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.editor-modal-header:hover .modal-style-field .tc-select-more-hint::after,
  .modal-style-field .tc-select.is-open .tc-select-more-hint::after,
  .modal-style-field .tc-select-button:focus-visible .tc-select-more-hint::after {
    opacity: 1;
    color: var(--tc-accent-text);
    text-shadow: var(--tc-accent-text-shadow);
    transform: translate(0, -50%);
  }
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.modal-style-field .tc-select.is-open .tc-select-more-hint::before,
  .modal-style-field .tc-select.is-open .tc-select-more-hint::after {
    color: var(--tc-accent-text);
  }
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: none) and (pointer: coarse) {
.editor-modal-header .modal-style-field .tc-select-value,
  .editor-modal-header .modal-style-field .tc-select.is-open .tc-select-value {
    opacity: 1;
    filter: none;
  }
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-button:focus-visible,
.modal-style-field .tc-select.is-open .tc-select-button {
  border-color: var(--tc-color-transparent);
  background: var(--tc-color-transparent);
  box-shadow: none;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (min-width: 761px) and (pointer: fine) {
.modal-style-field .tc-select.tc-select--gallery .tc-select-menu,
  .modal-style-field .tc-select.tc-select--gallery .tc-select-menu[data-tc-select-full-width="true"] {
    border-color: var(--tc-color-transparent);
    background: var(--tc-select-gallery-popup-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

body.is-scrubbing .tc-select.tc-select--gallery .tc-select-menu,
body.is-scrubbing .tc-select.tc-select--gallery .tc-select-menu[data-tc-select-full-width="true"],
body.is-editor-aspect-changing .tc-select.tc-select--gallery .tc-select-menu,
body.is-editor-aspect-changing .tc-select.tc-select--gallery .tc-select-menu[data-tc-select-full-width="true"] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.is-scrubbing .tc-select.tc-select--gallery .tc-select-option.has-preview,
body.is-editor-aspect-changing .tc-select.tc-select--gallery .tc-select-option.has-preview {
  transition: none;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-button:focus-visible,
.modal-style-field .tc-select.is-open .tc-select-button {
  color: var(--tc-text-main);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.modal-style-field .tc-select {
  display: block;
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
}

.modal-style-field .tc-select.tc-select--gallery {
  --tc-type-popup-gallery-filter-pill-size: var(--tc-type-popup-gallery-filter-pill-size-mobile);
  --tc-type-popup-gallery-filter-pill-weight: var(--tc-type-popup-gallery-filter-pill-weight-mobile);
  --tc-type-popup-gallery-filter-pill-line: var(--tc-type-popup-gallery-filter-pill-line-mobile);
  --tc-type-popup-gallery-filter-count-size: var(--tc-type-popup-gallery-filter-count-size-mobile);
  --tc-type-popup-gallery-filter-count-weight: var(--tc-type-popup-gallery-filter-count-weight-mobile);
  --tc-type-popup-gallery-filter-count-line: var(--tc-type-popup-gallery-filter-count-line-mobile);
  --tc-type-popup-gallery-search-input-size: var(--tc-type-popup-gallery-search-input-size-mobile);
  --tc-type-popup-gallery-search-input-weight: var(--tc-type-popup-gallery-search-input-weight-mobile);
  --tc-type-popup-gallery-close-size: var(--tc-type-popup-gallery-close-size-mobile);
  --tc-type-popup-gallery-close-weight: var(--tc-type-popup-gallery-close-weight-mobile);
  --tc-type-popup-gallery-close-line: var(--tc-type-popup-gallery-close-line-mobile);
  --tc-type-popup-gallery-card-label-size: var(--tc-type-popup-gallery-card-label-size-mobile);
  --tc-type-popup-gallery-card-label-weight: var(--tc-type-popup-gallery-card-label-weight-mobile);
  --tc-type-popup-gallery-card-label-line: var(--tc-type-popup-gallery-card-label-line-mobile);
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px), (max-width: 900px) and (hover: none) and (pointer: coarse) {
.modal-style-field .tc-select.tc-select--gallery .tc-select-menu,
  .modal-style-field .tc-select.tc-select--gallery .tc-select-menu[data-tc-select-full-width="true"] {
    background: var(--tc-select-gallery-popup-bg);
    box-shadow: none;
  }

  body.has-open-gallery-select .editor-modal[open] [data-editor-close] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

body.has-open-gallery-select .editor-modal.is-touch-editor-mode[open] [data-editor-close] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Migrated from styles/features/editor/editor-shell.css. */
.editor-modal[open] .modal-style-field .tc-select-value-label {
animation: editor-select-affordance 1500ms ease-out 320ms 1;
}

/* Migrated from styles/features/editor/editor-shell.css. */
.editor-dialog .tc-select-menu,
.editor-modal .tc-select-menu,
.editor-access-modal .tc-select-menu,
.editor-full-access-modal .tc-select-menu {
-webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Migrated from styles/features/editor/editor-shell.css. */
.editor-dialog .tc-select-value.has-bookmark {
gap: 0.875rem;
}

/* Migrated from styles/features/editor/editor-shell.css. */
.editor-dialog .tc-select-bookmark-icon {
width: 0.75rem;
  height: 0.75rem;
  color: var(--tc-accent-main);
  filter: var(--tc-accent-icon-glow);
}

/* Migrated from styles/features/editor/editor-shell.css. */
.editor-dialog .tc-select-option-bookmark {
width: 1rem;
  height: 1rem;
  color: var(--tc-accent-main);
  filter: var(--tc-accent-icon-glow-soft);
}

/* Migrated from styles/features/editor/editor-shell.css. */
.editor-dialog .tc-select-bookmark-icon svg,
.editor-dialog .tc-select-option-bookmark svg {
fill: currentColor;
  stroke: none;
}

/* Migrated from styles/features/editor/editor-shell.css. */
.editor-dialog .tc-select-button {
border-color: var(--tc-control-border);
  background: var(--tc-control-bg);
  color: var(--tc-control-text);
  box-shadow: none;
}

/* Migrated from styles/features/editor/editor-shell.css. */
.editor-dialog .tc-select:not(.tc-select--gallery) .tc-select-menu,
.editor-modal .tc-select:not(.tc-select--gallery) .tc-select-menu,
.editor-access-modal .tc-select:not(.tc-select--gallery) .tc-select-menu,
.editor-full-access-modal .tc-select:not(.tc-select--gallery) .tc-select-menu {
border-color: var(--tc-color-transparent);
  background: var(--tc-editor-ui-popup);
  box-shadow: var(--tc-editor-ui-popup-shadow);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.tc-select--gallery .tc-select-menu.has-style-apply-scope::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.tc-select-menu.has-style-apply-scope .tc-select-search-input,
.tc-select-menu.has-style-apply-scope .tc-select-filter-pills,
.tc-select-menu.has-style-apply-scope .tc-select-options {
pointer-events: none;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.tc-select-menu.has-style-apply-scope .tc-select-gallery-close {
position: relative;
  z-index: 4;
  pointer-events: auto;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-button {
width: fit-content;
  max-width: 100%;
  gap: 0;
  min-height: 2.5rem;
  height: 2.5rem;
  border-color: var(--tc-color-transparent);
  background: var(--tc-color-transparent);
  padding: 0;
  font-size: var(--tc-type-editor-style-select-size);
  font-weight: var(--tc-type-editor-style-select-weight);
  line-height: var(--tc-type-editor-style-select-line);
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select,
.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select-button {
  max-width: 100%;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-value {
grid-column: 1;
  transition: opacity 150ms ease, filter 150ms ease;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-more-hint {
grid-column: 2;
  display: none;
  align-self: center;
  color: var(--tc-text-disabled);
  font-size: var(--tc-type-editor-style-hint-size);
  font-weight: var(--tc-type-editor-style-hint-weight);
  letter-spacing: 0;
  line-height: var(--tc-type-editor-style-hint-line);
  white-space: nowrap;
  transform: translateY(1px);
  transition: color 150ms ease, opacity 150ms ease, text-shadow 150ms ease;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.modal-style-field .tc-select-more-hint {
position: relative;
    width: 2.25rem;
    overflow: hidden;
    color: var(--tc-color-transparent);
    transition: width 180ms ease, color 150ms ease, opacity 150ms ease, text-shadow 150ms ease;
}
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.modal-style-field .tc-select-more-hint::before,
  .modal-style-field .tc-select-more-hint::after {
position: absolute;
    left: 0;
    top: 50%;
    color: var(--tc-text-disabled);
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(-50%);
    transition: opacity 170ms ease, transform 180ms ease, color 150ms ease, text-shadow 150ms ease;
}
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.modal-style-field .tc-select-more-hint::before {
content: none;
    opacity: 1;
}
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.modal-style-field .tc-select-more-hint::after {
content: none;
    opacity: 0;
    transform: translate(-6px, -50%);
}
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-value.has-preview {
gap: 1rem;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-button {
grid-template-columns: minmax(0, auto);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-button::after {
content: none;
  display: none;
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  color: var(--tc-text-placeholder);
  font-size: var(--tc-type-editor-style-after-size);
  font-weight: var(--tc-type-editor-style-after-weight);
  line-height: var(--tc-type-editor-style-after-line);
  transform: translateY(1px);
  white-space: nowrap;
  opacity: 0.95;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field.has-combined-styles .tc-select-button::after {
content: none;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field.has-combined-styles .tc-select-button {
grid-template-columns: minmax(0, auto);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-menu {
min-width: min(340px, 78vw);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.editor-modal .tc-select-value.has-bookmark {
gap: 0.875rem;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.editor-modal .tc-select-bookmark-icon {
width: 0.75rem;
  height: 0.75rem;
  color: var(--tc-accent-main);
  filter: var(--tc-accent-icon-glow);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.editor-modal .tc-select-option-bookmark {
width: 1rem;
  height: 1rem;
  color: var(--tc-accent-main);
  filter: var(--tc-accent-icon-glow-soft);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.editor-modal .tc-select-bookmark-icon svg,
.editor-modal .tc-select-option-bookmark svg {
fill: currentColor;
  stroke: none;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.tc-select--gallery .tc-select-menu.has-style-apply-scope::before {
background: var(--tc-bg-overlay-combined-modal);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-more-hint,
.modal-style-field .tc-select-button::after {
color: var(--tc-text-disabled);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.editor-modal.is-exporting .modal-style-field .tc-select-button {
pointer-events: none;
  opacity: 0.58;
  filter: var(--tc-filter-export-disabled);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--tc-bg-overlay-combined-modal-strong);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal .tc-select-search,
.tc-select-menu.has-combined-style-modal .tc-select-search-input,
.tc-select-menu.has-combined-style-modal .tc-select-gallery-close,
.tc-select-menu.has-combined-style-modal > .tc-select-filter-pills,
.tc-select-menu.has-combined-style-modal > .tc-select-options {
pointer-events: none;
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal .mobile-combined-style-modal__panel {
width: 100%;
  max-height: min(calc(100dvh - 1.5rem), 36rem);
  min-height: 0;
  padding: var(--tc-space-5);
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-radius-md);
  background: var(--tc-editor-ui-popup);
  box-shadow: var(--tc-editor-ui-popup-shadow);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal .mobile-combined-style-modal__cancel {
min-height: 2.375rem;
  background: var(--tc-editor-ui-popup-control);
  color: var(--tc-control-text);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal .mobile-combined-style-modal__cancel:hover,
.tc-select-menu.has-combined-style-modal .mobile-combined-style-modal__cancel:focus-visible {
background: var(--tc-editor-ui-popup-control-hover);
  color: var(--tc-control-text-hover);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal .mobile-combined-style-card {
background: var(--tc-editor-ui-popup-control);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal .mobile-combined-style-card:hover,
.tc-select-menu.has-combined-style-modal .mobile-combined-style-card:focus-visible,
.tc-select-menu.has-combined-style-modal .mobile-combined-style-card:focus-within {
background: var(--tc-editor-ui-popup-control-hover);
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px) {
.modal-style-field .tc-select-button {
width: fit-content;
    max-width: 100%;
    min-height: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--tc-color-transparent);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-color-transparent);
    gap: var(--tc-space-4);
    padding: 0 0.125rem 0 0;
    font-size: var(--tc-type-editor-style-select-size);
    box-shadow: none;
}
}

@media (max-width: 760px), (max-width: 900px) and (hover: none) and (pointer: coarse) {
.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select {
min-width: 0;
    width: max-content;
    max-width: 100%;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select-button {
width: max-content;
    min-width: 0;
    max-width: 100%;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select-value.has-preview {
min-width: 0;
    max-width: 100%;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select-value-preview {
flex: 0 0 2.5rem;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select-value-preview img {
object-fit: contain;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field:not(.has-combined-styles) .tc-select-button {
min-height: var(--tc-combined-style-thumb-size-mobile);
    height: var(--tc-combined-style-thumb-size-mobile);
    padding-inline-start: var(--tc-space-4);
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field:not(.has-combined-styles) .tc-select-value.has-preview {
gap: var(--tc-space-7);
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field:not(.has-combined-styles) .tc-select-value-preview {
flex: 0 0 var(--tc-combined-style-thumb-size-mobile);
    width: var(--tc-combined-style-thumb-size-mobile);
    height: var(--tc-combined-style-thumb-size-mobile);
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field:not(.has-combined-styles) .tc-select-value-preview img {
object-fit: cover;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field.has-combined-styles .tc-select-value-label {
display: none;
}
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px) {
.modal-style-field .tc-select-bookmark-icon {
width: 0.75rem;
    height: 0.75rem;
    color: var(--tc-accent-main);
    filter: var(--tc-accent-icon-glow);
}
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px) {
.modal-style-field .tc-select-bookmark-icon svg {
fill: currentColor;
    stroke: none;
}
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px) {
.modal-style-field .tc-select-option.has-badge:not(.has-preview) {
grid-template-columns: minmax(0, 1fr) 1.125rem;
    gap: 0.75rem;
    padding-right: clamp(1.25rem, 4vw, 1.75rem);
}
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px) {
.modal-style-field .tc-select-option-bookmark {
width: 1.125rem;
    height: 1.125rem;
    color: var(--tc-accent-main);
    filter: var(--tc-accent-icon-glow);
}
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px) {
.modal-style-field .tc-select-option-bookmark svg {
fill: currentColor;
    stroke: none;
}
}
}

/* source: shared/styles/components/scrub.css */
@layer components {
/* Shared range scrubber styling for precise numeric controls. */
.range-wrap.is-scrubbed {
  position: relative;
  display: block;
}

.tc-scrub-native {
  position: absolute;
  inset: auto;
  width: 1px;
  height: 1px;
  min-width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.range-wrap.is-scrubbed .value-pill {
  display: none;
}

.tc-scrub {
  --tc-scrub-bg: var(--tc-editor-scrub-bg);
  --tc-scrub-line: var(--tc-color-transparent);
  --tc-scrub-line-strong: var(--tc-color-transparent);
  --tc-scrub-text: var(--tc-control-text);
  --tc-scrub-muted: var(--tc-control-text-muted);
  --tc-scrub-accent: var(--tc-accent-main);
  width: 100%;
  min-height: var(--tc-control-height-scrub);
  display: grid;
  grid-template-columns: var(--tc-scrub-grid-edge) minmax(0, 1fr) var(--tc-scrub-grid-edge);
  align-items: center;
  gap: var(--tc-scrub-gap);
  padding: var(--tc-scrub-padding-y) var(--tc-scrub-padding-x);
  border: 1px solid var(--tc-scrub-line);
  border-radius: var(--tc-scrub-radius);
  background: var(--tc-scrub-bg);
  color: var(--tc-scrub-text);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  transition: none;
}

.tc-scrub:hover,
.tc-scrub:focus-visible {
  border-color: var(--tc-control-border-hover);
  background: var(--tc-editor-scrub-bg-hover);
  color: var(--tc-control-text-hover);
  outline: 0;
  box-shadow: none;
}

.tc-scrub.is-scrubbing,
.tc-scrub.is-armed {
  border-color: var(--tc-control-border-active);
  background: var(--tc-editor-scrub-bg-active);
  color: var(--tc-text-bright);
  outline: 0;
  box-shadow: none;
}

body.is-scrubbing .tc-scrub,
body.is-scrubbing .tc-scrub-value,
body.is-scrubbing .tc-scrub-arrow,
.tc-scrub.is-scrubbing,
.tc-scrub.is-scrubbing .tc-scrub-value,
.tc-scrub.is-scrubbing .tc-scrub-arrow {
  transition: none;
}

.tc-scrub--vertical,
.tc-scrub.is-vertical-scrub {
  cursor: ns-resize;
}

.tc-scrub--compact-menu {
  --tc-scrub-bg: var(--tc-compact-scrub-bg);
  --tc-scrub-text: var(--tc-compact-scrub-value-color);
  --tc-scrub-muted: var(--tc-compact-scrub-arrow-color);
  background: var(--tc-compact-scrub-bg);
}

.tc-scrub--compact-menu:hover,
.tc-scrub--compact-menu:focus-visible {
  background: var(--tc-compact-scrub-bg-hover);
  color: var(--tc-compact-scrub-value-color-active);
}

.tc-scrub--compact-menu.is-scrubbing,
.tc-scrub--compact-menu.is-armed {
  background: var(--tc-compact-scrub-bg-active);
  color: var(--tc-compact-scrub-value-color-active);
}

.tc-scrub-field--compact-menu label:not(.sr-only) {
  color: var(--tc-compact-scrub-label-color);
  opacity: var(--tc-compact-scrub-label-opacity);
}

.tc-scrub-field--compact-menu:hover label:not(.sr-only),
.tc-scrub-field--compact-menu:focus-within label:not(.sr-only) {
  color: var(--tc-compact-scrub-label-color-active);
  opacity: var(--tc-compact-scrub-label-opacity-active);
}

.tc-scrub.is-disabled {
  color: var(--tc-text-disabled);
  cursor: default;
  opacity: var(--tc-state-disabled-opacity);
}

.tc-scrub-value {
  min-width: 0;
  color: var(--tc-scrub-text);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tc-scrub-arrow {
  width: 7px;
  height: 7px;
  color: var(--tc-scrub-muted);
}

.tc-scrub-arrow::before {
  content: "";
  display: block;
  width: var(--tc-icon-size-sm);
  height: var(--tc-icon-size-sm);
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
}

.tc-scrub-arrow-left::before {
  transform: translate(2px, 0) rotate(-45deg);
}

.tc-scrub-arrow-right::before {
  transform: translate(-1px, 0) rotate(135deg);
}

body.is-scrubbing {
  cursor: ew-resize;
  user-select: none;
}

body.is-vertical-scrubbing {
  cursor: ns-resize;
}

@media (max-width: 560px) {
  body:not([data-editor-compact-controls="on"]) .tc-scrub {
    min-height: var(--tc-scrub-mobile-height);
    grid-template-columns: var(--tc-scrub-mobile-grid-edge) minmax(0, 1fr) var(--tc-scrub-mobile-grid-edge);
    gap: var(--tc-scrub-mobile-gap);
    padding: 0 var(--tc-scrub-mobile-padding-x);
    border-radius: var(--tc-scrub-radius-sm);
  }

  body:not([data-editor-compact-controls="on"]) .tc-scrub-value {
    font-size: 0.625rem;
    line-height: 1;
    align-self: center;
    justify-self: center;
    padding-top: 0.25rem;
  }

  body:not([data-editor-compact-controls="on"]) .tc-scrub-arrow {
    justify-self: center;
  }
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact:focus,
body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact:focus-visible,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub:focus,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub:focus-visible,
.editor-controls.compact-controls .tc-icon-btn--compact:focus,
.editor-controls.compact-controls .tc-icon-btn--compact:focus-visible,
.editor-controls.compact-controls .tc-scrub:focus,
.editor-controls.compact-controls .tc-scrub:focus-visible {
  outline: 0;
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls [data-compact-menu-select].compact-menu-attention-pulse,
.editor-controls.compact-controls [data-compact-menu-select].compact-menu-attention-pulse,
body[data-editor-compact-controls="on"] .editor-controls [data-editor-action].compact-menu-attention-pulse,
.editor-controls.compact-controls [data-editor-action].compact-menu-attention-pulse,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field.compact-menu-attention-pulse,
.editor-controls.compact-controls .compact-scrub-field.compact-menu-attention-pulse,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.compact-menu-attention-pulse,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.compact-menu-attention-pulse {
  animation:
    compact-menu-attention-pulse 460ms cubic-bezier(0.4, 0, 0.2, 1) 0s var(--tc-compact-menu-attention-repeats, 2) both;
  will-change: box-shadow;
  border-color: var(--tc-editor-ui-attention-line-strong);
  position: relative;
  z-index: 3;
  box-shadow:
    0 0 0 0 var(--tc-color-transparent),
    inset 0 0 0 1px var(--tc-editor-ui-attention-line);
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub {
  position: relative;
  width: 100%;
  height: var(--compact-control-height);
  min-height: var(--compact-control-height);
  max-height: var(--compact-control-height);
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    var(--tc-compact-scrub-grid-edge)
    minmax(0, 1fr)
    var(--tc-compact-scrub-grid-edge);
  gap: var(--tc-compact-scrub-gap-y) 0;
  place-items: center;
  padding: var(--tc-compact-scrub-padding-y) var(--tc-compact-scrub-padding-x);
  border-color: var(--tc-color-transparent);
  border-radius: var(--tc-compact-control-radius);
  background: var(--tc-compact-scrub-bg);
  color: var(--tc-compact-scrub-value-color);
  cursor: ns-resize;
  touch-action: pan-x;
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .tc-compact-control[data-compact-options-disabled="true"],
.editor-controls.compact-controls .tc-compact-control[data-compact-options-disabled="true"] {
  opacity: var(--tc-state-disabled-opacity);
  filter: var(--tc-filter-control-disabled);
  cursor: help;
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:not(.has-expanded-control),
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:not(.has-expanded-control) {
  opacity: var(--tc-compact-muted-group-opacity);
  filter: var(--tc-filter-control-muted);
  transition:
    opacity var(--tc-compact-pulsed-control-return-duration) var(--tc-ease-standard),
    filter var(--tc-compact-pulsed-control-return-duration) var(--tc-ease-standard);
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-icon-btn--compact:not([data-compact-options-disabled="true"]),
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-icon-btn--compact:not([data-compact-options-disabled="true"]),
body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-scrub,
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-scrub {
  opacity: var(--tc-compact-muted-control-opacity);
  filter: var(--tc-filter-control-muted);
  transition:
    opacity var(--tc-compact-pulsed-control-return-duration) var(--tc-ease-standard),
    filter var(--tc-compact-pulsed-control-return-duration) var(--tc-ease-standard);
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category.has-attention-pulse,
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category.has-attention-pulse,
body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-menu-attention-pulse,
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-menu-attention-pulse {
  opacity: var(--tc-compact-pulsed-control-opacity);
  filter: none;
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:not(.has-expanded-control) .tc-icon-btn--compact:not([data-compact-options-disabled="true"]),
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:not(.has-expanded-control) .tc-icon-btn--compact:not([data-compact-options-disabled="true"]),
body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:not(.has-expanded-control) .tc-scrub,
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:not(.has-expanded-control) .tc-scrub {
  opacity: 1;
  filter: none;
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-icon-btn--compact[aria-expanded="true"],
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-icon-btn--compact[aria-expanded="true"] {
  opacity: var(--tc-compact-open-control-opacity);
  filter: none;
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-icon-btn--compact[data-compact-options-state-changing="true"],
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-icon-btn--compact[data-compact-options-state-changing="true"] {
  transition: none;
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub:hover,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub:hover,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub:focus-visible,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub:focus-visible,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.is-scrubbing,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.is-scrubbing,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub:hover,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub:focus-visible,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.is-scrubbing {
  border-color: var(--tc-color-transparent);
  background: var(--tc-compact-scrub-bg-hover);
  outline: 0;
  box-shadow: none;
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.is-scrubbing,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.is-scrubbing,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.is-scrubbing {
  touch-action: none;
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.is-armed,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.is-armed,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.is-armed {
  border-color: var(--tc-color-transparent);
  background: var(--tc-compact-scrub-bg-active);
  color: var(--tc-compact-scrub-value-color-active);
  box-shadow: none;
  touch-action: pan-x;
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body.is-compact-controls-scrolling[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact,
body.is-compact-controls-scrolling .editor-controls.compact-controls .tc-icon-btn--compact,
body.is-compact-controls-scrolling[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub,
body.is-compact-controls-scrolling .editor-controls.compact-controls .compact-scrub-field .tc-scrub {
  border-color: var(--tc-color-transparent);
  background: var(--tc-compact-scrub-bg);
  color: var(--tc-compact-scrub-value-color);
  box-shadow: none;
}

/* Migrated from styles/features/editor/editor-export.css. */
@media (max-width: 560px) {
body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .tc-scrub,
  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .tc-icon-btn--editor-action {
    min-height: var(--editor-control-row-height);
    height: var(--editor-control-row-height);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-radius: var(--editor-mobile-radius);
    font-size: 0.625rem;
  }
}

/* Migrated from styles/features/editor/editor-export.css. */
@media (max-width: 560px) {
body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .tc-scrub {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem;
    align-items: center;
  }
}

/* Migrated from styles/features/editor/editor-export.css. */
@media (max-width: 560px) {
body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .field.has-scrub-control > label {
    left: 1.6rem;
    top: 0.28rem;
    max-width: calc(100% - 3.2rem);
  }
}

/* Migrated from styles/features/editor/editor-responsive.css. */
@media (max-width: 560px) {
body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .tc-scrub {
    align-items: center;
  }
}

/* Migrated tc-* feature rules into component ownership. */
/* Migrated from styles/features/editor-controls/compact-scrub-export.css. */
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-value {
opacity: 1;
}

/* Migrated from styles/features/editor-controls/compact-scrub-export.css. */
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow {
opacity: 0.82;
}

/* Migrated from styles/features/editor-controls/compact-scrub-export.css. */
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-value {
color: var(--tc-text-bright);
}

/* Migrated from styles/features/editor-controls/compact-scrub-export.css. */
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow {
color: var(--tc-editor-scrub-fill-active);
}

/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub-value,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-value {
min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: var(--tc-color-transparent);
  color: var(--tc-text-readable);
  font-size: var(--compact-font-value);
  font-weight: var(--tc-type-compact-control-value-weight);
  line-height: 1;
  text-align: center;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
}

/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub-arrow,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow {
display: block;
  width: var(--tc-icon-size-xs);
  height: var(--tc-icon-size-xs);
  color: var(--tc-text-muted);
  align-self: center;
  justify-self: center;
  opacity: 0.72;
}

/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub-arrow-up,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub-arrow-up,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow-up {
grid-column: 1;
  grid-row: 1;
}

/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub-arrow-up::before,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub-arrow-up::before,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow-up::before {
transform: translateY(2px) rotate(45deg);
}

/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub-arrow-down,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub-arrow-down,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow-down {
grid-column: 1;
  grid-row: 3;
}

/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub-arrow-down::before,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub-arrow-down::before,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow-down::before {
transform: translateY(-1px) rotate(-135deg);
}

body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu .tc-scrub-value,
.editor-controls.compact-controls .tc-scrub--compact-menu .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu .tc-scrub-value {
  color: var(--tc-compact-scrub-value-color);
  opacity: var(--tc-compact-scrub-value-opacity);
}

body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu:hover .tc-scrub-value,
.editor-controls.compact-controls .tc-scrub--compact-menu:hover .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu:focus-visible .tc-scrub-value,
.editor-controls.compact-controls .tc-scrub--compact-menu:focus-visible .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu.is-scrubbing .tc-scrub-value,
.editor-controls.compact-controls .tc-scrub--compact-menu.is-scrubbing .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu.is-armed .tc-scrub-value,
.editor-controls.compact-controls .tc-scrub--compact-menu.is-armed .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu:hover .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu:focus-visible .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu.is-scrubbing .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu.is-armed .tc-scrub-value {
  color: var(--tc-compact-scrub-value-color-active);
  opacity: var(--tc-compact-scrub-value-opacity-active);
}

body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu .tc-scrub-arrow,
.editor-controls.compact-controls .tc-scrub--compact-menu .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu .tc-scrub-arrow {
  color: var(--tc-compact-scrub-arrow-color);
  opacity: var(--tc-compact-scrub-arrow-opacity);
}

body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu:hover .tc-scrub-arrow,
.editor-controls.compact-controls .tc-scrub--compact-menu:hover .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu:focus-visible .tc-scrub-arrow,
.editor-controls.compact-controls .tc-scrub--compact-menu:focus-visible .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu.is-scrubbing .tc-scrub-arrow,
.editor-controls.compact-controls .tc-scrub--compact-menu.is-scrubbing .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu.is-armed .tc-scrub-arrow,
.editor-controls.compact-controls .tc-scrub--compact-menu.is-armed .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu:hover .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu:focus-visible .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu.is-scrubbing .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu.is-armed .tc-scrub-arrow {
  color: var(--tc-compact-scrub-arrow-color-active);
  opacity: var(--tc-compact-scrub-arrow-opacity-active);
}

/* Migrated from styles/features/editor/editor-export.css. */
@media (max-width: 560px) {
body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .tc-scrub-value {
min-height: 100%;
    display: grid;
    place-items: center;
}
}

/* Migrated from styles/features/editor/editor-responsive.css. */
@media (max-width: 560px) {
body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .tc-scrub-value {
line-height: 1;
}
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed .tc-scrub-value,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu .tc-scrub-value,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover .tc-scrub-value,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible .tc-scrub-value,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing .tc-scrub-value,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed .tc-scrub-value {
  color: var(--tc-compact-scrub-value-color);
  opacity: var(--tc-compact-scrub-value-opacity);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible {
  background: var(--tc-compact-scrub-bg);
  color: var(--tc-compact-scrub-value-color);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible {
  background: var(--tc-compact-scrub-bg-hover);
  color: var(--tc-compact-scrub-value-color-active);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed {
  background: var(--tc-compact-scrub-bg-active);
  color: var(--tc-compact-scrub-value-color-active);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed .tc-scrub-arrow,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu .tc-scrub-arrow,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover .tc-scrub-arrow,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible .tc-scrub-arrow,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing .tc-scrub-arrow,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed .tc-scrub-arrow {
  color: var(--tc-compact-scrub-arrow-color);
  opacity: var(--tc-compact-scrub-arrow-opacity);
}
}

/* source: shared/styles/features/legal/legal-shell.css */
@layer features {
/* Legal page layout and presentation. */
:root {
  color-scheme: dark;
}


html {
  min-height: 100%;
  background: var(--tc-mask-solid);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--tc-mask-solid);
  color: var(--tc-text-main);
  font-family: var(--tc-font-body);
  overflow-x: hidden;
}


a:hover,
a:focus-visible {
  color: var(--tc-text-bright);
  outline: 0;
}

.legal-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(var(--tc-space-6), 2.8vw, 34px);
  isolation: isolate;
  overflow-x: clip;
}

.legal-page::before {
  content: "";
  position: fixed;
  inset: -24px;
  z-index: -3;
  background:
    radial-gradient(circle at 24% 18%, var(--tc-color-transparent), var(--tc-color-transparent) 26%),
    radial-gradient(circle at 78% 70%, var(--tc-color-transparent), var(--tc-color-transparent) 30%),
    var(--tc-mask-solid);
  pointer-events: none;
}

.legal-burst {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.legal-burst img {
  position: absolute;
  width: var(--burst-size);
  height: auto;
  max-width: none;
  opacity: var(--burst-opacity);
  filter: var(--tc-filter-brightness-072);
  transform: translate(-50%, -50%) rotate(var(--burst-rotate)) scale(var(--burst-scale, 1));
  transform-origin: center;
}

.legal-burst__glyph--b {
  --burst-size: 142px;
  --burst-opacity: 0.22;
  --burst-rotate: -14deg;
  --burst-scale: 1;
  --burst-blur: 0.7px;
  left: 9%;
  top: 19%;
}

.legal-burst__glyph--m {
  --burst-size: 116px;
  --burst-opacity: 0.14;
  --burst-rotate: 8deg;
  --burst-scale: 0.96;
  --burst-blur: 1px;
  left: 18%;
  top: 78%;
}

.legal-burst__glyph--s {
  --burst-size: 154px;
  --burst-opacity: 0.2;
  --burst-rotate: 12deg;
  --burst-scale: 1;
  --burst-blur: 0.8px;
  left: 91%;
  top: 18%;
}

.legal-burst__glyph--dollar {
  --burst-size: 150px;
  --burst-opacity: 0.16;
  --burst-rotate: -7deg;
  --burst-scale: 1;
  left: 5%;
  top: 67%;
}

.legal-burst__glyph--p {
  --burst-size: 148px;
  --burst-opacity: 0.17;
  --burst-rotate: 9deg;
  --burst-scale: 1;
  --burst-blur: 0.6px;
  left: 96%;
  top: 76%;
}

.legal-burst__glyph--x {
  --burst-size: 112px;
  --burst-opacity: 0.12;
  --burst-rotate: -9deg;
  --burst-scale: 0.98;
  --burst-blur: 1px;
  left: 50%;
  top: 92%;
}

.legal-shell {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  display: grid;
  gap: var(--tc-space-6);
  padding-top: 84px;
}


.legal-topbar {
  position: fixed;
  top: 12px;
  left: max(12px, calc((100vw - 1040px) / 2));
  right: max(12px, calc((100vw - 1040px) / 2));
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(310px, 1.35fr) auto;
  align-items: center;
  gap: var(--tc-space-7);
  min-height: 58px;
  padding: var(--tc-space-5) var(--tc-space-6);
  background: var(--tc-modal-header);
}

.legal-logo {
  display: grid;
  gap: var(--tc-space-1-5);
  min-width: 0;
}

.legal-logo span {
  color: var(--tc-accent-main);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.legal-logo strong {
  color: var(--tc-text-strong);
  font-size: 0.9375rem;
  font-weight: 720;
  line-height: 1.1;
}

.legal-actions {
  gap: var(--tc-space-4);
}

.legal-actions a {
  min-height: var(--tc-caret-min-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--tc-space-5);
  border: 1px solid var(--tc-control-border);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-control-bg);
  color: var(--tc-control-text);
  font-size: 0.75rem;
  font-weight: 560;
  line-height: 1;
}

.legal-actions a:last-child {
  border-color: var(--tc-button-border);
  background: var(--tc-button-bg);
  color: var(--tc-button-text);
}
}

/* source: shared/styles/features/legal/legal-content.css */
@layer features {
    .legal-actions a:hover,
    .legal-actions a:focus-visible {
      border-color: var(--tc-button-border-strong);
      background: var(--tc-button-bg-hover);
      color: var(--tc-button-text-hover);
    }

    .legal-panel {
      overflow: hidden;
    }

    .legal-hero {
      display: grid;
      gap: var(--tc-space-4-5);
      padding: clamp(22px, 3vw, var(--tc-space-16)) clamp(var(--tc-space-10), 3vw, 30px) clamp(var(--tc-space-8), 2.4vw, var(--tc-space-12));
      border-bottom: 1px solid var(--tc-border-soft);
      background:
        linear-gradient(180deg, var(--tc-surface-dark-panel), var(--tc-surface-dark-panel-soft)),
        var(--tc-surface-dark-glass);
    }

    .legal-eyebrow,
    .legal-label {
      margin: 0;
      color: var(--tc-accent-main);
      font-size: 0.6875rem;
      font-weight: 700;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .legal-hero h1 {
      max-width: 760px;
      margin: 0;
      color: var(--tc-text-bright);
      font-size: clamp(1.45rem, 3vw, 2.18rem);
      font-weight: 680;
      line-height: 1.05;
    }

    .legal-hero p {
      max-width: 650px;
      margin: 0;
      color: var(--tc-text-muted);
      font-size: 0.875rem;
      line-height: 1.55;
    }

    .legal-nav {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--tc-space-3);
      min-width: 0;
    }

    .legal-nav a {
      min-height: var(--tc-caret-min-height);
      display: grid;
      place-items: center;
      padding: 0 var(--tc-space-4);
      border: 1px solid var(--tc-control-border);
      border-radius: var(--tc-radius-sm);
      background: var(--tc-control-bg);
      color: var(--tc-control-text-muted);
      font-size: 0.75rem;
      font-weight: 560;
      line-height: 1;
      text-align: center;
    }

    .legal-nav a:hover,
    .legal-nav a:focus-visible {
      border-color: var(--tc-control-border-hover);
      background: var(--tc-control-bg-hover);
      color: var(--tc-control-text-hover);
    }

    .legal-content {
      display: grid;
      padding: 0 clamp(var(--tc-space-9), 3vw, var(--tc-space-14)) clamp(var(--tc-space-9), 3vw, var(--tc-space-14));
    }

    .legal-section {
      scroll-margin-top: 104px;
      display: grid;
      gap: var(--tc-space-6);
      padding: clamp(var(--tc-space-12), 3vw, var(--tc-space-16)) 0;
      border-top: 1px solid var(--tc-border-soft);
    }

    .legal-section:first-child {
      border-top: 0;
    }

    .legal-section h2 {
      margin: 0;
      color: var(--tc-text-bright);
      font-size: 1.0625rem;
      font-weight: 660;
      line-height: 1.22;
    }

    .legal-section > p {
      max-width: 730px;
      margin: 0;
      color: var(--tc-text-muted);
      font-size: 0.875rem;
      line-height: 1.58;
    }

    .legal-rules {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--tc-space-6);
      margin-top: var(--tc-space-1);
    }

    .legal-card {
      display: grid;
      gap: var(--tc-space-4-5);
      align-content: start;
      padding: var(--tc-space-7);
    }

    .legal-card h3 {
      margin: 0;
      color: var(--tc-text-high);
      font-size: 0.8125rem;
      font-weight: 650;
      line-height: 1.25;
    }

    .legal-card ul {
      display: grid;
      gap: var(--tc-space-3-5);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .legal-card li {
      position: relative;
      padding-left: 13px;
      color: var(--tc-text-muted);
      font-size: 0.75rem;
      line-height: 1.42;
    }

    .legal-card li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.55em;
      width: var(--tc-icon-size-2xs);
      height: var(--tc-icon-size-2xs);
      border-radius: var(--tc-radius-pill);
      background: var(--tc-accent-main);
    }

    .legal-note {
      max-width: none;
      padding: var(--tc-space-5) var(--tc-space-5-5);
      border: 1px solid var(--tc-card-border-hover);
      border-radius: var(--tc-radius-sm);
      background: var(--tc-card-bg-hover);
      color: var(--tc-text-muted);
      font-size: 0.75rem;
      line-height: 1.45;
    }

    .legal-foot {
      padding: var(--tc-space-7) clamp(var(--tc-space-9), 3vw, var(--tc-space-14));
      border-top: 1px solid var(--tc-border-soft);
      color: var(--tc-text-faint);
      font-size: 0.6875rem;
      line-height: 1.45;
      background: var(--tc-surface-dark-glass-soft);
    }

    .legal-foot p {
      margin: 0;
    }

    @media (max-width: 760px) {
      .legal-page {
        padding: var(--tc-space-5);
      }

      .legal-shell {
        padding-top: 168px;
      }

      .legal-topbar {
        top: 8px;
        left: 10px;
        right: 10px;
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: var(--tc-space-4-5);
      }

      .legal-logo {
        width: 100%;
      }

      .legal-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
      }

      .legal-actions a {
        min-height: var(--tc-control-height-md);
      }

      .legal-nav {
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .legal-nav a {
        min-height: var(--tc-control-height-field);
        padding: 0 var(--tc-space-2-5);
        font-size: 0.6875rem;
      }

      .legal-section {
        scroll-margin-top: 176px;
      }

      .legal-rules {
        grid-template-columns: 1fr;
      }

      .legal-burst img {
        opacity: calc(var(--burst-opacity) * 0.62);
      }
    }
}
/*
  Motion Typography legal-page specific styles belong here.
*/