/* Generated by tools/styles/build-runtime-css.mjs. Do not edit directly. */
/* entry: shared/styles/hub/index.css */
/* source: shared/styles/bundles/app-landing-shell.css */
/*
  Landing-only shared shell for apps that navigate to standalone editor.html.
  Text Collage intentionally keeps app-index-shell.css because its reference
  landing still owns a real inline editor modal.
*/

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

* {
  min-width: 0;
}

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

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

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

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

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

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

iframe,
dialog {
  border: 0;
}

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

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

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

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

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

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

textarea {
  resize: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .theme-picker__label {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-button {
width: fit-content;
  max-width: 100%;
  gap: 0;
  min-height: 2.5rem;
  height: 2.5rem;
  border-color: var(--tc-color-transparent);
  background: var(--tc-color-transparent);
  padding: 0;
  font-size: var(--tc-type-editor-style-select-size);
  font-weight: var(--tc-type-editor-style-select-weight);
  line-height: var(--tc-type-editor-style-select-line);
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select,
.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select-button {
  max-width: 100%;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-value {
grid-column: 1;
  transition: opacity 150ms ease, filter 150ms ease;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-more-hint {
grid-column: 2;
  display: none;
  align-self: center;
  color: var(--tc-text-disabled);
  font-size: var(--tc-type-editor-style-hint-size);
  font-weight: var(--tc-type-editor-style-hint-weight);
  letter-spacing: 0;
  line-height: var(--tc-type-editor-style-hint-line);
  white-space: nowrap;
  transform: translateY(1px);
  transition: color 150ms ease, opacity 150ms ease, text-shadow 150ms ease;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.modal-style-field .tc-select-more-hint {
position: relative;
    width: 2.25rem;
    overflow: hidden;
    color: var(--tc-color-transparent);
    transition: width 180ms ease, color 150ms ease, opacity 150ms ease, text-shadow 150ms ease;
}
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.modal-style-field .tc-select-more-hint::before,
  .modal-style-field .tc-select-more-hint::after {
position: absolute;
    left: 0;
    top: 50%;
    color: var(--tc-text-disabled);
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(-50%);
    transition: opacity 170ms ease, transform 180ms ease, color 150ms ease, text-shadow 150ms ease;
}
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.modal-style-field .tc-select-more-hint::before {
content: none;
    opacity: 1;
}
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
@media (hover: hover) and (pointer: fine) {
.modal-style-field .tc-select-more-hint::after {
content: none;
    opacity: 0;
    transform: translate(-6px, -50%);
}
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-value.has-preview {
gap: 1rem;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-button {
grid-template-columns: minmax(0, auto);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-button::after {
content: none;
  display: none;
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  color: var(--tc-text-placeholder);
  font-size: var(--tc-type-editor-style-after-size);
  font-weight: var(--tc-type-editor-style-after-weight);
  line-height: var(--tc-type-editor-style-after-line);
  transform: translateY(1px);
  white-space: nowrap;
  opacity: 0.95;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field.has-combined-styles .tc-select-button::after {
content: none;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field.has-combined-styles .tc-select-button {
grid-template-columns: minmax(0, auto);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-menu {
min-width: min(340px, 78vw);
}

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

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.editor-modal .tc-select-bookmark-icon {
width: 0.75rem;
  height: 0.75rem;
  color: var(--tc-accent-main);
  filter: var(--tc-accent-icon-glow);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.editor-modal .tc-select-option-bookmark {
width: 1rem;
  height: 1rem;
  color: var(--tc-accent-main);
  filter: var(--tc-accent-icon-glow-soft);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.editor-modal .tc-select-bookmark-icon svg,
.editor-modal .tc-select-option-bookmark svg {
fill: currentColor;
  stroke: none;
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.tc-select--gallery .tc-select-menu.has-style-apply-scope::before {
background: var(--tc-bg-overlay-combined-modal);
}

/* Migrated from styles/features/gallery/gallery-editor-modal.css. */
.modal-style-field .tc-select-more-hint,
.modal-style-field .tc-select-button::after {
color: var(--tc-text-disabled);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.editor-modal.is-exporting .modal-style-field .tc-select-button {
pointer-events: none;
  opacity: 0.58;
  filter: var(--tc-filter-export-disabled);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--tc-bg-overlay-combined-modal-strong);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal .tc-select-search,
.tc-select-menu.has-combined-style-modal .tc-select-search-input,
.tc-select-menu.has-combined-style-modal .tc-select-gallery-close,
.tc-select-menu.has-combined-style-modal > .tc-select-filter-pills,
.tc-select-menu.has-combined-style-modal > .tc-select-options {
pointer-events: none;
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal .mobile-combined-style-modal__panel {
width: 100%;
  max-height: min(calc(100dvh - 1.5rem), 36rem);
  min-height: 0;
  padding: var(--tc-space-5);
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-radius-md);
  background: var(--tc-editor-ui-popup);
  box-shadow: var(--tc-editor-ui-popup-shadow);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal .mobile-combined-style-modal__cancel {
min-height: 2.375rem;
  background: var(--tc-editor-ui-popup-control);
  color: var(--tc-control-text);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal .mobile-combined-style-modal__cancel:hover,
.tc-select-menu.has-combined-style-modal .mobile-combined-style-modal__cancel:focus-visible {
background: var(--tc-editor-ui-popup-control-hover);
  color: var(--tc-control-text-hover);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal .mobile-combined-style-card {
background: var(--tc-editor-ui-popup-control);
}

/* Migrated from styles/features/gallery/gallery-modal-combined-styles.css. */
.tc-select-menu.has-combined-style-modal .mobile-combined-style-card:hover,
.tc-select-menu.has-combined-style-modal .mobile-combined-style-card:focus-visible,
.tc-select-menu.has-combined-style-modal .mobile-combined-style-card:focus-within {
background: var(--tc-editor-ui-popup-control-hover);
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px) {
.modal-style-field .tc-select-button {
width: fit-content;
    max-width: 100%;
    min-height: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--tc-color-transparent);
    border-radius: var(--tc-radius-sm);
    background: var(--tc-color-transparent);
    gap: var(--tc-space-4);
    padding: 0 0.125rem 0 0;
    font-size: var(--tc-type-editor-style-select-size);
    box-shadow: none;
}
}

@media (max-width: 760px), (max-width: 900px) and (hover: none) and (pointer: coarse) {
.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select {
min-width: 0;
    width: max-content;
    max-width: 100%;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select-button {
width: max-content;
    min-width: 0;
    max-width: 100%;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select-value.has-preview {
min-width: 0;
    max-width: 100%;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select-value-preview {
flex: 0 0 2.5rem;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field .tc-select-value-preview img {
object-fit: contain;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field:not(.has-combined-styles) .tc-select-button {
min-height: var(--tc-combined-style-thumb-size-mobile);
    height: var(--tc-combined-style-thumb-size-mobile);
    padding-inline-start: var(--tc-space-4);
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field:not(.has-combined-styles) .tc-select-value.has-preview {
gap: var(--tc-space-7);
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field:not(.has-combined-styles) .tc-select-value-preview {
flex: 0 0 var(--tc-combined-style-thumb-size-mobile);
    width: var(--tc-combined-style-thumb-size-mobile);
    height: var(--tc-combined-style-thumb-size-mobile);
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field:not(.has-combined-styles) .tc-select-value-preview img {
object-fit: cover;
}

.editor-modal-frame > .editor-modal-header[data-inline-editor-header="true"] .modal-style-field.has-combined-styles .tc-select-value-label {
display: none;
}
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px) {
.modal-style-field .tc-select-bookmark-icon {
width: 0.75rem;
    height: 0.75rem;
    color: var(--tc-accent-main);
    filter: var(--tc-accent-icon-glow);
}
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px) {
.modal-style-field .tc-select-bookmark-icon svg {
fill: currentColor;
    stroke: none;
}
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px) {
.modal-style-field .tc-select-option.has-badge:not(.has-preview) {
grid-template-columns: minmax(0, 1fr) 1.125rem;
    gap: 0.75rem;
    padding-right: clamp(1.25rem, 4vw, 1.75rem);
}
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px) {
.modal-style-field .tc-select-option-bookmark {
width: 1.125rem;
    height: 1.125rem;
    color: var(--tc-accent-main);
    filter: var(--tc-accent-icon-glow);
}
}

/* Migrated from styles/features/gallery/gallery-responsive.css. */
@media (max-width: 760px) {
.modal-style-field .tc-select-option-bookmark svg {
fill: currentColor;
    stroke: none;
}
}
}

/* source: shared/styles/components/scrub.css */
@layer components {
/* Shared range scrubber styling for precise numeric controls. */
.range-wrap.is-scrubbed {
  position: relative;
  display: block;
}

.tc-scrub-native {
  position: absolute;
  inset: auto;
  width: 1px;
  height: 1px;
  min-width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.range-wrap.is-scrubbed .value-pill {
  display: none;
}

.tc-scrub {
  --tc-scrub-bg: var(--tc-editor-scrub-bg);
  --tc-scrub-line: var(--tc-color-transparent);
  --tc-scrub-line-strong: var(--tc-color-transparent);
  --tc-scrub-text: var(--tc-control-text);
  --tc-scrub-muted: var(--tc-control-text-muted);
  --tc-scrub-accent: var(--tc-accent-main);
  width: 100%;
  min-height: var(--tc-control-height-scrub);
  display: grid;
  grid-template-columns: var(--tc-scrub-grid-edge) minmax(0, 1fr) var(--tc-scrub-grid-edge);
  align-items: center;
  gap: var(--tc-scrub-gap);
  padding: var(--tc-scrub-padding-y) var(--tc-scrub-padding-x);
  border: 1px solid var(--tc-scrub-line);
  border-radius: var(--tc-scrub-radius);
  background: var(--tc-scrub-bg);
  color: var(--tc-scrub-text);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  transition: none;
}

.tc-scrub:hover,
.tc-scrub:focus-visible {
  border-color: var(--tc-control-border-hover);
  background: var(--tc-editor-scrub-bg-hover);
  color: var(--tc-control-text-hover);
  outline: 0;
  box-shadow: none;
}

.tc-scrub.is-scrubbing,
.tc-scrub.is-armed {
  border-color: var(--tc-control-border-active);
  background: var(--tc-editor-scrub-bg-active);
  color: var(--tc-text-bright);
  outline: 0;
  box-shadow: none;
}

body.is-scrubbing .tc-scrub,
body.is-scrubbing .tc-scrub-value,
body.is-scrubbing .tc-scrub-arrow,
.tc-scrub.is-scrubbing,
.tc-scrub.is-scrubbing .tc-scrub-value,
.tc-scrub.is-scrubbing .tc-scrub-arrow {
  transition: none;
}

.tc-scrub--vertical,
.tc-scrub.is-vertical-scrub {
  cursor: ns-resize;
}

.tc-scrub--compact-menu {
  --tc-scrub-bg: var(--tc-compact-scrub-bg);
  --tc-scrub-text: var(--tc-compact-scrub-value-color);
  --tc-scrub-muted: var(--tc-compact-scrub-arrow-color);
  background: var(--tc-compact-scrub-bg);
}

.tc-scrub--compact-menu:hover,
.tc-scrub--compact-menu:focus-visible {
  background: var(--tc-compact-scrub-bg-hover);
  color: var(--tc-compact-scrub-value-color-active);
}

.tc-scrub--compact-menu.is-scrubbing,
.tc-scrub--compact-menu.is-armed {
  background: var(--tc-compact-scrub-bg-active);
  color: var(--tc-compact-scrub-value-color-active);
}

.tc-scrub-field--compact-menu label:not(.sr-only) {
  color: var(--tc-compact-scrub-label-color);
  opacity: var(--tc-compact-scrub-label-opacity);
}

.tc-scrub-field--compact-menu:hover label:not(.sr-only),
.tc-scrub-field--compact-menu:focus-within label:not(.sr-only) {
  color: var(--tc-compact-scrub-label-color-active);
  opacity: var(--tc-compact-scrub-label-opacity-active);
}

.tc-scrub.is-disabled {
  color: var(--tc-text-disabled);
  cursor: default;
  opacity: var(--tc-state-disabled-opacity);
}

.tc-scrub-value {
  min-width: 0;
  color: var(--tc-scrub-text);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tc-scrub-arrow {
  width: 7px;
  height: 7px;
  color: var(--tc-scrub-muted);
}

.tc-scrub-arrow::before {
  content: "";
  display: block;
  width: var(--tc-icon-size-sm);
  height: var(--tc-icon-size-sm);
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
}

.tc-scrub-arrow-left::before {
  transform: translate(2px, 0) rotate(-45deg);
}

.tc-scrub-arrow-right::before {
  transform: translate(-1px, 0) rotate(135deg);
}

body.is-scrubbing {
  cursor: ew-resize;
  user-select: none;
}

body.is-vertical-scrubbing {
  cursor: ns-resize;
}

@media (max-width: 560px) {
  body:not([data-editor-compact-controls="on"]) .tc-scrub {
    min-height: var(--tc-scrub-mobile-height);
    grid-template-columns: var(--tc-scrub-mobile-grid-edge) minmax(0, 1fr) var(--tc-scrub-mobile-grid-edge);
    gap: var(--tc-scrub-mobile-gap);
    padding: 0 var(--tc-scrub-mobile-padding-x);
    border-radius: var(--tc-scrub-radius-sm);
  }

  body:not([data-editor-compact-controls="on"]) .tc-scrub-value {
    font-size: 0.625rem;
    line-height: 1;
    align-self: center;
    justify-self: center;
    padding-top: 0.25rem;
  }

  body:not([data-editor-compact-controls="on"]) .tc-scrub-arrow {
    justify-self: center;
  }
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact:focus,
body[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact:focus-visible,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub:focus,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub:focus-visible,
.editor-controls.compact-controls .tc-icon-btn--compact:focus,
.editor-controls.compact-controls .tc-icon-btn--compact:focus-visible,
.editor-controls.compact-controls .tc-scrub:focus,
.editor-controls.compact-controls .tc-scrub:focus-visible {
  outline: 0;
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls [data-compact-menu-select].compact-menu-attention-pulse,
.editor-controls.compact-controls [data-compact-menu-select].compact-menu-attention-pulse,
body[data-editor-compact-controls="on"] .editor-controls [data-editor-action].compact-menu-attention-pulse,
.editor-controls.compact-controls [data-editor-action].compact-menu-attention-pulse,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field.compact-menu-attention-pulse,
.editor-controls.compact-controls .compact-scrub-field.compact-menu-attention-pulse,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.compact-menu-attention-pulse,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.compact-menu-attention-pulse {
  animation:
    compact-menu-attention-pulse 460ms cubic-bezier(0.4, 0, 0.2, 1) 0s var(--tc-compact-menu-attention-repeats, 2) both;
  will-change: box-shadow;
  border-color: var(--tc-editor-ui-attention-line-strong);
  position: relative;
  z-index: 3;
  box-shadow:
    0 0 0 0 var(--tc-color-transparent),
    inset 0 0 0 1px var(--tc-editor-ui-attention-line);
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub {
  position: relative;
  width: 100%;
  height: var(--compact-control-height);
  min-height: var(--compact-control-height);
  max-height: var(--compact-control-height);
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    var(--tc-compact-scrub-grid-edge)
    minmax(0, 1fr)
    var(--tc-compact-scrub-grid-edge);
  gap: var(--tc-compact-scrub-gap-y) 0;
  place-items: center;
  padding: var(--tc-compact-scrub-padding-y) var(--tc-compact-scrub-padding-x);
  border-color: var(--tc-color-transparent);
  border-radius: var(--tc-compact-control-radius);
  background: var(--tc-compact-scrub-bg);
  color: var(--tc-compact-scrub-value-color);
  cursor: ns-resize;
  touch-action: pan-x;
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .tc-compact-control[data-compact-options-disabled="true"],
.editor-controls.compact-controls .tc-compact-control[data-compact-options-disabled="true"] {
  opacity: var(--tc-state-disabled-opacity);
  filter: var(--tc-filter-control-disabled);
  cursor: help;
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:not(.has-expanded-control),
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:not(.has-expanded-control) {
  opacity: var(--tc-compact-muted-group-opacity);
  filter: var(--tc-filter-control-muted);
  transition:
    opacity var(--tc-compact-pulsed-control-return-duration) var(--tc-ease-standard),
    filter var(--tc-compact-pulsed-control-return-duration) var(--tc-ease-standard);
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-icon-btn--compact:not([data-compact-options-disabled="true"]),
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-icon-btn--compact:not([data-compact-options-disabled="true"]),
body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-scrub,
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-scrub {
  opacity: var(--tc-compact-muted-control-opacity);
  filter: var(--tc-filter-control-muted);
  transition:
    opacity var(--tc-compact-pulsed-control-return-duration) var(--tc-ease-standard),
    filter var(--tc-compact-pulsed-control-return-duration) var(--tc-ease-standard);
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category.has-attention-pulse,
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category.has-attention-pulse,
body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-menu-attention-pulse,
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-menu-attention-pulse {
  opacity: var(--tc-compact-pulsed-control-opacity);
  filter: none;
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:not(.has-expanded-control) .tc-icon-btn--compact:not([data-compact-options-disabled="true"]),
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:not(.has-expanded-control) .tc-icon-btn--compact:not([data-compact-options-disabled="true"]),
body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:not(.has-expanded-control) .tc-scrub,
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .compact-category:not(.has-expanded-control) .tc-scrub {
  opacity: 1;
  filter: none;
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-icon-btn--compact[aria-expanded="true"],
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-icon-btn--compact[aria-expanded="true"] {
  opacity: var(--tc-compact-open-control-opacity);
  filter: none;
}

body[data-editor-compact-controls="on"] .editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-icon-btn--compact[data-compact-options-state-changing="true"],
.editor-dialog.has-open-compact-menu .editor-controls.compact-controls .tc-icon-btn--compact[data-compact-options-state-changing="true"] {
  transition: none;
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub:hover,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub:hover,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub:focus-visible,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub:focus-visible,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.is-scrubbing,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.is-scrubbing,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub:hover,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub:focus-visible,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.is-scrubbing {
  border-color: var(--tc-color-transparent);
  background: var(--tc-compact-scrub-bg-hover);
  outline: 0;
  box-shadow: none;
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.is-scrubbing,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.is-scrubbing,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.is-scrubbing {
  touch-action: none;
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.is-armed,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.is-armed,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.is-armed {
  border-color: var(--tc-color-transparent);
  background: var(--tc-compact-scrub-bg-active);
  color: var(--tc-compact-scrub-value-color-active);
  box-shadow: none;
  touch-action: pan-x;
}

/* Migrated from styles/features/editor-controls/compact-transform-deck.css. */
body.is-compact-controls-scrolling[data-editor-compact-controls="on"] .editor-controls .tc-icon-btn--compact,
body.is-compact-controls-scrolling .editor-controls.compact-controls .tc-icon-btn--compact,
body.is-compact-controls-scrolling[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub,
body.is-compact-controls-scrolling .editor-controls.compact-controls .compact-scrub-field .tc-scrub {
  border-color: var(--tc-color-transparent);
  background: var(--tc-compact-scrub-bg);
  color: var(--tc-compact-scrub-value-color);
  box-shadow: none;
}

/* Migrated from styles/features/editor/editor-export.css. */
@media (max-width: 560px) {
body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .tc-scrub,
  body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .tc-icon-btn--editor-action {
    min-height: var(--editor-control-row-height);
    height: var(--editor-control-row-height);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-radius: var(--editor-mobile-radius);
    font-size: 0.625rem;
  }
}

/* Migrated from styles/features/editor/editor-export.css. */
@media (max-width: 560px) {
body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .tc-scrub {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem;
    align-items: center;
  }
}

/* Migrated from styles/features/editor/editor-export.css. */
@media (max-width: 560px) {
body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .field.has-scrub-control > label {
    left: 1.6rem;
    top: 0.28rem;
    max-width: calc(100% - 3.2rem);
  }
}

/* Migrated from styles/features/editor/editor-responsive.css. */
@media (max-width: 560px) {
body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .tc-scrub {
    align-items: center;
  }
}

/* Migrated tc-* feature rules into component ownership. */
/* Migrated from styles/features/editor-controls/compact-scrub-export.css. */
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-value {
opacity: 1;
}

/* Migrated from styles/features/editor-controls/compact-scrub-export.css. */
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow {
opacity: 0.82;
}

/* Migrated from styles/features/editor-controls/compact-scrub-export.css. */
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-value {
color: var(--tc-text-bright);
}

/* Migrated from styles/features/editor-controls/compact-scrub-export.css. */
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow {
color: var(--tc-editor-scrub-fill-active);
}

/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub-value,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-value {
min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: var(--tc-color-transparent);
  color: var(--tc-text-readable);
  font-size: var(--compact-font-value);
  font-weight: var(--tc-type-compact-control-value-weight);
  line-height: 1;
  text-align: center;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
}

/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub-arrow,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow {
display: block;
  width: var(--tc-icon-size-xs);
  height: var(--tc-icon-size-xs);
  color: var(--tc-text-muted);
  align-self: center;
  justify-self: center;
  opacity: 0.72;
}

/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub-arrow-up,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub-arrow-up,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow-up {
grid-column: 1;
  grid-row: 1;
}

/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub-arrow-up::before,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub-arrow-up::before,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow-up::before {
transform: translateY(2px) rotate(45deg);
}

/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub-arrow-down,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub-arrow-down,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow-down {
grid-column: 1;
  grid-row: 3;
}

/* Migrated from styles/features/editor-controls/compact-menu.css. */
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub-arrow-down::before,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub-arrow-down::before,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub-arrow-down::before {
transform: translateY(-1px) rotate(-135deg);
}

body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu .tc-scrub-value,
.editor-controls.compact-controls .tc-scrub--compact-menu .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu .tc-scrub-value {
  color: var(--tc-compact-scrub-value-color);
  opacity: var(--tc-compact-scrub-value-opacity);
}

body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu:hover .tc-scrub-value,
.editor-controls.compact-controls .tc-scrub--compact-menu:hover .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu:focus-visible .tc-scrub-value,
.editor-controls.compact-controls .tc-scrub--compact-menu:focus-visible .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu.is-scrubbing .tc-scrub-value,
.editor-controls.compact-controls .tc-scrub--compact-menu.is-scrubbing .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu.is-armed .tc-scrub-value,
.editor-controls.compact-controls .tc-scrub--compact-menu.is-armed .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu:hover .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu:focus-visible .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu.is-scrubbing .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu.is-armed .tc-scrub-value {
  color: var(--tc-compact-scrub-value-color-active);
  opacity: var(--tc-compact-scrub-value-opacity-active);
}

body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu .tc-scrub-arrow,
.editor-controls.compact-controls .tc-scrub--compact-menu .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu .tc-scrub-arrow {
  color: var(--tc-compact-scrub-arrow-color);
  opacity: var(--tc-compact-scrub-arrow-opacity);
}

body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu:hover .tc-scrub-arrow,
.editor-controls.compact-controls .tc-scrub--compact-menu:hover .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu:focus-visible .tc-scrub-arrow,
.editor-controls.compact-controls .tc-scrub--compact-menu:focus-visible .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu.is-scrubbing .tc-scrub-arrow,
.editor-controls.compact-controls .tc-scrub--compact-menu.is-scrubbing .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .tc-scrub--compact-menu.is-armed .tc-scrub-arrow,
.editor-controls.compact-controls .tc-scrub--compact-menu.is-armed .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu:hover .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu:focus-visible .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu.is-scrubbing .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .tc-scrub--compact-menu.is-armed .tc-scrub-arrow {
  color: var(--tc-compact-scrub-arrow-color-active);
  opacity: var(--tc-compact-scrub-arrow-opacity-active);
}

/* Migrated from styles/features/editor/editor-export.css. */
@media (max-width: 560px) {
body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .tc-scrub-value {
min-height: 100%;
    display: grid;
    place-items: center;
}
}

/* Migrated from styles/features/editor/editor-responsive.css. */
@media (max-width: 560px) {
body:not([data-editor-compact-controls="on"]) .editor-controls:not(.compact-controls) .tc-scrub-value {
line-height: 1;
}
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing .tc-scrub-value,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed .tc-scrub-value,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu .tc-scrub-value,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover .tc-scrub-value,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible .tc-scrub-value,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing .tc-scrub-value,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing .tc-scrub-value,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed .tc-scrub-value {
  color: var(--tc-compact-scrub-value-color);
  opacity: var(--tc-compact-scrub-value-opacity);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible {
  background: var(--tc-compact-scrub-bg);
  color: var(--tc-compact-scrub-value-color);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible {
  background: var(--tc-compact-scrub-bg-hover);
  color: var(--tc-compact-scrub-value-color-active);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed {
  background: var(--tc-compact-scrub-bg-active);
  color: var(--tc-compact-scrub-value-color-active);
}

body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing .tc-scrub-arrow,
body[data-editor-compact-controls="on"] .editor-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed .tc-scrub-arrow,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu .tc-scrub-arrow,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover .tc-scrub-arrow,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible .tc-scrub-arrow,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing .tc-scrub-arrow,
.editor-controls.compact-controls .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:hover .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu:focus-visible .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-scrubbing .tc-scrub-arrow,
.compact-scrub-menu.compact-scrub-menu--vertical .compact-scrub-field .tc-scrub.tc-scrub--compact-menu.is-armed .tc-scrub-arrow {
  color: var(--tc-compact-scrub-arrow-color);
  opacity: var(--tc-compact-scrub-arrow-opacity);
}
}

/* source: shared/styles/features/hero/hero-shell.css */
@layer features {
/* Landing-page hero, navigation, and primary visual composition. */
.hero-landing {
    --tc-hero-top-space: clamp(68px, 8vh, 88px);
    --tc-hero-cue-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 18px));
    --tc-hero-mobile-keyboard-input-y: 38%;
    --tc-hero-mobile-keyboard-scroll-offset: 0px;
    --tc-hero-keyboard-lift: 0px;
    --tc-hero-stable-height: 100vh;
    --tc-hero-mobile-scale: 1;
    --stage-width: 2550px;
    position: relative;
    z-index: 1;
    height: var(--tc-hero-stable-height);
    padding-top: var(--tc-hero-top-space);
    background: var(--tc-bg-app);
    overflow: hidden;
    isolation: isolate;
}

.site-nav {
    position: fixed;
    left: 50%;
    top: clamp(12px, 2vw, 22px);
    z-index: 1000;
    gap: var(--tc-space-7);
    width: min(832px, calc(100% - 28px));
    min-height: 43px;
    padding: var(--tc-space-3) var(--tc-space-4) var(--tc-space-3) var(--tc-space-7);
    border: 1px solid var(--tc-color-transparent);
    border-radius: var(--tc-radius-md);
    background: var(--tc-panel-bg);
    box-shadow: none;
    -webkit-backdrop-filter: var(--tc-glass-filter);
    backdrop-filter: var(--tc-glass-filter);
    transform: translateX(-50%);
    overflow: visible;
}

.site-nav::before {
    content: none;
}

.site-nav__brand {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    color: var(--tc-text-strong);
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
}

.site-nav__links {
    position: relative;
    z-index: 1;
    gap: clamp(var(--tc-space-1-5), 0.56vw, var(--tc-space-4));
}

.site-nav__links > a,
.site-nav__links > span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    padding: 0 clamp(var(--tc-space-3-5), 0.96vw, var(--tc-space-6));
    border-radius: var(--tc-radius-chip);
    color: var(--tc-text-medium);
    font-size: 0.65rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    isolation: isolate;
    transition: background-color 220ms var(--tc-ease-standard), color 220ms var(--tc-ease-standard);
}

.site-nav__links > a > .editor-frame-overlay--nav-item {
    inset: -6px;
    z-index: 0;
    display: none;
    visibility: hidden;
    filter: var(--tc-filter-brightness-072);
}

.site-nav__links > a:hover,
.site-nav__links > a:focus-visible {
    background: var(--tc-surface-control-hover);
    color: var(--tc-text-bright);
    outline: 0;
}

.site-nav__links > a.is-active {
    background: var(--tc-surface-control-active);
    color: var(--tc-text-bright);
    outline: 0;
    box-shadow: none;
}

.site-nav__links > a.is-active > .editor-frame-overlay--nav-item {
    visibility: visible;
    filter: var(--tc-filter-brightness-074);
}

@media (hover: none) and (pointer: coarse) {
    .site-nav__links > a:hover,
    .site-nav__links > a:focus,
    .site-nav__links > a:focus-visible {
        background: var(--tc-color-transparent);
        color: var(--tc-text-medium);
        box-shadow: none;
        outline: 0;
    }

    .site-nav__links > a.is-active,
    .site-nav__links > a.is-active:hover,
    .site-nav__links > a.is-active:focus,
    .site-nav__links > a.is-active:focus-visible {
        background: var(--tc-surface-control-active);
        color: var(--tc-text-bright);
        box-shadow: none;
    }
}

.site-nav__links > span {
    cursor: default;
}

.hero-landing__stage {
    position: relative;
    left: 50%;
    width: var(--stage-width);
    height: calc(100dvh - var(--tc-hero-top-space));
    margin: 0;
    margin-top: calc(var(--tc-hero-keyboard-lift) * -1);
    background: var(--tc-color-transparent);
    overflow: visible;
    transform: translateX(-50%) scale(var(--tc-hero-mobile-scale));
    transform-origin: top center;
}

.hero-wordmark {
    position: absolute;
    z-index: 15;
    aspect-ratio: 1447 / 818;
    text-align: center;
    transform: translateX(-50%);
}

.hero-wordmark.is-preview-text > .hero-asset {
    opacity: 0;
    visibility: hidden;
}

.hero-preview-text {
    /* Horizontal fitting zone. Larger values let generated text use more width before scaling down. */
    --tc-hero-preview-zone-width: 2;
    /* Vertical fitting zone for one-line generated text. Larger values allow taller text. */
    --tc-hero-preview-zone-height-single: 1.5;
    /* Vertical fitting zone for two-line generated text. Larger values allow taller stacked text. */
    --tc-hero-preview-zone-height-multi: 2.5;
    /* Starting glyph height for one-line text, as a ratio of the hero wordmark height. */
    --tc-hero-preview-glyph-height-single: 0.5;
    /* Starting glyph height for two-line text, as a ratio of the hero wordmark height. */
    --tc-hero-preview-glyph-height-multi: 0.5;
    /* Vertical spacing between generated lines, as a ratio of the hero wordmark height. */
    --tc-hero-preview-line-gap: 0.028;
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: visible;
    pointer-events: none;
}

.hero-preview-text[hidden] {
    display: none;
}

.hero-preview-glyph {
    --tc-hero-preview-rotate: 0deg;
    position: absolute;
    display: block;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    transform: rotate(var(--tc-hero-preview-rotate, 0deg));
    transform-origin: 50% 62%;
    filter: none;
}

.hero-preview-glyph--image {
  position: relative;
  overflow: visible;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: var(--tc-color-transparent);
}

.hero-preview-glyph--image > .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;
}

.hero-preview-line {
  min-height: 1px;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .hero-preview-text {
    --tc-hero-preview-zone-width: 1.18;
    --tc-hero-preview-line-gap: 0.095;
  }
}

.hero-asset {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: var(--z, 1);
    width: var(--w);
    height: auto;
    transform: translate3d(var(--tc-move-x, 0px), var(--tc-move-y, 0px), 0) scale(var(--tc-scale, 1));
    user-select: none;
    pointer-events: none;
}

.hero-float {
    left: var(--x);
    top: var(--y);
    width: var(--size);
    opacity: var(--active-opacity, var(--opacity, 0.42));
    filter: brightness(var(--tc-active-brightness, var(--tc-float-brightness, 0.88)));
    transform:
        translate3d(var(--tc-move-x, 0px), var(--tc-move-y, 0px), 0)
        scale(var(--tc-scale, 1));
    transition:
        filter 280ms var(--tc-ease-standard),
        opacity 280ms var(--tc-ease-standard);
}

.hero-landing.is-input-active .hero-float {
    --active-opacity: var(--dim-opacity, 0.3);
    --tc-active-brightness: var(--dim-brightness, 0.42);
}

@media (prefers-reduced-motion: reduce) {
    .hero-float {
        animation: none;
        transition: none;
    }
}

@media (hover: hover) and (pointer: fine) {
    .hero-landing.is-runtime-active .hero-asset {
        will-change: transform;
    }
}

@media (hover: none) and (pointer: coarse) {
    .hero-float {
        filter: brightness(var(--tc-active-brightness, var(--tc-float-brightness, 0.88)));
    }
}

.hero-landing__input {
    --tc-hero-input-hover: var(--tc-surface-raised);
    --tc-hero-input-width: 236px;
    --tc-hero-input-height: 50px;
    position: absolute;
    z-index: 30;
    display: grid;
    place-items: center;
    width: var(--tc-hero-input-width);
    height: var(--tc-hero-input-height);
    min-height: var(--tc-hero-input-height);
    max-height: var(--tc-hero-input-height);
    overflow: visible;
    border: 0;
    border-radius: var(--tc-radius-xs);
    background: var(--tc-surface-main);
    color: var(--tc-text-bright);
    box-shadow: none;
    transform: translateX(-50%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color 240ms var(--tc-ease-standard), box-shadow 280ms var(--tc-ease-standard);
}

.hero-landing__input::before {
    content: none;
}

.hero-landing__input::after {
    content: none;
}

.hero-landing__input .editor-frame-overlay {
    inset: -11px;
    z-index: 0;
    display: block;
    visibility: visible;
    filter: var(--tc-filter-brightness-034);
}

.hero-landing__input:hover,
.hero-landing__input:focus-within,
.hero-landing.is-input-active .hero-landing__input {
    background: var(--tc-hero-input-hover);
    box-shadow: none;
}

.hero-landing__input:focus-within,
.hero-landing.is-input-active .hero-landing__input {
    outline: 0;
    box-shadow: none;
}

.hero-landing__input:focus-within .editor-frame-overlay,
.hero-landing.is-input-active .hero-landing__input .editor-frame-overlay {
    filter: var(--tc-filter-brightness-068);
}

.hero-landing__input:hover:not(:focus-within) .editor-frame-overlay {
    filter: var(--tc-filter-brightness-046);
}

.hero-landing__input-border {
    display: none;
}

.hero-landing__input-actions {
    position: absolute;
    z-index: 29;
    width: 252px;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tc-space-4);
    color: var(--tc-text-disabled);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity 360ms var(--tc-ease-standard), transform 360ms var(--tc-ease-standard);
}

.hero-landing__input-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tc-space-4-5);
}

.hero-landing__input-note {
    position: relative;
    min-height: var(--tc-control-height-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--tc-space-4-5);
    border: 1px solid var(--tc-border-strong);
    border-radius: var(--tc-radius-control-compact);
    background: var(--tc-surface-hero-control);
    color: var(--tc-text-muted);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 560;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    transition:
        transform 260ms var(--tc-ease-standard),
        border-color 260ms var(--tc-ease-standard),
        background-color 260ms var(--tc-ease-standard),
        color 260ms var(--tc-ease-standard);
}

.hero-landing__input-hint {
    min-height: 0;
    margin: 0;
    padding: var(--tc-space-3-5) var(--tc-space-5) var(--tc-space-4);
    border: 1px solid var(--tc-border-strong);
    border-radius: var(--tc-radius-control-compact);
    background: var(--tc-surface-hero-control-muted);
    color: var(--tc-text-low);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.22;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    transition:
        border-color 260ms var(--tc-ease-standard),
        opacity 260ms var(--tc-ease-standard),
        transform 260ms var(--tc-ease-standard);
}

.hero-landing__input-hint strong,
.hero-landing__input-hint span {
    display: block;
}

.hero-landing__input-hint strong {
    margin-bottom: var(--tc-space-1-5);
    color: var(--tc-text-readable);
    font-size: 0.75rem;
    font-weight: 610;
}

.hero-landing__input-actions.has-hint .hero-landing__input-hint {
    border-color: var(--tc-surface-fill);
    opacity: 1;
    transform: translateY(0);
}

.hero-landing__input-note--primary {
    border-color: var(--tc-control-border-hover);
    background: var(--tc-control-bg-hover);
    color: var(--tc-control-text);
}

.hero-landing.is-input-active .hero-landing__input-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.hero-landing__input-note:hover,
.hero-landing__input-note:focus-visible {
    border-color: var(--tc-border-selected);
    background: var(--tc-state-selected-bg);
    color: var(--tc-text-high);
    transform: translateY(-1px);
}

.hero-landing__input-note--primary:hover,
.hero-landing__input-note--primary:focus-visible {
    border-color: var(--tc-control-border-hover);
    background: var(--tc-control-bg-active);
    color: var(--tc-control-text-hover);
}

.hero-landing__input-note:focus-visible {
    outline: 0;
}

.hero-landing__text-input {
    --tc-hero-input-padding-x: 12px;
    --tc-hero-input-padding-y: 10px;
    --tc-hero-input-font-size: 1.12rem;
    --tc-hero-input-line-height: 1.28;
    --tc-hero-input-line-box: 1.4336rem;
    --tc-hero-input-text-block: var(--tc-hero-input-line-box);
    --tc-hero-input-fit-font-size: var(--tc-hero-input-font-size);
    --tc-hero-input-fit-text-block: var(--tc-hero-input-text-block);
    --tc-hero-input-padding-block: max(0px, calc((var(--tc-hero-input-height, 72px) - var(--tc-hero-input-fit-text-block)) / 2));
    --tc-hero-input-font-weight: 430;
    --tc-hero-input-two-line-padding-y: 7px;
    --tc-hero-input-two-line-font-size: 0.82rem;
    --tc-hero-input-two-line-line-height: 1.12;
    --tc-hero-input-two-line-line-box: 0.9184rem;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    border: 0;
    background: var(--tc-color-transparent);
    color: var(--tc-text-bright);
    padding: var(--tc-hero-input-padding-block) var(--tc-hero-input-padding-x);
    font: inherit;
    font-size: var(--tc-hero-input-fit-font-size);
    font-weight: var(--tc-hero-input-font-weight);
    line-height: var(--tc-hero-input-line-height);
    text-align: center;
    outline: 0;
    overflow: hidden;
    resize: none;
    transition: color 260ms var(--tc-ease-standard);
}
}

/* source: shared/styles/features/hero/hero-preview.css */
@layer features {

.hero-landing__text-input:focus-visible {
    outline: 0;
    box-shadow: none;
}

.hero-landing__text-input:focus {
    outline: 0;
    box-shadow: none;
}

.hero-landing__text-input.has-two-lines {
    --tc-hero-input-font-size: var(--tc-hero-input-two-line-font-size);
    --tc-hero-input-line-height: var(--tc-hero-input-two-line-line-height);
    --tc-hero-input-line-box: var(--tc-hero-input-two-line-line-box);
    --tc-hero-input-text-block: calc(var(--tc-hero-input-two-line-line-box) + var(--tc-hero-input-two-line-line-box));
}

.hero-landing__text-input::placeholder {
    color: var(--tc-text-high);
    opacity: 1;
    transition: color 260ms var(--tc-ease-standard);
}

.hero-landing__input:focus-within .hero-landing__text-input::placeholder,
.hero-landing.is-input-active .hero-landing__text-input::placeholder {
    color: var(--tc-text-low);
    opacity: 0;
}

.hero-scroll-cue {
    position: absolute;
    left: 50%;
    top: auto;
    right: auto;
    bottom: var(--tc-hero-cue-bottom);
    inset-block-start: auto;
    inset-block-end: var(--tc-hero-cue-bottom);
    z-index: 80;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tc-space-4-5);
    min-width: 132px;
    min-height: 42px;
    padding: 0;
    border: 0;
    background: var(--tc-color-transparent);
    color: var(--tc-text-muted);
    text-shadow: none;
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    text-align: center;
    opacity: 1;
    filter: none;
    transform: translateX(-50%);
    visibility: visible;
    transition:
        opacity 180ms linear,
        color 240ms var(--tc-ease-standard),
        visibility 0s linear 0s;
}

.hero-scroll-cue span {
    display: block;
    width: 100%;
    text-align: center;
    opacity: var(--tc-hero-scroll-cue-opacity-low);
    animation: heroScrollCueTextOpacityPulse var(--tc-hero-scroll-cue-pulse-duration) ease-in-out infinite;
    will-change: opacity;
}

.hero-scroll-cue::after {
    content: "";
    display: block;
    width: 12px;
    height: 11px;
    margin: 0 auto;
    background: currentColor;
    clip-path: polygon(50% 100%, 2% 43%, 16% 31%, 50% 64%, 84% 31%, 98% 43%);
    opacity: var(--tc-hero-scroll-cue-opacity-high);
    transform: translateY(var(--tc-hero-scroll-cue-arrow-y-low)) scale(0.92);
    transform-origin: 50% 50%;
    animation:
        heroScrollCueArrowPulse var(--tc-hero-scroll-cue-pulse-duration) ease-in-out infinite,
        heroScrollCueArrowOpacityPulse var(--tc-hero-scroll-cue-pulse-duration) ease-in-out infinite;
    animation-delay:
        var(--tc-hero-scroll-cue-arrow-delay),
        var(--tc-hero-scroll-cue-arrow-delay);
    will-change: transform, opacity;
}

.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
    color: var(--tc-text-muted);
    animation: none;
    outline: 0;
    transform: translateX(-50%);
}

.hero-scroll-cue:hover span,
.hero-scroll-cue:focus-visible span {
    opacity: var(--tc-hero-scroll-cue-opacity-hover);
    animation: none;
}

.hero-scroll-cue.is-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateX(-50%);
    transition:
        opacity 180ms linear,
        visibility 0s linear 180ms;
}

@keyframes heroScrollCueTextOpacityPulse {
    0%,
    100% {
        opacity: var(--tc-hero-scroll-cue-opacity-low);
    }

    50% {
        opacity: var(--tc-hero-scroll-cue-opacity-high);
    }
}

@keyframes heroScrollCueArrowPulse {
    0%,
    100% {
        transform: translateY(var(--tc-hero-scroll-cue-arrow-y-low)) scale(0.92);
    }

    50% {
        transform: translateY(var(--tc-hero-scroll-cue-arrow-y-high)) scale(0.92);
    }
}

@keyframes heroScrollCueArrowOpacityPulse {
    0%,
    100% {
        opacity: var(--tc-hero-scroll-cue-opacity-high);
    }

    50% {
        opacity: var(--tc-hero-scroll-cue-opacity-low);
    }
}

.hero-landing__tagline,
.hero-landing__stat {
    display: none;
}

.hero-asset--title-t {
    --x: 18.55%;
    --y: 0.43%;
    --w: 25.57%;
    --z: 5;
}

.hero-asset--title-e {
    --x: 32.6%;
    --y: 12.16%;
    --w: 18.66%;
    --z: 7;
}

.hero-asset--title-x {
    --x: 45.02%;
    --y: 0.09%;
    --w: 25.57%;
    --z: 4;
}

.hero-asset--title-t2 {
    --x: 61.89%;
    --y: 7.42%;
    --w: 23.5%;
    --z: 8;
}

.hero-asset--title-c {
    --x: 0.03%;
    --y: 45.82%;
    --w: 26.95%;
    --z: 4;
}

.hero-asset--title-o {
    --x: 16.25%;
    --y: 57.07%;
    --w: 17.97%;
    --z: 7;
}

.hero-asset--title-l1 {
    --x: 20.86%;
    --y: 36.6%;
    --w: 33.17%;
    --z: 5;
}

.hero-asset--title-l2 {
    --x: 38.23%;
    --y: 54.51%;
    --w: 18.66%;
    --z: 6;
}

.hero-asset--title-a {
    --x: 51.38%;
    --y: 58.44%;
    --w: 14.51%;
    --z: 4;
}

.hero-asset--title-g {
    --x: 60.01%;
    --y: 44.82%;
    --w: 27.64%;
    --z: 6;
}

.hero-asset--title-e2 {
    --x: 76.95%;
    --y: 46.58%;
    --w: 22.81%;
    --z: 5;
}

.hero-asset--b {
    --depth: 0.32;
    --blur: 0.6px;
    --opacity: 0.44;
}

.hero-asset--q {
    --depth: 0.24;
    --blur: 1px;
    --opacity: 0.34;
}

.hero-asset--s {
    --depth: 0.42;
    --blur: 0.4px;
    --opacity: 0.48;
}

.hero-asset--f {
    --depth: 0.28;
    --blur: 0.8px;
    --opacity: 0.38;
}

.hero-asset--m {
    --depth: 0.34;
    --blur: 0.7px;
    --opacity: 0.36;
}

.hero-asset--h {
    --depth: 0.5;
    --blur: 0.35px;
    --opacity: 0.5;
}

.hero-asset--ruler-e {
    --depth: 0.26;
    --blur: 0.9px;
    --opacity: 0.36;
}

.hero-asset--dollar {
    --depth: 0.86;
    --blur: 0;
    --opacity: 0.52;
}

.hero-asset--d {
    --depth: 0.34;
    --blur: 0.8px;
    --opacity: 0.3;
}

.hero-asset--r {
    --depth: 0.62;
    --blur: 0.25px;
    --opacity: 0.46;
}

.hero-asset--amp {
    --depth: 0.82;
    --blur: 0.15px;
    --opacity: 0.5;
}

.hero-asset--p {
    --depth: 1;
    --blur: 0.2px;
    --opacity: 0.54;
}

.hero-asset--x2 {
    --depth: 0.3;
    --blur: 0.9px;
    --opacity: 0.31;
}

.hero-asset--n {
    --depth: 0.24;
    --blur: 1.15px;
    --opacity: 0.24;
}

.hero-asset--comic-t {
    --depth: 0.28;
    --blur: 1px;
    --opacity: 0.29;
}

.hero-asset--dollar,
.hero-asset--p,
.hero-asset--amp {
    --dim-opacity: 0.25;
    --dim-brightness: 0.44;
}

.hero-asset--s,
.hero-asset--h,
.hero-asset--r,
.hero-asset--b {
    --dim-opacity: 0.2;
    --dim-brightness: 0.38;
}

.hero-asset--m,
.hero-asset--f,
.hero-asset--x2,
.hero-asset--ruler-e {
    --dim-opacity: 0.14;
    --dim-brightness: 0.32;
}

.hero-asset--q,
.hero-asset--d,
.hero-asset--n,
.hero-asset--comic-t {
    --dim-opacity: 0.1;
    --dim-brightness: 0.28;
}

/* Desktop hero layout. Edit this block for desktop positions. */
@media (min-width: 1101px) {
    .hero-landing {
        --stage-width: 2040px;
        --tc-hero-cue-bottom: -70px;
    height: clamp(1024px, 100vh, 1080px);
    }

    .hero-landing__stage {
        height: calc(100% - var(--tc-hero-top-space));
    }

  .hero-wordmark {
  left: 1020px;
  top: 196px;
  width: 448px;
}

.hero-landing__input {
  left: 1020px;
  top: 512px;
  --tc-hero-input-width: 236px;
  --tc-hero-input-height: 50px;
}

.hero-asset--b {
  --x: 605px;
  --y: 62px;
  --size: 109px;
  --tc-scale: 1;
}

.hero-asset--q {
  --x: 1510px;
  --y: 158px;
  --size: 54px;
  --tc-scale: 1;
}

.hero-asset--s {
  --x: 1748px;
  --y: -118px;
  --size: 166px;
  --tc-scale: 1;
}

.hero-asset--f {
  --x: -54px;
  --y: -96px;
  --size: 186px;
  --tc-scale: 1;
}

.hero-asset--m {
  --x: 1007px;
  --y: 81px;
  --size: 81px;
  --tc-scale: 1;
}

.hero-asset--h {
  --x: 1830px;
  --y: 214px;
  --size: 192px;
  --tc-scale: 1;
}

.hero-asset--ruler-e {
  --x: 1465px;
  --y: 871px;
  --size: 106px;
  --tc-scale: 1;
}

.hero-asset--dollar {
  --x: 188px;
  --y: 244px;
  --size: 244px;
  --tc-scale: 1;
}

.hero-asset--d {
  --x: 856px;
  --y: 721px;
  --size: 153px;
  --tc-scale: 1;
}

.hero-asset--r {
  --x: 292px;
  --y: 844px;
  --size: 120px;
  --tc-scale: 1;
}

.hero-asset--amp {
  --x: 518px;
  --y: 551px;
  --size: 122px;
  --tc-scale: 1;
}

.hero-asset--p {
  --x: 1648px;
  --y: 388px;
  --size: 177px;
  --tc-scale: 1;
}

.hero-asset--x2 {
  --x: 1226px;
  --y: 656px;
  --size: 94px;
  --tc-scale: 1;
}

.hero-asset--n {
  --x: -24px;
  --y: 632px;
  --size: 70px;
  --tc-scale: 1;
}

.hero-asset--comic-t {
  --x: 1852px;
  --y: 690px;
  --size: 113px;
  --tc-scale: 1;
}
}
}

/* source: shared/styles/features/hero/hero-responsive.css */
@layer mobile {

/* Tablet hero layout. Edit this block for tablet positions. */
@media (max-width: 1100px) and (min-width: 761px) {
    .hero-landing {
        --tc-hero-top-space: clamp(54px, 6.4vh, 70px);
        --tc-hero-cue-bottom: 44px;
        --stage-width: 720px;
        height: clamp(1024px, 100vh, 1060px);
    }

    .hero-landing__stage {
        height: calc(100% - var(--tc-hero-top-space));
    }

    .hero-scroll-cue,
    .hero-scroll-cue:hover,
    .hero-scroll-cue:focus-visible {
        left: 50%;
        top: auto;
        bottom: var(--tc-hero-cue-bottom);
        inset-block-start: auto;
        inset-block-end: var(--tc-hero-cue-bottom);
        transform: translate3d(-50%, 0, 0);
    }

    .hero-wordmark {
        left: 360px;
        top: 164px;
        width: 344px;
    }

    .hero-landing__input {
        left: 360px;
        top: 432px;
        --tc-hero-input-width: 226px;
        --tc-hero-input-height: 46px;
    }

    .hero-landing__text-input {
        --tc-hero-input-padding-x: 12px;
        --tc-hero-input-padding-y: 9px;
        --tc-hero-input-font-size: 1.02rem;
        --tc-hero-input-line-height: 1.26;
        --tc-hero-input-line-box: 1.2852rem;
        --tc-hero-input-two-line-padding-y: 7px;
        --tc-hero-input-two-line-font-size: 0.76rem;
        --tc-hero-input-two-line-line-height: 1.14;
        --tc-hero-input-two-line-line-box: 0.8664rem;
        height: 100%;
        min-height: 100%;
        max-height: 100%;
    }

    .hero-landing__input-actions {
        left: 360px;
        top: 486px;
        width: 226px;
    }

    .hero-landing__input .editor-frame-overlay {
        inset: -9px;
    }

    .hero-landing__input-note {
        min-height: var(--tc-control-height-sm);
        padding: 0 var(--tc-space-3-5);
        font-size: 0.6875rem;
    }

    .hero-landing__input-hint {
        padding: var(--tc-space-3) var(--tc-space-4) var(--tc-space-3-5);
        font-size: 0.625rem;
    }

    .hero-landing__input-hint strong {
        font-size: 0.6875rem;
    }

    .hero-asset--b {
        --x: 217px;
        --y: 45px;
        --size: 82px;
        --tc-scale: 1;
    }

    .hero-asset--q {
        --x: 688px;
        --y: 203px;
        --size: 46px;
        --tc-scale: 1;
    }

    .hero-asset--s {
        --x: 706px;
        --y: -4px;
        --size: 138px;
        --tc-scale: 1;
    }

    .hero-asset--f {
        --x: -36px;
        --y: -23px;
        --size: 85px;
        --tc-scale: 1;
    }

    .hero-asset--m {
        --x: 459px;
        --y: 26px;
        --size: 70px;
        --tc-scale: 1;
    }

    .hero-asset--h {
        --x: 548px;
        --y: 538px;
        --size: 77px;
        --tc-scale: 1;
    }

    .hero-asset--ruler-e {
        --x: 383px;
        --y: 721px;
        --size: 71px;
        --tc-scale: 1;
    }

    .hero-asset--dollar {
        --x: -29px;
        --y: 220px;
        --size: 111px;
        --tc-scale: 1;
    }

    .hero-asset--d {
        --x: 201px;
        --y: 860px;
        --size: 88px;
        --tc-scale: 1;
    }

    .hero-asset--r {
        --x: -70px;
        --y: 777px;
        --size: 86px;
        --tc-scale: 1;
    }

    .hero-asset--amp {
        --x: 93px;
        --y: 583px;
        --size: 94px;
        --tc-scale: 1;
    }

    .hero-asset--p {
        --x: 694px;
        --y: 542px;
        --size: 138px;
        --tc-scale: 1;
    }

    .hero-asset--x2 {
        --x: 610px;
        --y: 374px;
        --size: 81px;
        --tc-scale: 1;
    }

    .hero-asset--n {
        --x: -42px;
        --y: 446px;
        --size: 50px;
        --tc-scale: 1;
    }

    .hero-asset--comic-t {
        --x: 633px;
        --y: 826px;
        --size: 50px;
        --tc-scale: 1;
    }
}

/* Mobile hero layout. Edit this block for mobile positions. */
@media (max-width: 760px) {
    .hero-landing {
        --tc-hero-top-space: calc((54px * var(--tc-hero-mobile-scale)) + env(safe-area-inset-top, 0px));
        --tc-hero-bottom-extra: calc(52px * var(--tc-hero-mobile-scale));
        --tc-hero-cue-bottom: calc((28px + env(safe-area-inset-bottom, 0px)) / var(--tc-hero-mobile-scale));
        /* Match the shared coordinator before its first module executes. The
           same width/height constraints prevent the 100vh shell from shrinking
           after paint and moving every section below it. */
        --tc-hero-mobile-scale: clamp(
            0.7,
            min(
                calc((100vw - 28px) / 312px),
                calc((100dvh - 140px) / 760px),
                1
            ),
            1
        );
        --tc-hero-stable-height: calc(760px * var(--tc-hero-mobile-scale));
        --tc-hero-mobile-keyboard-input-y: 36%;
        --tc-hero-mobile-keyboard-scroll-offset: 0px;
        --stage-width: 312px;
        height: calc(var(--tc-hero-stable-height, 100vh) + var(--tc-hero-bottom-extra));
    }

    .hero-landing__stage {
        height: calc(var(--tc-hero-stable-height, 100vh) + var(--tc-hero-bottom-extra) - var(--tc-hero-top-space));
    }

    .hero-landing.is-keyboard-lifted .hero-scroll-cue {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .hero-scroll-cue,
    .hero-scroll-cue:hover,
    .hero-scroll-cue:focus-visible {
        display: inline-flex;
        position: absolute;
        left: 50%;
        right: auto;
        top: auto;
        bottom: var(--tc-hero-cue-bottom);
        inset-block-start: auto;
        inset-block-end: var(--tc-hero-cue-bottom);
        visibility: visible;
        transform: translate3d(-50%, 0, 0);
    }

    .hero-scroll-cue.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .site-nav {
        left: 50%;
        right: auto;
        align-items: stretch;
        gap: 0;
        width: calc(100vw - (var(--tc-page-pad, 10px) * 2));
        max-width: none;
        min-height: 0;
        padding: var(--tc-space-3-5);
        border-radius: var(--tc-radius-sm);
        transform: translateX(-50%);
    }

    .site-nav__brand {
        display: none;
    }

    .site-nav.has-app-switcher {
        align-items: center;
        gap: var(--tc-space-2);
    }

    .site-nav.has-app-switcher .site-nav__brand {
        display: inline-flex;
        flex: 0 0 2rem;
        width: 2rem;
        min-width: 2rem;
        overflow: hidden;
        color: var(--tc-color-transparent);
    }

    .site-nav.has-app-switcher > .site-nav__brand:not(.app-switcher) {
        min-height: 2rem;
        font-size: 0;
    }

    .site-nav.has-app-switcher .site-nav__brand.app-switcher {
        overflow: visible;
        color: var(--tc-text-strong);
    }

    .site-nav.has-app-switcher .site-nav__links {
        flex: 1 1 auto;
        width: auto;
    }

    .site-nav.has-app-switcher .app-switcher__trigger {
        min-width: 2rem;
        min-height: 2rem;
        justify-content: center;
    }

    .site-nav.has-app-switcher .app-switcher__label,
    .site-nav.has-app-switcher .app-switcher__chevron {
        display: none;
    }

    .site-nav.has-app-switcher .app-switcher__mark {
        width: 1.65rem;
        height: 1.65rem;
    }

    .site-nav.has-app-switcher .app-switcher__menu {
        position: fixed;
        left: var(--tc-page-pad, 10px);
        right: var(--tc-page-pad, 10px);
        top: calc(env(safe-area-inset-top, 0px) + 58px);
        width: auto;
        max-height: min(28rem, calc(100vh - 82px));
    }

    .site-nav__links {
        display: grid;
        grid-template-columns: 0.86fr 0.86fr 1.22fr 0.66fr;
        min-width: 0;
        width: 100%;
        gap: var(--tc-space-1);
    }

    .site-nav__links > a,
    .site-nav__links > span {
        flex: 1 1 0;
        min-width: 0;
        min-height: 2rem;
        padding: 0 var(--tc-space-1);
        border-radius: var(--tc-radius-xs);
        font-size: 0.625rem;
        font-weight: 680;
    }

    .hero-wordmark {
        left: 156px;
        top: 164px;
        width: 229px;
    }

    .hero-preview-text {
        --tc-hero-preview-zone-width: 1.32;
    }

    .hero-landing__input {
        left: 156px;
        top: 386px;
        --tc-hero-input-width: 194px;
        --tc-hero-input-height: 40px;
    }

    .hero-landing__input-actions {
        left: 156px;
        top: 434px;
        width: 194px;
    }

    .hero-landing.is-input-active .hero-landing__input-actions {
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 8px);
    }

    .hero-landing__input-note {
        min-height: 29px;
        padding: 0 var(--tc-space-3);
        font-size: 0.6875rem;
    }

    .hero-landing__input-hint {
        font-size: 0.625rem;
    }

    .hero-landing__input-hint strong {
        font-size: 0.6875rem;
    }

    .hero-landing__input .editor-frame-overlay {
        inset: -8px;
    }

    .hero-landing__text-input {
        --tc-hero-input-padding-x: 9px;
        --tc-hero-input-padding-y: 8px;
        --tc-hero-input-font-size: 0.88rem;
        --tc-hero-input-line-height: 1.24;
        --tc-hero-input-line-box: 1.0912rem;
        --tc-hero-input-two-line-padding-y: 6px;
        --tc-hero-input-two-line-font-size: 0.68rem;
        --tc-hero-input-two-line-line-height: 1.12;
        --tc-hero-input-two-line-line-box: 0.7616rem;
        height: 100%;
        min-height: 100%;
        max-height: 100%;
    }
.hero-asset--b {
  --x: 139px;
  --y: 58px;
  --size: 46px;
  --tc-scale: 1;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .site-nav,
  .hero-landing__input,
  .hero-landing__input-note,
  .hero-landing__input-hint {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-nav {
    background: var(--tc-panel-bg);
  }

  .hero-landing__input {
    background: var(--tc-surface-main);
  }

  .hero-landing__input-note,
  .hero-landing__input-hint {
    background: var(--tc-surface-dark-glass-strong);
  }
}

.hero-asset--q {
  --x: 292px;
  --y: 292px;
  --size: 33px;
  --tc-scale: 1;
}

.hero-asset--s {
  --x: 304px;
  --y: 97px;
  --size: 72px;
  --tc-scale: 1;
}

.hero-asset--f {
  --x: -35px;
  --y: -2px;
  --size: 53px;
  --tc-scale: 1;
}

.hero-asset--m {
  --x: 269px;
  --y: -3px;
  --size: 47px;
  --tc-scale: 1;
}

.hero-asset--h {
  --x: -35px;
  --y: 182px;
  --size: 45px;
  --tc-scale: 1;
}

.hero-asset--ruler-e {
  --x: 288px;
  --y: 338px;
  --size: 53px;
  --tc-scale: 1;
}

.hero-asset--dollar {
  --x: -41px;
  --y: 374px;
  --size: 80px;
  --tc-scale: 1;
}

.hero-asset--d {
  --x: 25px;
  --y: 634px;
  --size: 81px;
  --tc-scale: 1;
}

.hero-asset--r {
  --x: -57px;
  --y: 561px;
  --size: 62px;
  --tc-scale: 1;
}

.hero-asset--amp {
  --x: 228px;
  --y: 617px;
  --size: 48px;
  --tc-scale: 1;
}

.hero-asset--p {
  --x: 305px;
  --y: 474px;
  --size: 74px;
  --tc-scale: 1;
}

.hero-asset--x2 {
  --x: 123px;
  --y: 516px;
  --size: 45px;
  --tc-scale: 1;
}

.hero-asset--n {
  --x: -64px;
  --y: 324px;
  --size: 33px;
  --tc-scale: 1;
}

.hero-asset--comic-t {
  --x: 394px;
  --y: 386px;
  --size: 65px;
  --tc-scale: 1;
}
}
}

/* source: shared/styles/features/hero/hero-dice.css */
@layer features {
/* Responsive positioning and styling for the hero input action controls. */
.hero-randomize,
.hero-animate-preview {
  --tc-hero-dice-input-x: 1020px;
  --tc-hero-dice-input-half: 134px;
  --tc-hero-dice-input-y: 512px;
  --tc-hero-dice-input-height: 64px;
  --tc-hero-dice-frame-inset-x: 11px;

  /* More outward spacing */
  --tc-hero-dice-left-gap: 2.18rem;
  --tc-hero-play-right-gap: 2.18rem;

  /* Visible button size */
  --dice-button-size: 3.02rem;

  /* Bigger invisible click/tap area */
  --tc-hero-button-hit-size: 4.85rem;

  /* Internal helper */
  --tc-hero-button-hit-pad: calc((var(--tc-hero-button-hit-size) - var(--dice-button-size)) * 0.5);

  /* Dice dot size */
  --dice-dot-size: 0.3rem;

  position: absolute;
  z-index: 45;
  top: calc(
    var(--tc-hero-dice-input-y)
    + var(--tc-hero-dice-input-height) * 0.5
    - var(--tc-hero-button-hit-size) * 0.5
  );

  width: var(--tc-hero-button-hit-size);
  height: var(--tc-hero-button-hit-size);

  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: var(--tc-color-transparent);
  color: var(--tc-illustration-ink);
  cursor: pointer;
  opacity: 0.78;
  filter: var(--tc-filter-brightness-082);
  transform: translateZ(0);
  transition:
    opacity 140ms ease,
    filter 140ms ease,
    transform 140ms ease;
}

/* Dice button: visual square is moved left, hitbox follows it */
.hero-randomize {
  left: calc(
    var(--tc-hero-dice-input-x)
    - var(--tc-hero-dice-input-half)
    - var(--tc-hero-dice-frame-inset-x)
    - var(--tc-hero-dice-left-gap)
    - var(--dice-button-size)
    - var(--tc-hero-button-hit-pad)
  );
}

/* Play button: visual square is moved right, hitbox follows it */
.hero-animate-preview {
  --play-box-motion: rotate(-3deg) translateZ(0);
  --play-mark-variant-motion: translateX(0) scale(1);

  left: calc(
    var(--tc-hero-dice-input-x)
    + var(--tc-hero-dice-input-half)
    + var(--tc-hero-dice-frame-inset-x)
    + var(--tc-hero-play-right-gap)
    - var(--tc-hero-button-hit-pad)
  );
}

.hero-randomize[hidden],
.hero-animate-preview[hidden] {
  display: none;
}

/* Dice visual wrapper */
.hero-randomize__dice-stage {
  width: var(--dice-button-size);
  height: var(--dice-button-size);
  display: grid;
  place-items: center;
  grid-area: 1 / 1;
}

.hero-randomize-dice {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  border: 0.12rem solid var(--tc-illustration-ink);
  border-radius: var(--tc-illustration-radius);
  background: var(--tc-illustration-paper);
  box-shadow:
    0.12rem 0.12rem 0 var(--tc-illustration-ink),
    0 0.36rem 0.58rem var(--tc-shadow-color-low);
  transform: rotate(3deg);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

/* Play visual square */
.hero-animate-preview::before {
  content: "";
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: var(--dice-button-size);
  height: var(--dice-button-size);
  display: block;
  border: 0.12rem solid var(--tc-illustration-ink);
  border-radius: var(--tc-illustration-radius);
  background: var(--tc-illustration-paper);
  box-shadow:
    0.12rem 0.12rem 0 var(--tc-illustration-ink),
    0 0.36rem 0.58rem var(--tc-shadow-color-low);
  transform: var(--play-box-motion);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

/* Shared hover/focus state */
.hero-randomize:hover,
.hero-randomize:focus-visible,
.hero-animate-preview:hover,
.hero-animate-preview:focus-visible {
  opacity: 1;
  filter: var(--tc-filter-brightness-100);
  outline: 0;
}

/* Dice hover/focus */
.hero-randomize:hover .hero-randomize-dice,
.hero-randomize:focus-visible .hero-randomize-dice {
  box-shadow:
    0.16rem 0.16rem 0 var(--tc-illustration-ink),
    0 0.44rem 0.72rem var(--tc-shadow-color-strong);
  transform: rotate(-4deg) translateY(-1px);
}

/* Play hover/focus: box and arrow now share the same motion */
.hero-animate-preview:hover,
.hero-animate-preview:focus-visible {
  --play-box-motion: rotate(-5deg) translateY(-1px);
}

.hero-animate-preview:hover::before,
.hero-animate-preview:focus-visible::before {
  box-shadow:
    0.16rem 0.16rem 0 var(--tc-illustration-ink),
    0 0.44rem 0.72rem var(--tc-shadow-color-strong);
}

/* Active states */
.hero-randomize:active .hero-randomize-dice {
  transform: rotate(0deg) translate(0.04rem, 0.04rem);
}

.hero-animate-preview:active {
  --play-box-motion: rotate(-1deg) translate(0.04rem, 0.04rem);
}

/* Play triangle */
.hero-animate-preview__mark {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  display: block;
  width: 0;
  height: 0;
  margin-left: 0.19rem;
  border-top: 0.64rem solid var(--tc-color-transparent);
  border-bottom: 0.64rem solid var(--tc-color-transparent);
  border-left: 0.96rem solid var(--tc-illustration-ink);
  transform-origin: center center;
  transform: var(--play-box-motion) var(--play-mark-variant-motion);
  transition: transform 140ms ease;
  will-change: transform;
}

.hero-animate-preview__mark > i,
.hero-animate-preview__mark > b {
  display: none;
}

.hero-animate-preview__mark > i {
  left: 14%;
  width: 62%;
  height: 0.15rem;
  border-radius: var(--tc-illustration-radius-pill);
  transform-origin: left center;
}

.hero-animate-preview__mark > i[data-stroke="one"] {
  top: 22%;
}

.hero-animate-preview__mark > i[data-stroke="two"] {
  top: 47%;
  width: 74%;
}

.hero-animate-preview__mark > i[data-stroke="three"] {
  top: 72%;
  width: 52%;
}

.hero-animate-preview__mark > b {
  right: 4%;
  top: 34%;
  width: 0;
  height: 0;
  border-top: 0.27rem solid var(--tc-color-transparent);
  border-bottom: 0.27rem solid var(--tc-color-transparent);
  border-left: 0.38rem solid var(--tc-illustration-ink);
  background: var(--tc-color-transparent);
}

/* Play triangle variants */
.hero-animate-preview[data-variant="2"] .hero-animate-preview__mark {
  --play-mark-variant-motion: translateX(0.08rem) scale(0.94);
}

.hero-animate-preview[data-variant="3"] .hero-animate-preview__mark {
  --play-mark-variant-motion: translateX(-0.03rem) scale(1.04);
}

.hero-animate-preview[data-variant="4"] .hero-animate-preview__mark {
  --play-mark-variant-motion: translateX(0.03rem) scale(0.98);
}

/* Dice dots */
.hero-randomize-dice > i {
  position: absolute;
  width: var(--dice-dot-size);
  height: var(--dice-dot-size);
  border-radius: var(--tc-radius-round);
  background: var(--tc-illustration-ink);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 80ms linear;
}

.hero-randomize-dice > i[data-dot="tl"] {
  left: 29%;
  top: 29%;
}

.hero-randomize-dice > i[data-dot="tr"] {
  left: 71%;
  top: 29%;
}

.hero-randomize-dice > i[data-dot="ml"] {
  left: 29%;
  top: 50%;
}

.hero-randomize-dice > i[data-dot="c"] {
  left: 50%;
  top: 50%;
}

.hero-randomize-dice > i[data-dot="mr"] {
  left: 71%;
  top: 50%;
}

.hero-randomize-dice > i[data-dot="bl"] {
  left: 29%;
  top: 71%;
}

.hero-randomize-dice > i[data-dot="br"] {
  left: 71%;
  top: 71%;
}

.hero-randomize-dice[data-face="1"] > i[data-dot="c"],
.hero-randomize-dice[data-face="2"] > i[data-dot="tl"],
.hero-randomize-dice[data-face="2"] > i[data-dot="br"],
.hero-randomize-dice[data-face="3"] > i[data-dot="tl"],
.hero-randomize-dice[data-face="3"] > i[data-dot="c"],
.hero-randomize-dice[data-face="3"] > i[data-dot="br"],
.hero-randomize-dice[data-face="4"] > i[data-dot="tl"],
.hero-randomize-dice[data-face="4"] > i[data-dot="tr"],
.hero-randomize-dice[data-face="4"] > i[data-dot="bl"],
.hero-randomize-dice[data-face="4"] > i[data-dot="br"],
.hero-randomize-dice[data-face="5"] > i[data-dot="tl"],
.hero-randomize-dice[data-face="5"] > i[data-dot="tr"],
.hero-randomize-dice[data-face="5"] > i[data-dot="c"],
.hero-randomize-dice[data-face="5"] > i[data-dot="bl"],
.hero-randomize-dice[data-face="5"] > i[data-dot="br"],
.hero-randomize-dice[data-face="6"] > i[data-dot="tl"],
.hero-randomize-dice[data-face="6"] > i[data-dot="tr"],
.hero-randomize-dice[data-face="6"] > i[data-dot="ml"],
.hero-randomize-dice[data-face="6"] > i[data-dot="mr"],
.hero-randomize-dice[data-face="6"] > i[data-dot="bl"],
.hero-randomize-dice[data-face="6"] > i[data-dot="br"] {
  opacity: 1;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .hero-randomize,
  .hero-animate-preview {
    --tc-hero-dice-input-x: 360px;
    --tc-hero-dice-input-half: 126px;
    --tc-hero-dice-input-y: 432px;
    --tc-hero-dice-input-height: 52px;
    --tc-hero-dice-frame-inset-x: 9px;

    --tc-hero-dice-left-gap: 1.62rem;
    --tc-hero-play-right-gap: 1.62rem;

    --dice-button-size: 2.68rem;
    --tc-hero-button-hit-size: 4.28rem;
    --dice-dot-size: 0.27rem;
  }

  .hero-animate-preview__mark {
    margin-left: 0.165rem;
    border-top-width: 0.57rem;
    border-bottom-width: 0.57rem;
    border-left-width: 0.86rem;
  }
}

@media (max-width: 760px) {
  .hero-randomize,
  .hero-animate-preview {
    --tc-hero-dice-input-x: 156px;
    --tc-hero-dice-input-half: 109px;
    --tc-hero-dice-input-y: 386px;
    --tc-hero-dice-input-height: 45px;
    --tc-hero-dice-frame-inset-x: 8px;

    --tc-hero-dice-left-gap: 1.18rem;
    --tc-hero-play-right-gap: 1.18rem;

    --dice-button-size: 2.48rem;
    --tc-hero-button-hit-size: 4rem;
    --dice-dot-size: 0.255rem;
  }

  .hero-animate-preview__mark {
    margin-left: 0.15rem;
    border-top-width: 0.54rem;
    border-bottom-width: 0.54rem;
    border-left-width: 0.8rem;
  }
}
}

/* 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/gallery/gallery-page-shell.css */
@layer features {
/* Landing-page gallery, modal, footer, and responsive page styling. */
:root {
  color-scheme: dark;
  --tc-gallery-gap: var(--tc-index-gallery-gap);
  --tc-page-pad: var(--tc-index-page-pad);
  --tc-content-max: var(--tc-index-content-max);
  --tc-gallery-toolbar-gap: var(--tc-index-gallery-toolbar-gap);
  --tc-styles-anchor-gap: var(--tc-section-anchor-gap);
  --tc-section-anchor-gap: var(--tc-index-section-anchor-gap);
  --tc-index-nav-offset: calc(clamp(12px, 2vw, 22px) + 43px);
  --tc-index-section-scroll-margin: calc(var(--tc-index-nav-offset) + var(--tc-section-anchor-gap));
  --tc-index-styles-scroll-margin: calc(var(--tc-index-nav-offset) + var(--tc-styles-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);
  --tc-gallery-toolbar-pinned-mask-bottom: var(--tc-gallery-top-clearance);
  --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-gallery-top-clearance: calc(var(--tc-gallery-toolbar-mask-bottom) + var(--card-frame-inset) + var(--gallery-visual-gap));
  --tc-scroll-rail-width: var(--tc-index-gallery-scroll-rail-width);
  --tc-scroll-rail-right: max(4px, calc(var(--tc-page-pad) * 0.35 - var(--tc-scroll-rail-width) * 0.5));
  --tc-theme-picker-top: var(--tc-index-theme-picker-top);
}


html {
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--tc-bg-app);
  scrollbar-gutter: stable both-edges;
  scroll-behavior: auto;
  scroll-padding-top: var(--tc-index-section-scroll-margin);
}

html.editor-open,
html.editor-open body {
  overflow: hidden;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--tc-text-main);
  font-size: var(--tc-type-body-size);
  font-family: var(--tc-font-body);
  background: var(--tc-bg-app);
}

body::before {
  content: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--tc-bg-grid-opacity);
  background-image: var(--tc-bg-grid-image);
  background-size: var(--tc-bg-grid-size);
  mask-image: var(--tc-bg-grid-mask);
}

.site-main > section[id],
.pricing-section[id],
.faq-section[id] {
  scroll-margin-top: var(--tc-index-section-scroll-margin);
}

.styles-section[id],
#styles {
  scroll-margin-top: var(--tc-index-styles-scroll-margin);
}

textarea.hero-landing__text-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  padding: var(--tc-hero-input-padding-block, var(--tc-hero-input-padding-y)) var(--tc-hero-input-padding-x);
  border: 0;
  border-radius: var(--tc-radius-none);
  background: var(--tc-color-transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--tc-text-bright);
  font-size: var(--tc-hero-input-fit-font-size, var(--tc-hero-input-font-size));
  font-weight: var(--tc-hero-input-font-weight);
  line-height: var(--tc-hero-input-line-height);
  text-align: center;
  overflow: hidden;
  resize: none;
  box-shadow: none;
}

textarea.hero-landing__text-input:focus {
  border: 0;
  background: var(--tc-color-transparent);
  box-shadow: none;
}
}

/* source: shared/styles/features/gallery/gallery-toolbar-filters.css */
@layer features {
.site-main {
  position: relative;
  z-index: 1;
}

.page {
  --tc-page-right-pad: var(--tc-page-pad);
  position: relative;
  z-index: 1;
  width: min(calc(100% - (var(--tc-page-pad) * 2)), var(--tc-content-max));
  max-width: var(--tc-content-max);
  margin: 0;
  margin-inline: auto;
  padding: var(--tc-page-pad) 0;
  container-type: inline-size;
}

.toolbar {
  position: relative;
  z-index: 70;
  isolation: isolate;
  flex-wrap: nowrap;
  gap: var(--tc-gallery-toolbar-inner-gap);
  margin: var(--tc-gallery-toolbar-gap) 0 0;
  transform: none;
  will-change: auto;
}

.toolbar > * {
  position: relative;
  z-index: 1;
}

.search {
  position: relative;
  flex: 0 0 var(--tc-gallery-search-width);
  width: auto;
  height: var(--tc-gallery-search-height);
  border: 1px solid var(--tc-border-strong);
  border-radius: var(--tc-radius-md);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 260ms var(--tc-ease-standard), border-color 260ms var(--tc-ease-standard);
}

.search:focus-within {
  box-shadow: none;
}

.search-icon {
  position: absolute;
  left: var(--tc-gallery-search-icon-left);
  top: 50%;
  width: var(--tc-gallery-search-icon-size);
  height: var(--tc-gallery-search-icon-size);
  color: var(--tc-text-low);
  transform: translateY(-58%);
  pointer-events: none;
}

.search-icon circle,
.search-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--tc-gallery-search-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.search input {
  width: 100%;
  height: 100%;
  appearance: none;
  border: 0;
  border-radius: inherit;
  background: var(--tc-color-transparent);
  outline: none;
  padding: var(--tc-gallery-search-input-padding);
  font-size: var(--tc-type-gallery-search-input-size);
  font-weight: var(--tc-type-gallery-search-input-weight);
  line-height: 1;
}

.search input:focus-visible {
  box-shadow: none;
}

.search input::placeholder {
  opacity: 1;
}

.search-count {
  position: absolute;
  right: var(--tc-gallery-search-count-right);
  top: 50%;
  width: var(--tc-gallery-search-count-max-width);
  max-width: var(--tc-gallery-search-count-max-width);
  color: var(--tc-text-placeholder);
  font-size: var(--tc-type-gallery-search-count-size);
  font-weight: var(--tc-type-gallery-search-count-weight);
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
}

.search-clear {
  appearance: none;
  position: absolute;
  right: var(--tc-gallery-search-clear-right);
  top: 50%;
  width: var(--tc-gallery-search-clear-width);
  height: var(--tc-field-height-sm);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-color-transparent);
  color: var(--tc-text-placeholder);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 180ms var(--tc-ease-standard), color 180ms var(--tc-ease-standard), background-color 180ms var(--tc-ease-standard);
}

.search.has-value .search-clear {
  opacity: 1;
  pointer-events: auto;
}

.search-clear:hover,
.search-clear:focus-visible {
  box-shadow: none;
  outline: 0;
}

.search-clear span {
  position: relative;
  width: var(--tc-gallery-search-clear-icon-size);
  height: var(--tc-gallery-search-clear-icon-size);
}

.search-clear span::before,
.search-clear span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tc-gallery-search-clear-mark-width);
  height: var(--tc-gallery-search-clear-mark-height);
  border-radius: var(--tc-radius-pill);
  background: currentColor;
  transform-origin: center;
}

.search-clear span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.search-clear span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.style-filter-pills {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.search {
  border-color: var(--tc-color-transparent);
  background: var(--tc-surface-control);
}

.search:focus-within {
  border-color: var(--tc-color-transparent);
  background: var(--tc-surface-control-hover);
}

.search-icon,
.search-count,
.search-clear {
  color: var(--tc-text-disabled);
}

.search input {
  color: var(--tc-text-main);
}

.search input::placeholder {
  color: var(--tc-text-disabled);
}

.search-clear:hover,
.search-clear:focus-visible {
  background: var(--tc-surface-control-hover);
  color: var(--tc-control-text-hover);
}
}

/* source: shared/styles/features/gallery/gallery-list-empty.css */
@layer features {
.gallery {
  display: grid;
  grid-template-columns: var(--tc-index-gallery-columns);
  gap: var(--tc-gallery-gap);
  padding-top: var(--tc-index-gallery-padding-top);
  padding-bottom: var(--tc-index-gallery-padding-bottom);
}

/* Text Collage discovers its first manifest batch asynchronously. Preserve the
   exact mobile two-column/five-row footprint and the surrounding controls
   until that batch is committed in the same task, so content below never
   jumps when the loading message is replaced. */
.page[data-gallery-boot="pending"] .style-filter-pills {
  min-height: calc(var(--tc-caret-min-height) + var(--tc-space-6) + var(--tc-space-7));
}

@media (max-width: 680px), (hover: none) and (pointer: coarse) {
  .page[data-gallery-boot="pending"] .style-filter-pills {
    min-height: calc(var(--tc-caret-min-height) + var(--tc-space-2));
  }
}

@media (max-width: 760px) {
  .page[data-gallery-boot="pending"] .gallery {
    min-height: calc(156.25cqi + 325.5px);
  }
}

@media (max-width: 560px) {
  .page[data-gallery-boot="pending"] .style-filter-pills {
    min-height: calc(var(--tc-caret-min-height) + var(--tc-space-hairline));
  }
}

.gallery-load-more {
  display: grid;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: var(--tc-index-gallery-load-more-gap);
  padding: var(--tc-index-gallery-load-more-padding);
}

.gallery-load-more[hidden] {
  display: none;
}

/* The final controls already exist in the static shell. Lay out that exact
   responsive footprint while keeping it inert and invisible, instead of
   approximating its height with a viewport-specific constant. */
.page[data-gallery-boot="pending"] .gallery-load-more {
  visibility: hidden;
  pointer-events: none;
}

.page[data-gallery-boot="pending"] .gallery-load-more[hidden] {
  display: grid;
}

.gallery-load-more__actions {
  position: relative;
  display: grid;
  grid-template-columns: var(--tc-index-gallery-load-actions-columns);
  align-items: start;
  justify-content: center;
  column-gap: var(--tc-index-gallery-load-actions-column-gap);
  padding: var(--tc-index-gallery-load-actions-padding);
}

.gallery-load-more__main {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  justify-items: center;
  gap: var(--tc-index-gallery-load-main-gap);
}

.gallery-load-more__label em,
.gallery-load-more__hint em {
  font-style: italic;
}

.gallery-load-more__hint em {
  font-weight: inherit;
}

.gallery-load-more__hint {
  margin: 0;
  color: var(--tc-text-muted);
  font-size: var(--tc-type-gallery-load-hint-size);
  font-weight: var(--tc-type-gallery-load-hint-weight);
  line-height: var(--tc-type-gallery-load-hint-line);
  text-align: center;
}

.styles-pricing-break {
  position: relative;
  z-index: 4;
  height: var(--tc-index-gallery-pricing-break-height);
  background: var(--tc-color-transparent);
}

@media (min-width: 981px) {
  .styles-pricing-break {
    height: var(--tc-index-gallery-pricing-break-height-desktop);
  }
}

.gallery-message {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--tc-text-muted);
  font-size: var(--tc-type-gallery-message-size);
}

.gallery-empty {
  grid-column: 1 / -1;
  display: none;
  place-items: center;
  gap: var(--tc-space-6);
  min-height: var(--tc-index-gallery-empty-min-height);
  padding: var(--tc-index-gallery-empty-padding);
  color: var(--tc-text-disabled);
  text-align: center;
}

.gallery-empty.is-visible {
  display: grid;
}

.gallery-empty__title {
  margin: 0;
  color: var(--tc-text-main);
  font-size: var(--tc-type-gallery-empty-title-size);
  font-weight: var(--tc-type-gallery-empty-title-weight);
  line-height: var(--tc-type-gallery-empty-title-line);
}

.gallery-empty__copy {
  max-width: var(--tc-index-gallery-empty-copy-max-width);
  margin: var(--tc-index-gallery-empty-copy-margin);
  color: var(--tc-text-disabled);
  font-size: var(--tc-type-gallery-empty-copy-size);
  font-weight: var(--tc-type-gallery-empty-copy-weight);
  line-height: var(--tc-type-gallery-empty-copy-line);
}

.gallery-empty__actions {
  gap: var(--tc-space-4);
  margin-top: var(--tc-space-2);
}

.gallery-load-more__hint {
  color: var(--tc-text-muted);
}
}

/* source: shared/styles/features/gallery/gallery-preview-cards.css */
@layer features {
.preview-card {
  position: relative;
  min-width: 0;
}

.preview-card::before {
  content: none;
}

.preview-card::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 30;
  pointer-events: none;
  border-radius: var(--tc-radius-none);
  background: var(--tc-text-strong);
  opacity: 0;
  mix-blend-mode: difference;
}

.preview-card > .editor-frame-overlay--card {
  --editor-frame-offset: 0px;
  --editor-frame-handle-inset: 0px;
  --editor-frame-radius: 0;
  inset: -3px;
}

.preview-card.is-opening-editor {
  z-index: 8;
}

.preview-card:hover > .editor-frame-overlay--card,
.preview-card:focus-within > .editor-frame-overlay--card,
.preview-card.is-touch-preview > .editor-frame-overlay--card {
  visibility: visible;
  filter: var(--tc-filter-brightness-100);
}

.preview-card.is-editor-armed > .editor-frame-overlay--card {
  --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);
  visibility: visible;
  filter: var(--tc-filter-brightness-082);
}

.preview-card.is-opening-editor > .editor-frame-overlay--card {
  --editor-frame: var(--tc-editor-frame-active);
  --editor-frame-border: var(--tc-editor-frame-border-strong);
  --editor-frame-handle: var(--tc-editor-handle-stroke);
  --editor-frame-handle-fill: var(--tc-editor-handle-fill);
  visibility: visible;
  filter: var(--tc-filter-brightness-100);
}

.preview-shell {
  position: relative;
  height: 100%;
  min-width: 0;
  padding: var(--tc-index-gallery-card-shell-padding);
  color: inherit;
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-index-gallery-card-shell-radius);
  -webkit-backdrop-filter: var(--tc-card-filter);
  backdrop-filter: var(--tc-card-filter);
  overflow: hidden;
  box-shadow: none;
  isolation: isolate;
}

.preview-card.is-opening-editor .preview-shell {
  border-radius: var(--tc-radius-none);
  animation: editor-card-open-press 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.preview-card.is-opening-editor::after {
  animation: editor-card-camera-flash 540ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.preview-card.is-load-reveal {
  animation: gallery-card-load-in 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--tc-gallery-card-load-delay, 0ms);
}

.media-shell {
  position: relative;
  display: block;
  aspect-ratio: var(--tc-index-gallery-card-media-aspect);
  overflow: hidden;
  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-index-gallery-card-media-checker-size) var(--tc-index-gallery-card-media-checker-size);
  background-position: 0 0, var(--tc-index-gallery-card-media-checker-offset) var(--tc-index-gallery-card-media-checker-offset);
  isolation: isolate;
  border-radius: var(--tc-index-gallery-card-media-radius);
}

.preview-card.has-live-editor .media-shell {
  cursor: pointer;
}

.media-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--tc-surface-preview-dim-overlay);
  opacity: 0;
  transition: opacity 320ms var(--tc-ease-standard);
}

.preview-card.is-editor-preparing .action-open-editor {
  cursor: pointer;
}

.action-open-editor[aria-disabled="true"] {
  cursor: pointer;
}

.action-open-editor::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-editor-prepare-progress, 0));
  transform-origin: var(--tc-progress-fill-origin);
  pointer-events: none;
  transition: var(--tc-progress-fill-transition);
}

.action-open-editor > * {
  position: relative;
  z-index: 1;
}

.preview-card.is-editor-preparing .action-open-editor::before {
  opacity: 0;
}

.action-open-editor.is-editor-progress-visible::before {
  opacity: 0;
}

.action-ready-overlay {
  display: none;
}

.action-ready-overlay .action-icon {
  color: var(--tc-accent-main);
  opacity: 1;
  filter: none;
}

.action-ready-overlay .action-label {
  color: var(--tc-button-text-hover);
  filter: none;
}

.action-open-editor[aria-disabled="true"] .action-icon,
.action-open-editor[aria-disabled="true"] .action-label,
.preview-card.is-editor-preparing .action-open-editor .action-icon,
.preview-card.is-editor-preparing .action-open-editor .action-label,
.preview-card.is-editor-preparing:hover .action-open-editor .action-icon,
.preview-card.is-editor-preparing:hover .action-open-editor .action-label,
.preview-card.is-editor-preparing:focus-within .action-open-editor .action-icon,
.preview-card.is-editor-preparing:focus-within .action-open-editor .action-label,
.preview-card.is-touch-preview.is-editor-preparing .action-open-editor .action-icon,
.preview-card.is-touch-preview.is-editor-preparing .action-open-editor .action-label {
  filter: none;
}

.action-open-editor .action-ready-overlay .action-icon,
.action-open-editor .action-ready-overlay .action-label {
  filter: none;
}

.preview-card.is-editor-armed .media-shell::after {
  opacity: 1;
}

.preview-card.is-opening-editor .media-shell::after {
  opacity: 0;
}

.poster-canvas,
.animated-preview {
  position: absolute;
  left: var(--tc-index-gallery-card-media-inset);
  top: var(--tc-index-gallery-card-media-inset);
  width: calc(100% - (var(--tc-index-gallery-card-media-inset) * 2));
  height: calc(100% - (var(--tc-index-gallery-card-media-inset) * 2));
  display: block;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
}

.poster-canvas {
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: none;
}

.preview-card.has-poster .poster-canvas {
  opacity: 1;
}

.preview-card.is-playing .poster-canvas {
  opacity: 0;
}

.animated-preview {
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms var(--tc-ease-standard);
}

.preview-card.is-playing .animated-preview {
  opacity: 1;
}

.preview-live-editor {
  appearance: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-4-5);
  min-height: 52px;
  max-width: calc(100% - 28px);
  padding: 0 22px;
  border: 1px solid var(--tc-button-border);
  border-radius: var(--tc-radius-sm);
  -webkit-backdrop-filter: var(--tc-glass-filter-soft);
  backdrop-filter: var(--tc-glass-filter-soft);
  cursor: pointer;
  font-size: var(--tc-type-gallery-live-editor-size);
  font-weight: var(--tc-type-gallery-live-editor-weight);
  line-height: var(--tc-type-gallery-live-editor-line);
  letter-spacing: 0;
  overflow: visible;
  pointer-events: none;
  visibility: hidden;
  white-space: nowrap;
  transform: translate(-50%, -44%) scale(0.96);
  transition:
    transform 360ms var(--tc-ease-standard),
    background-color 220ms var(--tc-ease-standard),
    border-color 220ms var(--tc-ease-standard);
}

.preview-live-editor::after {
  content: none;
}

.preview-live-editor::before {
  content: none;
}

.preview-live-editor .editor-frame-overlay {
  --editor-frame-offset: 0px;
  --editor-frame-handle-inset: 0px;
  --editor-frame-radius: 0;
  inset: -3px;
  z-index: 0;
  visibility: inherit;
  filter: var(--tc-filter-brightness-092);
}

.preview-card.is-editor-armed .preview-live-editor {
  pointer-events: auto;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.preview-live-editor:hover,
.preview-live-editor:focus-visible {
  outline: 0;
}

.preview-live-editor:hover .editor-frame-overlay,
.preview-live-editor:focus-visible .editor-frame-overlay {
  filter: var(--tc-filter-brightness-112);
}

.preview-live-editor.is-opening-editor {
  animation: editor-open-button-close 620ms var(--tc-ease-standard) both;
}

.preview-live-editor.is-opening-editor .editor-frame-overlay {
  filter: var(--tc-filter-brightness-120);
}

.preview-live-editor .action-icon {
  position: relative;
  z-index: 1;
  width: 17px;
  height: var(--tc-field-height-2xs);
  color: var(--tc-button-icon);
  opacity: 1;
}

.preview-live-editor:hover .action-icon,
.preview-live-editor:focus-visible .action-icon {
  color: var(--tc-button-icon-hover);
}

.preview-live-editor .action-label {
  position: relative;
  z-index: 1;
  max-width: none;
  margin-left: 0;
  opacity: 1;
  transform: none;
}

.card-footer {
  gap: clamp(var(--tc-space-3-5), 1vw, var(--tc-space-7));
  padding: clamp(var(--tc-space-5), 1.15vw, var(--tc-space-7)) clamp(var(--tc-space-2-5), 0.55vw, var(--tc-space-4)) clamp(var(--tc-space-2-5), 0.55vw, var(--tc-space-4));
  border-top: 0;
  -webkit-backdrop-filter: var(--tc-card-filter);
  backdrop-filter: var(--tc-card-filter);
}

.card-title {
  min-width: 0;
  margin: 0;
  font-size: var(--tc-type-gallery-card-title-size);
  font-weight: var(--tc-type-gallery-card-title-weight);
  line-height: var(--tc-type-gallery-card-title-line);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-actions {
  flex: 0 0 auto;
  gap: clamp(var(--tc-space-7), 1.6vw, var(--tc-space-12));
  min-height: var(--tc-control-height-md);
  transition: opacity 220ms var(--tc-ease-standard), visibility 220ms var(--tc-ease-standard);
}

.preview-card.is-editor-armed .card-actions {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.action-link {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 34px;
  min-height: var(--tc-control-height-field);
  padding: var(--tc-space-4);
  margin: -4px;
  border: 1px solid var(--tc-color-transparent);
  border-radius: var(--tc-radius-sm);
  cursor: pointer;
  font-size: var(--tc-type-gallery-card-action-size);
  font-weight: var(--tc-type-gallery-card-action-weight);
  line-height: var(--tc-type-gallery-card-action-line);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition:
    border-color 320ms var(--tc-ease-standard),
    color 320ms var(--tc-ease-standard),
    background-color 320ms var(--tc-ease-standard),
    min-width 320ms var(--tc-ease-standard),
    padding-inline 320ms var(--tc-ease-standard);
}

.action-link:hover,
.action-link:focus-visible {
  border-color: var(--tc-button-border);
  background: var(--tc-button-bg);
  color: var(--tc-button-text-hover);
  outline: 0;
}

.action-link.is-opening-editor {
  animation: editor-open-action-close 620ms var(--tc-ease-standard) both;
  border-color: var(--tc-button-border-strong);
  background: var(--tc-button-bg-active);
  color: var(--tc-button-text-hover);
}

.action-link.is-opening-editor .action-label {
  max-width: 8rem;
  margin-left: 0.4375rem;
  opacity: 1;
  transform: translateX(0);
}

.action-icon {
  flex: 0 0 auto;
  width: clamp(15px, 1.15vw, 18px);
  height: clamp(15px, 1.15vw, 18px);
  stroke-width: 1.95;
  color: var(--tc-button-icon);
  opacity: 0.86;
  transition: color 320ms var(--tc-ease-standard), filter 220ms var(--tc-ease-standard);
}

.action-link:hover .action-icon,
.action-link:focus-visible .action-icon {
  color: var(--tc-button-icon-hover);
}

.preview-card.is-editor-ready .action-open-editor .action-icon {
  color: var(--tc-accent-main);
  opacity: 1;
}

.action-label {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  transform: translateX(-6px);
  overflow: hidden;
  white-space: nowrap;
  color: currentColor;
  transition:
    max-width 420ms var(--tc-ease-standard),
    margin-left 420ms var(--tc-ease-standard),
    margin-right 420ms var(--tc-ease-standard),
    opacity 260ms var(--tc-ease-standard),
    filter 220ms var(--tc-ease-standard),
    transform 420ms var(--tc-ease-standard);
}

@keyframes editor-open-button-close {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  38% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.98);
  }

  72% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(0.96);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
  }
}

@keyframes editor-open-action-close {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  45% {
    opacity: 1;
    transform: scale(0.98);
  }

  100% {
    opacity: 0.68;
    transform: scale(0.94);
  }
}

@keyframes editor-card-camera-flash {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0.22;
  }

  22% {
    opacity: 0.13;
  }

  34% {
    opacity: 0.08;
  }

  52% {
    opacity: 0.04;
  }

  100% {
    opacity: 0;
  }
}

@keyframes editor-card-open-press {
  0% {
    filter: var(--tc-filter-brightness-100);
    transform: scale(1);
  }

  42% {
    filter: var(--tc-filter-brightness-106);
    transform: scale(0.992);
  }

  100% {
    filter: var(--tc-filter-brightness-100);
    transform: scale(1);
  }
}

@keyframes gallery-card-load-in {
  0% {
    opacity: 0;
    filter: none;
    transform: translateY(10px) scale(0.985);
  }

  100% {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes load-more-button-pulse {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(1px) scale(0.985);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes editor-modal-fast-reveal {
  0% {
    opacity: 0;
    filter: none;
    transform: translateY(10px) scale(0.985);
  }

  100% {
    opacity: 1;
    filter: none;
    transform: translateY(0) scale(1);
  }
}

@keyframes editor-backdrop-fast-reveal {
  0% {
    background: var(--tc-shadow-color-medium);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  100% {
    background: var(--tc-shadow-color-heavy);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 981px) {
  .action-open-editor {
    justify-content: flex-end;
  }

  .action-open-editor .action-label {
    margin-left: 0;
    margin-right: 0;
    transform: translateX(-6px);
  }

  .action-link:hover .action-label,
  .action-link:focus-visible .action-label {
    max-width: 8rem;
    margin-left: 0.4375rem;
    opacity: 1;
    transform: translateX(0);
  }

  .preview-card:hover .action-open-editor,
  .preview-card:focus-within .action-open-editor {
    width: max-content;
    min-width: 0;
    padding-inline: 0.875rem;
    border-color: var(--tc-button-border);
    background: var(--tc-button-bg);
    color: var(--tc-button-text-hover);
  }

  .action-open-editor:hover,
  .action-open-editor:focus-visible,
  .action-open-editor.is-opening-editor {
    width: max-content;
    min-width: 0;
    padding-inline: 0.875rem;
    border-color: var(--tc-button-border);
    background: var(--tc-button-bg);
    color: var(--tc-button-text-hover);
  }

  .preview-card:hover .action-open-editor .action-label,
  .preview-card:focus-within .action-open-editor .action-label,
  .action-open-editor:hover .action-label,
  .action-open-editor:focus-visible .action-label,
  .action-open-editor.is-opening-editor .action-label {
    max-width: 9rem;
    margin-left: 0.55rem;
    margin-right: 0;
    opacity: 1;
    transform: translateX(0);
  }

  .preview-card.is-editor-ready:hover .action-open-editor,
  .preview-card.is-editor-ready:focus-within .action-open-editor,
  .preview-card.is-editor-ready .action-open-editor:hover,
  .preview-card.is-editor-ready .action-open-editor:focus-visible {
    border-color: var(--tc-button-border-strong);
    background: var(--tc-button-bg-active);
    color: var(--tc-button-text-hover);
  }

  .preview-card.is-editor-ready:hover .action-open-editor .action-icon,
  .preview-card.is-editor-ready:focus-within .action-open-editor .action-icon,
  .preview-card.is-editor-ready .action-open-editor:hover .action-icon,
  .preview-card.is-editor-ready .action-open-editor:focus-visible .action-icon {
    color: var(--tc-accent-main);
    opacity: 1;
    filter: none;
  }

  .preview-card.is-editor-ready:hover .action-open-editor .action-ready-overlay,
  .preview-card.is-editor-ready:focus-within .action-open-editor .action-ready-overlay,
  .preview-card.is-editor-ready .action-open-editor:hover .action-ready-overlay,
  .preview-card.is-editor-ready .action-open-editor:focus-visible .action-ready-overlay {
    clip-path: inset(0 0 0 0);
  }

}

.preview-card.is-editor-ready:not(.is-editor-preparing):hover .action-open-editor,
.preview-card.is-editor-ready:not(.is-editor-preparing):focus-within .action-open-editor,
.preview-card.is-editor-ready:not(.is-editor-preparing) .action-open-editor:hover,
.preview-card.is-editor-ready:not(.is-editor-preparing) .action-open-editor:focus-visible {
  border-color: var(--tc-button-border-strong);
  background: var(--tc-button-bg-active);
  color: var(--tc-button-text-hover);
}

.preview-card.is-editor-ready:not(.is-editor-preparing):hover .action-open-editor .action-icon,
.preview-card.is-editor-ready:not(.is-editor-preparing):focus-within .action-open-editor .action-icon,
.preview-card.is-editor-ready:not(.is-editor-preparing) .action-open-editor:hover .action-icon,
.preview-card.is-editor-ready:not(.is-editor-preparing) .action-open-editor:focus-visible .action-icon {
  color: var(--tc-accent-main);
  opacity: 1;
  filter: none;
}

.preview-card.is-editor-ready:not(.is-editor-preparing):hover .action-open-editor .action-ready-overlay,
.preview-card.is-editor-ready:not(.is-editor-preparing):focus-within .action-open-editor .action-ready-overlay,
.preview-card.is-editor-ready:not(.is-editor-preparing) .action-open-editor:hover .action-ready-overlay,
.preview-card.is-editor-ready:not(.is-editor-preparing) .action-open-editor:focus-visible .action-ready-overlay {
  clip-path: inset(0 0 0 0);
}

@media (max-width: 1100px) {
  .card-footer {
    min-height: var(--tc-gallery-card-footer-condensed-min-height);
  }

  .preview-card.is-touch-preview .card-actions {
    gap: var(--tc-gallery-card-touch-actions-gap);
  }
}

.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 {
  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);
}

.preview-card:hover .card-footer,
.preview-card:focus-within .card-footer {
  background: var(--tc-card-box-bg-hover);
}

.card-title {
  color: var(--tc-text-main);
}

.preview-live-editor {
  border-color: var(--tc-button-border);
  background: var(--tc-button-bg);
  color: var(--tc-button-text);
  box-shadow: none;
}

.preview-live-editor:hover,
.preview-live-editor:focus-visible {
  border-color: var(--tc-button-border-strong);
  background: var(--tc-button-bg-hover);
  color: var(--tc-button-text-hover);
  box-shadow: none;
}

.action-favorite {
  border-color: var(--tc-control-border);
  background: var(--tc-control-bg);
  color: var(--tc-control-text-muted);
}

.action-favorite:hover,
.action-favorite:focus-visible {
  border-color: var(--tc-color-transparent);
  background: var(--tc-control-bg-hover);
  color: var(--tc-control-text-hover);
}

.preview-card.is-loading,
.preview-card.is-disabled {
  opacity: var(--tc-state-disabled-opacity);
}

.action-open-editor .action-icon * {
  fill: currentColor;
  stroke: none;
}

.action-open-editor .action-icon,
.preview-card:hover .action-open-editor .action-icon,
.preview-card:focus-within .action-open-editor .action-icon,
.action-open-editor:hover .action-icon,
.action-open-editor:focus-visible .action-icon {
  color: var(--tc-text-main);
  fill: currentColor;
  stroke: none;
  opacity: 1;
  filter: none;
}

.preview-card.is-editor-ready .action-open-editor .action-icon,
.preview-card.is-editor-ready:hover .action-open-editor .action-icon,
.preview-card.is-editor-ready:focus-within .action-open-editor .action-icon,
.preview-card.is-editor-ready .action-open-editor:hover .action-icon,
.preview-card.is-editor-ready .action-open-editor:focus-visible .action-icon {
  color: var(--tc-accent-main);
  opacity: 1;
  filter: none;
}

.card-title,
.card-actions {
  transform: translateY(3px);
}

/*
  Favorite (bookmark) on gallery cards: highlight only, never a filled box.
  #icon-bookmark is a solid shape (fill: currentColor), so the favorited cue is a
  colour change on the icon, not a background. Feature-layer state hook; framework
  tokens only (no raw colours, no !important, no component-selector overrides).
*/
.action-favorite,
.action-favorite:hover,
.action-favorite:focus-visible {
  border-color: var(--tc-color-transparent);
  background: var(--tc-color-transparent);
}

.action-favorite:focus-visible {
  outline: none;
  box-shadow: var(--tc-focus-ring);
}

.action-favorite .action-icon {
  color: var(--tc-button-icon);
  opacity: 0.86;
  transition: color 200ms var(--tc-ease-standard), opacity 200ms var(--tc-ease-standard);
}

.action-favorite:hover .action-icon,
.action-favorite:focus-visible .action-icon {
  color: var(--tc-button-icon-hover);
  opacity: 1;
}

.action-favorite.is-favorited .action-icon,
.action-favorite.is-favorited:hover .action-icon,
.action-favorite.is-favorited:focus-visible .action-icon {
  /* Favorited bookmark uses the accent (blue), consistent with the popup gallery
     and the rest of the app. */
  color: var(--tc-accent-main);
  opacity: 1;
}

/* Visibility is width-driven only; wide touch screens keep the button visible. */
@media (max-width: 1100px) {
  .preview-card:not(.is-touch-preview):not(.is-editor-armed) .action-open-editor {
    display: none;
  }
}
}

/* 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/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/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/faq/faq.css */
@layer features {
/* FAQ section layout and accordion styling for the landing page. */
.faq-section {
  position: relative;
  z-index: 5;
  min-height: clamp(520px, 62svh, 840px);
  display: flex;
  align-items: flex-start;
  padding: clamp(42px, 5vh, 68px) var(--tc-page-pad) clamp(30px, 4vh, 48px);
  background: var(--tc-color-transparent);
  color: var(--tc-text-main);
  border-top: 0;
}

.faq-shell {
  width: min(820px, 100%);
  margin: 0 auto;
}

.faq-heading {
  display: grid;
  justify-items: center;
  gap: var(--tc-space-5);
  margin-bottom: clamp(var(--tc-space-9), 2.4vw, var(--tc-space-14));
  text-align: center;
}

.faq-heading h2 {
  margin: 0;
  color: var(--tc-text-strong);
  font-size: clamp(1.45rem, 2.6vw, 2.25rem);
  font-weight: 680;
  line-height: 1;
  letter-spacing: 0;
}

.faq-heading p {
  max-width: 430px;
  margin: 0;
  color: var(--tc-text-subtle);
  font-size: 0.8125rem;
  font-weight: 430;
  line-height: 1.5;
}

.faq-list {
  display: grid;
  gap: var(--tc-space-6);
  align-items: start;
}

.faq-item {
  position: relative;
  overflow: visible;
  color: var(--tc-text-muted);
  -webkit-backdrop-filter: var(--tc-card-filter);
  backdrop-filter: var(--tc-card-filter);
  transition:
    border-color 220ms var(--tc-ease-standard),
    background-color 220ms var(--tc-ease-standard);
}

.faq-item[open] {
  border-color: var(--tc-card-border-active);
  background: var(--tc-card-bg-active);
  color: var(--tc-text-strong);
}

.faq-item:hover,
.faq-item:focus-within {
  border-color: var(--tc-card-border-hover);
  background: var(--tc-card-bg-hover);
  box-shadow: var(--tc-card-shadow);
}

.faq-item > .editor-frame-overlay--faq {
  --editor-frame-offset: 0px;
  --editor-frame-handle-inset: 0px;
  --editor-frame-radius: 0px;
  inset: -3px;
}

.faq-item[open] > .editor-frame-overlay--faq {
  --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);
}

.faq-item.is-current > .editor-frame-overlay--faq {
  --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);
}

.faq-item summary {
  position: relative;
  z-index: 1;
  gap: var(--tc-space-9);
  min-height: 56px;
  padding: 0 var(--tc-space-9);
  color: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.25;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary > span:first-child {
  min-width: 0;
}

.faq-item summary > span:last-child {
  position: relative;
  flex: 0 0 auto;
  width: var(--tc-icon-size-xl);
  height: var(--tc-icon-size-xl);
  color: var(--tc-text-muted);
}

.faq-item summary > span:last-child::before,
.faq-item summary > span:last-child::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition:
    opacity 220ms var(--tc-ease-standard),
    transform 220ms var(--tc-ease-standard);
}

.faq-item summary > span:last-child::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] summary > span:last-child::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item p {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: -4px 0 0;
  padding: 0 var(--tc-space-9) var(--tc-space-9);
  color: var(--tc-text-subtle);
  font-size: 0.8125rem;
  font-weight: 430;
  line-height: 1.62;
}

@media (max-width: 680px) {
  .faq-section {
    min-height: auto;
    align-items: flex-start;
    padding: var(--tc-space-14) var(--tc-page-pad) var(--tc-space-14);
  }

  .faq-section::before {
    content: none;
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 42px;
    background: var(--tc-bg-page);
    pointer-events: none;
  }

  .faq-shell {
    width: min(100%, 420px);
    box-sizing: border-box;
    padding-inline: 10px;
  }

  .faq-item summary {
    min-height: 50px;
    padding: 0 var(--tc-space-7);
    font-size: 0.8125rem;
  }

  .faq-item p {
    padding: 0 var(--tc-space-7) var(--tc-space-8);
    font-size: 0.75rem;
  }
}
}

/* source: shared/styles/hub/hub-layout.css */
@layer features {
html[data-theme="motion"] {
  color-scheme: dark;
  scroll-behavior: auto;
}

body[data-motion-hub] {
  min-height: 100vh;
  margin: 0;
  background: var(--tc-bg-app);
  color: var(--tc-text-main);
  font-family: var(--tc-font-body);
}

body[data-motion-hub]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--tc-bg-grid-opacity);
  background-image: var(--tc-bg-grid-image-soft);
  background-size: var(--tc-bg-grid-size);
  mask-image: var(--tc-bg-grid-mask);
}

body[data-motion-hub] a {
  color: inherit;
  text-decoration: none;
}

.hub-icons {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.motion-site-main {
  position: relative;
  z-index: 1;
}

.motion-home {
  min-height: clamp(540px, 72svh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(98px, 15vh, 150px) var(--tc-page-pad) clamp(42px, 7vh, 80px);
}

.motion-home__shell {
  width: min(1080px, 100%);
  display: grid;
  justify-items: center;
  gap: var(--tc-space-12);
  text-align: center;
}

.motion-home__copy {
  display: grid;
  justify-items: center;
  gap: var(--tc-space-6);
}

.motion-eyebrow {
  margin: 0;
  color: var(--tc-accent-main);
  font-size: var(--tc-font-size-xs);
  font-weight: 740;
  line-height: 1;
  text-transform: uppercase;
}

.motion-home h1,
.motion-section-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;
}

.motion-home__lead,
.motion-section-heading p {
  max-width: 560px;
  margin: 0;
  color: var(--tc-text-subtle);
  font-size: 0.875rem;
  font-weight: 430;
  line-height: 1.55;
}

.motion-home__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-4);
}

.motion-home__button,
.motion-app-card__button {
  border-radius: var(--tc-radius-sm);
}

.motion-home__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tc-space-4);
  max-width: 760px;
}

.motion-home__stats span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--tc-space-6);
  border: 1px solid var(--tc-border-soft);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-card-bg);
  color: var(--tc-text-muted);
  font-size: var(--tc-font-size-xs);
  font-weight: 650;
  line-height: 1;
}

.motion-apps {
  position: relative;
  z-index: 5;
  padding: clamp(42px, 5vh, 68px) var(--tc-page-pad) clamp(42px, 7vh, 88px);
}

.motion-section-shell {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.motion-section-heading {
  display: grid;
  justify-items: center;
  gap: var(--tc-space-5);
  margin-bottom: var(--tc-space-12);
  text-align: center;
}

.motion-app-toolbar {
  width: min(640px, 100%);
  margin: 0 auto var(--tc-space-9);
}

.motion-app-toolbar__input {
  width: 100%;
}

.motion-app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tc-space-7);
}

/* The registry cards hydrate after the initial HTML. Reserve their final grid
   rows so the architecture note below cannot jump when 20 cards replace the
   compact loading message. */
.motion-app-grid[data-hub-grid-state="loading"] {
  min-height: 2726px;
}

.motion-app-card {
  position: relative;
  min-height: 260px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: var(--tc-space-7);
  padding: clamp(var(--tc-space-9), 2.2vw, 23px);
  overflow: visible;
  isolation: isolate;
}

.motion-app-card > :not(.editor-frame-overlay) {
  position: relative;
  z-index: 1;
}

.motion-app-card > .editor-frame-overlay--card {
  --editor-frame-offset: 0px;
  --editor-frame-handle-inset: 0px;
  --editor-frame-radius: 0px;
  inset: -3px;
}

.motion-app-card:hover > .editor-frame-overlay--card,
.motion-app-card:focus-within > .editor-frame-overlay--card {
  visibility: visible;
  filter: var(--tc-filter-brightness-100);
}

.motion-app-card__topline,
.motion-app-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-5);
  min-width: 0;
}

.motion-app-card__category,
.motion-app-card__status {
  margin: 0;
  font-size: var(--tc-font-size-xs);
  font-weight: 740;
  line-height: 1;
  text-transform: uppercase;
}

.motion-app-card__category {
  color: var(--tc-text-faint);
}

.motion-app-card__status {
  color: var(--tc-app-accent, var(--tc-accent-main));
}

.motion-app-card h3 {
  margin: 0;
  color: var(--tc-text-strong);
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  font-weight: 650;
  line-height: 1.1;
}

.motion-app-card__body {
  display: grid;
  align-content: start;
  gap: var(--tc-space-5);
}

.motion-app-card p {
  margin: 0;
  color: var(--tc-text-subtle);
  font-size: 0.8125rem;
  font-weight: 430;
  line-height: 1.55;
}

.motion-app-card__preview {
  min-height: 86px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tc-border-soft);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-card-box-bg);
  color: var(--tc-app-accent, var(--tc-accent-main));
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 760;
  line-height: 1;
  text-align: center;
}

.motion-home__button svg,
.motion-app-card__button svg {
  width: 1em;
  height: 1em;
  flex: none;
}

.motion-app-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--tc-space-12);
  color: var(--tc-text-muted);
  text-align: center;
}

.motion-platform-note {
  margin-top: var(--tc-space-12);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tc-space-7);
}

.motion-platform-note article {
  min-height: 150px;
  padding: var(--tc-space-9);
}

.motion-platform-note h3 {
  margin: 0 0 var(--tc-space-5);
  color: var(--tc-text-strong);
  font-size: 1rem;
  font-weight: 650;
}

.motion-platform-note p {
  margin: 0;
  color: var(--tc-text-subtle);
  font-size: 0.8125rem;
  font-weight: 430;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .motion-app-grid,
  .motion-platform-note {
    grid-template-columns: minmax(0, 1fr);
  }

  .motion-app-grid[data-hub-grid-state="loading"] {
    min-height: 5466px;
  }
}

@media (max-width: 680px) {
  .motion-home {
    min-height: auto;
    padding: 116px var(--tc-page-pad) var(--tc-space-14);
  }

  .motion-home__actions,
  .motion-app-card__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .motion-home__button,
  .motion-app-card__button {
    width: 100%;
  }

  .motion-apps {
    padding: var(--tc-space-14) var(--tc-page-pad);
  }
}
}