/* Generated by tools/styles/build-runtime-css.mjs. Do not edit directly. */
/* entry: shared/styles/text-collage/editor.css */
/* source: shared/styles/bundles/app-editor-shell.css */
/*
  Shared standalone editor shell.
  App-owned editor styles import this once, then add app-specific renderer CSS.
*/

/* 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/components/color-picker.css */
@layer components {
:root {
  --kp-picker-bg-panel: var(--tc-surface-popup);
  --kp-picker-bg-surface: var(--tc-surface-control);
  --kp-picker-bg-input: var(--tc-surface-control-action);
  --kp-picker-bg-input-hover: var(--tc-surface-control-hover);
  --kp-picker-border: var(--tc-border-default);
  --kp-picker-border-strong: var(--tc-border-emphasis);
  --kp-picker-text: var(--tc-text-main);
  --kp-picker-muted: var(--tc-text-muted);
  --kp-picker-accent: var(--tc-accent-border-strong);
  --kp-picker-accent-solid: var(--tc-accent-main);
  --kp-picker-accent-dim: var(--tc-accent-bg);
  --kp-picker-radius: var(--tc-compact-popup-slider-card-radius);
  --kp-picker-radius-sm: var(--tc-compact-popup-slider-card-radius);
  --kp-picker-shadow: var(--tc-shadow-popover);
  --kp-picker-mono: var(--tc-font-mono);
  --kp-picker-icon-shadow: 0 1px 2px rgba(var(--tc-rgb-black), 0.55);
  --kp-picker-focus-ring-strong: 0 0 0 3px rgba(var(--tc-rgb-text), 0.9);
  --kp-picker-angle-ring: repeating-conic-gradient(from 0deg, var(--tc-white) 0deg 1deg, transparent 1deg 24deg);
  --kp-picker-section-dim: brightness(0.68);
}

.kp-color-swatch-row {
  --kp-current-color: var(--caption-color, var(--tc-text-main));
  --kp-swatch-size: 22px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
  user-select: none;
}

.kp-color-swatch-row::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.kp-color-swatch {
  width: var(--kp-swatch-size);
  height: var(--kp-swatch-size);
  flex: 0 0 var(--kp-swatch-size);
  border: 1px solid var(--kp-picker-border);
  border-radius: var(--tc-radius-control-compact);
  background: var(--sw);
  cursor: pointer;
  padding: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  position: relative;
  overflow: hidden;
}

.kp-color-swatch:hover {
  border-color: var(--kp-picker-border-strong);
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.88),
    inset -2px 0 0 rgba(255, 255, 255, 0.88);
}

.kp-color-swatch.is-active {
  border-color: var(--kp-picker-accent);
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.94),
    inset -2px 0 0 rgba(255, 255, 255, 0.94),
    0 0 0 1px var(--kp-picker-accent-dim) inset;
}

.kp-color-swatch--picker {
  position: sticky;
  left: 0;
  z-index: 2;
  display: inline-flex;
  width: calc(var(--kp-swatch-size) * 2.8);
  min-width: calc(var(--kp-swatch-size) * 2.8);
  flex-basis: calc(var(--kp-swatch-size) * 2.8);
  align-items: center;
  justify-content: center;
  border-color: var(--kp-picker-border-strong);
  background: var(--kp-picker-bg-input);
  background-image: none;
  color: var(--tc-white);
  box-shadow: 9px 0 0 0 var(--kp-picker-bg-panel);
}

.kp-color-swatch--picker.is-active,
.kp-color-swatch--picker[aria-expanded="true"] {
  border-color: var(--tc-color-transparent);
  background: var(--tc-editor-ui-control-bg-click);
  background-image: none;
  color: var(--tc-editor-ui-control-text-click);
}

.kp-color-swatch--row-gradient {
  background: var(--sw);
  background-size: cover;
  background-position: 50% 50%;
}

.kp-color-swatch-picker-icon {
  display: inline-grid;
  place-items: center;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
  text-shadow: var(--kp-picker-icon-shadow);
}

.kp-color-swatch-picker-icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

.native-color-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.kp-color-picker-float {
  --kp-picker-swatch-width: calc(var(--tc-field-height-lg) + var(--tc-space-3));
  --kp-picker-swatch-height: var(--tc-field-height-xs);
  --kp-picker-swatch-gap: var(--tc-space-2);
  --kp-picker-content-gap: var(--tc-space-3);
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  z-index: 300000;
  width: min(calc(var(--tc-panel-width-md) + var(--tc-space-20)), calc(100vw - (var(--tc-space-3) * 2)));
  background: var(--tc-editor-ui-popup, var(--kp-picker-bg-panel));
  border: 1px solid var(--tc-popup-border, var(--kp-picker-border));
  border-radius: var(--kp-picker-radius);
  box-shadow: var(--tc-editor-ui-popup-shadow, var(--tc-shadow-popup));
  padding: var(--tc-space-4);
  max-height: min(600px, calc(100dvh - (var(--tc-space-3) * 2) - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  overflow-x: hidden;
  overflow-y: auto;
  transform: translate(-50%, -50%);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kp-color-picker-float::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.kp-color-picker-float[hidden],
.kp-color-picker-float [hidden],
.kp-grad-editor [hidden] {
  display: none;
}

.kp-color-picker-float.is-open {
  animation: kpColorPickerIn 140ms ease-out;
}

.kp-color-picker-float.is-desktop-draggable .kp-color-picker-drag-handle {
  cursor: grab;
}

.kp-color-picker-float.is-panel-dragging .kp-color-picker-drag-handle {
  cursor: grabbing;
  user-select: none;
}

.kp-color-picker-float.is-mobile-popup .kp-color-picker-drag-handle {
  cursor: default;
  pointer-events: none;
}

.kp-color-picker-float.is-mobile-popup .kp-color-picker-drag-indicator {
  opacity: 0;
}

.kp-color-picker-float.has-user-position,
.kp-color-picker-float.is-anchor-positioned {
  transform: none;
}

.kp-color-picker-float.is-mobile-bottom {
  transform: none;
}

@keyframes kpColorPickerIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.kp-color-picker-drag-handle {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tc-space-8);
  margin: 0;
  touch-action: none;
}

.kp-color-picker-drag-indicator {
  width: var(--tc-space-16);
  height: calc(var(--tc-space-hairline) * 2);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-border-highlight);
  opacity: 1;
}

.kp-color-picker-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tc-space-1);
  margin: 0;
}

.kp-color-picker-tab {
  min-height: var(--tc-compact-switch-height);
  border: 1px solid var(--kp-picker-border);
  border-radius: var(--kp-picker-radius-sm);
  background: var(--kp-picker-bg-input);
  color: var(--kp-picker-muted);
  font-family: var(--tc-font-body);
  font-size: var(--tc-compact-switch-segment-font-size);
  font-weight: var(--tc-compact-switch-segment-font-weight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 8px;
}

.kp-color-picker-tab.is-active {
  color: var(--kp-picker-text);
  border-color: var(--kp-picker-accent);
  background: var(--kp-picker-accent-dim);
  box-shadow: inset 0 0 0 var(--tc-space-hairline) var(--kp-picker-accent);
}

.kp-color-picker-tab[aria-pressed="true"] {
  color: var(--kp-picker-text);
  border-color: var(--kp-picker-accent);
  background: var(--kp-picker-accent-dim);
}

.kp-color-picker-tab.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kp-color-picker-tab.is-guided-highlight {
  color: var(--tc-text-on-accent);
  border-color: var(--kp-picker-accent);
  background: var(--kp-picker-accent-solid);
  box-shadow: inset 0 0 0 var(--tc-space-hairline) var(--kp-picker-accent);
  animation: kpPickerGuidedHighlight var(--tc-transition-standard) 3 alternate;
}

.kp-color-picker-tab.is-active.is-guidance-muted {
  color: var(--kp-picker-muted);
  border-color: var(--kp-picker-border);
  background: var(--kp-picker-bg-input);
  box-shadow: none;
  opacity: var(--tc-compact-popup-action-meta-opacity);
}

@keyframes kpPickerGuidedHighlight {
  from {
    box-shadow: inset 0 0 0 var(--tc-space-hairline) var(--kp-picker-accent-solid);
  }

  to {
    box-shadow:
      inset 0 0 0 var(--tc-space-hairline) var(--kp-picker-accent-solid),
      0 0 0 var(--tc-space-1) var(--kp-picker-accent);
  }
}

.kp-grad-column {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-1);
  min-width: 0;
}

.cp-panel-embedded {
  background: transparent;
  border: 0;
  border-radius: var(--kp-picker-radius);
  padding: 0 0 7px;
  margin-bottom: 6px;
  width: 100%;
  box-sizing: border-box;
}

.cp-body {
  display: flex;
  gap: var(--tc-space-2);
  height: 92px;
  margin-bottom: var(--kp-picker-content-gap);
}

.cp-sv-wrap {
  flex: 1;
  position: relative;
  height: 100%;
  cursor: crosshair;
  border-radius: var(--tc-radius-control-compact);
  overflow: visible;
}

.cp-h-wrap {
  position: relative;
  width: 18px;
  height: 100%;
  cursor: pointer;
  border-radius: var(--tc-radius-control-compact);
  overflow: visible;
  flex-shrink: 0;
}

.cp-sv-wrap canvas,
.cp-h-wrap canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--tc-radius-control-compact);
  pointer-events: none;
}

.cp-thumb {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--kp-picker-text);
  border-radius: var(--tc-radius-round);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.cp-thumb-vert {
  position: absolute;
  left: -2px;
  right: -2px;
  height: 6px;
  background: var(--kp-picker-text);
  border-radius: var(--kp-picker-radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.3);
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 10;
}

.cp-bottom {
  display: grid;
  grid-template-columns:
    var(--kp-picker-swatch-width)
    minmax(0, 1fr);
  column-gap: var(--kp-picker-content-gap);
  row-gap: var(--kp-picker-content-gap);
  align-items: center;
}

.cp-bottom .cp-preview {
  grid-column: 1;
  grid-row: 1;
}

.cp-bottom .chip {
  grid-column: 2;
  grid-row: 1;
}

.cp-preview {
  width: 100%;
  height: var(--kp-picker-swatch-height);
  border-radius: var(--tc-radius-control-compact);
  border: 0;
}

.chip {
  background: var(--kp-picker-bg-input);
  border: 0;
  color: var(--kp-picker-text);
  border-radius: var(--tc-radius-sm);
  padding: 0 var(--tc-space-2);
  height: var(--kp-picker-swatch-height);
  font-size: var(--tc-type-editor-popup-slider-value-size);
  text-align: center;
  font-family: var(--kp-picker-mono);
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

.chip:focus-visible {
  box-shadow: var(--tc-focus-ring);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 5px;
  margin-top: 9px;
  padding: 6px 0 0;
  border-top: 0;
}

.kp-grad-swatches.is-dragging,
.kp-grad-palette-rail.is-dragging,
.kp-grad-premades.is-dragging,
.kp-grad-presets.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.swatch {
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--tc-radius-xs);
  background: var(--sw);
  cursor: pointer;
  padding: 0;
  transition: border-color 100ms ease, box-shadow 100ms ease;
  position: relative;
  overflow: hidden;
}

.swatch:hover {
  border-color: var(--tc-surface-fill-strong);
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.94),
    inset -2px 0 0 rgba(255, 255, 255, 0.94);
}

.swatch.is-active {
  border-color: var(--kp-picker-accent);
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.98),
    inset -2px 0 0 rgba(255, 255, 255, 0.98),
    0 0 0 1px var(--kp-picker-accent-dim) inset;
}

.kp-grad-editor {
  display: grid;
  width: 100%;
  grid-template-columns:
    minmax(
      calc((var(--kp-picker-swatch-width) * 5) + (var(--kp-picker-swatch-gap) * 4)),
      1.2fr
    )
    minmax(0, 0.9fr);
  align-items: start;
  gap: var(--tc-compact-popup-column-gap);
  min-width: 0;
}

.kp-color-picker-float.is-mobile-popup .kp-grad-editor {
  grid-template-columns:
    minmax(
      calc((var(--kp-picker-swatch-width) * 5) + (var(--kp-picker-swatch-gap) * 4)),
      1.2fr
    )
    minmax(0, 1fr);
}

.kp-grad-column {
  gap: var(--kp-picker-content-gap);
}

.kp-grad-gradient-only {
  width: 100%;
  min-width: 0;
}

.kp-grad-gradient-only.is-disabled,
.kp-grad-column--finishing.is-disabled,
.kp-grad-per-letter-toggle:disabled {
  opacity: 0.32;
  filter: var(--kp-picker-section-dim);
}

.kp-grad-palette-rail {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: var(--kp-picker-swatch-height);
  align-items: start;
  gap: var(--kp-picker-swatch-gap);
  width: auto;
  min-width: 0;
  max-width: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-y;
  cursor: grab;
}

.kp-grad-palette-rail::-webkit-scrollbar {
  display: none;
}

.kp-grad-editor.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.kp-grad-section {
  display: flex;
  flex-direction: column;
  gap: var(--kp-picker-content-gap);
  padding: var(--tc-space-hairline) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.kp-grad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-1);
  color: var(--kp-picker-muted);
  font-family: var(--tc-font-body);
  font-size: var(--tc-type-compact-control-category-size);
  font-weight: var(--tc-type-compact-control-category-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kp-grad-head-actions {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: var(--tc-space-1);
}

.kp-grad-head--compact {
  margin-bottom: 2px;
}

.kp-grad-head strong {
  color: var(--kp-picker-text);
  font-size: var(--tc-type-editor-popup-slider-label-size);
  letter-spacing: 0.02em;
}

.kp-grad-mini-btn {
  min-height: var(--tc-compact-popup-action-height);
  padding: 0 var(--tc-compact-popup-action-padding-x);
  border: 1px solid var(--kp-picker-border);
  border-radius: var(--kp-picker-radius-sm);
  background: var(--kp-picker-bg-panel);
  color: var(--kp-picker-text);
  cursor: pointer;
  font-family: var(--tc-compact-popup-action-font-family);
  font-size: var(--tc-compact-popup-action-font-size);
  font-weight: var(--tc-compact-popup-action-font-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kp-grad-mini-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.kp-grad-swatches {
  display: grid;
  grid-template-columns: repeat(var(--kp-grad-count, 5), minmax(0, 1fr));
  gap: var(--kp-picker-swatch-gap);
  padding: 1px 0;
  max-width: 100%;
  overflow-x: visible;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: none;
  cursor: default;
}

.kp-grad-premades {
  display: grid;
  grid-template-columns: none;
  grid-template-rows: var(--kp-picker-swatch-height);
  grid-auto-flow: column;
  grid-auto-columns: var(--kp-picker-swatch-width);
  justify-content: start;
  gap: var(--kp-picker-swatch-gap);
  width: max-content;
  max-width: none;
  overflow: visible;
  cursor: inherit;
}

.kp-grad-swatches::-webkit-scrollbar {
  display: none;
}

.kp-grad-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: var(--kp-picker-swatch-height);
  height: var(--kp-picker-swatch-height);
  transform: translate3d(0, 0, 0);
  transition: transform 120ms ease;
}

.kp-grad-swatch:not(.is-selected):not(.is-inactive) {
  opacity: var(--tc-compact-popup-action-meta-opacity);
}

.kp-grad-swatch.is-inactive {
  opacity: 0.28;
}

.kp-grad-swatch.is-dragging {
  z-index: 2;
}

.kp-grad-swatch-chip {
  width: 100%;
  min-width: 0;
  height: var(--kp-picker-swatch-height);
  flex: 1 1 auto;
  border: 0;
  border-radius: var(--tc-radius-xs);
  background: var(--sw);
  cursor: grab;
  padding: 0;
  outline: none;
  transition: box-shadow 120ms ease;
}

.kp-grad-swatch.is-inactive .kp-grad-swatch-chip {
  border-style: dashed;
  background: var(--kp-picker-bg-input);
  cursor: default;
}

.kp-grad-swatch.is-available .kp-grad-swatch-chip {
  cursor: pointer;
}

.kp-grad-swatch-chip:hover {
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.92),
    inset -2px 0 0 rgba(255, 255, 255, 0.92);
}

.kp-grad-swatch.is-selected .kp-grad-swatch-chip {
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.98),
    inset -2px 0 0 rgba(255, 255, 255, 0.98),
    0 0 0 1px var(--kp-picker-accent-dim) inset;
}

.kp-grad-swatch.is-dragging .kp-grad-swatch-chip {
  cursor: grabbing;
  box-shadow: var(--kp-picker-focus-ring-strong);
}

.kp-grad-swatch-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.kp-grad-swatch-remove {
  display: none;
}

.kp-grad-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.kp-grad-mode-btn {
  min-height: var(--tc-compact-switch-height);
  border: 1px solid var(--kp-picker-border);
  border-radius: var(--kp-picker-radius-sm);
  background: var(--kp-picker-bg-panel);
  color: var(--kp-picker-muted);
  cursor: pointer;
  font-family: var(--tc-compact-switch-segment-font-family);
  font-size: var(--tc-compact-switch-segment-font-size);
  font-weight: var(--tc-compact-switch-segment-font-weight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 7px;
}

.kp-grad-adjustment-tabs {
  --tc-compact-switch-columns: 4;
  min-width: 0;
}

.kp-grad-adjustment-btn {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kp-grad-adjustment-btn:focus-visible,
.kp-grad-mode-btn:focus-visible,
.kp-color-picker-tab:focus-visible,
.kp-color-picker-action:focus-visible,
.kp-grad-mini-btn:focus-visible,
.kp-grad-random-toggle:focus-visible {
  outline: 0;
  box-shadow: var(--tc-focus-ring);
}

.kp-grad-mode-btn.is-active,
.kp-grad-per-letter-toggle.is-active {
  color: var(--kp-picker-text);
  border-color: var(--kp-picker-accent);
  background: var(--kp-picker-accent-dim);
}

.kp-grad-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  min-height: var(--tc-compact-popup-slider-height);
  gap: var(--tc-compact-popup-slider-content-gap) var(--tc-compact-popup-slider-value-gap);
  padding: var(--tc-compact-popup-slider-padding-y) var(--tc-compact-popup-slider-padding-x);
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-compact-popup-slider-card-radius);
  background: var(--tc-compact-popup-slider-bg);
  color: var(--tc-editor-ui-popup-text-muted);
  font-family: var(--tc-font-body);
  font-size: var(--tc-editor-popup-slider-label-font);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.kp-grad-slider-row > :first-child {
  grid-column: 1;
  grid-row: 1;
}

.kp-grad-slider-row--curve {
  grid-template-columns: 45px minmax(0, 1fr) 98px;
}

.kp-grad-slider-row--curve .opt-output {
  font-size: 10px;
  letter-spacing: 0.01em;
}

.kp-grad-slider-row--curve-dual {
  grid-template-columns: 45px minmax(0, 1fr) 70px;
}

.kp-grad-angle-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.kp-grad-editor:not(.is-letter-space) .kp-grad-angle-label-wrap {
  display: block;
}

.kp-grad-random-toggle {
  min-height: var(--tc-control-height-xs);
  padding: 0 7px;
  border: 1px solid var(--kp-picker-border);
  border-radius: var(--kp-picker-radius-sm);
  background: var(--kp-picker-bg-input);
  color: var(--kp-picker-muted);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kp-grad-random-toggle.is-active {
  color: var(--kp-picker-text);
  border-color: var(--kp-picker-accent);
  background: var(--kp-picker-accent-dim);
}

.kp-grad-random-toggle.is-dimmed {
  opacity: 0.45;
}

.kp-grad-slider-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-height: var(--tc-icon-size-md);
  margin: 0;
  background:
    linear-gradient(
      to right,
      var(--tc-editor-scrub-fill-active) 0 var(--kp-range-progress, 0%),
      var(--tc-editor-scrub-track) var(--kp-range-progress, 0%) 100%
    ) center / 100% var(--tc-compact-popup-slider-track-height) no-repeat;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.kp-grad-slider-row input[type="range"]::-webkit-slider-runnable-track {
  height: var(--tc-compact-popup-slider-track-height);
  border: 0;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-color-transparent);
}

.kp-grad-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  border: 0;
  background: var(--tc-color-transparent);
}

.kp-grad-slider-row input[type="range"]::-moz-range-track {
  height: var(--tc-compact-popup-slider-track-height);
  border: 0;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-color-transparent);
}

.kp-grad-slider-row input[type="range"]::-moz-range-thumb {
  width: 0;
  height: 0;
  border: 0;
  background: var(--tc-color-transparent);
}

.kp-grad-dual-curve {
  position: relative;
  min-height: 19px;
  display: block;
}

.kp-grad-dual-curve-track,
.kp-grad-dual-curve-range {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  border-radius: var(--tc-radius-pill);
  pointer-events: none;
}

.kp-grad-dual-curve-track {
  left: 0;
  right: 0;
  background: var(--tc-surface-fill-strong);
}

.kp-grad-dual-curve-range {
  left: 0%;
  width: 100%;
  background: var(--kp-picker-accent);
}

.kp-grad-dual-curve-input {
  position: absolute;
  inset: 0;
  margin: 0;
  background: transparent;
}

.kp-grad-dual-curve-input::-webkit-slider-runnable-track {
  height: 3px;
  border: 0;
  background: transparent;
}

.kp-grad-dual-curve-input::-moz-range-track {
  height: 3px;
  border: 0;
  background: transparent;
}

.kp-grad-dual-curve-input--left {
  z-index: 2;
}

.kp-grad-dual-curve-input--right {
  z-index: 3;
}

.kp-grad-slider-row output {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  color: var(--kp-picker-text);
  font-family: var(--tc-font-body);
  font-size: var(--tc-editor-popup-slider-value-font);
  font-weight: var(--tc-type-editor-popup-slider-value-weight);
}

.kp-grad-curve-wrap {
  width: 100%;
  min-height: 58px;
  max-height: 72px;
  height: clamp(58px, 14vh, 72px);
  aspect-ratio: auto;
  border: 0;
  border-radius: var(--kp-picker-radius-sm);
  background: var(--kp-picker-bg-panel);
  overflow: hidden;
  touch-action: none;
  display: block;
}

.kp-grad-curve-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

.kp-grad-curve-diag {
  stroke: var(--tc-surface-fill-soft);
  stroke-width: 1;
  stroke-dasharray: 2;
}

.kp-grad-curve-line {
  stroke: var(--tc-surface-fill-strong);
  stroke-width: 1;
  stroke-dasharray: 3;
}

.kp-grad-curve-path {
  fill: none;
  stroke: var(--kp-picker-text);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.kp-grad-curve-knob {
  fill: var(--kp-picker-text);
  stroke: none;
  pointer-events: none;
}

.kp-grad-curve-hit {
  fill: var(--tc-color-transparent);
  cursor: grab;
}

.kp-grad-presets {
  display: grid;
  grid-template-columns: none;
  grid-template-rows: var(--kp-picker-swatch-height);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  gap: var(--kp-picker-swatch-gap);
  width: max-content;
  max-width: none;
  overflow: visible;
  cursor: inherit;
}

.kp-grad-palette-rail .kp-grad-premades,
.kp-grad-palette-rail .kp-grad-presets {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--kp-picker-swatch-gap);
  width: max-content;
  min-width: 0;
  overflow: visible;
}

.kp-grad-preset-item {
  height: var(--kp-picker-swatch-height);
}

.kp-grad-preset {
  position: relative;
  width: var(--kp-picker-swatch-width);
  height: var(--kp-picker-swatch-height);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--tc-radius-xs);
  background-image: var(--sw);
  cursor: pointer;
  padding: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.kp-grad-preset--locked {
  pointer-events: auto;
}

.kp-grad-preset:hover {
  border-color: var(--tc-surface-fill-strong);
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.92),
    inset -2px 0 0 rgba(255, 255, 255, 0.92);
}

.kp-grad-preset.is-selected {
  border-color: var(--kp-picker-accent);
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.98),
    inset -2px 0 0 rgba(255, 255, 255, 0.98),
    0 0 0 1px var(--kp-picker-accent-dim) inset;
}

.kp-grad-stop-picker {
  position: static;
  z-index: auto;
  width: 100%;
  min-width: 0;
}

.kp-grad-stop-picker-card.cp-panel-embedded {
  margin: 0;
  padding: 8px 9px;
  border: 1px solid var(--kp-picker-border);
  border-radius: var(--kp-picker-radius-sm);
  background: var(--kp-picker-bg-panel);
  box-shadow: none;
}

.kp-grad-stop-cp-body.cp-body {
  height: calc((var(--tc-field-height-lg) * 3) + var(--tc-space-4));
  gap: 8px;
  margin-bottom: 8px;
}

.kp-grad-stop-cp-body .cp-h-wrap {
  width: 14px;
}

.kp-grad-stop-bottom.cp-bottom {
  grid-template-columns: var(--kp-picker-swatch-width) minmax(0, 1fr) var(--kp-picker-swatch-height);
  gap: var(--kp-picker-content-gap);
}

.kp-grad-stop-bottom .cp-preview {
  height: var(--kp-picker-swatch-height);
}

.kp-grad-stop-bottom .chip {
  height: var(--kp-picker-swatch-height);
  font-size: var(--tc-type-editor-popup-slider-value-size);
}

.kp-grad-stop-bottom .kp-grad-per-letter-toggle--icon {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: var(--kp-picker-swatch-height);
  min-width: var(--kp-picker-swatch-height);
  height: var(--kp-picker-swatch-height);
  min-height: var(--kp-picker-swatch-height);
  padding: 0;
}

.kp-grad-per-letter-toggle--icon svg {
  display: block;
  width: var(--tc-icon-size-md);
  height: var(--tc-icon-size-md);
}

.kp-grad-output {
  width: 100%;
  min-height: 29px;
  border: 0;
  border-radius: var(--kp-picker-radius-sm);
  background: transparent;
  color: transparent;
  text-align: left;
  padding: 4px;
  cursor: pointer;
  position: relative;
}

.kp-grad-output::before {
  content: "";
  display: block;
  width: 100%;
  height: 20px;
  border-radius: var(--kp-picker-radius-sm);
  margin: 0;
  border: 0;
  background-image: var(--kp-grad-preview);
}

.kp-grad-output::after,
.kp-grad-output:hover::after,
.kp-grad-output[data-copy-state="copied"]::after {
  content: none;
}

@media (max-width: 900px) {
  .kp-grad-grid {
    grid-template-columns: 1fr;
  }
}

.kp-color-picker-custom-item {
  display: inline-flex;
  align-items: center;
  gap: var(--kp-picker-swatch-gap);
  height: var(--kp-picker-swatch-height);
  padding: 0;
  border: 0;
  border-radius: var(--tc-radius-sm);
  background: var(--kp-picker-bg-input);
}

.kp-color-picker-custom-swatch {
  width: var(--kp-picker-swatch-width);
  height: var(--kp-picker-swatch-height);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--tc-radius-control-compact);
  background: var(--sw);
  cursor: pointer;
}

.kp-color-picker-custom-swatch.is-active {
  border-color: var(--kp-picker-accent);
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, 0.98),
    inset -2px 0 0 rgba(255, 255, 255, 0.98);
}

.kp-color-picker-custom-remove {
  width: var(--kp-picker-swatch-height);
  height: var(--kp-picker-swatch-height);
  padding: 0;
  border: 0;
  border-radius: var(--tc-radius-control-compact);
  background: var(--kp-picker-bg-input);
  color: var(--kp-picker-text);
  cursor: pointer;
  font-size: 0;
  position: relative;
}

.kp-color-picker-custom-remove::before,
.kp-color-picker-custom-remove::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 1.5px;
  border-radius: var(--tc-radius-2xs);
  background: currentColor;
  top: 50%;
  left: 50%;
}

.kp-color-picker-custom-remove::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.kp-color-picker-custom-remove::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.kp-color-picker-custom-remove:hover {
  background: var(--kp-picker-bg-input-hover);
}

.kp-color-picker-footer {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, var(--tc-compact-popup-action-height));
  gap: var(--tc-space-1);
}

.kp-color-picker-bottom-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--tc-space-1);
  margin-top: var(--kp-picker-content-gap);
  padding-top: 0;
}

.kp-color-picker-action {
  width: 100%;
  min-height: var(--tc-compact-popup-action-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kp-picker-border);
  border-radius: var(--kp-picker-radius-sm);
  background: var(--kp-picker-bg-input);
  color: var(--kp-picker-text);
  cursor: pointer;
  font-family: var(--tc-compact-popup-action-font-family);
  font-size: var(--tc-compact-popup-action-font-size);
  font-weight: var(--tc-compact-popup-action-font-weight);
  line-height: var(--tc-compact-popup-action-line-height);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.kp-color-picker-save,
.kp-color-picker-close-footer {
  width: var(--tc-compact-popup-action-height);
  min-width: var(--tc-compact-popup-action-height);
  height: var(--tc-compact-popup-action-height);
  padding: 0;
}

.kp-color-picker-save svg,
.kp-color-picker-close-footer svg {
  display: block;
  width: var(--tc-icon-size-md);
  height: var(--tc-icon-size-md);
}

.kp-color-picker-save.is-save-confirmed {
  color: var(--kp-picker-text);
  border-color: var(--kp-picker-accent);
  background: var(--kp-picker-accent-dim);
  box-shadow: inset 0 0 0 var(--tc-space-hairline) var(--kp-picker-accent);
  animation: kpPickerSaveConfirmed var(--tc-transition-standard) 3 alternate;
}

.kp-grad-preset-item.is-just-saved,
.kp-solid-preset-item.is-just-saved {
  box-shadow: 0 0 0 var(--tc-space-hairline) var(--kp-picker-accent);
}

.kp-grad-preset-item.is-just-saved .kp-grad-preset,
.kp-solid-preset-item.is-just-saved .kp-grad-preset {
  border-color: var(--kp-picker-accent);
  box-shadow: inset 0 0 0 var(--tc-space-hairline) var(--kp-picker-accent);
}

@keyframes kpPickerSaveConfirmed {
  from {
    box-shadow: inset 0 0 0 var(--tc-space-hairline) var(--kp-picker-accent);
  }

  to {
    box-shadow:
      inset 0 0 0 var(--tc-space-hairline) var(--kp-picker-accent),
      0 0 0 var(--tc-space-1) var(--kp-picker-accent-dim);
  }
}

.cp-preview,
.kp-color-picker-custom-swatch,
.kp-grad-swatch-chip,
.kp-grad-preset {
  box-sizing: border-box;
  border: 1px solid var(--kp-picker-border);
  border-radius: var(--tc-compact-popup-slider-card-radius);
}

.kp-color-picker-action:hover {
  border-color: var(--kp-picker-border-strong);
  background: var(--kp-picker-bg-input-hover);
}

@media (prefers-reduced-motion: reduce) {
  .kp-color-picker-float.is-open {
    animation: none;
  }

  .kp-color-picker-tab.is-guided-highlight,
  .kp-color-picker-save.is-save-confirmed {
    animation: none;
  }
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing .app-shell-color-picker-host,
.editor-controls.compact-controls .compact-category-spacing .app-shell-color-picker-host {
  --tc-app-shell-format-color-size: var(--compact-control-width);
  --kp-swatch-size: var(--tc-app-shell-format-color-size);
  position: relative;
  flex: 0 0 var(--compact-control-width);
  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);
  align-self: flex-start;
  padding: 0;
  color: var(--tc-control-text);
  overflow: visible;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing .app-shell-color-picker-host > .kp-color-swatch-row,
.editor-controls.compact-controls .compact-category-spacing .app-shell-color-picker-host > .kp-color-swatch-row {
  display: block;
  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);
  padding: 0;
  overflow: visible;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch:not(.kp-color-swatch--picker),
.editor-controls.compact-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch:not(.kp-color-swatch--picker) {
  display: none;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch--picker,
.editor-controls.compact-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch--picker {
  position: relative;
  left: auto;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  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);
  flex: 0 0 var(--compact-control-width);
  padding: 0;
  background-image: none;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch-picker-icon,
.editor-controls.compact-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch-picker-icon {
  display: inline-grid;
  place-items: center;
  width: var(--tc-icon-size-lg);
  height: var(--tc-icon-size-lg);
  font-size: var(--tc-icon-size-lg);
  line-height: 1;
  transform: none;
  filter: none;
  opacity: var(--tc-editor-ui-icon-idle-opacity);
  text-shadow: none;
  transition: opacity 120ms var(--tc-ease-standard), color 120ms var(--tc-ease-standard);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch--picker:hover .kp-color-swatch-picker-icon,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch--picker:focus-visible .kp-color-swatch-picker-icon,
.editor-controls.compact-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch--picker:hover .kp-color-swatch-picker-icon,
.editor-controls.compact-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch--picker:focus-visible .kp-color-swatch-picker-icon {
  opacity: var(--tc-editor-ui-icon-hover-opacity);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch--picker[aria-expanded="true"] .kp-color-swatch-picker-icon,
.editor-controls.compact-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch--picker[aria-expanded="true"] .kp-color-swatch-picker-icon {
  opacity: var(--tc-editor-ui-icon-hover-opacity);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch-picker-icon svg,
.editor-controls.compact-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch-picker-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  stroke: none;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch-picker-icon svg [fill],
.editor-controls.compact-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch-picker-icon svg [fill] {
  fill: currentColor;
  stroke: none;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch--picker::after,
.editor-controls.compact-controls .compact-category-spacing .app-shell-color-picker-host .kp-color-swatch--picker::after {
  display: none;
  content: none;
}

}

/* source: shared/styles/features/editor/editor-shell.css */
@layer features {
/* Standalone glyph editor layout, controls, preview canvas, and export UI. */
:root {
  color-scheme: dark;
  --tc-select-bg: var(--tc-color-transparent);
  --tc-select-menu-bg: var(--tc-editor-ui-popup);
  --tc-select-line: var(--tc-editor-ui-line);
  --tc-select-line-strong: var(--tc-editor-ui-line-strong);
  --tc-select-accent: var(--tc-accent-main);
  --editor-font: 0.875rem;
}


html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--tc-color-transparent);
}

/* Standalone editor HTML is complete before its runtime binds. The tiny head
   preflight relocates the header and removes the source inline visibility gate
   in one task; pending font/fitting work then masks only the preview canvas. */
html[data-editor-boot="pending"],
html[data-editor-boot="settling"] {
  background: var(--tc-bg-app);
}

/* While the shared runtime binds controls, prevent native-to-themed control
   transitions. This suppresses visual blinking without hiding editor chrome. */
html[data-editor-boot="pending"] :is(
  .preview-gallery-button,
  .preview-reset-button,
  .type-hint
),
html[data-editor-boot="settling"] :is(
  .preview-gallery-button,
  .preview-reset-button,
  .type-hint
) {
  transition: none;
}

/* Compact preview controls declare their interaction transition through a
   later, more-specific selector. Match that structural specificity during
   boot so the browser-default white button skin cannot keep interpolating
   underneath the hidden shell and flash when readiness releases it. */
html[data-editor-boot="pending"] body[data-editor-compact-controls="on"] .editor-dialog .preview-stage :is(
  .preview-gallery-button,
  .preview-reset-button
),
html[data-editor-boot="settling"] body[data-editor-compact-controls="on"] .editor-dialog .preview-stage :is(
  .preview-gallery-button,
  .preview-reset-button
) {
  transition: none;
}

/* Fail-safe for inline and standalone hosts: before the shared runtime moves
   this header above `.editor-modal-body`, it must not create an implicit grid
   row and briefly split the editor into two apparent layouts. */
.inline-editor-mount .editor-window > .editor-modal-header {
  display: none;
}

body {
  margin: 0;
  color: var(--tc-text-main);
  font-size: var(--editor-font);
  font-family: var(--tc-font-body);
  background: var(--tc-color-transparent);
}

html:focus,
body:focus,
.editor-page:focus,
.editor-dialog:focus,
.editor-window:focus {
  outline: 0;

}

body.is-embed {
  background: var(--tc-color-transparent);
}

body.is-embed::before,
body.is-embed::after {
  display: none;
}

body.is-embed .editor-page,
body.is-embed .editor-dialog,
body.is-embed .editor-tabs {
  background: var(--tc-color-transparent);
}

body.is-embed .editor-dialog,
body.is-embed .editor-tabs {
  background: var(--tc-color-transparent);
}

.editor-standalone-shell {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: min(var(--tc-editor-viewport-max-width), calc(100vw - 40px));
  height: min(var(--tc-editor-viewport-max-height), calc(100dvh - 40px));
  margin: auto;
  color: var(--tc-text-main);
}

.editor-standalone-shell .editor-modal-frame {
  height: 100%;
}

.editor-standalone-shell .editor-modal-body {
  flex: 1 1 auto;
  min-height: 0;
}

.editor-standalone-shell .editor-modal-header[data-inline-editor-header="true"] {
  width: 100%;
}

.editor-page {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--tc-editor-shell-pad);
  overflow: hidden;
  background: var(--tc-bg-app);
}

body.is-embed .editor-page {
  padding: 0;
  background: var(--tc-color-transparent);
}

.editor-dialog {
  --editor-tab-offset: var(--tc-editor-shell-tab-offset);
  --editor-panel-height: var(--tc-editor-panel-height);
  --editor-controls-height: var(--editor-panel-height);
  position: relative;
  width: min(var(--tc-editor-shell-max-width), 100%);
  height: min(var(--tc-editor-shell-max-height), calc(100% - var(--editor-tab-offset)));
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--tc-editor-shell-gap);
  overflow: visible;
  background: var(--tc-color-transparent);
  transform: translateY(calc(var(--editor-tab-offset) / -2));
}

.editor-dialog,
.editor-dialog *:not(.typing-capture) {
  -webkit-user-select: none;
  user-select: none;
}

.editor-window {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) var(--editor-controls-height);
  overflow: visible;
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-editor-shell-radius);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.is-embed .editor-dialog {
  width: 100%;
  height: calc(100% - var(--editor-tab-offset));
  grid-template-rows: minmax(0, 1fr);
  border: 0;
  border-radius: var(--tc-radius-none);
  background: var(--tc-color-transparent);
  box-shadow: none;
}

body.is-embed .editor-window {
  grid-template-rows: minmax(0, 1fr) var(--editor-controls-height);
  border-radius: var(--tc-radius-lg);
}

body.is-embed .editor-modal-header {
  display: none;
}


@keyframes editor-select-affordance {
  0%, 100% {
    color: currentColor;
    text-shadow: none;
    opacity: 1;
  }

  42% {
    color: var(--tc-text-strong);
    text-shadow: 0 0 12px var(--tc-editor-ui-attention-line);
    opacity: 1;
  }
}


.eyebrow {
  margin: 0;
  color: var(--tc-text-faint);
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.1;
}

body:not(.is-embed) {
  background: var(--tc-bg-app);
}

/* Text Collage's inline editor already receives this treatment from the
   host dialog backdrop. Standalone editors need the same outer workspace
   surface so the app route does not change the visible editor background. */
body:not(.is-embed):has(> .editor-standalone-shell) {
  background-color: var(--tc-bg-canvas);
  background-image: var(--tc-bg-grid-image-soft);
  background-size: var(--tc-bg-grid-size);
}

body:not(.has-inline-editor) .editor-close-button {
  display: inline-flex;
}

@media (max-width: 680px), (max-width: 900px) and (hover: none) and (pointer: coarse) {
  .editor-standalone-shell {
    width: calc(100vw - 4px);
    height: calc(100dvh - 4px);
  }
}
}

/* source: shared/styles/features/editor/editor-gpu-pixel-surface.css */
@layer features {
  /*
   * The DOM is the semantic/layout surface; WebGL owns visible editor pixels.
   * The `required` state is applied synchronously before lazy GPU chunks load, so a
   * failed context can never reveal a legacy DOM pixel renderer.
   */
  [data-gpu-pixel-surface] :is([data-text-token-kind="character"], [data-index]) {
    /* Preserve semantic opacity and geometry; only its text ink becomes
       transparent. Renderer-marked image glyphs below additionally remove
       their DOM filter while keeping that shadow as a custom property. */
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
  }

  [data-gpu-pixel-surface] [data-gpu-pixel-face] {
    /* Image faces already use hidden crop nodes as semantic GPU descriptors.
       Do not also give those nodes an opacity compositing layer: a browser GPU
       compositor can combine that empty layer with the glyph owner's CSS
       drop-shadow filter as an opaque black plane. The viewport-independent
       visibility rule keeps the crop out of paint while preserving its inline
       geometry and image metadata on desktop and mobile. The glyph owner's DOM
       filter is removed separately below while WebGL retains the shadow. */
    visibility: hidden;
  }

  [data-gpu-pixel-surface] [data-gpu-pixel-shadow-source] {
    /* WebGL paints the authored shadows. Leaving the same filter on an
       otherwise transparent semantic glyph can make mobile compositors emit
       an opaque black backing plane. The custom shadow property remains
       readable by the GPU descriptor while the DOM owns geometry only. */
    -webkit-filter: none;
    filter: none;
  }

  [data-gpu-pixel-surface] [data-text-token-kind="character"]::before {
    /* Generated plain-text gradient faces are paint-only pseudo-elements. */
    opacity: 0;
  }
}

/* source: shared/styles/features/editor/editor-preview-access.css */
@layer features {
.editor-preview {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: clamp(var(--tc-space-4), 1vw, var(--tc-space-7)) clamp(var(--tc-space-5), 1.25vw, var(--tc-space-8));
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-lg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.canvas-shell {
  position: relative;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--tc-editor-ui-line);
  border-radius: var(--tc-radius-lg);
  background-color: var(--tc-bg-canvas);
  background-image: var(--tc-bg-grid-image-soft);
  background-size: var(--tc-bg-grid-size);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: default;
  touch-action: none;
}

.canvas-shell:focus-within {
  box-shadow: none;
  outline: 0;
}

.editor-access-modal {
  width: min(520px, calc(100vw - 28px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--tc-radius-md);
  background: var(--tc-editor-ui-glass-muted);
  color: var(--tc-text-main);
  overflow: visible;
}

.editor-access-modal::backdrop,
.editor-full-access-modal::backdrop {
  background-color: var(--tc-bg-canvas);
  background-image: var(--tc-bg-grid-image-soft);
  background-size: var(--tc-bg-grid-size);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.editor-access-modal:focus,
.editor-access-modal:focus-visible,
.editor-full-access-modal:focus,
.editor-full-access-modal:focus-visible {
  outline: 0;
}

.editor-access-modal__panel {
  overflow: hidden;
}

.editor-access-modal h2 {
  margin: 0;
  max-width: 30rem;
  color: var(--tc-text-strong);
  font-size: 1.125rem;
  font-weight: 620;
  line-height: 1.22;
}

.editor-access-modal__body p {
  margin: 0;
}

.editor-access-modal__row > span {
  display: block;
  margin-bottom: var(--tc-space-2-5);
  color: var(--tc-text-strong);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.25;
}

.editor-access-modal__row > p {
  color: var(--tc-text-muted);
  line-height: 1.44;
}

.editor-access-modal__footer span {
  color: var(--tc-text-subtle);
  font-size: 0.75rem;
  line-height: 1.3;
}

.editor-payment-strip {
  position: relative;
  margin-top: var(--tc-space-6);
  overflow: hidden;
  border-top: 1px solid var(--tc-border-soft);
  border-bottom: 1px solid var(--tc-surface-highlight-strong);
  mask-image: linear-gradient(90deg, var(--tc-color-transparent), var(--tc-mask-solid) 12%, var(--tc-mask-solid) 88%, var(--tc-color-transparent));
}

.editor-payment-strip__track {
  width: max-content;
  padding: var(--tc-space-4-5) 0;
  color: var(--tc-text-faint);
  font-size: 0.6875rem;
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
  animation: editor-payment-marquee 34s linear infinite paused;
  will-change: auto;
}

.pricing-section.is-runtime-active .editor-payment-strip__track,
dialog[open] .editor-payment-strip__track {
  animation-play-state: running;
  will-change: transform;
}

.editor-payment-strip__group {
  flex: 0 0 auto;
  gap: var(--tc-space-9);
  padding-right: var(--tc-space-9);
}

.editor-payment-strip__group span {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-3);
}

.editor-payment-strip__group span::before {
  content: "";
  width: var(--tc-icon-size-2xs);
  height: var(--tc-icon-size-2xs);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-accent-main);
}

@keyframes editor-payment-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--tc-editor-payment-marquee-distance, -50%));
  }
}

.typing-capture {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: var(--tc-color-transparent);
  color: var(--tc-color-transparent);
  caret-color: var(--tc-color-transparent);
  opacity: 0;
  resize: none;
  outline: 0;
  cursor: default;
  pointer-events: none;
  -webkit-user-select: text;
  user-select: text;
}

.canvas-shell {
  border-color: var(--tc-card-border);
}

.canvas-shell:focus-within {
  border-color: var(--tc-card-border-active);
}

.editor-access-modal,
.editor-full-access-modal {
  background: var(--tc-bg-app);
}

.editor-payment-strip {
  border-top-color: var(--tc-border-faint);
  border-bottom-color: var(--tc-border-faint);
}

.editor-payment-strip__track,
.editor-access-modal__footer span {
  color: var(--tc-text-disabled);
}
}

/* source: shared/styles/features/editor/editor-panels-controls.css */
@layer features {

body.is-editor-text-edit-mode .canvas-shell.is-text-hover,
body.is-editor-text-edit-mode .canvas-shell.is-text-hover .typing-capture,
body.is-editor-text-edit-mode .canvas-shell.is-selecting-text,
body.is-editor-text-edit-mode .canvas-shell.is-selecting-text .typing-capture {
  cursor: text;
}

.editor-tabs [data-panel-tab][hidden] {
  display: none;
}

body.is-animation-playing .canvas-shell,
body.is-animation-playing .canvas-shell.is-text-hover,
body.is-animation-playing .canvas-shell.is-selecting-text,
body.is-animation-playing .preview-stage,
body.is-animation-playing .preview-stage.is-text-hover,
body.is-animation-playing .preview-stage.is-selecting-text,
body.is-animation-playing .typing-capture,
body.is-animation-mode:not([data-animation-tab-text-interaction="allow"]) .canvas-shell,
body.is-animation-mode:not([data-animation-tab-text-interaction="allow"]) .canvas-shell.is-text-hover,
body.is-animation-mode:not([data-animation-tab-text-interaction="allow"]) .canvas-shell.is-selecting-text,
body.is-animation-mode:not([data-animation-tab-text-interaction="allow"]) .typing-capture,
body.is-text-locked-mode .canvas-shell,
body.is-text-locked-mode .canvas-shell.is-text-hover,
body.is-text-locked-mode .canvas-shell.is-selecting-text,
body.is-text-locked-mode .typing-capture {
  cursor: default;
}

.type-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(38px, 5.6dvh, 62px);
  z-index: 28;
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-4);
  pointer-events: auto;
  padding: var(--tc-space-4) var(--tc-space-5-5) var(--tc-space-4) var(--tc-space-6);
  border: 1px solid var(--tc-warning-border);
  border-radius: var(--tc-radius-sm);
  background:
    linear-gradient(180deg, var(--tc-warning-bg-strong), var(--tc-warning-bg-soft)),
    var(--tc-surface-glass);
  color: var(--tc-warning-main);
  font-size: 0.6875rem;
  line-height: 1;
  cursor: text;
  transform: translateX(-50%);
  box-shadow: none;
  transition: opacity 160ms ease, transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

/* Tap (touch) / click (mouse) pointer icon floating above the hint, in place of
   the old tailed arrow, with the same smooth pulse. Uses currentColor so it
   matches the hint's color. */
.type-hint-icon {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: 1.3rem;
  height: 1.3rem;
  color: inherit;
  pointer-events: none;
  transform: translateX(-50%);
  animation: hint-icon-pulse 2.4s ease-in-out infinite;
}

.type-hint-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.type-hint-icon--click {
  display: block;
}

@media (hover: none) and (pointer: coarse) {
  .type-hint-icon--click {
    display: none;
  }
  .type-hint-icon--tap {
    display: block;
  }
}

.type-hint-text {
  display: inline-block;
  white-space: nowrap;
}

.type-hint-caret {
  width: 1px;
  height: 1.15em;
  border-radius: var(--tc-radius-xs);
  background: var(--tc-warning-main);
  box-shadow: none;
  animation: hint-caret 1s steps(1) infinite, hint-caret-pulse 2.4s ease-in-out infinite;
}

body[data-preview-checker-mode="bright"] .type-hint,
body[data-preview-checker-mode="bright"].is-empty .type-hint {
  border-color: var(--tc-warning-border);
  background: var(--tc-warning-main);
  color: var(--tc-text-inverse);
}

body[data-preview-checker-mode="bright"] .type-hint-caret,
body[data-preview-checker-mode="bright"].is-empty .type-hint-caret {
  background: currentColor;
}

body.is-typing .type-hint {
  opacity: 0;
  pointer-events: none;
}

/* The prompt belongs exclusively to Transform mode. A focused or temporarily
   control-blurred Text-edit session always communicates through its caret or
   selection, never through a stale "Double Click/Tap To Type" prompt. */
body.is-editor-text-edit-mode .type-hint {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.mobile-keyboard-open .type-hint {
  display: none;
}

body.is-style-changing .type-hint {
  opacity: 0;
  pointer-events: none;
}


body.is-empty .type-hint {
  top: auto;
  bottom: clamp(38px, 5.6dvh, 62px);
  padding: var(--tc-space-4) var(--tc-space-5-5) var(--tc-space-4) var(--tc-space-6);
  /* Keep the same geometry as the normal hint/prompt while making it visible. */
  border-color: var(--tc-warning-border);
  border-radius: var(--tc-radius-sm);
  background:
    linear-gradient(180deg, var(--tc-warning-bg-strong), var(--tc-warning-bg-soft)),
    var(--tc-surface-glass);
  color: var(--tc-warning-main);
  font-size: 0.6875rem;
  transform: translateX(-50%);
  line-height: 1;
}

body.is-empty .type-hint-caret {
  background: var(--tc-warning-main);
}

body.is-empty.is-typing .type-hint {
  opacity: 0;
}

body.is-animation-mode:not([data-animation-tab-text-interaction="allow"]) .type-hint,
body.is-animation-playing .type-hint,
body.is-animation-hint-delayed .type-hint,
body.is-exporting .type-hint,
body.is-text-locked-mode .type-hint {
  display: none;
}

.type-hint[hidden] {
  display: none;
}

body.has-simple-selection .type-hint {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

@keyframes hint-caret {
  50% {
    opacity: 0;
  }
}

@keyframes hint-caret-pulse {
  0%,
  100% {
    transform: translateX(0);
  }

  45% {
    transform: translateX(4px);
  }
}

@keyframes hint-guide {
  0%,
  100% {
    opacity: 0.38;
    transform: translateX(-50%) translateY(4px);
  }

  45% {
    opacity: 0.9;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes hint-arrow {
  0%,
  100% {
    opacity: 0.42;
    transform: translateX(-50%) translateY(4px) rotate(45deg);
  }

  45% {
    opacity: 0.95;
    transform: translateX(-50%) translateY(0) rotate(45deg);
  }
}

@keyframes hint-icon-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: translateX(-50%) translateY(3px);
  }

  45% {
    opacity: 1;
    transform: translateX(-50%) translateY(-1px);
  }
}

.canvas-shell.ratio-landscape {
  width: min(100%, 1240px);
  height: auto;
  aspect-ratio: 16 / 9;
}

.canvas-shell.ratio-portrait {
  width: auto;
  height: 100%;
  aspect-ratio: 9 / 16;
}

.preview-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  perspective: 1000px;
  padding: clamp(var(--tc-space-6), 1.7vw, var(--tc-space-12));
  --tc-preview-checker-base: var(--tc-checker-base);
  --tc-preview-checker-mark: var(--tc-checker-mark);
  background:
    linear-gradient(45deg, var(--tc-preview-checker-mark) 25%, var(--tc-color-transparent) 25%, var(--tc-color-transparent) 75%, var(--tc-preview-checker-mark) 75%),
    linear-gradient(45deg, var(--tc-preview-checker-mark) 25%, var(--tc-color-transparent) 25%, var(--tc-color-transparent) 75%, var(--tc-preview-checker-mark) 75%),
    var(--tc-preview-checker-base);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}

/*
  Resource-dependent metric changes are masked only inside the canvas preview.
  Editor chrome stays stable and usable; no full-editor loading surface is
  introduced for font selection.
*/
.editor-metric-presentation-loader {
  position: absolute;
  inset: 0;
  /* The shared loading surface is the canvas's top presentation layer. It
     must cover the compact gallery/reset controls (z-index 1002) exactly as
     the Text Collage modal loader covers its complete preview surface. */
  z-index: 1100;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: inherit;
  background: var(--tc-panel-bg);
  pointer-events: none;
}

/* The shared loader is the complete canvas presentation while busy. Remove
   the canvas frame itself (not only its color), otherwise the reserved border
   width leaves a visible inner rectangle around the loading surface. */
.canvas-shell:has(> .preview-stage[aria-busy="true"]) {
  border: 0;
  box-shadow: none;
}

/* `aria-busy` is owned by the same shared loader lifecycle. Hide every
   preview-only overlay while that lifecycle owns the canvas, so the gallery,
   reset, access notice, type hint, and playback chrome cannot pierce the
   loading surface regardless of their normal interaction z-index. */
.preview-stage[aria-busy="true"] > :is(
  .preview-gallery-button,
  .preview-reset-button,
  .preview-animation-play-button,
  .editor-access-notice,
  .type-hint
) {
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

/* Boot and font readiness adopt this exact preview-sized Text Collage surface
   in place. There is no viewport wrapper, nested visual, or translated handoff
   that can resize or jump between the first and final editor paint. */

body[data-preview-checker-mode="bright"] .preview-stage {
  --tc-preview-checker-base: var(--tc-checker-bright-base);
  --tc-preview-checker-mark: var(--tc-checker-bright-mark);
}

.canvas-shell.ratio-portrait .preview-stage {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-width: none;
  margin: 0;
  border-inline: 0;
  border-radius: var(--tc-radius-none);
}

body.is-mobile-editor-mode .canvas-shell.ratio-landscape,
body.is-mobile-editor-mode .canvas-shell.ratio-portrait {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-width: 100%;
  max-height: 100%;
}

body.is-mobile-editor-mode .canvas-shell.ratio-landscape .preview-stage,
body.is-mobile-editor-mode .canvas-shell.ratio-portrait .preview-stage {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-width: none;
  max-height: 100%;
  margin: 0;
  border-inline: 0;
}

/* Width-only: a touchscreen on a desktop must not hide the aspect toggle or
   make the preview fluid. */
@media (max-width: 820px) {
  .aspect-toggle {
    display: none;
  }

  .canvas-shell.ratio-landscape,
  .canvas-shell.ratio-portrait {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-width: 100%;
    max-height: 100%;
  }

  .canvas-shell.ratio-portrait .preview-stage,
  .canvas-shell.ratio-landscape .preview-stage {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-width: none;
    max-height: 100%;
    margin: 0;
    border-inline: 0;
  }
}

.preview-stage.align-left {
  justify-content: flex-start;
}

.preview-stage.align-center {
  justify-content: center;
}

.preview-stage.align-right {
  justify-content: flex-end;
}

#editorCanvas {
  position: relative;
  z-index: 1;
  min-width: min-content;
  min-height: min-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  transform-origin: center center;
  transform-style: preserve-3d;
}

.glyph-line {
  display: flex;
  flex-wrap: nowrap;
  min-height: 1px;
}

.glyph-line.align-left {
  justify-content: flex-start;
}

.glyph-line.align-center {
  justify-content: center;
}

.glyph-line.align-right {
  justify-content: flex-end;
}

.glyph-item {
  --glyph-shadow-filter:
    drop-shadow(0 2px 1px var(--tc-shadow-color-max))
    drop-shadow(0 -1px 1px var(--tc-shadow-color-medium))
    drop-shadow(2px 0 1px var(--tc-shadow-color-strong))
    drop-shadow(-2px 0 1px var(--tc-shadow-color-strong))
    drop-shadow(0 4px 5px var(--tc-shadow-color-low));
  /* Keep the authored shadow as renderer-readable metadata when the shared
     GPU pixel surface removes the DOM filter from browser compositing. */
  --gpu-pixel-shadow-filter: var(--glyph-shadow-filter);
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: bottom center;
  vertical-align: bottom;
  user-select: none;
  -webkit-user-drag: none;
  filter: var(--gpu-pixel-shadow-filter);
}

.glyph-space {
  display: inline-block;
  flex: 0 0 auto;
}

.editor-controls {
  position: relative;
  z-index: 30;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: visible;
  padding: var(--tc-space-4) var(--tc-space-6) var(--tc-space-5);
  border-top: 1px solid var(--tc-border-soft);
}

.editor-tabs {
  position: absolute;
  left: 50%;
  bottom: calc((-1 * var(--editor-tab-offset)) + 4px);
  z-index: 38;
  display: grid;
  place-items: center;
  width: min(540px, calc(100% - 24px));
  min-height: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  transform: translateX(-50%);
}

body.mobile-keyboard-open .editor-dialog {
  grid-template-rows: minmax(0, 1fr) 0;
  height: 100%;
  gap: 0;
  padding-bottom: 0;
  transform: none;
}

body.mobile-keyboard-open .editor-page {
  height: calc(100dvh - var(--tc-mobile-keyboard-height, 0px));
  padding-bottom: max(var(--tc-space-3), env(safe-area-inset-bottom));
}

body.is-embed.mobile-keyboard-open .editor-page {
  padding: var(--tc-space-1) var(--tc-space-1) max(var(--tc-space-3), env(safe-area-inset-bottom));
}

body.mobile-keyboard-open .editor-window {
  grid-template-rows: auto minmax(0, 1fr) 0;
}

body.is-embed.mobile-keyboard-open .editor-window {
  grid-template-rows: minmax(0, 1fr);
}

body.mobile-keyboard-open .editor-controls,
body.mobile-keyboard-open .editor-tabs {
  display: none;
}

body.mobile-keyboard-open .editor-preview {
  border-bottom: 0;
}

.toolbar-row {
  position: relative;
  z-index: 40;
  width: min(540px, 100%);
  justify-self: center;
  pointer-events: auto;
}

.field {
  min-width: 0;
}

.field label,
.check-field {
  color: var(--tc-text-muted);
  font-size: 0.5625rem;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
}

.field label {
  display: block;
  margin-bottom: var(--tc-space-2);
}

.type-hint,
body.is-empty .type-hint {
  border-color: var(--tc-warning-border);
  background: var(--tc-warning-bg);
  color: var(--tc-warning-main);
  box-shadow: none;
}

.type-hint-caret,
body.is-empty .type-hint-caret {
  background: var(--tc-warning-main);
}

body[data-preview-checker-mode="bright"] .type-hint,
body[data-preview-checker-mode="bright"].is-empty .type-hint {
  background: var(--tc-warning-main);
  color: var(--tc-text-inverse);
}

body[data-preview-checker-mode="bright"] .type-hint-caret,
body[data-preview-checker-mode="bright"].is-empty .type-hint-caret {
  background: currentColor;
}

.editor-controls {
  border-top-color: var(--tc-border-soft);
  background: var(--tc-panel-bg);
  box-shadow: none;
}
}

/* source: shared/styles/features/editor/editor-transform-text-interaction.css */
@layer features {
  /* One shared direct-manipulation frame for every editor. It is drawn from
     renderer-neutral measured geometry and never participates in exports. */
  .editor-transform-frame {
    /* Idle Transform is intentionally neutral. App color is reserved for an
       explicit selection or an active gesture, so the two states stay clear. */
    --editor-frame-accent: var(--tc-app-accent, var(--tc-accent-main));
    /* Keep the long perimeter as the original thin guide; the corners carry
       the stronger active affordance instead of making the whole box heavy. */
    --editor-frame-active-outline: color-mix(in srgb, var(--editor-frame-accent) 56%, transparent);
    --editor-frame-idle-line: var(--tc-editor-frame-idle-line);
    --editor-frame-contrast-outline: var(--tc-editor-frame-idle-outline);
    --editor-frame-idle-handle: var(--tc-editor-frame-idle-handle);
    --editor-frame-handle-stroke: var(--tc-editor-frame-handle-stroke);
    --editor-frame-presentation-opacity: 0.62;
    --editor-frame-line: var(--editor-frame-idle-line);
    --editor-frame-border: var(--editor-frame-contrast-outline);
    --editor-frame-handle: var(--editor-frame-idle-handle);
    --editor-frame-utility-color: var(--tc-editor-frame-utility);
    --editor-frame-visual-scale: 1;
    position: absolute;
    inset: 0;
    z-index: 27;
    opacity: var(--editor-frame-presentation-opacity);
    pointer-events: none;
    touch-action: none;
  }

  .editor-transform-frame[hidden] {
    display: none;
  }

  .editor-transform-frame[data-presentation="idle"],
  .editor-transform-frame[data-presentation="hover"] {
    --editor-frame-line: var(--editor-frame-idle-line);
    --editor-frame-border: var(--editor-frame-contrast-outline);
    --editor-frame-handle: var(--editor-frame-idle-handle);
    --editor-frame-presentation-opacity: 0.62;
  }

  .editor-transform-frame[data-presentation="transforming"],
  .editor-transform-frame[data-presentation="selected"] {
    --editor-frame-line: var(--editor-frame-accent);
    --editor-frame-border: var(--editor-frame-active-outline);
    --editor-frame-handle: var(--editor-frame-accent);
    --editor-frame-presentation-opacity: 1;
  }

  .editor-transform-frame[data-presentation="hover"] .editor-transform-frame__handle {
    pointer-events: none;
  }

  .editor-transform-frame__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .editor-transform-frame__outline,
  .editor-transform-frame__corner-brackets {
    fill: none;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
  }

  .editor-transform-frame__outline {
    stroke: var(--editor-frame-border);
    stroke-width: 1;
  }

  body[data-preview-checker-mode="bright"] .editor-transform-frame {
    --editor-frame-idle-line: var(--tc-editor-frame-bright-idle-line);
    --editor-frame-contrast-outline: var(--tc-editor-frame-bright-idle-outline);
    --editor-frame-idle-handle: var(--tc-editor-frame-bright-idle-handle);
    --editor-frame-handle-stroke: var(--tc-editor-frame-bright-handle-stroke);
    --editor-frame-utility-color: var(--tc-checker-bright-ink);
  }

  .editor-transform-frame__corner-brackets {
    stroke: var(--editor-frame-line);
    stroke-width: 1;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }

  .editor-transform-frame[data-presentation="transforming"] .editor-transform-frame__corner-brackets,
  .editor-transform-frame[data-presentation="selected"] .editor-transform-frame__corner-brackets {
    stroke-width: 2;
  }

  .editor-transform-frame__handle {
    --editor-frame-hit-size: 32px;
    --editor-frame-visual-size: 6px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: var(--editor-frame-hit-size);
    min-width: 0;
    height: var(--editor-frame-hit-size);
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    transform: translate3d(
        var(--editor-frame-handle-x, 0px),
        var(--editor-frame-handle-y, 0px),
        0
      ) translate(-50%, -50%);
    transform-origin: center;
    backface-visibility: hidden;
    will-change: transform;
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }

  .editor-transform-frame__handle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--editor-frame-visual-size);
    height: var(--editor-frame-visual-size);
    border: 1px solid var(--editor-frame-handle-stroke);
    background: var(--editor-frame-handle);
    transform: translate(-50%, -50%) scale(var(--editor-frame-visual-scale));
    transform-origin: center;
  }

  :root {
    /* The rotation cursor reuses the exact rotate glyph drawn on the bounding
       box handle (same path as rotateIcon in the interaction controller),
       rendered white with a dark outline so it stays legible over any preview
       background. Shared by the handle on hover and, via gestureCursor(), the
       canvas shell while a rotation gesture is dragging - one icon, one source. */
    --editor-rotate-cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' paint-order='stroke' d='M19.75 12.05q-.3 0-.587-.213T18.8 11.3q-.125-.475-.312-.937t-.438-.888q-.175-.275-.125-.612T18.2 8.3q.375-.35.863-.3t.737.475q.325.55.575 1.125t.4 1.2q.125.5-.187.875t-.838.375m-6.7 8.7q0-.3.213-.587t.537-.363q.475-.125.938-.312t.887-.438q.275-.175.613-.125t.562.275q.35.375.3.863t-.475.737q-.575.325-1.15.563t-1.175.412q-.5.125-.875-.175t-.375-.85m5.15-2.95q-.225-.2-.275-.55t.125-.625q.25-.425.438-.888t.312-.937q.075-.325.35-.537t.6-.213q.55 0 .85.375t.175.875q-.175.6-.412 1.175t-.563 1.15q-.25.425-.737.475t-.863-.3m-8.375 3.95q-2.975-.8-4.875-3.2t-1.9-5.5q0-3.75 2.625-6.375T12.05 4.05h.15l-.875-.875q-.275-.275-.275-.7t.3-.725q.275-.275.7-.275t.725.275l2.575 2.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-2.6 2.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l.9-.9h-.2q-2.925 0-4.962 2.037T5.05 13.05q0 2.425 1.475 4.288T10.3 19.8q.325.075.538.35t.212.6q0 .525-.363.825t-.862.175'/%3E%3C/svg%3E")
      10 10,
      grab;
  }

  .editor-transform-frame__handle--rotate {
    --editor-frame-hit-size: 24px;
    display: grid;
    place-items: center;
    /* Reuse the bounding-box rotate glyph itself as the hover/drag cursor. */
    cursor: var(--editor-rotate-cursor);
  }

  /* Gesture pointers are captured by the shared controller. Keep every handle
     fully visible and glued to the frame, while making the controls inert until
     the current gesture ends so they cannot steal a second pointer. */
  .editor-transform-frame[data-presentation="transforming"] .editor-transform-frame__handle {
    pointer-events: none;
  }

  /* Actual move/scale/rotate gestures share one controller-owned lifecycle.
     Remove non-transform preview chrome for that lifecycle so it cannot
     flicker, capture a pointer, or visually compete with direct manipulation.
     A pending click does not receive this class. */
  body.is-editor-transform-gesture-active :is(
    #previewGalleryBtn,
    .editor-access-notice,
    #resetTransformBtn,
    #typeHint
  ) {
    display: none;
    pointer-events: none;
  }

  .editor-transform-frame__handle--rotate::before {
    display: none;
  }

  .editor-transform-frame__handle--rotate svg {
    display: block;
    width: 13px;
    height: 13px;
    color: var(--editor-frame-utility-color);
    fill: currentColor;
    stroke: none;
    transform: scale(var(--editor-frame-visual-scale));
    transform-origin: center;
    pointer-events: none;
    shape-rendering: geometricPrecision;
  }

  .editor-transform-frame__handle--reset {
    --editor-frame-hit-size: 24px;
    --editor-frame-reset-color: var(--editor-frame-utility-color);
    --editor-frame-reset-icon-color: var(--editor-frame-reset-color);
    display: grid;
    place-items: center;
    cursor: pointer;
  }

  .editor-transform-frame__handle--reset::before {
    display: none;
  }

  .editor-transform-frame__handle--reset:hover {
    --editor-frame-reset-icon-color: var(--tc-export-danger-main);
  }

  .editor-transform-frame__handle--reset svg {
    display: block;
    width: 8px;
    height: 8px;
    color: var(--editor-frame-reset-icon-color);
    fill: currentColor;
    transform: scale(var(--editor-frame-visual-scale));
    transform-origin: center;
    pointer-events: none;
    shape-rendering: geometricPrecision;
  }

  .editor-transform-frame__handle:focus-visible {
    outline: none;
  }

  .editor-transform-frame__handle:focus-visible::before {
    outline: 1px solid var(--tc-text-strong);
    outline-offset: 4px;
  }

  @media (pointer: coarse) {
    .editor-transform-frame__handle {
      --editor-frame-hit-size: 48px;
      --editor-frame-visual-size: 8px;
    }

    .editor-transform-frame__handle--rotate,
    .editor-transform-frame__handle--reset {
      --editor-frame-hit-size: 32px;
    }

  }

  body.is-animation-mode:not([data-animation-tab-text-interaction="allow"]) .editor-transform-frame,
  body.is-animation-playing .editor-transform-frame,
  body.is-export-mode .editor-transform-frame,
  body.is-exporting .editor-transform-frame,
  body.is-editor-exporting .editor-transform-frame,
  body.is-animation-settings-popup-open .editor-transform-frame,
  body.is-animation-control-interacting .editor-transform-frame,
  body.has-simple-selection .editor-transform-frame,
  body.is-editor-text-edit-mode .editor-transform-frame {
    display: none;
    pointer-events: none;
  }
}

/* source: shared/styles/features/editor/editor-export.css */
@layer features {
.panel-stack {
  min-height: 0;
  display: grid;
}

.control-panel {
  position: relative;
  z-index: 30;
  grid-area: 1 / 1;
  min-height: 0;
  height: 100%;
  overflow: visible;
  border: 0;
  border-radius: var(--tc-radius-none);
  background: var(--tc-color-transparent);
  box-shadow: none;
}

.adjustment-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tc-space-6);
  align-items: start;
  align-content: start;
  padding: var(--tc-space-1) 0;
}

.utility-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--tc-space-4);
  align-content: start;
  padding: var(--tc-space-1) 0;
}

.export-format-field,
.export-size-field,
.export-cancel-field {
  min-width: 0;
}

.export-cancel-field {
  display: grid;
  gap: 0;
}

body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) [data-editor-action="export"] {
  width: 100%;
  min-height: var(--tc-control-height-scrub);
  height: var(--tc-control-height-scrub);
}

.export-cancel-field[hidden],
.editor-controls [data-editor-action="cancel-export"][hidden] {
  display: none;
  width: 0;
  min-width: 0;
  max-width: 0;
  height: 0;
  min-height: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) [data-editor-action="cancel-export"] {
  width: 100%;
  min-height: var(--tc-control-height-scrub);
  height: var(--tc-control-height-scrub);
}

.export-progress {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  pointer-events: none;
  border-radius: inherit;
  background: var(--tc-bg-app);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.export-progress.is-confirming-cancel {
  pointer-events: auto;
  background: var(--tc-bg-overlay-strong);
}

.export-progress.is-confirming-cancel .export-progress__panel {
  gap: var(--tc-space-4);
  padding: var(--tc-space-7) var(--tc-space-8);
  border-color: var(--tc-color-transparent);
}

.export-progress.is-confirming-cancel .export-progress__bar span {
  background: var(--tc-export-paused-main);
}

.export-progress.is-confirming-cancel .export-progress__text {
  color: var(--tc-export-paused-main);
}

.export-progress.is-confirming-cancel .export-progress__note {
  display: none;
}

.export-progress.is-confirming-cancel.is-cancel-confirm-yes-active .export-progress__panel {
  border-color: var(--tc-color-transparent);
}

.export-progress.is-confirming-cancel.is-cancel-confirm-yes-active .export-progress__bar span {
  background: var(--tc-export-danger-main);
}

.export-progress.is-confirming-cancel.is-cancel-confirm-yes-active .export-progress__text {
  color: var(--tc-export-danger-main);
}

.export-progress.is-confirming-cancel.is-cancel-confirm-no-active .export-progress__panel {
  border-color: var(--tc-color-transparent);
}

.export-progress.is-confirming-cancel.is-cancel-confirm-no-active .export-progress__bar span {
  background: var(--tc-accent-main);
}

.export-progress.is-confirming-cancel.is-cancel-confirm-no-active .export-progress__text {
  color: var(--tc-accent-main);
}

.export-progress.is-cancelled .export-progress__panel {
  border-color: var(--tc-color-transparent);
}

.export-progress.is-cancelled .export-progress__bar span {
  background: var(--tc-text-disabled);
}

.export-progress.is-cancelled .export-progress__text {
  color: var(--tc-text-muted);
}

.export-progress.is-cancelled .export-progress__note {
  color: var(--tc-text-disabled);
}

.export-progress[hidden] {
  display: none;
}

.export-progress__panel {
  width: min(360px, calc(100% - 32px));
  max-width: 100%;
  display: grid;
  gap: var(--tc-space-4);
  padding: var(--tc-space-8);
  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);
}

.export-progress__bar {
  height: var(--tc-icon-size-sm);
  overflow: hidden;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-border-soft);
}

.export-progress__bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--tc-accent-progress);
  transition: width 160ms ease;
}

.export-progress__text {
  display: block;
  min-width: 0;
  color: var(--tc-text-main);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
}

.export-progress__note {
  display: block;
  color: var(--tc-text-disabled);
  font-size: 0.6rem;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
}

.export-cancel-confirm {
  width: 100%;
  display: grid;
  gap: var(--tc-space-4);
  padding: 0;
  border: 0;
  background: var(--tc-color-transparent);
  color: var(--tc-text-main);
  pointer-events: auto;
}

.export-cancel-confirm[hidden] {
  display: none;
}

.export-cancel-confirm__message {
  margin: var(--tc-space-2) 0 0;
  color: var(--tc-text-main);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.export-cancel-confirm__actions {
  justify-content: center;
  gap: var(--tc-space-3);
}

.export-cancel-confirm__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 96px;
  min-width: 82px;
  min-height: var(--tc-control-height-sm);
  padding: 0 var(--tc-space-5);
  border: 1px solid var(--tc-editor-ui-line);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-editor-ui-control-bg);
  color: var(--tc-control-text);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.export-cancel-confirm__button:hover,
.export-cancel-confirm__button:focus-visible {
  border-color: var(--tc-editor-ui-line-strong);
  background: var(--tc-editor-ui-control-bg-hover);
  color: var(--tc-control-text-hover);
  outline: 0;
}

.export-cancel-confirm__button--yes {
  border-color: var(--tc-editor-ui-line);
  background: var(--tc-editor-ui-control-bg);
  color: var(--tc-control-text);
}

.export-cancel-confirm__button--yes:hover,
.export-cancel-confirm__button--yes:focus-visible {
  border-color: var(--tc-export-danger-border);
  background: var(--tc-export-danger-bg);
  color: var(--tc-export-danger-main);
}

.export-cancel-confirm__button--no {
  border-color: var(--tc-accent-border-medium);
  background: var(--tc-accent-bg);
  color: var(--tc-accent-main);
}

.export-cancel-confirm__button--no:hover,
.export-cancel-confirm__button--no:focus-visible {
  border-color: var(--tc-accent-border-strong);
  background: var(--tc-accent-bg-strong);
  color: var(--tc-accent-main);
}

body.is-editor-exporting .editor-tabs,
body.is-editor-exporting .editor-modal-header {
  opacity: var(--tc-export-lock-opacity);
  filter: var(--tc-export-lock-filter);
  pointer-events: none;
  user-select: none;
}

body.is-editor-exporting .preview-stage button:not([data-editor-action="export"]):not([data-editor-action="cancel-export"]),
body.is-editor-exporting .editor-controls button:not([data-editor-action="export"]):not([data-editor-action="cancel-export"]),
body.is-editor-exporting .editor-controls input,
body.is-editor-exporting .editor-controls select,
body.is-editor-exporting .editor-controls textarea,
body.is-editor-exporting .editor-controls .field,
body.is-editor-exporting .editor-controls .compact-category-header,
body.is-editor-exporting .editor-controls .status,
body.is-editor-exporting .editor-controls .compact-category:not(.compact-category-export-action):not(.compact-category-quick-export) {
  opacity: var(--tc-export-lock-opacity);
  filter: var(--tc-export-lock-filter);
  pointer-events: none;
  user-select: none;
}

body.is-editor-exporting .compact-category-export-action,
body.is-editor-exporting .compact-category-quick-export {
  position: relative;
}

body.is-editor-exporting .compact-category-export-action::after,
body.is-editor-exporting .compact-category-quick-export::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: var(--tc-bg-overlay);
  pointer-events: none;
}

body.is-editor-exporting .compact-category-export-action > *:not([data-editor-action="export"]):not([data-editor-action="cancel-export"]),
body.is-editor-exporting .compact-category-quick-export > *:not([data-editor-action="export"]):not([data-editor-action="cancel-export"]) {
  opacity: var(--tc-export-lock-opacity);
  filter: var(--tc-export-lock-filter);
}

body.is-editor-exporting [data-editor-action="export"],
body.is-editor-exporting [data-editor-action="cancel-export"] {
  position: relative;
  z-index: 2;
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

body.is-editor-exporting .editor-access-notice {
  display: none;
}

body.is-exporting [data-editor-action="export"],
body.is-editor-exporting [data-editor-action="export"],
body.is-exporting [data-editor-action="cancel-export"],
body.is-editor-exporting [data-editor-action="cancel-export"] {
  --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);
}

body.is-exporting [data-editor-action="export"]:hover,
body.is-editor-exporting [data-editor-action="export"]:hover,
body.is-exporting [data-editor-action="export"]:focus-visible,
body.is-editor-exporting [data-editor-action="export"]:focus-visible,
body.is-exporting [data-editor-action="cancel-export"]:hover,
body.is-editor-exporting [data-editor-action="cancel-export"]:hover,
body.is-exporting [data-editor-action="cancel-export"]:focus-visible,
body.is-editor-exporting [data-editor-action="cancel-export"]:focus-visible {
  --tc-editor-ui-attention-line: var(--tc-export-danger-border-soft);
  --tc-editor-ui-attention-line-strong: var(--tc-export-danger-border);
  --tc-editor-ui-attention-glow: var(--tc-export-danger-glow);
  color: var(--tc-export-danger-main);
}

body.is-export-paused [data-editor-action="export"],
body.is-export-paused [data-editor-action="cancel-export"],
body.is-export-paused [data-editor-action="export"]:hover,
body.is-export-paused [data-editor-action="export"]:focus-visible,
body.is-export-paused [data-editor-action="cancel-export"]:hover,
body.is-export-paused [data-editor-action="cancel-export"]:focus-visible {
  --tc-editor-ui-attention-line: var(--tc-export-paused-border-soft);
  --tc-editor-ui-attention-line-strong: var(--tc-export-paused-border);
  --tc-editor-ui-attention-glow: var(--tc-export-paused-glow);
  color: var(--tc-export-paused-main);
}

.control-panel[hidden] {
  display: none;
}

.field.is-disabled,
.check-field.is-disabled {
  opacity: 0.48;
}


.control-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--tc-space-4);
}

.control-cluster {
  min-width: 0;
  display: grid;
  gap: var(--tc-space-4);
}

.flow-options-cluster {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transform-size-cluster,
.transform-position-cluster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.variation-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tc-space-4);
  align-items: stretch;
}

.check-field {
  grid-column: 1 / -1;
  align-items: center;
  gap: var(--tc-space-4);
  min-height: var(--tc-control-height-compact);
  align-self: end;
  padding: var(--tc-space-2-5) 0;
}

.check-field input {
  width: 15px;
  height: 15px;
  accent-color: var(--tc-accent-main);
}

.baseline-field[hidden] {
  display: none;
}

.status {
  display: none;
  margin-top: var(--tc-space-4);
  padding: var(--tc-space-4) var(--tc-space-5);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  background: var(--tc-editor-ui-control-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--tc-text-muted);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.status.is-error {
  display: block;
}

@media (max-width: 820px) {
  .editor-dialog {
    --editor-control-row-height: 1.75rem;
    --editor-control-row-gap: 7px;
    --editor-panel-height: calc((var(--editor-control-row-height) * 6) + (var(--editor-control-row-gap) * 5) + 15px);
    --editor-controls-height: var(--editor-panel-height);
  }

  .editor-window {
    grid-template-rows: auto minmax(0, 1fr) var(--editor-controls-height);
  }

  body.is-embed .editor-window {
    grid-template-rows: minmax(0, 1fr) var(--editor-controls-height);
  }

  .editor-controls {
    grid-template-rows: minmax(0, 1fr);
    align-self: end;
    height: var(--editor-controls-height);
    padding: var(--tc-space-3-5) var(--tc-space-4-5) var(--tc-space-4);
  }

  .toolbar-row {
    position: static;
    width: 100%;
    transform: none;
  }

  .adjustment-panel {
    grid-template-columns: 1fr;
    gap: var(--editor-control-row-gap);
    align-content: start;
  }

  .variation-control {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .flow-options-cluster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .transform-size-cluster,
  .transform-position-cluster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .utility-panel {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .control-column,
  .control-cluster,
  .variation-control {
    gap: var(--editor-control-row-gap);
  }

  .field label,
  .check-field {
    font-size: 0.5rem;
  }

  

  .canvas-shell.ratio-portrait {
    width: auto;
    height: 100%;
    aspect-ratio: 9 / 16;
  }

  body.is-embed .canvas-shell.ratio-portrait {
    width: auto;
    height: 100%;
  }

  .canvas-shell.ratio-portrait .preview-stage {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-inline: 0;
  }

}

@media (max-width: 560px) {
  .editor-dialog {
    --editor-tab-offset: 40px;
    --editor-control-row-height: 2.25rem;
    --editor-control-row-gap: 0.5rem;
    --editor-panel-height: calc((var(--editor-control-row-height) * 6) + (var(--editor-control-row-gap) * 5) + 8px);
    --editor-controls-height: var(--editor-panel-height);
    --editor-mobile-radius: var(--tc-radius-sm);
    --editor-mobile-inset: 0.625rem;
    gap: 0;
  }

  .editor-page {
    padding: var(--tc-space-2);
  }

  body.is-embed .editor-page {
    padding: 0;
  }

  .editor-window,
  body.is-embed .editor-window {
    width: 100%;
    justify-self: center;
  }

  .editor-tabs {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: calc((-1 * var(--editor-tab-offset)) + 18px);
    width: calc(100% - (var(--editor-mobile-inset) * 2));
    max-width: none;
    justify-self: center;
    transform: translateX(-50%);
  }

  .editor-window,
  body.is-embed .editor-window,
  .canvas-shell {
    border-radius: var(--editor-mobile-radius);
  }

  .editor-window {
    border-color: var(--tc-state-hover-bg-strong);
  }

  .canvas-shell {
    border-color: var(--tc-border-soft);
  }

  .type-hint {
    bottom: clamp(48px, 8dvh, 76px);
  }

  body:not(.is-empty) .type-hint::before {
    height: var(--tc-icon-size-2xl);
  }

  body:not(.is-empty) .type-hint::after {
    bottom: calc(100% + 23px);
  }

  .editor-preview {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: var(--tc-space-2);
  }

  .editor-controls {
    padding: var(--tc-space-2);
  }

  .editor-access-modal h2 {
    font-size: 1rem;
  }

  .editor-tabs {
    padding: 0;
    margin-top: 0;
  }

  .toolbar-row {
    width: 100%;
    gap: 0;
    justify-self: center;
  }

  .adjustment-panel {
    gap: var(--editor-control-row-gap);
    padding: 0;
  }

  .control-column {
    align-content: start;
  }

  .control-column {
    gap: var(--editor-control-row-gap);
  }

  .variation-control,
  .control-cluster {
    gap: var(--editor-control-row-gap);
  }

  .utility-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tc-space-3-5);
    padding: 0;
  }

  .field {
    position: relative;
  }

  .field label,
  .check-field {
    font-size: 0.5rem;
  }

  .field label {
    position: absolute;
    left: 0.55rem;
    top: 0.32rem;
    z-index: 5;
    max-width: calc(100% - 1.1rem);
    margin: 0;
    color: var(--tc-text-faint);
    line-height: 1;
    overflow: hidden;
    pointer-events: none;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
  }

  

  

  

  

  .editor-controls .field {
    min-height: var(--editor-control-row-height);
  }

  

  .editor-controls .control-cluster,
.editor-controls .variation-control {
    gap: var(--editor-control-row-gap);
  }

  .flow-options-cluster,
  .transform-size-cluster,
  .transform-position-cluster {
    grid-auto-rows: var(--editor-control-row-height);
  }

  

  

}

.status {
  border-color: var(--tc-control-border);
  background: var(--tc-control-bg);
  color: var(--tc-control-text);
  box-shadow: none;
}

.field.is-disabled,
.check-field.is-disabled {
  color: var(--tc-text-disabled);
  opacity: var(--tc-state-disabled-opacity);
}

.status.is-error {
  border-color: var(--tc-danger-main);
  color: var(--tc-danger-main);
}

@media (max-width: 560px) {
  .editor-window,
  body.is-embed .editor-window,
  .canvas-shell {
    border-color: var(--tc-border-soft);
  }
}
}

/* source: shared/styles/features/editor/editor-responsive.css */
@layer mobile {
.glyph-image-item {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  max-width: none;
  overflow: visible;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: var(--tc-color-transparent);
  pointer-events: auto;
  user-select: none;
}

.glyph-atlas-crop {
  position: absolute;
  display: block;
  max-width: none;
  background-repeat: no-repeat;
  background-color: var(--tc-color-transparent);
  pointer-events: none;
  user-select: none;
}

body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .animation-panel {
  min-height: 0;
  height: 100%;
  overflow: visible;
  padding: var(--tc-space-1) 0;
  align-content: start;
}

body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .animation-grid {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tc-space-6);
  align-items: start;
  align-content: start;
}

@media (max-width: 820px) {
  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .animation-grid {
    grid-template-columns: 1fr;
    gap: var(--tc-space-3-5);
  }

}

@media (max-width: 560px) {
  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .animation-panel {
    padding: 0;
  }

  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .animation-grid {
    gap: var(--editor-control-row-gap);
  }


  body:not([data-editor-compact-controls="on"]) .editor-dialog {
    --editor-control-row-height: 2.25rem;
    --editor-control-row-gap: 0.5rem;
    --editor-panel-height: calc((var(--editor-control-row-height) * 6) + (var(--editor-control-row-gap) * 5) + 8px);
    --editor-controls-height: var(--editor-panel-height);
  }

  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) {
    height: var(--editor-controls-height);
  }

  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .panel-stack,
  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .control-panel {
    height: 100%;
    min-height: 0;
  }

  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .adjustment-panel,
  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .animation-grid {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, var(--editor-control-row-height));
    gap: var(--editor-control-row-gap);
    align-content: start;
  }

  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .adjustment-panel > .control-column {
    display: contents;
  }

  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .flow-options-cluster,
  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .variation-field,
  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .transform-size-cluster,
  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .transform-position-cluster {
    height: var(--editor-control-row-height);
    min-height: var(--editor-control-row-height);
    gap: var(--editor-control-row-gap);
  }

  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .flow-options-cluster,
  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .transform-size-cluster,
  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .transform-position-cluster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .variation-control {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }


  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .field label {
    display: block;
  }

  

  

  

  
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .editor-window,
  .editor-preview,
  .canvas-shell,
  .toolbar-row,
  .editor-controls:not(.compact-controls) .control-panel,
  .export-progress,
  .editor-access-modal__panel,
  .editor-full-access-modal__panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .editor-controls:not(.compact-controls) .control-panel {
    background: var(--tc-editor-ui-glass);
  }

  .canvas-shell {
    background-color: var(--tc-bg-canvas);
    background-image: var(--tc-bg-grid-image-soft);
    background-size: var(--tc-bg-grid-size);
  }
}

/* Export tab: show the exact Dynamic crop window without mutating the live layout. */
.export-preview-crop-frame {
  position: absolute;
  z-index: 24;
  box-sizing: border-box;
  pointer-events: none;
  /* Crop pointer updates are rendered synchronously; easing this box makes a
     drag visibly trail the finger/mouse and can make the export dimensions
     feel inaccurate. */
  transition: none;
  will-change: left, top, width, height;
}

/* Render the dynamic crop as the app's stylized bounding box: the blue frame
   with corner-square handles, matching the landing-page editor frame. */
.export-preview-crop-frame .editor-frame-overlay--export-crop {
  inset: 0;
  z-index: 1;
  visibility: visible;
  filter: none;
}

/* Darken everything outside the crop box (clipped to the canvas-shell), aligned
   to the visible stylized frame so only the export region stays lit. */
.export-preview-crop-frame .editor-frame-box {
  box-shadow: 0 0 0 9999px var(--tc-bg-overlay-strong);
}

/* Dynamic crop uses the original corner-square appearance without overriding
   any frame token. Midpoint handles imply an unsafe one-axis crop, so only
   corners are shown and are the shared gesture targets. */
.export-preview-crop-frame[data-export-crop-resizable="true"] .editor-frame-handle--top,
.export-preview-crop-frame[data-export-crop-resizable="true"] .editor-frame-handle--right,
.export-preview-crop-frame[data-export-crop-resizable="true"] .editor-frame-handle--bottom,
.export-preview-crop-frame[data-export-crop-resizable="true"] .editor-frame-handle--left {
  display: none;
}

.export-preview-crop-frame[data-export-crop-resizable="true"] [data-export-crop-corner] {
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* Keep the established 6px visual squares, while giving a finger a reliable
   target. The pseudo-element is intentionally transparent and only expands
   the hit region on touch-capable hardware; desktop geometry/cursors retain
   their original behavior. */
@media (any-pointer: coarse) {
  .export-preview-crop-frame[data-export-crop-resizable="true"] [data-export-crop-corner]::before {
    content: "";
    position: absolute;
    inset: -21px;
    pointer-events: auto;
  }
}

.export-preview-crop-frame[data-export-crop-resizable="true"] [data-export-crop-corner="top-left"],
.export-preview-crop-frame[data-export-crop-resizable="true"] [data-export-crop-corner="bottom-right"] {
  cursor: nwse-resize;
}

.export-preview-crop-frame[data-export-crop-resizable="true"] [data-export-crop-corner="top-right"],
.export-preview-crop-frame[data-export-crop-resizable="true"] [data-export-crop-corner="bottom-left"] {
  cursor: nesw-resize;
}

.export-preview-crop-frame[hidden] {
  display: none;
}

body.is-export-dynamic-preview .preview-stage {
  /* Preserve the active dark/bright transparency checker inside the crop. */
  background-color: var(--tc-preview-checker-base);
}

/* Mobile editor preview always consumes the available preview container.
   The body class is JS-gated to real compact touch mode; the width query only
   scopes these rules to compact viewports. */
@media (max-width: 900px) {
  body.is-mobile-editor-mode .canvas-shell,
  body.is-mobile-editor-mode .canvas-shell.ratio-landscape,
  body.is-mobile-editor-mode .canvas-shell.ratio-portrait {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
  }

  body.is-mobile-editor-mode .preview-stage,
  body.is-mobile-editor-mode .canvas-shell.ratio-landscape .preview-stage,
  body.is-mobile-editor-mode .canvas-shell.ratio-portrait .preview-stage {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    border-inline: 0;
  }
}
}

/* source: shared/styles/features/full-access/full-access-shell.css */
@layer features {
/* Full-access pricing and testimonial section styling. */
.pricing-section {
  --burst-progress: 0;
  --pricing-parallax-x: 0px;
  --pricing-parallax-y: 0px;
  position: relative;
  z-index: 5;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 0;
  padding: clamp(22px, 3.6vh, 44px) var(--tc-page-pad) clamp(220px, 25vh, 360px);
  border-top: 0;
  background: var(--tc-color-transparent);
  color: var(--tc-text-main);
  overflow: visible;
  isolation: isolate;
}

.pricing-section::before {
  content: none;
  display: none;
  pointer-events: none;
}

.pricing-shell {
  position: relative;
  z-index: 3;
  width: min(1080px, 100%);
  margin: 0 auto;
  justify-self: center;
}

.pricing-heading {
  display: grid;
  justify-items: center;
  gap: var(--tc-space-5);
  margin-bottom: var(--tc-space-12);
  text-align: center;
}

.pricing-heading h2 {
  margin: 0;
  color: var(--tc-text-strong);
  font-size: clamp(1.6rem, 3.2vw, 2.65rem);
  font-weight: 680;
  line-height: 1;
  letter-spacing: 0;
}

.pricing-heading p {
  max-width: 440px;
  margin: 0;
  color: var(--tc-text-subtle);
  font-size: 0.8125rem;
  font-weight: 430;
  line-height: 1.5;
}

.pricing-content {
  width: 100%;
  min-width: 0;
  display: grid;
  justify-items: stretch;
}

.plan-label {
  margin: 0 0 var(--tc-space-4);
  color: var(--tc-text-faint);
  font-size: 0.6875rem;
  font-weight: 740;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pricing-button {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tc-button-border);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-button-bg);
  color: var(--tc-button-text);
  font-size: 0.8125rem;
  font-weight: 610;
  line-height: 1;
  text-decoration: none;
  transition:
    border-color 220ms var(--tc-ease-standard),
    background-color 220ms var(--tc-ease-standard),
    color 220ms var(--tc-ease-standard);
}

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

.pricing-options {
  width: 100%;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--tc-space-7);
}

.pricing-option-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: 13px;
  align-content: start;
  min-height: clamp(400px, 37vw, 450px);
  padding: clamp(var(--tc-space-9), 2.2vw, 23px);
  border: 1px solid var(--tc-card-border);
  border-radius: var(--tc-radius-md);
  background: var(--tc-card-bg);
  -webkit-backdrop-filter: var(--tc-card-filter);
  backdrop-filter: var(--tc-card-filter);
  overflow: visible;
  isolation: isolate;
  transition: none;
}

.pricing-option-card > :not(.editor-frame-overlay) {
  position: relative;
  z-index: 1;
}

.pricing-option-card > .editor-frame-overlay {
  --editor-frame-offset: 0px;
  --editor-frame-handle-inset: 0px;
  --editor-frame-radius: 0px;
  inset: -3px;
  visibility: hidden;
  filter: var(--tc-filter-brightness-074);
  transition: none;
}

.pricing-one-time-export > .editor-frame-overlay {
  display: none;
  visibility: hidden;
}

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

.pricing-option-card:hover > .editor-frame-overlay,
.pricing-option-card:focus-within > .editor-frame-overlay {
  --editor-frame: var(--tc-text-placeholder);
  --editor-frame-border: var(--tc-editor-scrub-fill);
  --editor-frame-handle: var(--tc-text-subtle);
  --editor-frame-handle-fill: var(--tc-surface-fill-soft);
  visibility: visible;
  filter: var(--tc-filter-brightness-100);
}

.pricing-option-card.is-selected > .editor-frame-overlay {
  --editor-frame: var(--tc-editor-frame-active);
  --editor-frame-border: var(--tc-editor-frame-border-strong);
  --editor-frame-handle: var(--tc-editor-frame-active);
  --editor-frame-handle-fill: var(--tc-editor-handle-fill);
  visibility: visible;
  filter: var(--tc-filter-brightness-100);
}

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

.pricing-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-5);
  min-width: 0;
}

.pricing-badge {
  flex: 0 0 auto;
  min-height: var(--tc-layout-pricing-badge-height);
  display: inline-grid;
  place-items: center;
  padding: 0 var(--tc-layout-pricing-badge-padding-x);
  border: 1px solid var(--tc-button-border);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-button-bg);
  color: var(--tc-text-muted);
  font-size: var(--tc-type-pricing-badge-size);
  font-weight: var(--tc-type-weight-pill);
  line-height: var(--tc-type-line-pill);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.pricing-option-card h3,
.pricing-option-card ul,
.pricing-option-card p {
  margin: 0;
}

.pricing-option-card h3 {
  color: var(--tc-text-strong);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.22;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-3-5);
  min-width: 0;
}

.pricing-price__old {
  color: var(--tc-text-faint);
  font-size: 0.8125rem;
  font-weight: 720;
  line-height: 1;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--tc-border-strong);
}

.pricing-price strong {
  color: var(--tc-text-strong);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 720;
  line-height: 1;
}

.pricing-value-note {
  align-self: end;
  max-width: 24rem;
  color: var(--tc-text-faint);
  font-size: 0.6875rem;
  font-weight: 480;
  line-height: 1.35;
}

.pricing-option-card ul {
  display: grid;
  align-content: start;
  align-self: start;
  gap: var(--tc-space-4-5);
  margin-top: clamp(26px, 3vw, 42px);
  padding: 0;
  list-style: none;
  color: var(--tc-text-muted);
  font-size: 0.8125rem;
  line-height: 1.36;
}

.pricing-option-card li::before {
  content: "";
  display: inline-block;
  width: var(--tc-icon-size-xs);
  height: var(--tc-icon-size-xs);
  margin-right: var(--tc-space-4);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-text-faint);
  vertical-align: 0.12em;
}

.pricing-option-card .pricing-button {
  align-self: end;
}

.pricing-one-time-export {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 6px);
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-9);
  margin-top: var(--tc-space-8);
  margin-inline: auto;
  min-height: 96px;
  padding: var(--tc-space-9) var(--tc-space-10);
  border: 1px solid var(--tc-card-border);
  border-radius: var(--tc-radius-md);
  background: var(--tc-card-bg);
  -webkit-backdrop-filter: var(--tc-card-filter);
  backdrop-filter: var(--tc-card-filter);
  overflow: visible;
  isolation: isolate;
  transition: none;
}

.pricing-one-time-export > :not(.editor-frame-overlay) {
  position: relative;
  z-index: 1;
}

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

.pricing-one-time-export p,
.pricing-one-time-export span {
  margin: 0;
}

.pricing-one-time-export .pricing-one-time-export__banner {
  width: fit-content;
  min-height: var(--tc-layout-pricing-badge-height);
  display: inline-grid;
  place-items: center;
  margin: 0 0 var(--tc-space-4);
  padding: 0 var(--tc-layout-pricing-badge-padding-x);
  border: 1px solid var(--tc-button-border);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-button-bg);
  color: var(--tc-text-muted);
  font-size: var(--tc-type-pricing-badge-size);
  font-weight: var(--tc-type-weight-pill);
  line-height: var(--tc-type-line-pill);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.pricing-one-time-export p {
  color: var(--tc-text-readable);
  font-size: 0.8125rem;
  font-weight: 680;
  line-height: 1.25;
}

.pricing-one-time-export span {
  display: block;
  margin-top: var(--tc-space-2);
  color: var(--tc-text-subtle);
  font-size: 0.75rem;
  line-height: 1.35;
}

.pricing-one-time-export__action {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: var(--tc-space-4);
}

.pricing-one-time-export a {
  flex: 0 0 auto;
  min-height: var(--tc-control-height-field);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--tc-space-6);
  border: 1px solid var(--tc-button-border);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-button-bg);
  color: var(--tc-button-text);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition:
    border-color 220ms var(--tc-ease-standard),
    background-color 220ms var(--tc-ease-standard),
    color 220ms var(--tc-ease-standard);
}

.pricing-one-time-export a:hover,
.pricing-one-time-export a:focus-visible {
  border-color: var(--tc-button-border-strong);
  background: var(--tc-button-bg-hover);
  color: var(--tc-button-text-hover);
  outline: 0;
}

.pricing-payment-strip {
  width: 100%;
  justify-self: center;
  margin-top: var(--tc-space-7);
}

.pricing-testimonials {
  width: 100%;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tc-space-6);
  margin-top: clamp(var(--tc-space-14), 4vw, 44px);
  padding-inline: 10px;
}

.pricing-testimonial {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--tc-card-border);
  border-radius: var(--tc-radius-md);
  background: var(--tc-card-bg);
  -webkit-backdrop-filter: var(--tc-card-filter);
  backdrop-filter: var(--tc-card-filter);
  transition:
    opacity 420ms var(--tc-ease-standard),
    transform 420ms var(--tc-ease-standard),
    border-color 220ms var(--tc-ease-standard),
    background-color 220ms var(--tc-ease-standard);
}

.pricing-testimonial:nth-child(1) {
  transform: translateY(8px);
}

.pricing-testimonial:nth-child(2) {
  transform: translateY(22px);
}

.pricing-testimonial:nth-child(3) {
  transform: translateY(12px);
}

.pricing-testimonial__stars {
  margin-bottom: var(--tc-space-4-5);
  color: var(--tc-accent-main);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
}

.pricing-testimonial p {
  margin: 0;
  color: var(--tc-text-muted);
  font-size: 0.75rem;
  font-weight: 430;
  line-height: 1.5;
}

.pricing-testimonial footer {
  display: grid;
  gap: var(--tc-space-1-5);
  margin-top: var(--tc-space-7);
}

.pricing-testimonial strong {
  color: var(--tc-text-high);
  font-size: 0.75rem;
  font-weight: 680;
  line-height: 1;
}

.pricing-testimonial span {
  color: var(--tc-text-faint);
  font-size: 0.6875rem;
  font-weight: 440;
  line-height: 1.2;
}

.pricing-burst {
  display: none;
}

.pricing-burst__glyph {
  display: none;
}


.pricing-section.is-runtime-active .pricing-burst__glyph {
  will-change: auto;
}

.pricing-burst__glyph--b {
  --burst-x: -720px;
  --burst-y: -210px;
  --burst-size: 132px;
  --burst-rotate: -12deg;
  --burst-scale: 0.72;
  --burst-opacity: 0.32;
  --burst-blur: 1px;
  --burst-depth: 0.7;
}
}

/* source: shared/styles/features/full-access/full-access-cards.css */
@layer features {
.pricing-burst__glyph--m {
  --burst-x: -460px;
  --burst-y: -20px;
  --burst-size: 112px;
  --burst-rotate: 8deg;
  --burst-scale: 0.62;
  --burst-opacity: 0.24;
  --burst-blur: 1.5px;
  --burst-depth: -0.45;
}

.pricing-burst__glyph--s {
  --burst-x: 760px;
  --burst-y: -225px;
  --burst-size: 148px;
  --burst-rotate: 10deg;
  --burst-scale: 0.64;
  --burst-opacity: 0.32;
  --burst-blur: 1px;
  --burst-depth: 0.82;
}

.pricing-burst__glyph--dollar {
  --burst-x: -760px;
  --burst-y: 285px;
  --burst-size: 152px;
  --burst-rotate: -6deg;
  --burst-scale: 0.64;
  --burst-opacity: 0.3;
  --burst-depth: 0.36;
}

.pricing-burst__glyph--p {
  --burst-x: 780px;
  --burst-y: 295px;
  --burst-size: 150px;
  --burst-rotate: 8deg;
  --burst-scale: 0.66;
  --burst-opacity: 0.31;
  --burst-depth: -0.62;
}

.pricing-burst__glyph--x {
  --burst-x: 470px;
  --burst-y: 75px;
  --burst-size: 110px;
  --burst-rotate: -9deg;
  --burst-scale: 0.62;
  --burst-opacity: 0.24;
  --burst-blur: 1px;
  --burst-depth: 0.46;
}

@media (hover: none) and (pointer: coarse) {
  .pricing-burst__glyph {
    filter: var(--tc-filter-pricing-burst);
    will-change: auto;
  }
}

@media (max-width: 1180px) {
  .pricing-section {
    padding-top: clamp(var(--tc-space-12), 3.5dvh, var(--tc-space-20));
    padding-bottom: clamp(150px, 20dvh, 260px);
  }

  .pricing-section .pricing-shell {
    width: min(720px, 100%);
    padding-inline: 10px;
  }

  .pricing-section .pricing-options {
    grid-template-columns: 1fr;
    gap: clamp(var(--tc-space-6), 2dvh, var(--tc-space-9));
  }

  .pricing-section .pricing-option-card--featured {
    grid-column: auto;
  }

  .pricing-section .pricing-option-card {
    min-height: clamp(330px, 42dvh, 430px);
    padding: clamp(var(--tc-space-9), 3vw, var(--tc-space-14));
  }

  .pricing-section .pricing-option-card ul {
    margin-top: clamp(var(--tc-space-9), 4dvh, 36px);
  }

  .pricing-section .pricing-one-time-export {
    margin-top: clamp(var(--tc-space-6), 2dvh, var(--tc-space-8));
  }

  .pricing-section .pricing-option-card > .editor-frame-overlay {
    inset: -3px;
  }
}

.editor-full-access-modal {
  position: fixed;
  inset: 0;
  width: min(1168px, calc(100vw - 28px));
  max-width: none;
  height: fit-content;
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--tc-radius-md);
  background: var(--tc-editor-ui-glass-muted);
  color: var(--tc-text-main);
  overflow: hidden;
}

.editor-full-access-modal__panel {
  position: relative;
  width: 100%;
  display: block;
  min-height: 0;
  max-height: inherit;
  overflow: hidden;
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--tc-modal-shadow);
}

.editor-full-access-modal__back {
  position: absolute;
  right: 28px;
  top: 22px;
  z-index: 20;
  grid-column: auto;
  grid-row: auto;
  width: 152px;
  max-width: calc(100% - 56px);
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-3);
  padding: 0 var(--tc-space-6);
  border: 1px solid var(--tc-border-strong);
  border-radius: var(--tc-radius-sm);
  font-size: 0.75rem;
  font-weight: 650;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}

.editor-full-access-modal__back span {
  min-width: 0;
  display: inline-block;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.editor-full-access-modal__back svg {
  flex: 0 0 auto;
  width: var(--tc-icon-size-lg);
  height: var(--tc-icon-size-lg);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pricing-modal-surface {
  --burst-progress: 1;
  --pricing-parallax-x: 0px;
  --pricing-parallax-y: 0px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  min-height: auto;
  max-height: calc(100dvh - 28px);
  padding: clamp(42px, 6vh, 68px) clamp(var(--tc-space-9), 4vw, 44px) clamp(26px, 4vh, var(--tc-space-20));
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--tc-editor-ui-glass-muted);
}

.pricing-modal-surface .pricing-option-card,
.pricing-modal-surface .pricing-one-time-export,
.pricing-modal-surface .pricing-testimonial {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pricing-modal-surface .pricing-option-card:hover,
.pricing-modal-surface .pricing-option-card:focus-within,
.pricing-modal-surface .pricing-one-time-export:hover,
.pricing-modal-surface .pricing-one-time-export:focus-within {
  background: var(--tc-card-bg-hover);
}

@-moz-document url-prefix() {
  .pricing-modal-surface {
    scrollbar-width: thin;
  }
}

.pricing-modal-surface::-webkit-scrollbar {
  width: var(--tc-scrollbar-size, 7px);
  height: var(--tc-scrollbar-size, 7px);
}

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

.pricing-modal-surface::-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);
  background: var(--tc-scrollbar-thumb);
  background-clip: content-box;
}

.pricing-modal-surface::-webkit-scrollbar-thumb:hover {
  background: var(--tc-scrollbar-thumb-hover);
  background-clip: content-box;
}

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

.pricing-modal-surface .pricing-burst {
  top: 50%;
  width: min(1180px, calc(100vw - 42px));
  height: min(520px, 54vw);
  overflow: visible;
}

.pricing-modal-surface .pricing-shell {
  width: min(1080px, 100%);
  margin-inline: auto;
  justify-self: center;
}

.pricing-modal-surface .pricing-heading {
  margin-bottom: var(--tc-space-10);
  padding-inline: 0;
}

.pricing-modal-surface .pricing-option-card {
  padding: clamp(var(--tc-space-12), 2.8vw, var(--tc-space-16));
}

.pricing-modal-surface .pricing-one-time-export {
  min-height: 96px;
  padding: var(--tc-space-12) 26px;
}

.pricing-modal-surface--purchase-only .pricing-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-modal-surface--purchase-only .pricing-option-card--featured {
  grid-column: auto;
}

.pricing-modal-surface--purchase-only .pricing-option-card--free,
.pricing-modal-surface--purchase-only .pricing-payment-strip,
.pricing-modal-surface--purchase-only .pricing-testimonials {
  display: none;
}

.pricing-modal-surface .pricing-option-card > .editor-frame-overlay {
  inset: -3px;
}

@media (min-width: 981px) {
  .pricing-modal-surface--purchase-only {
    height: min(760px, calc(100dvh - 28px));
    max-height: calc(100dvh - 28px);
    padding: clamp(42px, 6dvh, 62px) clamp(var(--tc-space-9), 4vw, 44px) clamp(var(--tc-space-10), 3dvh, 34px);
    overflow: hidden;
  }

  .pricing-modal-surface--purchase-only .pricing-shell {
    width: min(1080px, 100%);
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    transform: none;
    transition: none;
  }

  .pricing-modal-surface--purchase-only .pricing-heading {
    margin-bottom: clamp(var(--tc-space-7), 2dvh, var(--tc-space-10));
  }

  .pricing-modal-surface--purchase-only .pricing-content {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    gap: clamp(var(--tc-space-6), 1.9dvh, var(--tc-space-9));
    padding: var(--tc-space-4);
    overflow: hidden;
  }

  .pricing-modal-surface--purchase-only .pricing-options {
    height: 100%;
    min-height: 0;
    align-items: stretch;
    gap: clamp(var(--tc-space-6), 1.5vw, var(--tc-space-8));
    padding: var(--tc-space-4);
  }

  .pricing-modal-surface--purchase-only .pricing-option-card {
    min-height: 0;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    gap: clamp(var(--tc-space-4), 1.15dvh, 13px);
    align-content: stretch;
    padding: clamp(var(--tc-space-10), 2.4dvh, 30px) clamp(22px, 2vw, var(--tc-space-16));
  }

  .pricing-modal-surface--purchase-only .pricing-option-card ul {
    align-self: center;
    gap: clamp(var(--tc-space-3), 1dvh, var(--tc-space-4-5));
    margin-top: 0;
  }

  .pricing-modal-surface--purchase-only .pricing-value-note {
    align-self: end;
  }

  .pricing-modal-surface--purchase-only .pricing-option-card .pricing-button {
    align-self: end;
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export {
    width: calc(100% - 16px);
    min-height: clamp(76px, 10dvh, 96px);
    justify-self: center;
    margin-top: 0;
    padding: clamp(var(--tc-space-7), 2dvh, 22px) clamp(var(--tc-space-10), 2vw, 26px);
  }
}

@media (min-width: 981px) and (max-height: 760px) {
  .editor-full-access-modal__back {
    top: 18px;
    right: 24px;
    height: var(--tc-field-height-lg);
    min-height: var(--tc-control-height-md);
    font-size: 0.6875rem;
  }

  .pricing-modal-surface--purchase-only {
    height: calc(100dvh - 28px);
    padding-top: var(--tc-space-20);
    padding-bottom: var(--tc-space-9);
  }

  .pricing-modal-surface--purchase-only .pricing-heading {
    gap: var(--tc-space-4);
    margin-bottom: var(--tc-space-6);
  }

  .pricing-modal-surface--purchase-only .pricing-heading h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  }

  .pricing-modal-surface--purchase-only .pricing-heading p {
    font-size: 0.75rem;
    line-height: 1.32;
  }

  .pricing-modal-surface--purchase-only .pricing-content {
    gap: var(--tc-space-5);
    padding: var(--tc-space-3);
  }

  .pricing-modal-surface--purchase-only .pricing-options {
    gap: var(--tc-space-5);
    padding: var(--tc-space-3);
  }

  .pricing-modal-surface--purchase-only .pricing-option-card {
    gap: var(--tc-space-3-5);
    padding: var(--tc-space-10) var(--tc-space-12);
  }

  .pricing-modal-surface--purchase-only .plan-label {
    font-size: 0.625rem;
  }

  .pricing-modal-surface--purchase-only .pricing-badge {
    min-height: var(--tc-layout-pricing-badge-height-compact);
    font-size: var(--tc-type-pricing-badge-size-compact);
  }

  .pricing-modal-surface--purchase-only .pricing-option-card h3 {
    font-size: 0.9375rem;
  }

  .pricing-modal-surface--purchase-only .pricing-price strong {
    font-size: clamp(1.55rem, 3vw, 2rem);
  }

  .pricing-modal-surface--purchase-only .pricing-option-card ul {
    gap: var(--tc-space-3);
    font-size: 0.75rem;
    line-height: 1.26;
  }

  .pricing-modal-surface--purchase-only .pricing-value-note {
    font-size: 0.625rem;
    line-height: 1.24;
  }

  .pricing-modal-surface--purchase-only .pricing-option-card .pricing-button {
    min-height: var(--tc-control-height-md);
    font-size: 0.75rem;
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export {
    width: calc(100% - 12px);
    min-height: 76px;
    padding: var(--tc-space-7) var(--tc-space-10);
  }
}

@media (max-width: 980px) {
  .pricing-section {
    min-height: auto;
    align-items: flex-start;
    padding-top: var(--tc-space-14);
    padding-bottom: 180px;
    overflow: visible;
  }

  .pricing-shell {
    width: min(700px, 100%);
  }

  .pricing-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-option-card--featured {
    grid-column: 1 / -1;
  }

  .pricing-option-card {
    min-height: 380px;
  }

  .pricing-burst {
    top: 50%;
    width: min(860px, calc(100vw - 18px));
  }

  .pricing-modal-surface {
    min-height: min(660px, calc(100dvh - 28px));
    padding: 48px var(--tc-space-9) 30px;
  }

  .pricing-modal-surface .pricing-heading {
    padding-inline: 0;
  }

  .editor-full-access-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: var(--tc-radius-none);
  }

  .editor-full-access-modal__panel {
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: var(--tc-radius-none);
  }

  .editor-full-access-modal__back {
    left: auto;
    right: clamp(14px, 3.4vw, 28px);
    top: clamp(12px, 2.4dvh, 22px);
    width: auto;
    max-width: calc(100% - 24px);
    min-width: clamp(136px, 26vw, 152px);
    height: clamp(38px, 5dvh, 42px);
    min-height: clamp(38px, 5dvh, 42px);
    justify-content: center;
  }
}

.editor-full-access-modal,
.pricing-modal-surface {
  background: var(--tc-bg-app);
}

.editor-full-access-modal__panel {
  border-color: var(--tc-popup-border);
  background: var(--tc-popup-bg);
}

.editor-full-access-modal__back {
  border-color: var(--tc-control-border);
  background: var(--tc-surface-control);
  color: var(--tc-control-text);
  box-shadow: none;
}

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

.pricing-modal-surface .pricing-option-card,
.pricing-modal-surface .pricing-one-time-export,
.pricing-modal-surface .pricing-testimonial {
  border-color: var(--tc-color-transparent);
  background: var(--tc-card-bg);
}

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

@-moz-document url-prefix() {
  .pricing-modal-surface {
    scrollbar-color: var(--tc-scrollbar-thumb) var(--tc-color-transparent);
  }
}

.pricing-button,
.pricing-one-time-export a {
  border-color: var(--tc-color-transparent);
  background: var(--tc-surface-control);
  color: var(--tc-text-readable);
  font-weight: 720;
  box-shadow: none;
}

.pricing-button:hover,
.pricing-button:focus-visible,
.pricing-one-time-export a:hover,
.pricing-one-time-export a: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);
}

.pricing-option-card--featured {
  background: var(--tc-card-box-bg-hover);
}

.pricing-option-card--featured::before {
  content: none;
  display: none;
  pointer-events: none;
}

.pricing-option-card--featured:hover,
.pricing-option-card--featured:focus-within {
  background: var(--tc-card-box-bg-hover);
}

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

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

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

/* source: shared/styles/features/full-access/full-access-modal-responsive.css */
@layer mobile {
@media (max-width: 980px) {
  .pricing-modal-surface--purchase-only {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    padding: 0 clamp(var(--tc-space-8), 5vw, 44px);
    overflow: hidden;
  }

  .pricing-modal-surface--purchase-only .pricing-shell {
    width: min(680px, 100%);
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    transform: none;
    transition: none;
  }

  .pricing-modal-surface--purchase-only .pricing-heading {
    position: relative;
    z-index: 12;
    min-height: auto;
    align-content: end;
    margin: 0;
    padding: clamp(34px, 4dvh, 42px) 0 clamp(var(--tc-space-6), 2dvh, var(--tc-space-8));
    border-bottom: 0;
    background: var(--tc-color-transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-align: left;
    justify-items: start;
  }

  .pricing-modal-surface--purchase-only .pricing-heading h2 {
    font-size: clamp(1.35rem, 4.6vw, 1.7rem);
    line-height: 1.04;
  }

  .pricing-modal-surface--purchase-only .pricing-heading p {
    max-width: min(30rem, 100%);
    font-size: clamp(0.6875rem, 2vw, 0.75rem);
    line-height: 1.25;
  }

  .pricing-modal-surface--purchase-only .pricing-burst {
    display: none;
  }

  .pricing-modal-surface--purchase-only .pricing-content {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    gap: clamp(var(--tc-space-3), 1.15dvh, var(--tc-space-5));
    padding: clamp(var(--tc-space-6), 2dvh, var(--tc-space-9)) var(--tc-space-3) clamp(var(--tc-space-7), 2.3dvh, 22px);
    overflow: hidden;
  }

  .pricing-modal-surface--purchase-only .pricing-options {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(var(--tc-space-5), 1.7dvh, var(--tc-space-8));
    padding: clamp(var(--tc-space-2-5), 1vw, var(--tc-space-4));
  }

  .pricing-modal-surface--purchase-only .pricing-option-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: none;
    gap: clamp(var(--tc-space-2-5), 0.95dvh, var(--tc-space-4-5));
    align-content: stretch;
    min-height: 0;
    padding: clamp(13px, 2.1dvh, var(--tc-space-10));
  }

  .pricing-modal-surface--purchase-only .pricing-card-topline {
    grid-area: auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tc-space-4);
  }

  .pricing-modal-surface--purchase-only .plan-label {
    margin-bottom: 0;
    font-size: clamp(0.5625rem, 1.8vw, 0.6875rem);
    line-height: 1.1;
  }

  .pricing-modal-surface--purchase-only .pricing-badge {
    min-height: clamp(var(--tc-layout-pricing-badge-height-short), 2.6dvh, var(--tc-layout-pricing-badge-height-compact));
    padding: 0 clamp(var(--tc-layout-pricing-badge-padding-x-short), 1.5vw, var(--tc-layout-pricing-badge-padding-x));
    font-size: var(--tc-type-pricing-badge-size);
  }

  .pricing-modal-surface--purchase-only .pricing-option-card h3 {
    grid-area: auto;
    max-width: none;
    font-size: clamp(0.9375rem, 2.85vw, 1.125rem);
    line-height: 1.18;
  }

  .pricing-modal-surface--purchase-only .pricing-price {
    grid-area: auto;
    justify-self: start;
    align-self: auto;
    gap: var(--tc-space-3);
  }

  .pricing-modal-surface--purchase-only .pricing-price__old {
    font-size: clamp(0.65625rem, 2vw, 0.8125rem);
  }

  .pricing-modal-surface--purchase-only .pricing-price strong {
    font-size: clamp(1.42rem, 5.45vw, 2rem);
  }

  .pricing-modal-surface--purchase-only .pricing-option-card ul {
    grid-area: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--tc-space-2-5), 0.9dvh, var(--tc-space-4));
    align-self: center;
    margin-top: 0;
    padding: 0;
    font-size: clamp(0.6875rem, 2.1vw, 0.84375rem);
    line-height: 1.25;
  }

  .pricing-modal-surface--purchase-only .pricing-option-card li::before {
    width: clamp(4px, 1.1vw, 5px);
    height: clamp(4px, 1.1vw, 5px);
    margin-right: var(--tc-space-3);
  }

  .pricing-modal-surface--purchase-only .pricing-value-note,
  .pricing-modal-surface--purchase-only .pricing-option-card .pricing-button {
    align-self: end;
  }

  .pricing-modal-surface--purchase-only .pricing-value-note {
    display: block;
    max-width: none;
    color: var(--tc-text-faint);
    font-size: clamp(0.59375rem, 1.78vw, 0.71875rem);
    line-height: 1.24;
  }

  .pricing-modal-surface--purchase-only .pricing-option-card .pricing-button {
    grid-area: auto;
    min-height: clamp(31px, 4.9dvh, 42px);
    margin-top: clamp(var(--tc-space-2), 0.8dvh, var(--tc-space-3));
    font-size: clamp(0.71875rem, 2.05vw, 0.84375rem);
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export {
    width: calc(100% - clamp(10px, 2vw, 16px));
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-self: center;
    gap: clamp(var(--tc-space-3-5), 1.6vw, var(--tc-space-6));
    margin: 0;
    padding: clamp(var(--tc-space-4), 1.8dvh, 13px) clamp(var(--tc-space-5), 2.4vw, var(--tc-space-7));
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export .pricing-one-time-export__banner {
    min-height: clamp(var(--tc-layout-pricing-badge-height-short), 2.3dvh, var(--tc-layout-pricing-badge-height-compact));
    margin-bottom: clamp(var(--tc-space-1-5), 0.8dvh, var(--tc-space-2-5));
    padding: 0 var(--tc-layout-pricing-badge-padding-x-short);
    font-size: var(--tc-type-pricing-badge-size-short);
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export p {
    font-size: clamp(0.75rem, 2.2vw, 0.90625rem);
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export span {
    margin-top: var(--tc-space-1-5);
    font-size: clamp(0.625rem, 1.9vw, 0.75rem);
    line-height: 1.2;
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export__action {
    width: auto;
    justify-items: end;
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export a {
    width: auto;
    min-height: clamp(31px, 4.7dvh, 36px);
    padding: 0 clamp(var(--tc-space-4), 2vw, var(--tc-space-6));
    font-size: clamp(0.6875rem, 2vw, 0.8125rem);
    white-space: nowrap;
  }
}

@media (max-width: 980px) and (max-height: 880px) {
  .pricing-modal-surface--purchase-only .pricing-heading {
    padding: clamp(30px, 3.8dvh, 38px) 0 clamp(var(--tc-space-4), 1.4dvh, var(--tc-space-6));
  }

  .pricing-modal-surface--purchase-only .pricing-heading h2 {
    font-size: clamp(1.22rem, 4.25vw, 1.55rem);
  }

  .pricing-modal-surface--purchase-only .pricing-heading p {
    font-size: clamp(0.625rem, 1.9vw, 0.71875rem);
    line-height: 1.2;
  }

  .pricing-modal-surface--purchase-only .pricing-content {
    gap: clamp(var(--tc-space-2), 0.65dvh, var(--tc-space-3));
    padding: clamp(var(--tc-space-4), 1.4dvh, var(--tc-space-6)) var(--tc-space-2) clamp(var(--tc-space-5), 1.8dvh, var(--tc-space-7));
  }

  .pricing-modal-surface--purchase-only .pricing-options {
    gap: clamp(var(--tc-space-3), 1.2dvh, var(--tc-space-5));
    padding: var(--tc-space-2-5);
  }

  .pricing-modal-surface--purchase-only .pricing-option-card {
    gap: clamp(var(--tc-space-1-5), 0.74dvh, var(--tc-space-3));
    padding: clamp(var(--tc-space-5), 1.55dvh, var(--tc-space-7));
  }

  .pricing-modal-surface--purchase-only .plan-label {
    font-size: clamp(0.5rem, 1.62vw, 0.625rem);
  }

  .pricing-modal-surface--purchase-only .pricing-badge {
    min-height: clamp(var(--tc-layout-pricing-badge-height-short), 2.35dvh, var(--tc-layout-pricing-badge-height-compact));
    padding: 0 var(--tc-layout-pricing-badge-padding-x-short);
    font-size: var(--tc-type-pricing-badge-size-compact);
  }

  .pricing-modal-surface--purchase-only .pricing-option-card h3 {
    font-size: clamp(0.8125rem, 2.62vw, 1rem);
    line-height: 1.14;
  }

  .pricing-modal-surface--purchase-only .pricing-price {
    gap: var(--tc-space-2-5);
  }

  .pricing-modal-surface--purchase-only .pricing-price__old {
    font-size: clamp(0.59375rem, 1.82vw, 0.75rem);
  }

  .pricing-modal-surface--purchase-only .pricing-price strong {
    font-size: clamp(1.22rem, 5vw, 1.75rem);
  }

  .pricing-modal-surface--purchase-only .pricing-option-card ul {
    gap: clamp(var(--tc-space-1), 0.58dvh, var(--tc-space-2));
    font-size: clamp(0.59375rem, 1.86vw, 0.75rem);
    line-height: 1.15;
  }

  .pricing-modal-surface--purchase-only .pricing-value-note {
    font-size: clamp(0.53125rem, 1.58vw, 0.65625rem);
    line-height: 1.16;
  }

  .pricing-modal-surface--purchase-only .pricing-option-card .pricing-button {
    min-height: clamp(29px, 4.35dvh, 36px);
    margin-top: clamp(var(--tc-space-1-5), 0.45dvh, var(--tc-space-2));
    font-size: clamp(0.65625rem, 1.92vw, 0.78125rem);
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export {
    padding: clamp(var(--tc-space-3), 1.35dvh, var(--tc-space-5)) clamp(var(--tc-space-4), 2.1vw, var(--tc-space-6));
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export p {
    font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export span {
    font-size: clamp(0.5625rem, 1.7vw, 0.6875rem);
    line-height: 1.16;
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export a {
    min-height: clamp(29px, 4.15dvh, 34px);
    font-size: clamp(0.625rem, 1.82vw, 0.75rem);
  }
}

@media (max-width: 980px) and (max-height: 620px) {
  .editor-full-access-modal__back {
    right: 10px;
    top: 10px;
    min-width: 122px;
    height: 34px;
    min-height: var(--tc-control-height-field);
    font-size: 0.6875rem;
  }

  .pricing-modal-surface--purchase-only .pricing-heading {
    min-height: auto;
    padding: clamp(30px, 6dvh, 38px) 0 var(--tc-space-5);
  }

  .pricing-modal-surface--purchase-only .pricing-heading h2 {
    font-size: 1.15rem;
  }

  .pricing-modal-surface--purchase-only .pricing-heading p {
    max-width: min(24rem, 100%);
    font-size: 0.59375rem;
    line-height: 1.18;
  }

  .pricing-modal-surface--purchase-only .pricing-content {
    gap: var(--tc-space-1);
    padding: var(--tc-space-4) var(--tc-space-2) var(--tc-space-5);
  }

  .pricing-modal-surface--purchase-only .pricing-options {
    gap: var(--tc-space-3);
    padding: var(--tc-space-2-5);
  }

  .pricing-modal-surface--purchase-only .pricing-option-card {
    gap: var(--tc-space-2);
    padding: var(--tc-space-5);
  }

  .pricing-modal-surface--purchase-only .plan-label {
    font-size: 0.5rem;
  }

  .pricing-modal-surface--purchase-only .pricing-badge {
    min-height: var(--tc-layout-pricing-badge-height-compact);
    padding: 0 var(--tc-layout-pricing-badge-padding-x-compact);
    font-size: var(--tc-type-pricing-badge-size-compact);
  }

  .pricing-modal-surface--purchase-only .pricing-option-card h3 {
    font-size: 0.75rem;
    line-height: 1.12;
  }

  .pricing-modal-surface--purchase-only .pricing-price {
    gap: var(--tc-space-2-5);
  }

  .pricing-modal-surface--purchase-only .pricing-price__old {
    font-size: 0.5625rem;
  }

  .pricing-modal-surface--purchase-only .pricing-price strong {
    font-size: 1.14rem;
  }

  .pricing-modal-surface--purchase-only .pricing-option-card ul {
    gap: var(--tc-space-1);
    align-self: center;
    margin-top: var(--tc-space-hairline);
    font-size: 0.5625rem;
    line-height: 1.08;
  }

  .pricing-modal-surface--purchase-only .pricing-value-note {
    font-size: 0.5rem;
    line-height: 1.1;
  }

  .pricing-modal-surface--purchase-only .pricing-option-card .pricing-button {
    min-height: var(--tc-control-height-compact);
    margin-top: var(--tc-space-1);
    font-size: 0.625rem;
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export {
    gap: var(--tc-space-3-5);
    padding: var(--tc-space-4);
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export .pricing-one-time-export__banner {
    min-height: var(--tc-layout-pricing-badge-height-short);
    margin-bottom: var(--tc-space-1-5);
    padding: 0 var(--tc-layout-pricing-badge-padding-x-short);
    font-size: var(--tc-type-pricing-badge-size-short);
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export p {
    font-size: 0.65625rem;
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export span {
    font-size: 0.546875rem;
    line-height: 1.12;
  }

  .pricing-modal-surface--purchase-only .pricing-one-time-export a {
    min-height: var(--tc-control-height-compact);
    padding: 0 var(--tc-space-4);
    font-size: 0.59375rem;
  }
}

@media (max-width: 680px) {
  .pricing-section {
    padding: var(--tc-space-14) var(--tc-page-pad) 72px;
  }

  .pricing-shell {
    width: min(100%, 420px);
    margin-inline: auto;
  }

  .pricing-options {
    grid-template-columns: 1fr;
  }

  .pricing-option-card--featured {
    grid-column: auto;
  }

  .pricing-option-card {
    min-height: 350px;
  }

  .pricing-one-time-export {
    align-items: stretch;
    flex-direction: column;
  }

  .pricing-one-time-export__action {
    width: 100%;
    justify-items: stretch;
  }

  .pricing-one-time-export a {
    width: 100%;
  }

  .pricing-heading {
    margin-bottom: var(--tc-space-7);
  }

  .pricing-heading h2 {
    font-size: 1.75rem;
  }

  .pricing-heading p {
    max-width: 320px;
    font-size: 0.75rem;
  }

  .pricing-testimonials {
    position: relative;
    display: block;
    min-height: 126px;
    margin-top: var(--tc-space-9);
    padding: 0;
    border: 1px solid var(--tc-card-border);
    border-radius: var(--tc-radius-md);
    background: var(--tc-card-bg);
    -webkit-backdrop-filter: var(--tc-card-filter);
    backdrop-filter: var(--tc-card-filter);
    overflow: hidden;
  }

  .pricing-testimonial {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    visibility: hidden;
    opacity: 0;
    padding: var(--tc-space-7);
    border: 0;
    border-radius: var(--tc-radius-none);
    background: var(--tc-color-transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
    transform: translateX(20px);
    transition:
      opacity 320ms var(--tc-ease-standard),
      transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 720ms;
  }

  .pricing-testimonial > * {
    transform: none;
    transition: none;
    will-change: auto;
  }

  .pricing-testimonial.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition:
      opacity 380ms var(--tc-ease-standard),
      transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s;
  }

  .pricing-testimonial.is-exiting {
    visibility: visible;
    opacity: 0;
    transform: translateX(-20px);
    transition:
      opacity 260ms var(--tc-ease-standard),
      transform 260ms var(--tc-ease-standard),
      visibility 0s linear 260ms;
  }

  .pricing-testimonial__stars {
    margin-bottom: var(--tc-space-3-5);
    font-size: 0.6875rem;
  }

  .pricing-testimonial p {
    font-size: 0.6875rem;
    line-height: 1.38;
  }

  .pricing-testimonial footer {
    gap: var(--tc-space-1);
    margin-top: var(--tc-space-5);
  }

  .pricing-testimonial strong {
    font-size: 0.6875rem;
  }

  .pricing-testimonial span {
    font-size: 0.625rem;
  }

  .pricing-burst {
    top: 56%;
    width: min(560px, calc(100vw - 8px));
    height: 360px;
  }

  .pricing-burst__glyph--b,
  .pricing-burst__glyph--dollar {
    --burst-x: -270px;
  }

  .pricing-burst__glyph--s,
  .pricing-burst__glyph--p {
    --burst-x: 270px;
  }

  .pricing-burst__glyph--b {
    --burst-y: -230px;
  }

  .pricing-burst__glyph--m {
    --burst-x: -82px;
    --burst-y: -270px;
  }

  .pricing-burst__glyph--s {
    --burst-y: -220px;
  }

  .pricing-burst__glyph--x {
    --burst-x: 130px;
    --burst-y: 300px;
  }
}
}

/* source: shared/styles/features/editor/editor-hit-testing.css */
@layer features {
/* Hit-testing overlays and selection affordances for the standalone editor. */
.editor-caret {
  position: absolute;
  z-index: 2147483000;
  width: var(--tc-caret-width);
  min-height: var(--tc-caret-min-height);
  border: 0;
  border-radius: var(--tc-radius-hairline);
  background: var(--tc-text-bright);
  mix-blend-mode: difference;
  box-shadow: none;
  pointer-events: none;
  transform-origin: center top;
  transform: translateX(-50%);
  animation: caret-blink 1s steps(1) infinite;
}

body[data-preview-checker-mode="bright"] .editor-caret {
  background: var(--tc-white);
}

.editor-caret[hidden],
body:not(.is-typing):not(.is-editor-text-selection-hold) .editor-caret {
  display: none;
}

/* With empty text the caret stays visible even when the editor is not focused
   (no keyboard), so it blinks in the center alongside the "Double Tap To Type" hint. */
body.is-empty .editor-caret:not([hidden]) {
  display: block;
}

body.is-scrubbing .editor-caret {
  animation: none;
  opacity: 1;
}

.simple-selection-layer {
  position: absolute;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  transform: none;
}

.simple-selection-layer--canvas .editor-caret {
  min-height: 0;
}

.simple-selection-rect {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--tc-accent-border-strong);
  border-radius: var(--tc-radius-2xs);
  background: var(--tc-accent-overlay);
  mix-blend-mode: screen;
  box-shadow: 0 0 0 1px var(--tc-accent-border-soft);
}

.simple-selection-layer[hidden] {
  display: none;
}

/* Animation settings and active Animation controls are preview surfaces.
   Preserve the native/shared range and caret state while suppressing only
   their canvas presentation. */
body.is-animation-settings-popup-open .editor-caret,
body.is-animation-settings-popup-open .simple-selection-layer,
body.is-animation-control-interacting .editor-caret,
body.is-animation-control-interacting .simple-selection-layer {
  visibility: hidden;
  pointer-events: none;
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

.editor-caret::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: var(--tc-icon-size-xl);
  height: calc(100% + 8px);
  border-radius: var(--tc-radius-2xs);
  background: var(--tc-accent-overlay);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

body.is-empty.is-typing .editor-caret::before {
  opacity: 1;
}
}

/* source: shared/styles/features/mobile-keyboard/keyboard-shell.css */
@layer mobile {
/* Custom mobile keyboard shell, keys, and compact viewport states. */
.mobile-text-keyboard-root {
    --tc-mobile-keyboard-default-height: clamp(288px, 32dvh, 336px);
    --tc-mobile-keyboard-panel-height: var(--tc-mobile-keyboard-measured-height, var(--tc-mobile-keyboard-default-height));
    --tc-mobile-keyboard-gap: 4px;
    --tc-mobile-keyboard-row-gap: var(--tc-mobile-keyboard-gap);
    --tc-mobile-keyboard-bottom-row-gap: 5px;
    --tc-mobile-keyboard-pad: 5px;
    --tc-mobile-keyboard-bottom-cushion: 3px;
    --tc-mobile-keyboard-bottom-pad: calc(var(--tc-mobile-keyboard-pad) + var(--tc-mobile-keyboard-bottom-cushion) + env(safe-area-inset-bottom));
    --tc-mobile-keyboard-key-radius: clamp(4px, 1.1vw, 7px);
    --tc-mobile-keyboard-key-font: clamp(0.8125rem, 3.6vw, 1rem);
    --tc-mobile-keyboard-small-font: clamp(0.6875rem, 3vw, 0.8125rem);
    --tc-mobile-keyboard-row-height: calc((var(--tc-mobile-keyboard-panel-height) - var(--tc-mobile-keyboard-pad) - var(--tc-mobile-keyboard-bottom-pad) - (var(--tc-mobile-keyboard-row-gap) * 3) - var(--tc-mobile-keyboard-bottom-row-gap)) / 5);
    --tc-mobile-keyboard-key-height: var(--tc-mobile-keyboard-row-height);
    --tc-mobile-keyboard-action-height: var(--tc-mobile-keyboard-row-height);

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--tc-mobile-keyboard-z);
    display: none;
    height: var(--tc-mobile-keyboard-panel-height);
    min-height: 0;
    padding: var(--tc-mobile-keyboard-pad) var(--tc-mobile-keyboard-pad) var(--tc-mobile-keyboard-bottom-pad);
    border-top: 1px solid var(--tc-border-default);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    touch-action: none;
    overscroll-behavior: contain;
    overflow: hidden;
    -webkit-tap-highlight-color: var(--tc-color-transparent);
    -webkit-user-select: none;
    user-select: none;
}

.mobile-text-keyboard-root.is-open {
    display: block;
}

.mobile-text-keyboard {
    position: relative;
    width: min(100%, 960px);
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-rows: repeat(5, var(--tc-mobile-keyboard-row-height));
    gap: var(--tc-mobile-keyboard-row-gap);
}

.mobile-keyboard-header {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: var(--tc-mobile-keyboard-row-height);
    height: var(--tc-mobile-keyboard-row-height);
    margin: 0;
    transform: none;
    pointer-events: none;
}

.mobile-keyboard-fake-caret {
    position: fixed;
    z-index: var(--tc-mobile-keyboard-caret-z);
    display: none;
    width: 1px;
    border-radius: var(--tc-radius-hairline);
    background: var(--tc-mobile-keyboard-accent, var(--tc-accent-main, var(--tc-accent-main)));
    box-shadow: none;
    pointer-events: none;
    animation: mobile-keyboard-caret-blink 1s steps(1) infinite;
}

.mobile-keyboard-fake-caret.is-visible {
    display: block;
}

.mobile-keyboard-inline-caret {
    position: absolute;
    z-index: 8;
    display: none;
    width: 1px;
    border-radius: var(--tc-radius-hairline);
    background: var(--tc-mobile-keyboard-accent, var(--tc-accent-main, var(--tc-accent-main)));
    pointer-events: none;
    animation: mobile-keyboard-caret-blink 1s steps(1) infinite;
}

.mobile-keyboard-inline-caret.is-visible {
    display: block;
}

.mobile-keyboard-selection-layer {
    position: fixed;
    inset: 0;
    z-index: var(--tc-mobile-keyboard-selection-z);
    display: none;
    pointer-events: none;
}

.mobile-keyboard-selection-layer.is-visible {
    display: block;
}

.mobile-keyboard-selection-fragment {
    position: absolute;
    border-radius: var(--tc-radius-xs);
    pointer-events: none;
}

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

.mobile-keyboard-caret-measure {
    position: fixed;
    left: -9999px;
    top: 0;
    z-index: -1;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

@keyframes mobile-keyboard-caret-blink {
    50% {
        opacity: 0.42;
    }
}

.mobile-keyboard-row {
    width: 100%;
    display: grid;
    gap: var(--tc-mobile-keyboard-gap);
    align-items: stretch;
}

.mobile-keyboard-row.row-top {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.mobile-keyboard-row.row-home {
    grid-template-columns: 0.25fr repeat(9, minmax(0, 1fr)) 0.25fr;
}

.mobile-keyboard-row.row-third {
    grid-template-columns: 1.05fr repeat(7, minmax(0, 1fr)) 1.05fr;
}

.mobile-keyboard-row.row-symbols {
    grid-template-columns: 0.25fr repeat(9, minmax(0, 1fr)) 0.25fr;
}

.mobile-keyboard-row.row-numbers {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.mobile-keyboard-row.row-bottom {
    grid-template-columns: 1.15fr minmax(0, 8.45fr);
    margin-top: calc(var(--tc-mobile-keyboard-bottom-row-gap) - var(--tc-mobile-keyboard-row-gap));
}

.mobile-keyboard-row.row-bottom.has-return {
    grid-template-columns: 1.05fr minmax(0, 6.9fr) 1.55fr;
}

.mobile-keyboard-row.row-symbol-bottom {
    grid-template-columns: 1.15fr minmax(0, 7.3fr) 1.15fr;
    margin-top: calc(var(--tc-mobile-keyboard-bottom-row-gap) - var(--tc-mobile-keyboard-row-gap));
}

.mobile-keyboard-row.row-symbol-bottom.has-return {
    grid-template-columns: 1.05fr minmax(0, 5.8fr) 1.55fr 1.05fr;
}

.mobile-text-keyboard-root {
  --tc-mobile-keyboard-bg: var(--tc-panel-bg);
  --tc-mobile-keyboard-line: var(--tc-color-transparent);
  --tc-mobile-keyboard-text: var(--tc-text-main);
  --tc-mobile-keyboard-muted: var(--tc-text-muted);
  --tc-mobile-keyboard-ink: var(--tc-text-disabled);
  --tc-mobile-keyboard-accent: var(--tc-accent-main);
  background: var(--tc-mobile-keyboard-bg);
  border-top-color: var(--tc-color-transparent);
}

.mobile-keyboard-selection-fragment {
  background: var(--tc-state-selected-bg);
  box-shadow: 0 0 0 1px var(--tc-accent-border);
}
}

/* source: shared/styles/features/mobile-keyboard/keyboard-caret-selection.css */
@layer mobile {

.mobile-keyboard-row.row-symbol-spacer {
    min-height: var(--tc-mobile-keyboard-key-height);
    visibility: hidden;
}

.mobile-keyboard-spacer {
    min-width: 0;
    pointer-events: none;
}

.mobile-key {
    appearance: none;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    min-height: 0;
    height: var(--tc-mobile-keyboard-key-height);
    border-radius: var(--tc-mobile-keyboard-key-radius);
    padding: 0;
    font-size: var(--tc-mobile-keyboard-key-font);
    font-weight: 560;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    outline: none;
    touch-action: none;
    -webkit-tap-highlight-color: var(--tc-color-transparent);
    -webkit-user-select: none;
    user-select: none;
    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        transform 80ms ease;
}

.mobile-key:hover,
.mobile-key:focus-visible {
    outline: 0;
}

.mobile-key:active,
.mobile-key.is-pressing {
    transform: translateY(1px);
    background: var(--tc-surface-control-key-active);
}

.mobile-key.is-active {
    background: var(--tc-surface-control-key-active);
    color: var(--tc-text-bright);
}

@media (hover: none) and (pointer: coarse) {
    .mobile-key:hover,
    .mobile-key:focus,
    .mobile-key:focus-visible {
        outline: 0;
    }

    .mobile-key--action:hover,
    .mobile-key--action:focus,
    .mobile-key--action:focus-visible {
        color: var(--tc-mobile-keyboard-muted);
    }
}

.mobile-key--char {
    min-height: 0;
    height: var(--tc-mobile-keyboard-key-height);
    font-size: var(--tc-mobile-keyboard-key-font);
}

.mobile-key--action {
    color: var(--tc-mobile-keyboard-muted);
    font-size: var(--tc-mobile-keyboard-small-font);
    font-weight: 600;
}

.mobile-key--dismiss {
    width: clamp(116px, 35vw, 144px);
    min-height: 0;
    height: var(--tc-mobile-keyboard-row-height);
    border-radius: var(--tc-keyboard-selection-radius);
    pointer-events: auto;
    border-color: var(--tc-color-transparent);
}

.mobile-keyboard-header-actions {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 4vw, 20px);
    pointer-events: auto;
}

.mobile-key--header-action {
    width: clamp(34px, 8vw, 40px);
    height: clamp(30px, calc(var(--tc-mobile-keyboard-row-height) * 0.68), 38px);
    border-radius: var(--tc-mobile-keyboard-key-radius);
    pointer-events: auto;
}

.mobile-key--header-action .mobile-key-icon {
    width: 15px;
    height: 15px;
}

.mobile-key--dismiss .mobile-key-icon {
    width: 24px;
    height: var(--tc-field-height-sm);
}

.mobile-keyboard-row.row-bottom > .mobile-key,
.mobile-keyboard-row.row-symbol-bottom > .mobile-key {
    min-height: 0;
    height: var(--tc-mobile-keyboard-action-height);
}

.mobile-key--space,
.mobile-key--return {
    min-height: 0;
    height: var(--tc-mobile-keyboard-action-height);
    color: var(--tc-mobile-keyboard-muted);
    font-size: var(--tc-mobile-keyboard-small-font);
}

.mobile-key--space {
    background: var(--tc-surface-control-action);
}

.mobile-key--return {
    background: var(--tc-surface-control-action-strong);
}

.mobile-key-icon {
    width: 17px;
    height: var(--tc-field-height-2xs);
    display: block;
    pointer-events: none;
}

.mobile-key-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-key-icon--solid svg,
.mobile-key-icon--solid svg path {
    fill: currentColor;
    stroke: none;
}

@media (max-width: 820px) {
    .mobile-text-keyboard-root {
        --tc-mobile-keyboard-default-height: clamp(292px, 34dvh, 328px);
    }
}

@media (max-width: 560px) {
    .mobile-text-keyboard-root {
        --tc-mobile-keyboard-gap: 4px;
        --tc-mobile-keyboard-row-gap: 4px;
        --tc-mobile-keyboard-bottom-row-gap: 5px;
        --tc-mobile-keyboard-pad: 5px;
        --tc-mobile-keyboard-bottom-cushion: 3px;
        --tc-mobile-keyboard-key-radius: 4px;
        --tc-mobile-keyboard-key-font: clamp(0.78rem, 3.85vw, 0.95rem);
        --tc-mobile-keyboard-small-font: clamp(0.66rem, 3vw, 0.78rem);
        --tc-mobile-keyboard-default-height: clamp(304px, 39dvh, 344px);
        min-height: 0;
    }

    .mobile-key {
        border-radius: var(--tc-mobile-keyboard-key-radius);
        border-left-width: 0;
    }
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    .mobile-text-keyboard-root {
        display: none;
    }
}

.mobile-key {
  border: 0;
  background: var(--tc-surface-control-key);
  color: var(--tc-mobile-keyboard-text);
  box-shadow: var(--tc-shadow-none);
}

.mobile-key:hover,
.mobile-key:focus-visible {
  background: var(--tc-surface-control-key-hover);
  color: var(--tc-text-strong);
}

.mobile-key:active,
.mobile-key.is-pressing,
.mobile-key.is-active {
  background: var(--tc-surface-control-key-active);
  color: var(--tc-text-strong);
}

.mobile-key--action,
.mobile-key--space,
.mobile-key--return {
  color: var(--tc-mobile-keyboard-muted);
  background: var(--tc-surface-control-action);
}

.mobile-key--dismiss {
  border: 0;
  background: var(--tc-surface-control-action-strong);
  color: var(--tc-text-strong);
  box-shadow: var(--tc-shadow-none);
}

@media (hover: none) and (pointer: coarse) {
    .mobile-key:hover,
    .mobile-key:focus,
    .mobile-key:focus-visible {
    background: var(--tc-surface-control-key);
    color: var(--tc-mobile-keyboard-text);
  }

    .mobile-key:active,
    .mobile-key.is-pressing,
    .mobile-key.is-active {
    background: var(--tc-surface-control-key-active);
    color: var(--tc-text-strong);
  }

  .mobile-key--action:hover,
  .mobile-key--space:hover,
  .mobile-key--return:hover,
  .mobile-key--action:focus,
  .mobile-key--space:focus,
  .mobile-key--return:focus,
  .mobile-key--action:focus-visible,
  .mobile-key--space:focus-visible,
  .mobile-key--return:focus-visible {
    background: var(--tc-surface-control-action);
    color: var(--tc-mobile-keyboard-muted);
  }
}
}

/* source: shared/styles/features/gallery/gallery-modal-combined-styles.css */
@layer features {
.editor-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: min(var(--tc-editor-viewport-max-width), calc(100vw - 40px));
  height: min(var(--tc-editor-viewport-max-height), calc(100dvh - 40px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--tc-color-transparent);
  color: var(--tc-text-main);
  overflow: visible;
  overscroll-behavior: contain;
}

.editor-modal::after {
  display: none;
}

.editor-modal.is-opening-paint {
  opacity: 1;
  pointer-events: none;
}

.editor-modal:focus,
.editor-modal:focus-visible,
.editor-modal-frame:focus,
.editor-modal-frame:focus-visible,
#editor-frame:focus,
#editor-frame:focus-visible {
  outline: 0;
  box-shadow: none;
}

.editor-modal::backdrop {
  background-color: var(--tc-bg-canvas);
  background-image: var(--tc-bg-grid-image-soft);
  background-size: var(--tc-bg-grid-size);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


.editor-modal.is-exporting .modal-aspect-toggle label {
  pointer-events: none;
}

.editor-modal.is-exporting .modal-aspect-toggle span {
  opacity: 0.58;
  cursor: default;
}

.editor-modal-frame {
  position: relative;
  width: min(100%, var(--tc-editor-shell-max-width));
  margin-inline: auto;
  height: 100%;
  overflow: visible;
}

.editor-modal-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--tc-color-transparent);
}

.editor-modal-header {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.625rem, 1.4vw, 1rem);
  min-height: 4.125rem;
  padding: 0.625rem 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  border: 0;
}

.editor-modal-header.editor-modal-header--chrome {
  position: absolute;
  top: max(var(--tc-space-3), env(safe-area-inset-top));
  right: max(var(--tc-space-3), env(safe-area-inset-right));
  left: auto;
  z-index: 12;
  width: auto;
  min-height: 0;
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--tc-color-transparent);
  box-shadow: none;
  pointer-events: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.editor-modal-header.editor-modal-header--chrome [data-editor-close] {
  pointer-events: auto;
}

.editor-modal-title-block {
  min-width: 0;
  display: grid;
  gap: 0;
}

.modal-style-field {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-4);
  width: auto;
  max-width: min(760px, 62vw);
  flex-wrap: nowrap;
}


.modal-style-combined-strip {
  align-items: center;
  gap: var(--tc-space-2);
  flex: 0 0 auto;
  margin-left: 0;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.modal-style-combined-strip[hidden] {
  display: none;
}

.modal-style-combined-trigger-icon {
  appearance: none;
  flex: 0 0 var(--tc-combined-style-thumb-size);
  width: var(--tc-combined-style-thumb-size);
  height: var(--tc-combined-style-thumb-size);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--tc-combined-style-thumb-radius);
  background: var(--tc-color-transparent);
  color: var(--tc-control-text-muted);
  cursor: pointer;
  opacity: 0.58;
  transition: color var(--tc-transition-fast), opacity var(--tc-transition-fast);
}

.modal-style-combined-trigger-icon svg {
  width: var(--tc-icon-size-2xl);
  height: var(--tc-icon-size-2xl);
  display: block;
}

.modal-style-field.has-combined-styles:hover .modal-style-combined-trigger-icon,
.modal-style-field.has-combined-styles:focus-within .modal-style-combined-trigger-icon,
.modal-style-combined-trigger-icon:hover,
.modal-style-combined-trigger-icon:focus-visible {
  background: var(--tc-color-transparent);
  color: var(--tc-control-text-hover);
  opacity: 1;
  outline: 0;
}

.modal-style-combined-thumb {
  position: relative;
  flex: 0 0 var(--tc-combined-style-thumb-size);
  width: var(--tc-combined-style-thumb-size);
  height: var(--tc-combined-style-thumb-size);
  padding: 0;
  border: 1px solid var(--tc-border-strong);
  border-radius: var(--tc-combined-style-thumb-radius);
  background-image: var(--tc-combined-style-preview-grid-image);
  background-size: var(--tc-combined-style-preview-grid-size);
  overflow: hidden;
  cursor: pointer;
}

.modal-style-combined-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--tc-combined-style-thumb-image-radius);
}

.modal-style-combined-count {
  font-size: var(--tc-type-footer-meta-size);
  font-weight: var(--tc-type-footer-meta-weight);
  white-space: nowrap;
}

.mobile-combined-style-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(0.875rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(0.875rem, env(safe-area-inset-left));
  touch-action: manipulation;
  overscroll-behavior: contain;
}

.mobile-combined-style-modal__panel {
  --combined-style-card-preview-width: var(--tc-combined-style-card-preview-width);
  width: var(--tc-combined-style-modal-panel-width);
  max-height: var(--tc-combined-style-modal-panel-max-height);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--tc-space-4);
  padding: var(--tc-space-5);
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-radius-md);
  overflow: hidden;
}

.mobile-combined-style-modal__panel:focus,
.mobile-combined-style-modal__panel:focus-visible {
  outline: 0;
}

.mobile-combined-style-modal__header {
  min-width: 0;
  padding-bottom: 0.25rem;
}

.mobile-combined-style-modal__title-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-2);
  min-width: 0;
  white-space: nowrap;
}

.mobile-combined-style-modal__title {
  margin: 0;
  font-size: var(--tc-type-field-label-size);
  font-weight: var(--tc-type-field-label-weight);
  line-height: var(--tc-type-field-label-line);
  text-transform: uppercase;
}

.mobile-combined-style-modal__subtitle {
  display: inline;
  margin: 0;
  color: var(--tc-text-faint);
  font-size: var(--tc-type-field-label-size);
  font-weight: var(--tc-type-field-label-weight);
  line-height: var(--tc-type-field-label-line);
  text-transform: none;
  white-space: nowrap;
}

.mobile-combined-style-modal__cancel {
  width: 100%;
  min-height: 2.375rem;
  border-radius: var(--tc-radius-sm);
  font: inherit;
  font-size: var(--tc-type-button-primary-size);
  font-weight: var(--tc-type-button-primary-weight);
  line-height: 1;
  text-align: left;
  padding: 0 var(--tc-space-5);
  cursor: pointer;
  -webkit-tap-highlight-color: var(--tc-color-transparent);
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.mobile-combined-style-modal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tc-combined-style-card-grid-gap);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

.mobile-combined-style-card {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--combined-style-card-preview-width) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tc-space-4);
  min-height: var(--tc-combined-style-card-min-height);
  padding: var(--tc-space-2) var(--tc-space-4) var(--tc-space-2) var(--tc-space-2);
  border-radius: var(--tc-radius-sm);
  font: inherit;
  text-align: left;
  transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.mobile-combined-style-card.is-default {
  grid-template-columns: var(--combined-style-card-preview-width) minmax(0, 1fr);
}

.mobile-combined-style-card:hover,
.mobile-combined-style-card:focus-within {
  background: var(--tc-surface-main);
  box-shadow: inset 0 0 0 1px var(--tc-border-soft);
}

.mobile-combined-style-card__remove:hover,
.mobile-combined-style-card__remove:focus-visible {
  background: var(--tc-surface-main);
  box-shadow:
    inset 0 0 0 1px var(--tc-border-default),
    0 8px 22px var(--tc-shadow-color-faint);
}

.mobile-combined-style-card.is-default:hover {
  box-shadow: none;
}

.mobile-combined-style-card[aria-busy="true"] {
  cursor: default;
}

.mobile-combined-style-card__preview {
  display: grid;
  place-items: center;
  width: var(--combined-style-card-preview-width);
  height: var(--tc-combined-style-card-preview-height);
  min-width: 0;
  border-radius: var(--tc-combined-style-preview-radius);
  background-color: var(--tc-combined-style-preview-bg);
  background-image: var(--tc-combined-style-preview-grid-image);
  background-size: var(--tc-combined-style-preview-grid-size);
  overflow: hidden;
}

.mobile-combined-style-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.mobile-combined-style-card__label {
  min-width: 0;
  overflow: hidden;
  font-size: var(--tc-type-select-option-size);
  font-weight: var(--tc-type-select-option-weight);
  line-height: var(--tc-type-select-option-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-combined-style-card__remove {
  appearance: none;
  justify-self: end;
  min-height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3125rem 0.5rem;
  border: 0;
  border-radius: var(--tc-radius-xs);
  background: var(--tc-color-transparent);
  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);
  cursor: pointer;
  -webkit-tap-highlight-color: var(--tc-color-transparent);
  transition: background-color 140ms ease, color 140ms ease;
}

.mobile-combined-style-card__remove:disabled {
  cursor: default;
  opacity: 0.62;
}

.mobile-combined-style-card__remove.is-default {
  cursor: default;
  pointer-events: none;
  color: var(--tc-text-faint);
}

.mobile-combined-style-modal--select-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(24rem, calc(100% - var(--tc-space-12)));
  display: grid;
  transform: translate(-50%, -50%);
  padding: 0;
  background: var(--tc-color-transparent);
  touch-action: auto;
}

@media (max-width: 760px), (max-width: 900px) and (hover: none) and (pointer: coarse) {
  .mobile-combined-style-modal {
    padding:
      max(0.75rem, env(safe-area-inset-top))
      max(0.75rem, env(safe-area-inset-right))
      max(0.75rem, env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
  }
}

.editor-modal-header {
  border-color: var(--tc-color-transparent);
  border-radius: var(--tc-radius-md);
  background: var(--tc-panel-bg);
  box-shadow: var(--tc-shadow-none);
  -webkit-backdrop-filter: var(--tc-glass-filter-soft);
  backdrop-filter: var(--tc-glass-filter-soft);
}

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

.modal-style-combined-thumb {
  border-color: var(--tc-card-border);
  background-color: var(--tc-bg-canvas);
  box-shadow: none;
}

.modal-style-combined-thumb:hover,
.modal-style-combined-thumb:focus-visible {
  border-color: var(--tc-card-border-active);
  outline: 0;
}

.modal-style-combined-count {
  color: var(--tc-text-disabled);
}

.mobile-combined-style-modal {
  background: var(--tc-bg-overlay-combined-modal);
}

.mobile-combined-style-modal__panel {
  border-color: var(--tc-color-transparent);
  background: var(--tc-card-box-bg);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.mobile-combined-style-modal--select-menu {
  background: var(--tc-color-transparent);
}

.mobile-combined-style-modal__title {
  color: var(--tc-text-disabled);
}

.mobile-combined-style-modal__subtitle {
  color: var(--tc-text-faint);
}

.mobile-combined-style-modal__cancel {
  border: 1px solid var(--tc-color-transparent);
  background: var(--tc-surface-control);
  color: var(--tc-control-text);
}

.mobile-combined-style-modal__cancel:hover,
.mobile-combined-style-modal__cancel:focus-visible {
  border-color: var(--tc-color-transparent);
  background: var(--tc-surface-control-hover);
  color: var(--tc-control-text-hover);
  box-shadow: none;
  outline: 0;
}

.mobile-combined-style-modal__cancel:focus-visible,
.mobile-combined-style-card__remove:focus-visible {
  outline: 0;
  outline-offset: 0;
}

.mobile-combined-style-card {
  border: 1px solid var(--tc-color-transparent);
  background: var(--tc-bg-app);
  color: var(--tc-text-main);
  box-shadow: none;
}

.mobile-combined-style-card:hover,
.mobile-combined-style-card:focus-visible,
.mobile-combined-style-card:focus-within {
  border-color: var(--tc-color-transparent);
  background: var(--tc-surface-main);
  box-shadow: none;
}

.mobile-combined-style-card.is-default:hover {
  border-color: var(--tc-color-transparent);
  background: var(--tc-bg-app);
}

.mobile-combined-style-card[aria-busy="true"] {
  opacity: var(--tc-state-disabled-opacity);
}

.mobile-combined-style-card__preview {
  border: 1px solid var(--tc-card-border);
}

.mobile-combined-style-card__label {
  color: var(--tc-text-main);
}

.mobile-combined-style-card__remove {
  color: var(--tc-control-text-muted);
}

.mobile-combined-style-card__remove:hover,
.mobile-combined-style-card__remove:focus-visible {
  background: var(--tc-control-bg-hover);
  color: var(--tc-control-text-hover);
}

.mobile-combined-style-card__remove:disabled,
.mobile-combined-style-card__remove.is-default {
  color: var(--tc-text-disabled);
  opacity: var(--tc-state-disabled-opacity);
}
}

/* source: shared/styles/features/gallery/gallery-editor-modal.css */
@layer features {
@media (min-width: 761px) and (pointer: fine) {
  .editor-modal,
  .editor-standalone-shell {
    --modal-gallery-menu-width: min(
      var(--tc-select-gallery-desktop-menu-width),
      calc(100vw - (var(--tc-select-gallery-desktop-container-inset) * 2))
    );
    --modal-gallery-menu-gap: var(--tc-select-gallery-desktop-menu-gap);
  }
}

.style-apply-scope-popover {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(24rem, calc(100% - var(--tc-space-12)));
  display: grid;
  gap: var(--tc-space-3);
  padding: var(--tc-space-5);
  border: 1px solid var(--tc-color-transparent);
  border-color: var(--tc-color-transparent);
  border-radius: var(--tc-radius-md);
  background: var(--tc-editor-ui-popup);
  box-shadow: var(--tc-editor-ui-popup-shadow);
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.style-apply-scope-popover::before {
  content: "APPLY STYLE";
  color: var(--tc-text-disabled);
  font-size: var(--tc-type-field-label-size);
  font-weight: var(--tc-type-field-label-weight);
  line-height: var(--tc-type-field-label-line);
}

.style-apply-scope-popover button {
  min-height: 2.75rem;
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-editor-ui-popup-control);
  color: var(--tc-control-text);
  font: inherit;
  font-size: var(--tc-type-button-primary-size);
  font-weight: var(--tc-type-button-primary-weight);
  text-align: left;
  padding: 0 var(--tc-space-5);
}

.style-apply-scope-popover__tip {
  margin: 0 0 var(--tc-space-1);
  color: var(--tc-text-muted);
  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);
  min-height: 1.25em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-apply-scope-popover__tip.is-warning {
  color: var(--tc-warning-main);
}

.style-apply-scope-popover button:hover,
.style-apply-scope-popover button:focus-visible {
  border-color: var(--tc-editor-ui-line-strong);
  background: var(--tc-editor-ui-popup-control-hover);
  color: var(--tc-control-text-hover);
  outline: 0;
}

.style-apply-scope-popover button:disabled,
.style-apply-scope-popover button.is-disabled {
  color: var(--tc-text-disabled);
  cursor: default;
  opacity: var(--tc-state-disabled-opacity);
}

@media (max-width: 760px), (max-width: 900px) and (hover: none) and (pointer: coarse) {
  .modal-style-combined-count {
    display: none;
  }

  .modal-style-combined-strip.is-modal-trigger {
    gap: var(--tc-space-2);
  }

  .editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field.has-combined-styles {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: var(--tc-space-3);
    min-width: 0;
    overflow: hidden;
  }

  .editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field.has-combined-styles > .modal-style-combined-strip.is-modal-trigger {
    min-width: 0;
    width: min(100%, var(--tc-combined-style-strip-visible-width-mobile));
    max-width: var(--tc-combined-style-strip-visible-width-mobile);
    justify-self: start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field.has-combined-styles > .modal-style-combined-strip.is-modal-trigger::-webkit-scrollbar {
    display: none;
  }

  .modal-style-combined-strip.is-modal-trigger .modal-style-combined-trigger-icon {
    flex-basis: var(--tc-combined-style-thumb-size-mobile);
    width: var(--tc-combined-style-thumb-size-mobile);
    height: var(--tc-combined-style-thumb-size-mobile);
    margin-inline: var(--tc-space-1) var(--tc-space-2);
    color: var(--tc-control-text-muted);
  }

  .editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field.has-combined-styles:hover .modal-style-combined-trigger-icon,
  .editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field.has-combined-styles:focus-within .modal-style-combined-trigger-icon,
  .modal-style-combined-strip.is-modal-trigger .modal-style-combined-trigger-icon:hover,
  .modal-style-combined-strip.is-modal-trigger .modal-style-combined-trigger-icon:focus-visible {
    background: var(--tc-color-transparent);
    color: var(--tc-control-text-hover);
    opacity: 1;
    outline: 0;
  }

  .modal-style-combined-strip.is-modal-trigger .modal-style-combined-thumb {
    flex-basis: 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-actions {
  flex: 0 0 auto;
  gap: var(--tc-space-5);
}

.modal-aspect-toggle {
  display: grid;
}

.style-apply-scope-popover__cancel {
  border-color: var(--tc-color-transparent);
  background: var(--tc-color-transparent);
  color: var(--tc-control-text-muted);
}
}

/* source: shared/styles/features/gallery/gallery-sections-footer.css */
@layer features {
/* Full-screen editor modal: compact CSS fallbacks plus the runtime touch-editor
   class for phones and tablets. Desktop fine-pointer stays on the desktop modal. */
@media (max-width: 680px), (max-width: 900px) and (hover: none) and (pointer: coarse) {
  .inline-editor-mount .modal-aspect-toggle {
    display: none;
  }

  .editor-modal {
    width: calc(100vw - 4px);
    height: calc(100dvh - 4px);
  }

  .editor-modal-frame {
    height: 100%;
  }
}

.editor-modal.is-touch-editor-mode {
  width: calc(100vw - 4px);
  height: calc(100dvh - 4px);
}

.editor-modal.is-touch-editor-mode .editor-modal-frame {
  height: 100%;
}

.editor-modal.is-touch-editor-mode .inline-editor-mount .modal-aspect-toggle {
  display: none;
}

.inline-editor-mount {
  position: relative;
  z-index: auto;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--tc-color-transparent);
  transition: opacity 180ms var(--tc-ease-standard), filter 180ms var(--tc-ease-standard);
}

.inline-editor-mount {
  height: 100%;
  overflow: visible;
}

.inline-editor-mount .editor-page {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: var(--tc-color-transparent);
}

.inline-editor-mount .editor-dialog {
  width: 100%;
  height: calc(100% - var(--editor-tab-offset));
  min-height: 0;
  transform: translateY(calc(var(--editor-tab-offset) / -2));
  background: var(--tc-color-transparent);
}

.inline-editor-mount .editor-window {
  width: 100%;
  height: 100%;
  grid-template-rows: minmax(0, 1fr) var(--editor-controls-height);
  row-gap: clamp(1rem, 2vw, 1.5rem);
  background: var(--tc-color-transparent);
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] {
  flex: 0 0 auto;
  width: 100%;
}

.editor-modal-frame > .editor-modal-header.editor-modal-header--chrome {
  display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .editor-modal[open] .inline-editor-mount .canvas-shell.ratio-landscape {
    justify-self: center;
    translate: 0 0;
    transition: none;
  }

  

  

  

  

  .editor-modal[open] .inline-editor-mount .canvas-shell.ratio-portrait {
    justify-self: center;
    translate: 0 0;
    transition: none;
  }

  

  
}

body.mobile-keyboard-open .inline-editor-mount .editor-dialog {
  grid-template-rows: minmax(0, 1fr);
  height: calc(100% - var(--editor-tab-offset));
  gap: 0;
  padding-bottom: initial;
  transform: translateY(calc(var(--editor-tab-offset) / -2));
}

body.mobile-keyboard-open .inline-editor-mount .editor-page {
  height: 100%;
  padding: 0;
}

body.mobile-keyboard-open .inline-editor-mount .editor-window {
  grid-template-rows: minmax(0, 1fr);
}

body.mobile-keyboard-open .inline-editor-mount .editor-controls {
  display: none;
}

body.mobile-keyboard-open .inline-editor-mount .editor-tabs {
  display: none;
}

body.mobile-keyboard-open .inline-editor-mount .editor-preview {
  align-self: start;
  height: calc(100% - var(--editor-controls-height));
  border-bottom: 1px solid var(--tc-state-hover-bg-strong);
}

body.has-inline-editor::before {
  display: block;
}

.editor-modal-preparing-surface {
  position: absolute;
  left: var(--tc-editor-preparing-left, 0);
  top: var(--tc-editor-preparing-top, 0);
  z-index: 5;
  width: var(--tc-editor-preparing-width, 100%);
  height: var(--tc-editor-preparing-height, 100%);
  border-radius: var(--tc-editor-preparing-surface-radius, var(--tc-radius-lg));
  border: 0;
  overflow: hidden;
  pointer-events: none;
}

.editor-modal-preparing-surface[hidden] {
  display: none;
}

.editor-modal-loader {
  --tc-loader-progress: 0;
  --tc-loader-left: 0px;
  --tc-loader-top: 0px;
  --tc-loader-width: 100%;
  --tc-loader-height: 100%;
  --tc-loader-radius: var(--tc-editor-preparing-surface-radius, var(--tc-radius-lg));
  position: absolute;
  left: var(--tc-loader-left);
  top: var(--tc-loader-top);
  z-index: 8;
  width: var(--tc-loader-width);
  height: var(--tc-loader-height);
  overflow: hidden;
  pointer-events: none;
}

.editor-modal-loader:not([hidden]):not([data-positioned="1"]) {
  visibility: hidden;
}

@media (max-width: 760px), (max-width: 900px) and (hover: none) and (pointer: coarse) {
  .search,
  .editor-modal::backdrop,
  .editor-modal.is-opening-paint::backdrop,
  .editor-modal-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .inline-editor-mount .editor-modal-actions .modal-aspect-toggle {
    display: none;
  }

  .search {
    background: var(--tc-surface-control);
  }

  .editor-modal::backdrop,
  .editor-modal.is-opening-paint::backdrop {
    background-color: var(--tc-bg-canvas);
    background-image: var(--tc-bg-grid-image-soft);
    background-size: var(--tc-bg-grid-size);
  }

  .editor-modal-header {
    background: var(--tc-editor-ui-glass);
  }
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.is-hidden {
  display: none;
}

.site-footer {
  position: relative;
  width: 100%;
  padding: clamp(var(--tc-space-14), 4.2vh, 52px) 0 clamp(var(--tc-space-8), 2.4vh, 26px);
  border-top: 0;
}

.footer-shell {
  width: min(calc(100vw - (var(--tc-page-pad) * 2)), var(--tc-gallery-footer-shell-max-width));
  margin: 0 auto;
}

.footer-panel {
  display: grid;
  grid-template-columns: var(--tc-gallery-footer-panel-columns);
  gap: var(--tc-gallery-footer-panel-gap);
  align-items: start;
  padding: var(--tc-gallery-footer-panel-padding);
}

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

.footer-brand p {
  max-width: var(--tc-gallery-footer-brand-copy-max-width);
  margin: 0;
  color: var(--tc-text-low);
  font-size: var(--tc-type-footer-body-size);
  font-weight: var(--tc-type-footer-body-weight);
  line-height: var(--tc-type-footer-body-line);
  letter-spacing: 0;
}

.footer-stats {
  gap: var(--tc-space-3-5);
}

.footer-stats span {
  min-height: var(--tc-gallery-footer-stat-min-height);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--tc-space-4-5);
  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: var(--tc-type-footer-stat-size);
  font-weight: var(--tc-type-footer-stat-weight);
  line-height: var(--tc-type-footer-stat-line);
}

.footer-links {
  display: grid;
  grid-template-columns: var(--tc-gallery-footer-links-columns);
  gap: var(--tc-gallery-footer-links-gap);
  justify-content: stretch;
}

.footer-links div {
  display: grid;
  gap: var(--tc-space-4-5);
  align-items: start;
}

.footer-links span:first-child {
  margin-bottom: var(--tc-space-1);
  color: var(--tc-accent-muted);
  font-size: var(--tc-type-footer-heading-size);
  font-weight: var(--tc-type-footer-heading-weight);
  line-height: var(--tc-type-footer-heading-line);
  letter-spacing: 0;
  text-transform: uppercase;
}

.footer-links a,
.footer-links button {
  appearance: none;
  position: relative;
  width: max-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: var(--tc-color-transparent);
  color: var(--tc-text-low);
  cursor: pointer;
  font: inherit;
  font-size: var(--tc-type-footer-link-size);
  font-weight: var(--tc-type-footer-link-weight);
  line-height: var(--tc-type-footer-link-line);
  text-decoration: none;
  transition:
    color 220ms var(--tc-ease-standard),
    transform 220ms var(--tc-ease-standard);
}

.footer-links a::after,
.footer-links button::after {
  content: none;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-links button:hover,
.footer-links button:focus-visible {
  color: var(--tc-text-high);
  outline: 0;
  transform: translateX(1px);
}

.footer-rule {
  height: 1px;
  margin-top: clamp(var(--tc-space-7), 2.2vh, var(--tc-space-12));
}

.footer-bottom {
  gap: var(--tc-space-9);
  margin-top: var(--tc-space-6);
}

.footer-logo {
  width: max-content;
  color: var(--tc-text-strong);
  font-size: var(--tc-type-footer-logo-size);
  font-weight: var(--tc-type-footer-logo-weight);
  line-height: var(--tc-type-footer-logo-line);
  text-decoration: none;
  transition: color 220ms var(--tc-ease-standard);
}

.footer-logo:hover,
.footer-logo:focus-visible {
  color: var(--tc-text-bright);
  outline: 0;
}

.footer-bottom p {
  align-items: center;
  justify-content: flex-end;
  gap: var(--tc-space-3);
  margin: 0;
  font-size: var(--tc-type-footer-meta-size);
  font-weight: var(--tc-type-footer-meta-weight);
  line-height: var(--tc-type-footer-meta-line);
  text-align: right;
}

@media (max-width: 980px) {

  .card-actions {
    gap: clamp(var(--tc-space-5), 1.6vw, var(--tc-space-8));
  }

  .action-link {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.4375rem;
    margin: -0.25rem;
  }

  .preview-card:not(.is-touch-preview):not(.is-editor-armed) .card-actions .action-label {
    display: none;
  }

  .preview-live-editor {
    gap: 0.4375rem;
    min-height: 2.875rem;
    padding: 0 1.125rem;
    font-size: var(--tc-type-gallery-live-editor-size);
  }

  .preview-live-editor .editor-frame-overlay {
    inset: -3px;
  }

  .preview-live-editor .action-icon {
    width: 1rem;
    height: 1rem;
  }

  .toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--tc-gallery-toolbar-gap);
    margin: var(--tc-gallery-toolbar-gap) 0 0;
  }

  .search {
    flex: 0 0 100%;
    width: 100%;
  }

  .style-filter-pills {
    flex: 0 0 100%;
    width: 100%;
  }

  .gallery {
    grid-template-columns: var(--tc-index-gallery-columns-mobile);
  }

  .footer-shell {
    width: min(calc(100vw - (var(--tc-page-pad) * 2)), var(--tc-gallery-footer-shell-max-width-mobile));
  }

  .footer-panel {
    grid-template-columns: var(--tc-gallery-footer-panel-columns-mobile);
    gap: var(--tc-gallery-footer-panel-gap-mobile);
  }

  .footer-brand p {
    max-width: var(--tc-gallery-footer-brand-copy-max-width-mobile);
  }

  .footer-links {
    grid-template-columns: var(--tc-gallery-footer-links-columns);
    gap: var(--tc-gallery-footer-links-gap-tablet);
  }
}

body.mobile-keyboard-open .inline-editor-mount .editor-preview {
  border-bottom-color: var(--tc-border-soft);
}

.editor-modal-preparing-surface {
  background: var(--tc-panel-bg);
}

.site-footer {
  background: var(--tc-bg-app);
}

.footer-panel {
  border-color: var(--tc-card-border);
  background: var(--tc-card-bg);
}

.footer-brand p,
.footer-links a,
.footer-links button {
  color: var(--tc-text-disabled);
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-links button:hover,
.footer-links button:focus-visible,
.footer-logo:hover,
.footer-logo:focus-visible {
  color: var(--tc-text-main);
}

.footer-rule {
  background: var(--tc-border-soft);
}

.footer-bottom p {
  color: var(--tc-text-disabled);
}

@media (max-width: 760px), (max-width: 900px) and (hover: none) and (pointer: coarse) {
  .editor-modal-header {
    background: var(--tc-panel-bg);
  }
}
}

/* source: shared/styles/features/gallery/gallery-responsive.css */
@layer mobile {
@media (max-width: 760px) {
  :root {
    --tc-gallery-gap: var(--tc-index-gallery-gap-mobile);
    --tc-page-pad: var(--tc-index-page-pad-mobile);
    --tc-gallery-toolbar-gap: var(--tc-index-gallery-toolbar-gap-mobile);
    --tc-styles-anchor-gap: var(--tc-index-styles-anchor-gap-mobile);
    --tc-section-anchor-gap: var(--tc-index-section-anchor-gap-mobile);
    --tc-gallery-toolbar-mask-bottom: var(--tc-index-gallery-toolbar-mask-bottom-mobile);
    --card-frame-inset: var(--tc-index-card-frame-inset-mobile);
    --tc-gallery-top-clearance: var(--tc-index-gallery-top-clearance-mobile);
    --tc-gallery-toolbar-pinned-mask-bottom: var(--tc-index-gallery-toolbar-pinned-mask-bottom-mobile);
    --gallery-visual-gap: var(--tc-index-gallery-visual-gap-mobile);
    --gallery-hover-clearance: var(--tc-index-gallery-hover-clearance-mobile);
    --tc-scroll-rail-width: var(--tc-index-gallery-scroll-rail-width-mobile);
    --tc-scroll-rail-right: var(--tc-index-gallery-scroll-rail-right-mobile);
    --tc-gallery-mobile-search-input-font: var(--tc-type-gallery-search-input-size);
    --tc-gallery-mobile-search-count-font: var(--tc-type-gallery-search-count-size);
  }

  .toolbar {
    position: relative;
    top: auto;
    gap: var(--tc-gallery-toolbar-gap);
    margin: var(--tc-gallery-toolbar-gap) 0 0;
    transform: none;
    will-change: auto;
  }

  .search {
    flex-basis: 100%;
    width: 100%;
    height: var(--tc-field-height-lg);
    border-radius: var(--tc-radius-chip);
  }

  .search-icon {
    left: var(--tc-gallery-search-icon-left-mobile);
    width: var(--tc-gallery-search-icon-size-mobile);
    height: var(--tc-gallery-search-icon-size-mobile);
    transform: translateY(-50%);
  }

  .search-icon circle,
  .search-icon path {
    stroke-width: var(--tc-gallery-search-icon-stroke-mobile);
  }

  .search input,
  #preview-search {
    position: static;
    top: auto;
    width: 100%;
    height: 100%;
    padding: var(--tc-gallery-search-input-padding-mobile);
    font-size: var(--tc-gallery-mobile-search-input-font);
    font-weight: var(--tc-type-gallery-search-input-weight);
    line-height: 1;
    transform: none;
    transform-origin: center;
  }

  .search-count {
    right: var(--tc-gallery-search-count-right-mobile);
    width: var(--tc-gallery-search-count-max-width-mobile);
    max-width: var(--tc-gallery-search-count-max-width-mobile);
    font-size: var(--tc-gallery-mobile-search-count-font);
    font-weight: var(--tc-type-gallery-search-count-weight);
  }

  .search-clear {
    right: var(--tc-gallery-search-clear-right-mobile);
    width: var(--tc-gallery-search-clear-width);
    height: var(--tc-field-height-sm);
  }

  .style-filter-pills {
    width: 100%;
    max-width: none;
  }

  .preview-card > .editor-frame-overlay--card {
    inset: -3px;
  }

  .preview-card::after {
    inset: -8px;
  }

  .gallery {
    grid-template-columns: var(--tc-index-gallery-columns-mobile);
    padding-bottom: var(--tc-index-gallery-padding-bottom-mobile);
  }

  .gallery-load-more {
    padding: var(--tc-index-gallery-load-more-padding-mobile);
    gap: var(--tc-index-gallery-load-more-gap-mobile);
  }

  .gallery-load-more__actions {
    width: 100%;
    grid-template-columns: var(--tc-index-gallery-load-actions-columns-mobile);
    column-gap: var(--tc-index-gallery-load-actions-column-gap-mobile);
    row-gap: 0;
    padding: var(--tc-index-gallery-load-actions-padding-mobile);
    border-radius: var(--tc-radius-none);
    background: var(--tc-color-transparent);
  }

  .gallery-load-more__main {
    width: 100%;
    min-width: 0;
  }

  .gallery-load-more__button {
    width: 100%;
    min-width: 0;
  }

  .gallery-load-more__hint {
    max-width: 18rem;
    font-size: var(--tc-type-gallery-load-hint-size);
    line-height: var(--tc-type-gallery-load-hint-line);
  }

  .styles-pricing-break {
    height: 48px;
  }

  .card-footer {
    min-height: var(--tc-gallery-card-footer-height-mobile);
    padding: var(--tc-gallery-card-footer-padding-mobile);
    gap: var(--tc-gallery-card-footer-gap-mobile);
  }

  .card-actions {
    gap: var(--tc-gallery-card-actions-gap-mobile);
    min-height: var(--tc-gallery-card-actions-height-mobile);
  }

  .action-link {
    min-width: var(--tc-gallery-card-actions-height-mobile);
    min-height: var(--tc-gallery-card-actions-height-mobile);
    padding: var(--tc-gallery-card-action-padding-mobile);
    margin: var(--tc-gallery-card-action-margin-mobile);
  }

  .card-actions .action-icon {
    width: var(--tc-gallery-card-action-icon-size-mobile);
    height: var(--tc-gallery-card-action-icon-size-mobile);
    stroke-width: var(--tc-gallery-card-action-icon-stroke-mobile);
  }

  .card-title {
    font-size: var(--tc-type-gallery-card-title-size);
  }

  .preview-card:not(.is-touch-preview):not(.is-editor-armed) .card-actions .action-label {
    display: none;
  }

  .editor-modal {
    width: calc(100vw - 4px);
    height: calc(100dvh - 4px);
    --editor-mobile-inset: 0.625rem;
  }

  .editor-modal-header {
    display: grid;
    grid-template-columns: minmax(8.75rem, 1fr) auto;
    align-items: center;
    gap: clamp(0.375rem, 1.8vw, 0.625rem);
    min-height: 4.125rem;
    padding: 0.625rem var(--editor-mobile-inset);
    margin-bottom: clamp(1.75rem, 5.5vw, 2.5rem);
    border: 0;
    border-radius: var(--tc-radius-sm);
    background: var(--tc-modal-header);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--tc-editor-group-shadow);
  }

  .editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] {
    width: 100%;
    margin-bottom: clamp(1.75rem, 5.5vw, 2.5rem);
    grid-template-columns: minmax(0, 1fr) max-content;
    overflow: visible;
  }

  .editor-modal-title-block {
    min-width: 0;
    gap: 0;
  }

  .modal-style-field {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    overflow: hidden;
  }

  .editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field {
    max-width: min(100%, calc(100vw - 12.25rem));
  }

  .editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .editor-modal-actions {
    min-width: max-content;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-aspect-toggle {
    display: none;
  }

  .editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] #checkerModeToggle,
  .editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] [data-editor-close] {
    flex: 0 0 auto;
  }

  .editor-modal-frame > .editor-modal-header.editor-modal-header--chrome {
    display: none;
  }

  .editor-modal-actions {
    min-width: max-content;
    gap: clamp(0.5rem, 2.2vw, 0.75rem);
  }

  .modal-aspect-toggle {
    display: grid;
    width: 4.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tc-space-hairline);
    padding: 0;
    border: 0;
    border-radius: var(--tc-radius-sm);
    background: var(--tc-color-transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .modal-aspect-toggle span {
    min-height: 1.5rem;
    display: grid;
    place-items: center;
    padding: 0 0.5rem;
    font-size: var(--tc-type-segmented-control-size);
  }

  .modal-aspect-toggle label:first-child span {
    border-radius: var(--tc-radius-sm) 0 0 var(--tc-radius-sm);
  }

  .modal-aspect-toggle label:last-child span {
    border-radius: 0 var(--tc-radius-sm) var(--tc-radius-sm) 0;
  }

  #editor-frame,
  .inline-editor-mount {
    margin-top: 0;
  }

  .preview-live-editor {
    min-height: 2.75rem;
    padding: 0 1rem;
    font-size: var(--tc-type-gallery-live-editor-size);
  }

  .preview-live-editor .action-icon {
    width: 1rem;
    height: 1rem;
  }

  .site-footer {
    padding: var(--tc-space-9) 0 var(--tc-space-6);
  }

  .footer-shell {
    width: min(calc(100vw - (var(--tc-page-pad) * 2)), 420px);
  }

  .footer-panel {
    grid-template-columns: 1fr;
    gap: var(--tc-space-7);
    padding: var(--tc-space-7);
  }

  .footer-brand {
    gap: var(--tc-space-5-5);
  }

  .footer-brand p {
    max-width: none;
    font-size: var(--tc-type-footer-body-size);
    line-height: var(--tc-type-footer-body-line);
  }

  .footer-stats {
    gap: var(--tc-space-3-5);
  }

  .footer-stats span {
    min-height: var(--tc-gallery-footer-stat-min-height-mobile);
    justify-content: flex-start;
    padding: 0 var(--tc-space-3-5);
    font-size: var(--tc-type-footer-stat-size);
    text-align: left;
  }

  .footer-links {
    grid-template-columns: var(--tc-gallery-footer-links-columns-mobile);
    gap: var(--tc-gallery-footer-links-gap-mobile);
  }

  .footer-links div {
    min-width: 0;
    gap: var(--tc-space-3-5);
  }

  .footer-links span:first-child {
    font-size: var(--tc-type-footer-heading-size);
  }

  .footer-links a {
    width: auto;
    font-size: var(--tc-type-footer-link-size);
    line-height: var(--tc-type-footer-link-line);
    overflow-wrap: anywhere;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tc-space-3);
    margin-top: var(--tc-space-5);
  }

  .footer-logo {
    font-size: var(--tc-type-footer-logo-size);
  }

  .footer-bottom p {
    max-width: none;
    font-size: var(--tc-type-footer-meta-size);
    justify-content: flex-start;
    text-align: left;
  }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .preview-shell {
    border-color: var(--tc-color-transparent);
    background: var(--tc-card-box-bg);
  }

  .preview-card:hover .preview-shell,
  .preview-card:focus-within .preview-shell,
  .preview-card.is-touch-preview .preview-shell {
    border-color: var(--tc-color-transparent);
    background: var(--tc-card-box-bg-hover);
  }

  .card-footer {
    border-top-color: var(--tc-color-transparent);
    background: var(--tc-card-box-bg);
  }

  .editor-modal-header {
    border-color: var(--tc-color-transparent);
    background: var(--tc-panel-bg);
    box-shadow: var(--tc-shadow-none);
  }

  .modal-aspect-toggle span {
    background: var(--tc-surface-control);
    color: var(--tc-control-text-muted);
  }

  .modal-aspect-toggle input:checked + span {
    background: var(--tc-surface-control-active);
    color: var(--tc-control-text-hover);
  }

  
}

@media (max-width: 370px) {
  .search {
    height: 35px;
  }

  .search input,
  #preview-search {
    padding-left: var(--tc-space-16);
    padding-right: 70px;
  }

  .search-count {
    width: 46px;
    max-width: 46px;
  }

  .search-clear {
    right: 48px;
    width: var(--tc-icon-size-2xl);
    height: var(--tc-icon-size-2xl);
  }

}

@media (max-width: 330px) {
  .search {
    height: 35px;
  }

  .search input,
  #preview-search {
    padding-left: 30px;
    padding-right: 66px;
  }

  .search-icon {
    left: 12px;
  }

  .search-clear {
    right: 44px;
  }

}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  html,
  body {
    overflow-x: clip;
  }
}

@media (max-width: 760px), (max-width: 900px) and (hover: none) and (pointer: coarse) {
  :root {
    --tc-styles-anchor-gap: var(--tc-index-styles-anchor-gap-mobile);
    --tc-section-anchor-gap: var(--tc-index-section-anchor-gap-mobile);
  }
}

/* Compact viewports: the preview is fluid, so aspect controls would only lie to
   the user. Width-only — touch capability must not hide the toggle on desktop. */
@media (max-width: 900px) {
  .inline-editor-mount .editor-modal-actions .modal-aspect-toggle {
    display: none;
  }
}

/* Gallery warming is intentionally invisible. A click opens immediately,
   and any remaining progress belongs to the editor modal. */

/* Card footer structure is width-driven only. */
@media (max-width: 1100px) {
  .preview-card .card-footer {
    position: relative;
    min-height: var(--tc-gallery-card-footer-height);
    padding: var(--tc-gallery-card-footer-pad-y) var(--tc-gallery-card-footer-pad-x);
    gap: var(--tc-gallery-card-footer-condensed-gap);
  }

  .preview-card .card-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: var(--tc-type-gallery-card-title-line);
    transform: translateY(3px);
  }

  .preview-card .card-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--tc-gallery-card-actions-height-mobile);
    width: auto;
    gap: var(--tc-gallery-card-footer-condensed-gap);
    transform: translateY(3px);
  }

  .preview-card .action-link {
    box-sizing: border-box;
    width: var(--tc-gallery-card-action-mobile-size);
    min-width: var(--tc-gallery-card-action-mobile-size);
    height: var(--tc-gallery-card-action-mobile-size);
    min-height: var(--tc-gallery-card-action-mobile-size);
    padding: var(--tc-space-2-5);
    margin: 0;
  }

  .preview-card:not(.is-touch-preview):not(.is-editor-armed) .action-favorite {
    margin-right: calc(var(--tc-gallery-card-favorite-mobile-offset) * -1);
  }

  .preview-card:is(.is-touch-preview, .is-editor-armed) .card-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center stretch;
    justify-content: stretch;
    align-content: center;
    flex: 0 0 calc(var(--tc-gallery-card-footer-active-height) + var(--tc-gallery-card-shell-edge));
    width: 100%;
    height: calc(var(--tc-gallery-card-footer-active-height) + var(--tc-gallery-card-shell-edge));
    min-height: calc(var(--tc-gallery-card-footer-active-height) + var(--tc-gallery-card-shell-edge));
    margin-bottom: calc(var(--tc-gallery-card-shell-edge) * -1);
    padding: var(--tc-gallery-card-footer-pad-y) var(--tc-gallery-card-footer-active-pad-x);
    gap: 0;
    background: var(--tc-color-transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .preview-card:is(.is-touch-preview, .is-editor-armed) .card-title {
    display: none;
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    visibility: hidden;
    transform: none;
  }

  .preview-card:is(.is-touch-preview, .is-editor-armed) .card-actions {
    --tc-gallery-editor-button-height: var(--tc-gallery-card-action-mobile-size);
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: var(--tc-gallery-editor-button-height);
    min-height: var(--tc-gallery-editor-button-height);
    align-self: center;
    justify-self: stretch;
    transform: none;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .preview-card:is(.is-touch-preview, .is-editor-armed) .action-favorite {
    display: none;
  }

  .preview-card:is(.is-touch-preview, .is-editor-armed) .action-open-editor {
    --tc-gallery-editor-button-height: var(--tc-gallery-card-action-mobile-size);
    --tc-gallery-editor-button-width: 100%;
    --tc-gallery-editor-button-border: var(--tc-button-border);
    --tc-gallery-editor-button-bg: var(--tc-button-bg);
    --tc-gallery-editor-button-text: var(--tc-button-text-hover);
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    z-index: 6;
    display: inline-flex;
    flex: 1 1 100%;
    width: 100%;
    height: var(--tc-gallery-editor-button-height);
    min-width: 0;
    min-height: var(--tc-gallery-editor-button-height);
    max-width: 100%;
    margin: 0;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .preview-card:is(.is-touch-preview, .is-editor-armed) .action-open-editor .action-icon {
    flex: 0 0 auto;
    margin: 0;
    color: var(--tc-accent-main);
    opacity: 1;
    transform: none;
    filter: none;
  }

  .preview-card:is(.is-touch-preview, .is-editor-armed) .action-open-editor .action-label {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    line-height: 1;
    opacity: 1;
    transform: none;
  }

  .preview-card:is(.is-touch-preview, .is-editor-armed) .action-open-editor .action-ready-overlay {
    display: none;
  }

}
}

/* source: shared/styles/features/editor-controls/compact-shell.css */
@layer features {
/* Compact editor controls.
   This file is the single compact-control layout source. */

body[data-editor-compact-controls="on"] .editor-dialog {
  container-type: inline-size;
  --compact-square-size: var(--tc-compact-square-size);
  --compact-control-width: var(--tc-compact-control-width);
  --compact-control-height: var(--tc-compact-control-height);
  --compact-category-inset: var(--tc-compact-category-inset);
  --compact-panel-inset: var(--compact-category-inset);
  --editor-control-gap: var(--tc-compact-control-gap);
  --compact-rail-gap: var(--tc-compact-rail-gap);
  --compact-label-space: var(--tc-compact-label-space);
  --compact-category-label-space: var(--compact-label-space);
  --compact-category-pad-x: calc(var(--compact-category-inset) + var(--compact-category-label-space));
  --compact-category-extra: calc(var(--compact-control-width) * 0.18);
  --compact-category-width-extra: calc(var(--tc-compact-category-size-extra) + var(--tc-compact-category-width-extra));
  --compact-category-height-extra: calc(var(--tc-compact-category-size-extra) + var(--tc-compact-category-height-extra));
  --compact-category-content-shift-y: var(--tc-compact-category-content-shift-y);
  --compact-category-pad-top: var(--compact-category-inset);
  --compact-category-pad-bottom: var(--compact-category-inset);
  --compact-panel-pad-y: var(--compact-category-inset);
  --compact-font-base: var(--tc-compact-font-base);
  --compact-font-category: var(--tc-type-compact-control-category-size);
  --compact-font-label: var(--tc-type-compact-control-label-size);
  --compact-font-value: var(--tc-type-compact-control-value-size);
  --compact-font-pill: calc(var(--compact-font-base) * 0.48);
  --compact-font-popup: calc(var(--compact-font-base) * 0.66);
  --compact-font-tab: calc(var(--compact-font-base) * 0.45);
  --editor-floating-stack-gap: var(--tc-editor-floating-stack-gap);
  --editor-floating-controls-gap: var(--editor-floating-stack-gap);
  --editor-floating-tabs-gap: var(--editor-floating-stack-gap);
  --editor-mobile-bottom-gap: var(--editor-floating-stack-gap);
  --editor-tabs-height: var(--tc-editor-tabs-height);
  --compact-glass-surface: var(--tc-editor-ui-glass);
  --compact-glass-surface-soft: var(--tc-editor-ui-glass-soft);
  --compact-glass-surface-muted: var(--tc-editor-ui-glass-muted);
  --compact-glass-line: var(--tc-editor-ui-line);
  --compact-glass-line-strong: var(--tc-editor-ui-line-strong);
  --compact-glass-shadow: var(--tc-editor-group-shadow);
  --compact-category-height: calc(
    var(--compact-control-height)
    + var(--compact-category-label-space)
    + var(--compact-label-space)
    + var(--compact-category-pad-top)
    + var(--compact-category-pad-bottom)
    + var(--compact-category-height-extra)
  );
  --compact-group-one-width: calc(var(--compact-control-width) + (var(--compact-category-pad-x) * 2) + var(--compact-category-width-extra));
  --compact-group-two-width: calc((var(--compact-control-width) * 2) + var(--editor-control-gap) + (var(--compact-category-pad-x) * 2) + var(--compact-category-extra) + var(--compact-category-width-extra));
  --compact-group-three-width: calc((var(--compact-control-width) * 3) + (var(--editor-control-gap) * 2) + (var(--compact-category-pad-x) * 2) + var(--compact-category-extra) + var(--compact-category-width-extra));
  --compact-group-four-width: calc((var(--compact-control-width) * 4) + (var(--editor-control-gap) * 3) + (var(--compact-category-pad-x) * 2) + var(--compact-category-extra) + var(--compact-category-width-extra));
  --compact-deck-width: calc(
    (var(--compact-control-width) * 11)
    + (var(--editor-control-gap) * 7)
    + (var(--compact-category-pad-x) * 8)
    + (var(--compact-category-extra) * 4)
    + (var(--compact-rail-gap) * 3)
    + (var(--compact-category-width-extra) * 4)
  );
  --editor-panel-height: calc(var(--compact-category-height) + (var(--compact-panel-pad-y) * 2) + env(safe-area-inset-bottom));
  --editor-controls-height: var(--editor-panel-height);
  --editor-tab-offset: calc(
    var(--editor-controls-height)
    + var(--editor-tabs-height)
    + var(--editor-floating-controls-gap)
    + var(--editor-floating-tabs-gap)
    + var(--editor-mobile-bottom-gap, 0px)
  );
}


body[data-editor-compact-controls="on"] .editor-window {
  position: relative;
  grid-template-rows: minmax(0, 1fr);
  overflow: visible;
  padding-bottom: 0;
  border-color: var(--tc-color-transparent);
  background: var(--tc-color-transparent);
  box-shadow: none;
}

body.is-embed[data-editor-compact-controls="on"] .editor-window,
body[data-editor-compact-controls="on"] .inline-editor-mount .editor-window {
  grid-template-rows: minmax(0, 1fr);
  overflow: visible;
  padding-bottom: 0;
}

body[data-editor-compact-controls="on"] .editor-preview,
body[data-editor-compact-controls="on"] .editor-dialog .editor-preview {
  --editor-stage-inset: var(--tc-editor-stage-inset);
  padding: var(--editor-stage-inset);
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-panel-radius);
  background: var(--tc-panel-bg);
  background-clip: padding-box;
  box-shadow: none;
  overflow: hidden;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (min-width: 561px) {
  body[data-editor-compact-controls="on"] .editor-dialog {
    --editor-stage-inset: var(--tc-editor-stage-inset);
    width: min(var(--tc-editor-shell-max-width), 100%);
    height: min(var(--tc-editor-shell-max-height), calc(100% - var(--editor-tab-offset)));
  }

  body[data-editor-compact-controls="on"] .editor-window {
    width: 100%;
    height: auto;
    justify-self: center;
  }

  body.editor-ratio-landscape[data-editor-compact-controls="on"] .editor-window {
    container-type: size;
  }

  body.editor-ratio-landscape[data-editor-compact-controls="on"] .editor-preview,
  body.editor-ratio-landscape[data-editor-compact-controls="on"] .editor-dialog .editor-preview {
    container-type: size;
  }

}

@container (min-width: 561px) {
  body.editor-ratio-landscape[data-editor-compact-controls="on"] .editor-preview,
  body.editor-ratio-landscape[data-editor-compact-controls="on"] .editor-dialog .editor-preview {
    width: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    align-self: center;
    justify-self: center;
  }

  body.editor-ratio-landscape[data-editor-compact-controls="on"] .canvas-shell.ratio-landscape,
  body.editor-ratio-landscape[data-editor-compact-controls="on"] .editor-dialog .canvas-shell.ratio-landscape {
    width: min(100%, calc(100cqh * 16 / 9));
    height: min(100%, calc(100cqw * 9 / 16));
    aspect-ratio: 16 / 9;
  }
}


body[data-editor-compact-controls="on"] .editor-access-notice,
body[data-editor-compact-controls="on"] .editor-dialog .editor-access-notice {
  top: clamp(8px, 0.7vw, 12px);
}

body[data-editor-compact-controls="on"] .editor-controls,
.editor-controls.compact-controls {
  container-type: inline-size;
  --compact-square-size: var(--tc-compact-square-size);
  --compact-control-width: var(--tc-compact-control-width);
  --compact-control-height: var(--tc-compact-control-height);
  --compact-category-inset: var(--tc-compact-category-inset);
  --compact-panel-inset: var(--compact-category-inset);
  --editor-control-gap: var(--tc-compact-control-gap);
  --compact-rail-gap: var(--tc-compact-rail-gap);
  --compact-label-space: var(--tc-compact-label-space);
  --compact-category-label-space: var(--compact-label-space);
  --compact-category-pad-x: calc(var(--compact-category-inset) + var(--compact-category-label-space));
  --compact-category-extra: calc(var(--compact-control-width) * 0.18);
  --compact-category-width-extra: calc(var(--tc-compact-category-size-extra) + var(--tc-compact-category-width-extra));
  --compact-category-height-extra: calc(var(--tc-compact-category-size-extra) + var(--tc-compact-category-height-extra));
  --compact-category-content-shift-y: var(--tc-compact-category-content-shift-y);
  --compact-category-pad-top: var(--compact-category-inset);
  --compact-category-pad-bottom: var(--compact-category-inset);
  --compact-panel-pad-y: var(--compact-category-inset);
  --compact-font-base: var(--tc-compact-font-base);
  --compact-font-category: var(--tc-type-compact-control-category-size);
  --compact-font-label: var(--tc-type-compact-control-label-size);
  --compact-font-value: var(--tc-type-compact-control-value-size);
  --compact-font-pill: calc(var(--compact-font-base) * 0.48);
  --compact-font-popup: calc(var(--compact-font-base) * 0.66);
  --compact-font-tab: calc(var(--compact-font-base) * 0.45);
  --editor-floating-stack-gap: clamp(16px, 1.2cqw, 20px);
  --editor-floating-controls-gap: var(--editor-floating-stack-gap);
  --editor-floating-tabs-gap: var(--editor-floating-stack-gap);
  --editor-mobile-bottom-gap: var(--editor-floating-stack-gap);
  --compact-glass-surface: var(--tc-editor-ui-glass);
  --compact-glass-surface-soft: var(--tc-editor-ui-glass-soft);
  --compact-glass-surface-muted: var(--tc-editor-ui-glass-muted);
  --compact-glass-line: var(--tc-editor-ui-line);
  --compact-glass-line-strong: var(--tc-editor-ui-line-strong);
  --compact-glass-shadow: var(--tc-editor-group-shadow);
  --compact-category-height: calc(
    var(--compact-control-height)
    + var(--compact-category-label-space)
    + var(--compact-label-space)
    + var(--compact-category-pad-top)
    + var(--compact-category-pad-bottom)
    + var(--compact-category-height-extra)
  );
  --compact-group-one-width: calc(var(--compact-control-width) + (var(--compact-category-pad-x) * 2) + var(--compact-category-width-extra));
  --compact-group-two-width: calc((var(--compact-control-width) * 2) + var(--editor-control-gap) + (var(--compact-category-pad-x) * 2) + var(--compact-category-extra) + var(--compact-category-width-extra));
  --compact-group-three-width: calc((var(--compact-control-width) * 3) + (var(--editor-control-gap) * 2) + (var(--compact-category-pad-x) * 2) + var(--compact-category-extra) + var(--compact-category-width-extra));
  --compact-group-four-width: calc((var(--compact-control-width) * 4) + (var(--editor-control-gap) * 3) + (var(--compact-category-pad-x) * 2) + var(--compact-category-extra) + var(--compact-category-width-extra));
  --compact-deck-width: calc(
    (var(--compact-control-width) * 11)
    + (var(--editor-control-gap) * 7)
    + (var(--compact-category-pad-x) * 8)
    + (var(--compact-category-extra) * 4)
    + (var(--compact-rail-gap) * 3)
    + (var(--compact-category-width-extra) * 4)
  );
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * (var(--editor-controls-height) + var(--editor-floating-controls-gap)));
  z-index: 90;
  box-sizing: border-box;
  height: var(--editor-controls-height);
  min-height: var(--editor-controls-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  overflow: visible;
  padding:
    var(--compact-panel-inset)
    var(--compact-panel-inset)
    calc(var(--compact-panel-inset) + env(safe-area-inset-bottom));
  border-top: 0;
  background: var(--tc-color-transparent);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: var(--compact-font-base);
  line-height: 1;
}

body[data-editor-compact-controls="on"] .inline-editor-mount .editor-controls,
.inline-editor-mount .editor-controls.compact-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * (var(--editor-controls-height) + var(--editor-floating-controls-gap)));
  z-index: 90;
  height: var(--editor-controls-height);
  min-height: var(--editor-controls-height);
}

body[data-editor-compact-controls="on"] .editor-controls,
.editor-controls.compact-controls,
body[data-editor-compact-controls="on"] .inline-editor-mount .editor-controls,
.inline-editor-mount .editor-controls.compact-controls {
  left: 50%;
  right: auto;
  width: 100vw;
  max-width: 100vw;
  padding-inline: 0;
  transform: translateX(-50%);
}

body[data-editor-compact-controls="on"] .editor-tabs,
body[data-editor-compact-controls="on"] .editor-dialog .editor-tabs {
  bottom: calc(
    -1 * (
      var(--editor-controls-height)
      + var(--editor-floating-controls-gap)
      + var(--editor-floating-tabs-gap)
      + var(--editor-tabs-height)
    )
  );
  z-index: 92;
  height: var(--editor-tabs-height);
}

body[data-editor-compact-controls="on"] .toolbar-row,
body[data-editor-compact-controls="on"] .editor-dialog .toolbar-row {
  height: 100%;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category.is-disabled,
.editor-controls.compact-controls .compact-category.is-disabled {
  opacity: 0.42;
  filter: var(--tc-filter-control-disabled);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category.is-disabled button,
body[data-editor-compact-controls="on"] .editor-controls .compact-category.is-disabled input,
body[data-editor-compact-controls="on"] .editor-controls .compact-category.is-disabled select,
.editor-controls.compact-controls .compact-category.is-disabled button,
.editor-controls.compact-controls .compact-category.is-disabled input,
.editor-controls.compact-controls .compact-category.is-disabled select {
  cursor: not-allowed;
}

body[data-editor-compact-controls="on"] .editor-controls .panel-stack,
.editor-controls.compact-controls .panel-stack,
body[data-editor-compact-controls="on"] .editor-controls .control-panel,
.editor-controls.compact-controls .control-panel,
body[data-editor-compact-controls="on"] .editor-controls .adjustment-panel,
.editor-controls.compact-controls .adjustment-panel,
body[data-editor-compact-controls="on"] .editor-controls .animation-panel,
.editor-controls.compact-controls .animation-panel,
body[data-editor-compact-controls="on"] .editor-controls .quick-panel,
.editor-controls.compact-controls .quick-panel {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  justify-self: stretch;
  place-self: center stretch;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  align-items: center;
  grid-template-rows: minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  background: var(--tc-color-transparent);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body[data-editor-compact-controls="on"] .editor-controls .control-panel:not([hidden]),
.editor-controls.compact-controls .control-panel:not([hidden]),
body[data-editor-compact-controls="on"] .editor-controls .adjustment-panel:not([hidden]),
.editor-controls.compact-controls .adjustment-panel:not([hidden]),
body[data-editor-compact-controls="on"] .editor-controls .animation-panel:not([hidden]),
.editor-controls.compact-controls .animation-panel:not([hidden]),
body[data-editor-compact-controls="on"] .editor-controls .utility-panel:not([hidden]),
.editor-controls.compact-controls .utility-panel:not([hidden]),
body[data-editor-compact-controls="on"] .editor-controls .quick-panel:not([hidden]),
.editor-controls.compact-controls .quick-panel:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  place-items: center;
  padding: 0;
  overflow: visible;
}

body[data-editor-compact-controls="on"] .editor-controls .control-column-primary,
.editor-controls.compact-controls .control-column-primary,
body[data-editor-compact-controls="on"] .editor-controls .transform-size-cluster,
.editor-controls.compact-controls .transform-size-cluster,
body[data-editor-compact-controls="on"] .editor-controls .transform-position-cluster,
.editor-controls.compact-controls .transform-position-cluster {
  display: none;
}

body[data-editor-compact-controls="on"] .editor-controls .control-column-transform,
.editor-controls.compact-controls .control-column-transform {
  width: 100%;
  min-width: 0;
  height: var(--compact-category-height);
  min-height: var(--compact-category-height);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  overflow: visible;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-transform-deck,
.editor-controls.compact-controls .compact-transform-deck {
  width: max-content;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  margin-inline: 0;
  justify-self: center;
  place-self: center;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--compact-rail-gap);
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 12px;
  scroll-snap-type: none;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-transform-deck.is-compact-deck-centered,
.editor-controls.compact-controls .compact-transform-deck.is-compact-deck-centered {
  width: max-content;
  max-width: 100%;
  justify-content: flex-start;
  overflow-x: hidden;
  padding-inline: 0;
  scroll-padding-inline: 0;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-transform-deck.is-compact-deck-scrollable,
.editor-controls.compact-controls .compact-transform-deck.is-compact-deck-scrollable {
  width: 100%;
  justify-content: start;
  overflow-x: auto;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-transform-deck::-webkit-scrollbar,
.editor-controls.compact-controls .compact-transform-deck::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category,
.editor-controls.compact-controls .compact-category {
  position: relative;
  min-width: 0;
  height: auto;
  min-height: var(--compact-category-height);
  max-height: none;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: center;
  gap: var(--editor-control-gap);
  box-sizing: border-box;
  scroll-snap-align: none;
  padding:
    calc(var(--compact-category-label-space) + var(--compact-category-pad-top))
    var(--compact-category-pad-x)
    calc(var(--compact-label-space) + var(--compact-category-pad-bottom) + var(--compact-category-height-extra));
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-radius-md);
  background: var(--compact-glass-surface);
  box-shadow: none;
  /* Dynamic group width: derived from the live control count (set in JS via
     --compact-group-count / --compact-group-extra) so adding or removing a
     control automatically grows or shrinks the group. */
  --compact-group-count: 1;
  --compact-group-extra: 0;
  --compact-group-width: calc(
    (var(--compact-control-width) * var(--compact-group-count))
    + (var(--editor-control-gap) * (var(--compact-group-count) - 1))
    + (var(--compact-category-pad-x) * 2)
    + (var(--compact-category-extra) * var(--compact-group-extra))
    + var(--compact-category-width-extra)
  );
  --compact-group-min-width: calc(var(--compact-control-width) + (var(--compact-category-pad-x) * 2) + var(--compact-category-width-extra));
  flex-basis: auto;
  width: max-content;
  min-width: var(--compact-group-min-width);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category > :not([hidden]):not(.compact-native-select-field),
.editor-controls.compact-controls .compact-category > :not([hidden]):not(.compact-native-select-field) {
  translate: 0 var(--compact-category-content-shift-y);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category > .variation-control,
.editor-controls.compact-controls .compact-category > .variation-control {
  width: max-content;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--editor-control-gap);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category > .variation-control > :not([hidden]),
.editor-controls.compact-controls .compact-category > .variation-control > :not([hidden]) {
  flex: 0 0 auto;
}

body[data-editor-compact-controls="on"] .editor-controls .control-panel[hidden],
.editor-controls.compact-controls .control-panel[hidden],
body[data-editor-compact-controls="on"] .editor-controls .compact-category[hidden],
.editor-controls.compact-controls .compact-category[hidden],
body[data-editor-compact-controls="on"] .editor-controls [hidden],
.editor-controls.compact-controls [hidden] {
  display: none;
}

body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button {
  border-color: var(--tc-color-transparent);
  background: var(--compact-glass-surface);
  color: var(--tc-control-text);
  box-shadow: none;
}

body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button:hover,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button:focus-visible,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button:hover,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button:focus-visible,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button:hover,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button: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);
  color: var(--tc-control-text-hover);
}

}

/* source: shared/styles/features/editor-controls/compact-transform-deck.css */
@layer features {
body[data-editor-compact-controls="on"] .editor-controls .compact-category-mixed-style,
.editor-controls.compact-controls .compact-category-mixed-style,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-animation-timing,
.editor-controls.compact-controls .compact-category-animation-timing,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-animation-shuffle,
.editor-controls.compact-controls .compact-category-animation-shuffle,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-export-settings,
.editor-controls.compact-controls .compact-category-export-settings,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-export-action,
.editor-controls.compact-controls .compact-category-export-action,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing,
.editor-controls.compact-controls .compact-category-spacing,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-random,
.editor-controls.compact-controls .compact-category-random,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-animation-motion,
.editor-controls.compact-controls .compact-category-animation-motion,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-quick-animation,
.editor-controls.compact-controls .compact-category-quick-animation,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-quick-export,
.editor-controls.compact-controls .compact-category-quick-export {
  justify-content: flex-start;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category::before,
.editor-controls.compact-controls .compact-category::before {
  content: attr(data-compact-group-label);
  position: absolute;
  top: calc(var(--compact-category-inset) + 1px);
  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-control-category-weight);
  line-height: var(--tc-type-compact-control-category-line);
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
  pointer-events: none;
}

/* Control groups size to their visible controls, so the group width adjusts
   automatically when a control is added, removed, shown, or hidden. The
   --compact-group-*-width vars remain as a minimum so single-control groups
   keep a comfortable footprint. */
body[data-editor-compact-controls="on"] .editor-controls .compact-category-mixed-style,
.editor-controls.compact-controls .compact-category-mixed-style,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-animation-timing,
.editor-controls.compact-controls .compact-category-animation-timing,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-animation-shuffle,
.editor-controls.compact-controls .compact-category-animation-shuffle,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-export-settings,
.editor-controls.compact-controls .compact-category-export-settings,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-quick-animation,
.editor-controls.compact-controls .compact-category-quick-animation,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-quick-export,
.editor-controls.compact-controls .compact-category-quick-export,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-export-action,
.editor-controls.compact-controls .compact-category-export-action,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing,
.editor-controls.compact-controls .compact-category-spacing,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-random,
.editor-controls.compact-controls .compact-category-random,
body[data-editor-compact-controls="on"] .editor-controls .compact-category-animation-motion,
.editor-controls.compact-controls .compact-category-animation-motion {
  flex-basis: auto;
  width: max-content;
  min-width: var(--compact-group-min-width, var(--compact-group-one-width));
}

body[data-editor-compact-controls="on"] .editor-controls .compact-native-select-field,
.editor-controls.compact-controls .compact-native-select-field {
  display: none;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-spacing,
.editor-controls.compact-controls .compact-category-spacing {
  order: 2;
}

/* Text Collage places its Shuffle group beside Text Format. Keep the shared
   compact deck's visual order aligned with that source order for any consumer
   that opts into the same group. */
body[data-editor-compact-controls="on"] .editor-controls .compact-category-animation-shuffle,
.editor-controls.compact-controls .compact-category-animation-shuffle {
  order: 3;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-mixed-style,
.editor-controls.compact-controls .compact-category-mixed-style {
  order: 0;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-random,
.editor-controls.compact-controls .compact-category-random {
  order: 4;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-test-jitter,
.editor-controls.compact-controls .compact-category-test-jitter {
  order: 5;
}

.app-shell-color-input {
  position: fixed;
  width: 1px;
  height: 1px;
  min-width: 1px;
  min-height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-random .variation-control,
.editor-controls.compact-controls .compact-category-random .variation-control {
  position: relative;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-category-random .variation-control > *,
.editor-controls.compact-controls .compact-category-random .variation-control > * {
  position: relative;
  z-index: 2;
}

body[data-editor-compact-controls="on"] .editor-controls .control-icon--font svg,
.editor-controls.compact-controls .control-icon--font svg {
  transform: translate(2.2px, 1.4px);
}

body[data-editor-compact-controls="on"] .editor-controls .control-icon--font svg path,
.editor-controls.compact-controls .control-icon--font svg path {
  fill: currentColor;
  stroke: none;
}


/* Fields relocated into a popup are hidden here but kept in the DOM so they keep
   driving rendering; the group reclaims their slot via countCompactGroupSlots. */
body[data-editor-compact-controls="on"] .editor-controls .compact-square-field[hidden],
.editor-controls.compact-controls .compact-square-field[hidden] {
  display: none;
}


body[data-editor-compact-controls="on"] .editor-controls [data-compact-menu-select]::before,
.editor-controls.compact-controls [data-compact-menu-select]::before {
  display: none;
  content: none;
}


body[data-editor-compact-controls="on"] .editor-controls .compact-square-field,
.editor-controls.compact-controls .compact-square-field,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-square-field {
  position: relative;
  display: block;
  flex: 0 0 var(--compact-control-width);
  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;
  overflow: visible;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .range-wrap,
.editor-controls.compact-controls .compact-scrub-field .range-wrap,
body[data-editor-compact-controls="on"] .editor-controls .range-wrap.compact-scrub-field,
.editor-controls.compact-controls .range-wrap.compact-scrub-field,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .range-wrap,
.compact-scrub-menu.compact-scrub-menu--vertical .range-wrap.compact-scrub-field {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: visible;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field label:not(.sr-only),
.editor-controls.compact-controls .compact-scrub-field label:not(.sr-only),
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field label:not(.sr-only) {
  position: absolute;
  z-index: 2;
  top: calc(100% + 10px);
  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-compact-scrub-label-color);
  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;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field label.sr-only,
.editor-controls.compact-controls .compact-scrub-field label.sr-only,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field label.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;
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .value-pill,
.editor-controls.compact-controls .compact-scrub-field .value-pill,
body[data-editor-compact-controls="on"] .editor-controls .range-wrap.compact-scrub-field .value-pill,
.editor-controls.compact-controls .range-wrap.compact-scrub-field .value-pill,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .value-pill,
.compact-scrub-menu.compact-scrub-menu--vertical .range-wrap.compact-scrub-field .value-pill {
  display: none;
}


/* The popup state still owns elevation, focus, and menu lifecycle. Its old
   canvas-darkening layer is retained as an explicit future opt-in only: every
   current editor keeps the workspace visible while authoring a control. */
body[data-editor-popup-scrim="on"][data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 39;
  border-radius: inherit;
  background: var(--tc-surface-canvas-scrim-soft);
  opacity: 1;
  pointer-events: none;
  transition: opacity 120ms var(--tc-ease-standard);
}

/* On desktop the gallery and canvas form one split workspace. Keep the gallery
   readable while a compact editor control is open by starting the shared dim
   layer at the canvas column instead of covering the gallery rail. */
@media (min-width: 761px) and (pointer: fine) {
  body.has-open-gallery-select[data-editor-popup-scrim="on"][data-editor-compact-controls="on"]
    .editor-dialog.has-open-compact-menu::after {
    left: calc(
      var(--tc-open-gallery-menu-width, 0px)
      + (var(--tc-open-gallery-gap, 0px) * 2)
    );
  }
}

/* Animator apps that explicitly keep text interactive beside an open gallery
   also keep that shared workspace fully visible while a compact control opens. */
body.has-open-gallery-select[data-animation-tab-text-interaction="allow"][data-editor-compact-controls="on"]
  .editor-dialog.has-open-compact-menu::after {
  content: none;
}

/* Color editing keeps the preview at full fidelity while the shared popup
   state continues to dim the surrounding editor controls. */
body[data-editor-compact-controls="on"] .editor-dialog[data-kp-color-picker-open="true"].has-open-compact-menu::after {
  content: none;
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-tabs [data-panel-tab]:not([aria-selected="true"]),
body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-tabs [data-panel-tab]:not([aria-selected="true"]) {
  opacity: 0.42;
  filter: var(--tc-filter-control-muted);
  transition: opacity 120ms var(--tc-ease-standard), filter 120ms var(--tc-ease-standard);
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls,
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls {
  z-index: 40;
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category.has-expanded-control,
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category.has-expanded-control,
body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls [aria-expanded="true"],
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls [aria-expanded="true"] {
  position: relative;
  z-index: 41;
}
}

/* source: shared/styles/features/editor-controls/compact-menu.css */
@layer features {
body[data-editor-compact-controls="on"] .editor-controls .control-icon,
.editor-controls.compact-controls .control-icon {
  width: var(--tc-icon-size-lg);
  height: var(--tc-icon-size-lg);
  display: inline-grid;
  place-items: center;
}

body[data-editor-compact-controls="on"] .editor-controls .control-icon--reset,
.editor-controls.compact-controls .control-icon--reset {
  width: var(--tc-icon-size-lg);
  height: var(--tc-icon-size-lg);
}

body[data-editor-compact-controls="on"] .editor-controls .control-icon svg,
.editor-controls.compact-controls .control-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

body[data-editor-compact-controls="on"] .editor-controls .control-icon--reset svg,
.editor-controls.compact-controls .control-icon--reset svg {
  stroke-width: 1.55;
}

body[data-editor-compact-controls="on"] .editor-controls .control-icon svg [stroke],
.editor-controls.compact-controls .control-icon svg [stroke] {
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-editor-compact-controls="on"] .editor-controls .control-icon svg [fill="currentColor"],
.editor-controls.compact-controls .control-icon svg [fill="currentColor"] {
  fill: currentColor;
  stroke: none;
}

body[data-editor-compact-controls="on"] .editor-controls .control-icon--variation svg path,
.editor-controls.compact-controls .control-icon--variation svg path,
body[data-editor-compact-controls="on"] .editor-controls .control-icon--letters svg text,
.editor-controls.compact-controls .control-icon--letters svg text,
body[data-editor-compact-controls="on"] .editor-controls .control-icon--scatter svg text,
.editor-controls.compact-controls .control-icon--scatter svg text,
body[data-editor-compact-controls="on"] .editor-controls .control-icon--animation-direction svg path,
.editor-controls.compact-controls .control-icon--animation-direction svg path,
body[data-editor-compact-controls="on"] .editor-controls .control-icon--reset svg path,
.editor-controls.compact-controls .control-icon--reset svg path,
body[data-editor-compact-controls="on"] .preview-stage .preview-reset-button svg path,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button svg path {
  fill: currentColor;
  stroke: none;
}

body[data-editor-compact-controls="on"] .editor-controls .control-icon--animation-direction svg,
.editor-controls.compact-controls .control-icon--animation-direction svg,
body[data-editor-compact-controls="on"] .editor-controls .control-icon--animation-reveal svg,
.editor-controls.compact-controls .control-icon--animation-reveal svg,
body[data-editor-compact-controls="on"] .editor-controls .control-icon--animation-based-on svg,
.editor-controls.compact-controls .control-icon--animation-based-on svg,
body[data-editor-compact-controls="on"] .editor-controls .control-icon--variation svg,
.editor-controls.compact-controls .control-icon--variation svg,
body[data-editor-compact-controls="on"] .editor-controls .control-icon--reset svg,
.editor-controls.compact-controls .control-icon--reset svg {
  transform: scale(0.9);
  transform-origin: center;
}

body[data-editor-compact-controls="on"] .editor-controls .control-icon--export-format svg,
.editor-controls.compact-controls .control-icon--export-format svg {
  transform: scale(1.08);
  transform-origin: center;
}

body[data-editor-compact-controls="on"] .editor-controls .control-icon--animation-play svg path,
.editor-controls.compact-controls .control-icon--animation-play svg path {
  fill: currentColor;
  stroke: none;
}

body[data-editor-compact-controls="on"] .editor-controls .control-icon--stop svg rect,
.editor-controls.compact-controls .control-icon--stop svg rect {
  fill: currentColor;
  stroke: none;
}

body[data-editor-compact-controls="on"] .editor-controls [data-editor-action="play-animation"] [data-animation-stop-icon],
body[data-editor-compact-controls="on"] .editor-controls [data-editor-action="test-jitter"] [data-animation-stop-icon],
.editor-controls.compact-controls [data-editor-action="play-animation"] [data-animation-stop-icon],
.editor-controls.compact-controls [data-editor-action="test-jitter"] [data-animation-stop-icon] {
  display: none;
}

body.is-animation-playing[data-editor-compact-controls="on"] .editor-controls [data-editor-action="play-animation"] [data-animation-play-icon],
body.is-animation-playing[data-editor-compact-controls="on"] .editor-controls [data-editor-action="test-jitter"] [data-animation-play-icon],
body.is-animation-playing .editor-controls.compact-controls [data-editor-action="play-animation"] [data-animation-play-icon],
body.is-animation-playing .editor-controls.compact-controls [data-editor-action="test-jitter"] [data-animation-play-icon] {
  display: none;
}

body.is-animation-playing[data-editor-compact-controls="on"] .editor-controls [data-editor-action="play-animation"] [data-animation-stop-icon],
body.is-animation-playing[data-editor-compact-controls="on"] .editor-controls [data-editor-action="test-jitter"] [data-animation-stop-icon],
body.is-animation-playing .editor-controls.compact-controls [data-editor-action="play-animation"] [data-animation-stop-icon],
body.is-animation-playing .editor-controls.compact-controls [data-editor-action="test-jitter"] [data-animation-stop-icon] {
  display: inline-grid;
}

body[data-editor-compact-controls="on"] .editor-controls .control-cluster,
.editor-controls.compact-controls .control-cluster,
body[data-editor-compact-controls="on"] .editor-controls .field,
.editor-controls.compact-controls .field {
  min-width: 0;
}


body[data-editor-compact-controls="on"] .editor-controls .control-panel[data-panel-tier="advanced"]:not([hidden]),
.editor-controls.compact-controls .control-panel[data-panel-tier="advanced"]:not([hidden]) {
  display: grid;
}

body[data-editor-compact-controls="on"] .editor-controls .control-panel[hidden],
.editor-controls.compact-controls .control-panel[hidden] {
  display: none;
}

body[data-editor-compact-controls="on"] .type-hint,
body[data-editor-compact-controls="on"].is-empty .type-hint,
body[data-editor-compact-controls="on"] .editor-dialog .type-hint {
  bottom: clamp(38px, 5.6dvh, 62px);
}

body[data-editor-compact-controls="on"] .inline-editor-mount .editor-preview,
body[data-editor-compact-controls="on"] .inline-editor-mount .editor-dialog .editor-preview {
  min-height: 0;
}

body[data-editor-compact-controls="on"] .preview-stage,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage {
  --tc-preview-timeline-bottom: clamp(10px, 1.2vw, 16px);
  --tc-preview-reset-top: clamp(10px, 1.2vw, 16px);
  --tc-preview-reset-right: clamp(10px, 1.2vw, 16px);
  --tc-preview-reset-size: clamp(32px, 2.4vw, 38px);
}

body.editor-ratio-portrait[data-editor-compact-controls="on"] .preview-stage,
body.editor-ratio-portrait[data-editor-compact-controls="on"] .editor-dialog .preview-stage {
  --tc-preview-timeline-bottom: clamp(7px, 0.8vw, 10px);
  --tc-preview-reset-top: clamp(7px, 0.8vw, 10px);
  --tc-preview-reset-right: clamp(8px, 1vw, 12px);
  --tc-preview-reset-size: clamp(26px, 2vw, 30px);
}

@media (hover: hover) and (pointer: fine) {
  body.editor-ratio-landscape[data-editor-compact-controls="on"] .preview-stage,
  body.editor-ratio-landscape[data-editor-compact-controls="on"] .editor-dialog .preview-stage {
    --tc-preview-timeline-bottom: clamp(10px, 0.95vw, 14px);
  }
}

body.is-animation-mode:not([data-animation-tab-text-interaction="allow"]):not(.is-animation-playing):not(.is-animation-timeline-scrubbing)[data-editor-compact-controls="on"] .preview-stage::after,
body.is-animation-mode:not([data-animation-tab-text-interaction="allow"]):not(.is-animation-playing):not(.is-animation-timeline-scrubbing)[data-editor-compact-controls="on"] .editor-dialog .preview-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1001;
  border-radius: inherit;
  background: var(--tc-bg-overlay-soft);
  pointer-events: none;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-reset-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button,
body[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button {
  --tc-preview-action-opacity: var(--tc-compact-preview-action-opacity, 0.72);
}

body[data-editor-compact-controls="on"] .preview-stage .preview-reset-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button {
  position: absolute;
  left: auto;
  top: var(--tc-preview-reset-top);
  right: var(--tc-preview-reset-right);
  bottom: auto;
  z-index: 1002;
  width: var(--tc-preview-reset-size);
  min-width: var(--tc-preview-reset-size);
  height: var(--tc-preview-reset-size);
  min-height: var(--tc-preview-reset-size);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-surface-control);
  color: var(--tc-text-muted);
  box-shadow: none;
  transition: opacity 140ms ease, color 140ms ease, background 140ms ease;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button {
  position: absolute;
  left: var(--tc-preview-reset-right);
  top: var(--tc-preview-reset-top);
  right: auto;
  bottom: auto;
  z-index: 1002;
  width: var(--tc-preview-reset-size);
  min-width: var(--tc-preview-reset-size);
  height: var(--tc-preview-reset-size);
  min-height: var(--tc-preview-reset-size);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-surface-control);
  color: var(--tc-text-muted);
  box-shadow: none;
  transition: opacity 140ms ease, color 140ms ease, background 140ms ease;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.editor-ratio-portrait[data-editor-compact-controls="on"] .preview-stage .preview-reset-button,
body.editor-ratio-portrait[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button,
body.editor-ratio-portrait[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button,
body.editor-ratio-portrait[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button {
  width: var(--tc-preview-reset-size);
  min-width: var(--tc-preview-reset-size);
  height: var(--tc-preview-reset-size);
  min-height: var(--tc-preview-reset-size);
}

body.editor-ratio-portrait[data-editor-compact-controls="on"] .preview-stage .preview-reset-button .control-icon,
body.editor-ratio-portrait[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button .control-icon,
body.editor-ratio-portrait[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button .control-icon,
body.editor-ratio-portrait[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button .control-icon {
  width: 15px;
  height: 15px;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-reset-button:hover,
body[data-editor-compact-controls="on"] .preview-stage .preview-reset-button:focus-visible,
body[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button:hover,
body[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button:focus-visible,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button:hover,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button:focus-visible,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button:hover,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button:focus-visible {
  background: var(--tc-surface-raised);
  color: var(--tc-text-strong);
  opacity: 1;
  outline: 0;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-reset-button .control-icon,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button .control-icon,
body[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button .control-icon,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button .control-icon {
  width: var(--tc-icon-size-xl);
  height: var(--tc-icon-size-xl);
  display: block;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-reset-button svg,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button svg,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}

body.is-export-mode[data-editor-compact-controls="on"] .preview-stage .preview-reset-button,
body.is-export-mode[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button,
body.is-export-mode[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button,
body.is-export-mode[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button,
body.is-exporting[data-editor-compact-controls="on"] .preview-stage .preview-reset-button,
body.is-exporting[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button,
body.is-exporting[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button,
body.is-exporting[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button,
body.is-animation-mode:not([data-animation-tab-text-interaction="allow"])[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button,
body.is-animation-mode:not([data-animation-tab-text-interaction="allow"])[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button,
body[data-editor-compact-controls="on"] .preview-stage .preview-reset-button[hidden],
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button[hidden],
body[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button[hidden],
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button[hidden] {
  display: none;
}

body.is-animation-playing[data-editor-compact-controls="on"] .preview-stage .preview-reset-button,
body.is-animation-playing[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button,
body.is-animation-playing[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button,
body.is-animation-playing[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button {
  opacity: 0.32;
  color: var(--tc-text-disabled);
  pointer-events: none;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1003;
  width: clamp(68px, 5.8vw, 82px);
  min-width: clamp(68px, 5.8vw, 82px);
  height: clamp(44px, 3.7vw, 54px);
  min-height: clamp(44px, 3.7vw, 54px);
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--tc-app-accent, var(--tc-accent-main));
  border-radius: var(--tc-radius-md);
  background: var(--tc-app-accent, var(--tc-accent-main));
  color: var(--tc-white);
  box-shadow: 0 18px 48px var(--tc-shadow-color-stronger), 0 0 0 1px var(--tc-accent-border-soft) inset;
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-backdrop-filter: var(--tc-glass-filter-soft);
  backdrop-filter: var(--tc-glass-filter-soft);
}

body.is-animation-mode[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button:not([hidden]),
body.is-animation-mode[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button:not([hidden]) {
  display: inline-grid;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button:hover,
body[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button:focus-visible,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button:hover,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button: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);
  box-shadow: 0 18px 48px var(--tc-shadow-color-stronger), var(--tc-focus-ring);
  opacity: 1;
  outline: 0;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button .control-icon,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button .control-icon {
  width: var(--tc-icon-size-2xl);
  height: var(--tc-icon-size-2xl);
  display: block;
  margin-left: var(--tc-space-1-5);
}

body[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button [data-animation-stop-icon],
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button [data-animation-stop-icon],
body.is-animation-playing[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button [data-animation-play-icon],
body.is-animation-playing[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button [data-animation-play-icon] {
  display: none;
}

body.is-animation-playing[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button [data-animation-stop-icon],
body.is-animation-playing[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button [data-animation-stop-icon] {
  display: none;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button svg,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button svg {
  width: 100%;
  height: 100%;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button svg path,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button svg path,
body[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button svg rect,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button svg rect {
  fill: currentColor;
  stroke: none;
}


.compact-bubble-menu::after {
  display: none;
}

.compact-bubble-menu button:focus,
.compact-bubble-menu button:focus-visible {
  outline: 0;
}

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

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

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

/* Long-running editor actions share one lifecycle-bound attention treatment.
   The finite compact-menu cue remains only an instructional hint; playback and
   export keep pulsing until their canonical active state ends. */
body.is-animation-playing #animationPlayBtn:is(.is-active, [aria-pressed="true"]),
body.is-animation-playing [data-editor-action="play-animation"]:is(.is-active, [aria-pressed="true"]),
body.is-animation-playing [data-editor-action="test-jitter"]:is(.is-active, [aria-pressed="true"]),
[data-editor-playback-action="toggle"]:is(.is-active, [aria-pressed="true"]) {
  --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);
  position: relative;
  z-index: 3;
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

/* An open Flow/settings popup mutes its sibling compact categories. Keep the
   category that owns the live Stop action fully visible so parent opacity can
   never dim or visually disable an active playback control. */
body.is-animation-playing .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:has(
  [data-editor-action="play-animation"]:is(.is-active, [aria-pressed="true"]),
  [data-editor-action="test-jitter"]:is(.is-active, [aria-pressed="true"])
) {
  opacity: 1;
  filter: none;
  transition: none;
}

body.is-exporting [data-editor-action="export"],
body.is-editor-exporting [data-editor-action="export"],
body.is-exporting [data-editor-action="cancel-export"],
body.is-editor-exporting [data-editor-action="cancel-export"],
body.is-animation-playing #animationPlayBtn:is(.is-active, [aria-pressed="true"]),
body.is-animation-playing [data-editor-action="play-animation"]:is(.is-active, [aria-pressed="true"]),
body.is-animation-playing [data-editor-action="test-jitter"]:is(.is-active, [aria-pressed="true"]),
[data-editor-playback-action="toggle"]:is(.is-active, [aria-pressed="true"]) {
  animation: compact-menu-attention-pulse 1280ms cubic-bezier(0.4, 0, 0.2, 1) 0s infinite both;
  border-color: var(--tc-editor-ui-attention-line-strong);
  box-shadow:
    0 0 0 0 var(--tc-color-transparent),
    inset 0 0 0 1px var(--tc-editor-ui-attention-line);
  will-change: box-shadow;
}

body.is-animation-playing #animationPlayBtn:is(.is-active, [aria-pressed="true"]):hover,
body.is-animation-playing #animationPlayBtn:is(.is-active, [aria-pressed="true"]):focus-visible,
body.is-animation-playing [data-editor-action="play-animation"]:is(.is-active, [aria-pressed="true"]):hover,
body.is-animation-playing [data-editor-action="play-animation"]:is(.is-active, [aria-pressed="true"]):focus-visible,
body.is-animation-playing [data-editor-action="test-jitter"]:is(.is-active, [aria-pressed="true"]):hover,
body.is-animation-playing [data-editor-action="test-jitter"]:is(.is-active, [aria-pressed="true"]):focus-visible,
[data-editor-playback-action="toggle"]:is(.is-active, [aria-pressed="true"]):hover,
[data-editor-playback-action="toggle"]:is(.is-active, [aria-pressed="true"]):focus-visible {
  --tc-editor-ui-attention-line: var(--tc-export-danger-border-soft);
  --tc-editor-ui-attention-line-strong: var(--tc-export-danger-border);
  --tc-editor-ui-attention-glow: var(--tc-export-danger-glow);
  color: var(--tc-export-danger-main);
}

@keyframes compact-menu-attention-pulse {
  0% {
    box-shadow:
      0 0 0 0 var(--tc-color-transparent),
      inset 0 0 0 1px var(--tc-editor-ui-attention-line);
  }

  50% {
    box-shadow:
      0 0 11px 2px var(--tc-editor-ui-attention-glow),
      inset 0 0 0 1px var(--tc-editor-ui-attention-line-strong);
  }

  100% {
    box-shadow:
      0 0 0 0 var(--tc-color-transparent),
      inset 0 0 0 1px var(--tc-editor-ui-attention-line);
  }
}
}

/* source: shared/styles/features/editor-controls/compact-scrub-export.css */
@layer components {
/* Segmented switches inside compact popups. */
.compact-switch {
  display: grid;
  grid-template-columns: repeat(var(--tc-compact-switch-columns), minmax(0, 1fr));
  gap: var(--tc-compact-switch-gap);
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: var(--tc-compact-switch-min-width);
  height: var(--tc-compact-switch-height);
  min-height: var(--tc-compact-switch-height);
  margin-bottom: var(--tc-compact-switch-margin-bottom);
  padding: var(--tc-compact-switch-padding);
  border: 0;
  border-radius: var(--tc-compact-switch-radius);
  background: var(--tc-compact-switch-bg);
  box-shadow: none;
  overflow: hidden;
}

.compact-switch--three {
  --tc-compact-switch-columns: 3;
}

.compact-switch--single {
  --tc-compact-switch-columns: 1;
}

.compact-switch__segment {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  min-width: var(--tc-compact-switch-segment-min-width);
  height: var(--tc-compact-switch-segment-height);
  min-height: var(--tc-compact-switch-segment-height);
  border: 0;
  border-radius: var(--tc-compact-switch-segment-radius);
  background-clip: padding-box;
  padding: 0 var(--tc-compact-switch-segment-padding-x);
  background: var(--tc-compact-switch-segment-bg);
  color: var(--tc-compact-switch-segment-color);
  font-family: var(--tc-compact-switch-segment-font-family);
  font-size: var(--tc-compact-switch-segment-font-size);
  font-weight: var(--tc-compact-switch-segment-font-weight);
  line-height: var(--tc-compact-switch-segment-line-height);
  letter-spacing: 0;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  opacity: var(--tc-compact-switch-segment-opacity);
  touch-action: manipulation;
  transition: color 120ms var(--tc-ease-standard), background-color 120ms var(--tc-ease-standard), box-shadow 120ms var(--tc-ease-standard);
}

.compact-switch__segment:not(.is-active):hover,
.compact-switch__segment:not(.is-active):focus-visible {
  background: var(--tc-compact-switch-segment-bg-hover);
  color: var(--tc-compact-switch-segment-color-hover);
  opacity: var(--tc-compact-switch-segment-opacity-hover);
  outline: 0;
  box-shadow: none;
}

.compact-switch__segment.is-active {
  background: var(--tc-compact-switch-segment-bg-active);
  color: var(--tc-compact-switch-segment-color-active);
  box-shadow: none;
  font-weight: var(--tc-compact-switch-segment-font-weight-active);
  outline: 0;
  opacity: var(--tc-compact-switch-segment-opacity-active);
}

/* Popup slider controls: horizontal for Strength / Variation, vertical group for Text spacing. */
.compact-bubble-menu.has-popup-slider {
  min-width: var(--tc-compact-popup-control-width);
}

.compact-scrub-menu.compact-scrub-menu--vertical {
  --compact-square-size: var(--tc-compact-square-size);
  --compact-control-width: var(--tc-compact-control-width);
  --compact-control-height: var(--tc-compact-control-height);
  --compact-category-inset: var(--tc-compact-category-inset);
  --compact-panel-inset: var(--compact-category-inset);
  --editor-control-gap: var(--tc-compact-control-gap);
  --compact-label-space: var(--tc-compact-label-space);
  --compact-category-label-space: var(--tc-compact-popup-slider-label-space);
  --compact-category-pad-x: calc(var(--compact-category-inset) + var(--compact-category-label-space));
  --compact-category-extra: calc(var(--compact-control-width) * 0.18);
  --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-control-category-size);
  --compact-font-label: var(--tc-type-compact-control-label-size);
  --compact-font-value: var(--tc-type-compact-control-value-size);
  --compact-glass-surface: var(--tc-editor-ui-popup);
  --compact-glass-surface-soft: var(--tc-editor-ui-popup-control-hover);
  --compact-glass-surface-muted: var(--tc-editor-group-base-muted);
  --compact-glass-line: var(--tc-editor-ui-line);
  --compact-glass-line-strong: var(--tc-editor-ui-line-strong);
  --compact-glass-shadow: var(--tc-editor-ui-popup-shadow);
  --compact-category-height: calc(
    var(--compact-control-height)
    + var(--compact-category-label-space)
    + var(--compact-label-space)
    + var(--compact-category-pad-top)
    + var(--compact-category-pad-bottom)
  );
  --compact-group-count: 3;
  --compact-group-extra: 1;
  --compact-group-width: calc(
    (var(--compact-control-width) * var(--compact-group-count))
    + (var(--editor-control-gap) * (var(--compact-group-count) - 1))
    + (var(--compact-category-pad-x) * 2)
    + (var(--compact-category-extra) * var(--compact-group-extra))
  );
  min-width: var(--compact-group-width);
  height: auto;
  min-height: var(--compact-category-height);
  max-height: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--editor-control-gap);
  box-sizing: border-box;
  overflow: visible;
  padding:
    calc(var(--compact-category-label-space) + var(--compact-category-pad-top))
    var(--compact-category-pad-x)
    calc(var(--compact-label-space) + 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(--compact-glass-surface);
  box-shadow: var(--compact-glass-shadow);
}

.compact-scrub-menu.compact-scrub-menu--vertical::before {
  content: attr(data-compact-group-label);
  position: absolute;
  top: calc(var(--compact-category-inset) + 1px);
  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-control-category-weight);
  line-height: var(--tc-type-compact-control-category-line);
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
  pointer-events: none;
}

.compact-scrub-menu.compact-scrub-menu--vertical .compact-popup-slider-field {
  display: block;
  flex: 0 0 var(--compact-control-width);
}

.compact-popup-slider-group {
  position: relative;
  display: grid;
  gap: var(--tc-compact-popup-slider-card-gap);
}

.compact-popup-subgroup {
  position: relative;
  display: grid;
  gap: var(--tc-compact-popup-subgroup-gap);
  box-sizing: border-box;
  width: var(--tc-compact-popup-item-width);
  max-width: 100%;
  margin-top: var(--tc-compact-popup-subgroup-margin-top);
  padding-top: var(--tc-compact-popup-subgroup-label-space);
}

.compact-popup-subgroup::before {
  content: attr(data-compact-group-label);
  position: absolute;
  top: var(--tc-compact-popup-subgroup-label-top);
  left: var(--tc-compact-popup-subgroup-label-left);
  right: 0;
  color: var(--tc-text-faint);
  font-size: var(--compact-font-category);
  font-weight: var(--tc-type-compact-control-category-weight);
  line-height: var(--tc-type-compact-control-category-line);
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
  pointer-events: none;
}

.compact-popup-subgroup > .compact-switch {
  margin-bottom: var(--tc-compact-popup-subgroup-control-gap);
}

.compact-popup-subgroup--select-list {
  gap: var(--tc-space-2);
}

.compact-popup-subgroup--scroll-list {
  width: var(--tc-compact-popup-scroll-list-width);
  max-width: none;
  margin-left: calc(var(--tc-compact-popup-subgroup-scroll-label-offset) * -1);
  padding-left: var(--tc-compact-popup-subgroup-scroll-label-offset);
  padding-right: var(--tc-compact-popup-subgroup-scroll-label-offset);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--tc-editor-ui-popup-scrollbar) var(--tc-color-transparent);
}

.compact-popup-subgroup--scroll-list::before {
  left: 0;
}

/* Option width inside the scroll list lives in
   styles/components/compact-control-popups.css (component layer). */

@media (max-width: 760px), (pointer: coarse) {
  .compact-popup-subgroup--scroll-list.has-scroll-after::after {
    content: "";
    position: sticky;
    bottom: var(--tc-compact-popup-scroll-cue-arrow-offset);
    z-index: 3;
    justify-self: center;
    width: var(--tc-compact-popup-scroll-cue-arrow-size);
    height: var(--tc-compact-popup-scroll-cue-arrow-size);
    margin-top: calc(var(--tc-compact-popup-scroll-cue-arrow-size) * -1);
    border-right: var(--tc-compact-popup-scroll-cue-arrow-stroke) solid var(--tc-compact-popup-scroll-cue-arrow-color);
    border-bottom: var(--tc-compact-popup-scroll-cue-arrow-stroke) solid var(--tc-compact-popup-scroll-cue-arrow-color);
    opacity: 0.7;
    pointer-events: none;
    transform: rotate(45deg);
  }
}

.compact-popup-column {
  position: relative;
  display: grid;
  align-content: start;
  align-items: start;
  gap: var(--tc-compact-popup-slider-card-gap);
  box-sizing: border-box;
  width: var(--tc-compact-popup-column-width);
  padding: var(--tc-compact-popup-column-padding);
}

.compact-popup-column::before {
  content: attr(data-compact-group-label);
  position: absolute;
  top: calc(var(--tc-compact-category-inset) + 1px);
  left: var(--tc-compact-category-inset);
  right: var(--tc-compact-popup-slider-shell-padding-x);
  color: var(--tc-text-faint);
  font-size: var(--compact-font-category);
  font-weight: var(--tc-type-compact-control-category-weight);
  line-height: var(--tc-type-compact-control-category-line);
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
  pointer-events: none;
}

.compact-popup-column > .compact-popup-subgroup {
  margin-top: 0;
  padding-top: 0;
}

.compact-popup-column > .compact-popup-subgroup::before {
  content: none;
  display: none;
}

.compact-popup-column--stacked-groups > .compact-popup-subgroup {
  margin-top: var(--tc-compact-popup-subgroup-margin-top);
  padding-top: var(--tc-compact-popup-subgroup-label-space);
}

.compact-popup-column--stacked-groups > .compact-popup-subgroup:first-child {
  margin-top: 0;
  padding-top: 0;
}

.compact-popup-column--stacked-groups > .compact-popup-subgroup::before {
  content: attr(data-compact-group-label);
  display: block;
}

.compact-popup-column--stacked-groups > .compact-popup-subgroup:first-child::before {
  content: none;
  display: none;
}

.compact-popup-column--stacked-groups > .compact-popup-subgroup--unlabeled {
  margin-top: 0;
  padding-top: 0;
}

.compact-popup-column--stacked-groups > .compact-popup-subgroup--unlabeled::before {
  content: none;
  display: none;
}

.compact-popup-column > .compact-popup-slider-group {
  align-content: start;
  align-self: start;
}

.compact-popup-slider-menu,
.compact-popup-slider-group.compact-popup-slider-floating {
  --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-popup-slider-label-space);
  --compact-category-pad-x: var(--tc-compact-popup-slider-shell-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-control-category-size);
  --tc-compact-menu-gap: var(--tc-compact-popup-slider-card-gap);
  --tc-compact-menu-padding:
    calc(var(--compact-category-label-space) + var(--compact-category-pad-top) + var(--tc-compact-popup-slider-label-gap))
    var(--compact-category-pad-x)
    calc(var(--compact-category-pad-bottom) + var(--tc-compact-popup-slider-shell-bottom-extra));
  --tc-compact-menu-border: 1px solid var(--tc-color-transparent);
  --tc-compact-menu-radius: var(--tc-radius-md);
  --tc-compact-menu-bg: var(--tc-editor-ui-popup);
  --tc-compact-menu-shadow: var(--tc-editor-ui-popup-shadow);
  z-index: 2147483647;
  min-width: var(--tc-compact-popup-slider-menu-min-width);
  box-sizing: border-box;
  padding: var(--tc-compact-menu-padding);
  border: var(--tc-compact-menu-border);
  border-radius: var(--tc-compact-menu-radius);
  background: var(--tc-compact-menu-bg);
  color: var(--tc-editor-ui-popup-text);
  box-shadow: var(--tc-compact-menu-shadow);
  pointer-events: auto;
  animation: compact-menu-rise 55ms ease-out;
}

.compact-popup-slider-menu.compact-popup-slider-menu--two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  gap: var(--tc-compact-popup-column-gap);
  min-width: 0;
  padding: 0;
}

.compact-popup-slider-menu.compact-popup-slider-menu--two-column > .compact-popup-column {
  width: 100%;
  min-width: 0;
}

.compact-popup-slider-menu.compact-popup-slider-menu--two-column::before {
  content: none;
  display: none;
}

.compact-popup-slider-menu::before,
.compact-popup-slider-group.compact-popup-slider-floating::before {
  content: attr(data-compact-group-label);
  position: absolute;
  top: calc(var(--compact-category-inset) + 1px);
  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-control-category-weight);
  line-height: var(--tc-type-compact-control-category-line);
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
  pointer-events: none;
}

.compact-popup-slider-group[hidden] {
  display: none;
}

.compact-popup-slider[hidden] {
  display: none;
}

.compact-popup-slider {
  --compact-popup-slider-track-inset: var(--tc-compact-popup-slider-track-inset);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: start;
  column-gap: var(--tc-compact-popup-slider-value-gap);
  row-gap: var(--tc-compact-popup-slider-content-gap);
  box-sizing: border-box;
  width: var(--tc-compact-popup-item-width);
  max-width: 100%;
  height: var(--tc-compact-popup-slider-height);
  min-height: var(--tc-compact-popup-slider-height);
  padding: var(--tc-compact-popup-slider-padding-y) var(--tc-compact-popup-slider-padding-x);
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-compact-popup-slider-card-radius);
  background: var(--tc-compact-popup-slider-bg);
  color: var(--tc-control-text);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: none;
}

.compact-popup-slider::after {
  content: "";
  position: absolute;
  left: var(--compact-popup-slider-track-inset);
  right: var(--compact-popup-slider-track-inset);
  bottom: var(--tc-compact-popup-slider-track-bottom);
  z-index: 0;
  height: var(--tc-compact-popup-slider-track-height);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-editor-scrub-track);
  pointer-events: none;
  transform: translateY(var(--tc-compact-popup-slider-content-shift-y));
}

.compact-popup-slider__fill {
  position: absolute;
  inset: auto var(--compact-popup-slider-track-inset) var(--tc-compact-popup-slider-track-bottom) var(--compact-popup-slider-track-inset);
  z-index: 1;
  width: auto;
  max-width: none;
  height: var(--tc-compact-popup-slider-track-height);
  border-radius: var(--tc-radius-pill);
  background: var(--tc-editor-scrub-fill);
  pointer-events: none;
  transform: translateY(var(--tc-compact-popup-slider-content-shift-y)) scaleX(var(--compact-popup-slider-fill, 0));
  transform-origin: left center;
  transition: none;
  will-change: transform;
}

.compact-popup-slider:hover,
.compact-popup-slider:focus-visible {
  background: var(--tc-compact-popup-slider-bg-hover);
  outline: 0;
  box-shadow: none;
}

.compact-popup-slider.is-scrubbing {
  background: var(--tc-compact-popup-slider-bg-active);
  box-shadow: none;
}

.compact-popup-slider--select-option.is-selected {
  background: var(--tc-compact-popup-slider-bg-active);
}

.compact-popup-slider.is-scrubbing .compact-popup-slider__fill {
  background: var(--tc-editor-scrub-fill-active);
  transition: none;
}

.compact-popup-action {
  width: var(--tc-compact-popup-item-width);
  max-width: 100%;
  min-height: var(--tc-compact-popup-action-height);
  padding: 0 var(--tc-compact-popup-action-padding-x);
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-compact-popup-action-radius);
  background: var(--tc-compact-popup-action-bg);
  color: var(--tc-compact-popup-action-color);
  font-family: var(--tc-compact-popup-action-font-family);
  font-size: var(--tc-compact-popup-action-font-size);
  font-weight: var(--tc-compact-popup-action-font-weight);
  line-height: var(--tc-compact-popup-action-line-height);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.compact-popup-action--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-compact-popup-action-icon-gap);
}

.compact-popup-action--icon > * {
  transform: translateX(var(--tc-compact-popup-action-content-shift-x));
}

.compact-popup-action__icon {
  width: var(--tc-compact-popup-action-icon-size);
  height: var(--tc-compact-popup-action-icon-size);
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--tc-compact-popup-action-icon-size);
}

.compact-popup-action__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.compact-popup-action__icon svg path,
.compact-popup-icon-toggle svg path {
  fill: currentColor;
  stroke: none;
}

.compact-popup-action__meta {
  color: var(--tc-compact-popup-action-meta-color);
  opacity: var(--tc-compact-popup-action-meta-opacity);
}

.compact-popup-action[hidden] {
  display: none;
}

.compact-popup-action:hover,
.compact-popup-action:focus-visible {
  border-color: var(--tc-color-transparent);
  background: var(--tc-compact-popup-action-bg-hover);
  color: var(--tc-compact-popup-action-color-hover);
  outline: 0;
}

.compact-popup-action:active {
  background: var(--tc-compact-popup-action-bg-active);
}

.compact-popup-icon-toggle {
  position: absolute;
  top: var(--tc-compact-popup-group-corner-action-top);
  left: auto;
  right: var(--tc-compact-popup-group-corner-action-right);
  z-index: 3;
  width: var(--tc-compact-popup-icon-toggle-size);
  height: var(--tc-compact-popup-icon-toggle-size);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--tc-compact-popup-action-radius);
  background: var(--tc-compact-popup-icon-toggle-bg);
  color: var(--tc-compact-popup-icon-toggle-color);
  cursor: pointer;
  opacity: var(--tc-compact-popup-icon-toggle-opacity);
}

.compact-popup-icon-toggle svg {
  width: var(--tc-compact-popup-icon-toggle-icon-size);
  height: var(--tc-compact-popup-icon-toggle-icon-size);
  display: block;
}

.compact-popup-icon-toggle:hover,
.compact-popup-icon-toggle:focus-visible {
  background: var(--tc-compact-popup-icon-toggle-bg-hover);
  color: var(--tc-compact-popup-icon-toggle-color-hover);
  opacity: var(--tc-compact-popup-icon-toggle-opacity-hover);
  outline: 0;
}

.compact-popup-icon-toggle.is-active,
.compact-popup-icon-toggle[aria-pressed="true"] {
  background: var(--tc-compact-popup-icon-toggle-bg-active);
  color: var(--tc-compact-popup-icon-toggle-color-active);
  opacity: var(--tc-compact-popup-icon-toggle-opacity-active);
}

.compact-option-variation-button {
  position: static;
  flex: 0 0 var(--tc-compact-popup-icon-toggle-size);
  margin-left: auto;
  background: var(--tc-compact-popup-icon-toggle-bg);
  color: var(--tc-compact-popup-icon-toggle-color);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.has-variation-action.is-active > .compact-option-variation-button,
.has-variation-action[aria-selected="true"] > .compact-option-variation-button {
  opacity: var(--tc-compact-popup-icon-toggle-opacity);
  visibility: visible;
  pointer-events: auto;
}

.has-variation-action.is-active > .compact-option-variation-button:hover,
.has-variation-action.is-active > .compact-option-variation-button:focus-visible,
.has-variation-action[aria-selected="true"] > .compact-option-variation-button:hover,
.has-variation-action[aria-selected="true"] > .compact-option-variation-button:focus-visible,
.has-variation-action.is-active > .compact-option-variation-button[aria-pressed="true"],
.has-variation-action[aria-selected="true"] > .compact-option-variation-button[aria-pressed="true"] {
  background: var(--tc-compact-popup-icon-toggle-bg);
  color: var(--tc-compact-popup-icon-toggle-color);
}

.has-variation-action.is-active > .compact-option-variation-button[aria-pressed="true"],
.has-variation-action[aria-selected="true"] > .compact-option-variation-button[aria-pressed="true"] {
  opacity: var(--tc-compact-popup-icon-toggle-opacity-active);
}

.compact-option-variation-button:disabled {
  cursor: default;
  opacity: var(--tc-compact-popup-icon-toggle-opacity);
}

.compact-popup-slider__label,
.compact-popup-slider__value {
  position: relative;
  z-index: 2;
  pointer-events: none;
  transform: translateY(var(--tc-compact-popup-slider-content-shift-y));
}

.compact-popup-slider__label {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tc-editor-ui-popup-text-muted);
  font-family: var(--tc-font-body);
  font-size: var(--tc-editor-popup-slider-label-font);
  font-weight: var(--tc-type-editor-popup-slider-label-weight);
  line-height: var(--tc-type-editor-popup-slider-label-line);
  letter-spacing: 0;
  text-transform: none;
}

.compact-popup-slider__value {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  min-width: 20px;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--tc-compact-popup-slider-value-unit-gap);
  color: var(--tc-editor-ui-popup-text-strong);
  font-family: var(--tc-font-body);
  font-size: var(--tc-editor-popup-slider-value-font);
  font-weight: var(--tc-type-editor-popup-slider-value-weight);
  line-height: var(--tc-type-editor-popup-slider-label-line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.compact-popup-slider__value-unit {
  font-family: var(--tc-font-body);
  font-size: var(--tc-editor-popup-slider-unit-font);
  font-weight: var(--tc-type-editor-popup-slider-unit-weight);
  line-height: 1;
}

.compact-disabled-hint {
  position: absolute;
  inset: var(--tc-compact-disabled-hint-inset-y) var(--tc-compact-disabled-hint-inset-x);
  z-index: 3;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid var(--tc-compact-disabled-hint-border);
  border-radius: var(--tc-compact-disabled-hint-radius);
  background: var(--tc-compact-disabled-hint-bg);
  color: var(--tc-compact-disabled-hint-color);
  font-family: var(--tc-font-body);
  font-size: var(--tc-compact-disabled-hint-font-size);
  font-weight: var(--tc-compact-disabled-hint-font-weight);
  line-height: var(--tc-compact-disabled-hint-line-height);
  text-align: center;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tc-compact-disabled-hint-transition-duration) var(--tc-ease-standard);
}

.compact-popup-slider.is-disabled {
  opacity: 0.24;
  pointer-events: none;
}

.compact-popup-slider[data-disabled-hint="true"].is-disabled::after,
.compact-popup-slider[data-disabled-hint="true"].is-disabled .compact-popup-slider__fill,
.compact-popup-slider[data-disabled-hint="true"].is-disabled .compact-popup-slider__label,
.compact-popup-slider[data-disabled-hint="true"].is-disabled .compact-popup-slider__value {
  opacity: 1;
}

.compact-popup-slider[data-disabled-hint="true"].is-disabled.is-disabled-hint-visible {
  opacity: 1;
}

.compact-popup-slider[data-disabled-hint="true"].is-disabled.is-disabled-hint-visible::after,
.compact-popup-slider[data-disabled-hint="true"].is-disabled.is-disabled-hint-visible .compact-popup-slider__fill,
.compact-popup-slider[data-disabled-hint="true"].is-disabled.is-disabled-hint-visible .compact-popup-slider__label,
.compact-popup-slider[data-disabled-hint="true"].is-disabled.is-disabled-hint-visible .compact-popup-slider__value {
  opacity: var(--tc-compact-disabled-hint-muted-opacity);
}

.compact-popup-slider[data-activate-disabled="true"].is-disabled {
  pointer-events: auto;
  cursor: help;
}

.compact-popup-slider.is-disabled-hint-visible > .compact-disabled-hint,
.compact-select-menu__option.is-disabled-hint-visible > .compact-disabled-hint {
  opacity: 1;
}

.compact-select-menu__option[data-disabled-hint="true"][aria-disabled="true"] {
  position: relative;
  opacity: 1;
  cursor: help;
}

/* Muted label opacity for disabled-hint options lives in
   styles/components/compact-control-popups.css (component layer). */

body[data-editor-compact-controls="on"] .editor-controls .compact-disabled-guide-pulse,
.editor-controls.compact-controls .compact-disabled-guide-pulse {
  --tc-editor-ui-attention-line: var(--tc-compact-disabled-guide-pulse-line);
  --tc-editor-ui-attention-line-strong: var(--tc-compact-disabled-guide-pulse-line-strong);
  --tc-editor-ui-attention-glow: var(--tc-compact-disabled-guide-pulse-glow);
}

.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field label:not(.sr-only) {
  color: var(--tc-compact-scrub-label-color);
  opacity: var(--tc-compact-scrub-label-opacity);
}

.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field:hover label:not(.sr-only),
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field:focus-within label:not(.sr-only) {
  color: var(--tc-compact-scrub-label-color-active);
  opacity: var(--tc-compact-scrub-label-opacity-active);
}

.compact-switch__segment:disabled,
.compact-switch__segment[aria-disabled="true"],
.compact-switch__segment[aria-disabled="true"]:hover,
.compact-switch__segment[aria-disabled="true"]:focus-visible {
  opacity: 0.24;
}

}

@layer features {

@media (max-width: 560px) {
  body[data-editor-compact-controls="on"] .editor-dialog {
    --editor-mobile-stack-gap: var(--editor-floating-stack-gap);
    --editor-mobile-bottom-gap: var(--editor-floating-stack-gap);
    --editor-mobile-side-gutter: 0px;
  }
}

@container (max-width: 560px) {
  body[data-editor-compact-controls="on"] .aspect-toggle,
  body[data-editor-compact-controls="on"] .editor-dialog .aspect-toggle {
    width: 4.75rem;
  }

  body[data-editor-compact-controls="on"] .editor-preview,
  body[data-editor-compact-controls="on"] .editor-dialog .editor-preview {
    --editor-stage-inset: 8px;
    padding: var(--tc-space-3) var(--tc-space-4);
  }

  body[data-editor-compact-controls="on"] .editor-access-notice,
  body[data-editor-compact-controls="on"] .editor-dialog .editor-access-notice {
    top: 10px;
    font-size: var(--tc-notice-editor-font-size);
    line-height: 1.08;
    gap: var(--tc-space-hairline);
  }

  body[data-editor-compact-controls="on"].editor-ratio-portrait .editor-access-notice,
  body[data-editor-compact-controls="on"].editor-ratio-portrait .editor-dialog .editor-access-notice {
    font-size: var(--tc-notice-editor-font-size-portrait);
  }

}

body.mobile-keyboard-open[data-editor-compact-controls="on"] .editor-window {
  grid-template-rows: auto minmax(0, 1fr) 0;
  padding-bottom: 0;
}

body.is-embed.mobile-keyboard-open[data-editor-compact-controls="on"] .editor-window,
body.mobile-keyboard-open[data-editor-compact-controls="on"] .inline-editor-mount .editor-window {
  grid-template-rows: minmax(0, 1fr);
  padding-bottom: 0;
}

body.mobile-keyboard-open[data-editor-compact-controls="on"] .editor-controls,
body.mobile-keyboard-open .editor-controls.compact-controls,
body.mobile-keyboard-open[data-editor-compact-controls="on"] .editor-tabs,
body.mobile-keyboard-open[data-editor-compact-controls="on"] .editor-dialog .editor-tabs {
  display: none;
}

body.mobile-keyboard-open[data-editor-compact-controls="on"] .inline-editor-mount .editor-preview,
body.mobile-keyboard-open[data-editor-compact-controls="on"] .inline-editor-mount .editor-dialog .editor-preview {
  height: 100%;
  min-height: 0;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-reset-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button,
body[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button,
body[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button {
  border-color: var(--tc-color-transparent);
  background: var(--tc-editor-ui-control-bg);
  color: var(--tc-control-text);
  box-shadow: none;
  outline: 0;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-reset-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button {
  position: absolute;
  left: auto;
  top: var(--tc-preview-reset-top);
  right: var(--tc-preview-reset-right);
  bottom: auto;
  transform: none;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button {
  position: absolute;
  left: var(--tc-preview-reset-right);
  top: var(--tc-preview-reset-top);
  right: auto;
  bottom: auto;
  transform: none;
}

body[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

body[data-editor-compact-controls="on"] .preview-stage .preview-reset-button:hover,
body[data-editor-compact-controls="on"] .preview-stage .preview-reset-button:focus-visible,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button:hover,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button:focus-visible,
body[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button:hover,
body[data-editor-compact-controls="on"] .preview-stage .preview-gallery-button:focus-visible,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button:hover,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button:focus-visible,
body[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button:hover,
body[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button:focus-visible,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button:hover,
body[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button:focus-visible {
  background: var(--tc-surface-control);
  color: var(--tc-control-text-hover);
}

body[data-preview-checker-mode="bright"][data-editor-compact-controls="on"] .preview-stage .preview-reset-button,
body[data-preview-checker-mode="bright"][data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button,
body[data-preview-checker-mode="bright"][data-editor-compact-controls="on"] .preview-stage .preview-gallery-button,
body[data-preview-checker-mode="bright"][data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button {
  background: var(--tc-checker-bright-control-bg);
  color: var(--tc-checker-bright-ink);
  opacity: 1;
}

body[data-preview-checker-mode="bright"][data-editor-compact-controls="on"] .preview-stage .preview-reset-button:hover,
body[data-preview-checker-mode="bright"][data-editor-compact-controls="on"] .preview-stage .preview-reset-button:focus-visible,
body[data-preview-checker-mode="bright"][data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button:hover,
body[data-preview-checker-mode="bright"][data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-reset-button:focus-visible,
body[data-preview-checker-mode="bright"][data-editor-compact-controls="on"] .preview-stage .preview-gallery-button:hover,
body[data-preview-checker-mode="bright"][data-editor-compact-controls="on"] .preview-stage .preview-gallery-button:focus-visible,
body[data-preview-checker-mode="bright"][data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button:hover,
body[data-preview-checker-mode="bright"][data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-gallery-button:focus-visible {
  background: var(--tc-checker-bright-control-bg-hover);
  color: var(--tc-checker-bright-ink);
}

body.is-animation-mode[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button:not([hidden]),
body.is-animation-mode[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button:not([hidden]) {
  display: inline-grid;
  border-color: var(--tc-app-accent, var(--tc-accent-main));
  background: var(--tc-app-accent, var(--tc-accent-main));
  color: var(--tc-white);
  opacity: 1;
  box-shadow: 0 18px 48px var(--tc-shadow-color-stronger);
}

body.is-animation-mode[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button:hover,
body.is-animation-mode[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button:focus-visible,
body.is-animation-mode[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button:hover,
body.is-animation-mode[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button: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);
  opacity: 1;
}

body.is-animation-mode.is-animation-playing[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button,
body.is-animation-mode.is-animation-playing[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button,
body.is-animation-mode.is-animation-timeline-scrubbing[data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button,
body.is-animation-mode.is-animation-timeline-scrubbing[data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button {
  display: none;
}

/* Editable Animation canvases use the compact Play control as their single
   playback affordance. Retain this overlay for legacy locked editors only so
   the old interaction model remains a reversible capability path. */
body.is-animation-mode[data-animation-tab-text-interaction="allow"][data-editor-compact-controls="on"] .preview-stage .preview-animation-play-button,
body.is-animation-mode[data-animation-tab-text-interaction="allow"][data-editor-compact-controls="on"] .editor-dialog .preview-stage .preview-animation-play-button {
  display: none;
  pointer-events: none;
}

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

body[data-editor-compact-controls="on"] .editor-controls button:hover .control-icon,
.editor-controls.compact-controls button:hover .control-icon,
body[data-editor-compact-controls="on"] .editor-controls button:focus-visible .control-icon,
.editor-controls.compact-controls button:focus-visible .control-icon {
  opacity: var(--tc-editor-ui-icon-hover-opacity);
}
}

/* source: shared/styles/features/editor/editor-desktop-viewport.css */
@layer features {
  /*
    One shared owner for fine-pointer desktop viewport geometry.

    The modal uses one shared vertical gutter: the header and tab rail are
    equally inset, and the dialog fills the stable space between them. Gallery
    state and aspect ratio only lay out content inside that shell, so neither
    can change its height. When the style gallery opens, its rail and the
    ratio-preserving canvas become one centred unit whose preview track may
    shrink to the live viewport width; neither side is clipped or allowed to
    drift off-centre.
  */
  @media (hover: hover) and (pointer: fine) and (min-width: 901px) {
    .editor-modal,
    .editor-standalone-shell {
      --tc-editor-shell-max-width: 100%;
      --tc-editor-shell-max-height: none;
      width: calc(100vw - (var(--tc-editor-viewport-desktop-gutter-x) * 2));
      height: calc(
        100dvh - (var(--tc-editor-viewport-desktop-gutter-y) * 2)
      );
      max-height: none;
    }

    .editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] {
      width: min(
        var(--tc-editor-desktop-header-width),
        calc(100% - (var(--tc-editor-header-inset) * 2))
      );
      margin-inline: auto;
    }

    .editor-modal-body,
    #editor-frame,
    .inline-editor-mount,
    .inline-editor-mount .editor-page {
      min-height: 0;
    }

    .inline-editor-mount .editor-page {
      place-items: start center;
    }

    body[data-editor-compact-controls="on"] .inline-editor-mount .editor-dialog,
    body[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .editor-dialog,
    body[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .editor-dialog {
      --editor-mobile-bottom-gap: var(--tc-editor-desktop-dock-bottom-inset);
      --editor-floating-stack-gap: var(--tc-editor-desktop-stack-gap);
      --editor-floating-controls-gap: var(--editor-floating-stack-gap);
      --editor-floating-tabs-gap: var(--editor-floating-stack-gap);
      width: auto;
      min-width: min(var(--tc-editor-desktop-frame-width), 100%);
      max-width: 100%;
      height: calc(100% - var(--editor-tab-offset));
      max-height: none;
      /* Height is authoritative. Width follows it so 16:9 receives the same
         usable stage height as 9:16 instead of stopping at a fixed cap. */
      aspect-ratio: 16 / 9;
      align-self: start;
      transform: none;
    }

    body[data-editor-compact-controls="on"] .inline-editor-mount .editor-window,
    body[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .editor-window,
    body[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .editor-window {
      width: 100%;
      height: 100%;
      max-width: none;
      min-height: 0;
      container-type: size;
    }

    body[data-editor-compact-controls="on"] .inline-editor-mount .editor-controls,
    body[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .editor-controls,
    body[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .editor-controls {
      --editor-floating-stack-gap: var(--tc-editor-desktop-stack-gap);
      --editor-floating-controls-gap: var(--editor-floating-stack-gap);
      --editor-floating-tabs-gap: var(--editor-floating-stack-gap);
    }

    body[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .editor-preview,
    body[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .editor-preview {
      container-type: size;
      --modal-gallery-inset: var(--editor-stage-inset);
      --modal-gallery-gap: var(
        --tc-open-gallery-gap,
        var(--modal-gallery-inset)
      );
      --modal-gallery-menu-size: var(
        --tc-open-gallery-menu-width,
        var(
          --modal-gallery-menu-width,
          min(
            var(--tc-select-gallery-desktop-menu-width),
            calc(100vw - (var(--tc-select-gallery-desktop-container-inset) * 2))
          )
        )
      );
      /* Gallery width + gap is the shared rail reserve. Portrait keeps it in
         the closed panel; landscape only adds it when the rail is visible. */
      --modal-gallery-reserve: calc(
        var(--modal-gallery-menu-size) + var(--modal-gallery-gap)
      );
      --modal-gallery-half-reserve: calc(var(--modal-gallery-reserve) / 2);
      --modal-gallery-viewport-width: calc(
        100vw - (var(--tc-editor-viewport-desktop-gutter-x) * 2)
      );
      /* Both closed ratios share one height. The ordinary landscape frame is
         bounded only by its own equal outer inset; no hidden rail is charged. */
      --modal-gallery-track-height: max(
        0px,
        min(
          calc(
            100cqh
            - (var(--modal-gallery-inset) * 2)
            - 2px
          ),
          calc(
            (
              var(--modal-gallery-viewport-width)
              - (var(--modal-gallery-inset) * 2)
              - 2px
            ) * 9 / 16
          )
        )
      );
      --modal-gallery-track-width: calc(var(--modal-gallery-track-height) * 16 / 9);
      --modal-gallery-desired-width: calc(
        var(--modal-gallery-track-width)
        + (var(--modal-gallery-inset) * 2)
        + 2px
      );
      position: absolute;
      inset-block: 0;
      left: 50%;
      width: min(
        var(--modal-gallery-desired-width),
        var(--modal-gallery-viewport-width)
      );
      max-width: none;
      height: 100%;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      align-items: center;
      align-content: center;
      column-gap: 0;
      padding: var(--modal-gallery-inset);
      overflow: hidden;
      transform: translateX(-50%);
    }

    /* A visible landscape rail joins the canvas as one centered unit. Only a
       genuinely constrained viewport scales that visible unit to fit. */
    body.editor-ratio-landscape.has-open-gallery-select[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .editor-preview,
    body.editor-ratio-landscape.has-open-gallery-select[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .editor-preview {
      --modal-gallery-track-height: max(
        0px,
        min(
          calc(
            100cqh
            - (var(--modal-gallery-inset) * 2)
            - 2px
          ),
          calc(
            (
              var(--modal-gallery-viewport-width)
              - var(--modal-gallery-reserve)
              - (var(--modal-gallery-inset) * 2)
              - 2px
            ) * 9 / 16
          )
        )
      );
    }

    body.editor-ratio-portrait[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .editor-preview,
    body.editor-ratio-portrait[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .editor-preview {
      --modal-gallery-track-width: calc(var(--modal-gallery-track-height) * 9 / 16);
      --modal-gallery-desired-width: calc(
        var(--modal-gallery-track-width)
        + var(--modal-gallery-reserve)
        + (var(--modal-gallery-inset) * 2)
        + 2px
      );
      grid-template-columns:
        var(--modal-gallery-half-reserve)
        minmax(0, 1fr)
        var(--modal-gallery-half-reserve);
    }

    body.has-open-gallery-select[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .editor-preview,
    body.has-open-gallery-select[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .editor-preview {
      --modal-gallery-desired-width: calc(
        var(--modal-gallery-track-width)
        + var(--modal-gallery-reserve)
        + (var(--modal-gallery-inset) * 2)
        + 2px
      );
      grid-template-columns: var(--modal-gallery-menu-size) minmax(0, 1fr);
      column-gap: var(--modal-gallery-gap);
    }

    body[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .canvas-shell,
    body[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .preview-stage,
    body[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .canvas-shell,
    body[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .preview-stage {
      border-radius: var(--tc-radius-md);
      clip-path: inset(0 round var(--tc-radius-md));
      overflow: hidden;
    }

    body[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .canvas-shell.ratio-landscape,
    body[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .canvas-shell.ratio-landscape,
    body[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .canvas-shell.ratio-portrait,
    body[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .canvas-shell.ratio-portrait {
      grid-column: 1;
      width: 100%;
      height: auto;
      max-width: 100%;
      max-height: none;
      justify-self: center;
      align-self: center;
      margin-left: 0;
    }

    body.editor-ratio-portrait[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .canvas-shell.ratio-portrait,
    body.editor-ratio-portrait[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .canvas-shell.ratio-portrait,
    body.has-open-gallery-select[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .canvas-shell,
    body.has-open-gallery-select[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .canvas-shell {
      grid-column: 2;
    }

    body[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .canvas-shell.ratio-landscape,
    body[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .canvas-shell.ratio-landscape {
      aspect-ratio: 16 / 9;
    }

    body[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .canvas-shell.ratio-portrait,
    body[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .canvas-shell.ratio-portrait {
      aspect-ratio: 9 / 16;
    }

    body[data-editor-compact-controls="on"] .editor-modal[open] .inline-editor-mount .canvas-shell .preview-stage,
    body[data-editor-compact-controls="on"] .editor-standalone-shell .inline-editor-mount .canvas-shell .preview-stage {
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      aspect-ratio: auto;
      margin: 0;
      border-inline: 0;
    }
  }
}

/* source: shared/styles/features/editor-help-tooltips/editor-help-tooltips.css */
@layer features {
.editor-help-dock {
  display: none;
}

.editor-help-dock[hidden] {
  display: none;
}

@media (min-width: 761px) {
/* The shared runtime owns touch eligibility through `hidden`; wide layout
   chrome can only show a dock that is explicitly available. */
.editor-modal[open] .editor-help-dock:not([hidden]),
.editor-standalone-shell .editor-help-dock:not([hidden]) {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    left: auto;
    bottom: max(16px, env(safe-area-inset-bottom));
    top: auto;
    z-index: 2147483100;
    display: grid;
    justify-items: end;
    align-items: end;
    width: min(390px, calc(100vw - 32px));
    height: 62px;
    overflow: visible;
    pointer-events: auto;
    transform: none;
  }

  .editor-modal:not([open]) .editor-help-dock {
    display: none;
  }

  .editor-help-toggle {
    appearance: none;
    position: relative;
    width: 42px;
    min-width: 42px;
    max-width: min(390px, calc(100vw - 32px));
    height: 62px;
    min-height: 62px;
    display: block;
    overflow: visible;
    border: 0;
    border-radius: var(--tc-radius-none);
    background: var(--tc-color-transparent);
    color: var(--tc-text-muted);
    padding: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
  }

  .editor-help-toggle:hover,
  .editor-help-toggle:focus-visible {
    border-color: var(--tc-color-transparent);
    background: var(--tc-color-transparent);
    color: var(--tc-text-strong);
    box-shadow: none;
    outline: 0;
  }

  .editor-help-dock.is-enabled .editor-help-toggle {
    color: var(--tc-accent-text);
  }

  .editor-help-dock.is-disabled .editor-help-toggle {
    color: var(--tc-text-faint);
  }

  .editor-help-dock.has-message .editor-help-toggle {
    width: 100%;
    height: 62px;
    min-height: 62px;
    border: 1px solid var(--tc-editor-ui-line-strong, var(--tc-surface-fill-soft));
    border-radius: var(--tc-radius-sm);
    background: var(--tc-editor-ui-popup, var(--tc-popup-bg));
    color: var(--tc-text-readable, var(--tc-text-strong));
    padding: var(--tc-space-5) var(--tc-space-6);
    box-shadow: var(--tc-editor-ui-popup-shadow, 0 16px 48px var(--tc-shadow-color-heavy));
  }

  .editor-help-toggle__icon {
    position: absolute;
    right: 12px;
    top: 50%;
    bottom: auto;
    width: var(--tc-icon-size-xl);
    height: var(--tc-icon-size-xl);
    display: inline-grid;
    place-items: center;
    color: currentColor;
    transform: translateY(-50%);
  }

  .editor-help-toggle__icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .editor-help-toggle__copy {
    min-width: 0;
    max-width: 0;
    margin-right: 42px;
    display: grid;
    grid-template-rows: 0.6875rem calc(0.625rem * 1.34 * 2);
    gap: var(--tc-space-2);
    overflow: hidden;
    opacity: 0;
    text-align: left;
    white-space: normal;
    transform: none;
    transition: none;
  }

  .editor-help-dock.has-message .editor-help-toggle__copy {
    max-width: calc(100% - 42px);
    opacity: 1;
  }

  .editor-help-toggle__label {
    display: block;
    overflow: hidden;
    color: currentColor;
    font-size: 0.6875rem;
    font-weight: 760;
    line-height: 0.6875rem;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .editor-help-toggle__status {
    display: -webkit-box;
    overflow: hidden;
    color: var(--tc-text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.34;
    min-height: calc(0.625rem * 1.34 * 2);
    max-height: calc(0.625rem * 1.34 * 2);
    letter-spacing: 0;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

}

@media (max-width: 760px) {
  .editor-help-dock {
    display: none;
  }
}

.editor-modal.is-touch-editor-mode[open] .editor-help-dock,
.editor-modal.is-touch-editor-mode .editor-help-dock {
  display: none;
}
}
/*
  Text Collage editor renderer-specific styles belong here.
  Keep reusable editor controls and shell styling in shared/ui.
*/