/* theme: Silver Screen (silver-screen)
 * Generated by assets/scripts/build-silver-screen-css.py from swiss.css,
 * because the upstream @noizu/styleguide generator is unavailable here.
 * Source of truth: themes/theme-silver-screen/*.yaml
 * Palette: cool silver/grey/charcoal; single accent magenta #ff4081.
 */

/* ── VARS ── (from: style-guide.vars.yaml, style-guide.color-palette.yaml, style-guide.color-modes.yaml) */
/*
 * Stopwatch — Silver Screen Style Guide — CSS Custom Properties
 *
 * Table of Contents:
 *    1. Palette
 *    2. Grid & Spacing
 *    3. Foundations: Typography
 *    4. Foundations: Borders & Radius
 *    5. Foundations: Transitions
 *    6. Foundations: Shadows & Elevation
 *    7. Foundations: Opacity
 *    8. Foundations: Layout
 *    9. Foundations: Micro Label
 *   10. Typography
 *   11. Semantic
 *   12. Base
 *   13. Component Defaults: Cards
 *   14. Component Defaults: Buttons
 *   15. Component Defaults: Indicators
 *   16. Component Defaults: Forms
 *   17. Component Defaults: Shells
 *   18. Component Defaults: Sections
 *   19. Branding
 *   20. Component Defaults: Dividers
 *   21. Component Defaults: Tokens
 *   22. Component Defaults: Other
 *   23. Cards
 *   24. Buttons
 *   25. Toggle
 *   26. HUI: Focus & Interaction
 *   27. HUI: Controls
 *   28. HUI: Trigger Buttons
 *   29. HUI: Overlay Panels
 *   30. HUI: Tabs
 *   31. HUI: Disclosure
 *   32. HUI: Field Controls
 *   33. HUI: Dialog
 *   34. HUI: Showcase Grid
 *   35. Neutrals
 *   36. Accent & Steels
 *   37. Spacing
 *   38. Radius
 *
 * Dark mode overrides follow the main block.
 */

html[data-design-theme="silver-screen"] {

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Palette */
  --rose: #ff4081;
  --rose-light: rgba(255,64,129,0.08);
  --orange: #a6761d;
  --orange-light: rgba(166,118,29,0.08);
  --amber: #a6761d;
  --amber-light: rgba(166,118,29,0.08);
  --lime: #2e8b57;
  --lime-light: rgba(46,139,87,0.08);
  --emerald: #2e8b57;
  --emerald-light: rgba(46,139,87,0.08);
  --teal: #35688f;
  --teal-light: rgba(53,104,143,0.08);
  --cyan: #35688f;
  --cyan-light: rgba(53,104,143,0.08);
  --sky: #35688f;
  --sky-light: rgba(53,104,143,0.08);
  --indigo: #35688f;
  --indigo-light: rgba(53,104,143,0.08);
  --violet: #35688f;
  --violet-light: rgba(53,104,143,0.08);
  --purple: #35688f;
  --purple-light: rgba(53,104,143,0.08);
  --fuchsia: #ff4081;
  --fuchsia-light: rgba(255,64,129,0.08);
  --pink: #ff4081;
  --pink-light: rgba(255,64,129,0.08);

  /* Grid & Spacing */
  --size-border-thin: 1px;
  --size-border-thick: 2px;
  --size-border-heavy: 3px;
  --size-border-extra-heavy: 4px;
  --size-border-medium: 1.5px;
  --size-border-accent: 5px;
  --size-md-sm: 14px;
  --size-2xs: 10px;
  --size-space-1-mid: 12px;
  --size-space-2: 16px;
  --size-space-2-qtr: 18px;
  --size-xl-lerp: 24px;
  --size-dot: 6px;
  --size-icon-sm: 18px;
  --size-action: 28px;
  --space-7: 56px;
  --space-9: 72px;
  --space-11: 88px;
  --space-12: 96px;
  --space-15: 120px;
  --space-16: 128px;
  --space-18: 144px;
  --space-20: 160px;
  --space-25: 200px;
  --space-30: 240px;
  --space-32: 256px;
  --space-35: 280px;
  --space-37: 296px;
  --space-48: 384px;
  --space-52: 416px;
  --space-60: 480px;
  --space-64: 512px;
  --space-80: 640px;
  --space-90: 720px;
  --space-96: 768px;
  --space-108: 864px;
  --space-112: 896px;
  --space-128: 1024px;
  --space-144: 1152px;
  --space-150: 1200px;
  --space-160: 1280px;
  --space-0-mid: 4px;
  --space-quarter: 2px;
  --space-1-mid: 12px;
  --space-2-mid: 20px;
  --space-4-mid: 36px;
  --space-5-mid: 44px;
  --space-7-mid: 60px;
  --space-32-mid: 260px;
  --space-37-mid: 300px;
  --space-52-mid: 420px;

  /* ══ Foundations: Typography ══ */
    /* line */
  --line-height-base: 1.5;
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-heading: 1.2;
  --line-height-compact: 1;
    /* font */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
    /* letter */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.08em;
  --letter-spacing-snug: -0.01em;
  --letter-spacing-label: 0.06em;
  --letter-spacing-widest: 0.1em;

  /* ══ Foundations: Borders & Radius ══ */
    /* radius */
  --radius-none: 0%;
  --radius-xl: 50%;
  --radius-circle: 50%;
    /* border */
  --border-thin: var(--size-border-thin);
  --border-thick: var(--size-border-thick);
  --border-heavy: var(--size-border-heavy);
  --border-control: var(--size-border-medium);
  --border-accent: var(--size-border-accent);
    /* accent */
  --accent-width: var(--space-1);

  /* ══ Foundations: Transitions ══ */
    /* fast */
  --transition-fast: 0.1s;
    /* base */
  --transition-base: 0.15s;
    /* slow */
  --transition-slow: 0.3s;
    /* medium */
  --transition-medium: 0.22s;

  /* ══ Foundations: Shadows & Elevation ══ */
    /* overlay */
  --overlay-highlight: rgba(255,255,255,0.22);
  --overlay-shadow: rgba(0,0,0,0.18);
  --overlay-backdrop: rgba(0,0,0,0.4);
    /* shadow */
  --shadow-elevation: 0 var(--space-1) var(--space-3) var(--shadow-color), 0 var(--space-half) var(--space-2) var(--shadow-color);
  --shadow-sm: 0 var(--space-quarter) var(--border-heavy) rgba(0,0,0,0.25);
  --shadow-inset: inset 0 var(--space-quarter) var(--space-half) rgba(0,0,0,0.06);
  --shadow-overlay: 0 var(--space-1) var(--space-4) rgba(0,0,0,0.18), 0 var(--space-half) var(--space-1) rgba(0,0,0,0.1);
  --shadow-toast: 0 var(--space-half) var(--space-1) rgba(0,0,0,0.35);
  --shadow-control: inset 0 var(--size-border-thin) var(--border-heavy) rgba(0,0,0,0.04);
  --shadow-thumb: 0 var(--size-border-thin) var(--size-border-extra-heavy) rgba(0,0,0,0.18), 0 var(--size-border-thin) var(--size-border-thick) rgba(0,0,0,0.1);
  --shadow-panel: 0 var(--space-1) var(--space-4) var(--shadow-color), 0 var(--space-half) var(--space-1) rgba(0,0,0,0.06), 0 0 var(--size-border-thin) rgba(0,0,0,0.06);
  --shadow-dialog: 0 var(--space-3) var(--space-8) rgba(0,0,0,0.18), 0 var(--space-1) var(--space-4) var(--shadow-color), 0 0 var(--size-border-thick) rgba(0,0,0,0.06);
  --shadow-floating: 0 var(--space-half) var(--space-3) rgba(0,0,0,0.12), 0 var(--size-border-thin) var(--size-dot) rgba(0,0,0,0.08);

  /* ══ Foundations: Opacity ══ */
    /* muted */
  --opacity-muted: 0.45;
    /* subtle */
  --opacity-subtle: 0.55;
    /* soft */
  --opacity-soft: 0.75;
    /* disabled */
  --opacity-disabled: 0.4;
    /* faint */
  --opacity-faint: 0.3;

  /* ══ Foundations: Layout ══ */
    /* z */
  --z-chrome: 300;
  --z-panel: 200;
  --z-dropdown: 50;
  --z-overlay: 100;
  --z-dialog: 101;
  --z-floating: 90;
    /* on */
  --on-semantic-color: var(--white);
    /* control */
  --control-height: var(--space-5);
    /* navbar */
  --navbar-height: var(--space-7);
    /* dropdown */
  --dropdown-max-height: var(--space-25);
    /* popover */
  --popover-min-width: var(--space-25);
    /* sidebar */
  --sidebar-width: var(--space-30);
    /* url */
  --url-bar-max-width: var(--space-30);
    /* aside */
  --aside-width: var(--space-32-mid);
    /* card */
  --card-min-width: var(--space-35);
    /* dialog */
  --dialog-width: var(--space-52-mid);
    /* prose */
  --prose-max-width: var(--space-60);

  /* ══ Foundations: Micro Label ══ */
    /* font */
  --micro-label-font-family: var(--font-mono);
  --micro-label-font-size: var(--font-size-xs);
  --micro-label-font-weight: var(--font-weight-bold);
    /* letter */
  --micro-label-letter-spacing: var(--letter-spacing-wider);
    /* text */
  --micro-label-text-transform: uppercase;
    /* color */
  --micro-label-color: var(--gray-500);

  /* Typography */
  --font-sans: 'Roboto', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-display: 'Roboto', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --font-decorative: 'Roboto', sans-serif;
  --size-xs: 11px;
  --size-sm: 13px;
  --size-md: 16px;
  --size-lg: 20px;
  --size-xl: 28px;
  --font-size-2xs: 9px;
  --font-size-xs: var(--size-xs);
  --font-size-sm: var(--size-sm);
  --font-size-md: var(--size-md);
  --font-size-lg: var(--size-lg);
  --font-size-xl: var(--size-xl);
  --font-size-2xl: 36px;
  --font-size-3xl: 44px;
  --font-size-display: 52px;
  --font-size-base: var(--size-md);

  /* Semantic */
  --success: #2e8b57;
  --success-tint: rgba(46,139,87,0.10);
  --warning: #a6761d;
  --warning-tint: rgba(166,118,29,0.10);
  --error: #c0392b;
  --error-tint: rgba(192,57,43,0.10);
  --info: #35688f;
  --info-tint: rgba(53,104,143,0.10);

  /* Semantic Classes */
    /* danger */
  --semantic-danger-accent: #ff4081;
  --semantic-danger-background: rgba(255,64,129,0.06);
  --semantic-danger-color: #c0392b;
    /* warning */
  --semantic-warning-accent: #a6761d;
  --semantic-warning-background: rgba(166,118,29,0.06);
  --semantic-warning-color: #a6761d;
    /* success */
  --semantic-success-accent: #2e8b57;
  --semantic-success-background: rgba(46,139,87,0.06);
  --semantic-success-color: #2e8b57;
    /* info */
  --semantic-info-accent: #35688f;
  --semantic-info-background: rgba(53,104,143,0.06);
  --semantic-info-color: #35688f;
    /* primary */
  --semantic-primary-accent: #0d1114;
  --semantic-primary-background: rgba(0,0,0,0.04);
  --semantic-primary-color: #0d1114;
    /* brand */
  --semantic-brand-accent: #ff4081;
  --semantic-brand-background: rgba(255,64,129,0.06);
  --semantic-brand-color: #ff4081;

  /* Base */
  --base-font-size: 16px;
  --base-line-height: 1.5;
  --base-font-family: var(--font-sans);
  --base-font-color: var(--black);
  --base-background: var(--white);
  --bg: var(--white);

  /* ══ Component Defaults: Cards ══ */
    /* card */
  --card-grid-gap: var(--space-2);
  --card-grid-min-width: var(--card-min-width);
  --card-border-width: var(--border-thin);
  --card-border-style: solid;
  --card-border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
  --card-border-width-accent: var(--accent-width);
  --card-padding: var(--space-3);
  --card-transition: var(--transition-base);
  --card-header-color: var(--text-secondary);
  --card-footer-color: var(--text-secondary);
  --card-hover-background: var(--surface-alt);
  --card-accent-color: var(--brand-red);
  --card-filled-background: var(--black);
  --card-filled-color: var(--text-inverse);
  --card-filled-hover-background: var(--gray-900);
  --card-title-font-size: var(--font-size-md);
  --card-title-font-weight: var(--font-weight-bold);
  --card-title-letter-spacing: var(--letter-spacing-tight);
  --card-title-margin-bottom: var(--space-1);
  --card-title-line-height: var(--line-height-heading);
  --card-body-padding: var(--space-1) var(--card-padding) var(--space-1) var(--card-padding);
  --card-body-font-size: var(--font-size-sm);
  --card-body-color: var(--text-secondary);
  --card-body-line-height: var(--line-height-relaxed);
  --card-body-filled-color: var(--text-muted);
  --card-tag-font-family: var(--font-mono);
  --card-tag-font-size: var(--font-size-2xs);
  --card-tag-font-weight: var(--font-weight-medium);
  --card-tag-padding: var(--space-half) var(--space-1);
  --card-tag-background: var(--surface-alt);
  --card-tag-color: var(--gray-700);
  --card-tag-margin-top: var(--space-2);
  --card-rounded-radius: var(--radius-md);
  --card-drop-shadow: var(--shadow-elevation);
  --card-drop-shadow-color: var(--shadow-color);
  --card-separator-width: var(--border-thin);
  --card-separator-color: var(--border);
    /* table */
  --table-cell-padding: var(--space-2) var(--space-1);
  --table-header-font-size: var(--micro-label-font-size);
  --table-header-font-family: var(--micro-label-font-family);
  --table-header-letter-spacing: var(--letter-spacing-wide);
  --table-header-border-width: var(--border-thick);

  /* ══ Component Defaults: Buttons ══ */
    /* line */
  --btn-line-height: var(--line-height-compact);
    /* padding */
  --btn-padding-y: var(--space-1);
  --btn-padding-x: var(--space-2);
    /* border */
  --btn-border-width: var(--border-thin);
  --btn-border-style: solid;
    /* transition */
  --btn-transition: var(--transition-base);
    /* rounded */
  --btn-rounded-radius: var(--radius-md);
    /* drop */
  --btn-drop-shadow: var(--shadow-elevation);
    /* sm */
  --btn-sm-font-size: var(--space-1-mid);
  --btn-sm-padding-y: var(--space-half);
  --btn-sm-padding-x: var(--space-1);
    /* lg */
  --btn-lg-font-size: var(--font-size-md);
  --btn-lg-padding-y: var(--space-2);
  --btn-lg-padding-x: var(--space-3);
    /* xl */
  --btn-xl-font-size: var(--size-icon-sm);
  --btn-xl-padding-y: var(--space-3);
  --btn-xl-padding-x: var(--space-4);
    /* active */
  --btn-active-offset: var(--border-thin);
    /* overlay */
  --btn-overlay-highlight: var(--overlay-highlight);
  --btn-overlay-shadow: var(--overlay-shadow);

  /* ══ Component Defaults: Indicators ══ */
    /* badge */
  --badge-padding: var(--space-half) var(--space-1);
  --badge-radius: var(--radius-md);
  --badge-font-size: var(--font-size-xs);
  --badge-font-weight: var(--font-weight-semibold);
  --badge-font-family: var(--font-mono);
  --badge-line-height: var(--line-height-tight);
  --badge-count-min-width: var(--size-icon-sm);
  --badge-count-height: var(--size-icon-sm);
  --badge-count-padding: 0 var(--space-half);
    /* alert */
  --alert-border-width: var(--border-heavy);
  --alert-gap: var(--space-half);
  --alert-title-font-weight: var(--font-weight-semibold);
  --alert-title-font-size: var(--font-size-sm);
  --alert-title-line-height: var(--line-height-tight);
  --alert-body-font-size: var(--font-size-sm);
  --alert-body-line-height: var(--line-height-normal);
    /* toast */
  --toast-gap: var(--space-2);
  --toast-padding: var(--space-3) var(--space-3);
  --toast-bg: var(--surface);
  --toast-bg-success: var(--success-tint);
  --toast-bg-error: var(--error-tint);
  --toast-bg-warning: var(--warning-tint);
  --toast-bg-info: var(--info-tint);
  --toast-color: var(--text);
  --toast-color-success: var(--success);
  --toast-color-error: var(--error);
  --toast-color-warning: var(--warning);
  --toast-color-info: var(--info);
  --toast-font-size: var(--font-size-sm);
  --toast-font-weight: var(--font-weight-normal);
  --toast-line-height: var(--line-height-tight);
  --toast-max-width: var(--prose-max-width);
  --toast-border-width: var(--border-accent);
  --toast-shadow: var(--shadow-toast);
  --toast-dot-size: var(--radius-md);
    /* progress */
  --progress-height: var(--space-1);
  --progress-height-sm: var(--space-half);
  --progress-height-lg: var(--radius-md);
  --progress-radius: var(--radius-none);
  --progress-transition: width var(--transition-slow) ease;
    /* status */
  --status-dot-row-gap: var(--size-dot);
  --status-dot-row-font-size: var(--font-size-sm);
  --status-dot-size: var(--space-1);
    /* tag */
  --tag-padding: var(--space-half) var(--space-1);
  --tag-radius: var(--radius);
  --tag-font-size: var(--font-size-xs);
  --tag-font-weight: var(--font-weight-medium);
  --tag-font-family: var(--font-mono);
  --tag-border-width: var(--border-thin);

  /* ══ Component Defaults: Forms ══ */
    /* field */
  --field-height: var(--hui-field-height);
  --field-padding-x: var(--hui-field-padding-x);
  --field-font-size: var(--hui-field-font-size);
  --field-bg: var(--hui-field-bg);
  --field-border-color: var(--hui-field-border);
  --field-border-hover: var(--hui-field-border-hover);
  --field-focus-border: var(--hui-field-focus-border);
  --field-shadow: var(--hui-field-shadow);
  --field-border-width: var(--hui-field-border-width);
  --field-transition: border-color var(--transition-base) ease, box-shadow var(--transition-base) ease, background var(--transition-base) ease;
  --field-focus-ring: 0 0 0 var(--hui-focus-ring-width) var(--hui-focus-ring-color);
  --field-textarea-padding: var(--space-1) var(--space-2);
  --field-textarea-min-height: var(--space-11);
  --field-textarea-line-height: var(--line-height-normal);
  --field-select-padding-right: var(--space-4);
  --field-validation-bar-width: var(--border-heavy);
  --field-label-gap: var(--space-half);
  --field-group-gap: var(--space-1);
  --field-label-font-size: var(--micro-label-font-size);
  --field-label-font-weight: var(--micro-label-font-weight);
  --field-label-letter-spacing: var(--micro-label-letter-spacing);
  --field-checkbox-font-size: var(--font-size-sm);
  --field-hint-font-size: var(--font-size-xs);
  --field-hint-line-height: var(--line-height-tight);
  --field-hint-margin-top: var(--size-border-thin);
  --field-hint-margin-left: var(--size-border-thick);
  --field-char-count-line-height: var(--line-height-tight);
    /* control */
  --control-size: var(--space-2);
  --control-border-width: var(--border-control);
  --control-border-color: var(--border-strong);
  --control-transition: border-color var(--transition-fast), background var(--transition-fast);
  --control-shadow: var(--shadow-inset);
  --control-checked-color: var(--brand-blue);
    /* switch */
  --switch-width: var(--space-4-mid);
  --switch-height: var(--size-lg);
  --switch-radius: var(--size-2xs);
  --switch-transition: background var(--transition-base);
  --switch-thumb-size: var(--size-md-sm);
  --switch-thumb-radius: calc(var(--space-1) - var(--border-thin));
  --switch-thumb-inset: var(--size-border-heavy);
  --switch-thumb-checked-pos: calc(var(--size-lg) - var(--size-border-thin));
  --switch-thumb-shadow: var(--shadow-sm);
  --switch-thumb-transition: left var(--transition-base);
    /* radio */
  --radio-size: var(--space-2);
  --radio-border-width: var(--border-control);
  --radio-inner-shadow: inset 0 0 0 var(--size-border-extra-heavy) var(--brand-blue);

  /* ══ Component Defaults: Shells ══ */
    /* shell */
  --shell-navbar-height: var(--navbar-height);
  --shell-navbar-z-index: var(--z-chrome);
  --shell-navbar-font-size: var(--font-size-sm);
  --shell-navbar-border-width: var(--border-thin);
  --shell-navbar-link-gap: var(--border-thick);
  --shell-navbar-link-padding: var(--space-half) var(--space-1);
  --shell-navbar-link-font-size: var(--font-size-sm);
  --shell-navbar-link-radius: var(--radius);
  --shell-navbar-link-transition: opacity var(--transition-fast), background var(--transition-fast);
  --shell-navbar-link-opacity: var(--opacity-soft);
  --shell-navbar-link-active-weight: var(--font-weight-semibold);
  --shell-navbar-action-size: var(--size-action);
  --shell-navbar-action-font-size: var(--font-size-sm);
  --shell-navbar-action-radius: var(--radius);
  --shell-navbar-action-transition: background var(--transition-fast);
  --shell-navbar-dismiss-padding: var(--space-half) var(--space-1);
  --shell-navbar-dismiss-font-size: var(--font-size-xs);
  --shell-navbar-dismiss-radius: var(--radius);
  --shell-navbar-dismiss-transition: background var(--transition-fast);
  --shell-sidebar-width: var(--sidebar-width);
  --shell-sidebar-z-index: var(--z-panel);
  --shell-sidebar-border-width: var(--border-thin);
  --shell-sidebar-section-font-size: var(--micro-label-font-size);
  --shell-sidebar-section-letter-spacing: var(--micro-label-letter-spacing);
  --shell-sidebar-section-opacity: var(--opacity-muted);
  --shell-sidebar-item-gap: var(--space-1);
  --shell-sidebar-item-padding: var(--space-1) var(--space-3);
  --shell-sidebar-item-font-size: var(--font-size-sm);
  --shell-sidebar-item-transition: background var(--transition-fast);
  --shell-sidebar-item-active-weight: var(--font-weight-semibold);
  --shell-sidebar-glyph-size: var(--size-icon-sm);
  --shell-sidebar-glyph-font-size: var(--font-size-sm);
  --shell-sidebar-divider-width: var(--border-thin);
  --shell-aside-width: var(--aside-width);
  --shell-aside-z-index: var(--z-panel);
  --shell-aside-border-width: var(--border-thin);
  --shell-aside-section-font-size: var(--font-size-xs);
  --shell-aside-section-letter-spacing: var(--letter-spacing-wide);
  --shell-aside-section-opacity: var(--opacity-muted);
  --shell-aside-row-padding: var(--space-1) var(--space-3);
  --shell-aside-row-font-size: var(--font-size-sm);
  --shell-aside-row-border-width: var(--border-thin);
  --shell-aside-meta-font-size: var(--font-size-xs);
  --shell-aside-meta-opacity: var(--opacity-subtle);
  --shell-footer-height: var(--space-4);
  --shell-footer-z-index: var(--z-chrome);
  --shell-footer-font-size: var(--font-size-xs);
  --shell-footer-border-width: var(--border-thin);
  --shell-footer-dot-size: var(--size-dot);
  --shell-footer-dot-opacity: var(--opacity-faint);
    /* screen */
  --screen-frame-radius: var(--space-1);
  --screen-frame-shadow: var(--shadow-overlay);
  --screen-frame-border-width: var(--border-thin);
  --screen-titlebar-gap: var(--size-dot);
  --screen-titlebar-padding: var(--space-1) var(--space-2);
  --screen-titlebar-font-size: var(--font-size-xs);
  --screen-dots-gap: var(--space-half);
  --screen-dot-size: var(--font-size-2xs);
  --screen-dot-close: #ff5f56;
  --screen-dot-minimize: #ffbd2e;
  --screen-dot-maximize: #27c93f;
  --screen-url-padding: var(--space-half) var(--space-1);
  --screen-url-radius: var(--space-half);
  --screen-url-max-width: var(--url-bar-max-width);
  --screen-url-border-width: var(--border-thin);

  /* ══ Component Defaults: Sections ══ */
    /* border */
  --sg-border: var(--border-thin) solid var(--border);
    /* screen */
  --sg-screen-url-max-width: var(--space-37-mid);
  --sg-screen-body-min-height: var(--space-25);
  --sg-screen-shadow: var(--size-dot) var(--size-dot) 0 var(--gray-200);
    /* section */
  --sg-section-number-padding: var(--border-heavy) var(--space-1);
  --sg-section-number-letter-spacing: var(--micro-label-letter-spacing);
  --sg-section-title-font-size: var(--font-size-lg);
    /* principle */
  --sg-principle-label-width: var(--space-9);
    /* description */
  --sg-description-max-width: var(--prose-max-width);
    /* hairline */
  --sg-hairline: var(--border-thick);
    /* group */
  --sg-group-content-padding: var(--border-thick) var(--size-dot);
  --sg-group-content-gap: var(--border-thick);
  --sg-group-item-margin-right: var(--space-half);
    /* bar */
  --sg-bar-height: var(--size-lg);
  --sg-bar-min-width: var(--space-half);
  --sg-bar-radius: var(--radius);
  --sg-bar-label-font-size: var(--micro-label-font-size);
    /* spacing */
  --sg-spacing-label-width: var(--space-10);
  --sg-spacing-value-width: var(--space-7-mid);
  --sg-spacing-gap: var(--size-dot);
    /* principles */
  --sg-principles-font-size: var(--font-size-sm);
  --sg-principles-line-height: var(--line-height-relaxed);
    /* diagram */
  --sg-diagram-min-height: var(--space-15);
  --sg-diagram-gutter-width: var(--space-5);
  --sg-diagram-hatch-width: var(--border-thick);
  --sg-diagram-hatch-gap: var(--space-1);
  --sg-diagram-annotation-font-size: var(--space-1);
  --sg-diagram-padding-height: var(--space-2);
  --sg-diagram-padding-height-sm: var(--space-1);
  --sg-diagram-detail-font-size: var(--font-size-sm);
  --sg-diagram-detail-font-weight: var(--font-weight-semibold);
  --sg-diagram-note-font-size: var(--micro-label-font-size);

  /* Branding */
  --branding-logo-font-size: 28px;
  --branding-logo-font-weight: 700;
  --branding-logo-letter-spacing: -0.04em;
  --branding-logo-text-transform: none;
  --branding-logo-bg: var(--white);
  --branding-border: 2px solid var(--black);
  --branding-grid-width: var(--card-min-width);
  --branding-logo-max-width: var(--space-20);
  --branding-logo-max-height: var(--space-15);
  --branding-placeholder-width: var(--space-15);
  --branding-placeholder-height: var(--space-10);
  --branding-placeholder-border: var(--border-thick) dashed var(--border-strong);
  --branding-name-font-size: var(--space-2-mid);
  --branding-name-font-weight: var(--font-weight-bold);
  --branding-name-letter-spacing: var(--letter-spacing-tight);
  --branding-name-border: var(--card-border);
  --branding-field-label-font-size: var(--micro-label-font-size);
  --branding-field-label-font-weight: var(--micro-label-font-weight);
  --branding-field-label-letter-spacing: var(--letter-spacing-wide);
  --branding-field-value-font-size: var(--font-size-sm);
  --branding-field-value-line-height: var(--line-height-relaxed);
  --branding-field-value-color: var(--text-secondary);
  --branding-keyword-font-size: var(--micro-label-font-size);
  --branding-keyword-font-weight: var(--micro-label-font-weight);
  --branding-keyword-letter-spacing: var(--micro-label-letter-spacing);
  --branding-keyword-color: var(--text-secondary);
  --branding-keyword-padding: var(--border-heavy) var(--font-size-2xs);
  --branding-keyword-border: var(--border-thin) solid var(--border-strong);
  --branding-keyword-gap: var(--space-half);
  --branding-keyword-margin-top: var(--space-half);
  --branding-logo-padding: 0;
  --branding-logo-border-radius: var(--radius);

  /* ══ Component Defaults: Dividers ══ */
    /* height */
  --hr-height: var(--border-thin);
    /* thick */
  --hr-thick: var(--border-thick);
    /* heavy */
  --hr-heavy: var(--border-heavy);
    /* glow */
  --hr-glow-blur: 0.3px;
    /* overline */
  --hr-overline-length: var(--space-6);

  /* ══ Component Defaults: Tokens ══ */
    /* grid */
  --token-grid-min-width: var(--space-37-mid);
  --token-grid-gap: var(--space-2);
    /* card */
  --token-card-background: var(--surface);
  --token-card-border: var(--border-thin) solid var(--border);
  --token-card-padding: var(--space-3);
  --token-card-title-font-size: var(--micro-label-font-size);
  --token-card-title-font-weight: var(--micro-label-font-weight);
  --token-card-title-text-transform: var(--micro-label-text-transform);
  --token-card-title-letter-spacing: var(--micro-label-letter-spacing);
  --token-card-title-color: var(--base-font-color);
  --token-card-title-margin-bottom: var(--space-2);
  --token-card-title-padding-bottom: var(--space-1);
  --token-card-title-border-bottom: var(--border-thin) solid var(--border);
    /* row */
  --token-row-padding: var(--border-heavy) 0;
  --token-row-font-family: var(--font-mono);
  --token-row-font-size: var(--font-size-xs);
  --token-row-gap: var(--space-1);
    /* name */
  --token-name-color: var(--gray-500);
    /* value */
  --token-value-color: var(--base-font-color);
  --token-value-font-weight: var(--font-weight-medium);
    /* preview */
  --token-preview-color-size: var(--size-space-2);
  --token-preview-color-border: var(--border-thin) solid var(--border);
  --token-preview-font-size: var(--font-size-sm);
  --token-preview-space-max-width: var(--space-6);
  --token-preview-space-max-height: var(--space-2);
  --token-preview-radius-size: var(--space-3);
  --token-preview-radius-border: var(--border-thick) solid var(--token-value-color);

  /* ══ Component Defaults: Other ══ */
    /* font */
  --font-size-base-lerp: 16px;
  --font-size-xs-lerp: 11px;
  --font-size-sm-lerp: 13px;
  --font-size-md-lerp: 16px;
  --font-size-lg-lerp: 20px;
  --font-size-xl-lerp: 24px;
  --font-size-2xl-lerp: 32px;
  --font-size-3xl-lerp: 40px;
  --font-size-display-lerp: 56px;
    /* gray */
  --gray-100-lerp: #ededed;
    /* toggle */
  --toggle-icon-collapsed: '\25B6';
  --toggle-icon-expanded: '\25BC';
  --toggle-icon-size: var(--font-size-2xs);
  --toggle-icon-color: var(--gray-400);
  --toggle-transition: var(--transition-base) ease;
    /* collapse */
  --collapse-section-height: var(--space-16);
  --collapse-subsection-height: var(--space-8);
    /* fieldset */
  --fieldset-legend-padding: var(--size-dot);
  --fieldset-legend-margin-bottom: var(--border-thick);
  --fieldset-border-width: var(--border-thin);
    /* hui */
  --hui-control-size: var(--size-lg);
  --hui-checkbox-radius: var(--border-heavy);
  --hui-switch-track-width: var(--space-5-mid);
  --hui-switch-track-height: var(--space-3);
  --hui-switch-track-radius: var(--radius-md);
  --hui-switch-thumb-size: var(--size-space-2-qtr);
  --hui-switch-thumb-bg: var(--white);
  --hui-radio-option-padding-y: var(--size-dot);
  --hui-radio-option-padding-x: var(--font-size-2xs);
  --hui-radio-dot-size: var(--size-space-2);
  --hui-control-gap: var(--space-1);
  --hui-control-border-width: var(--size-border-medium);
  --hui-control-transition: background var(--transition-base) ease, border-color var(--transition-base) ease;
  --hui-control-label-color: var(--text-secondary);
  --hui-switch-gap: var(--space-3);
  --hui-switch-thumb-radius: var(--radius-circle);
  --hui-switch-thumb-inset: var(--border-heavy);
  --hui-switch-thumb-transition: left var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
  --hui-switch-track-transition: background var(--transition-medium) ease;
  --hui-radio-border-width: var(--border-thin);
  --hui-radio-transition: border-color var(--transition-base) ease, background var(--transition-base) ease;
  --hui-radio-dot-radius: var(--radius-circle);
  --hui-radio-dot-inner-size: calc(var(--space-1) - var(--border-thin));
  --hui-radio-dot-inner-radius: var(--radius-circle);
  --hui-trigger-padding-y: var(--space-1);
  --hui-trigger-padding-x: var(--size-space-1-mid);
  --hui-trigger-font-size: var(--font-size-sm);
  --hui-trigger-font-weight: var(--font-weight-medium);
  --hui-trigger-gap: var(--size-dot);
  --hui-trigger-border-width: var(--border-thin);
  --hui-trigger-transition: border-color var(--transition-base) ease, background var(--transition-base) ease;
  --hui-panel-padding: var(--size-dot);
  --hui-panel-margin-top: var(--size-dot);
  --hui-panel-item-padding-y: var(--space-1);
  --hui-panel-item-padding-x: var(--font-size-2xs);
  --hui-panel-item-font-size: var(--font-size-sm);
  --hui-panel-item-color: var(--text);
  --hui-popover-padding: var(--space-3);
  --hui-panel-border-width: var(--border-thin);
  --hui-panel-z-index: var(--z-dropdown);
  --hui-panel-item-gap: var(--space-1);
  --hui-panel-item-radius-inset: var(--border-thick);
  --hui-panel-item-transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
  --hui-panel-item-disabled-opacity: var(--opacity-disabled);
  --hui-panel-item-selected-weight: var(--font-weight-semibold);
  --hui-panel-sep-height: var(--border-thin);
  --hui-panel-sep-margin-y: var(--space-half);
  --hui-panel-max-height: var(--dropdown-max-height);
  --hui-menu-min-width: var(--space-20);
  --hui-popover-min-width: var(--popover-min-width);
  --hui-combo-icon-area: var(--space-4-mid);
  --hui-tab-padding-y: var(--font-size-2xs);
  --hui-tab-padding-x: var(--size-space-2);
  --hui-tab-font-size: var(--font-size-sm);
  --hui-tab-font-weight: var(--font-weight-medium);
  --hui-tab-font-weight-selected: var(--font-weight-semibold);
  --hui-tab-panel-color: var(--text-secondary);
  --hui-tab-indicator-width: var(--border-thick);
  --hui-tab-indicator-offset: calc(-1 * var(--border-thin));
  --hui-tab-transition: color var(--transition-base) ease, border-color var(--transition-base) ease;
  --hui-tab-list-border-width: var(--border-thin);
  --hui-disclosure-padding-y: var(--font-size-2xs);
  --hui-disclosure-padding-x: var(--size-md-sm);
  --hui-disclosure-font-size: var(--font-size-sm);
  --hui-disclosure-font-weight: var(--font-weight-medium);
  --hui-disclosure-border-width: var(--border-thin);
  --hui-disclosure-transition: background var(--transition-base) ease;
  --hui-disclosure-chevron-size: var(--size-md-sm);
  --hui-disclosure-chevron-transition: transform var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
  --hui-disclosure-panel-line-height: var(--line-height-relaxed);
  --hui-field-height: var(--control-height);
  --hui-field-padding-x: var(--size-space-1-mid);
  --hui-field-font-size: var(--font-size-sm);
  --hui-field-border-width: var(--border-thin);
  --hui-field-transition: border-color var(--transition-base) ease, box-shadow var(--transition-base) ease;
  --hui-field-icon-area: var(--space-4);
  --hui-field-chevron-color: var(--gray-400);
  --hui-field-chevron-size: var(--size-dot);
  --hui-field-chevron-border-width: var(--size-border-medium);
  --hui-field-chevron-offset: var(--size-space-1-mid);
  --hui-label-font-size: var(--font-size-xs);
  --hui-label-font-weight: var(--font-weight-semibold);
  --hui-label-letter-spacing: var(--letter-spacing-label);
  --hui-label-color: var(--text-muted);
  --hui-description-font-size: var(--font-size-xs);
  --hui-description-color: var(--text-muted);
  --hui-textarea-resize: none;
  --hui-dialog-padding: var(--space-4);
  --hui-dialog-max-width: var(--dialog-width);
  --hui-dialog-backdrop-z-index: var(--z-overlay);
  --hui-dialog-z-index: var(--z-dialog);
  --hui-dialog-positioner-padding: var(--space-4);
  --hui-dialog-title-weight: var(--font-weight-bold);
  --hui-dialog-body-line-height: var(--line-height-relaxed);
  --hui-showcase-cell-padding: var(--space-3);
  --hui-showcase-cell-min-height: 140px;
  --hui-showcase-border-width: var(--border-thin);
  --hui-showcase-accent-width: var(--border-heavy);
  --hui-showcase-grid-gap: var(--border-thin);
  --hui-showcase-label-font-size: var(--font-size-2xs);
  --hui-showcase-label-weight: var(--font-weight-bold);
  --hui-showcase-label-letter-spacing: var(--letter-spacing-wider);
  --hui-showcase-label-padding-bottom: var(--font-size-2xs);
  --hui-showcase-label-border-width: var(--border-thin);
    /* code */
  --code-bg: var(--gray-900);
  --code-text: var(--gray-100);
  --code-border: var(--gray-700);
  --code-keyword: var(--brand-blue);
  --code-string: var(--success);
  --code-comment: var(--gray-500);
  --code-function: var(--amber);
  --code-number: var(--brand-red);
  --code-line-number: var(--gray-600);
    /* terminal */
  --terminal-bg: var(--gray-900);
  --terminal-text: var(--gray-100);
  --terminal-border: var(--gray-700);
  --terminal-title-bar-bg: var(--gray-800);
  --terminal-prompt: var(--success);
  --terminal-command: var(--gray-100);
  --terminal-output: var(--gray-400);
  --terminal-success: var(--success);
  --terminal-error: var(--error);
  --terminal-warning: var(--warning);

  /* Cards */
    /* accent */
  --card-accent-side: left;
    /* background */
  --card-background: var(--white);
    /* border */
  --card-border-color: var(--gray-200);
    /* header */
  --card-header-background: var(--gray-50);
    /* footer */
  --card-footer-background: var(--gray-50);
  --card-footer-font-size: 11px;

  /* Buttons */
    /* font */
  --btn-font-family: var(--font-sans);
  --btn-font-weight: 700;
  --btn-font-size: 13px;
    /* letter */
  --btn-letter-spacing: 0.04em;
    /* background */
  --btn-background: var(--black);
    /* color */
  --btn-color: var(--white);
    /* border */
  --btn-border-color: transparent;
    /* hover */
  --btn-hover-background: var(--gray-800);
  --btn-hover-border-color: transparent;
    /* outline */
  --btn-outline-background: transparent;
  --btn-outline-color: var(--black);
  --btn-outline-hover-background: var(--gray-50);

  /* Toggle */
  --sg-section-title-font-family: var(--font-sans);
  --sg-section-title-text-transform: uppercase;
  --sg-section-title-letter-spacing: 0.04em;
  --sg-section-title-color: var(--text);
  --sg-section-number-bg: var(--black);
  --sg-section-number-border: none;
  --sg-section-number-color: var(--white);
  --sg-section-number-radius: 0;
  --sg-section-desc-font-family: var(--font-mono);
  --sg-section-desc-color: var(--text-muted);
  --sg-type-specimen-bg: var(--gray-50);
  --sg-type-specimen-border: 1px solid var(--gray-200);
  --sg-type-specimen-border-bottom: 2px solid var(--black);
  --sg-type-specimen-radius: 0;
  --sg-type-specimen-padding: var(--space-3);
  --sg-type-specimen-margin: 0 0 var(--space-3) 0;
  --sg-type-specimen-name-color: var(--black);
  --sg-type-specimen-name-font: var(--font-sans);
  --hr-section-height: 8px;
  --hr-section-color: none;
  --hr-subsection-color: var(--gray-200);
  --hr-subsection-height: 1px;
  --hr-accent-color: var(--red);

  /* HUI: Focus & Interaction */
  --hui-focus-ring-color: rgba(255,64,129,0.3);
  --hui-focus-ring-width: 2px;

  /* HUI: Controls */
    /* control */
  --hui-control-color: var(--black);
  --hui-control-bg: var(--white);
  --hui-control-border: var(--gray-300);
  --hui-control-shadow: none;
    /* switch */
  --hui-switch-track-on-bg: var(--black);
  --hui-switch-track-off-bg: var(--gray-300);
  --hui-switch-thumb-shadow: none;
    /* radio */
  --hui-radio-option-border: var(--gray-200);
  --hui-radio-option-border-active: var(--black);
  --hui-radio-option-bg-active: rgba(0,0,0,0.03);

  /* HUI: Trigger Buttons */
  --hui-trigger-bg: var(--white);
  --hui-trigger-border: var(--gray-300);
  --hui-trigger-border-hover: var(--black);
  --hui-trigger-color: var(--black);

  /* HUI: Overlay Panels */
    /* bg */
  --hui-panel-bg: var(--white);
    /* border */
  --hui-panel-border: var(--gray-200);
    /* shadow */
  --hui-panel-shadow: 4px 4px 0 var(--black);
    /* item */
  --hui-panel-item-active-bg: var(--gray-50);
  --hui-panel-item-active-color: var(--black);
    /* sep */
  --hui-panel-sep-color: var(--gray-200);

  /* HUI: Tabs */
    /* color */
  --hui-tab-color: var(--gray-400);
  --hui-tab-color-selected: var(--black);
  --hui-tab-color-hover: var(--gray-700);
    /* border */
  --hui-tab-border-selected: var(--black);
    /* list */
  --hui-tab-list-border: var(--gray-200);

  /* HUI: Disclosure */
    /* bg */
  --hui-disclosure-bg: var(--gray-50);
  --hui-disclosure-bg-hover: var(--gray-100);
    /* border */
  --hui-disclosure-border: var(--gray-200);
    /* color */
  --hui-disclosure-color: var(--black);
    /* panel */
  --hui-disclosure-panel-bg: var(--white);
  --hui-disclosure-panel-color: var(--gray-700);
    /* chevron */
  --hui-disclosure-chevron-color: var(--gray-400);

  /* HUI: Field Controls */
    /* field */
  --hui-field-bg: var(--white);
  --hui-field-border: var(--gray-300);
  --hui-field-border-hover: var(--gray-500);
  --hui-field-focus-border: var(--black);
  --hui-field-color: var(--black);
  --hui-field-shadow: none;
    /* combo */
  --hui-combo-placeholder-color: var(--gray-400);
  --hui-combo-btn-color: var(--gray-400);

  /* HUI: Dialog */
    /* bg */
  --hui-dialog-bg: var(--white);
    /* shadow */
  --hui-dialog-shadow: 8px 8px 0 var(--black);
    /* title */
  --hui-dialog-title-color: var(--black);
    /* body */
  --hui-dialog-body-color: var(--gray-700);
    /* backdrop */
  --hui-dialog-backdrop: rgba(0,0,0,0.5);

  /* HUI: Showcase Grid */
    /* accent */
  --hui-showcase-accent: var(--red);
    /* bg */
  --hui-showcase-bg: var(--gray-50);
    /* border */
  --hui-showcase-border: var(--gray-200);
    /* cell */
  --hui-showcase-cell-bg: var(--white);
  --hui-showcase-cell-border: var(--gray-200);
    /* label */
  --hui-showcase-label-color: var(--gray-400);

  /* Neutrals */
  --white: #ffffff;
  --off-white: #fafbfc;
  --gray-50: #f4f6f8;
  --gray-100: #e9edf1;
  --gray-200: #dde3e9;
  --gray-300: #c4ccd4;
  --gray-400: #9aa5b1;
  --gray-500: #74808d;
  --gray-600: #5a6672;
  --gray-700: #414b55;
  --gray-800: #2a323a;
  --gray-900: #1a2027;
  --black: #0d1114;

  /* Accent & Steels */
  --red: #ff4081;
  --red-light: rgba(255,64,129,0.08);
  --red-mid: rgba(255,64,129,0.15);
  --blue: #35688f;
  --blue-light: rgba(53,104,143,0.08);
  --blue-mid: rgba(53,104,143,0.15);
  --yellow: #8d97a3;
  --yellow-light: rgba(141,151,163,0.12);
  --yellow-mid: rgba(141,151,163,0.25);
  --brand-red: #ff4081;
  --brand-red-light: rgba(255,64,129,0.08);
  --brand-red-mid: rgba(255,64,129,0.15);
  --brand-blue: #35688f;
  --brand-blue-light: rgba(53,104,143,0.08);
  --brand-blue-mid: rgba(53,104,143,0.15);
  --brand-yellow: #8d97a3;
  --brand-yellow-light: rgba(141,151,163,0.12);
  --brand-yellow-mid: rgba(141,151,163,0.25);

  /* Spacing */
  --unit: 8px;
  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --col-gap: 16px;

  /* Radius */
  --radius: 2px;
  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 2px;
}

/* ── SCOPED-VARS ── (from: style-guide.scoped-vars.yaml) */
html[data-design-theme="silver-screen"] {
  --theme-content-container-type: inline-size;
  --theme-content-position: relative;
  --theme-surface: var(--white);
  --theme-surface-alt: var(--gray-50);
  --theme-surface-2: var(--gray-200);
  --theme-surface-inverse: var(--black);
  --theme-text: var(--black);
  --theme-text-secondary: var(--gray-700);
  --theme-text-muted: var(--gray-500);
  --theme-text-inverse: var(--white);
  --theme-border: var(--gray-200);
  --theme-border-strong: var(--gray-300);
  --theme-shadow-color: rgba(0,0,0,0.08);
  --theme-bg: var(--white);
  --theme-card-border-color: var(--black);
  --theme-card-bg: var(--white);
  --theme-radius-none: 0;
  --theme-radius-sm: 2px;
  --layout-standard-max-width: 1200px;
  --layout-standard-padding: var(--space-6);
  --layout-standard-margin: 0 auto;
  --layout-standard-content-bg: transparent;
  --layout-wide-max-width: 1200px;
  --layout-wide-padding: var(--space-6);
  --layout-wide-margin: 0 auto;
  --layout-wide-content-bg: transparent;
  --layout-full-max-width: 100%;
  --layout-full-padding: var(--space-4);
  --layout-full-margin: 0;
  --layout-full-content-bg: transparent;
  --layout-narrow-max-width: 600px;
  --layout-narrow-padding: var(--space-6);
  --layout-narrow-margin: 0 auto;
  --layout-narrow-content-bg: transparent;
  --layout-article-max-width: 720px;
  --layout-article-padding: var(--space-6);
  --layout-article-margin: 0 auto;
  --layout-article-content-bg: transparent;
}

/* Hand-tuned dark spread. Widens the surface ramp (a true near-black canvas sits
   below the surface so panels float), separates --border from --surface-2 so
   borders reappear, steps text-muted up for dark legibility, calms body text
   off pure white, and lifts the brand accents to read as emitted light.
   NOTE: deviates from build-silver-screen-css.py (which derives this file from
   swiss.css by hex substitution and cannot express these structural changes).
   Source of truth mirrors themes/theme-silver-screen/style-guide.scoped-vars.yaml. */
html[data-design-theme="silver-screen"].dark {
  --theme-surface: #141b22;        /* panels / cards — one step above canvas    */
  --theme-surface-alt: #1d252e;    /* sidebar, recessed inputs                  */
  --theme-surface-2: #27313c;      /* hover / strongest raised layer            */
  --theme-surface-inverse: var(--white);
  --theme-text: #e8edf3;           /* off-white — calmer than blinding #ffffff  */
  --theme-text-secondary: #b4bdca; /* body text                                 */
  --theme-text-muted: #7e8b9a;     /* stepped up from #74808d for dark          */
  --theme-text-inverse: var(--black);
  --theme-border: #2a333d;         /* distinct from surface-2 — borders return  */
  --theme-border-strong: #3a4654;
  --theme-shadow-color: rgba(0,0,0,0.5);
  --theme-bg: #0b1117;             /* true near-black canvas                    */
  --theme-card-border-color: var(--white);
  --theme-card-bg: #141b22;
  --btn-outline-color: var(--theme-text);

  /* Brand accents lifted for dark so they register as light, not muddy tints. */
  --brand-red: #ff5c93;
  --brand-blue: #5b9cc6;
  --brand-yellow: #e0b341;
  --red: #ff5c93;
  --blue: #5b9cc6;
  --yellow: #e0b341;
}

/* Alias layer: bare names → themed vars */
html[data-design-theme="silver-screen"] {
  --content-container-type: var(--theme-content-container-type);
  --content-position: var(--theme-content-position);
  --surface: var(--theme-surface);
  --surface-alt: var(--theme-surface-alt);
  --surface-2: var(--theme-surface-2);
  --surface-inverse: var(--theme-surface-inverse);
  --text: var(--theme-text);
  --text-secondary: var(--theme-text-secondary);
  --text-muted: var(--theme-text-muted);
  --text-inverse: var(--theme-text-inverse);
  --border: var(--theme-border);
  --border-strong: var(--theme-border-strong);
  --shadow-color: var(--theme-shadow-color);
  --bg: var(--theme-bg);
  --card-border-color: var(--theme-card-border-color);
  --card-bg: var(--theme-card-bg);
  --radius-none: var(--theme-radius-none);
  --radius-sm: var(--theme-radius-sm);
}

.content {
  container-type: var(--theme-content-container-type)
}

.content {
  position: var(--theme-content-position)
}

.content {
  max-width: var(--layout-standard-max-width); padding: var(--layout-standard-padding); margin: var(--layout-standard-margin); background: var(--layout-standard-content-bg)
}

.content.wide {
  max-width: var(--layout-wide-max-width); padding: var(--layout-wide-padding); margin: var(--layout-wide-margin); background: var(--layout-wide-content-bg)
}

.content.full {
  max-width: var(--layout-full-max-width); padding: var(--layout-full-padding); margin: var(--layout-full-margin); background: var(--layout-full-content-bg)
}

.content.narrow {
  max-width: var(--layout-narrow-max-width); padding: var(--layout-narrow-padding); margin: var(--layout-narrow-margin); background: var(--layout-narrow-content-bg)
}

.content.article {
  max-width: var(--layout-article-max-width); padding: var(--layout-article-padding); margin: var(--layout-article-margin); background: var(--layout-article-content-bg)
}

/* ── BRANDING ── (from: branding.yaml) */
/* ═══════════════════════════════════════
   PRODUCT BRANDING
   Layout handled by Tailwind classes on the component.
   ═══════════════════════════════════════ */
html[data-design-theme="silver-screen"] .product-branding {
  border: var(--branding-border);
  margin-bottom: var(--space-8);
}
html[data-design-theme="silver-screen"] .product-branding-logo {
  background: var(--branding-logo-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  min-height: var(--space-25);
}
html[data-design-theme="silver-screen"] .product-branding-logo svg {
  max-width: var(--branding-logo-max-width);
  max-height: var(--branding-logo-max-height);
}
html[data-design-theme="silver-screen"] .product-branding-logo-placeholder {
  width: var(--branding-placeholder-width);
  height: var(--branding-placeholder-height);
  border: var(--branding-placeholder-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--micro-label-font-family);
  font-size: var(--micro-label-font-size);
  color: var(--micro-label-color);
  text-transform: var(--micro-label-text-transform);
  letter-spacing: var(--micro-label-letter-spacing);
}
html[data-design-theme="silver-screen"] .product-branding-content {
  padding: var(--space-4);
}
html[data-design-theme="silver-screen"] .product-branding-name {
  font-size: var(--branding-name-font-size);
  font-weight: var(--branding-name-font-weight);
  letter-spacing: var(--branding-name-letter-spacing);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--branding-name-border);
}
html[data-design-theme="silver-screen"] .product-branding-field-label {
  font-family: var(--micro-label-font-family);
  font-size: var(--micro-label-font-size);
  font-weight: var(--micro-label-font-weight);
  text-transform: var(--micro-label-text-transform);
  letter-spacing: var(--micro-label-letter-spacing);
  color: var(--micro-label-color);
  margin-bottom: var(--size-dot);
}
html[data-design-theme="silver-screen"] .product-branding-field-value {
  font-size: var(--branding-field-value-font-size);
  line-height: var(--branding-field-value-line-height);
  color: var(--branding-field-value-color);
}
html[data-design-theme="silver-screen"] .product-branding-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--branding-keyword-gap);
  margin-top: var(--branding-keyword-margin-top);
}
html[data-design-theme="silver-screen"] .product-branding-tag {
  font-family: var(--micro-label-font-family);
  font-size: var(--micro-label-font-size);
  font-weight: var(--font-weight-medium);
  padding: var(--branding-keyword-padding);
  border: var(--branding-keyword-border);
  color: var(--branding-keyword-color);
}

/* ── SECTIONS ── (from: style-guide.design-sections.yaml) */
/* ═══════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════ */
html[data-design-theme="silver-screen"] .sg-section-header {
  border-bottom: var(--sg-border);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
html[data-design-theme="silver-screen"] .sg-section-number {
  font-family: var(--micro-label-font-family);
  font-size: var(--micro-label-font-size);
  font-weight: var(--micro-label-font-weight);
  color: var(--sg-section-number-color);
  background: var(--sg-section-number-bg);
  border: var(--sg-section-number-border);
  border-radius: var(--sg-section-number-radius);
  padding: var(--sg-section-number-padding);
  letter-spacing: var(--sg-section-number-letter-spacing);
  white-space: nowrap;
}
html[data-design-theme="silver-screen"] .sg-section-title-group {
  flex: 1;
}
html[data-design-theme="silver-screen"] .sg-section-title {
  font-family: var(--sg-section-title-font-family);
  font-size: var(--sg-section-title-font-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--sg-section-title-letter-spacing);
  text-transform: var(--sg-section-title-text-transform);
  color: var(--sg-section-title-color);
  margin-bottom: var(--space-quarter);
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
html[data-design-theme="silver-screen"] .sg-section-desc {
  font-size: var(--font-size-sm);
  color: var(--sg-section-desc-color);
  font-family: var(--sg-section-desc-font-family);
  line-height: var(--line-height-normal);
}

/* ─── Type Specimen Card ─── */
html[data-design-theme="silver-screen"] .sg-type-specimen {
  background: var(--sg-type-specimen-bg);
  border: var(--sg-type-specimen-border);
  border-bottom: var(--sg-type-specimen-border-bottom);
  border-radius: var(--sg-type-specimen-radius);
  padding: var(--sg-type-specimen-padding);
  margin: var(--sg-type-specimen-margin);
}
html[data-design-theme="silver-screen"] .sg-type-specimen .font-mono.font-bold {
  color: var(--sg-type-specimen-name-color);
  font-family: var(--sg-type-specimen-name-font);
}

/* ─── Subsection Title ─── */
.sg-subsection-title,
html[data-design-theme="silver-screen"] .sg-subsection {
  font-family: var(--micro-label-font-family);
  font-size: var(--micro-label-font-size);
  font-weight: var(--micro-label-font-weight);
  text-transform: var(--micro-label-text-transform);
  letter-spacing: var(--micro-label-letter-spacing);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  margin-top: var(--space-4);
  padding-bottom: var(--space-1);
  border-bottom: var(--sg-border);
}

/* ─── Section Groups ─── */
html[data-design-theme="silver-screen"] .sg-group {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: var(--sg-border);
}
html[data-design-theme="silver-screen"] .sg-group:first-child,
html[data-design-theme="silver-screen"] .sg-group:first-of-type {
  border-top: none;
  padding-top: 0;
}
html[data-design-theme="silver-screen"] .sg-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  padding-bottom: var(--space-2);
  margin-bottom: 0;
}
html[data-design-theme="silver-screen"] .sg-group-label {
  font-family: var(--micro-label-font-family);
  font-size: var(--micro-label-font-size);
  font-weight: var(--micro-label-font-weight);
  text-transform: var(--micro-label-text-transform);
  letter-spacing: var(--letter-spacing-widest);
  color: var(--text-muted);
  white-space: nowrap;
}
html[data-design-theme="silver-screen"] .sg-group-line {
  flex: 1;
  height: var(--border-thick);
  background: var(--text-muted);
}
html[data-design-theme="silver-screen"] .sg-group-toggle {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  transition: transform var(--transition-medium) ease;
  display: inline-flex;
  align-items: center;
}
html[data-design-theme="silver-screen"] .sg-group-contents {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sg-group-content-gap);
}
html[data-design-theme="silver-screen"] .sg-group-content-item {
  font-family: var(--micro-label-font-family);
  font-size: var(--micro-label-font-size);
  color: var(--text-muted);
  padding: var(--sg-group-content-padding);
  border: var(--sg-border);
  white-space: nowrap;
  letter-spacing: 0.03em;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
html[data-design-theme="silver-screen"] .sg-group-header:hover .sg-group-content-item {
  color: var(--text-secondary);
  border-color: var(--border-strong);
}
html[data-design-theme="silver-screen"] .sg-group-content-item .sg-group-item-num {
  color: var(--border);
  margin-right: var(--sg-group-item-margin-right);
}

/* ─── Showcase Utilities ─── */

/* Section head label — used above subsections (e.g. "UI Glyphs", "Typography") */
html[data-design-theme="silver-screen"] .sg-section-head {
  font-family: var(--micro-label-font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--micro-label-font-weight);
  letter-spacing: var(--letter-spacing-label);
  text-transform: var(--micro-label-text-transform);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* Principle row — 3-col flex: label | text */
html[data-design-theme="silver-screen"] .sg-principle-row {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}
html[data-design-theme="silver-screen"] .sg-principle-label {
  font-size: var(--font-size-sm);
  font-family: var(--micro-label-font-family);
  font-weight: var(--micro-label-font-weight);
  letter-spacing: var(--sg-section-number-letter-spacing);
  text-transform: var(--micro-label-text-transform);
  white-space: nowrap;
  min-width: var(--sg-principle-label-width);
  padding-top: var(--sg-hairline);
  flex-shrink: 0;
}
html[data-design-theme="silver-screen"] .sg-principle-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--text);
  margin: 0;
}
html[data-design-theme="silver-screen"] .sg-principle-text.muted {
  color: var(--text-secondary);
  font-style: italic;
}

/* ─── Principle Label Colors ─── */
html[data-design-theme="silver-screen"] .text-principle { color: var(--brand-red); }
html[data-design-theme="silver-screen"] .text-approach { color: var(--text-muted); }
html[data-design-theme="silver-screen"] .text-why { color: var(--brand-blue); }
html[data-design-theme="silver-screen"] .dark .text-principle { color: color-mix(in srgb, var(--brand-red) 75%, white); }
html[data-design-theme="silver-screen"] .dark .text-why { color: color-mix(in srgb, var(--brand-blue) 75%, white); }

/* Demo container — gray-50 box with border */
html[data-design-theme="silver-screen"] .sg-demo-box {
  padding: var(--space-3);
  background: var(--surface-alt);
  border: var(--sg-border);
}

/* ─── Anchor Headings ─── */
html[data-design-theme="silver-screen"] .sg-anchor-heading {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
html[data-design-theme="silver-screen"] .sg-anchor-heading-icon {
  font-size: var(--font-size-lg);
  user-select: none;
}

/* Section description text */
html[data-design-theme="silver-screen"] .sg-description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  max-width: var(--sg-description-max-width);
  line-height: var(--line-height-relaxed);
}

/* ─── Preview / Code Toggle ─── */
html[data-design-theme="silver-screen"] .sg-preview-code {
  border: var(--sg-border);
  margin-bottom: var(--space-3);
}
html[data-design-theme="silver-screen"] .sg-preview-code-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: var(--sg-border);
  background: var(--surface-alt);
}
html[data-design-theme="silver-screen"] .sg-preview-code-tab {
  font-family: var(--micro-label-font-family);
  font-size: var(--micro-label-font-size);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--micro-label-text-transform);
  letter-spacing: var(--letter-spacing-label);
  padding: var(--space-1) var(--space-2);
  background: none;
  border: none;
  border-bottom: var(--border-thick) solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-base) ease, border-color var(--transition-base) ease;
}
html[data-design-theme="silver-screen"] .sg-preview-code-tab:hover {
  color: var(--text-secondary);
}
html[data-design-theme="silver-screen"] .sg-preview-code-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}
html[data-design-theme="silver-screen"] .sg-preview-code-copy {
  margin-left: auto;
  font-family: var(--micro-label-font-family);
  font-size: var(--micro-label-font-size);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-half) var(--space-1);
  margin-right: var(--space-1);
  background: var(--surface);
  border: var(--sg-border);
  color: var(--text-muted);
  cursor: pointer;
}
html[data-design-theme="silver-screen"] .sg-preview-code-copy:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
html[data-design-theme="silver-screen"] .sg-preview-code-preview {
  padding: var(--space-3);
  background: var(--surface);
}

/* ─── Screen Frame Mockups ─── */
html[data-design-theme="silver-screen"] .screen-frame {
  background: var(--surface);
  border: var(--border-thick) solid var(--text);
  overflow: hidden;
  margin-bottom: var(--space-4);
  box-shadow: var(--sg-screen-shadow);
}
html[data-design-theme="silver-screen"] .screen-titlebar {
  background: var(--surface-inverse);
  padding: var(--size-2xs) var(--size-space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
html[data-design-theme="silver-screen"] .screen-dot {
  width: var(--size-2xs);
  height: var(--size-2xs);
  border-radius: var(--radius-circle);
  background: var(--border-strong);
}
html[data-design-theme="silver-screen"] .screen-dot:first-child { background: var(--brand-red); }
html[data-design-theme="silver-screen"] .screen-dot:nth-child(2) { background: var(--brand-yellow); }
html[data-design-theme="silver-screen"] .screen-dot:nth-child(3) { background: var(--success); }
html[data-design-theme="silver-screen"] .screen-url {
  font-family: var(--micro-label-font-family);
  font-size: var(--micro-label-font-size);
  color: var(--text-muted);
  margin-left: var(--space-1);
  background: var(--surface-alt);
  padding: var(--border-heavy) var(--space-1-mid);
  flex: 1;
  max-width: var(--sg-screen-url-max-width);
}
html[data-design-theme="silver-screen"] .screen-body {
  padding: 0;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: stretch;
  background: var(--surface);
  color: var(--text);
}
html[data-design-theme="silver-screen"] .screen-body > * {
  width: 100%;
  height: 100%;
}
html[data-design-theme="silver-screen"] .screen-label {
  font-family: var(--micro-label-font-family);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--micro-label-text-transform);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

/* ─── Color Mode Toggle ─── */
html[data-design-theme="silver-screen"] .sg-mode-toggle {
  display: inline-flex;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
}
html[data-design-theme="silver-screen"] .sg-mode-toggle-option {
  font-family: var(--micro-label-font-family);
  font-size: var(--micro-label-font-size);
  font-weight: var(--font-weight-medium);
  padding: var(--space-half) var(--space-2);
  background: transparent;
  color: color-mix(in srgb, var(--text-inverse) 60%, transparent);
  border: none;
  cursor: pointer;
  transition: color var(--transition-base) ease, background var(--transition-base) ease;
  white-space: nowrap;
}
html[data-design-theme="silver-screen"] .sg-mode-toggle-left { border-radius: var(--radius-md) 0 0 var(--radius-md); }
html[data-design-theme="silver-screen"] .sg-mode-toggle-right { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
html[data-design-theme="silver-screen"] .sg-mode-toggle-option:hover {
  color: var(--text-inverse);
}
html[data-design-theme="silver-screen"] .sg-mode-toggle-active {
  background: color-mix(in srgb, var(--text-inverse) 15%, transparent);
  color: var(--text-inverse);
  font-weight: var(--font-weight-bold);
}

/* ─── Floating Controls Wrapper ─── */
html[data-design-theme="silver-screen"] .sg-floating-controls {
  position: fixed;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-floating);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ─── Floating Layout Bar ─── */
.sg-layout-bar,
html[data-design-theme="silver-screen"] .sg-mode-bar {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border: 1px solid transparent;
  box-shadow: var(--shadow-floating);
  border-radius: var(--radius-md);
  padding: var(--space-half);
}
html[data-design-theme="silver-screen"] .sg-layout-bar-group {
  display: flex;
  gap: var(--space-quarter);
}
html[data-design-theme="silver-screen"] .sg-layout-bar-option {
  font-family: var(--micro-label-font-family);
  font-size: var(--micro-label-font-size);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--text-inverse) 60%, transparent);
  cursor: pointer;
  transition: color var(--transition-base) ease, background var(--transition-base) ease;
  white-space: nowrap;
}
html[data-design-theme="silver-screen"] .sg-layout-bar-option:hover {
  color: var(--text-inverse);
  background: color-mix(in srgb, var(--text-inverse) 10%, transparent);
}
html[data-design-theme="silver-screen"] .sg-layout-bar-option[data-checked] {
  color: var(--text-inverse);
  background: color-mix(in srgb, var(--text-inverse) 15%, transparent);
  font-weight: var(--font-weight-bold);
}
html[data-design-theme="silver-screen"] .sg-mode-active-light {
  background: var(--white) !important;
  color: var(--black) !important;
  border-radius: var(--radius-md);
}
html[data-design-theme="silver-screen"] .sg-mode-active-dark {
  background: var(--black) !important;
  color: var(--white) !important;
  border-radius: var(--radius-md);
}

/* ── TOKENS ── (from: style-guide.vars.yaml, style-guide.color-palette.yaml) */
/* ═══════════════════════════════════════
   TOKEN CARDS
   ═══════════════════════════════════════ */
html[data-design-theme="silver-screen"] .token-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--token-grid-gap);
  align-items: flex-start;
}
html[data-design-theme="silver-screen"] .token-card {
  background: var(--token-card-background);
  border: var(--token-card-border);
  padding: var(--token-card-padding);
  min-width: var(--token-grid-min-width);
  flex: 1 1 var(--token-grid-min-width);
  overflow: hidden;
}
html[data-design-theme="silver-screen"] .token-card-title {
  font-size: var(--token-card-title-font-size);
  font-weight: var(--token-card-title-font-weight);
  text-transform: var(--token-card-title-text-transform);
  letter-spacing: var(--token-card-title-letter-spacing);
  color: var(--token-card-title-color);
  margin-bottom: var(--token-card-title-margin-bottom);
  padding-bottom: var(--token-card-title-padding-bottom);
  border-bottom: var(--token-card-title-border-bottom);
}
html[data-design-theme="silver-screen"] .token-row {
  display: flex;
  align-items: center;
  gap: var(--token-row-gap);
  padding: var(--token-row-padding);
  font-family: var(--token-row-font-family);
  font-size: var(--token-row-font-size);
  overflow: hidden;
}
html[data-design-theme="silver-screen"] .token-name { color: var(--token-name-color); flex: 1; white-space: nowrap; }
html[data-design-theme="silver-screen"] .token-value { color: var(--token-value-color); font-weight: var(--token-value-font-weight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-design-theme="silver-screen"] .token-preview { display: inline-block; flex-shrink: 0; white-space: nowrap; }
html[data-design-theme="silver-screen"] .token-preview--color { width: var(--token-preview-color-size); height: var(--token-preview-color-size); border: var(--token-preview-color-border); }
html[data-design-theme="silver-screen"] .token-preview--font { font-size: var(--token-preview-font-size); color: var(--token-value-color); }
html[data-design-theme="silver-screen"] .token-preview--space { background: var(--token-value-color); max-width: var(--token-preview-space-max-width); max-height: var(--token-preview-space-max-height); }
html[data-design-theme="silver-screen"] .token-preview--radius { width: var(--token-preview-radius-size); height: var(--token-preview-radius-size); border: var(--token-preview-radius-border); }
html[data-design-theme="silver-screen"] .token-preview--shadow { width: 24px; height: 24px; background: var(--token-card-background); }
html[data-design-theme="silver-screen"] .token-preview--size { line-height: 1; color: var(--token-value-color); }

/* ── SWATCHES ── (from: style-guide.color-palette.yaml) */
/* ═══════════════════════════════════════
   COLOR SWATCHES
   ═══════════════════════════════════════ */

/* ─── Grid ─── */
html[data-design-theme="silver-screen"] .sg-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-1);
}

/* ─── Swatch cell — checkerboard reveals alpha ─── */
html[data-design-theme="silver-screen"] .sg-palette-swatch {
  background: repeating-conic-gradient(var(--border) 0% 25%, var(--surface) 0% 50%) 0 0 / 12px 12px;
  border: var(--border-thin) solid var(--border);
  height: var(--space-10);
  position: relative;
}

/* ─── Color overlay ─── */
html[data-design-theme="silver-screen"] .sg-palette-swatch-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-1);
  cursor: pointer;
  position: relative;
}

/* ─── Label ─── */
html[data-design-theme="silver-screen"] .sg-palette-swatch-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* ─── Value / hex ─── */
html[data-design-theme="silver-screen"] .sg-palette-swatch-value {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  opacity: 0.7;
  display: block;
}

/* ─── Swatch text inherits color from .bg-{name} contrast ─── */
.sg-palette-swatch-label,
html[data-design-theme="silver-screen"] .sg-palette-swatch-value {
  color: inherit;
}

/* ─── Copied flash ─── */
html[data-design-theme="silver-screen"] .sg-palette-swatch-copied {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  color: var(--white);
  background: rgba(0,0,0,0.6);
  padding: var(--border-heavy) 6px;
}

/* ─── Hover popunder ─── */
html[data-design-theme="silver-screen"] .sg-swatch-popunder {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--surface);
  border: var(--border-thin) solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06);
  padding: var(--space-half) 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}
html[data-design-theme="silver-screen"] .sg-palette-swatch:hover .sg-swatch-popunder {
  display: block;
}
html[data-design-theme="silver-screen"] .sg-swatch-popunder-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--border-heavy) var(--space-1);
  cursor: pointer;
  color: var(--text-secondary);
  white-space: nowrap;
}
html[data-design-theme="silver-screen"] .sg-swatch-popunder-row:hover {
  background: var(--surface-alt);
  color: var(--text);
}
html[data-design-theme="silver-screen"] .sg-swatch-popunder-row .sg-swatch-popunder-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}
html[data-design-theme="silver-screen"] .sg-swatch-popunder-row:hover .sg-swatch-popunder-icon {
  color: var(--text-secondary);
}
html[data-design-theme="silver-screen"] .sg-swatch-popunder-row.copied {
  color: var(--success);
}

/* ─── Notes ─── */
html[data-design-theme="silver-screen"] .sg-palette-notes {
  margin-top: var(--space-1);
}
html[data-design-theme="silver-screen"] .sg-palette-note {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-half) 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
html[data-design-theme="silver-screen"] .sg-palette-note-dot {
  width: var(--space-2);
  height: var(--space-2);
  flex-shrink: 0;
}

/* ── SPACING ── (from: style-guide.spacing.yaml) */
/* ═══════════════════════════════════════
   SPACING SHOWCASE
   ═══════════════════════════════════════ */

html[data-design-theme="silver-screen"] .spacing-demo {
  display: flex;
  flex-direction: column;
  gap: var(--sg-spacing-gap);
}

html[data-design-theme="silver-screen"] .spacing-row {
  display: grid;
  grid-template-columns: var(--sg-spacing-label-width) 1fr var(--sg-spacing-value-width);
  align-items: center;
  gap: var(--space-2);
}

html[data-design-theme="silver-screen"] .spacing-label {
  font-family: var(--font-mono);
  font-size: var(--sg-bar-label-font-size);
  color: var(--text-secondary);
  text-align: right;
}

html[data-design-theme="silver-screen"] .spacing-bar {
  height: var(--sg-bar-height);
  background: var(--text);
  border-radius: var(--sg-bar-radius);
  min-width: var(--sg-bar-min-width);
}

html[data-design-theme="silver-screen"] .spacing-value {
  font-family: var(--font-mono);
  font-size: var(--sg-bar-label-font-size);
  color: var(--text-muted);
}

/* ── Principles ── */

html[data-design-theme="silver-screen"] .sg-principles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

html[data-design-theme="silver-screen"] .sg-principle {
  font-size: var(--sg-principles-font-size);
  line-height: var(--sg-principles-line-height);
  color: var(--text-secondary);
  padding: var(--space-1) 0;
  border-bottom: var(--border-thin) solid var(--border);
}

html[data-design-theme="silver-screen"] .sg-principle strong {
  color: var(--text);
}

/* ── Spacing Diagram ── */

html[data-design-theme="silver-screen"] .spacing-diagram {
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

html[data-design-theme="silver-screen"] .spacing-diagram-header {
  font-family: var(--font-mono);
  font-size: var(--micro-label-font-size);
  font-weight: var(--micro-label-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--micro-label-letter-spacing);
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-alt);
  border-bottom: var(--border-thin) solid var(--border);
}

html[data-design-theme="silver-screen"] .spacing-diagram-body {
  padding: var(--space-3);
  background: var(--surface);
}

html[data-design-theme="silver-screen"] .spacing-diagram-viewport {
  border: var(--border-thick) solid var(--border-strong);
  border-radius: var(--sg-bar-radius);
  position: relative;
  overflow: hidden;
}

html[data-design-theme="silver-screen"] .spacing-diagram-viewport-label {
  font-family: var(--font-mono);
  font-size: var(--micro-label-font-size);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--sg-section-number-letter-spacing);
  padding: var(--space-half) var(--space-1);
  background: var(--surface-alt);
  border-bottom: var(--border-thin) solid var(--border);
}

html[data-design-theme="silver-screen"] .spacing-diagram-cols {
  display: flex;
  align-items: stretch;
  min-height: var(--sg-diagram-min-height);
}

html[data-design-theme="silver-screen"] .spacing-diagram-gutter {
  width: var(--sg-diagram-gutter-width);
  min-width: var(--sg-diagram-gutter-width);
  background: repeating-linear-gradient(
    45deg,
    var(--border),
    var(--border) var(--sg-diagram-hatch-width),
    transparent var(--sg-diagram-hatch-width),
    transparent var(--sg-diagram-hatch-gap)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

html[data-design-theme="silver-screen"] .spacing-diagram-gutter span {
  font-family: var(--font-mono);
  font-size: var(--sg-diagram-annotation-font-size);
  color: var(--text-muted);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
}

html[data-design-theme="silver-screen"] .spacing-diagram-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

html[data-design-theme="silver-screen"] .spacing-diagram-block {
  display: flex;
  flex-direction: column;
  border-left: var(--border-thin) solid var(--border);
  border-right: var(--border-thin) solid var(--border);
}

html[data-design-theme="silver-screen"] .spacing-diagram-padding {
  height: var(--sg-diagram-padding-height);
  background: repeating-linear-gradient(
    90deg,
    var(--border),
    var(--border) var(--sg-diagram-hatch-width),
    transparent var(--sg-diagram-hatch-width),
    transparent var(--sg-diagram-hatch-gap)
  );
  border-top: var(--border-thin) dashed var(--border-strong);
}

html[data-design-theme="silver-screen"] .spacing-diagram-padding--sm {
  height: var(--sg-diagram-padding-height-sm);
}

html[data-design-theme="silver-screen"] .spacing-diagram-label {
  padding: var(--space-1) var(--space-2);
}

html[data-design-theme="silver-screen"] .spacing-diagram-label-title {
  font-size: var(--sg-diagram-detail-font-size);
  font-weight: var(--sg-diagram-detail-font-weight);
  color: var(--text-secondary);
}

html[data-design-theme="silver-screen"] .spacing-diagram-label-meta {
  font-family: var(--font-mono);
  font-size: var(--sg-diagram-note-font-size);
  color: var(--text-muted);
  margin-top: var(--space-quarter);
}

/* ── CARDS ── (from: style-guide.vars.yaml) */
/* ═══════════════════════════════════════
   CARDS
   ═══════════════════════════════════════ */
html[data-design-theme="silver-screen"] .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min-width), 1fr));
  gap: var(--card-grid-gap);
}
html[data-design-theme="silver-screen"] .card {
  display: flex;
  flex-direction: column;
  background: var(--card-background);
  border: var(--card-border);
  transition: all var(--card-transition);
}
html[data-design-theme="silver-screen"] .card:hover { background: var(--card-hover-background); }
html[data-design-theme="silver-screen"] .card-filled {
  background: var(--card-filled-background);
  color: var(--card-filled-color);
  border: var(--card-border);
}
html[data-design-theme="silver-screen"] .card-filled:hover { background: var(--card-filled-hover-background); }
html[data-design-theme="silver-screen"] .card-filled .card-body { color: var(--card-body-filled-color); }
html[data-design-theme="silver-screen"] .card-title {
  font-size: var(--card-title-font-size);
  font-weight: var(--card-title-font-weight);
  letter-spacing: var(--card-title-letter-spacing);
  margin-bottom: var(--card-title-margin-bottom);
  line-height: var(--card-title-line-height);
}
html[data-design-theme="silver-screen"] .card-header .card-title {
  margin-bottom: 0;
}
html[data-design-theme="silver-screen"] .card-header {
  padding: var(--space-1) var(--card-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--card-header-background);
  color: var(--card-header-color);
  position: relative;
}
html[data-design-theme="silver-screen"] .card-header .card-title {
  color: inherit;
}
/* Inset dotted separator at header bottom */
html[data-design-theme="silver-screen"] .card-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--card-separator-inset);
  right: var(--card-separator-inset);
  border-bottom: var(--card-separator-width) var(--card-separator-style) var(--card-separator-color);
}
html[data-design-theme="silver-screen"] .card-body {
  flex: 1;
  padding: var(--card-body-padding);
  font-size: var(--card-body-font-size);
  color: var(--card-body-color);
  line-height: var(--card-body-line-height);
}
html[data-design-theme="silver-screen"] .card-filled .card-body { color: var(--card-body-filled-color); }
html[data-design-theme="silver-screen"] .card-tag {
  display: inline-block;
  font-family: var(--card-tag-font-family);
  font-size: var(--card-tag-font-size);
  font-weight: var(--card-tag-font-weight);
  padding: var(--card-tag-padding);
  background: var(--card-tag-background);
  color: var(--card-tag-color);
  margin-top: var(--card-tag-margin-top);
}
html[data-design-theme="silver-screen"] .card-footer {
  padding: var(--card-footer-padding);
  font-size: var(--card-footer-font-size);
  font-weight: var(--card-footer-font-weight);
  color: var(--card-footer-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card-footer-background);
  position: relative;
}
/* Inset dotted separator at footer top */
html[data-design-theme="silver-screen"] .card-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--card-separator-inset);
  right: var(--card-separator-inset);
  border-top: var(--card-separator-width) var(--card-separator-style) var(--card-separator-color);
}
html[data-design-theme="silver-screen"] table {
  width: 100%;
  border-collapse: collapse;
}
html[data-design-theme="silver-screen"] thead tr {
  border-bottom: var(--table-header-border-width) solid var(--card-border-color);
}
html[data-design-theme="silver-screen"] th {
  text-align: left;
  padding: var(--table-cell-padding);
  font-size: var(--table-header-font-size);
  text-transform: uppercase;
  letter-spacing: var(--table-header-letter-spacing);
  font-family: var(--table-header-font-family);
}
html[data-design-theme="silver-screen"] tbody tr {
  border-bottom: var(--card-separator-width) solid var(--card-separator-color);
}
html[data-design-theme="silver-screen"] tbody tr:last-child {
  border-bottom: none;
}
html[data-design-theme="silver-screen"] td {
  padding: var(--table-cell-padding);
  vertical-align: top;
}
/* Card modifiers */
html[data-design-theme="silver-screen"] .card.rounded {
  border-radius: var(--card-rounded-radius);
  overflow: hidden;
}
html[data-design-theme="silver-screen"] .card.drop-shadow {
  box-shadow: var(--card-drop-shadow);
}

/* ─── Card layout utilities ─── */
html[data-design-theme="silver-screen"] .card-tag.inline { margin-top: 0; margin-left: auto; }
html[data-design-theme="silver-screen"] .card-body-note { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--text-muted); }
html[data-design-theme="silver-screen"] .ml-auto { margin-left: auto; }

/* ── BUTTONS ── (from: style-guide.vars.yaml) */
/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */
html[data-design-theme="silver-screen"] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  background: var(--btn-background);
  color: var(--btn-color);
  border: var(--btn-border-width) var(--btn-border-style) var(--btn-border-color);
  cursor: pointer;
  transition: all var(--btn-transition);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
html[data-design-theme="silver-screen"] .btn:hover {
  background: var(--btn-hover-background);
  border-color: var(--btn-hover-border-color);
}
html[data-design-theme="silver-screen"] .btn:active {
  transform: translateY(var(--btn-active-offset));
}
html[data-design-theme="silver-screen"] .btn:focus-visible {
  outline: var(--hui-focus-ring-width) solid var(--brand-blue);
  outline-offset: var(--space-quarter);
}

/* Size modifiers */
html[data-design-theme="silver-screen"] .btn.btn-sm {
  font-size: var(--btn-sm-font-size);
  padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);
}
html[data-design-theme="silver-screen"] .btn.btn-lg {
  font-size: var(--btn-lg-font-size);
  padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
}
html[data-design-theme="silver-screen"] .btn.btn-xl {
  font-size: var(--btn-xl-font-size);
  padding: var(--btn-xl-padding-y) var(--btn-xl-padding-x);
}

/* Outline modifier */
html[data-design-theme="silver-screen"] .btn.btn-outline {
  background: var(--btn-outline-background);
  color: var(--btn-outline-color);
}
html[data-design-theme="silver-screen"] .btn.btn-outline:hover {
  background: var(--btn-outline-hover-background);
}

/* Ghost modifier */
html[data-design-theme="silver-screen"] .btn.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--btn-outline-color);
}
html[data-design-theme="silver-screen"] .btn.btn-ghost:hover {
  background: var(--btn-outline-hover-background);
}

/* Composable modifiers */
html[data-design-theme="silver-screen"] .btn.rounded {
  border-radius: var(--btn-rounded-radius);
}
html[data-design-theme="silver-screen"] .btn.drop-shadow {
  box-shadow: var(--btn-drop-shadow);
}

/* Selected state animation keyframe */
@keyframes btn-selected-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── SEMANTIC ── (from: style-guide.semantic-classes.yaml, style-guide.semantic-groups.yaml) */
/* Danger (solid) */

/* ── .card.danger — full semantic: thick colored left border, colored sides, text colored ── */
html[data-design-theme="silver-screen"] .card.danger {
  border-color: var(--semantic-danger-accent);
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-danger-accent);
  color: var(--semantic-danger-accent);
}
html[data-design-theme="silver-screen"] .card.danger .card-header { color: var(--semantic-danger-accent); }
html[data-design-theme="silver-screen"] .card.danger .card-title { color: inherit; }
html[data-design-theme="silver-screen"] .card.danger .card-tag { background: var(--semantic-danger-accent); color: var(--white); }
html[data-design-theme="silver-screen"] .card.danger .card-footer { color: var(--semantic-danger-accent); }
html[data-design-theme="silver-screen"] .card.danger.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-danger-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-danger-accent) 20%, transparent);
}

/* ── .card.accent-danger — accent only: thick colored left border, default other sides ── */
html[data-design-theme="silver-screen"] .card.accent-danger {
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-danger-accent);
}
html[data-design-theme="silver-screen"] .card.accent-danger .card-header::after {
  display: none;
}
html[data-design-theme="silver-screen"] .card.accent-danger.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-danger-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-danger-accent) 20%, transparent);
}

/* accent-* on header standalone */
html[data-design-theme="silver-screen"] .card-header.accent-danger {
  border-bottom: var(--card-border-width-accent) var(--card-border-style) var(--semantic-danger-accent);
}

/* .card-header.danger — semantic class on header */
html[data-design-theme="silver-screen"] .card-header.danger {
  background: var(--semantic-danger-accent);
  color: var(--white);
  border-left: none; border-right: none; border-top: none; border-bottom: none;
}
html[data-design-theme="silver-screen"] .card-header.danger::after {
  border-bottom-color: rgba(255,255,255,0.25);
}
html[data-design-theme="silver-screen"] .card-header.danger .card-title { color: inherit; }
html[data-design-theme="silver-screen"] .card-header.danger .card-tag { background: var(--semantic-danger-accent); color: var(--white); }

/* Applied at body level */
html[data-design-theme="silver-screen"] .card-body.danger {
  background: var(--semantic-danger-background);
  color: var(--semantic-danger-color);
  border: none;
}

/* Applied at footer level */
html[data-design-theme="silver-screen"] .card-footer.danger {
  background: var(--semantic-danger-accent);
  color: var(--white);
  border-left: none; border-right: none; border-bottom: none;
}
html[data-design-theme="silver-screen"] .card-footer.danger::before {
  border-top-color: rgba(255,255,255,0.25);
}

/* Button: .btn.danger */
html[data-design-theme="silver-screen"] .btn.danger {
  background: var(--semantic-danger-accent);
  border-color: var(--semantic-danger-accent);
  color: var(--white);
  position: relative;
  overflow: hidden;
  transition: background var(--btn-transition), border-color var(--btn-transition), box-shadow var(--transition-slow) ease;
}
html[data-design-theme="silver-screen"] .btn.danger::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.22),
    rgba(255,255,255,0),
    rgba(0,0,0,0.18)
  );
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity var(--transition-slow) ease;
  pointer-events: none;
}
html[data-design-theme="silver-screen"] .btn.danger:hover {
  background: color-mix(in srgb, var(--semantic-danger-accent) 85%, black);
  border-color: color-mix(in srgb, var(--semantic-danger-accent) 85%, black);
}
html[data-design-theme="silver-screen"] .btn.danger.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-danger-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-danger-accent) 20%, transparent);
}

/* Button ghost: .btn.btn-ghost.danger */
html[data-design-theme="silver-screen"] .btn.btn-ghost.danger {
  background: transparent;
  border-color: transparent;
  color: var(--semantic-danger-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-ghost.danger:hover {
  background: color-mix(in srgb, var(--semantic-danger-accent) 10%, transparent);
}

/* Button outline: .btn.btn-outline.danger */
html[data-design-theme="silver-screen"] .btn.btn-outline.danger {
  background: transparent;
  border-color: var(--semantic-danger-accent);
  color: var(--semantic-danger-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-outline.danger:hover {
  background: color-mix(in srgb, var(--semantic-danger-accent) 10%, transparent);
}

/* Button accent: .btn.accent-danger — bottom border + inset bottom shadow only */
html[data-design-theme="silver-screen"] .btn.accent-danger {
  border-bottom-color: var(--semantic-danger-accent);
  border-bottom-width: 2px;
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--semantic-danger-accent) 25%, transparent);
}
html[data-design-theme="silver-screen"] .btn.accent-danger.drop-shadow {
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--semantic-danger-accent) 25%, transparent), 0 8px 24px color-mix(in srgb, var(--semantic-danger-accent) 35%, transparent);
}

/* Button outline accent: .btn.btn-outline.accent-danger */
html[data-design-theme="silver-screen"] .btn.btn-outline.accent-danger {
  border-color: var(--semantic-danger-accent);
  color: var(--semantic-danger-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-outline.accent-danger:hover {
  background: color-mix(in srgb, var(--semantic-danger-accent) 10%, transparent);
}

/* Selected state: fade in animated gradient overlay via ::before */
html[data-design-theme="silver-screen"] .btn.danger.btn-selected {
  border-color: color-mix(in srgb, var(--semantic-danger-accent) 70%, black);
  box-shadow: inset 0 2px 6px color-mix(in srgb, var(--semantic-danger-accent) 40%, black), inset 0 1px 2px rgba(0,0,0,0.3);
}
html[data-design-theme="silver-screen"] .btn.danger.btn-selected::before {
  opacity: 1;
  animation: btn-selected-gradient 2.5s ease infinite;
}

/* HUI: Trigger buttons */
.hui.menu-btn.danger,
html[data-design-theme="silver-screen"] .hui.popover-btn.danger {
  border-color: var(--semantic-danger-accent);
  color: var(--semantic-danger-color);
}
.hui.menu-btn.danger[data-hover],
html[data-design-theme="silver-screen"] .hui.popover-btn.danger[data-hover] {
  background: var(--semantic-danger-background);
}

/* HUI: Overlay panels */
.hui.menu-items.danger,
.hui.listbox-options.danger,
.hui.combo-options.danger,
html[data-design-theme="silver-screen"] .hui.popover-panel.danger {
  border-left: var(--hui-showcase-accent-width) solid var(--semantic-danger-accent);
  border-color: color-mix(in srgb, var(--semantic-danger-accent) 40%, var(--hui-panel-border));
  background: var(--semantic-danger-background);
}

/* HUI: Listbox & Combobox field-style triggers */
html[data-design-theme="silver-screen"] .hui.listbox-btn.danger {
  border-color: color-mix(in srgb, var(--semantic-danger-accent) 40%, var(--hui-field-border));
}
html[data-design-theme="silver-screen"] .hui.listbox-btn.danger[data-open] {
  border-color: var(--semantic-danger-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-danger-accent) 25%, transparent), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.listbox-btn.danger::after {
  border-right-color: var(--semantic-danger-accent);
  border-bottom-color: var(--semantic-danger-accent);
}
html[data-design-theme="silver-screen"] .hui.combo-input.danger {
  border-color: color-mix(in srgb, var(--semantic-danger-accent) 40%, var(--hui-field-border));
}
html[data-design-theme="silver-screen"] .hui.combo-input.danger:focus {
  border-color: var(--semantic-danger-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-danger-accent) 25%, transparent), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.combo-btn.danger {
  color: var(--semantic-danger-accent);
}

/* HUI: Dialog */
html[data-design-theme="silver-screen"] .hui.dialog-panel.danger {
  border-left: var(--hui-showcase-accent-width) solid var(--semantic-danger-accent);
}
html[data-design-theme="silver-screen"] .hui.dialog-panel.danger .dialog-title {
  color: var(--semantic-danger-accent);
}

/* HUI: Tabs */
html[data-design-theme="silver-screen"] .hui.tab-list.danger .hui.tab[data-selected] {
  color: var(--semantic-danger-accent);
  border-bottom-color: var(--semantic-danger-accent);
}

/* HUI: Disclosure */
html[data-design-theme="silver-screen"] .hui.disclosure-btn.danger {
  border-color: var(--semantic-danger-accent);
  background: var(--semantic-danger-background);
}

/* HUI: Controls — on state */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap.danger[data-checked] .checkbox-visual {
  background: var(--semantic-danger-accent);
  border-color: var(--semantic-danger-accent);
}
html[data-design-theme="silver-screen"] .hui.switch-wrap.danger[data-checked] .switch-track {
  background: var(--semantic-danger-accent);
}
html[data-design-theme="silver-screen"] .hui.radio-option.danger[data-checked] {
  border-color: var(--semantic-danger-accent);
  background: var(--semantic-danger-background);
}
html[data-design-theme="silver-screen"] .hui.radio-option.danger[data-checked] .radio-dot {
  border-color: var(--semantic-danger-accent);
}
html[data-design-theme="silver-screen"] .hui.radio-option.danger[data-checked] .radio-dot-inner {
  background: var(--semantic-danger-accent);
}

/* HUI: Controls — off state (semantic tints the unchecked appearance) */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap.danger:not([data-checked]) .checkbox-visual {
  border-color: color-mix(in srgb, var(--semantic-danger-accent) 40%, var(--hui-control-border));
}
html[data-design-theme="silver-screen"] .hui.switch-wrap.danger:not([data-checked]) .switch-track {
  background: color-mix(in srgb, var(--semantic-danger-accent) 25%, var(--hui-switch-track-off-bg));
}
html[data-design-theme="silver-screen"] .hui.radio-option.danger:not([data-checked]) {
  border-color: color-mix(in srgb, var(--semantic-danger-accent) 30%, var(--hui-radio-option-border));
}
html[data-design-theme="silver-screen"] .hui.radio-option.danger:not([data-checked]) .radio-dot {
  border-color: color-mix(in srgb, var(--semantic-danger-accent) 40%, var(--hui-control-border));
}

/* HUI: Showcase accent */
html[data-design-theme="silver-screen"] .hui.showcase.danger {
  border-top-color: var(--semantic-danger-accent);
}
html[data-design-theme="silver-screen"] .hui.showcase.accent-danger {
  border-top-color: var(--semantic-danger-accent);
}

/* Forms: fieldset.danger — tinted container, cascades to children */
html[data-design-theme="silver-screen"] fieldset.danger {
  background: var(--semantic-danger-background);
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-danger-accent);
  border-radius: var(--radius);
  padding: var(--space-3);
}
fieldset.danger legend,
html[data-design-theme="silver-screen"] fieldset.danger [data-slot="legend"] {
  color: var(--semantic-danger-accent);
  border-bottom-color: var(--semantic-danger-accent);
}
fieldset.danger label,
html[data-design-theme="silver-screen"] fieldset.danger [data-slot="label"] {
  color: var(--semantic-danger-accent);
}
fieldset.danger .field-input,
fieldset.danger .field-select,
fieldset.danger .field-textarea,
fieldset.danger [data-slot="input"],
fieldset.danger [data-slot="select"],
html[data-design-theme="silver-screen"] fieldset.danger [data-slot="textarea"] {
  border-color: color-mix(in srgb, var(--semantic-danger-accent) 40%, var(--field-border-color));
}
fieldset.danger .field-input:focus,
fieldset.danger .field-select:focus,
fieldset.danger .field-textarea:focus,
fieldset.danger [data-slot="input"]:focus,
fieldset.danger [data-slot="select"]:focus,
html[data-design-theme="silver-screen"] fieldset.danger [data-slot="textarea"]:focus {
  border-color: var(--semantic-danger-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-danger-accent) 25%, transparent), var(--field-shadow);
}
fieldset.danger .field-hint,
html[data-design-theme="silver-screen"] fieldset.danger [data-slot="description"] {
  color: color-mix(in srgb, var(--semantic-danger-accent) 60%, var(--text-muted));
}

/* Forms: .field-group.danger — per-field semantic */
.field-group.danger label,
html[data-design-theme="silver-screen"] .field-group.danger [data-slot="label"] {
  color: var(--semantic-danger-accent);
}
.field-group.danger .field-input,
.field-group.danger .field-select,
.field-group.danger .field-textarea,
.field-group.danger [data-slot="input"],
.field-group.danger [data-slot="select"],
html[data-design-theme="silver-screen"] .field-group.danger [data-slot="textarea"] {
  border-color: color-mix(in srgb, var(--semantic-danger-accent) 40%, var(--field-border-color));
}
.field-group.danger .field-input:focus,
.field-group.danger .field-select:focus,
.field-group.danger .field-textarea:focus,
.field-group.danger [data-slot="input"]:focus,
.field-group.danger [data-slot="select"]:focus,
html[data-design-theme="silver-screen"] .field-group.danger [data-slot="textarea"]:focus {
  border-color: var(--semantic-danger-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-danger-accent) 25%, transparent), var(--field-shadow);
}
.field-group.danger .field-hint,
html[data-design-theme="silver-screen"] .field-group.danger [data-slot="description"] {
  color: color-mix(in srgb, var(--semantic-danger-accent) 60%, var(--text-muted));
}

/* Warning (solid) */

/* ── .card.warning — full semantic: thick colored left border, colored sides, text colored ── */
html[data-design-theme="silver-screen"] .card.warning {
  border-color: var(--semantic-warning-accent);
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-warning-accent);
  color: var(--semantic-warning-accent);
}
html[data-design-theme="silver-screen"] .card.warning .card-header { color: var(--semantic-warning-accent); }
html[data-design-theme="silver-screen"] .card.warning .card-title { color: inherit; }
html[data-design-theme="silver-screen"] .card.warning .card-tag { background: var(--semantic-warning-accent); color: var(--white); }
html[data-design-theme="silver-screen"] .card.warning .card-footer { color: var(--semantic-warning-accent); }
html[data-design-theme="silver-screen"] .card.warning.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-warning-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-warning-accent) 20%, transparent);
}

/* ── .card.accent-warning — accent only: thick colored left border, default other sides ── */
html[data-design-theme="silver-screen"] .card.accent-warning {
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-warning-accent);
}
html[data-design-theme="silver-screen"] .card.accent-warning .card-header::after {
  display: none;
}
html[data-design-theme="silver-screen"] .card.accent-warning.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-warning-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-warning-accent) 20%, transparent);
}

/* accent-* on header standalone */
html[data-design-theme="silver-screen"] .card-header.accent-warning {
  border-bottom: var(--card-border-width-accent) var(--card-border-style) var(--semantic-warning-accent);
}

/* .card-header.warning — semantic class on header */
html[data-design-theme="silver-screen"] .card-header.warning {
  background: var(--semantic-warning-accent);
  color: var(--white);
  border-left: none; border-right: none; border-top: none; border-bottom: none;
}
html[data-design-theme="silver-screen"] .card-header.warning::after {
  border-bottom-color: rgba(255,255,255,0.25);
}
html[data-design-theme="silver-screen"] .card-header.warning .card-title { color: inherit; }
html[data-design-theme="silver-screen"] .card-header.warning .card-tag { background: var(--semantic-warning-accent); color: var(--white); }

/* Applied at body level */
html[data-design-theme="silver-screen"] .card-body.warning {
  background: var(--semantic-warning-background);
  color: var(--semantic-warning-color);
  border: none;
}

/* Applied at footer level */
html[data-design-theme="silver-screen"] .card-footer.warning {
  background: var(--semantic-warning-accent);
  color: var(--white);
  border-left: none; border-right: none; border-bottom: none;
}
html[data-design-theme="silver-screen"] .card-footer.warning::before {
  border-top-color: rgba(255,255,255,0.25);
}

/* Button: .btn.warning */
html[data-design-theme="silver-screen"] .btn.warning {
  background: var(--semantic-warning-accent);
  border-color: var(--semantic-warning-accent);
  color: var(--white);
  position: relative;
  overflow: hidden;
  transition: background var(--btn-transition), border-color var(--btn-transition), box-shadow var(--transition-slow) ease;
}
html[data-design-theme="silver-screen"] .btn.warning::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.22),
    rgba(255,255,255,0),
    rgba(0,0,0,0.18)
  );
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity var(--transition-slow) ease;
  pointer-events: none;
}
html[data-design-theme="silver-screen"] .btn.warning:hover {
  background: color-mix(in srgb, var(--semantic-warning-accent) 85%, black);
  border-color: color-mix(in srgb, var(--semantic-warning-accent) 85%, black);
}
html[data-design-theme="silver-screen"] .btn.warning.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-warning-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-warning-accent) 20%, transparent);
}

/* Button ghost: .btn.btn-ghost.warning */
html[data-design-theme="silver-screen"] .btn.btn-ghost.warning {
  background: transparent;
  border-color: transparent;
  color: var(--semantic-warning-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-ghost.warning:hover {
  background: color-mix(in srgb, var(--semantic-warning-accent) 10%, transparent);
}

/* Button outline: .btn.btn-outline.warning */
html[data-design-theme="silver-screen"] .btn.btn-outline.warning {
  background: transparent;
  border-color: var(--semantic-warning-accent);
  color: var(--semantic-warning-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-outline.warning:hover {
  background: color-mix(in srgb, var(--semantic-warning-accent) 10%, transparent);
}

/* Button accent: .btn.accent-warning — bottom border + inset bottom shadow only */
html[data-design-theme="silver-screen"] .btn.accent-warning {
  border-bottom-color: var(--semantic-warning-accent);
  border-bottom-width: 2px;
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--semantic-warning-accent) 25%, transparent);
}
html[data-design-theme="silver-screen"] .btn.accent-warning.drop-shadow {
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--semantic-warning-accent) 25%, transparent), 0 8px 24px color-mix(in srgb, var(--semantic-warning-accent) 35%, transparent);
}

/* Button outline accent: .btn.btn-outline.accent-warning */
html[data-design-theme="silver-screen"] .btn.btn-outline.accent-warning {
  border-color: var(--semantic-warning-accent);
  color: var(--semantic-warning-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-outline.accent-warning:hover {
  background: color-mix(in srgb, var(--semantic-warning-accent) 10%, transparent);
}

/* Selected state: fade in animated gradient overlay via ::before */
html[data-design-theme="silver-screen"] .btn.warning.btn-selected {
  border-color: color-mix(in srgb, var(--semantic-warning-accent) 70%, black);
  box-shadow: inset 0 2px 6px color-mix(in srgb, var(--semantic-warning-accent) 40%, black), inset 0 1px 2px rgba(0,0,0,0.3);
}
html[data-design-theme="silver-screen"] .btn.warning.btn-selected::before {
  opacity: 1;
  animation: btn-selected-gradient 2.5s ease infinite;
}

/* HUI: Trigger buttons */
.hui.menu-btn.warning,
html[data-design-theme="silver-screen"] .hui.popover-btn.warning {
  border-color: var(--semantic-warning-accent);
  color: var(--semantic-warning-color);
}
.hui.menu-btn.warning[data-hover],
html[data-design-theme="silver-screen"] .hui.popover-btn.warning[data-hover] {
  background: var(--semantic-warning-background);
}

/* HUI: Overlay panels */
.hui.menu-items.warning,
.hui.listbox-options.warning,
.hui.combo-options.warning,
html[data-design-theme="silver-screen"] .hui.popover-panel.warning {
  border-left: var(--hui-showcase-accent-width) solid var(--semantic-warning-accent);
  border-color: color-mix(in srgb, var(--semantic-warning-accent) 40%, var(--hui-panel-border));
  background: var(--semantic-warning-background);
}

/* HUI: Listbox & Combobox field-style triggers */
html[data-design-theme="silver-screen"] .hui.listbox-btn.warning {
  border-color: color-mix(in srgb, var(--semantic-warning-accent) 40%, var(--hui-field-border));
}
html[data-design-theme="silver-screen"] .hui.listbox-btn.warning[data-open] {
  border-color: var(--semantic-warning-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-warning-accent) 25%, transparent), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.listbox-btn.warning::after {
  border-right-color: var(--semantic-warning-accent);
  border-bottom-color: var(--semantic-warning-accent);
}
html[data-design-theme="silver-screen"] .hui.combo-input.warning {
  border-color: color-mix(in srgb, var(--semantic-warning-accent) 40%, var(--hui-field-border));
}
html[data-design-theme="silver-screen"] .hui.combo-input.warning:focus {
  border-color: var(--semantic-warning-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-warning-accent) 25%, transparent), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.combo-btn.warning {
  color: var(--semantic-warning-accent);
}

/* HUI: Dialog */
html[data-design-theme="silver-screen"] .hui.dialog-panel.warning {
  border-left: var(--hui-showcase-accent-width) solid var(--semantic-warning-accent);
}
html[data-design-theme="silver-screen"] .hui.dialog-panel.warning .dialog-title {
  color: var(--semantic-warning-accent);
}

/* HUI: Tabs */
html[data-design-theme="silver-screen"] .hui.tab-list.warning .hui.tab[data-selected] {
  color: var(--semantic-warning-accent);
  border-bottom-color: var(--semantic-warning-accent);
}

/* HUI: Disclosure */
html[data-design-theme="silver-screen"] .hui.disclosure-btn.warning {
  border-color: var(--semantic-warning-accent);
  background: var(--semantic-warning-background);
}

/* HUI: Controls — on state */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap.warning[data-checked] .checkbox-visual {
  background: var(--semantic-warning-accent);
  border-color: var(--semantic-warning-accent);
}
html[data-design-theme="silver-screen"] .hui.switch-wrap.warning[data-checked] .switch-track {
  background: var(--semantic-warning-accent);
}
html[data-design-theme="silver-screen"] .hui.radio-option.warning[data-checked] {
  border-color: var(--semantic-warning-accent);
  background: var(--semantic-warning-background);
}
html[data-design-theme="silver-screen"] .hui.radio-option.warning[data-checked] .radio-dot {
  border-color: var(--semantic-warning-accent);
}
html[data-design-theme="silver-screen"] .hui.radio-option.warning[data-checked] .radio-dot-inner {
  background: var(--semantic-warning-accent);
}

/* HUI: Controls — off state (semantic tints the unchecked appearance) */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap.warning:not([data-checked]) .checkbox-visual {
  border-color: color-mix(in srgb, var(--semantic-warning-accent) 40%, var(--hui-control-border));
}
html[data-design-theme="silver-screen"] .hui.switch-wrap.warning:not([data-checked]) .switch-track {
  background: color-mix(in srgb, var(--semantic-warning-accent) 25%, var(--hui-switch-track-off-bg));
}
html[data-design-theme="silver-screen"] .hui.radio-option.warning:not([data-checked]) {
  border-color: color-mix(in srgb, var(--semantic-warning-accent) 30%, var(--hui-radio-option-border));
}
html[data-design-theme="silver-screen"] .hui.radio-option.warning:not([data-checked]) .radio-dot {
  border-color: color-mix(in srgb, var(--semantic-warning-accent) 40%, var(--hui-control-border));
}

/* HUI: Showcase accent */
html[data-design-theme="silver-screen"] .hui.showcase.warning {
  border-top-color: var(--semantic-warning-accent);
}
html[data-design-theme="silver-screen"] .hui.showcase.accent-warning {
  border-top-color: var(--semantic-warning-accent);
}

/* Forms: fieldset.warning — tinted container, cascades to children */
html[data-design-theme="silver-screen"] fieldset.warning {
  background: var(--semantic-warning-background);
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-warning-accent);
  border-radius: var(--radius);
  padding: var(--space-3);
}
fieldset.warning legend,
html[data-design-theme="silver-screen"] fieldset.warning [data-slot="legend"] {
  color: var(--semantic-warning-accent);
  border-bottom-color: var(--semantic-warning-accent);
}
fieldset.warning label,
html[data-design-theme="silver-screen"] fieldset.warning [data-slot="label"] {
  color: var(--semantic-warning-accent);
}
fieldset.warning .field-input,
fieldset.warning .field-select,
fieldset.warning .field-textarea,
fieldset.warning [data-slot="input"],
fieldset.warning [data-slot="select"],
html[data-design-theme="silver-screen"] fieldset.warning [data-slot="textarea"] {
  border-color: color-mix(in srgb, var(--semantic-warning-accent) 40%, var(--field-border-color));
}
fieldset.warning .field-input:focus,
fieldset.warning .field-select:focus,
fieldset.warning .field-textarea:focus,
fieldset.warning [data-slot="input"]:focus,
fieldset.warning [data-slot="select"]:focus,
html[data-design-theme="silver-screen"] fieldset.warning [data-slot="textarea"]:focus {
  border-color: var(--semantic-warning-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-warning-accent) 25%, transparent), var(--field-shadow);
}
fieldset.warning .field-hint,
html[data-design-theme="silver-screen"] fieldset.warning [data-slot="description"] {
  color: color-mix(in srgb, var(--semantic-warning-accent) 60%, var(--text-muted));
}

/* Forms: .field-group.warning — per-field semantic */
.field-group.warning label,
html[data-design-theme="silver-screen"] .field-group.warning [data-slot="label"] {
  color: var(--semantic-warning-accent);
}
.field-group.warning .field-input,
.field-group.warning .field-select,
.field-group.warning .field-textarea,
.field-group.warning [data-slot="input"],
.field-group.warning [data-slot="select"],
html[data-design-theme="silver-screen"] .field-group.warning [data-slot="textarea"] {
  border-color: color-mix(in srgb, var(--semantic-warning-accent) 40%, var(--field-border-color));
}
.field-group.warning .field-input:focus,
.field-group.warning .field-select:focus,
.field-group.warning .field-textarea:focus,
.field-group.warning [data-slot="input"]:focus,
.field-group.warning [data-slot="select"]:focus,
html[data-design-theme="silver-screen"] .field-group.warning [data-slot="textarea"]:focus {
  border-color: var(--semantic-warning-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-warning-accent) 25%, transparent), var(--field-shadow);
}
.field-group.warning .field-hint,
html[data-design-theme="silver-screen"] .field-group.warning [data-slot="description"] {
  color: color-mix(in srgb, var(--semantic-warning-accent) 60%, var(--text-muted));
}

/* Success (solid) */

/* ── .card.success — full semantic: thick colored left border, colored sides, text colored ── */
html[data-design-theme="silver-screen"] .card.success {
  border-color: var(--semantic-success-accent);
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-success-accent);
  color: var(--semantic-success-accent);
}
html[data-design-theme="silver-screen"] .card.success .card-header { color: var(--semantic-success-accent); }
html[data-design-theme="silver-screen"] .card.success .card-title { color: inherit; }
html[data-design-theme="silver-screen"] .card.success .card-tag { background: var(--semantic-success-accent); color: var(--white); }
html[data-design-theme="silver-screen"] .card.success .card-footer { color: var(--semantic-success-accent); }
html[data-design-theme="silver-screen"] .card.success.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-success-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-success-accent) 20%, transparent);
}

/* ── .card.accent-success — accent only: thick colored left border, default other sides ── */
html[data-design-theme="silver-screen"] .card.accent-success {
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-success-accent);
}
html[data-design-theme="silver-screen"] .card.accent-success .card-header::after {
  display: none;
}
html[data-design-theme="silver-screen"] .card.accent-success.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-success-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-success-accent) 20%, transparent);
}

/* accent-* on header standalone */
html[data-design-theme="silver-screen"] .card-header.accent-success {
  border-bottom: var(--card-border-width-accent) var(--card-border-style) var(--semantic-success-accent);
}

/* .card-header.success — semantic class on header */
html[data-design-theme="silver-screen"] .card-header.success {
  background: var(--semantic-success-accent);
  color: var(--white);
  border-left: none; border-right: none; border-top: none; border-bottom: none;
}
html[data-design-theme="silver-screen"] .card-header.success::after {
  border-bottom-color: rgba(255,255,255,0.25);
}
html[data-design-theme="silver-screen"] .card-header.success .card-title { color: inherit; }
html[data-design-theme="silver-screen"] .card-header.success .card-tag { background: var(--semantic-success-accent); color: var(--white); }

/* Applied at body level */
html[data-design-theme="silver-screen"] .card-body.success {
  background: var(--semantic-success-background);
  color: var(--semantic-success-color);
  border: none;
}

/* Applied at footer level */
html[data-design-theme="silver-screen"] .card-footer.success {
  background: var(--semantic-success-accent);
  color: var(--white);
  border-left: none; border-right: none; border-bottom: none;
}
html[data-design-theme="silver-screen"] .card-footer.success::before {
  border-top-color: rgba(255,255,255,0.25);
}

/* Button: .btn.success */
html[data-design-theme="silver-screen"] .btn.success {
  background: var(--semantic-success-accent);
  border-color: var(--semantic-success-accent);
  color: var(--white);
  position: relative;
  overflow: hidden;
  transition: background var(--btn-transition), border-color var(--btn-transition), box-shadow var(--transition-slow) ease;
}
html[data-design-theme="silver-screen"] .btn.success::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.22),
    rgba(255,255,255,0),
    rgba(0,0,0,0.18)
  );
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity var(--transition-slow) ease;
  pointer-events: none;
}
html[data-design-theme="silver-screen"] .btn.success:hover {
  background: color-mix(in srgb, var(--semantic-success-accent) 85%, black);
  border-color: color-mix(in srgb, var(--semantic-success-accent) 85%, black);
}
html[data-design-theme="silver-screen"] .btn.success.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-success-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-success-accent) 20%, transparent);
}

/* Button ghost: .btn.btn-ghost.success */
html[data-design-theme="silver-screen"] .btn.btn-ghost.success {
  background: transparent;
  border-color: transparent;
  color: var(--semantic-success-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-ghost.success:hover {
  background: color-mix(in srgb, var(--semantic-success-accent) 10%, transparent);
}

/* Button outline: .btn.btn-outline.success */
html[data-design-theme="silver-screen"] .btn.btn-outline.success {
  background: transparent;
  border-color: var(--semantic-success-accent);
  color: var(--semantic-success-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-outline.success:hover {
  background: color-mix(in srgb, var(--semantic-success-accent) 10%, transparent);
}

/* Button accent: .btn.accent-success — bottom border + inset bottom shadow only */
html[data-design-theme="silver-screen"] .btn.accent-success {
  border-bottom-color: var(--semantic-success-accent);
  border-bottom-width: 2px;
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--semantic-success-accent) 25%, transparent);
}
html[data-design-theme="silver-screen"] .btn.accent-success.drop-shadow {
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--semantic-success-accent) 25%, transparent), 0 8px 24px color-mix(in srgb, var(--semantic-success-accent) 35%, transparent);
}

/* Button outline accent: .btn.btn-outline.accent-success */
html[data-design-theme="silver-screen"] .btn.btn-outline.accent-success {
  border-color: var(--semantic-success-accent);
  color: var(--semantic-success-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-outline.accent-success:hover {
  background: color-mix(in srgb, var(--semantic-success-accent) 10%, transparent);
}

/* Selected state: fade in animated gradient overlay via ::before */
html[data-design-theme="silver-screen"] .btn.success.btn-selected {
  border-color: color-mix(in srgb, var(--semantic-success-accent) 70%, black);
  box-shadow: inset 0 2px 6px color-mix(in srgb, var(--semantic-success-accent) 40%, black), inset 0 1px 2px rgba(0,0,0,0.3);
}
html[data-design-theme="silver-screen"] .btn.success.btn-selected::before {
  opacity: 1;
  animation: btn-selected-gradient 2.5s ease infinite;
}

/* HUI: Trigger buttons */
.hui.menu-btn.success,
html[data-design-theme="silver-screen"] .hui.popover-btn.success {
  border-color: var(--semantic-success-accent);
  color: var(--semantic-success-color);
}
.hui.menu-btn.success[data-hover],
html[data-design-theme="silver-screen"] .hui.popover-btn.success[data-hover] {
  background: var(--semantic-success-background);
}

/* HUI: Overlay panels */
.hui.menu-items.success,
.hui.listbox-options.success,
.hui.combo-options.success,
html[data-design-theme="silver-screen"] .hui.popover-panel.success {
  border-left: var(--hui-showcase-accent-width) solid var(--semantic-success-accent);
  border-color: color-mix(in srgb, var(--semantic-success-accent) 40%, var(--hui-panel-border));
  background: var(--semantic-success-background);
}

/* HUI: Listbox & Combobox field-style triggers */
html[data-design-theme="silver-screen"] .hui.listbox-btn.success {
  border-color: color-mix(in srgb, var(--semantic-success-accent) 40%, var(--hui-field-border));
}
html[data-design-theme="silver-screen"] .hui.listbox-btn.success[data-open] {
  border-color: var(--semantic-success-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-success-accent) 25%, transparent), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.listbox-btn.success::after {
  border-right-color: var(--semantic-success-accent);
  border-bottom-color: var(--semantic-success-accent);
}
html[data-design-theme="silver-screen"] .hui.combo-input.success {
  border-color: color-mix(in srgb, var(--semantic-success-accent) 40%, var(--hui-field-border));
}
html[data-design-theme="silver-screen"] .hui.combo-input.success:focus {
  border-color: var(--semantic-success-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-success-accent) 25%, transparent), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.combo-btn.success {
  color: var(--semantic-success-accent);
}

/* HUI: Dialog */
html[data-design-theme="silver-screen"] .hui.dialog-panel.success {
  border-left: var(--hui-showcase-accent-width) solid var(--semantic-success-accent);
}
html[data-design-theme="silver-screen"] .hui.dialog-panel.success .dialog-title {
  color: var(--semantic-success-accent);
}

/* HUI: Tabs */
html[data-design-theme="silver-screen"] .hui.tab-list.success .hui.tab[data-selected] {
  color: var(--semantic-success-accent);
  border-bottom-color: var(--semantic-success-accent);
}

/* HUI: Disclosure */
html[data-design-theme="silver-screen"] .hui.disclosure-btn.success {
  border-color: var(--semantic-success-accent);
  background: var(--semantic-success-background);
}

/* HUI: Controls — on state */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap.success[data-checked] .checkbox-visual {
  background: var(--semantic-success-accent);
  border-color: var(--semantic-success-accent);
}
html[data-design-theme="silver-screen"] .hui.switch-wrap.success[data-checked] .switch-track {
  background: var(--semantic-success-accent);
}
html[data-design-theme="silver-screen"] .hui.radio-option.success[data-checked] {
  border-color: var(--semantic-success-accent);
  background: var(--semantic-success-background);
}
html[data-design-theme="silver-screen"] .hui.radio-option.success[data-checked] .radio-dot {
  border-color: var(--semantic-success-accent);
}
html[data-design-theme="silver-screen"] .hui.radio-option.success[data-checked] .radio-dot-inner {
  background: var(--semantic-success-accent);
}

/* HUI: Controls — off state (semantic tints the unchecked appearance) */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap.success:not([data-checked]) .checkbox-visual {
  border-color: color-mix(in srgb, var(--semantic-success-accent) 40%, var(--hui-control-border));
}
html[data-design-theme="silver-screen"] .hui.switch-wrap.success:not([data-checked]) .switch-track {
  background: color-mix(in srgb, var(--semantic-success-accent) 25%, var(--hui-switch-track-off-bg));
}
html[data-design-theme="silver-screen"] .hui.radio-option.success:not([data-checked]) {
  border-color: color-mix(in srgb, var(--semantic-success-accent) 30%, var(--hui-radio-option-border));
}
html[data-design-theme="silver-screen"] .hui.radio-option.success:not([data-checked]) .radio-dot {
  border-color: color-mix(in srgb, var(--semantic-success-accent) 40%, var(--hui-control-border));
}

/* HUI: Showcase accent */
html[data-design-theme="silver-screen"] .hui.showcase.success {
  border-top-color: var(--semantic-success-accent);
}
html[data-design-theme="silver-screen"] .hui.showcase.accent-success {
  border-top-color: var(--semantic-success-accent);
}

/* Forms: fieldset.success — tinted container, cascades to children */
html[data-design-theme="silver-screen"] fieldset.success {
  background: var(--semantic-success-background);
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-success-accent);
  border-radius: var(--radius);
  padding: var(--space-3);
}
fieldset.success legend,
html[data-design-theme="silver-screen"] fieldset.success [data-slot="legend"] {
  color: var(--semantic-success-accent);
  border-bottom-color: var(--semantic-success-accent);
}
fieldset.success label,
html[data-design-theme="silver-screen"] fieldset.success [data-slot="label"] {
  color: var(--semantic-success-accent);
}
fieldset.success .field-input,
fieldset.success .field-select,
fieldset.success .field-textarea,
fieldset.success [data-slot="input"],
fieldset.success [data-slot="select"],
html[data-design-theme="silver-screen"] fieldset.success [data-slot="textarea"] {
  border-color: color-mix(in srgb, var(--semantic-success-accent) 40%, var(--field-border-color));
}
fieldset.success .field-input:focus,
fieldset.success .field-select:focus,
fieldset.success .field-textarea:focus,
fieldset.success [data-slot="input"]:focus,
fieldset.success [data-slot="select"]:focus,
html[data-design-theme="silver-screen"] fieldset.success [data-slot="textarea"]:focus {
  border-color: var(--semantic-success-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-success-accent) 25%, transparent), var(--field-shadow);
}
fieldset.success .field-hint,
html[data-design-theme="silver-screen"] fieldset.success [data-slot="description"] {
  color: color-mix(in srgb, var(--semantic-success-accent) 60%, var(--text-muted));
}

/* Forms: .field-group.success — per-field semantic */
.field-group.success label,
html[data-design-theme="silver-screen"] .field-group.success [data-slot="label"] {
  color: var(--semantic-success-accent);
}
.field-group.success .field-input,
.field-group.success .field-select,
.field-group.success .field-textarea,
.field-group.success [data-slot="input"],
.field-group.success [data-slot="select"],
html[data-design-theme="silver-screen"] .field-group.success [data-slot="textarea"] {
  border-color: color-mix(in srgb, var(--semantic-success-accent) 40%, var(--field-border-color));
}
.field-group.success .field-input:focus,
.field-group.success .field-select:focus,
.field-group.success .field-textarea:focus,
.field-group.success [data-slot="input"]:focus,
.field-group.success [data-slot="select"]:focus,
html[data-design-theme="silver-screen"] .field-group.success [data-slot="textarea"]:focus {
  border-color: var(--semantic-success-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-success-accent) 25%, transparent), var(--field-shadow);
}
.field-group.success .field-hint,
html[data-design-theme="silver-screen"] .field-group.success [data-slot="description"] {
  color: color-mix(in srgb, var(--semantic-success-accent) 60%, var(--text-muted));
}

/* Info (solid) */

/* ── .card.info — full semantic: thick colored left border, colored sides, text colored ── */
html[data-design-theme="silver-screen"] .card.info {
  border-color: var(--semantic-info-accent);
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-info-accent);
  color: var(--semantic-info-accent);
}
html[data-design-theme="silver-screen"] .card.info .card-header { color: var(--semantic-info-accent); }
html[data-design-theme="silver-screen"] .card.info .card-title { color: inherit; }
html[data-design-theme="silver-screen"] .card.info .card-tag { background: var(--semantic-info-accent); color: var(--white); }
html[data-design-theme="silver-screen"] .card.info .card-footer { color: var(--semantic-info-accent); }
html[data-design-theme="silver-screen"] .card.info.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-info-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-info-accent) 20%, transparent);
}

/* ── .card.accent-info — accent only: thick colored left border, default other sides ── */
html[data-design-theme="silver-screen"] .card.accent-info {
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-info-accent);
}
html[data-design-theme="silver-screen"] .card.accent-info .card-header::after {
  display: none;
}
html[data-design-theme="silver-screen"] .card.accent-info.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-info-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-info-accent) 20%, transparent);
}

/* accent-* on header standalone */
html[data-design-theme="silver-screen"] .card-header.accent-info {
  border-bottom: var(--card-border-width-accent) var(--card-border-style) var(--semantic-info-accent);
}

/* .card-header.info — semantic class on header */
html[data-design-theme="silver-screen"] .card-header.info {
  background: var(--semantic-info-accent);
  color: var(--white);
  border-left: none; border-right: none; border-top: none; border-bottom: none;
}
html[data-design-theme="silver-screen"] .card-header.info::after {
  border-bottom-color: rgba(255,255,255,0.25);
}
html[data-design-theme="silver-screen"] .card-header.info .card-title { color: inherit; }
html[data-design-theme="silver-screen"] .card-header.info .card-tag { background: var(--semantic-info-accent); color: var(--white); }

/* Applied at body level */
html[data-design-theme="silver-screen"] .card-body.info {
  background: var(--semantic-info-background);
  color: var(--semantic-info-color);
  border: none;
}

/* Applied at footer level */
html[data-design-theme="silver-screen"] .card-footer.info {
  background: var(--semantic-info-accent);
  color: var(--white);
  border-left: none; border-right: none; border-bottom: none;
}
html[data-design-theme="silver-screen"] .card-footer.info::before {
  border-top-color: rgba(255,255,255,0.25);
}

/* Button: .btn.info */
html[data-design-theme="silver-screen"] .btn.info {
  background: var(--semantic-info-accent);
  border-color: var(--semantic-info-accent);
  color: var(--white);
  position: relative;
  overflow: hidden;
  transition: background var(--btn-transition), border-color var(--btn-transition), box-shadow var(--transition-slow) ease;
}
html[data-design-theme="silver-screen"] .btn.info::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.22),
    rgba(255,255,255,0),
    rgba(0,0,0,0.18)
  );
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity var(--transition-slow) ease;
  pointer-events: none;
}
html[data-design-theme="silver-screen"] .btn.info:hover {
  background: color-mix(in srgb, var(--semantic-info-accent) 85%, black);
  border-color: color-mix(in srgb, var(--semantic-info-accent) 85%, black);
}
html[data-design-theme="silver-screen"] .btn.info.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-info-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-info-accent) 20%, transparent);
}

/* Button ghost: .btn.btn-ghost.info */
html[data-design-theme="silver-screen"] .btn.btn-ghost.info {
  background: transparent;
  border-color: transparent;
  color: var(--semantic-info-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-ghost.info:hover {
  background: color-mix(in srgb, var(--semantic-info-accent) 10%, transparent);
}

/* Button outline: .btn.btn-outline.info */
html[data-design-theme="silver-screen"] .btn.btn-outline.info {
  background: transparent;
  border-color: var(--semantic-info-accent);
  color: var(--semantic-info-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-outline.info:hover {
  background: color-mix(in srgb, var(--semantic-info-accent) 10%, transparent);
}

/* Button accent: .btn.accent-info — bottom border + inset bottom shadow only */
html[data-design-theme="silver-screen"] .btn.accent-info {
  border-bottom-color: var(--semantic-info-accent);
  border-bottom-width: 2px;
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--semantic-info-accent) 25%, transparent);
}
html[data-design-theme="silver-screen"] .btn.accent-info.drop-shadow {
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--semantic-info-accent) 25%, transparent), 0 8px 24px color-mix(in srgb, var(--semantic-info-accent) 35%, transparent);
}

/* Button outline accent: .btn.btn-outline.accent-info */
html[data-design-theme="silver-screen"] .btn.btn-outline.accent-info {
  border-color: var(--semantic-info-accent);
  color: var(--semantic-info-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-outline.accent-info:hover {
  background: color-mix(in srgb, var(--semantic-info-accent) 10%, transparent);
}

/* Selected state: fade in animated gradient overlay via ::before */
html[data-design-theme="silver-screen"] .btn.info.btn-selected {
  border-color: color-mix(in srgb, var(--semantic-info-accent) 70%, black);
  box-shadow: inset 0 2px 6px color-mix(in srgb, var(--semantic-info-accent) 40%, black), inset 0 1px 2px rgba(0,0,0,0.3);
}
html[data-design-theme="silver-screen"] .btn.info.btn-selected::before {
  opacity: 1;
  animation: btn-selected-gradient 2.5s ease infinite;
}

/* HUI: Trigger buttons */
.hui.menu-btn.info,
html[data-design-theme="silver-screen"] .hui.popover-btn.info {
  border-color: var(--semantic-info-accent);
  color: var(--semantic-info-color);
}
.hui.menu-btn.info[data-hover],
html[data-design-theme="silver-screen"] .hui.popover-btn.info[data-hover] {
  background: var(--semantic-info-background);
}

/* HUI: Overlay panels */
.hui.menu-items.info,
.hui.listbox-options.info,
.hui.combo-options.info,
html[data-design-theme="silver-screen"] .hui.popover-panel.info {
  border-left: var(--hui-showcase-accent-width) solid var(--semantic-info-accent);
  border-color: color-mix(in srgb, var(--semantic-info-accent) 40%, var(--hui-panel-border));
  background: var(--semantic-info-background);
}

/* HUI: Listbox & Combobox field-style triggers */
html[data-design-theme="silver-screen"] .hui.listbox-btn.info {
  border-color: color-mix(in srgb, var(--semantic-info-accent) 40%, var(--hui-field-border));
}
html[data-design-theme="silver-screen"] .hui.listbox-btn.info[data-open] {
  border-color: var(--semantic-info-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-info-accent) 25%, transparent), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.listbox-btn.info::after {
  border-right-color: var(--semantic-info-accent);
  border-bottom-color: var(--semantic-info-accent);
}
html[data-design-theme="silver-screen"] .hui.combo-input.info {
  border-color: color-mix(in srgb, var(--semantic-info-accent) 40%, var(--hui-field-border));
}
html[data-design-theme="silver-screen"] .hui.combo-input.info:focus {
  border-color: var(--semantic-info-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-info-accent) 25%, transparent), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.combo-btn.info {
  color: var(--semantic-info-accent);
}

/* HUI: Dialog */
html[data-design-theme="silver-screen"] .hui.dialog-panel.info {
  border-left: var(--hui-showcase-accent-width) solid var(--semantic-info-accent);
}
html[data-design-theme="silver-screen"] .hui.dialog-panel.info .dialog-title {
  color: var(--semantic-info-accent);
}

/* HUI: Tabs */
html[data-design-theme="silver-screen"] .hui.tab-list.info .hui.tab[data-selected] {
  color: var(--semantic-info-accent);
  border-bottom-color: var(--semantic-info-accent);
}

/* HUI: Disclosure */
html[data-design-theme="silver-screen"] .hui.disclosure-btn.info {
  border-color: var(--semantic-info-accent);
  background: var(--semantic-info-background);
}

/* HUI: Controls — on state */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap.info[data-checked] .checkbox-visual {
  background: var(--semantic-info-accent);
  border-color: var(--semantic-info-accent);
}
html[data-design-theme="silver-screen"] .hui.switch-wrap.info[data-checked] .switch-track {
  background: var(--semantic-info-accent);
}
html[data-design-theme="silver-screen"] .hui.radio-option.info[data-checked] {
  border-color: var(--semantic-info-accent);
  background: var(--semantic-info-background);
}
html[data-design-theme="silver-screen"] .hui.radio-option.info[data-checked] .radio-dot {
  border-color: var(--semantic-info-accent);
}
html[data-design-theme="silver-screen"] .hui.radio-option.info[data-checked] .radio-dot-inner {
  background: var(--semantic-info-accent);
}

/* HUI: Controls — off state (semantic tints the unchecked appearance) */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap.info:not([data-checked]) .checkbox-visual {
  border-color: color-mix(in srgb, var(--semantic-info-accent) 40%, var(--hui-control-border));
}
html[data-design-theme="silver-screen"] .hui.switch-wrap.info:not([data-checked]) .switch-track {
  background: color-mix(in srgb, var(--semantic-info-accent) 25%, var(--hui-switch-track-off-bg));
}
html[data-design-theme="silver-screen"] .hui.radio-option.info:not([data-checked]) {
  border-color: color-mix(in srgb, var(--semantic-info-accent) 30%, var(--hui-radio-option-border));
}
html[data-design-theme="silver-screen"] .hui.radio-option.info:not([data-checked]) .radio-dot {
  border-color: color-mix(in srgb, var(--semantic-info-accent) 40%, var(--hui-control-border));
}

/* HUI: Showcase accent */
html[data-design-theme="silver-screen"] .hui.showcase.info {
  border-top-color: var(--semantic-info-accent);
}
html[data-design-theme="silver-screen"] .hui.showcase.accent-info {
  border-top-color: var(--semantic-info-accent);
}

/* Forms: fieldset.info — tinted container, cascades to children */
html[data-design-theme="silver-screen"] fieldset.info {
  background: var(--semantic-info-background);
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-info-accent);
  border-radius: var(--radius);
  padding: var(--space-3);
}
fieldset.info legend,
html[data-design-theme="silver-screen"] fieldset.info [data-slot="legend"] {
  color: var(--semantic-info-accent);
  border-bottom-color: var(--semantic-info-accent);
}
fieldset.info label,
html[data-design-theme="silver-screen"] fieldset.info [data-slot="label"] {
  color: var(--semantic-info-accent);
}
fieldset.info .field-input,
fieldset.info .field-select,
fieldset.info .field-textarea,
fieldset.info [data-slot="input"],
fieldset.info [data-slot="select"],
html[data-design-theme="silver-screen"] fieldset.info [data-slot="textarea"] {
  border-color: color-mix(in srgb, var(--semantic-info-accent) 40%, var(--field-border-color));
}
fieldset.info .field-input:focus,
fieldset.info .field-select:focus,
fieldset.info .field-textarea:focus,
fieldset.info [data-slot="input"]:focus,
fieldset.info [data-slot="select"]:focus,
html[data-design-theme="silver-screen"] fieldset.info [data-slot="textarea"]:focus {
  border-color: var(--semantic-info-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-info-accent) 25%, transparent), var(--field-shadow);
}
fieldset.info .field-hint,
html[data-design-theme="silver-screen"] fieldset.info [data-slot="description"] {
  color: color-mix(in srgb, var(--semantic-info-accent) 60%, var(--text-muted));
}

/* Forms: .field-group.info — per-field semantic */
.field-group.info label,
html[data-design-theme="silver-screen"] .field-group.info [data-slot="label"] {
  color: var(--semantic-info-accent);
}
.field-group.info .field-input,
.field-group.info .field-select,
.field-group.info .field-textarea,
.field-group.info [data-slot="input"],
.field-group.info [data-slot="select"],
html[data-design-theme="silver-screen"] .field-group.info [data-slot="textarea"] {
  border-color: color-mix(in srgb, var(--semantic-info-accent) 40%, var(--field-border-color));
}
.field-group.info .field-input:focus,
.field-group.info .field-select:focus,
.field-group.info .field-textarea:focus,
.field-group.info [data-slot="input"]:focus,
.field-group.info [data-slot="select"]:focus,
html[data-design-theme="silver-screen"] .field-group.info [data-slot="textarea"]:focus {
  border-color: var(--semantic-info-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-info-accent) 25%, transparent), var(--field-shadow);
}
.field-group.info .field-hint,
html[data-design-theme="silver-screen"] .field-group.info [data-slot="description"] {
  color: color-mix(in srgb, var(--semantic-info-accent) 60%, var(--text-muted));
}

/* Primary / Black (solid) */

/* ── .card.primary — full semantic: thick colored left border, colored sides, text colored ── */
html[data-design-theme="silver-screen"] .card.primary {
  border-color: var(--semantic-primary-accent);
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-primary-accent);
  color: var(--semantic-primary-accent);
}
html[data-design-theme="silver-screen"] .card.primary .card-header { color: var(--semantic-primary-accent); }
html[data-design-theme="silver-screen"] .card.primary .card-title { color: inherit; }
html[data-design-theme="silver-screen"] .card.primary .card-tag { background: var(--semantic-primary-accent); color: var(--white); }
html[data-design-theme="silver-screen"] .card.primary .card-footer { color: var(--semantic-primary-accent); }
html[data-design-theme="silver-screen"] .card.primary.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-primary-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-primary-accent) 20%, transparent);
}

/* ── .card.accent-primary — accent only: thick colored left border, default other sides ── */
html[data-design-theme="silver-screen"] .card.accent-primary {
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-primary-accent);
}
html[data-design-theme="silver-screen"] .card.accent-primary .card-header::after {
  display: none;
}
html[data-design-theme="silver-screen"] .card.accent-primary.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-primary-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-primary-accent) 20%, transparent);
}

/* accent-* on header standalone */
html[data-design-theme="silver-screen"] .card-header.accent-primary {
  border-bottom: var(--card-border-width-accent) var(--card-border-style) var(--semantic-primary-accent);
}

/* .card-header.primary — semantic class on header */
html[data-design-theme="silver-screen"] .card-header.primary {
  background: var(--semantic-primary-accent);
  color: var(--white);
  border-left: none; border-right: none; border-top: none; border-bottom: none;
}
html[data-design-theme="silver-screen"] .card-header.primary::after {
  border-bottom-color: rgba(255,255,255,0.25);
}
html[data-design-theme="silver-screen"] .card-header.primary .card-title { color: inherit; }
html[data-design-theme="silver-screen"] .card-header.primary .card-tag { background: var(--semantic-primary-accent); color: var(--white); }

/* Applied at body level */
html[data-design-theme="silver-screen"] .card-body.primary {
  background: var(--semantic-primary-background);
  color: var(--semantic-primary-color);
  border: none;
}

/* Applied at footer level */
html[data-design-theme="silver-screen"] .card-footer.primary {
  background: var(--semantic-primary-accent);
  color: var(--white);
  border-left: none; border-right: none; border-bottom: none;
}
html[data-design-theme="silver-screen"] .card-footer.primary::before {
  border-top-color: rgba(255,255,255,0.25);
}

/* Button: .btn.primary */
html[data-design-theme="silver-screen"] .btn.primary {
  background: var(--semantic-primary-accent);
  border-color: var(--semantic-primary-accent);
  color: var(--white);
  position: relative;
  overflow: hidden;
  transition: background var(--btn-transition), border-color var(--btn-transition), box-shadow var(--transition-slow) ease;
}
html[data-design-theme="silver-screen"] .btn.primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.22),
    rgba(255,255,255,0),
    rgba(0,0,0,0.18)
  );
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity var(--transition-slow) ease;
  pointer-events: none;
}
html[data-design-theme="silver-screen"] .btn.primary:hover {
  background: color-mix(in srgb, var(--semantic-primary-accent) 85%, black);
  border-color: color-mix(in srgb, var(--semantic-primary-accent) 85%, black);
}
html[data-design-theme="silver-screen"] .btn.primary.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-primary-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-primary-accent) 20%, transparent);
}

/* Button ghost: .btn.btn-ghost.primary */
html[data-design-theme="silver-screen"] .btn.btn-ghost.primary {
  background: transparent;
  border-color: transparent;
  color: var(--semantic-primary-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-ghost.primary:hover {
  background: color-mix(in srgb, var(--semantic-primary-accent) 10%, transparent);
}

/* Button outline: .btn.btn-outline.primary */
html[data-design-theme="silver-screen"] .btn.btn-outline.primary {
  background: transparent;
  border-color: var(--semantic-primary-accent);
  color: var(--semantic-primary-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-outline.primary:hover {
  background: color-mix(in srgb, var(--semantic-primary-accent) 10%, transparent);
}

/* Button accent: .btn.accent-primary — bottom border + inset bottom shadow only */
html[data-design-theme="silver-screen"] .btn.accent-primary {
  border-bottom-color: var(--semantic-primary-accent);
  border-bottom-width: 2px;
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--semantic-primary-accent) 25%, transparent);
}
html[data-design-theme="silver-screen"] .btn.accent-primary.drop-shadow {
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--semantic-primary-accent) 25%, transparent), 0 8px 24px color-mix(in srgb, var(--semantic-primary-accent) 35%, transparent);
}

/* Button outline accent: .btn.btn-outline.accent-primary */
html[data-design-theme="silver-screen"] .btn.btn-outline.accent-primary {
  border-color: var(--semantic-primary-accent);
  color: var(--semantic-primary-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-outline.accent-primary:hover {
  background: color-mix(in srgb, var(--semantic-primary-accent) 10%, transparent);
}

/* Selected state: fade in animated gradient overlay via ::before */
html[data-design-theme="silver-screen"] .btn.primary.btn-selected {
  border-color: color-mix(in srgb, var(--semantic-primary-accent) 70%, black);
  box-shadow: inset 0 2px 6px color-mix(in srgb, var(--semantic-primary-accent) 40%, black), inset 0 1px 2px rgba(0,0,0,0.3);
}
html[data-design-theme="silver-screen"] .btn.primary.btn-selected::before {
  opacity: 1;
  animation: btn-selected-gradient 2.5s ease infinite;
}

/* HUI: Trigger buttons */
.hui.menu-btn.primary,
html[data-design-theme="silver-screen"] .hui.popover-btn.primary {
  border-color: var(--semantic-primary-accent);
  color: var(--semantic-primary-color);
}
.hui.menu-btn.primary[data-hover],
html[data-design-theme="silver-screen"] .hui.popover-btn.primary[data-hover] {
  background: var(--semantic-primary-background);
}

/* HUI: Overlay panels */
.hui.menu-items.primary,
.hui.listbox-options.primary,
.hui.combo-options.primary,
html[data-design-theme="silver-screen"] .hui.popover-panel.primary {
  border-left: var(--hui-showcase-accent-width) solid var(--semantic-primary-accent);
  border-color: color-mix(in srgb, var(--semantic-primary-accent) 40%, var(--hui-panel-border));
  background: var(--semantic-primary-background);
}

/* HUI: Listbox & Combobox field-style triggers */
html[data-design-theme="silver-screen"] .hui.listbox-btn.primary {
  border-color: color-mix(in srgb, var(--semantic-primary-accent) 40%, var(--hui-field-border));
}
html[data-design-theme="silver-screen"] .hui.listbox-btn.primary[data-open] {
  border-color: var(--semantic-primary-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-primary-accent) 25%, transparent), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.listbox-btn.primary::after {
  border-right-color: var(--semantic-primary-accent);
  border-bottom-color: var(--semantic-primary-accent);
}
html[data-design-theme="silver-screen"] .hui.combo-input.primary {
  border-color: color-mix(in srgb, var(--semantic-primary-accent) 40%, var(--hui-field-border));
}
html[data-design-theme="silver-screen"] .hui.combo-input.primary:focus {
  border-color: var(--semantic-primary-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-primary-accent) 25%, transparent), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.combo-btn.primary {
  color: var(--semantic-primary-accent);
}

/* HUI: Dialog */
html[data-design-theme="silver-screen"] .hui.dialog-panel.primary {
  border-left: var(--hui-showcase-accent-width) solid var(--semantic-primary-accent);
}
html[data-design-theme="silver-screen"] .hui.dialog-panel.primary .dialog-title {
  color: var(--semantic-primary-accent);
}

/* HUI: Tabs */
html[data-design-theme="silver-screen"] .hui.tab-list.primary .hui.tab[data-selected] {
  color: var(--semantic-primary-accent);
  border-bottom-color: var(--semantic-primary-accent);
}

/* HUI: Disclosure */
html[data-design-theme="silver-screen"] .hui.disclosure-btn.primary {
  border-color: var(--semantic-primary-accent);
  background: var(--semantic-primary-background);
}

/* HUI: Controls — on state */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap.primary[data-checked] .checkbox-visual {
  background: var(--semantic-primary-accent);
  border-color: var(--semantic-primary-accent);
}
html[data-design-theme="silver-screen"] .hui.switch-wrap.primary[data-checked] .switch-track {
  background: var(--semantic-primary-accent);
}
html[data-design-theme="silver-screen"] .hui.radio-option.primary[data-checked] {
  border-color: var(--semantic-primary-accent);
  background: var(--semantic-primary-background);
}
html[data-design-theme="silver-screen"] .hui.radio-option.primary[data-checked] .radio-dot {
  border-color: var(--semantic-primary-accent);
}
html[data-design-theme="silver-screen"] .hui.radio-option.primary[data-checked] .radio-dot-inner {
  background: var(--semantic-primary-accent);
}

/* HUI: Controls — off state (semantic tints the unchecked appearance) */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap.primary:not([data-checked]) .checkbox-visual {
  border-color: color-mix(in srgb, var(--semantic-primary-accent) 40%, var(--hui-control-border));
}
html[data-design-theme="silver-screen"] .hui.switch-wrap.primary:not([data-checked]) .switch-track {
  background: color-mix(in srgb, var(--semantic-primary-accent) 25%, var(--hui-switch-track-off-bg));
}
html[data-design-theme="silver-screen"] .hui.radio-option.primary:not([data-checked]) {
  border-color: color-mix(in srgb, var(--semantic-primary-accent) 30%, var(--hui-radio-option-border));
}
html[data-design-theme="silver-screen"] .hui.radio-option.primary:not([data-checked]) .radio-dot {
  border-color: color-mix(in srgb, var(--semantic-primary-accent) 40%, var(--hui-control-border));
}

/* HUI: Showcase accent */
html[data-design-theme="silver-screen"] .hui.showcase.primary {
  border-top-color: var(--semantic-primary-accent);
}
html[data-design-theme="silver-screen"] .hui.showcase.accent-primary {
  border-top-color: var(--semantic-primary-accent);
}

/* Forms: fieldset.primary — tinted container, cascades to children */
html[data-design-theme="silver-screen"] fieldset.primary {
  background: var(--semantic-primary-background);
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-primary-accent);
  border-radius: var(--radius);
  padding: var(--space-3);
}
fieldset.primary legend,
html[data-design-theme="silver-screen"] fieldset.primary [data-slot="legend"] {
  color: var(--semantic-primary-accent);
  border-bottom-color: var(--semantic-primary-accent);
}
fieldset.primary label,
html[data-design-theme="silver-screen"] fieldset.primary [data-slot="label"] {
  color: var(--semantic-primary-accent);
}
fieldset.primary .field-input,
fieldset.primary .field-select,
fieldset.primary .field-textarea,
fieldset.primary [data-slot="input"],
fieldset.primary [data-slot="select"],
html[data-design-theme="silver-screen"] fieldset.primary [data-slot="textarea"] {
  border-color: color-mix(in srgb, var(--semantic-primary-accent) 40%, var(--field-border-color));
}
fieldset.primary .field-input:focus,
fieldset.primary .field-select:focus,
fieldset.primary .field-textarea:focus,
fieldset.primary [data-slot="input"]:focus,
fieldset.primary [data-slot="select"]:focus,
html[data-design-theme="silver-screen"] fieldset.primary [data-slot="textarea"]:focus {
  border-color: var(--semantic-primary-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-primary-accent) 25%, transparent), var(--field-shadow);
}
fieldset.primary .field-hint,
html[data-design-theme="silver-screen"] fieldset.primary [data-slot="description"] {
  color: color-mix(in srgb, var(--semantic-primary-accent) 60%, var(--text-muted));
}

/* Forms: .field-group.primary — per-field semantic */
.field-group.primary label,
html[data-design-theme="silver-screen"] .field-group.primary [data-slot="label"] {
  color: var(--semantic-primary-accent);
}
.field-group.primary .field-input,
.field-group.primary .field-select,
.field-group.primary .field-textarea,
.field-group.primary [data-slot="input"],
.field-group.primary [data-slot="select"],
html[data-design-theme="silver-screen"] .field-group.primary [data-slot="textarea"] {
  border-color: color-mix(in srgb, var(--semantic-primary-accent) 40%, var(--field-border-color));
}
.field-group.primary .field-input:focus,
.field-group.primary .field-select:focus,
.field-group.primary .field-textarea:focus,
.field-group.primary [data-slot="input"]:focus,
.field-group.primary [data-slot="select"]:focus,
html[data-design-theme="silver-screen"] .field-group.primary [data-slot="textarea"]:focus {
  border-color: var(--semantic-primary-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-primary-accent) 25%, transparent), var(--field-shadow);
}
.field-group.primary .field-hint,
html[data-design-theme="silver-screen"] .field-group.primary [data-slot="description"] {
  color: color-mix(in srgb, var(--semantic-primary-accent) 60%, var(--text-muted));
}

/* Brand / Red (solid) */

/* ── .card.brand — full semantic: thick colored left border, colored sides, text colored ── */
html[data-design-theme="silver-screen"] .card.brand {
  border-color: var(--semantic-brand-accent);
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-brand-accent);
  color: var(--semantic-brand-accent);
}
html[data-design-theme="silver-screen"] .card.brand .card-header { color: var(--semantic-brand-accent); }
html[data-design-theme="silver-screen"] .card.brand .card-title { color: inherit; }
html[data-design-theme="silver-screen"] .card.brand .card-tag { background: var(--semantic-brand-accent); color: var(--white); }
html[data-design-theme="silver-screen"] .card.brand .card-footer { color: var(--semantic-brand-accent); }
html[data-design-theme="silver-screen"] .card.brand.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-brand-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-brand-accent) 20%, transparent);
}

/* ── .card.accent-brand — accent only: thick colored left border, default other sides ── */
html[data-design-theme="silver-screen"] .card.accent-brand {
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-brand-accent);
}
html[data-design-theme="silver-screen"] .card.accent-brand .card-header::after {
  display: none;
}
html[data-design-theme="silver-screen"] .card.accent-brand.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-brand-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-brand-accent) 20%, transparent);
}

/* accent-* on header standalone */
html[data-design-theme="silver-screen"] .card-header.accent-brand {
  border-bottom: var(--card-border-width-accent) var(--card-border-style) var(--semantic-brand-accent);
}

/* .card-header.brand — semantic class on header */
html[data-design-theme="silver-screen"] .card-header.brand {
  background: var(--semantic-brand-accent);
  color: var(--white);
  border-left: none; border-right: none; border-top: none; border-bottom: none;
}
html[data-design-theme="silver-screen"] .card-header.brand::after {
  border-bottom-color: rgba(255,255,255,0.25);
}
html[data-design-theme="silver-screen"] .card-header.brand .card-title { color: inherit; }
html[data-design-theme="silver-screen"] .card-header.brand .card-tag { background: var(--semantic-brand-accent); color: var(--white); }

/* Applied at body level */
html[data-design-theme="silver-screen"] .card-body.brand {
  background: var(--semantic-brand-background);
  color: var(--semantic-brand-color);
  border: none;
}

/* Applied at footer level */
html[data-design-theme="silver-screen"] .card-footer.brand {
  background: var(--semantic-brand-accent);
  color: var(--white);
  border-left: none; border-right: none; border-bottom: none;
}
html[data-design-theme="silver-screen"] .card-footer.brand::before {
  border-top-color: rgba(255,255,255,0.25);
}

/* Button: .btn.brand */
html[data-design-theme="silver-screen"] .btn.brand {
  background: var(--semantic-brand-accent);
  border-color: var(--semantic-brand-accent);
  color: var(--white);
  position: relative;
  overflow: hidden;
  transition: background var(--btn-transition), border-color var(--btn-transition), box-shadow var(--transition-slow) ease;
}
html[data-design-theme="silver-screen"] .btn.brand::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0),
    rgba(255,255,255,0.22),
    rgba(255,255,255,0),
    rgba(0,0,0,0.18)
  );
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity var(--transition-slow) ease;
  pointer-events: none;
}
html[data-design-theme="silver-screen"] .btn.brand:hover {
  background: color-mix(in srgb, var(--semantic-brand-accent) 85%, black);
  border-color: color-mix(in srgb, var(--semantic-brand-accent) 85%, black);
}
html[data-design-theme="silver-screen"] .btn.brand.drop-shadow {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--semantic-brand-accent) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--semantic-brand-accent) 20%, transparent);
}

/* Button ghost: .btn.btn-ghost.brand */
html[data-design-theme="silver-screen"] .btn.btn-ghost.brand {
  background: transparent;
  border-color: transparent;
  color: var(--semantic-brand-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-ghost.brand:hover {
  background: color-mix(in srgb, var(--semantic-brand-accent) 10%, transparent);
}

/* Button outline: .btn.btn-outline.brand */
html[data-design-theme="silver-screen"] .btn.btn-outline.brand {
  background: transparent;
  border-color: var(--semantic-brand-accent);
  color: var(--semantic-brand-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-outline.brand:hover {
  background: color-mix(in srgb, var(--semantic-brand-accent) 10%, transparent);
}

/* Button accent: .btn.accent-brand — bottom border + inset bottom shadow only */
html[data-design-theme="silver-screen"] .btn.accent-brand {
  border-bottom-color: var(--semantic-brand-accent);
  border-bottom-width: 2px;
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--semantic-brand-accent) 25%, transparent);
}
html[data-design-theme="silver-screen"] .btn.accent-brand.drop-shadow {
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--semantic-brand-accent) 25%, transparent), 0 8px 24px color-mix(in srgb, var(--semantic-brand-accent) 35%, transparent);
}

/* Button outline accent: .btn.btn-outline.accent-brand */
html[data-design-theme="silver-screen"] .btn.btn-outline.accent-brand {
  border-color: var(--semantic-brand-accent);
  color: var(--semantic-brand-accent);
}
html[data-design-theme="silver-screen"] .btn.btn-outline.accent-brand:hover {
  background: color-mix(in srgb, var(--semantic-brand-accent) 10%, transparent);
}

/* Selected state: fade in animated gradient overlay via ::before */
html[data-design-theme="silver-screen"] .btn.brand.btn-selected {
  border-color: color-mix(in srgb, var(--semantic-brand-accent) 70%, black);
  box-shadow: inset 0 2px 6px color-mix(in srgb, var(--semantic-brand-accent) 40%, black), inset 0 1px 2px rgba(0,0,0,0.3);
}
html[data-design-theme="silver-screen"] .btn.brand.btn-selected::before {
  opacity: 1;
  animation: btn-selected-gradient 2.5s ease infinite;
}

/* HUI: Trigger buttons */
.hui.menu-btn.brand,
html[data-design-theme="silver-screen"] .hui.popover-btn.brand {
  border-color: var(--semantic-brand-accent);
  color: var(--semantic-brand-color);
}
.hui.menu-btn.brand[data-hover],
html[data-design-theme="silver-screen"] .hui.popover-btn.brand[data-hover] {
  background: var(--semantic-brand-background);
}

/* HUI: Overlay panels */
.hui.menu-items.brand,
.hui.listbox-options.brand,
.hui.combo-options.brand,
html[data-design-theme="silver-screen"] .hui.popover-panel.brand {
  border-left: var(--hui-showcase-accent-width) solid var(--semantic-brand-accent);
  border-color: color-mix(in srgb, var(--semantic-brand-accent) 40%, var(--hui-panel-border));
  background: var(--semantic-brand-background);
}

/* HUI: Listbox & Combobox field-style triggers */
html[data-design-theme="silver-screen"] .hui.listbox-btn.brand {
  border-color: color-mix(in srgb, var(--semantic-brand-accent) 40%, var(--hui-field-border));
}
html[data-design-theme="silver-screen"] .hui.listbox-btn.brand[data-open] {
  border-color: var(--semantic-brand-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-brand-accent) 25%, transparent), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.listbox-btn.brand::after {
  border-right-color: var(--semantic-brand-accent);
  border-bottom-color: var(--semantic-brand-accent);
}
html[data-design-theme="silver-screen"] .hui.combo-input.brand {
  border-color: color-mix(in srgb, var(--semantic-brand-accent) 40%, var(--hui-field-border));
}
html[data-design-theme="silver-screen"] .hui.combo-input.brand:focus {
  border-color: var(--semantic-brand-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-brand-accent) 25%, transparent), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.combo-btn.brand {
  color: var(--semantic-brand-accent);
}

/* HUI: Dialog */
html[data-design-theme="silver-screen"] .hui.dialog-panel.brand {
  border-left: var(--hui-showcase-accent-width) solid var(--semantic-brand-accent);
}
html[data-design-theme="silver-screen"] .hui.dialog-panel.brand .dialog-title {
  color: var(--semantic-brand-accent);
}

/* HUI: Tabs */
html[data-design-theme="silver-screen"] .hui.tab-list.brand .hui.tab[data-selected] {
  color: var(--semantic-brand-accent);
  border-bottom-color: var(--semantic-brand-accent);
}

/* HUI: Disclosure */
html[data-design-theme="silver-screen"] .hui.disclosure-btn.brand {
  border-color: var(--semantic-brand-accent);
  background: var(--semantic-brand-background);
}

/* HUI: Controls — on state */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap.brand[data-checked] .checkbox-visual {
  background: var(--semantic-brand-accent);
  border-color: var(--semantic-brand-accent);
}
html[data-design-theme="silver-screen"] .hui.switch-wrap.brand[data-checked] .switch-track {
  background: var(--semantic-brand-accent);
}
html[data-design-theme="silver-screen"] .hui.radio-option.brand[data-checked] {
  border-color: var(--semantic-brand-accent);
  background: var(--semantic-brand-background);
}
html[data-design-theme="silver-screen"] .hui.radio-option.brand[data-checked] .radio-dot {
  border-color: var(--semantic-brand-accent);
}
html[data-design-theme="silver-screen"] .hui.radio-option.brand[data-checked] .radio-dot-inner {
  background: var(--semantic-brand-accent);
}

/* HUI: Controls — off state (semantic tints the unchecked appearance) */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap.brand:not([data-checked]) .checkbox-visual {
  border-color: color-mix(in srgb, var(--semantic-brand-accent) 40%, var(--hui-control-border));
}
html[data-design-theme="silver-screen"] .hui.switch-wrap.brand:not([data-checked]) .switch-track {
  background: color-mix(in srgb, var(--semantic-brand-accent) 25%, var(--hui-switch-track-off-bg));
}
html[data-design-theme="silver-screen"] .hui.radio-option.brand:not([data-checked]) {
  border-color: color-mix(in srgb, var(--semantic-brand-accent) 30%, var(--hui-radio-option-border));
}
html[data-design-theme="silver-screen"] .hui.radio-option.brand:not([data-checked]) .radio-dot {
  border-color: color-mix(in srgb, var(--semantic-brand-accent) 40%, var(--hui-control-border));
}

/* HUI: Showcase accent */
html[data-design-theme="silver-screen"] .hui.showcase.brand {
  border-top-color: var(--semantic-brand-accent);
}
html[data-design-theme="silver-screen"] .hui.showcase.accent-brand {
  border-top-color: var(--semantic-brand-accent);
}

/* Forms: fieldset.brand — tinted container, cascades to children */
html[data-design-theme="silver-screen"] fieldset.brand {
  background: var(--semantic-brand-background);
  border-left: var(--card-border-width-accent) var(--card-border-style) var(--semantic-brand-accent);
  border-radius: var(--radius);
  padding: var(--space-3);
}
fieldset.brand legend,
html[data-design-theme="silver-screen"] fieldset.brand [data-slot="legend"] {
  color: var(--semantic-brand-accent);
  border-bottom-color: var(--semantic-brand-accent);
}
fieldset.brand label,
html[data-design-theme="silver-screen"] fieldset.brand [data-slot="label"] {
  color: var(--semantic-brand-accent);
}
fieldset.brand .field-input,
fieldset.brand .field-select,
fieldset.brand .field-textarea,
fieldset.brand [data-slot="input"],
fieldset.brand [data-slot="select"],
html[data-design-theme="silver-screen"] fieldset.brand [data-slot="textarea"] {
  border-color: color-mix(in srgb, var(--semantic-brand-accent) 40%, var(--field-border-color));
}
fieldset.brand .field-input:focus,
fieldset.brand .field-select:focus,
fieldset.brand .field-textarea:focus,
fieldset.brand [data-slot="input"]:focus,
fieldset.brand [data-slot="select"]:focus,
html[data-design-theme="silver-screen"] fieldset.brand [data-slot="textarea"]:focus {
  border-color: var(--semantic-brand-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-brand-accent) 25%, transparent), var(--field-shadow);
}
fieldset.brand .field-hint,
html[data-design-theme="silver-screen"] fieldset.brand [data-slot="description"] {
  color: color-mix(in srgb, var(--semantic-brand-accent) 60%, var(--text-muted));
}

/* Forms: .field-group.brand — per-field semantic */
.field-group.brand label,
html[data-design-theme="silver-screen"] .field-group.brand [data-slot="label"] {
  color: var(--semantic-brand-accent);
}
.field-group.brand .field-input,
.field-group.brand .field-select,
.field-group.brand .field-textarea,
.field-group.brand [data-slot="input"],
.field-group.brand [data-slot="select"],
html[data-design-theme="silver-screen"] .field-group.brand [data-slot="textarea"] {
  border-color: color-mix(in srgb, var(--semantic-brand-accent) 40%, var(--field-border-color));
}
.field-group.brand .field-input:focus,
.field-group.brand .field-select:focus,
.field-group.brand .field-textarea:focus,
.field-group.brand [data-slot="input"]:focus,
.field-group.brand [data-slot="select"]:focus,
html[data-design-theme="silver-screen"] .field-group.brand [data-slot="textarea"]:focus {
  border-color: var(--semantic-brand-accent);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) color-mix(in srgb, var(--semantic-brand-accent) 25%, transparent), var(--field-shadow);
}
.field-group.brand .field-hint,
html[data-design-theme="silver-screen"] .field-group.brand [data-slot="description"] {
  color: color-mix(in srgb, var(--semantic-brand-accent) 60%, var(--text-muted));
}

/* ── TYPOGRAPHY ── (from: style-guide.typography.yaml) */
/* ═══════════════════════════════════════
   TYPOGRAPHY CLASSES
   ═══════════════════════════════════════ */
html[data-design-theme="silver-screen"] .typography-display {
  font-family: var(--font-sans);
  font-size: 56px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

html[data-design-theme="silver-screen"] .typography-h1 {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

html[data-design-theme="silver-screen"] .typography-h2 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

html[data-design-theme="silver-screen"] .typography-body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

html[data-design-theme="silver-screen"] .typography-code {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
}

html[data-design-theme="silver-screen"] .typography-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

html[data-design-theme="silver-screen"] .typography-data {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}

/* ── INDICATORS ── (from: style-guide.vars.yaml) */
/* ═══════════════════════════════════════
   STATUS INDICATORS
   ═══════════════════════════════════════ */

/* ─── Badge ─── */
html[data-design-theme="silver-screen"] .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  font-family: var(--badge-font-family);
  line-height: var(--badge-line-height);
  white-space: nowrap;
}
html[data-design-theme="silver-screen"] .badge.count {
  min-width: var(--badge-count-min-width);
  height: var(--badge-count-height);
  padding: var(--badge-count-padding);
}
html[data-design-theme="silver-screen"] .badge.success { background: var(--success);  color: var(--on-semantic-color); }
html[data-design-theme="silver-screen"] .badge.warning { background: var(--warning);  color: var(--on-semantic-color); }
html[data-design-theme="silver-screen"] .badge.error { background: var(--error);    color: var(--on-semantic-color); }
html[data-design-theme="silver-screen"] .badge.info { background: var(--info);     color: var(--on-semantic-color); }
html[data-design-theme="silver-screen"] .badge.default { background: var(--border); color: var(--text); }
html[data-design-theme="silver-screen"] .badge.muted { background: var(--surface-alt); color: var(--text); border: var(--border-thin) solid var(--border-strong); }

/* ─── Alert ─── */
html[data-design-theme="silver-screen"] .alert {
  padding: var(--space-2) var(--space-3);
  border-left: var(--alert-border-width) solid var(--border-strong);
  background: var(--surface-alt);
  display: flex;
  flex-direction: column;
  gap: var(--alert-gap);
}
html[data-design-theme="silver-screen"] .alert-title {
  font-weight: var(--alert-title-font-weight);
  font-size: var(--alert-title-font-size);
  line-height: var(--alert-title-line-height);
}
html[data-design-theme="silver-screen"] .alert-body {
  font-size: var(--alert-body-font-size);
  color: var(--text-secondary);
  line-height: var(--alert-body-line-height);
}
html[data-design-theme="silver-screen"] .alert.success { border-left-color: var(--success); background: var(--success-tint); }
html[data-design-theme="silver-screen"] .alert.success .alert-title { color: var(--success); }
html[data-design-theme="silver-screen"] .alert.warning { border-left-color: var(--warning); background: var(--warning-tint); }
html[data-design-theme="silver-screen"] .alert.warning .alert-title { color: var(--warning); }
html[data-design-theme="silver-screen"] .alert.error { border-left-color: var(--error);   background: var(--error-tint);   }
html[data-design-theme="silver-screen"] .alert.error   .alert-title { color: var(--error); }
html[data-design-theme="silver-screen"] .alert.info { border-left-color: var(--info);    background: var(--info-tint);    }
html[data-design-theme="silver-screen"] .alert.info    .alert-title { color: var(--info); }

/* ─── Toast ─── */
html[data-design-theme="silver-screen"] .toast {
  display: flex;
  align-items: center;
  gap: var(--toast-gap);
  padding: var(--toast-padding);
  background: var(--toast-bg);
  color: var(--toast-color);
  font-size: var(--toast-font-size);
  font-weight: var(--toast-font-weight);
  line-height: var(--toast-line-height);
  width: 100%;
  max-width: var(--toast-max-width);
  border-left: var(--toast-border-width) solid transparent;
  box-shadow: var(--toast-shadow);
}
html[data-design-theme="silver-screen"] .toast-icon { flex-shrink: 0; }
html[data-design-theme="silver-screen"] .toast.success { background: var(--toast-bg-success); color: var(--toast-color-success); border-left-color: var(--success); }
html[data-design-theme="silver-screen"] .toast.warning { background: var(--toast-bg-warning); color: var(--toast-color-warning); border-left-color: var(--warning); }
html[data-design-theme="silver-screen"] .toast.error { background: var(--toast-bg-error); color: var(--toast-color-error); border-left-color: var(--error); }
html[data-design-theme="silver-screen"] .toast.info { background: var(--toast-bg-info); color: var(--toast-color-info); border-left-color: var(--info); }

/* ─── Sonner overrides (match preview toasts) ─── */
html[data-design-theme="silver-screen"] [data-sonner-toaster] [data-sonner-toast] {
  --normal-bg: var(--toast-bg);
  --normal-text: var(--toast-color);
  --normal-border: transparent;
  --success-bg: var(--toast-bg-success);
  --success-text: var(--toast-color-success);
  --success-border: var(--success);
  --error-bg: var(--toast-bg-error);
  --error-text: var(--toast-color-error);
  --error-border: var(--error);
  --warning-bg: var(--toast-bg-warning);
  --warning-text: var(--toast-color-warning);
  --warning-border: var(--warning);
  --info-bg: var(--toast-bg-info);
  --info-text: var(--toast-color-info);
  --info-border: var(--info);
  font-size: var(--toast-font-size);
  font-weight: var(--toast-font-weight);
  line-height: var(--toast-line-height);
  box-shadow: var(--toast-shadow);
  border-left-width: var(--toast-border-width);
  border-left-style: solid;
  border-radius: 0;
}
html[data-design-theme="silver-screen"] [data-sonner-toaster] [data-sonner-toast][data-type="success"] { background: var(--toast-bg-success); color: var(--toast-color-success); border-left-color: var(--success); }
html[data-design-theme="silver-screen"] [data-sonner-toaster] [data-sonner-toast][data-type="error"] { background: var(--toast-bg-error); color: var(--toast-color-error); border-left-color: var(--error); }
html[data-design-theme="silver-screen"] [data-sonner-toaster] [data-sonner-toast][data-type="warning"] { background: var(--toast-bg-warning); color: var(--toast-color-warning); border-left-color: var(--warning); }
html[data-design-theme="silver-screen"] [data-sonner-toaster] [data-sonner-toast][data-type="info"] { background: var(--toast-bg-info); color: var(--toast-color-info); border-left-color: var(--info); }

/* ─── Progress ─── */
html[data-design-theme="silver-screen"] .progress {
  width: 100%;
  background: var(--border);
  border-radius: var(--progress-radius);
  overflow: hidden;
  height: var(--progress-height);
}
html[data-design-theme="silver-screen"] .progress.sm { height: var(--progress-height-sm); }
html[data-design-theme="silver-screen"] .progress.lg { height: var(--progress-height-lg); }
html[data-design-theme="silver-screen"] .progress-bar {
  height: 100%;
  border-radius: var(--progress-radius);
  background: var(--text);
  transition: var(--progress-transition);
}
html[data-design-theme="silver-screen"] .progress-bar.success { background: var(--success); }
html[data-design-theme="silver-screen"] .progress-bar.warning { background: var(--warning); }
html[data-design-theme="silver-screen"] .progress-bar.error { background: var(--error);   }
html[data-design-theme="silver-screen"] .progress-bar.info { background: var(--info);    }
html[data-design-theme="silver-screen"] .progress.indeterminate .progress-bar {
  width: 40% !important;
  animation: progress-slide 1.4s ease-in-out infinite;
}
@keyframes progress-slide {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(350%); }
}

/* ─── Status Dot ─── */
html[data-design-theme="silver-screen"] .status-dot-row {
  display: inline-flex;
  align-items: center;
  gap: var(--status-dot-row-gap);
  font-size: var(--status-dot-row-font-size);
}
html[data-design-theme="silver-screen"] .status-dot {
  display: inline-block;
  width: var(--status-dot-size);
  height: var(--status-dot-size);
  border-radius: 50%;
  flex-shrink: 0;
}
html[data-design-theme="silver-screen"] .status-dot.online { background: var(--success); box-shadow: 0 0 0 var(--size-border-thick) color-mix(in srgb, var(--success) 25%, transparent); }
html[data-design-theme="silver-screen"] .status-dot.away { background: var(--warning); }
html[data-design-theme="silver-screen"] .status-dot.offline { background: var(--text-muted); }
html[data-design-theme="silver-screen"] .status-dot.error { background: var(--error); }

/* ─── Tag ─── */
html[data-design-theme="silver-screen"] .tag {
  display: inline-flex;
  align-items: center;
  padding: var(--tag-padding);
  border-radius: var(--tag-radius);
  font-size: var(--tag-font-size);
  font-weight: var(--tag-font-weight);
  font-family: var(--tag-font-family);
  white-space: nowrap;
  border: var(--tag-border-width) solid transparent;
}
html[data-design-theme="silver-screen"] .tag.success { background: var(--success-tint); color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
html[data-design-theme="silver-screen"] .tag.warning { background: var(--warning-tint); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
html[data-design-theme="silver-screen"] .tag.error { background: var(--error-tint);   color: var(--error);   border-color: color-mix(in srgb, var(--error)   25%, transparent); }
html[data-design-theme="silver-screen"] .tag.info { background: var(--info-tint);    color: var(--info);    border-color: color-mix(in srgb, var(--info)    25%, transparent); }
html[data-design-theme="silver-screen"] .tag.default { background: var(--surface-alt); color: var(--text-secondary); border-color: var(--border-strong); }



/* ── FORMS ── (from: style-guide.vars.yaml) */
/* ═══════════════════════════════════════
   FORM CONTROLS  (HUI-compatible)
   ═══════════════════════════════════════ */

/* ─── Field group ─── */
html[data-design-theme="silver-screen"] .field-group {
  display: flex;
  flex-direction: column;
  gap: var(--field-label-gap);
}

/* ─── Label ─── */
html[data-design-theme="silver-screen"] .field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--field-label-font-size);
  font-weight: var(--field-label-font-weight);
  letter-spacing: var(--field-label-letter-spacing);
  text-transform: uppercase;
  color: var(--text-secondary);
  user-select: none;
}

/* ─── Base controls ─── */
.field-input,
.field-select,
html[data-design-theme="silver-screen"] .field-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--field-font-size);
  font-weight: var(--font-weight-normal);
  color: var(--text);
  background: var(--field-bg);
  border: var(--field-border-width) solid var(--field-border-color);
  border-radius: var(--radius);
  outline: none;
  box-shadow: var(--field-shadow);
  transition: var(--field-transition);
}

html[data-design-theme="silver-screen"] .field-input { height: var(--field-height); padding: 0 var(--field-padding-x); }
html[data-design-theme="silver-screen"] .field-select { height: var(--field-height); padding: 0 var(--field-select-padding-right) 0 var(--field-padding-x); }
html[data-design-theme="silver-screen"] .field-textarea {
  padding: var(--field-textarea-padding);
  min-height: var(--field-textarea-min-height);
  resize: none;
  line-height: var(--field-textarea-line-height);
}

/* ─── Hover ─── */
.field-input:hover:not(:focus):not(.field-error):not(.field-warning):not(.field-success),
.field-select:hover:not(:focus):not(.field-error):not(.field-warning):not(.field-success),
html[data-design-theme="silver-screen"] .field-textarea:hover:not(:focus):not(.field-error):not(.field-warning):not(.field-success) {
  border-color: var(--border-strong);
}

/* ─── Focus ─── */
.field-input:focus,
.field-select:focus,
html[data-design-theme="silver-screen"] .field-textarea:focus {
  border-color: var(--brand-blue);
  box-shadow:
    var(--field-focus-ring),
    var(--field-shadow);
}

/* ─── Placeholder ─── */
.field-input::placeholder,
html[data-design-theme="silver-screen"] .field-textarea::placeholder {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
}

/* ─── Validation: inset left bar + tinted bg ─── */
.field-input.field-error,
.field-select.field-error,
html[data-design-theme="silver-screen"] .field-textarea.field-error {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error-tint) 55%, var(--surface));
  box-shadow: inset var(--field-validation-bar-width) 0 0 0 var(--error);
}
.field-input.field-warning,
.field-select.field-warning,
html[data-design-theme="silver-screen"] .field-textarea.field-warning {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning-tint) 55%, var(--surface));
  box-shadow: inset var(--field-validation-bar-width) 0 0 0 var(--warning);
}
.field-input.field-success,
.field-select.field-success,
html[data-design-theme="silver-screen"] .field-textarea.field-success {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success-tint) 55%, var(--surface));
  box-shadow: inset var(--field-validation-bar-width) 0 0 0 var(--success);
}

/* ─── Select chevron ─── */
html[data-design-theme="silver-screen"] .field-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23757575' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--field-padding-x) center;
  cursor: pointer;
}

/* ─── Hint / Description ─── */
html[data-design-theme="silver-screen"] .field-hint {
  font-family: var(--font-mono);
  font-size: var(--field-hint-font-size);
  color: var(--text-muted);
  line-height: var(--field-hint-line-height);
  margin-top: var(--field-hint-margin-top);
  margin-left: var(--field-hint-margin-left);
}
html[data-design-theme="silver-screen"] .field-hint.field-error { color: var(--error); margin-left: 0; }
html[data-design-theme="silver-screen"] .field-hint.field-warning { color: var(--warning); margin-left: 0; }
html[data-design-theme="silver-screen"] .field-hint.field-success { color: var(--success); margin-left: 0; }

/* ─── Char count ─── */
html[data-design-theme="silver-screen"] .field-char-count {
  font-family: var(--font-mono);
  font-size: var(--field-label-font-size);
  color: var(--text-muted);
  text-align: right;
  line-height: var(--field-char-count-line-height);
}
html[data-design-theme="silver-screen"] .field-char-count.field-warning { color: var(--warning); }
html[data-design-theme="silver-screen"] .field-char-count.field-error { color: var(--error); }

/* ─── Layout helpers ─── */
html[data-design-theme="silver-screen"] .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

html[data-design-theme="silver-screen"] .field-section-heading {
  font-family: var(--font-mono);
  font-size: var(--field-label-font-size);
  font-weight: var(--field-label-font-weight);
  letter-spacing: var(--field-label-letter-spacing);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: var(--fieldset-legend-padding);
  border-bottom: var(--fieldset-border-width) solid var(--border);
  margin-bottom: var(--fieldset-legend-margin-bottom);
}

html[data-design-theme="silver-screen"] .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--border);
  margin-top: var(--space-2);
}

/* ─── Native checkbox/radio (fallback / non-HUI) ─── */
.field-checkbox-group,
html[data-design-theme="silver-screen"] .field-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--field-group-gap);
}
.field-checkbox-row,
html[data-design-theme="silver-screen"] .field-radio-row {
  display: flex;
  align-items: center;
  gap: var(--field-group-gap);
  font-family: var(--font-sans);
  font-size: var(--field-checkbox-font-size);
  cursor: pointer;
  user-select: none;
}
.field-checkbox-row input[type="checkbox"],
html[data-design-theme="silver-screen"] .field-radio-row    input[type="radio"] {
  width: var(--control-size);
  height: var(--control-size);
  accent-color: var(--brand-blue);
  cursor: pointer;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   HEADLESS UI — element styles
   HUI components render semantic HTML and
   expose data-* attributes for state.
   ═══════════════════════════════════════ */

/* ─── Field / Fieldset (layout wrapper) ─── */
/* HUI <Field> renders a <div>, <Fieldset> renders a <fieldset> */
html[data-design-theme="silver-screen"] [data-slot="control"] {
  display: flex;
  flex-direction: column;
  gap: var(--field-label-gap);
}
fieldset[data-slot="fieldset"],
html[data-design-theme="silver-screen"] fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ─── Label / Legend ─── */
/* HUI <Label> renders a <label>, <Legend> renders a <legend> */
[data-slot="label"],
html[data-design-theme="silver-screen"] label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--field-label-font-size);
  font-weight: var(--field-label-font-weight);
  letter-spacing: var(--field-label-letter-spacing);
  text-transform: uppercase;
  color: var(--text-secondary);
  user-select: none;
  cursor: default;
}
[data-slot="legend"],
html[data-design-theme="silver-screen"] legend {
  font-family: var(--font-mono);
  font-size: var(--field-label-font-size);
  font-weight: var(--field-label-font-weight);
  letter-spacing: var(--field-label-letter-spacing);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: var(--fieldset-legend-padding);
  border-bottom: var(--fieldset-border-width) solid var(--border);
  width: 100%;
  float: left;
  margin-bottom: var(--space-1);
}

/* ─── Description ─── */
/* HUI <Description> renders a <p> */
html[data-design-theme="silver-screen"] [data-slot="description"] {
  font-family: var(--font-mono);
  font-size: var(--field-hint-font-size);
  color: var(--text-muted);
  line-height: var(--field-hint-line-height);
  margin: 0;
}

/* ─── Input ─── */
/* HUI <Input> renders an <input>; data-focus, data-hover, data-invalid */
html[data-design-theme="silver-screen"] [data-slot="input"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: var(--field-height);
  padding: 0 var(--field-padding-x);
  font-family: var(--font-sans);
  font-size: var(--field-font-size);
  font-weight: var(--font-weight-normal);
  color: var(--text);
  background: var(--field-bg);
  border: var(--field-border-width) solid var(--field-border-color);
  border-radius: var(--radius);
  outline: none;
  box-shadow: var(--field-shadow);
  transition: var(--field-transition);
}
html[data-design-theme="silver-screen"] [data-slot="input"]::placeholder { color: var(--text-muted); }
html[data-design-theme="silver-screen"] [data-slot="input"]:hover:not(:focus) { border-color: var(--border-strong); }
[data-slot="input"]:focus,
html[data-design-theme="silver-screen"] [data-slot="input"][data-focus] {
  border-color: var(--brand-blue);
  box-shadow:
    var(--field-focus-ring),
    var(--field-shadow);
}
[data-slot="input"][data-invalid],
html[data-design-theme="silver-screen"] [data-slot="input"].field-error {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error-tint) 55%, var(--surface));
  box-shadow: inset var(--field-validation-bar-width) 0 0 0 var(--error);
}

/* ─── Select ─── */
/* HUI <Select> renders a <select> */
html[data-design-theme="silver-screen"] [data-slot="select"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: var(--field-height);
  padding: 0 var(--field-select-padding-right) 0 var(--field-padding-x);
  font-family: var(--font-sans);
  font-size: var(--field-font-size);
  color: var(--text);
  background: var(--field-bg);
  border: var(--field-border-width) solid var(--field-border-color);
  border-radius: var(--radius);
  outline: none;
  box-shadow: var(--field-shadow);
  transition: var(--field-transition);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23757575' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--field-padding-x) center;
  cursor: pointer;
}
html[data-design-theme="silver-screen"] [data-slot="select"]:hover:not(:focus) { border-color: var(--border-strong); }
[data-slot="select"]:focus,
html[data-design-theme="silver-screen"] [data-slot="select"][data-focus] {
  border-color: var(--brand-blue);
  box-shadow:
    var(--field-focus-ring),
    var(--field-shadow);
}
[data-slot="select"][data-invalid],
html[data-design-theme="silver-screen"] [data-slot="select"].field-error {
  border-color: var(--error);
  background-color: color-mix(in srgb, var(--error-tint) 55%, var(--surface));
  box-shadow: inset var(--field-validation-bar-width) 0 0 0 var(--error);
}

/* ─── Textarea ─── */
/* HUI <Textarea> renders a <textarea> */
html[data-design-theme="silver-screen"] [data-slot="textarea"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--field-textarea-padding);
  min-height: var(--field-textarea-min-height);
  font-family: var(--font-sans);
  font-size: var(--field-font-size);
  color: var(--text);
  background: var(--field-bg);
  border: var(--field-border-width) solid var(--field-border-color);
  border-radius: var(--radius);
  outline: none;
  box-shadow: var(--field-shadow);
  transition: var(--field-transition);
  resize: none;
  line-height: var(--field-textarea-line-height);
}
html[data-design-theme="silver-screen"] [data-slot="textarea"]::placeholder { color: var(--text-muted); }
html[data-design-theme="silver-screen"] [data-slot="textarea"]:hover:not(:focus) { border-color: var(--border-strong); }
[data-slot="textarea"]:focus,
html[data-design-theme="silver-screen"] [data-slot="textarea"][data-focus] {
  border-color: var(--brand-blue);
  box-shadow:
    var(--field-focus-ring),
    var(--field-shadow);
}
[data-slot="textarea"][data-invalid],
html[data-design-theme="silver-screen"] [data-slot="textarea"].field-error {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error-tint) 55%, var(--surface));
  box-shadow: inset var(--field-validation-bar-width) 0 0 0 var(--error);
}

/* ─── Checkbox ─── */
/* HUI <Checkbox> — our CheckboxRadioDemo renders its own visual,
   but these rules cover any bare usage of the HUI Checkbox element */
html[data-design-theme="silver-screen"] [data-slot="checkbox"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-size);
  height: var(--control-size);
  border: var(--control-border-width) solid var(--control-border-color);
  border-radius: var(--radius);
  background: var(--surface);
  flex-shrink: 0;
  cursor: pointer;
  transition: var(--control-transition);
  box-shadow: var(--control-shadow);
}
html[data-design-theme="silver-screen"] [data-slot="checkbox"][data-checked] {
  background: var(--control-checked-color);
  border-color: var(--control-checked-color);
}
html[data-design-theme="silver-screen"] [data-slot="checkbox"][data-focus] {
  box-shadow: var(--field-focus-ring);
}

/* ─── Switch ─── */
/* HUI <Switch> — our SwitchGroup renders its own visual,
   but these rules cover any bare usage */
html[data-design-theme="silver-screen"] [data-slot="switch"] {
  display: inline-flex;
  align-items: center;
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: var(--switch-radius);
  background: var(--border);
  border: none;
  cursor: pointer;
  transition: var(--switch-transition);
  position: relative;
  flex-shrink: 0;
}
html[data-design-theme="silver-screen"] [data-slot="switch"][data-checked] {
  background: var(--control-checked-color);
}
html[data-design-theme="silver-screen"] [data-slot="switch"]::after {
  content: '';
  position: absolute;
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  border-radius: var(--switch-thumb-radius);
  background: var(--white);
  left: var(--switch-thumb-inset);
  box-shadow: var(--switch-thumb-shadow);
  transition: var(--switch-thumb-transition);
}
html[data-design-theme="silver-screen"] [data-slot="switch"][data-checked]::after { left: var(--switch-thumb-checked-pos); }
html[data-design-theme="silver-screen"] [data-slot="switch"][data-focus] {
  box-shadow: var(--field-focus-ring);
}

/* ─── RadioGroup / Radio ─── */
/* HUI <Radio> — our demo renders its own visual, these are bare fallbacks */
html[data-design-theme="silver-screen"] [data-slot="radio"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: 50%;
  border: var(--radio-border-width) solid var(--control-border-color);
  background: var(--surface);
  flex-shrink: 0;
  cursor: pointer;
  transition: var(--control-transition);
}
html[data-design-theme="silver-screen"] [data-slot="radio"][data-checked] {
  border-color: var(--control-checked-color);
  background: var(--surface);
  box-shadow: var(--radio-inner-shadow);
}
html[data-design-theme="silver-screen"] [data-slot="radio"][data-focus] {
  box-shadow: var(--field-focus-ring);
}

/* ── DIVIDERS ── (from: style-guide.vars.yaml) */
/* ═══════════════════════════════════════
   DIVIDERS & RULES
   ═══════════════════════════════════════ */

/* ─── Base reset ─── */
html[data-design-theme="silver-screen"] .hr {
  border: none;
  height: var(--hr-thick);
  width: 100%;
  display: block;
  margin: var(--space-3) 0;
  background: var(--border-strong);
}

/* ─── Semantic roles ─── */
/* hr.section — major content division, prominent */
html[data-design-theme="silver-screen"] .hr.section {
  height: var(--hr-section-height, var(--hr-heavy));
  background: var(--hr-section-color, var(--amber));
  margin: var(--hr-section-margin, var(--space-6) 0);
}
/* hr.subsection — minor division within a section */
html[data-design-theme="silver-screen"] .hr.subsection {
  height: var(--hr-subsection-height, var(--hr-thick));
  background: var(--hr-subsection-color, var(--sky));
  margin: var(--hr-subsection-margin, var(--space-4) 0);
}
/* hr.item — between list items or compact rows */
html[data-design-theme="silver-screen"] .hr.item {
  height: var(--hr-height);
  background: var(--border);
  margin: var(--space-2) 0;
}
/* hr.accent — brand-colored divider */
html[data-design-theme="silver-screen"] .hr.accent {
  height: var(--hr-accent-height, var(--hr-heavy));
  background: var(--hr-accent-color, var(--pink));
  margin: var(--hr-accent-margin, var(--space-3) 0);
}

/* ─── Modifier classes (composable with semantic roles) ─── */
/* hr.section.fade-right, hr.subsection.primary, etc. */
html[data-design-theme="silver-screen"] .hr.fade-right {
  background: linear-gradient(
    to right,
    currentColor 0%,
    color-mix(in srgb, currentColor 35%, transparent) 55%,
    transparent 100%
  );
}
html[data-design-theme="silver-screen"] .hr.fade-left {
  background: linear-gradient(
    to left,
    currentColor 0%,
    color-mix(in srgb, currentColor 35%, transparent) 55%,
    transparent 100%
  );
}
html[data-design-theme="silver-screen"] .hr.fade-both {
  background: linear-gradient(
    to right,
    transparent 0%,
    currentColor 20%,
    currentColor 80%,
    transparent 100%
  );
}
html[data-design-theme="silver-screen"] .hr.fade-center {
  background: linear-gradient(
    to right,
    transparent 0%,
    currentColor 40%,
    color-mix(in srgb, currentColor 25%, transparent) 100%
  );
}
html[data-design-theme="silver-screen"] .hr.primary { color: var(--text); }
html[data-design-theme="silver-screen"] .hr.secondary { color: var(--border-strong); }
html[data-design-theme="silver-screen"] .hr.muted { color: var(--border); }
html[data-design-theme="silver-screen"] .hr.brand { color: var(--brand-red); }
html[data-design-theme="silver-screen"] .hr.glow { filter: drop-shadow(0 0 4px currentColor); }
html[data-design-theme="silver-screen"] .vr {
  display: inline-block;
  width: var(--hr-height);
  align-self: stretch;
  min-height: 1em;
}

/* ─── Horizontal: solid ─── */
html[data-design-theme="silver-screen"] .hr-solid { background: var(--text); }
html[data-design-theme="silver-screen"] .hr-muted { background: var(--border); }
html[data-design-theme="silver-screen"] .hr-light { background: var(--border); }
html[data-design-theme="silver-screen"] .hr-thick { height: var(--hr-thick); background: var(--text); }
html[data-design-theme="silver-screen"] .hr-heavy { height: var(--hr-heavy); background: var(--text); }

/* ─── Horizontal: dashed / dotted ─── */
html[data-design-theme="silver-screen"] .hr-dashed {
  height: 0;
  border-top: var(--hr-height) dashed var(--border-strong);
}
html[data-design-theme="silver-screen"] .hr-dotted {
  height: 0;
  border-top: var(--hr-height) dotted var(--border-strong);
}
html[data-design-theme="silver-screen"] .hr-double {
  height: 0;
  border-top: var(--hr-heavy) double var(--border-strong);
}

/* ─── Horizontal: gradient fades ─── */
html[data-design-theme="silver-screen"] .hr-fade-right {
  background: linear-gradient(
    to right,
    var(--text) 0%,
    color-mix(in srgb, var(--text) 40%, transparent) 55%,
    transparent 100%
  );
}
html[data-design-theme="silver-screen"] .hr-fade-left {
  background: linear-gradient(
    to left,
    var(--text) 0%,
    color-mix(in srgb, var(--text) 40%, transparent) 55%,
    transparent 100%
  );
}
html[data-design-theme="silver-screen"] .hr-fade-both {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--text) 20%,
    var(--text) 80%,
    transparent 100%
  );
}
html[data-design-theme="silver-screen"] .hr-fade-center {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--text) 40%,
    color-mix(in srgb, var(--text) 30%, transparent) 100%
  );
}

/* ─── Horizontal: brand accent ─── */
html[data-design-theme="silver-screen"] .hr-red {
  background: var(--brand-red);
}
html[data-design-theme="silver-screen"] .hr-red-fade {
  background: linear-gradient(
    to right,
    var(--brand-red) 0%,
    color-mix(in srgb, var(--brand-red) 35%, transparent) 60%,
    transparent 100%
  );
}
html[data-design-theme="silver-screen"] .hr-red-fade-both {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--brand-red) 20%,
    var(--brand-red) 80%,
    transparent 100%
  );
}

/* ─── Horizontal: glow ─── */
html[data-design-theme="silver-screen"] .hr-glow {
  background: var(--text);
  box-shadow: 0 0 6px rgba(0,0,0,0.35), 0 0 14px rgba(0,0,0,0.15);
}
html[data-design-theme="silver-screen"] .hr-red-glow {
  background: var(--brand-red);
  box-shadow: 0 0 6px color-mix(in srgb, var(--brand-red) 55%, transparent),
              0 0 16px color-mix(in srgb, var(--brand-red) 25%, transparent);
}
html[data-design-theme="silver-screen"] .hr-glow-fade {
  background: linear-gradient(to right, var(--text) 0%, transparent 100%);
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  filter: blur(var(--hr-glow-blur));
}

/* ─── Horizontal: decorative ─── */
html[data-design-theme="silver-screen"] .hr-inset {
  height: 0;
  border-top: var(--hr-height) solid var(--border);
  border-bottom: var(--hr-height) solid var(--surface);
}
html[data-design-theme="silver-screen"] .hr-overline {
  height: var(--hr-heavy);
  background: linear-gradient(to right, var(--text) 0%, var(--text) var(--hr-overline-length), transparent var(--hr-overline-length));
}
html[data-design-theme="silver-screen"] .hr-red-overline {
  height: var(--hr-thick);
  background: linear-gradient(to right, var(--brand-red) 0%, var(--brand-red) var(--hr-overline-length), transparent var(--hr-overline-length));
}

/* ─── Vertical: solid ─── */
html[data-design-theme="silver-screen"] .vr-solid { background: var(--text); }
html[data-design-theme="silver-screen"] .vr-muted { background: var(--border); }
html[data-design-theme="silver-screen"] .vr-light { background: var(--border); }
html[data-design-theme="silver-screen"] .vr-thick { width: var(--hr-thick); background: var(--text); }

/* ─── Vertical: gradient fades ─── */
html[data-design-theme="silver-screen"] .vr-fade-down {
  background: linear-gradient(
    to bottom,
    var(--text) 0%,
    color-mix(in srgb, var(--text) 30%, transparent) 60%,
    transparent 100%
  );
}
html[data-design-theme="silver-screen"] .vr-fade-up {
  background: linear-gradient(
    to top,
    var(--text) 0%,
    color-mix(in srgb, var(--text) 30%, transparent) 60%,
    transparent 100%
  );
}
html[data-design-theme="silver-screen"] .vr-fade-both {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--text) 20%,
    var(--text) 80%,
    transparent 100%
  );
}

/* ─── Vertical: brand ─── */
html[data-design-theme="silver-screen"] .vr-red { background: var(--brand-red); }
html[data-design-theme="silver-screen"] .vr-red-fade {
  background: linear-gradient(
    to bottom,
    var(--brand-red) 0%,
    color-mix(in srgb, var(--brand-red) 30%, transparent) 70%,
    transparent 100%
  );
}

/* ── SHELLS ── (from: style-guide.shell-layouts.yaml) */
/* ═══════════════════════════════════════
   SHELL LAYOUTS — CSS Grid on .shell-grid
   ═══════════════════════════════════════ */

/* ─── Default: chrome hidden ─── */
html[data-design-theme="silver-screen"] .shell-navbar,
html[data-design-theme="silver-screen"] .shell-sidebar,
html[data-design-theme="silver-screen"] .shell-aside,
html[data-design-theme="silver-screen"] .shell-footer { display: none; }

/* ─── Grid wrapper ─── */
html[data-design-theme="silver-screen"] .shell-grid {
  min-height: 100vh;
}
html[data-design-theme="silver-screen"] body[data-shell] .shell-grid {
  display: grid;
  height: 100vh;
  grid-template-areas:
    "nav    nav    nav"
    "side   main   aside"
    "foot   foot   foot";
  grid-template-rows: var(--shell-navbar-height, 0px) 1fr var(--shell-footer-height, 0px);
  grid-template-columns: var(--shell-sidebar-width, 0px) 1fr var(--shell-aside-width, 0px);
}

/* ─── Navbar ─── */
html[data-design-theme="silver-screen"] body[data-shell] .shell-grid > .shell-navbar {
  display: flex;
  grid-area: nav;
  z-index: var(--shell-navbar-z-index);
  height: var(--shell-navbar-height);
  background: var(--shell-navbar-bg, var(--surface-inverse));
  color: var(--shell-navbar-color, var(--text-inverse));
  align-items: center;
  padding: 0 var(--space-3);
  gap: var(--space-3);
  font-size: var(--shell-navbar-font-size);
  border-bottom: var(--shell-navbar-border-width) solid color-mix(in srgb, var(--shell-navbar-color, var(--text-inverse)) 12%, transparent);
}
html[data-design-theme="silver-screen"] .shell-navbar-brand {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: var(--font-weight-bold); font-size: var(--shell-navbar-action-font-size); letter-spacing: var(--btn-letter-spacing); white-space: nowrap;
}
html[data-design-theme="silver-screen"] .shell-navbar-links {
  display: flex; align-items: center; gap: var(--shell-navbar-link-gap);
}
html[data-design-theme="silver-screen"] .shell-navbar-link {
  padding: var(--shell-navbar-link-padding); font-size: var(--shell-navbar-link-font-size); border-radius: var(--shell-navbar-link-radius); cursor: pointer;
  opacity: var(--shell-navbar-link-opacity); transition: var(--shell-navbar-link-transition);
}
html[data-design-theme="silver-screen"] .shell-navbar-link:hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
html[data-design-theme="silver-screen"] .shell-navbar-link.active { opacity: 1; font-weight: var(--shell-navbar-link-active-weight); }
html[data-design-theme="silver-screen"] .shell-navbar-actions {
  display: flex; align-items: center; gap: var(--space-1); margin-left: auto;
}
html[data-design-theme="silver-screen"] .shell-navbar-action {
  width: var(--shell-navbar-action-size); height: var(--shell-navbar-action-size); display: flex; align-items: center; justify-content: center;
  border-radius: var(--shell-navbar-action-radius); cursor: pointer; font-size: var(--shell-navbar-action-font-size);
  transition: var(--shell-navbar-action-transition);
}
html[data-design-theme="silver-screen"] .shell-navbar-action:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
html[data-design-theme="silver-screen"] .shell-navbar-dismiss {
  padding: var(--shell-navbar-dismiss-padding); font-size: var(--shell-navbar-dismiss-font-size); font-family: var(--font-mono);
  background: color-mix(in srgb, var(--shell-navbar-color, var(--text-inverse)) 15%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--shell-navbar-color, var(--text-inverse)) 20%, transparent);
  border-radius: var(--shell-navbar-dismiss-radius); cursor: pointer; color: inherit; white-space: nowrap;
  transition: var(--shell-navbar-dismiss-transition);
}
html[data-design-theme="silver-screen"] .shell-navbar-dismiss:hover { background: color-mix(in srgb, var(--shell-navbar-color, var(--text-inverse)) 25%, transparent); }

/* ─── Sidebar ─── */
html[data-design-theme="silver-screen"] body[data-shell] .shell-grid > .shell-sidebar {
  display: flex;
  grid-area: side;
  background: var(--shell-sidebar-bg, var(--surface-alt));
  color: var(--shell-sidebar-color, var(--text));
  flex-direction: column;
  overflow-y: auto;
  border-right: var(--shell-sidebar-border-width) solid color-mix(in srgb, var(--shell-sidebar-color, var(--text)) 10%, transparent);
}
html[data-design-theme="silver-screen"] .shell-sidebar-section {
  padding: var(--space-2) var(--space-3) var(--space-half);
  font-size: var(--shell-sidebar-section-font-size); font-family: var(--font-mono);
  letter-spacing: var(--shell-sidebar-section-letter-spacing); text-transform: uppercase;
  opacity: var(--shell-sidebar-section-opacity); user-select: none;
}
html[data-design-theme="silver-screen"] .shell-sidebar-item {
  display: flex; align-items: center; gap: var(--shell-sidebar-item-gap);
  padding: var(--shell-sidebar-item-padding);
  font-size: var(--shell-sidebar-item-font-size); cursor: pointer;
  transition: var(--shell-sidebar-item-transition);
}
html[data-design-theme="silver-screen"] .shell-sidebar-item:hover {
  background: color-mix(in srgb, var(--shell-sidebar-color, var(--text)) 8%, transparent);
}
html[data-design-theme="silver-screen"] .shell-sidebar-item.active {
  background: color-mix(in srgb, var(--shell-sidebar-color, var(--text)) 14%, transparent);
  font-weight: var(--shell-sidebar-item-active-weight);
}
html[data-design-theme="silver-screen"] .shell-sidebar-glyph { font-size: var(--shell-sidebar-glyph-font-size); width: var(--shell-sidebar-glyph-size); text-align: center; flex-shrink: 0; }
html[data-design-theme="silver-screen"] .shell-sidebar-divider {
  margin: var(--space-1) var(--space-3);
  border-top: var(--shell-sidebar-divider-width) solid color-mix(in srgb, var(--shell-sidebar-color, var(--text)) 10%, transparent);
}

/* ─── Aside ─── */
html[data-design-theme="silver-screen"] body[data-shell] .shell-grid > .shell-aside {
  display: flex;
  grid-area: aside;
  background: var(--shell-aside-bg, var(--surface-alt));
  color: var(--shell-aside-color, var(--text));
  flex-direction: column;
  overflow-y: auto;
  border-left: var(--shell-aside-border-width) solid color-mix(in srgb, var(--shell-aside-color, var(--text)) 10%, transparent);
}
html[data-design-theme="silver-screen"] .shell-aside-header {
  padding: var(--space-2) var(--space-3);
  font-size: var(--shell-aside-section-font-size); font-family: var(--font-mono);
  letter-spacing: var(--shell-aside-section-letter-spacing); text-transform: uppercase;
  opacity: var(--shell-aside-section-opacity); border-bottom: var(--shell-aside-row-border-width) solid color-mix(in srgb, currentColor 10%, transparent);
}
html[data-design-theme="silver-screen"] .shell-aside-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--shell-aside-row-padding);
  font-size: var(--shell-aside-row-font-size); border-bottom: var(--shell-aside-row-border-width) solid color-mix(in srgb, currentColor 6%, transparent);
}
html[data-design-theme="silver-screen"] .shell-aside-label { opacity: var(--shell-aside-meta-opacity); font-size: var(--shell-aside-meta-font-size); }
html[data-design-theme="silver-screen"] .shell-aside-value { font-family: var(--font-mono); font-size: var(--shell-aside-meta-font-size); }

/* ─── Footer ─── */
html[data-design-theme="silver-screen"] body[data-shell] .shell-grid > .shell-footer {
  display: flex;
  grid-area: foot;
  z-index: var(--shell-footer-z-index);
  height: var(--shell-footer-height);
  background: var(--shell-footer-bg, var(--surface-alt));
  color: var(--shell-footer-color, var(--text-muted));
  align-items: center;
  padding: 0 var(--space-3);
  font-size: var(--shell-footer-font-size);
  font-family: var(--font-mono);
  gap: var(--space-3);
  border-top: var(--shell-footer-border-width) solid var(--border);
}
html[data-design-theme="silver-screen"] .shell-footer-dot {
  width: var(--shell-footer-dot-size); height: var(--shell-footer-dot-size); border-radius: 50%; flex-shrink: 0;
}
html[data-design-theme="silver-screen"] .shell-footer-sep { opacity: var(--shell-footer-dot-opacity); }

/* ─── Main content area ─── */
html[data-design-theme="silver-screen"] body[data-shell] .shell-grid > .content {
  grid-area: main;
  padding-top: var(--space-4);
  min-width: 0;
  overflow-y: auto;
  container-type: normal;
}

/* ─── Per-shell vars ─── */
/* Shell: navbar-only */
html[data-design-theme="silver-screen"] body[data-shell="navbar-only"] {
  --shell-navbar-height: 56px;
  --shell-navbar-bg: var(--black);
  --shell-navbar-color: var(--white);
  --shell-footer-height: 48px;
  --shell-footer-bg: var(--gray-100);
  --shell-footer-color: var(--gray-600);
  --shell-sidebar-width: 0px;
  --shell-aside-width: 0px;
}
html[data-design-theme="silver-screen"] body[data-shell="navbar-only"] .shell-grid > .shell-sidebar { display: none; }
html[data-design-theme="silver-screen"] body[data-shell="navbar-only"] .shell-grid > .shell-aside { display: none; }

/* Shell: sidebar-left */
html[data-design-theme="silver-screen"] body[data-shell="sidebar-left"] {
  --shell-navbar-height: 56px;
  --shell-navbar-bg: var(--black);
  --shell-navbar-color: var(--white);
  --shell-sidebar-width: 240px;
  --shell-sidebar-bg: var(--gray-900);
  --shell-sidebar-color: var(--white);
  --shell-footer-height: 32px;
  --shell-footer-bg: var(--gray-100);
  --shell-footer-color: var(--gray-500);
  --shell-aside-width: 0px;
}
html[data-design-theme="silver-screen"] body[data-shell="sidebar-left"] .shell-grid > .shell-aside { display: none; }

/* Shell: sidebar-right */
html[data-design-theme="silver-screen"] body[data-shell="sidebar-right"] {
  --shell-navbar-height: 56px;
  --shell-navbar-bg: var(--black);
  --shell-navbar-color: var(--white);
  --shell-aside-width: 280px;
  --shell-aside-bg: var(--gray-50);
  --shell-aside-color: var(--gray-700);
  --shell-sidebar-width: 0px;
  --shell-footer-height: 0px;
}
html[data-design-theme="silver-screen"] body[data-shell="sidebar-right"] .shell-grid > .shell-sidebar { display: none; }
html[data-design-theme="silver-screen"] body[data-shell="sidebar-right"] .shell-grid > .shell-footer { display: none; }

/* Shell: two-sidebar */
html[data-design-theme="silver-screen"] body[data-shell="two-sidebar"] {
  --shell-navbar-height: 40px;
  --shell-navbar-bg: var(--gray-900);
  --shell-navbar-color: var(--white);
  --shell-sidebar-width: 220px;
  --shell-sidebar-bg: var(--gray-800);
  --shell-sidebar-color: var(--gray-300);
  --shell-aside-width: 260px;
  --shell-aside-bg: var(--gray-800);
  --shell-aside-color: var(--gray-300);
  --shell-footer-height: 0px;
}
html[data-design-theme="silver-screen"] body[data-shell="two-sidebar"] .shell-grid > .shell-footer { display: none; }

/* Shell: full-bleed */
html[data-design-theme="silver-screen"] body[data-shell="full-bleed"] {
  --shell-navbar-height: 48px;
  --shell-navbar-bg: var(--black);
  --shell-navbar-color: var(--white);
  --shell-sidebar-width: 0px;
  --shell-aside-width: 0px;
  --shell-footer-height: 0px;
}
html[data-design-theme="silver-screen"] body[data-shell="full-bleed"] .shell-grid > .shell-sidebar { display: none; }
html[data-design-theme="silver-screen"] body[data-shell="full-bleed"] .shell-grid > .shell-aside { display: none; }
html[data-design-theme="silver-screen"] body[data-shell="full-bleed"] .shell-grid > .shell-footer { display: none; }

/* ═══════════════════════════════════════
   SCREEN FRAME
   ═══════════════════════════════════════ */
html[data-design-theme="silver-screen"] .screen-frame {
  border-radius: var(--screen-frame-radius);
  overflow: hidden;
  box-shadow: var(--screen-frame-shadow);
  border: var(--screen-frame-border-width) solid var(--border-strong);
  background: var(--surface);
}
html[data-design-theme="silver-screen"] .screen-titlebar {
  display: flex;
  align-items: center;
  gap: var(--screen-titlebar-gap);
  padding: var(--screen-titlebar-padding);
  background: var(--surface-alt);
  border-bottom: var(--border-thin) solid var(--border);
}
html[data-design-theme="silver-screen"] .screen-dots {
  display: flex;
  gap: var(--screen-dots-gap);
  flex-shrink: 0;
}
html[data-design-theme="silver-screen"] .screen-dot {
  width: var(--screen-dot-size);
  height: var(--screen-dot-size);
  border-radius: 50%;
}
html[data-design-theme="silver-screen"] .screen-dot:nth-child(1) { background: var(--screen-dot-close); }
html[data-design-theme="silver-screen"] .screen-dot:nth-child(2) { background: var(--screen-dot-minimize); }
html[data-design-theme="silver-screen"] .screen-dot:nth-child(3) { background: var(--screen-dot-maximize); }
html[data-design-theme="silver-screen"] .screen-url {
  flex: 1;
  text-align: center;
  font-size: var(--screen-titlebar-font-size);
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--surface);
  border: var(--screen-url-border-width) solid var(--border-strong);
  border-radius: var(--screen-url-radius);
  padding: var(--screen-url-padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: var(--screen-url-max-width);
  margin: 0 auto;
}
html[data-design-theme="silver-screen"] .screen-body {
  overflow: hidden;
}

/* ── HUI ── (from: style-guide.vars.yaml) */
/* ═══════════════════════════════════════
   HEADLESS UI — INTERACTIVE COMPONENTS
   All values driven by --hui-* vars (see style-guide.vars.yaml)
   Namespace: .hui.X (components), .sub-element (children)
   ═══════════════════════════════════════ */

/* ─── Tabs ─── */
html[data-design-theme="silver-screen"] .hui.tab-list {
  display: flex;
  border-bottom: var(--hui-tab-list-border-width) solid var(--hui-tab-list-border);
}
html[data-design-theme="silver-screen"] .hui.tab {
  padding: var(--hui-tab-padding-y) var(--hui-tab-padding-x);
  font-family: var(--font-sans);
  font-size: var(--hui-tab-font-size);
  font-weight: var(--hui-tab-font-weight);
  color: var(--hui-tab-color);
  border: none;
  border-bottom: var(--hui-tab-indicator-width) solid transparent;
  margin-bottom: var(--hui-tab-indicator-offset);
  background: transparent;
  cursor: pointer;
  outline: none;
  transition: var(--hui-tab-transition);
  white-space: nowrap;
}
html[data-design-theme="silver-screen"] .hui.tab[data-selected] {
  color: var(--hui-tab-color-selected);
  border-bottom-color: var(--hui-tab-border-selected);
  font-weight: var(--hui-tab-font-weight-selected);
}
html[data-design-theme="silver-screen"] .hui.tab[data-hover]:not([data-selected]) { color: var(--hui-tab-color-hover); }
html[data-design-theme="silver-screen"] .hui.tab[data-focus] {
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: inset 0 0 0 var(--hui-focus-ring-width) var(--hui-focus-ring-color);
}
html[data-design-theme="silver-screen"] .hui.tab-panel {
  padding: var(--space-3) 0;
  font-size: var(--font-size-sm);
  color: var(--hui-tab-panel-color);
  outline: none;
}

/* ─── Menu (Dropdown) ─── */
html[data-design-theme="silver-screen"] .hui.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hui-trigger-gap);
  padding: var(--hui-trigger-padding-y) var(--hui-trigger-padding-x);
  font-family: var(--font-sans);
  font-size: var(--hui-trigger-font-size);
  font-weight: var(--hui-trigger-font-weight);
  color: var(--hui-trigger-color);
  background: var(--hui-trigger-bg);
  border: var(--hui-trigger-border-width) solid var(--hui-trigger-border);
  border-radius: var(--radius);
  cursor: pointer;
  outline: none;
  transition: var(--hui-trigger-transition);
}
.hui.menu-btn[data-open],
html[data-design-theme="silver-screen"] .hui.menu-btn[data-hover] { border-color: var(--hui-trigger-border-hover); }
html[data-design-theme="silver-screen"] .hui.menu-btn[data-focus] {
  box-shadow: 0 0 0 var(--hui-focus-ring-width) var(--hui-focus-ring-color);
  border-color: var(--hui-field-focus-border);
}
html[data-design-theme="silver-screen"] .hui.menu-items {
  position: absolute;
  z-index: var(--hui-panel-z-index);
  min-width: var(--hui-menu-min-width);
  background: var(--hui-panel-bg);
  border: var(--hui-panel-border-width) solid var(--hui-panel-border);
  border-radius: var(--radius);
  box-shadow: var(--hui-panel-shadow);
  padding: var(--hui-panel-padding);
  outline: none;
  margin-top: var(--hui-panel-margin-top);
}
html[data-design-theme="silver-screen"] .hui.menu-item {
  display: flex;
  align-items: center;
  gap: var(--hui-panel-item-gap);
  padding: var(--hui-panel-item-padding-y) var(--hui-panel-item-padding-x);
  font-size: var(--hui-panel-item-font-size);
  color: var(--hui-panel-item-color);
  border-radius: calc(var(--radius) - var(--hui-panel-item-radius-inset));
  cursor: pointer;
  outline: none;
  user-select: none;
  transition: var(--hui-panel-item-transition);
}
html[data-design-theme="silver-screen"] .hui.menu-item[data-active] {
  background: var(--hui-panel-item-active-bg);
  color: var(--hui-panel-item-active-color);
}
html[data-design-theme="silver-screen"] .hui.menu-item[data-disabled] { opacity: var(--hui-panel-item-disabled-opacity); cursor: default; }
html[data-design-theme="silver-screen"] .hui.menu-sep {
  height: var(--hui-panel-sep-height);
  background: var(--hui-panel-sep-color);
  margin: var(--hui-panel-sep-margin-y) 0;
}

/* ─── Disclosure ─── */
html[data-design-theme="silver-screen"] .hui.disclosure-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--hui-disclosure-padding-y) var(--hui-disclosure-padding-x);
  font-family: var(--font-sans);
  font-size: var(--hui-disclosure-font-size);
  font-weight: var(--hui-disclosure-font-weight);
  color: var(--hui-disclosure-color);
  background: var(--hui-disclosure-bg);
  border: var(--hui-disclosure-border-width) solid var(--hui-disclosure-border);
  border-radius: var(--radius);
  cursor: pointer;
  outline: none;
  transition: var(--hui-disclosure-transition);
  text-align: left;
}
html[data-design-theme="silver-screen"] .hui.disclosure-btn[data-hover] { background: var(--hui-disclosure-bg-hover); }
html[data-design-theme="silver-screen"] .hui.disclosure-btn[data-focus] {
  box-shadow: 0 0 0 var(--hui-focus-ring-width) var(--hui-focus-ring-color);
  border-color: var(--hui-field-focus-border);
}
html[data-design-theme="silver-screen"] .hui.disclosure-btn[data-open] {
  background: var(--hui-disclosure-bg-hover);
  border-radius: var(--radius) var(--radius) 0 0;
}
html[data-design-theme="silver-screen"] .disclosure-chevron {
  width: var(--hui-disclosure-chevron-size);
  height: var(--hui-disclosure-chevron-size);
  color: var(--hui-disclosure-chevron-color);
  transition: var(--hui-disclosure-chevron-transition);
  flex-shrink: 0;
}
html[data-design-theme="silver-screen"] .hui.disclosure-btn[data-open] .disclosure-chevron { transform: rotate(180deg); }
html[data-design-theme="silver-screen"] .hui.disclosure-panel {
  padding: var(--hui-disclosure-padding-y) var(--hui-disclosure-padding-x);
  font-size: var(--hui-disclosure-font-size);
  color: var(--hui-disclosure-panel-color);
  background: var(--hui-disclosure-panel-bg);
  border: var(--hui-disclosure-border-width) solid var(--hui-disclosure-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  line-height: var(--hui-disclosure-panel-line-height);
}

/* ─── Listbox ─── */
html[data-design-theme="silver-screen"] .hui.listbox-wrap { position: relative; }
html[data-design-theme="silver-screen"] .hui.listbox-btn {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: var(--hui-field-height);
  padding: 0 var(--hui-field-icon-area) 0 var(--hui-field-padding-x);
  font-family: var(--font-sans);
  font-size: var(--hui-field-font-size);
  color: var(--hui-field-color);
  background: var(--hui-field-bg);
  border: var(--hui-field-border-width) solid var(--hui-field-border);
  border-radius: var(--radius);
  cursor: pointer;
  outline: none;
  box-shadow: var(--hui-field-shadow);
  transition: var(--hui-field-transition);
  text-align: left;
  box-sizing: border-box;
}
html[data-design-theme="silver-screen"] .hui.listbox-btn::after {
  content: "";
  position: absolute;
  right: var(--hui-field-chevron-offset);
  top: 50%;
  width: var(--hui-field-chevron-size);
  height: var(--hui-field-chevron-size);
  border-right: var(--hui-field-chevron-border-width) solid var(--hui-field-chevron-color);
  border-bottom: var(--hui-field-chevron-border-width) solid var(--hui-field-chevron-color);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}
html[data-design-theme="silver-screen"] .hui.listbox-btn[data-hover]:not([data-open]) { border-color: var(--hui-field-border-hover); }
html[data-design-theme="silver-screen"] .hui.listbox-btn[data-open] {
  border-color: var(--hui-field-focus-border);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) var(--hui-focus-ring-color), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.listbox-options {
  position: absolute;
  z-index: var(--hui-panel-z-index);
  width: 100%;
  background: var(--hui-panel-bg);
  border: var(--hui-panel-border-width) solid var(--hui-panel-border);
  border-radius: var(--radius);
  box-shadow: var(--hui-panel-shadow);
  padding: var(--hui-panel-padding);
  outline: none;
  margin-top: var(--hui-panel-margin-top);
  max-height: var(--hui-panel-max-height);
  overflow-y: auto;
}
html[data-design-theme="silver-screen"] .hui.listbox-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--hui-panel-item-padding-y) var(--hui-panel-item-padding-x);
  font-size: var(--hui-panel-item-font-size);
  color: var(--hui-panel-item-color);
  border-radius: calc(var(--radius) - var(--hui-panel-item-radius-inset));
  cursor: pointer;
  outline: none;
  user-select: none;
}
html[data-design-theme="silver-screen"] .hui.listbox-option[data-active] {
  background: var(--hui-panel-item-active-bg);
  color: var(--hui-panel-item-active-color);
}
html[data-design-theme="silver-screen"] .hui.listbox-option[data-selected] { font-weight: var(--hui-panel-item-selected-weight); }

/* ─── Combobox ─── */
html[data-design-theme="silver-screen"] .hui.combo-wrap { position: relative; }
html[data-design-theme="silver-screen"] .hui.combo-input {
  display: block;
  width: 100%;
  height: var(--hui-field-height);
  padding: 0 var(--hui-combo-icon-area) 0 var(--hui-field-padding-x);
  font-family: var(--font-sans);
  font-size: var(--hui-field-font-size);
  color: var(--hui-field-color);
  background: var(--hui-field-bg);
  border: var(--hui-field-border-width) solid var(--hui-field-border);
  border-radius: var(--radius);
  outline: none;
  box-shadow: var(--hui-field-shadow);
  transition: var(--hui-field-transition);
  box-sizing: border-box;
}
html[data-design-theme="silver-screen"] .hui.combo-input::placeholder { color: var(--hui-combo-placeholder-color); }
html[data-design-theme="silver-screen"] .hui.combo-input:focus {
  border-color: var(--hui-field-focus-border);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) var(--hui-focus-ring-color), var(--hui-field-shadow);
}
html[data-design-theme="silver-screen"] .hui.combo-btn {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: var(--hui-combo-icon-area);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--hui-combo-btn-color);
  outline: none;
}
html[data-design-theme="silver-screen"] .hui.combo-options {
  position: absolute;
  z-index: var(--hui-panel-z-index);
  width: 100%;
  background: var(--hui-panel-bg);
  border: var(--hui-panel-border-width) solid var(--hui-panel-border);
  border-radius: var(--radius);
  box-shadow: var(--hui-panel-shadow);
  padding: var(--hui-panel-padding);
  outline: none;
  margin-top: var(--hui-panel-margin-top);
  max-height: var(--hui-panel-max-height);
  overflow-y: auto;
}
html[data-design-theme="silver-screen"] .hui.combo-option {
  padding: var(--hui-panel-item-padding-y) var(--hui-panel-item-padding-x);
  font-size: var(--hui-panel-item-font-size);
  color: var(--hui-panel-item-color);
  border-radius: calc(var(--radius) - var(--hui-panel-item-radius-inset));
  cursor: pointer;
  outline: none;
  user-select: none;
}
html[data-design-theme="silver-screen"] .hui.combo-option[data-active] {
  background: var(--hui-panel-item-active-bg);
  color: var(--hui-panel-item-active-color);
}
html[data-design-theme="silver-screen"] .hui.combo-option[data-selected] { font-weight: var(--hui-panel-item-selected-weight); }

/* ─── Popover ─── */
html[data-design-theme="silver-screen"] .hui.popover-wrap { position: relative; display: inline-block; }
html[data-design-theme="silver-screen"] .hui.popover-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hui-trigger-gap);
  padding: var(--hui-trigger-padding-y) var(--hui-trigger-padding-x);
  font-family: var(--font-sans);
  font-size: var(--hui-trigger-font-size);
  font-weight: var(--hui-trigger-font-weight);
  color: var(--hui-trigger-color);
  background: var(--hui-trigger-bg);
  border: var(--hui-trigger-border-width) solid var(--hui-trigger-border);
  border-radius: var(--radius);
  cursor: pointer;
  outline: none;
  transition: var(--hui-trigger-transition);
}
html[data-design-theme="silver-screen"] .hui.popover-btn[data-hover] { border-color: var(--hui-trigger-border-hover); }
html[data-design-theme="silver-screen"] .hui.popover-btn[data-open] {
  border-color: var(--hui-field-focus-border);
  box-shadow: 0 0 0 var(--hui-focus-ring-width) var(--hui-focus-ring-color);
}
html[data-design-theme="silver-screen"] .hui.popover-panel {
  position: absolute;
  z-index: var(--hui-panel-z-index);
  background: var(--hui-panel-bg);
  border: var(--hui-panel-border-width) solid var(--hui-panel-border);
  border-radius: var(--radius);
  box-shadow: var(--hui-panel-shadow);
  padding: var(--hui-popover-padding);
  min-width: var(--hui-popover-min-width);
  margin-top: var(--hui-panel-margin-top);
}

/* ─── Dialog ─── */
html[data-design-theme="silver-screen"] .hui.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: var(--hui-dialog-backdrop);
  z-index: var(--hui-dialog-backdrop-z-index);
}
html[data-design-theme="silver-screen"] .hui.dialog-positioner {
  position: fixed;
  inset: 0;
  z-index: var(--hui-dialog-z-index);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hui-dialog-positioner-padding);
}
html[data-design-theme="silver-screen"] .hui.dialog-panel {
  background: var(--hui-dialog-bg);
  border-radius: var(--radius);
  box-shadow: var(--hui-dialog-shadow);
  padding: var(--hui-dialog-padding);
  max-width: var(--hui-dialog-max-width);
  width: 100%;
}
html[data-design-theme="silver-screen"] .hui.dialog-title {
  font-size: var(--font-size-md);
  font-weight: var(--hui-dialog-title-weight);
  color: var(--hui-dialog-title-color);
  margin-bottom: var(--space-2);
}
html[data-design-theme="silver-screen"] .hui.dialog-body {
  font-size: var(--font-size-sm);
  color: var(--hui-dialog-body-color);
  line-height: var(--hui-dialog-body-line-height);
  margin-bottom: var(--space-4);
}
html[data-design-theme="silver-screen"] .hui.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ─── Checkbox ─── */
html[data-design-theme="silver-screen"] .hui.checkbox-wrap {
  display: flex;
  align-items: center;
  gap: var(--hui-control-gap);
  cursor: pointer;
  user-select: none;
}
html[data-design-theme="silver-screen"] .checkbox-visual {
  width: var(--hui-control-size);
  height: var(--hui-control-size);
  flex-shrink: 0;
  border-radius: var(--hui-checkbox-radius);
  border: var(--hui-control-border-width) solid var(--hui-control-border);
  background: var(--hui-control-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--hui-control-transition);
  box-shadow: var(--hui-control-shadow);
}
html[data-design-theme="silver-screen"] .hui.checkbox-wrap[data-checked] .checkbox-visual {
  background: var(--hui-control-color);
  border-color: var(--hui-control-color);
  box-shadow: none;
}
html[data-design-theme="silver-screen"] .checkbox-label {
  font-size: var(--font-size-sm);
  color: var(--hui-control-label-color);
}

/* ─── Switch ─── */
html[data-design-theme="silver-screen"] .hui.switch-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hui-switch-gap);
  cursor: pointer;
}
html[data-design-theme="silver-screen"] .switch-label {
  font-size: var(--font-size-sm);
  color: var(--hui-control-label-color);
  user-select: none;
}
html[data-design-theme="silver-screen"] .switch-track {
  width: var(--hui-switch-track-width);
  height: var(--hui-switch-track-height);
  border-radius: var(--hui-switch-track-radius);
  flex-shrink: 0;
  background: var(--hui-switch-track-off-bg);
  position: relative;
  transition: var(--hui-switch-track-transition);
}
html[data-design-theme="silver-screen"] .hui.switch-wrap[data-checked] .switch-track {
  background: var(--hui-switch-track-on-bg);
}
html[data-design-theme="silver-screen"] .switch-thumb {
  width: var(--hui-switch-thumb-size);
  height: var(--hui-switch-thumb-size);
  border-radius: var(--hui-switch-thumb-radius);
  background: var(--hui-switch-thumb-bg);
  position: absolute;
  top: var(--hui-switch-thumb-inset);
  left: var(--hui-switch-thumb-inset);
  box-shadow: var(--hui-switch-thumb-shadow);
  transition: var(--hui-switch-thumb-transition);
}
html[data-design-theme="silver-screen"] .hui.switch-wrap[data-checked] .switch-thumb {
  left: calc(var(--hui-switch-track-width) - var(--hui-switch-thumb-size) - var(--hui-switch-thumb-inset));
}

/* ─── Radio ─── */
html[data-design-theme="silver-screen"] .hui.radio-option {
  display: flex;
  align-items: center;
  gap: var(--hui-control-gap);
  cursor: pointer;
  padding: var(--hui-radio-option-padding-y) var(--hui-radio-option-padding-x);
  border: var(--hui-radio-border-width) solid var(--hui-radio-option-border);
  background: var(--hui-control-bg);
  transition: var(--hui-radio-transition);
  user-select: none;
}
html[data-design-theme="silver-screen"] .hui.radio-option[data-checked] {
  border-color: var(--hui-radio-option-border-active);
  background: var(--hui-radio-option-bg-active);
}
html[data-design-theme="silver-screen"] .radio-dot {
  width: var(--hui-radio-dot-size);
  height: var(--hui-radio-dot-size);
  border-radius: var(--hui-radio-dot-radius);
  flex-shrink: 0;
  border: var(--hui-control-border-width) solid var(--hui-control-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hui-control-bg);
  transition: var(--hui-control-transition);
}
html[data-design-theme="silver-screen"] .hui.radio-option[data-checked] .radio-dot {
  border-color: var(--hui-control-color);
}
html[data-design-theme="silver-screen"] .radio-dot-inner {
  display: none;
  width: var(--hui-radio-dot-inner-size);
  height: var(--hui-radio-dot-inner-size);
  border-radius: var(--hui-radio-dot-inner-radius);
  background: var(--hui-control-color);
}
html[data-design-theme="silver-screen"] .hui.radio-option[data-checked] .radio-dot-inner {
  display: block;
}
html[data-design-theme="silver-screen"] .radio-label {
  font-size: var(--font-size-sm);
  color: var(--hui-control-label-color);
}

/* ─── Showcase grid ─── */
html[data-design-theme="silver-screen"] .hui.showcase {
  border-radius: var(--radius);
  border: var(--hui-showcase-border-width) solid var(--hui-showcase-border);
  border-top: var(--hui-showcase-accent-width) solid var(--hui-showcase-accent);
  background: var(--hui-showcase-bg);
}
html[data-design-theme="silver-screen"] .hui.showcase-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hui-showcase-grid-gap);
}
html[data-design-theme="silver-screen"] .hui.showcase-grid > .hui.showcase-cell {
  flex: 1 1 280px;
  max-width: 100%;
}
html[data-design-theme="silver-screen"] .hui.showcase-cell {
  padding: var(--hui-showcase-cell-padding);
  display: flex;
  flex-direction: column;
  min-height: var(--hui-showcase-cell-min-height);
  background: var(--hui-showcase-cell-bg);
  overflow: visible;
}
html[data-design-theme="silver-screen"] .showcase-cell-name {
  font-family: var(--font-mono);
  font-size: var(--hui-showcase-label-font-size);
  font-weight: var(--hui-showcase-label-weight);
  letter-spacing: var(--hui-showcase-label-letter-spacing);
  text-transform: uppercase;
  color: var(--hui-showcase-label-color);
  padding-bottom: var(--hui-showcase-label-padding-bottom);
  border-bottom: var(--hui-showcase-label-border-width) solid var(--hui-showcase-cell-border);
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}
html[data-design-theme="silver-screen"] .showcase-cell-content { flex: 1; overflow: visible; }


/* ── UTILITIES ── (from: style-guide.vars.yaml) */
html[data-design-theme="silver-screen"] .text-danger {
  color: var(--semantic-danger-color);
}
html[data-design-theme="silver-screen"] .text-warning {
  color: var(--semantic-warning-color);
}
html[data-design-theme="silver-screen"] .text-success {
  color: var(--semantic-success-color);
}
html[data-design-theme="silver-screen"] .text-info {
  color: var(--semantic-info-color);
}
html[data-design-theme="silver-screen"] .text-primary {
  color: var(--semantic-primary-color);
}
html[data-design-theme="silver-screen"] .text-brand {
  color: var(--semantic-brand-color);
}

/* ─── Color & Background Utilities ─── */

html[data-design-theme="silver-screen"] .color-white { color: var(--white); }
html[data-design-theme="silver-screen"] .bg-white { background: var(--white); }
html[data-design-theme="silver-screen"] .text-on-white { color: var(--black); }
html[data-design-theme="silver-screen"] .border-white { border-color: var(--white); }
html[data-design-theme="silver-screen"] .ring-white { --ring-color: var(--white); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-white { outline-color: var(--white); }
html[data-design-theme="silver-screen"] .accent-white { accent-color: var(--white); }
html[data-design-theme="silver-screen"] .color-off-white { color: var(--off-white); }
html[data-design-theme="silver-screen"] .bg-off-white { background: var(--off-white); }
html[data-design-theme="silver-screen"] .text-on-off-white { color: var(--black); }
html[data-design-theme="silver-screen"] .border-off-white { border-color: var(--off-white); }
html[data-design-theme="silver-screen"] .ring-off-white { --ring-color: var(--off-white); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-off-white { outline-color: var(--off-white); }
html[data-design-theme="silver-screen"] .accent-off-white { accent-color: var(--off-white); }
html[data-design-theme="silver-screen"] .color-gray-50 { color: var(--gray-50); }
html[data-design-theme="silver-screen"] .bg-gray-50 { background: var(--gray-50); }
html[data-design-theme="silver-screen"] .text-on-gray-50 { color: var(--black); }
html[data-design-theme="silver-screen"] .border-gray-50 { border-color: var(--gray-50); }
html[data-design-theme="silver-screen"] .ring-gray-50 { --ring-color: var(--gray-50); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-gray-50 { outline-color: var(--gray-50); }
html[data-design-theme="silver-screen"] .accent-gray-50 { accent-color: var(--gray-50); }
html[data-design-theme="silver-screen"] .color-gray-100 { color: var(--gray-100); }
html[data-design-theme="silver-screen"] .bg-gray-100 { background: var(--gray-100); }
html[data-design-theme="silver-screen"] .text-on-gray-100 { color: var(--black); }
html[data-design-theme="silver-screen"] .border-gray-100 { border-color: var(--gray-100); }
html[data-design-theme="silver-screen"] .ring-gray-100 { --ring-color: var(--gray-100); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-gray-100 { outline-color: var(--gray-100); }
html[data-design-theme="silver-screen"] .accent-gray-100 { accent-color: var(--gray-100); }
html[data-design-theme="silver-screen"] .color-gray-200 { color: var(--gray-200); }
html[data-design-theme="silver-screen"] .bg-gray-200 { background: var(--gray-200); }
html[data-design-theme="silver-screen"] .text-on-gray-200 { color: var(--black); }
html[data-design-theme="silver-screen"] .border-gray-200 { border-color: var(--gray-200); }
html[data-design-theme="silver-screen"] .ring-gray-200 { --ring-color: var(--gray-200); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-gray-200 { outline-color: var(--gray-200); }
html[data-design-theme="silver-screen"] .accent-gray-200 { accent-color: var(--gray-200); }
html[data-design-theme="silver-screen"] .color-gray-300 { color: var(--gray-300); }
html[data-design-theme="silver-screen"] .bg-gray-300 { background: var(--gray-300); }
html[data-design-theme="silver-screen"] .text-on-gray-300 { color: var(--black); }
html[data-design-theme="silver-screen"] .border-gray-300 { border-color: var(--gray-300); }
html[data-design-theme="silver-screen"] .ring-gray-300 { --ring-color: var(--gray-300); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-gray-300 { outline-color: var(--gray-300); }
html[data-design-theme="silver-screen"] .accent-gray-300 { accent-color: var(--gray-300); }
html[data-design-theme="silver-screen"] .color-gray-400 { color: var(--gray-400); }
html[data-design-theme="silver-screen"] .bg-gray-400 { background: var(--gray-400); }
html[data-design-theme="silver-screen"] .text-on-gray-400 { color: var(--black); }
html[data-design-theme="silver-screen"] .border-gray-400 { border-color: var(--gray-400); }
html[data-design-theme="silver-screen"] .ring-gray-400 { --ring-color: var(--gray-400); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-gray-400 { outline-color: var(--gray-400); }
html[data-design-theme="silver-screen"] .accent-gray-400 { accent-color: var(--gray-400); }
html[data-design-theme="silver-screen"] .color-gray-500 { color: var(--gray-500); }
html[data-design-theme="silver-screen"] .bg-gray-500 { background: var(--gray-500); }
html[data-design-theme="silver-screen"] .text-on-gray-500 { color: var(--white); }
html[data-design-theme="silver-screen"] .border-gray-500 { border-color: var(--gray-500); }
html[data-design-theme="silver-screen"] .ring-gray-500 { --ring-color: var(--gray-500); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-gray-500 { outline-color: var(--gray-500); }
html[data-design-theme="silver-screen"] .accent-gray-500 { accent-color: var(--gray-500); }
html[data-design-theme="silver-screen"] .color-gray-600 { color: var(--gray-600); }
html[data-design-theme="silver-screen"] .bg-gray-600 { background: var(--gray-600); }
html[data-design-theme="silver-screen"] .text-on-gray-600 { color: var(--white); }
html[data-design-theme="silver-screen"] .border-gray-600 { border-color: var(--gray-600); }
html[data-design-theme="silver-screen"] .ring-gray-600 { --ring-color: var(--gray-600); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-gray-600 { outline-color: var(--gray-600); }
html[data-design-theme="silver-screen"] .accent-gray-600 { accent-color: var(--gray-600); }
html[data-design-theme="silver-screen"] .color-gray-700 { color: var(--gray-700); }
html[data-design-theme="silver-screen"] .bg-gray-700 { background: var(--gray-700); }
html[data-design-theme="silver-screen"] .text-on-gray-700 { color: var(--white); }
html[data-design-theme="silver-screen"] .border-gray-700 { border-color: var(--gray-700); }
html[data-design-theme="silver-screen"] .ring-gray-700 { --ring-color: var(--gray-700); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-gray-700 { outline-color: var(--gray-700); }
html[data-design-theme="silver-screen"] .accent-gray-700 { accent-color: var(--gray-700); }
html[data-design-theme="silver-screen"] .color-gray-800 { color: var(--gray-800); }
html[data-design-theme="silver-screen"] .bg-gray-800 { background: var(--gray-800); }
html[data-design-theme="silver-screen"] .text-on-gray-800 { color: var(--white); }
html[data-design-theme="silver-screen"] .border-gray-800 { border-color: var(--gray-800); }
html[data-design-theme="silver-screen"] .ring-gray-800 { --ring-color: var(--gray-800); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-gray-800 { outline-color: var(--gray-800); }
html[data-design-theme="silver-screen"] .accent-gray-800 { accent-color: var(--gray-800); }
html[data-design-theme="silver-screen"] .color-gray-900 { color: var(--gray-900); }
html[data-design-theme="silver-screen"] .bg-gray-900 { background: var(--gray-900); }
html[data-design-theme="silver-screen"] .text-on-gray-900 { color: var(--white); }
html[data-design-theme="silver-screen"] .border-gray-900 { border-color: var(--gray-900); }
html[data-design-theme="silver-screen"] .ring-gray-900 { --ring-color: var(--gray-900); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-gray-900 { outline-color: var(--gray-900); }
html[data-design-theme="silver-screen"] .accent-gray-900 { accent-color: var(--gray-900); }
html[data-design-theme="silver-screen"] .color-black { color: var(--black); }
html[data-design-theme="silver-screen"] .bg-black { background: var(--black); }
html[data-design-theme="silver-screen"] .text-on-black { color: var(--white); }
html[data-design-theme="silver-screen"] .border-black { border-color: var(--black); }
html[data-design-theme="silver-screen"] .ring-black { --ring-color: var(--black); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-black { outline-color: var(--black); }
html[data-design-theme="silver-screen"] .accent-black { accent-color: var(--black); }
html[data-design-theme="silver-screen"] .color-red { color: var(--red); }
html[data-design-theme="silver-screen"] .bg-red { background: var(--red); }
html[data-design-theme="silver-screen"] .text-on-red { color: var(--white); }
html[data-design-theme="silver-screen"] .border-red { border-color: var(--red); }
html[data-design-theme="silver-screen"] .ring-red { --ring-color: var(--red); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-red { outline-color: var(--red); }
html[data-design-theme="silver-screen"] .accent-red { accent-color: var(--red); }
html[data-design-theme="silver-screen"] .color-red-light { color: var(--red-light); }
html[data-design-theme="silver-screen"] .bg-red-light { background: var(--red-light); }
html[data-design-theme="silver-screen"] .text-on-red-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-red-light { border-color: var(--red-light); }
html[data-design-theme="silver-screen"] .ring-red-light { --ring-color: var(--red-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-red-light { outline-color: var(--red-light); }
html[data-design-theme="silver-screen"] .accent-red-light { accent-color: var(--red-light); }
html[data-design-theme="silver-screen"] .color-red-mid { color: var(--red-mid); }
html[data-design-theme="silver-screen"] .bg-red-mid { background: var(--red-mid); }
html[data-design-theme="silver-screen"] .text-on-red-mid { color: var(--white); }
html[data-design-theme="silver-screen"] .border-red-mid { border-color: var(--red-mid); }
html[data-design-theme="silver-screen"] .ring-red-mid { --ring-color: var(--red-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-red-mid { outline-color: var(--red-mid); }
html[data-design-theme="silver-screen"] .accent-red-mid { accent-color: var(--red-mid); }
html[data-design-theme="silver-screen"] .color-blue { color: var(--blue); }
html[data-design-theme="silver-screen"] .bg-blue { background: var(--blue); }
html[data-design-theme="silver-screen"] .text-on-blue { color: var(--white); }
html[data-design-theme="silver-screen"] .border-blue { border-color: var(--blue); }
html[data-design-theme="silver-screen"] .ring-blue { --ring-color: var(--blue); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-blue { outline-color: var(--blue); }
html[data-design-theme="silver-screen"] .accent-blue { accent-color: var(--blue); }
html[data-design-theme="silver-screen"] .color-blue-light { color: var(--blue-light); }
html[data-design-theme="silver-screen"] .bg-blue-light { background: var(--blue-light); }
html[data-design-theme="silver-screen"] .text-on-blue-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-blue-light { border-color: var(--blue-light); }
html[data-design-theme="silver-screen"] .ring-blue-light { --ring-color: var(--blue-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-blue-light { outline-color: var(--blue-light); }
html[data-design-theme="silver-screen"] .accent-blue-light { accent-color: var(--blue-light); }
html[data-design-theme="silver-screen"] .color-blue-mid { color: var(--blue-mid); }
html[data-design-theme="silver-screen"] .bg-blue-mid { background: var(--blue-mid); }
html[data-design-theme="silver-screen"] .text-on-blue-mid { color: var(--white); }
html[data-design-theme="silver-screen"] .border-blue-mid { border-color: var(--blue-mid); }
html[data-design-theme="silver-screen"] .ring-blue-mid { --ring-color: var(--blue-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-blue-mid { outline-color: var(--blue-mid); }
html[data-design-theme="silver-screen"] .accent-blue-mid { accent-color: var(--blue-mid); }
html[data-design-theme="silver-screen"] .color-yellow { color: var(--yellow); }
html[data-design-theme="silver-screen"] .bg-yellow { background: var(--yellow); }
html[data-design-theme="silver-screen"] .text-on-yellow { color: var(--black); }
html[data-design-theme="silver-screen"] .border-yellow { border-color: var(--yellow); }
html[data-design-theme="silver-screen"] .ring-yellow { --ring-color: var(--yellow); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-yellow { outline-color: var(--yellow); }
html[data-design-theme="silver-screen"] .accent-yellow { accent-color: var(--yellow); }
html[data-design-theme="silver-screen"] .color-yellow-light { color: var(--yellow-light); }
html[data-design-theme="silver-screen"] .bg-yellow-light { background: var(--yellow-light); }
html[data-design-theme="silver-screen"] .text-on-yellow-light { color: var(--black); }
html[data-design-theme="silver-screen"] .border-yellow-light { border-color: var(--yellow-light); }
html[data-design-theme="silver-screen"] .ring-yellow-light { --ring-color: var(--yellow-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-yellow-light { outline-color: var(--yellow-light); }
html[data-design-theme="silver-screen"] .accent-yellow-light { accent-color: var(--yellow-light); }
html[data-design-theme="silver-screen"] .color-yellow-mid { color: var(--yellow-mid); }
html[data-design-theme="silver-screen"] .bg-yellow-mid { background: var(--yellow-mid); }
html[data-design-theme="silver-screen"] .text-on-yellow-mid { color: var(--black); }
html[data-design-theme="silver-screen"] .border-yellow-mid { border-color: var(--yellow-mid); }
html[data-design-theme="silver-screen"] .ring-yellow-mid { --ring-color: var(--yellow-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-yellow-mid { outline-color: var(--yellow-mid); }
html[data-design-theme="silver-screen"] .accent-yellow-mid { accent-color: var(--yellow-mid); }
html[data-design-theme="silver-screen"] .color-brand-red { color: var(--brand-red); }
html[data-design-theme="silver-screen"] .bg-brand-red { background: var(--brand-red); }
html[data-design-theme="silver-screen"] .text-on-brand-red { color: var(--white); }
html[data-design-theme="silver-screen"] .border-brand-red { border-color: var(--brand-red); }
html[data-design-theme="silver-screen"] .ring-brand-red { --ring-color: var(--brand-red); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-brand-red { outline-color: var(--brand-red); }
html[data-design-theme="silver-screen"] .accent-brand-red { accent-color: var(--brand-red); }
html[data-design-theme="silver-screen"] .color-brand-red-light { color: var(--brand-red-light); }
html[data-design-theme="silver-screen"] .bg-brand-red-light { background: var(--brand-red-light); }
html[data-design-theme="silver-screen"] .text-on-brand-red-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-brand-red-light { border-color: var(--brand-red-light); }
html[data-design-theme="silver-screen"] .ring-brand-red-light { --ring-color: var(--brand-red-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-brand-red-light { outline-color: var(--brand-red-light); }
html[data-design-theme="silver-screen"] .accent-brand-red-light { accent-color: var(--brand-red-light); }
html[data-design-theme="silver-screen"] .color-brand-red-mid { color: var(--brand-red-mid); }
html[data-design-theme="silver-screen"] .bg-brand-red-mid { background: var(--brand-red-mid); }
html[data-design-theme="silver-screen"] .text-on-brand-red-mid { color: var(--white); }
html[data-design-theme="silver-screen"] .border-brand-red-mid { border-color: var(--brand-red-mid); }
html[data-design-theme="silver-screen"] .ring-brand-red-mid { --ring-color: var(--brand-red-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-brand-red-mid { outline-color: var(--brand-red-mid); }
html[data-design-theme="silver-screen"] .accent-brand-red-mid { accent-color: var(--brand-red-mid); }
html[data-design-theme="silver-screen"] .color-brand-blue { color: var(--brand-blue); }
html[data-design-theme="silver-screen"] .bg-brand-blue { background: var(--brand-blue); }
html[data-design-theme="silver-screen"] .text-on-brand-blue { color: var(--white); }
html[data-design-theme="silver-screen"] .border-brand-blue { border-color: var(--brand-blue); }
html[data-design-theme="silver-screen"] .ring-brand-blue { --ring-color: var(--brand-blue); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-brand-blue { outline-color: var(--brand-blue); }
html[data-design-theme="silver-screen"] .accent-brand-blue { accent-color: var(--brand-blue); }
html[data-design-theme="silver-screen"] .color-brand-blue-light { color: var(--brand-blue-light); }
html[data-design-theme="silver-screen"] .bg-brand-blue-light { background: var(--brand-blue-light); }
html[data-design-theme="silver-screen"] .text-on-brand-blue-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-brand-blue-light { border-color: var(--brand-blue-light); }
html[data-design-theme="silver-screen"] .ring-brand-blue-light { --ring-color: var(--brand-blue-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-brand-blue-light { outline-color: var(--brand-blue-light); }
html[data-design-theme="silver-screen"] .accent-brand-blue-light { accent-color: var(--brand-blue-light); }
html[data-design-theme="silver-screen"] .color-brand-blue-mid { color: var(--brand-blue-mid); }
html[data-design-theme="silver-screen"] .bg-brand-blue-mid { background: var(--brand-blue-mid); }
html[data-design-theme="silver-screen"] .text-on-brand-blue-mid { color: var(--white); }
html[data-design-theme="silver-screen"] .border-brand-blue-mid { border-color: var(--brand-blue-mid); }
html[data-design-theme="silver-screen"] .ring-brand-blue-mid { --ring-color: var(--brand-blue-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-brand-blue-mid { outline-color: var(--brand-blue-mid); }
html[data-design-theme="silver-screen"] .accent-brand-blue-mid { accent-color: var(--brand-blue-mid); }
html[data-design-theme="silver-screen"] .color-brand-yellow { color: var(--brand-yellow); }
html[data-design-theme="silver-screen"] .bg-brand-yellow { background: var(--brand-yellow); }
html[data-design-theme="silver-screen"] .text-on-brand-yellow { color: var(--black); }
html[data-design-theme="silver-screen"] .border-brand-yellow { border-color: var(--brand-yellow); }
html[data-design-theme="silver-screen"] .ring-brand-yellow { --ring-color: var(--brand-yellow); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-brand-yellow { outline-color: var(--brand-yellow); }
html[data-design-theme="silver-screen"] .accent-brand-yellow { accent-color: var(--brand-yellow); }
html[data-design-theme="silver-screen"] .color-brand-yellow-light { color: var(--brand-yellow-light); }
html[data-design-theme="silver-screen"] .bg-brand-yellow-light { background: var(--brand-yellow-light); }
html[data-design-theme="silver-screen"] .text-on-brand-yellow-light { color: var(--black); }
html[data-design-theme="silver-screen"] .border-brand-yellow-light { border-color: var(--brand-yellow-light); }
html[data-design-theme="silver-screen"] .ring-brand-yellow-light { --ring-color: var(--brand-yellow-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-brand-yellow-light { outline-color: var(--brand-yellow-light); }
html[data-design-theme="silver-screen"] .accent-brand-yellow-light { accent-color: var(--brand-yellow-light); }
html[data-design-theme="silver-screen"] .color-brand-yellow-mid { color: var(--brand-yellow-mid); }
html[data-design-theme="silver-screen"] .bg-brand-yellow-mid { background: var(--brand-yellow-mid); }
html[data-design-theme="silver-screen"] .text-on-brand-yellow-mid { color: var(--black); }
html[data-design-theme="silver-screen"] .border-brand-yellow-mid { border-color: var(--brand-yellow-mid); }
html[data-design-theme="silver-screen"] .ring-brand-yellow-mid { --ring-color: var(--brand-yellow-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-brand-yellow-mid { outline-color: var(--brand-yellow-mid); }
html[data-design-theme="silver-screen"] .accent-brand-yellow-mid { accent-color: var(--brand-yellow-mid); }
html[data-design-theme="silver-screen"] .color-success { color: var(--success); }
html[data-design-theme="silver-screen"] .bg-success { background: var(--success); }
html[data-design-theme="silver-screen"] .text-on-success { color: var(--white); }
html[data-design-theme="silver-screen"] .border-success { border-color: var(--success); }
html[data-design-theme="silver-screen"] .ring-success { --ring-color: var(--success); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-success { outline-color: var(--success); }
html[data-design-theme="silver-screen"] .accent-success { accent-color: var(--success); }
html[data-design-theme="silver-screen"] .color-success-tint { color: var(--success-tint); }
html[data-design-theme="silver-screen"] .bg-success-tint { background: var(--success-tint); }
html[data-design-theme="silver-screen"] .text-on-success-tint { color: var(--white); }
html[data-design-theme="silver-screen"] .border-success-tint { border-color: var(--success-tint); }
html[data-design-theme="silver-screen"] .ring-success-tint { --ring-color: var(--success-tint); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-success-tint { outline-color: var(--success-tint); }
html[data-design-theme="silver-screen"] .accent-success-tint { accent-color: var(--success-tint); }
html[data-design-theme="silver-screen"] .color-warning { color: var(--warning); }
html[data-design-theme="silver-screen"] .bg-warning { background: var(--warning); }
html[data-design-theme="silver-screen"] .text-on-warning { color: var(--white); }
html[data-design-theme="silver-screen"] .border-warning { border-color: var(--warning); }
html[data-design-theme="silver-screen"] .ring-warning { --ring-color: var(--warning); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-warning { outline-color: var(--warning); }
html[data-design-theme="silver-screen"] .accent-warning { accent-color: var(--warning); }
html[data-design-theme="silver-screen"] .color-warning-tint { color: var(--warning-tint); }
html[data-design-theme="silver-screen"] .bg-warning-tint { background: var(--warning-tint); }
html[data-design-theme="silver-screen"] .text-on-warning-tint { color: var(--white); }
html[data-design-theme="silver-screen"] .border-warning-tint { border-color: var(--warning-tint); }
html[data-design-theme="silver-screen"] .ring-warning-tint { --ring-color: var(--warning-tint); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-warning-tint { outline-color: var(--warning-tint); }
html[data-design-theme="silver-screen"] .accent-warning-tint { accent-color: var(--warning-tint); }
html[data-design-theme="silver-screen"] .color-error { color: var(--error); }
html[data-design-theme="silver-screen"] .bg-error { background: var(--error); }
html[data-design-theme="silver-screen"] .text-on-error { color: var(--white); }
html[data-design-theme="silver-screen"] .border-error { border-color: var(--error); }
html[data-design-theme="silver-screen"] .ring-error { --ring-color: var(--error); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-error { outline-color: var(--error); }
html[data-design-theme="silver-screen"] .accent-error { accent-color: var(--error); }
html[data-design-theme="silver-screen"] .color-error-tint { color: var(--error-tint); }
html[data-design-theme="silver-screen"] .bg-error-tint { background: var(--error-tint); }
html[data-design-theme="silver-screen"] .text-on-error-tint { color: var(--white); }
html[data-design-theme="silver-screen"] .border-error-tint { border-color: var(--error-tint); }
html[data-design-theme="silver-screen"] .ring-error-tint { --ring-color: var(--error-tint); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-error-tint { outline-color: var(--error-tint); }
html[data-design-theme="silver-screen"] .accent-error-tint { accent-color: var(--error-tint); }
html[data-design-theme="silver-screen"] .color-info { color: var(--info); }
html[data-design-theme="silver-screen"] .bg-info { background: var(--info); }
html[data-design-theme="silver-screen"] .text-on-info { color: var(--white); }
html[data-design-theme="silver-screen"] .border-info { border-color: var(--info); }
html[data-design-theme="silver-screen"] .ring-info { --ring-color: var(--info); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-info { outline-color: var(--info); }
html[data-design-theme="silver-screen"] .accent-info { accent-color: var(--info); }
html[data-design-theme="silver-screen"] .color-info-tint { color: var(--info-tint); }
html[data-design-theme="silver-screen"] .bg-info-tint { background: var(--info-tint); }
html[data-design-theme="silver-screen"] .text-on-info-tint { color: var(--white); }
html[data-design-theme="silver-screen"] .border-info-tint { border-color: var(--info-tint); }
html[data-design-theme="silver-screen"] .ring-info-tint { --ring-color: var(--info-tint); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-info-tint { outline-color: var(--info-tint); }
html[data-design-theme="silver-screen"] .accent-info-tint { accent-color: var(--info-tint); }
html[data-design-theme="silver-screen"] .color-font-size-xs { color: var(--font-size-xs); }
html[data-design-theme="silver-screen"] .bg-font-size-xs { background: var(--font-size-xs); }
html[data-design-theme="silver-screen"] .text-on-font-size-xs { color: var(--white); }
html[data-design-theme="silver-screen"] .border-font-size-xs { border-color: var(--font-size-xs); }
html[data-design-theme="silver-screen"] .ring-font-size-xs { --ring-color: var(--font-size-xs); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-font-size-xs { outline-color: var(--font-size-xs); }
html[data-design-theme="silver-screen"] .accent-font-size-xs { accent-color: var(--font-size-xs); }
html[data-design-theme="silver-screen"] .color-font-size-sm { color: var(--font-size-sm); }
html[data-design-theme="silver-screen"] .bg-font-size-sm { background: var(--font-size-sm); }
html[data-design-theme="silver-screen"] .text-on-font-size-sm { color: var(--white); }
html[data-design-theme="silver-screen"] .border-font-size-sm { border-color: var(--font-size-sm); }
html[data-design-theme="silver-screen"] .ring-font-size-sm { --ring-color: var(--font-size-sm); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-font-size-sm { outline-color: var(--font-size-sm); }
html[data-design-theme="silver-screen"] .accent-font-size-sm { accent-color: var(--font-size-sm); }
html[data-design-theme="silver-screen"] .color-font-size-md { color: var(--font-size-md); }
html[data-design-theme="silver-screen"] .bg-font-size-md { background: var(--font-size-md); }
html[data-design-theme="silver-screen"] .text-on-font-size-md { color: var(--white); }
html[data-design-theme="silver-screen"] .border-font-size-md { border-color: var(--font-size-md); }
html[data-design-theme="silver-screen"] .ring-font-size-md { --ring-color: var(--font-size-md); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-font-size-md { outline-color: var(--font-size-md); }
html[data-design-theme="silver-screen"] .accent-font-size-md { accent-color: var(--font-size-md); }
html[data-design-theme="silver-screen"] .color-font-size-lg { color: var(--font-size-lg); }
html[data-design-theme="silver-screen"] .bg-font-size-lg { background: var(--font-size-lg); }
html[data-design-theme="silver-screen"] .text-on-font-size-lg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-font-size-lg { border-color: var(--font-size-lg); }
html[data-design-theme="silver-screen"] .ring-font-size-lg { --ring-color: var(--font-size-lg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-font-size-lg { outline-color: var(--font-size-lg); }
html[data-design-theme="silver-screen"] .accent-font-size-lg { accent-color: var(--font-size-lg); }
html[data-design-theme="silver-screen"] .color-font-size-xl { color: var(--font-size-xl); }
html[data-design-theme="silver-screen"] .bg-font-size-xl { background: var(--font-size-xl); }
html[data-design-theme="silver-screen"] .text-on-font-size-xl { color: var(--white); }
html[data-design-theme="silver-screen"] .border-font-size-xl { border-color: var(--font-size-xl); }
html[data-design-theme="silver-screen"] .ring-font-size-xl { --ring-color: var(--font-size-xl); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-font-size-xl { outline-color: var(--font-size-xl); }
html[data-design-theme="silver-screen"] .accent-font-size-xl { accent-color: var(--font-size-xl); }
html[data-design-theme="silver-screen"] .color-font-size-base { color: var(--font-size-base); }
html[data-design-theme="silver-screen"] .bg-font-size-base { background: var(--font-size-base); }
html[data-design-theme="silver-screen"] .text-on-font-size-base { color: var(--white); }
html[data-design-theme="silver-screen"] .border-font-size-base { border-color: var(--font-size-base); }
html[data-design-theme="silver-screen"] .ring-font-size-base { --ring-color: var(--font-size-base); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-font-size-base { outline-color: var(--font-size-base); }
html[data-design-theme="silver-screen"] .accent-font-size-base { accent-color: var(--font-size-base); }
html[data-design-theme="silver-screen"] .color-rose { color: var(--rose); }
html[data-design-theme="silver-screen"] .bg-rose { background: var(--rose); }
html[data-design-theme="silver-screen"] .text-on-rose { color: var(--white); }
html[data-design-theme="silver-screen"] .border-rose { border-color: var(--rose); }
html[data-design-theme="silver-screen"] .ring-rose { --ring-color: var(--rose); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-rose { outline-color: var(--rose); }
html[data-design-theme="silver-screen"] .accent-rose { accent-color: var(--rose); }
html[data-design-theme="silver-screen"] .color-rose-light { color: var(--rose-light); }
html[data-design-theme="silver-screen"] .bg-rose-light { background: var(--rose-light); }
html[data-design-theme="silver-screen"] .text-on-rose-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-rose-light { border-color: var(--rose-light); }
html[data-design-theme="silver-screen"] .ring-rose-light { --ring-color: var(--rose-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-rose-light { outline-color: var(--rose-light); }
html[data-design-theme="silver-screen"] .accent-rose-light { accent-color: var(--rose-light); }
html[data-design-theme="silver-screen"] .color-orange { color: var(--orange); }
html[data-design-theme="silver-screen"] .bg-orange { background: var(--orange); }
html[data-design-theme="silver-screen"] .text-on-orange { color: var(--white); }
html[data-design-theme="silver-screen"] .border-orange { border-color: var(--orange); }
html[data-design-theme="silver-screen"] .ring-orange { --ring-color: var(--orange); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-orange { outline-color: var(--orange); }
html[data-design-theme="silver-screen"] .accent-orange { accent-color: var(--orange); }
html[data-design-theme="silver-screen"] .color-orange-light { color: var(--orange-light); }
html[data-design-theme="silver-screen"] .bg-orange-light { background: var(--orange-light); }
html[data-design-theme="silver-screen"] .text-on-orange-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-orange-light { border-color: var(--orange-light); }
html[data-design-theme="silver-screen"] .ring-orange-light { --ring-color: var(--orange-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-orange-light { outline-color: var(--orange-light); }
html[data-design-theme="silver-screen"] .accent-orange-light { accent-color: var(--orange-light); }
html[data-design-theme="silver-screen"] .color-amber { color: var(--amber); }
html[data-design-theme="silver-screen"] .bg-amber { background: var(--amber); }
html[data-design-theme="silver-screen"] .text-on-amber { color: var(--white); }
html[data-design-theme="silver-screen"] .border-amber { border-color: var(--amber); }
html[data-design-theme="silver-screen"] .ring-amber { --ring-color: var(--amber); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-amber { outline-color: var(--amber); }
html[data-design-theme="silver-screen"] .accent-amber { accent-color: var(--amber); }
html[data-design-theme="silver-screen"] .color-amber-light { color: var(--amber-light); }
html[data-design-theme="silver-screen"] .bg-amber-light { background: var(--amber-light); }
html[data-design-theme="silver-screen"] .text-on-amber-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-amber-light { border-color: var(--amber-light); }
html[data-design-theme="silver-screen"] .ring-amber-light { --ring-color: var(--amber-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-amber-light { outline-color: var(--amber-light); }
html[data-design-theme="silver-screen"] .accent-amber-light { accent-color: var(--amber-light); }
html[data-design-theme="silver-screen"] .color-lime { color: var(--lime); }
html[data-design-theme="silver-screen"] .bg-lime { background: var(--lime); }
html[data-design-theme="silver-screen"] .text-on-lime { color: var(--white); }
html[data-design-theme="silver-screen"] .border-lime { border-color: var(--lime); }
html[data-design-theme="silver-screen"] .ring-lime { --ring-color: var(--lime); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-lime { outline-color: var(--lime); }
html[data-design-theme="silver-screen"] .accent-lime { accent-color: var(--lime); }
html[data-design-theme="silver-screen"] .color-lime-light { color: var(--lime-light); }
html[data-design-theme="silver-screen"] .bg-lime-light { background: var(--lime-light); }
html[data-design-theme="silver-screen"] .text-on-lime-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-lime-light { border-color: var(--lime-light); }
html[data-design-theme="silver-screen"] .ring-lime-light { --ring-color: var(--lime-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-lime-light { outline-color: var(--lime-light); }
html[data-design-theme="silver-screen"] .accent-lime-light { accent-color: var(--lime-light); }
html[data-design-theme="silver-screen"] .color-emerald { color: var(--emerald); }
html[data-design-theme="silver-screen"] .bg-emerald { background: var(--emerald); }
html[data-design-theme="silver-screen"] .text-on-emerald { color: var(--white); }
html[data-design-theme="silver-screen"] .border-emerald { border-color: var(--emerald); }
html[data-design-theme="silver-screen"] .ring-emerald { --ring-color: var(--emerald); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-emerald { outline-color: var(--emerald); }
html[data-design-theme="silver-screen"] .accent-emerald { accent-color: var(--emerald); }
html[data-design-theme="silver-screen"] .color-emerald-light { color: var(--emerald-light); }
html[data-design-theme="silver-screen"] .bg-emerald-light { background: var(--emerald-light); }
html[data-design-theme="silver-screen"] .text-on-emerald-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-emerald-light { border-color: var(--emerald-light); }
html[data-design-theme="silver-screen"] .ring-emerald-light { --ring-color: var(--emerald-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-emerald-light { outline-color: var(--emerald-light); }
html[data-design-theme="silver-screen"] .accent-emerald-light { accent-color: var(--emerald-light); }
html[data-design-theme="silver-screen"] .color-teal { color: var(--teal); }
html[data-design-theme="silver-screen"] .bg-teal { background: var(--teal); }
html[data-design-theme="silver-screen"] .text-on-teal { color: var(--white); }
html[data-design-theme="silver-screen"] .border-teal { border-color: var(--teal); }
html[data-design-theme="silver-screen"] .ring-teal { --ring-color: var(--teal); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-teal { outline-color: var(--teal); }
html[data-design-theme="silver-screen"] .accent-teal { accent-color: var(--teal); }
html[data-design-theme="silver-screen"] .color-teal-light { color: var(--teal-light); }
html[data-design-theme="silver-screen"] .bg-teal-light { background: var(--teal-light); }
html[data-design-theme="silver-screen"] .text-on-teal-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-teal-light { border-color: var(--teal-light); }
html[data-design-theme="silver-screen"] .ring-teal-light { --ring-color: var(--teal-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-teal-light { outline-color: var(--teal-light); }
html[data-design-theme="silver-screen"] .accent-teal-light { accent-color: var(--teal-light); }
html[data-design-theme="silver-screen"] .color-cyan { color: var(--cyan); }
html[data-design-theme="silver-screen"] .bg-cyan { background: var(--cyan); }
html[data-design-theme="silver-screen"] .text-on-cyan { color: var(--white); }
html[data-design-theme="silver-screen"] .border-cyan { border-color: var(--cyan); }
html[data-design-theme="silver-screen"] .ring-cyan { --ring-color: var(--cyan); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-cyan { outline-color: var(--cyan); }
html[data-design-theme="silver-screen"] .accent-cyan { accent-color: var(--cyan); }
html[data-design-theme="silver-screen"] .color-cyan-light { color: var(--cyan-light); }
html[data-design-theme="silver-screen"] .bg-cyan-light { background: var(--cyan-light); }
html[data-design-theme="silver-screen"] .text-on-cyan-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-cyan-light { border-color: var(--cyan-light); }
html[data-design-theme="silver-screen"] .ring-cyan-light { --ring-color: var(--cyan-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-cyan-light { outline-color: var(--cyan-light); }
html[data-design-theme="silver-screen"] .accent-cyan-light { accent-color: var(--cyan-light); }
html[data-design-theme="silver-screen"] .color-sky { color: var(--sky); }
html[data-design-theme="silver-screen"] .bg-sky { background: var(--sky); }
html[data-design-theme="silver-screen"] .text-on-sky { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sky { border-color: var(--sky); }
html[data-design-theme="silver-screen"] .ring-sky { --ring-color: var(--sky); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sky { outline-color: var(--sky); }
html[data-design-theme="silver-screen"] .accent-sky { accent-color: var(--sky); }
html[data-design-theme="silver-screen"] .color-sky-light { color: var(--sky-light); }
html[data-design-theme="silver-screen"] .bg-sky-light { background: var(--sky-light); }
html[data-design-theme="silver-screen"] .text-on-sky-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sky-light { border-color: var(--sky-light); }
html[data-design-theme="silver-screen"] .ring-sky-light { --ring-color: var(--sky-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sky-light { outline-color: var(--sky-light); }
html[data-design-theme="silver-screen"] .accent-sky-light { accent-color: var(--sky-light); }
html[data-design-theme="silver-screen"] .color-indigo { color: var(--indigo); }
html[data-design-theme="silver-screen"] .bg-indigo { background: var(--indigo); }
html[data-design-theme="silver-screen"] .text-on-indigo { color: var(--white); }
html[data-design-theme="silver-screen"] .border-indigo { border-color: var(--indigo); }
html[data-design-theme="silver-screen"] .ring-indigo { --ring-color: var(--indigo); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-indigo { outline-color: var(--indigo); }
html[data-design-theme="silver-screen"] .accent-indigo { accent-color: var(--indigo); }
html[data-design-theme="silver-screen"] .color-indigo-light { color: var(--indigo-light); }
html[data-design-theme="silver-screen"] .bg-indigo-light { background: var(--indigo-light); }
html[data-design-theme="silver-screen"] .text-on-indigo-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-indigo-light { border-color: var(--indigo-light); }
html[data-design-theme="silver-screen"] .ring-indigo-light { --ring-color: var(--indigo-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-indigo-light { outline-color: var(--indigo-light); }
html[data-design-theme="silver-screen"] .accent-indigo-light { accent-color: var(--indigo-light); }
html[data-design-theme="silver-screen"] .color-violet { color: var(--violet); }
html[data-design-theme="silver-screen"] .bg-violet { background: var(--violet); }
html[data-design-theme="silver-screen"] .text-on-violet { color: var(--white); }
html[data-design-theme="silver-screen"] .border-violet { border-color: var(--violet); }
html[data-design-theme="silver-screen"] .ring-violet { --ring-color: var(--violet); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-violet { outline-color: var(--violet); }
html[data-design-theme="silver-screen"] .accent-violet { accent-color: var(--violet); }
html[data-design-theme="silver-screen"] .color-violet-light { color: var(--violet-light); }
html[data-design-theme="silver-screen"] .bg-violet-light { background: var(--violet-light); }
html[data-design-theme="silver-screen"] .text-on-violet-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-violet-light { border-color: var(--violet-light); }
html[data-design-theme="silver-screen"] .ring-violet-light { --ring-color: var(--violet-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-violet-light { outline-color: var(--violet-light); }
html[data-design-theme="silver-screen"] .accent-violet-light { accent-color: var(--violet-light); }
html[data-design-theme="silver-screen"] .color-purple { color: var(--purple); }
html[data-design-theme="silver-screen"] .bg-purple { background: var(--purple); }
html[data-design-theme="silver-screen"] .text-on-purple { color: var(--white); }
html[data-design-theme="silver-screen"] .border-purple { border-color: var(--purple); }
html[data-design-theme="silver-screen"] .ring-purple { --ring-color: var(--purple); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-purple { outline-color: var(--purple); }
html[data-design-theme="silver-screen"] .accent-purple { accent-color: var(--purple); }
html[data-design-theme="silver-screen"] .color-purple-light { color: var(--purple-light); }
html[data-design-theme="silver-screen"] .bg-purple-light { background: var(--purple-light); }
html[data-design-theme="silver-screen"] .text-on-purple-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-purple-light { border-color: var(--purple-light); }
html[data-design-theme="silver-screen"] .ring-purple-light { --ring-color: var(--purple-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-purple-light { outline-color: var(--purple-light); }
html[data-design-theme="silver-screen"] .accent-purple-light { accent-color: var(--purple-light); }
html[data-design-theme="silver-screen"] .color-fuchsia { color: var(--fuchsia); }
html[data-design-theme="silver-screen"] .bg-fuchsia { background: var(--fuchsia); }
html[data-design-theme="silver-screen"] .text-on-fuchsia { color: var(--white); }
html[data-design-theme="silver-screen"] .border-fuchsia { border-color: var(--fuchsia); }
html[data-design-theme="silver-screen"] .ring-fuchsia { --ring-color: var(--fuchsia); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-fuchsia { outline-color: var(--fuchsia); }
html[data-design-theme="silver-screen"] .accent-fuchsia { accent-color: var(--fuchsia); }
html[data-design-theme="silver-screen"] .color-fuchsia-light { color: var(--fuchsia-light); }
html[data-design-theme="silver-screen"] .bg-fuchsia-light { background: var(--fuchsia-light); }
html[data-design-theme="silver-screen"] .text-on-fuchsia-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-fuchsia-light { border-color: var(--fuchsia-light); }
html[data-design-theme="silver-screen"] .ring-fuchsia-light { --ring-color: var(--fuchsia-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-fuchsia-light { outline-color: var(--fuchsia-light); }
html[data-design-theme="silver-screen"] .accent-fuchsia-light { accent-color: var(--fuchsia-light); }
html[data-design-theme="silver-screen"] .color-pink { color: var(--pink); }
html[data-design-theme="silver-screen"] .bg-pink { background: var(--pink); }
html[data-design-theme="silver-screen"] .text-on-pink { color: var(--white); }
html[data-design-theme="silver-screen"] .border-pink { border-color: var(--pink); }
html[data-design-theme="silver-screen"] .ring-pink { --ring-color: var(--pink); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-pink { outline-color: var(--pink); }
html[data-design-theme="silver-screen"] .accent-pink { accent-color: var(--pink); }
html[data-design-theme="silver-screen"] .color-pink-light { color: var(--pink-light); }
html[data-design-theme="silver-screen"] .bg-pink-light { background: var(--pink-light); }
html[data-design-theme="silver-screen"] .text-on-pink-light { color: var(--white); }
html[data-design-theme="silver-screen"] .border-pink-light { border-color: var(--pink-light); }
html[data-design-theme="silver-screen"] .ring-pink-light { --ring-color: var(--pink-light); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-pink-light { outline-color: var(--pink-light); }
html[data-design-theme="silver-screen"] .accent-pink-light { accent-color: var(--pink-light); }
html[data-design-theme="silver-screen"] .color-base-font-family { color: var(--base-font-family); }
html[data-design-theme="silver-screen"] .bg-base-font-family { background: var(--base-font-family); }
html[data-design-theme="silver-screen"] .text-on-base-font-family { color: var(--white); }
html[data-design-theme="silver-screen"] .border-base-font-family { border-color: var(--base-font-family); }
html[data-design-theme="silver-screen"] .ring-base-font-family { --ring-color: var(--base-font-family); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-base-font-family { outline-color: var(--base-font-family); }
html[data-design-theme="silver-screen"] .accent-base-font-family { accent-color: var(--base-font-family); }
html[data-design-theme="silver-screen"] .color-base-font-color { color: var(--base-font-color); }
html[data-design-theme="silver-screen"] .bg-base-font-color { background: var(--base-font-color); }
html[data-design-theme="silver-screen"] .text-on-base-font-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-base-font-color { border-color: var(--base-font-color); }
html[data-design-theme="silver-screen"] .ring-base-font-color { --ring-color: var(--base-font-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-base-font-color { outline-color: var(--base-font-color); }
html[data-design-theme="silver-screen"] .accent-base-font-color { accent-color: var(--base-font-color); }
html[data-design-theme="silver-screen"] .color-base-background { color: var(--base-background); }
html[data-design-theme="silver-screen"] .bg-base-background { background: var(--base-background); }
html[data-design-theme="silver-screen"] .text-on-base-background { color: var(--white); }
html[data-design-theme="silver-screen"] .border-base-background { border-color: var(--base-background); }
html[data-design-theme="silver-screen"] .ring-base-background { --ring-color: var(--base-background); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-base-background { outline-color: var(--base-background); }
html[data-design-theme="silver-screen"] .accent-base-background { accent-color: var(--base-background); }
html[data-design-theme="silver-screen"] .color-bg { color: var(--bg); }
html[data-design-theme="silver-screen"] .bg-bg { background: var(--bg); }
html[data-design-theme="silver-screen"] .text-on-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-bg { border-color: var(--bg); }
html[data-design-theme="silver-screen"] .ring-bg { --ring-color: var(--bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-bg { outline-color: var(--bg); }
html[data-design-theme="silver-screen"] .accent-bg { accent-color: var(--bg); }
html[data-design-theme="silver-screen"] .color-branding-logo-bg { color: var(--branding-logo-bg); }
html[data-design-theme="silver-screen"] .bg-branding-logo-bg { background: var(--branding-logo-bg); }
html[data-design-theme="silver-screen"] .text-on-branding-logo-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-branding-logo-bg { border-color: var(--branding-logo-bg); }
html[data-design-theme="silver-screen"] .ring-branding-logo-bg { --ring-color: var(--branding-logo-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-branding-logo-bg { outline-color: var(--branding-logo-bg); }
html[data-design-theme="silver-screen"] .accent-branding-logo-bg { accent-color: var(--branding-logo-bg); }
html[data-design-theme="silver-screen"] .color-card-background { color: var(--card-background); }
html[data-design-theme="silver-screen"] .bg-card-background { background: var(--card-background); }
html[data-design-theme="silver-screen"] .text-on-card-background { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-background { border-color: var(--card-background); }
html[data-design-theme="silver-screen"] .ring-card-background { --ring-color: var(--card-background); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-background { outline-color: var(--card-background); }
html[data-design-theme="silver-screen"] .accent-card-background { accent-color: var(--card-background); }
html[data-design-theme="silver-screen"] .color-card-border-color { color: var(--card-border-color); }
html[data-design-theme="silver-screen"] .bg-card-border-color { background: var(--card-border-color); }
html[data-design-theme="silver-screen"] .text-on-card-border-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-border-color { border-color: var(--card-border-color); }
html[data-design-theme="silver-screen"] .ring-card-border-color { --ring-color: var(--card-border-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-border-color { outline-color: var(--card-border-color); }
html[data-design-theme="silver-screen"] .accent-card-border-color { accent-color: var(--card-border-color); }
html[data-design-theme="silver-screen"] .color-card-header-background { color: var(--card-header-background); }
html[data-design-theme="silver-screen"] .bg-card-header-background { background: var(--card-header-background); }
html[data-design-theme="silver-screen"] .text-on-card-header-background { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-header-background { border-color: var(--card-header-background); }
html[data-design-theme="silver-screen"] .ring-card-header-background { --ring-color: var(--card-header-background); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-header-background { outline-color: var(--card-header-background); }
html[data-design-theme="silver-screen"] .accent-card-header-background { accent-color: var(--card-header-background); }
html[data-design-theme="silver-screen"] .color-card-footer-background { color: var(--card-footer-background); }
html[data-design-theme="silver-screen"] .bg-card-footer-background { background: var(--card-footer-background); }
html[data-design-theme="silver-screen"] .text-on-card-footer-background { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-footer-background { border-color: var(--card-footer-background); }
html[data-design-theme="silver-screen"] .ring-card-footer-background { --ring-color: var(--card-footer-background); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-footer-background { outline-color: var(--card-footer-background); }
html[data-design-theme="silver-screen"] .accent-card-footer-background { accent-color: var(--card-footer-background); }
html[data-design-theme="silver-screen"] .color-btn-font-family { color: var(--btn-font-family); }
html[data-design-theme="silver-screen"] .bg-btn-font-family { background: var(--btn-font-family); }
html[data-design-theme="silver-screen"] .text-on-btn-font-family { color: var(--white); }
html[data-design-theme="silver-screen"] .border-btn-font-family { border-color: var(--btn-font-family); }
html[data-design-theme="silver-screen"] .ring-btn-font-family { --ring-color: var(--btn-font-family); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-btn-font-family { outline-color: var(--btn-font-family); }
html[data-design-theme="silver-screen"] .accent-btn-font-family { accent-color: var(--btn-font-family); }
html[data-design-theme="silver-screen"] .color-btn-background { color: var(--btn-background); }
html[data-design-theme="silver-screen"] .bg-btn-background { background: var(--btn-background); }
html[data-design-theme="silver-screen"] .text-on-btn-background { color: var(--white); }
html[data-design-theme="silver-screen"] .border-btn-background { border-color: var(--btn-background); }
html[data-design-theme="silver-screen"] .ring-btn-background { --ring-color: var(--btn-background); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-btn-background { outline-color: var(--btn-background); }
html[data-design-theme="silver-screen"] .accent-btn-background { accent-color: var(--btn-background); }
html[data-design-theme="silver-screen"] .color-btn-color { color: var(--btn-color); }
html[data-design-theme="silver-screen"] .bg-btn-color { background: var(--btn-color); }
html[data-design-theme="silver-screen"] .text-on-btn-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-btn-color { border-color: var(--btn-color); }
html[data-design-theme="silver-screen"] .ring-btn-color { --ring-color: var(--btn-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-btn-color { outline-color: var(--btn-color); }
html[data-design-theme="silver-screen"] .accent-btn-color { accent-color: var(--btn-color); }
html[data-design-theme="silver-screen"] .color-btn-hover-background { color: var(--btn-hover-background); }
html[data-design-theme="silver-screen"] .bg-btn-hover-background { background: var(--btn-hover-background); }
html[data-design-theme="silver-screen"] .text-on-btn-hover-background { color: var(--white); }
html[data-design-theme="silver-screen"] .border-btn-hover-background { border-color: var(--btn-hover-background); }
html[data-design-theme="silver-screen"] .ring-btn-hover-background { --ring-color: var(--btn-hover-background); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-btn-hover-background { outline-color: var(--btn-hover-background); }
html[data-design-theme="silver-screen"] .accent-btn-hover-background { accent-color: var(--btn-hover-background); }
html[data-design-theme="silver-screen"] .color-btn-outline-color { color: var(--btn-outline-color); }
html[data-design-theme="silver-screen"] .bg-btn-outline-color { background: var(--btn-outline-color); }
html[data-design-theme="silver-screen"] .text-on-btn-outline-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-btn-outline-color { border-color: var(--btn-outline-color); }
html[data-design-theme="silver-screen"] .ring-btn-outline-color { --ring-color: var(--btn-outline-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-btn-outline-color { outline-color: var(--btn-outline-color); }
html[data-design-theme="silver-screen"] .accent-btn-outline-color { accent-color: var(--btn-outline-color); }
html[data-design-theme="silver-screen"] .color-btn-outline-hover-background { color: var(--btn-outline-hover-background); }
html[data-design-theme="silver-screen"] .bg-btn-outline-hover-background { background: var(--btn-outline-hover-background); }
html[data-design-theme="silver-screen"] .text-on-btn-outline-hover-background { color: var(--white); }
html[data-design-theme="silver-screen"] .border-btn-outline-hover-background { border-color: var(--btn-outline-hover-background); }
html[data-design-theme="silver-screen"] .ring-btn-outline-hover-background { --ring-color: var(--btn-outline-hover-background); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-btn-outline-hover-background { outline-color: var(--btn-outline-hover-background); }
html[data-design-theme="silver-screen"] .accent-btn-outline-hover-background { accent-color: var(--btn-outline-hover-background); }
html[data-design-theme="silver-screen"] .color-sg-section-title-font-family { color: var(--sg-section-title-font-family); }
html[data-design-theme="silver-screen"] .bg-sg-section-title-font-family { background: var(--sg-section-title-font-family); }
html[data-design-theme="silver-screen"] .text-on-sg-section-title-font-family { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-section-title-font-family { border-color: var(--sg-section-title-font-family); }
html[data-design-theme="silver-screen"] .ring-sg-section-title-font-family { --ring-color: var(--sg-section-title-font-family); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-section-title-font-family { outline-color: var(--sg-section-title-font-family); }
html[data-design-theme="silver-screen"] .accent-sg-section-title-font-family { accent-color: var(--sg-section-title-font-family); }
html[data-design-theme="silver-screen"] .color-sg-section-title-color { color: var(--sg-section-title-color); }
html[data-design-theme="silver-screen"] .bg-sg-section-title-color { background: var(--sg-section-title-color); }
html[data-design-theme="silver-screen"] .text-on-sg-section-title-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-section-title-color { border-color: var(--sg-section-title-color); }
html[data-design-theme="silver-screen"] .ring-sg-section-title-color { --ring-color: var(--sg-section-title-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-section-title-color { outline-color: var(--sg-section-title-color); }
html[data-design-theme="silver-screen"] .accent-sg-section-title-color { accent-color: var(--sg-section-title-color); }
html[data-design-theme="silver-screen"] .color-sg-section-number-bg { color: var(--sg-section-number-bg); }
html[data-design-theme="silver-screen"] .bg-sg-section-number-bg { background: var(--sg-section-number-bg); }
html[data-design-theme="silver-screen"] .text-on-sg-section-number-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-section-number-bg { border-color: var(--sg-section-number-bg); }
html[data-design-theme="silver-screen"] .ring-sg-section-number-bg { --ring-color: var(--sg-section-number-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-section-number-bg { outline-color: var(--sg-section-number-bg); }
html[data-design-theme="silver-screen"] .accent-sg-section-number-bg { accent-color: var(--sg-section-number-bg); }
html[data-design-theme="silver-screen"] .color-sg-section-number-color { color: var(--sg-section-number-color); }
html[data-design-theme="silver-screen"] .bg-sg-section-number-color { background: var(--sg-section-number-color); }
html[data-design-theme="silver-screen"] .text-on-sg-section-number-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-section-number-color { border-color: var(--sg-section-number-color); }
html[data-design-theme="silver-screen"] .ring-sg-section-number-color { --ring-color: var(--sg-section-number-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-section-number-color { outline-color: var(--sg-section-number-color); }
html[data-design-theme="silver-screen"] .accent-sg-section-number-color { accent-color: var(--sg-section-number-color); }
html[data-design-theme="silver-screen"] .color-sg-section-desc-font-family { color: var(--sg-section-desc-font-family); }
html[data-design-theme="silver-screen"] .bg-sg-section-desc-font-family { background: var(--sg-section-desc-font-family); }
html[data-design-theme="silver-screen"] .text-on-sg-section-desc-font-family { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-section-desc-font-family { border-color: var(--sg-section-desc-font-family); }
html[data-design-theme="silver-screen"] .ring-sg-section-desc-font-family { --ring-color: var(--sg-section-desc-font-family); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-section-desc-font-family { outline-color: var(--sg-section-desc-font-family); }
html[data-design-theme="silver-screen"] .accent-sg-section-desc-font-family { accent-color: var(--sg-section-desc-font-family); }
html[data-design-theme="silver-screen"] .color-sg-section-desc-color { color: var(--sg-section-desc-color); }
html[data-design-theme="silver-screen"] .bg-sg-section-desc-color { background: var(--sg-section-desc-color); }
html[data-design-theme="silver-screen"] .text-on-sg-section-desc-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-section-desc-color { border-color: var(--sg-section-desc-color); }
html[data-design-theme="silver-screen"] .ring-sg-section-desc-color { --ring-color: var(--sg-section-desc-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-section-desc-color { outline-color: var(--sg-section-desc-color); }
html[data-design-theme="silver-screen"] .accent-sg-section-desc-color { accent-color: var(--sg-section-desc-color); }
html[data-design-theme="silver-screen"] .color-sg-type-specimen-bg { color: var(--sg-type-specimen-bg); }
html[data-design-theme="silver-screen"] .bg-sg-type-specimen-bg { background: var(--sg-type-specimen-bg); }
html[data-design-theme="silver-screen"] .text-on-sg-type-specimen-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-type-specimen-bg { border-color: var(--sg-type-specimen-bg); }
html[data-design-theme="silver-screen"] .ring-sg-type-specimen-bg { --ring-color: var(--sg-type-specimen-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-type-specimen-bg { outline-color: var(--sg-type-specimen-bg); }
html[data-design-theme="silver-screen"] .accent-sg-type-specimen-bg { accent-color: var(--sg-type-specimen-bg); }
html[data-design-theme="silver-screen"] .color-sg-type-specimen-padding { color: var(--sg-type-specimen-padding); }
html[data-design-theme="silver-screen"] .bg-sg-type-specimen-padding { background: var(--sg-type-specimen-padding); }
html[data-design-theme="silver-screen"] .text-on-sg-type-specimen-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-type-specimen-padding { border-color: var(--sg-type-specimen-padding); }
html[data-design-theme="silver-screen"] .ring-sg-type-specimen-padding { --ring-color: var(--sg-type-specimen-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-type-specimen-padding { outline-color: var(--sg-type-specimen-padding); }
html[data-design-theme="silver-screen"] .accent-sg-type-specimen-padding { accent-color: var(--sg-type-specimen-padding); }
html[data-design-theme="silver-screen"] .color-sg-type-specimen-name-color { color: var(--sg-type-specimen-name-color); }
html[data-design-theme="silver-screen"] .bg-sg-type-specimen-name-color { background: var(--sg-type-specimen-name-color); }
html[data-design-theme="silver-screen"] .text-on-sg-type-specimen-name-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-type-specimen-name-color { border-color: var(--sg-type-specimen-name-color); }
html[data-design-theme="silver-screen"] .ring-sg-type-specimen-name-color { --ring-color: var(--sg-type-specimen-name-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-type-specimen-name-color { outline-color: var(--sg-type-specimen-name-color); }
html[data-design-theme="silver-screen"] .accent-sg-type-specimen-name-color { accent-color: var(--sg-type-specimen-name-color); }
html[data-design-theme="silver-screen"] .color-sg-type-specimen-name-font { color: var(--sg-type-specimen-name-font); }
html[data-design-theme="silver-screen"] .bg-sg-type-specimen-name-font { background: var(--sg-type-specimen-name-font); }
html[data-design-theme="silver-screen"] .text-on-sg-type-specimen-name-font { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-type-specimen-name-font { border-color: var(--sg-type-specimen-name-font); }
html[data-design-theme="silver-screen"] .ring-sg-type-specimen-name-font { --ring-color: var(--sg-type-specimen-name-font); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-type-specimen-name-font { outline-color: var(--sg-type-specimen-name-font); }
html[data-design-theme="silver-screen"] .accent-sg-type-specimen-name-font { accent-color: var(--sg-type-specimen-name-font); }
html[data-design-theme="silver-screen"] .color-hr-subsection-color { color: var(--hr-subsection-color); }
html[data-design-theme="silver-screen"] .bg-hr-subsection-color { background: var(--hr-subsection-color); }
html[data-design-theme="silver-screen"] .text-on-hr-subsection-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hr-subsection-color { border-color: var(--hr-subsection-color); }
html[data-design-theme="silver-screen"] .ring-hr-subsection-color { --ring-color: var(--hr-subsection-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hr-subsection-color { outline-color: var(--hr-subsection-color); }
html[data-design-theme="silver-screen"] .accent-hr-subsection-color { accent-color: var(--hr-subsection-color); }
html[data-design-theme="silver-screen"] .color-hr-accent-color { color: var(--hr-accent-color); }
html[data-design-theme="silver-screen"] .bg-hr-accent-color { background: var(--hr-accent-color); }
html[data-design-theme="silver-screen"] .text-on-hr-accent-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hr-accent-color { border-color: var(--hr-accent-color); }
html[data-design-theme="silver-screen"] .ring-hr-accent-color { --ring-color: var(--hr-accent-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hr-accent-color { outline-color: var(--hr-accent-color); }
html[data-design-theme="silver-screen"] .accent-hr-accent-color { accent-color: var(--hr-accent-color); }
html[data-design-theme="silver-screen"] .color-hui-focus-ring-color { color: var(--hui-focus-ring-color); }
html[data-design-theme="silver-screen"] .bg-hui-focus-ring-color { background: var(--hui-focus-ring-color); }
html[data-design-theme="silver-screen"] .text-on-hui-focus-ring-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-focus-ring-color { border-color: var(--hui-focus-ring-color); }
html[data-design-theme="silver-screen"] .ring-hui-focus-ring-color { --ring-color: var(--hui-focus-ring-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-focus-ring-color { outline-color: var(--hui-focus-ring-color); }
html[data-design-theme="silver-screen"] .accent-hui-focus-ring-color { accent-color: var(--hui-focus-ring-color); }
html[data-design-theme="silver-screen"] .color-hui-control-color { color: var(--hui-control-color); }
html[data-design-theme="silver-screen"] .bg-hui-control-color { background: var(--hui-control-color); }
html[data-design-theme="silver-screen"] .text-on-hui-control-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-control-color { border-color: var(--hui-control-color); }
html[data-design-theme="silver-screen"] .ring-hui-control-color { --ring-color: var(--hui-control-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-control-color { outline-color: var(--hui-control-color); }
html[data-design-theme="silver-screen"] .accent-hui-control-color { accent-color: var(--hui-control-color); }
html[data-design-theme="silver-screen"] .color-hui-control-bg { color: var(--hui-control-bg); }
html[data-design-theme="silver-screen"] .bg-hui-control-bg { background: var(--hui-control-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-control-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-control-bg { border-color: var(--hui-control-bg); }
html[data-design-theme="silver-screen"] .ring-hui-control-bg { --ring-color: var(--hui-control-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-control-bg { outline-color: var(--hui-control-bg); }
html[data-design-theme="silver-screen"] .accent-hui-control-bg { accent-color: var(--hui-control-bg); }
html[data-design-theme="silver-screen"] .color-hui-control-border { color: var(--hui-control-border); }
html[data-design-theme="silver-screen"] .bg-hui-control-border { background: var(--hui-control-border); }
html[data-design-theme="silver-screen"] .text-on-hui-control-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-control-border { border-color: var(--hui-control-border); }
html[data-design-theme="silver-screen"] .ring-hui-control-border { --ring-color: var(--hui-control-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-control-border { outline-color: var(--hui-control-border); }
html[data-design-theme="silver-screen"] .accent-hui-control-border { accent-color: var(--hui-control-border); }
html[data-design-theme="silver-screen"] .color-hui-switch-track-on-bg { color: var(--hui-switch-track-on-bg); }
html[data-design-theme="silver-screen"] .bg-hui-switch-track-on-bg { background: var(--hui-switch-track-on-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-switch-track-on-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-switch-track-on-bg { border-color: var(--hui-switch-track-on-bg); }
html[data-design-theme="silver-screen"] .ring-hui-switch-track-on-bg { --ring-color: var(--hui-switch-track-on-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-switch-track-on-bg { outline-color: var(--hui-switch-track-on-bg); }
html[data-design-theme="silver-screen"] .accent-hui-switch-track-on-bg { accent-color: var(--hui-switch-track-on-bg); }
html[data-design-theme="silver-screen"] .color-hui-switch-track-off-bg { color: var(--hui-switch-track-off-bg); }
html[data-design-theme="silver-screen"] .bg-hui-switch-track-off-bg { background: var(--hui-switch-track-off-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-switch-track-off-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-switch-track-off-bg { border-color: var(--hui-switch-track-off-bg); }
html[data-design-theme="silver-screen"] .ring-hui-switch-track-off-bg { --ring-color: var(--hui-switch-track-off-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-switch-track-off-bg { outline-color: var(--hui-switch-track-off-bg); }
html[data-design-theme="silver-screen"] .accent-hui-switch-track-off-bg { accent-color: var(--hui-switch-track-off-bg); }
html[data-design-theme="silver-screen"] .color-hui-radio-option-border { color: var(--hui-radio-option-border); }
html[data-design-theme="silver-screen"] .bg-hui-radio-option-border { background: var(--hui-radio-option-border); }
html[data-design-theme="silver-screen"] .text-on-hui-radio-option-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-radio-option-border { border-color: var(--hui-radio-option-border); }
html[data-design-theme="silver-screen"] .ring-hui-radio-option-border { --ring-color: var(--hui-radio-option-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-radio-option-border { outline-color: var(--hui-radio-option-border); }
html[data-design-theme="silver-screen"] .accent-hui-radio-option-border { accent-color: var(--hui-radio-option-border); }
html[data-design-theme="silver-screen"] .color-hui-radio-option-border-active { color: var(--hui-radio-option-border-active); }
html[data-design-theme="silver-screen"] .bg-hui-radio-option-border-active { background: var(--hui-radio-option-border-active); }
html[data-design-theme="silver-screen"] .text-on-hui-radio-option-border-active { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-radio-option-border-active { border-color: var(--hui-radio-option-border-active); }
html[data-design-theme="silver-screen"] .ring-hui-radio-option-border-active { --ring-color: var(--hui-radio-option-border-active); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-radio-option-border-active { outline-color: var(--hui-radio-option-border-active); }
html[data-design-theme="silver-screen"] .accent-hui-radio-option-border-active { accent-color: var(--hui-radio-option-border-active); }
html[data-design-theme="silver-screen"] .color-hui-radio-option-bg-active { color: var(--hui-radio-option-bg-active); }
html[data-design-theme="silver-screen"] .bg-hui-radio-option-bg-active { background: var(--hui-radio-option-bg-active); }
html[data-design-theme="silver-screen"] .text-on-hui-radio-option-bg-active { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-radio-option-bg-active { border-color: var(--hui-radio-option-bg-active); }
html[data-design-theme="silver-screen"] .ring-hui-radio-option-bg-active { --ring-color: var(--hui-radio-option-bg-active); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-radio-option-bg-active { outline-color: var(--hui-radio-option-bg-active); }
html[data-design-theme="silver-screen"] .accent-hui-radio-option-bg-active { accent-color: var(--hui-radio-option-bg-active); }
html[data-design-theme="silver-screen"] .color-hui-trigger-bg { color: var(--hui-trigger-bg); }
html[data-design-theme="silver-screen"] .bg-hui-trigger-bg { background: var(--hui-trigger-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-trigger-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-trigger-bg { border-color: var(--hui-trigger-bg); }
html[data-design-theme="silver-screen"] .ring-hui-trigger-bg { --ring-color: var(--hui-trigger-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-trigger-bg { outline-color: var(--hui-trigger-bg); }
html[data-design-theme="silver-screen"] .accent-hui-trigger-bg { accent-color: var(--hui-trigger-bg); }
html[data-design-theme="silver-screen"] .color-hui-trigger-border { color: var(--hui-trigger-border); }
html[data-design-theme="silver-screen"] .bg-hui-trigger-border { background: var(--hui-trigger-border); }
html[data-design-theme="silver-screen"] .text-on-hui-trigger-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-trigger-border { border-color: var(--hui-trigger-border); }
html[data-design-theme="silver-screen"] .ring-hui-trigger-border { --ring-color: var(--hui-trigger-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-trigger-border { outline-color: var(--hui-trigger-border); }
html[data-design-theme="silver-screen"] .accent-hui-trigger-border { accent-color: var(--hui-trigger-border); }
html[data-design-theme="silver-screen"] .color-hui-trigger-border-hover { color: var(--hui-trigger-border-hover); }
html[data-design-theme="silver-screen"] .bg-hui-trigger-border-hover { background: var(--hui-trigger-border-hover); }
html[data-design-theme="silver-screen"] .text-on-hui-trigger-border-hover { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-trigger-border-hover { border-color: var(--hui-trigger-border-hover); }
html[data-design-theme="silver-screen"] .ring-hui-trigger-border-hover { --ring-color: var(--hui-trigger-border-hover); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-trigger-border-hover { outline-color: var(--hui-trigger-border-hover); }
html[data-design-theme="silver-screen"] .accent-hui-trigger-border-hover { accent-color: var(--hui-trigger-border-hover); }
html[data-design-theme="silver-screen"] .color-hui-trigger-color { color: var(--hui-trigger-color); }
html[data-design-theme="silver-screen"] .bg-hui-trigger-color { background: var(--hui-trigger-color); }
html[data-design-theme="silver-screen"] .text-on-hui-trigger-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-trigger-color { border-color: var(--hui-trigger-color); }
html[data-design-theme="silver-screen"] .ring-hui-trigger-color { --ring-color: var(--hui-trigger-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-trigger-color { outline-color: var(--hui-trigger-color); }
html[data-design-theme="silver-screen"] .accent-hui-trigger-color { accent-color: var(--hui-trigger-color); }
html[data-design-theme="silver-screen"] .color-hui-panel-bg { color: var(--hui-panel-bg); }
html[data-design-theme="silver-screen"] .bg-hui-panel-bg { background: var(--hui-panel-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-panel-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-panel-bg { border-color: var(--hui-panel-bg); }
html[data-design-theme="silver-screen"] .ring-hui-panel-bg { --ring-color: var(--hui-panel-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-panel-bg { outline-color: var(--hui-panel-bg); }
html[data-design-theme="silver-screen"] .accent-hui-panel-bg { accent-color: var(--hui-panel-bg); }
html[data-design-theme="silver-screen"] .color-hui-panel-border { color: var(--hui-panel-border); }
html[data-design-theme="silver-screen"] .bg-hui-panel-border { background: var(--hui-panel-border); }
html[data-design-theme="silver-screen"] .text-on-hui-panel-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-panel-border { border-color: var(--hui-panel-border); }
html[data-design-theme="silver-screen"] .ring-hui-panel-border { --ring-color: var(--hui-panel-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-panel-border { outline-color: var(--hui-panel-border); }
html[data-design-theme="silver-screen"] .accent-hui-panel-border { accent-color: var(--hui-panel-border); }
html[data-design-theme="silver-screen"] .color-hui-panel-item-active-bg { color: var(--hui-panel-item-active-bg); }
html[data-design-theme="silver-screen"] .bg-hui-panel-item-active-bg { background: var(--hui-panel-item-active-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-panel-item-active-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-panel-item-active-bg { border-color: var(--hui-panel-item-active-bg); }
html[data-design-theme="silver-screen"] .ring-hui-panel-item-active-bg { --ring-color: var(--hui-panel-item-active-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-panel-item-active-bg { outline-color: var(--hui-panel-item-active-bg); }
html[data-design-theme="silver-screen"] .accent-hui-panel-item-active-bg { accent-color: var(--hui-panel-item-active-bg); }
html[data-design-theme="silver-screen"] .color-hui-panel-item-active-color { color: var(--hui-panel-item-active-color); }
html[data-design-theme="silver-screen"] .bg-hui-panel-item-active-color { background: var(--hui-panel-item-active-color); }
html[data-design-theme="silver-screen"] .text-on-hui-panel-item-active-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-panel-item-active-color { border-color: var(--hui-panel-item-active-color); }
html[data-design-theme="silver-screen"] .ring-hui-panel-item-active-color { --ring-color: var(--hui-panel-item-active-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-panel-item-active-color { outline-color: var(--hui-panel-item-active-color); }
html[data-design-theme="silver-screen"] .accent-hui-panel-item-active-color { accent-color: var(--hui-panel-item-active-color); }
html[data-design-theme="silver-screen"] .color-hui-panel-sep-color { color: var(--hui-panel-sep-color); }
html[data-design-theme="silver-screen"] .bg-hui-panel-sep-color { background: var(--hui-panel-sep-color); }
html[data-design-theme="silver-screen"] .text-on-hui-panel-sep-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-panel-sep-color { border-color: var(--hui-panel-sep-color); }
html[data-design-theme="silver-screen"] .ring-hui-panel-sep-color { --ring-color: var(--hui-panel-sep-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-panel-sep-color { outline-color: var(--hui-panel-sep-color); }
html[data-design-theme="silver-screen"] .accent-hui-panel-sep-color { accent-color: var(--hui-panel-sep-color); }
html[data-design-theme="silver-screen"] .color-hui-tab-color { color: var(--hui-tab-color); }
html[data-design-theme="silver-screen"] .bg-hui-tab-color { background: var(--hui-tab-color); }
html[data-design-theme="silver-screen"] .text-on-hui-tab-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-tab-color { border-color: var(--hui-tab-color); }
html[data-design-theme="silver-screen"] .ring-hui-tab-color { --ring-color: var(--hui-tab-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-tab-color { outline-color: var(--hui-tab-color); }
html[data-design-theme="silver-screen"] .accent-hui-tab-color { accent-color: var(--hui-tab-color); }
html[data-design-theme="silver-screen"] .color-hui-tab-color-selected { color: var(--hui-tab-color-selected); }
html[data-design-theme="silver-screen"] .bg-hui-tab-color-selected { background: var(--hui-tab-color-selected); }
html[data-design-theme="silver-screen"] .text-on-hui-tab-color-selected { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-tab-color-selected { border-color: var(--hui-tab-color-selected); }
html[data-design-theme="silver-screen"] .ring-hui-tab-color-selected { --ring-color: var(--hui-tab-color-selected); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-tab-color-selected { outline-color: var(--hui-tab-color-selected); }
html[data-design-theme="silver-screen"] .accent-hui-tab-color-selected { accent-color: var(--hui-tab-color-selected); }
html[data-design-theme="silver-screen"] .color-hui-tab-border-selected { color: var(--hui-tab-border-selected); }
html[data-design-theme="silver-screen"] .bg-hui-tab-border-selected { background: var(--hui-tab-border-selected); }
html[data-design-theme="silver-screen"] .text-on-hui-tab-border-selected { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-tab-border-selected { border-color: var(--hui-tab-border-selected); }
html[data-design-theme="silver-screen"] .ring-hui-tab-border-selected { --ring-color: var(--hui-tab-border-selected); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-tab-border-selected { outline-color: var(--hui-tab-border-selected); }
html[data-design-theme="silver-screen"] .accent-hui-tab-border-selected { accent-color: var(--hui-tab-border-selected); }
html[data-design-theme="silver-screen"] .color-hui-tab-color-hover { color: var(--hui-tab-color-hover); }
html[data-design-theme="silver-screen"] .bg-hui-tab-color-hover { background: var(--hui-tab-color-hover); }
html[data-design-theme="silver-screen"] .text-on-hui-tab-color-hover { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-tab-color-hover { border-color: var(--hui-tab-color-hover); }
html[data-design-theme="silver-screen"] .ring-hui-tab-color-hover { --ring-color: var(--hui-tab-color-hover); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-tab-color-hover { outline-color: var(--hui-tab-color-hover); }
html[data-design-theme="silver-screen"] .accent-hui-tab-color-hover { accent-color: var(--hui-tab-color-hover); }
html[data-design-theme="silver-screen"] .color-hui-tab-list-border { color: var(--hui-tab-list-border); }
html[data-design-theme="silver-screen"] .bg-hui-tab-list-border { background: var(--hui-tab-list-border); }
html[data-design-theme="silver-screen"] .text-on-hui-tab-list-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-tab-list-border { border-color: var(--hui-tab-list-border); }
html[data-design-theme="silver-screen"] .ring-hui-tab-list-border { --ring-color: var(--hui-tab-list-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-tab-list-border { outline-color: var(--hui-tab-list-border); }
html[data-design-theme="silver-screen"] .accent-hui-tab-list-border { accent-color: var(--hui-tab-list-border); }
html[data-design-theme="silver-screen"] .color-hui-disclosure-bg { color: var(--hui-disclosure-bg); }
html[data-design-theme="silver-screen"] .bg-hui-disclosure-bg { background: var(--hui-disclosure-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-disclosure-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-disclosure-bg { border-color: var(--hui-disclosure-bg); }
html[data-design-theme="silver-screen"] .ring-hui-disclosure-bg { --ring-color: var(--hui-disclosure-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-disclosure-bg { outline-color: var(--hui-disclosure-bg); }
html[data-design-theme="silver-screen"] .accent-hui-disclosure-bg { accent-color: var(--hui-disclosure-bg); }
html[data-design-theme="silver-screen"] .color-hui-disclosure-bg-hover { color: var(--hui-disclosure-bg-hover); }
html[data-design-theme="silver-screen"] .bg-hui-disclosure-bg-hover { background: var(--hui-disclosure-bg-hover); }
html[data-design-theme="silver-screen"] .text-on-hui-disclosure-bg-hover { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-disclosure-bg-hover { border-color: var(--hui-disclosure-bg-hover); }
html[data-design-theme="silver-screen"] .ring-hui-disclosure-bg-hover { --ring-color: var(--hui-disclosure-bg-hover); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-disclosure-bg-hover { outline-color: var(--hui-disclosure-bg-hover); }
html[data-design-theme="silver-screen"] .accent-hui-disclosure-bg-hover { accent-color: var(--hui-disclosure-bg-hover); }
html[data-design-theme="silver-screen"] .color-hui-disclosure-border { color: var(--hui-disclosure-border); }
html[data-design-theme="silver-screen"] .bg-hui-disclosure-border { background: var(--hui-disclosure-border); }
html[data-design-theme="silver-screen"] .text-on-hui-disclosure-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-disclosure-border { border-color: var(--hui-disclosure-border); }
html[data-design-theme="silver-screen"] .ring-hui-disclosure-border { --ring-color: var(--hui-disclosure-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-disclosure-border { outline-color: var(--hui-disclosure-border); }
html[data-design-theme="silver-screen"] .accent-hui-disclosure-border { accent-color: var(--hui-disclosure-border); }
html[data-design-theme="silver-screen"] .color-hui-disclosure-color { color: var(--hui-disclosure-color); }
html[data-design-theme="silver-screen"] .bg-hui-disclosure-color { background: var(--hui-disclosure-color); }
html[data-design-theme="silver-screen"] .text-on-hui-disclosure-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-disclosure-color { border-color: var(--hui-disclosure-color); }
html[data-design-theme="silver-screen"] .ring-hui-disclosure-color { --ring-color: var(--hui-disclosure-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-disclosure-color { outline-color: var(--hui-disclosure-color); }
html[data-design-theme="silver-screen"] .accent-hui-disclosure-color { accent-color: var(--hui-disclosure-color); }
html[data-design-theme="silver-screen"] .color-hui-disclosure-panel-bg { color: var(--hui-disclosure-panel-bg); }
html[data-design-theme="silver-screen"] .bg-hui-disclosure-panel-bg { background: var(--hui-disclosure-panel-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-disclosure-panel-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-disclosure-panel-bg { border-color: var(--hui-disclosure-panel-bg); }
html[data-design-theme="silver-screen"] .ring-hui-disclosure-panel-bg { --ring-color: var(--hui-disclosure-panel-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-disclosure-panel-bg { outline-color: var(--hui-disclosure-panel-bg); }
html[data-design-theme="silver-screen"] .accent-hui-disclosure-panel-bg { accent-color: var(--hui-disclosure-panel-bg); }
html[data-design-theme="silver-screen"] .color-hui-disclosure-panel-color { color: var(--hui-disclosure-panel-color); }
html[data-design-theme="silver-screen"] .bg-hui-disclosure-panel-color { background: var(--hui-disclosure-panel-color); }
html[data-design-theme="silver-screen"] .text-on-hui-disclosure-panel-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-disclosure-panel-color { border-color: var(--hui-disclosure-panel-color); }
html[data-design-theme="silver-screen"] .ring-hui-disclosure-panel-color { --ring-color: var(--hui-disclosure-panel-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-disclosure-panel-color { outline-color: var(--hui-disclosure-panel-color); }
html[data-design-theme="silver-screen"] .accent-hui-disclosure-panel-color { accent-color: var(--hui-disclosure-panel-color); }
html[data-design-theme="silver-screen"] .color-hui-disclosure-chevron-color { color: var(--hui-disclosure-chevron-color); }
html[data-design-theme="silver-screen"] .bg-hui-disclosure-chevron-color { background: var(--hui-disclosure-chevron-color); }
html[data-design-theme="silver-screen"] .text-on-hui-disclosure-chevron-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-disclosure-chevron-color { border-color: var(--hui-disclosure-chevron-color); }
html[data-design-theme="silver-screen"] .ring-hui-disclosure-chevron-color { --ring-color: var(--hui-disclosure-chevron-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-disclosure-chevron-color { outline-color: var(--hui-disclosure-chevron-color); }
html[data-design-theme="silver-screen"] .accent-hui-disclosure-chevron-color { accent-color: var(--hui-disclosure-chevron-color); }
html[data-design-theme="silver-screen"] .color-hui-field-bg { color: var(--hui-field-bg); }
html[data-design-theme="silver-screen"] .bg-hui-field-bg { background: var(--hui-field-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-field-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-field-bg { border-color: var(--hui-field-bg); }
html[data-design-theme="silver-screen"] .ring-hui-field-bg { --ring-color: var(--hui-field-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-field-bg { outline-color: var(--hui-field-bg); }
html[data-design-theme="silver-screen"] .accent-hui-field-bg { accent-color: var(--hui-field-bg); }
html[data-design-theme="silver-screen"] .color-hui-field-border { color: var(--hui-field-border); }
html[data-design-theme="silver-screen"] .bg-hui-field-border { background: var(--hui-field-border); }
html[data-design-theme="silver-screen"] .text-on-hui-field-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-field-border { border-color: var(--hui-field-border); }
html[data-design-theme="silver-screen"] .ring-hui-field-border { --ring-color: var(--hui-field-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-field-border { outline-color: var(--hui-field-border); }
html[data-design-theme="silver-screen"] .accent-hui-field-border { accent-color: var(--hui-field-border); }
html[data-design-theme="silver-screen"] .color-hui-field-border-hover { color: var(--hui-field-border-hover); }
html[data-design-theme="silver-screen"] .bg-hui-field-border-hover { background: var(--hui-field-border-hover); }
html[data-design-theme="silver-screen"] .text-on-hui-field-border-hover { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-field-border-hover { border-color: var(--hui-field-border-hover); }
html[data-design-theme="silver-screen"] .ring-hui-field-border-hover { --ring-color: var(--hui-field-border-hover); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-field-border-hover { outline-color: var(--hui-field-border-hover); }
html[data-design-theme="silver-screen"] .accent-hui-field-border-hover { accent-color: var(--hui-field-border-hover); }
html[data-design-theme="silver-screen"] .color-hui-field-focus-border { color: var(--hui-field-focus-border); }
html[data-design-theme="silver-screen"] .bg-hui-field-focus-border { background: var(--hui-field-focus-border); }
html[data-design-theme="silver-screen"] .text-on-hui-field-focus-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-field-focus-border { border-color: var(--hui-field-focus-border); }
html[data-design-theme="silver-screen"] .ring-hui-field-focus-border { --ring-color: var(--hui-field-focus-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-field-focus-border { outline-color: var(--hui-field-focus-border); }
html[data-design-theme="silver-screen"] .accent-hui-field-focus-border { accent-color: var(--hui-field-focus-border); }
html[data-design-theme="silver-screen"] .color-hui-field-color { color: var(--hui-field-color); }
html[data-design-theme="silver-screen"] .bg-hui-field-color { background: var(--hui-field-color); }
html[data-design-theme="silver-screen"] .text-on-hui-field-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-field-color { border-color: var(--hui-field-color); }
html[data-design-theme="silver-screen"] .ring-hui-field-color { --ring-color: var(--hui-field-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-field-color { outline-color: var(--hui-field-color); }
html[data-design-theme="silver-screen"] .accent-hui-field-color { accent-color: var(--hui-field-color); }
html[data-design-theme="silver-screen"] .color-hui-combo-placeholder-color { color: var(--hui-combo-placeholder-color); }
html[data-design-theme="silver-screen"] .bg-hui-combo-placeholder-color { background: var(--hui-combo-placeholder-color); }
html[data-design-theme="silver-screen"] .text-on-hui-combo-placeholder-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-combo-placeholder-color { border-color: var(--hui-combo-placeholder-color); }
html[data-design-theme="silver-screen"] .ring-hui-combo-placeholder-color { --ring-color: var(--hui-combo-placeholder-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-combo-placeholder-color { outline-color: var(--hui-combo-placeholder-color); }
html[data-design-theme="silver-screen"] .accent-hui-combo-placeholder-color { accent-color: var(--hui-combo-placeholder-color); }
html[data-design-theme="silver-screen"] .color-hui-combo-btn-color { color: var(--hui-combo-btn-color); }
html[data-design-theme="silver-screen"] .bg-hui-combo-btn-color { background: var(--hui-combo-btn-color); }
html[data-design-theme="silver-screen"] .text-on-hui-combo-btn-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-combo-btn-color { border-color: var(--hui-combo-btn-color); }
html[data-design-theme="silver-screen"] .ring-hui-combo-btn-color { --ring-color: var(--hui-combo-btn-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-combo-btn-color { outline-color: var(--hui-combo-btn-color); }
html[data-design-theme="silver-screen"] .accent-hui-combo-btn-color { accent-color: var(--hui-combo-btn-color); }
html[data-design-theme="silver-screen"] .color-hui-dialog-bg { color: var(--hui-dialog-bg); }
html[data-design-theme="silver-screen"] .bg-hui-dialog-bg { background: var(--hui-dialog-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-dialog-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-dialog-bg { border-color: var(--hui-dialog-bg); }
html[data-design-theme="silver-screen"] .ring-hui-dialog-bg { --ring-color: var(--hui-dialog-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-dialog-bg { outline-color: var(--hui-dialog-bg); }
html[data-design-theme="silver-screen"] .accent-hui-dialog-bg { accent-color: var(--hui-dialog-bg); }
html[data-design-theme="silver-screen"] .color-hui-dialog-title-color { color: var(--hui-dialog-title-color); }
html[data-design-theme="silver-screen"] .bg-hui-dialog-title-color { background: var(--hui-dialog-title-color); }
html[data-design-theme="silver-screen"] .text-on-hui-dialog-title-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-dialog-title-color { border-color: var(--hui-dialog-title-color); }
html[data-design-theme="silver-screen"] .ring-hui-dialog-title-color { --ring-color: var(--hui-dialog-title-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-dialog-title-color { outline-color: var(--hui-dialog-title-color); }
html[data-design-theme="silver-screen"] .accent-hui-dialog-title-color { accent-color: var(--hui-dialog-title-color); }
html[data-design-theme="silver-screen"] .color-hui-dialog-body-color { color: var(--hui-dialog-body-color); }
html[data-design-theme="silver-screen"] .bg-hui-dialog-body-color { background: var(--hui-dialog-body-color); }
html[data-design-theme="silver-screen"] .text-on-hui-dialog-body-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-dialog-body-color { border-color: var(--hui-dialog-body-color); }
html[data-design-theme="silver-screen"] .ring-hui-dialog-body-color { --ring-color: var(--hui-dialog-body-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-dialog-body-color { outline-color: var(--hui-dialog-body-color); }
html[data-design-theme="silver-screen"] .accent-hui-dialog-body-color { accent-color: var(--hui-dialog-body-color); }
html[data-design-theme="silver-screen"] .color-hui-dialog-backdrop { color: var(--hui-dialog-backdrop); }
html[data-design-theme="silver-screen"] .bg-hui-dialog-backdrop { background: var(--hui-dialog-backdrop); }
html[data-design-theme="silver-screen"] .text-on-hui-dialog-backdrop { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-dialog-backdrop { border-color: var(--hui-dialog-backdrop); }
html[data-design-theme="silver-screen"] .ring-hui-dialog-backdrop { --ring-color: var(--hui-dialog-backdrop); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-dialog-backdrop { outline-color: var(--hui-dialog-backdrop); }
html[data-design-theme="silver-screen"] .accent-hui-dialog-backdrop { accent-color: var(--hui-dialog-backdrop); }
html[data-design-theme="silver-screen"] .color-hui-showcase-accent { color: var(--hui-showcase-accent); }
html[data-design-theme="silver-screen"] .bg-hui-showcase-accent { background: var(--hui-showcase-accent); }
html[data-design-theme="silver-screen"] .text-on-hui-showcase-accent { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-showcase-accent { border-color: var(--hui-showcase-accent); }
html[data-design-theme="silver-screen"] .ring-hui-showcase-accent { --ring-color: var(--hui-showcase-accent); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-showcase-accent { outline-color: var(--hui-showcase-accent); }
html[data-design-theme="silver-screen"] .accent-hui-showcase-accent { accent-color: var(--hui-showcase-accent); }
html[data-design-theme="silver-screen"] .color-hui-showcase-bg { color: var(--hui-showcase-bg); }
html[data-design-theme="silver-screen"] .bg-hui-showcase-bg { background: var(--hui-showcase-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-showcase-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-showcase-bg { border-color: var(--hui-showcase-bg); }
html[data-design-theme="silver-screen"] .ring-hui-showcase-bg { --ring-color: var(--hui-showcase-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-showcase-bg { outline-color: var(--hui-showcase-bg); }
html[data-design-theme="silver-screen"] .accent-hui-showcase-bg { accent-color: var(--hui-showcase-bg); }
html[data-design-theme="silver-screen"] .color-hui-showcase-border { color: var(--hui-showcase-border); }
html[data-design-theme="silver-screen"] .bg-hui-showcase-border { background: var(--hui-showcase-border); }
html[data-design-theme="silver-screen"] .text-on-hui-showcase-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-showcase-border { border-color: var(--hui-showcase-border); }
html[data-design-theme="silver-screen"] .ring-hui-showcase-border { --ring-color: var(--hui-showcase-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-showcase-border { outline-color: var(--hui-showcase-border); }
html[data-design-theme="silver-screen"] .accent-hui-showcase-border { accent-color: var(--hui-showcase-border); }
html[data-design-theme="silver-screen"] .color-hui-showcase-cell-bg { color: var(--hui-showcase-cell-bg); }
html[data-design-theme="silver-screen"] .bg-hui-showcase-cell-bg { background: var(--hui-showcase-cell-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-showcase-cell-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-showcase-cell-bg { border-color: var(--hui-showcase-cell-bg); }
html[data-design-theme="silver-screen"] .ring-hui-showcase-cell-bg { --ring-color: var(--hui-showcase-cell-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-showcase-cell-bg { outline-color: var(--hui-showcase-cell-bg); }
html[data-design-theme="silver-screen"] .accent-hui-showcase-cell-bg { accent-color: var(--hui-showcase-cell-bg); }
html[data-design-theme="silver-screen"] .color-hui-showcase-cell-border { color: var(--hui-showcase-cell-border); }
html[data-design-theme="silver-screen"] .bg-hui-showcase-cell-border { background: var(--hui-showcase-cell-border); }
html[data-design-theme="silver-screen"] .text-on-hui-showcase-cell-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-showcase-cell-border { border-color: var(--hui-showcase-cell-border); }
html[data-design-theme="silver-screen"] .ring-hui-showcase-cell-border { --ring-color: var(--hui-showcase-cell-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-showcase-cell-border { outline-color: var(--hui-showcase-cell-border); }
html[data-design-theme="silver-screen"] .accent-hui-showcase-cell-border { accent-color: var(--hui-showcase-cell-border); }
html[data-design-theme="silver-screen"] .color-hui-showcase-label-color { color: var(--hui-showcase-label-color); }
html[data-design-theme="silver-screen"] .bg-hui-showcase-label-color { background: var(--hui-showcase-label-color); }
html[data-design-theme="silver-screen"] .text-on-hui-showcase-label-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-showcase-label-color { border-color: var(--hui-showcase-label-color); }
html[data-design-theme="silver-screen"] .ring-hui-showcase-label-color { --ring-color: var(--hui-showcase-label-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-showcase-label-color { outline-color: var(--hui-showcase-label-color); }
html[data-design-theme="silver-screen"] .accent-hui-showcase-label-color { accent-color: var(--hui-showcase-label-color); }

html[data-design-theme="silver-screen"] .color-danger { color: var(--semantic-danger-accent); }
html[data-design-theme="silver-screen"] .bg-danger { background: var(--semantic-danger-accent); }
html[data-design-theme="silver-screen"] .text-on-danger { color: var(--white); }
html[data-design-theme="silver-screen"] .border-danger { border-color: var(--semantic-danger-accent); }
html[data-design-theme="silver-screen"] .ring-danger { --ring-color: var(--semantic-danger-accent); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-danger { outline-color: var(--semantic-danger-accent); }
html[data-design-theme="silver-screen"] .accent-danger { accent-color: var(--semantic-danger-accent); }
html[data-design-theme="silver-screen"] .color-primary { color: var(--semantic-primary-accent); }
html[data-design-theme="silver-screen"] .bg-primary { background: var(--semantic-primary-accent); }
html[data-design-theme="silver-screen"] .text-on-primary { color: var(--white); }
html[data-design-theme="silver-screen"] .border-primary { border-color: var(--semantic-primary-accent); }
html[data-design-theme="silver-screen"] .ring-primary { --ring-color: var(--semantic-primary-accent); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-primary { outline-color: var(--semantic-primary-accent); }
html[data-design-theme="silver-screen"] .accent-primary { accent-color: var(--semantic-primary-accent); }
html[data-design-theme="silver-screen"] .color-brand { color: var(--semantic-brand-accent); }
html[data-design-theme="silver-screen"] .bg-brand { background: var(--semantic-brand-accent); }
html[data-design-theme="silver-screen"] .text-on-brand { color: var(--white); }
html[data-design-theme="silver-screen"] .border-brand { border-color: var(--semantic-brand-accent); }
html[data-design-theme="silver-screen"] .ring-brand { --ring-color: var(--semantic-brand-accent); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-brand { outline-color: var(--semantic-brand-accent); }
html[data-design-theme="silver-screen"] .accent-brand { accent-color: var(--semantic-brand-accent); }

html[data-design-theme="silver-screen"] .color-space-0-mid { color: var(--space-0-mid); }
html[data-design-theme="silver-screen"] .bg-space-0-mid { background: var(--space-0-mid); }
html[data-design-theme="silver-screen"] .text-on-space-0-mid { color: var(--text); }
html[data-design-theme="silver-screen"] .border-space-0-mid { border-color: var(--space-0-mid); }
html[data-design-theme="silver-screen"] .ring-space-0-mid { --ring-color: var(--space-0-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-space-0-mid { outline-color: var(--space-0-mid); }
html[data-design-theme="silver-screen"] .accent-space-0-mid { accent-color: var(--space-0-mid); }
html[data-design-theme="silver-screen"] .color-space-1-mid { color: var(--space-1-mid); }
html[data-design-theme="silver-screen"] .bg-space-1-mid { background: var(--space-1-mid); }
html[data-design-theme="silver-screen"] .text-on-space-1-mid { color: var(--text); }
html[data-design-theme="silver-screen"] .border-space-1-mid { border-color: var(--space-1-mid); }
html[data-design-theme="silver-screen"] .ring-space-1-mid { --ring-color: var(--space-1-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-space-1-mid { outline-color: var(--space-1-mid); }
html[data-design-theme="silver-screen"] .accent-space-1-mid { accent-color: var(--space-1-mid); }
html[data-design-theme="silver-screen"] .color-space-2-mid { color: var(--space-2-mid); }
html[data-design-theme="silver-screen"] .bg-space-2-mid { background: var(--space-2-mid); }
html[data-design-theme="silver-screen"] .text-on-space-2-mid { color: var(--text); }
html[data-design-theme="silver-screen"] .border-space-2-mid { border-color: var(--space-2-mid); }
html[data-design-theme="silver-screen"] .ring-space-2-mid { --ring-color: var(--space-2-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-space-2-mid { outline-color: var(--space-2-mid); }
html[data-design-theme="silver-screen"] .accent-space-2-mid { accent-color: var(--space-2-mid); }
html[data-design-theme="silver-screen"] .color-space-4-mid { color: var(--space-4-mid); }
html[data-design-theme="silver-screen"] .bg-space-4-mid { background: var(--space-4-mid); }
html[data-design-theme="silver-screen"] .text-on-space-4-mid { color: var(--text); }
html[data-design-theme="silver-screen"] .border-space-4-mid { border-color: var(--space-4-mid); }
html[data-design-theme="silver-screen"] .ring-space-4-mid { --ring-color: var(--space-4-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-space-4-mid { outline-color: var(--space-4-mid); }
html[data-design-theme="silver-screen"] .accent-space-4-mid { accent-color: var(--space-4-mid); }
html[data-design-theme="silver-screen"] .color-space-5-mid { color: var(--space-5-mid); }
html[data-design-theme="silver-screen"] .bg-space-5-mid { background: var(--space-5-mid); }
html[data-design-theme="silver-screen"] .text-on-space-5-mid { color: var(--text); }
html[data-design-theme="silver-screen"] .border-space-5-mid { border-color: var(--space-5-mid); }
html[data-design-theme="silver-screen"] .ring-space-5-mid { --ring-color: var(--space-5-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-space-5-mid { outline-color: var(--space-5-mid); }
html[data-design-theme="silver-screen"] .accent-space-5-mid { accent-color: var(--space-5-mid); }
html[data-design-theme="silver-screen"] .color-space-7-mid { color: var(--space-7-mid); }
html[data-design-theme="silver-screen"] .bg-space-7-mid { background: var(--space-7-mid); }
html[data-design-theme="silver-screen"] .text-on-space-7-mid { color: var(--text); }
html[data-design-theme="silver-screen"] .border-space-7-mid { border-color: var(--space-7-mid); }
html[data-design-theme="silver-screen"] .ring-space-7-mid { --ring-color: var(--space-7-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-space-7-mid { outline-color: var(--space-7-mid); }
html[data-design-theme="silver-screen"] .accent-space-7-mid { accent-color: var(--space-7-mid); }
html[data-design-theme="silver-screen"] .color-space-32-mid { color: var(--space-32-mid); }
html[data-design-theme="silver-screen"] .bg-space-32-mid { background: var(--space-32-mid); }
html[data-design-theme="silver-screen"] .text-on-space-32-mid { color: var(--text); }
html[data-design-theme="silver-screen"] .border-space-32-mid { border-color: var(--space-32-mid); }
html[data-design-theme="silver-screen"] .ring-space-32-mid { --ring-color: var(--space-32-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-space-32-mid { outline-color: var(--space-32-mid); }
html[data-design-theme="silver-screen"] .accent-space-32-mid { accent-color: var(--space-32-mid); }
html[data-design-theme="silver-screen"] .color-space-37-mid { color: var(--space-37-mid); }
html[data-design-theme="silver-screen"] .bg-space-37-mid { background: var(--space-37-mid); }
html[data-design-theme="silver-screen"] .text-on-space-37-mid { color: var(--text); }
html[data-design-theme="silver-screen"] .border-space-37-mid { border-color: var(--space-37-mid); }
html[data-design-theme="silver-screen"] .ring-space-37-mid { --ring-color: var(--space-37-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-space-37-mid { outline-color: var(--space-37-mid); }
html[data-design-theme="silver-screen"] .accent-space-37-mid { accent-color: var(--space-37-mid); }
html[data-design-theme="silver-screen"] .color-space-52-mid { color: var(--space-52-mid); }
html[data-design-theme="silver-screen"] .bg-space-52-mid { background: var(--space-52-mid); }
html[data-design-theme="silver-screen"] .text-on-space-52-mid { color: var(--text); }
html[data-design-theme="silver-screen"] .border-space-52-mid { border-color: var(--space-52-mid); }
html[data-design-theme="silver-screen"] .ring-space-52-mid { --ring-color: var(--space-52-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-space-52-mid { outline-color: var(--space-52-mid); }
html[data-design-theme="silver-screen"] .accent-space-52-mid { accent-color: var(--space-52-mid); }
html[data-design-theme="silver-screen"] .color-size-space-1-mid { color: var(--size-space-1-mid); }
html[data-design-theme="silver-screen"] .bg-size-space-1-mid { background: var(--size-space-1-mid); }
html[data-design-theme="silver-screen"] .text-on-size-space-1-mid { color: var(--text); }
html[data-design-theme="silver-screen"] .border-size-space-1-mid { border-color: var(--size-space-1-mid); }
html[data-design-theme="silver-screen"] .ring-size-space-1-mid { --ring-color: var(--size-space-1-mid); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-size-space-1-mid { outline-color: var(--size-space-1-mid); }
html[data-design-theme="silver-screen"] .accent-size-space-1-mid { accent-color: var(--size-space-1-mid); }
html[data-design-theme="silver-screen"] .color-gray-100-lerp { color: var(--gray-100-lerp); }
html[data-design-theme="silver-screen"] .bg-gray-100-lerp { background: var(--gray-100-lerp); }
html[data-design-theme="silver-screen"] .text-on-gray-100-lerp { color: var(--black); }
html[data-design-theme="silver-screen"] .border-gray-100-lerp { border-color: var(--gray-100-lerp); }
html[data-design-theme="silver-screen"] .ring-gray-100-lerp { --ring-color: var(--gray-100-lerp); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-gray-100-lerp { outline-color: var(--gray-100-lerp); }
html[data-design-theme="silver-screen"] .accent-gray-100-lerp { accent-color: var(--gray-100-lerp); }
html[data-design-theme="silver-screen"] .color-slate-50 { color: var(--slate-50); }
html[data-design-theme="silver-screen"] .bg-slate-50 { background: var(--slate-50); }
html[data-design-theme="silver-screen"] .text-on-slate-50 { color: var(--black); }
html[data-design-theme="silver-screen"] .border-slate-50 { border-color: var(--slate-50); }
html[data-design-theme="silver-screen"] .ring-slate-50 { --ring-color: var(--slate-50); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-slate-50 { outline-color: var(--slate-50); }
html[data-design-theme="silver-screen"] .accent-slate-50 { accent-color: var(--slate-50); }
html[data-design-theme="silver-screen"] .color-slate-100 { color: var(--slate-100); }
html[data-design-theme="silver-screen"] .bg-slate-100 { background: var(--slate-100); }
html[data-design-theme="silver-screen"] .text-on-slate-100 { color: var(--black); }
html[data-design-theme="silver-screen"] .border-slate-100 { border-color: var(--slate-100); }
html[data-design-theme="silver-screen"] .ring-slate-100 { --ring-color: var(--slate-100); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-slate-100 { outline-color: var(--slate-100); }
html[data-design-theme="silver-screen"] .accent-slate-100 { accent-color: var(--slate-100); }
html[data-design-theme="silver-screen"] .color-slate-200 { color: var(--slate-200); }
html[data-design-theme="silver-screen"] .bg-slate-200 { background: var(--slate-200); }
html[data-design-theme="silver-screen"] .text-on-slate-200 { color: var(--black); }
html[data-design-theme="silver-screen"] .border-slate-200 { border-color: var(--slate-200); }
html[data-design-theme="silver-screen"] .ring-slate-200 { --ring-color: var(--slate-200); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-slate-200 { outline-color: var(--slate-200); }
html[data-design-theme="silver-screen"] .accent-slate-200 { accent-color: var(--slate-200); }
html[data-design-theme="silver-screen"] .color-slate-300 { color: var(--slate-300); }
html[data-design-theme="silver-screen"] .bg-slate-300 { background: var(--slate-300); }
html[data-design-theme="silver-screen"] .text-on-slate-300 { color: var(--black); }
html[data-design-theme="silver-screen"] .border-slate-300 { border-color: var(--slate-300); }
html[data-design-theme="silver-screen"] .ring-slate-300 { --ring-color: var(--slate-300); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-slate-300 { outline-color: var(--slate-300); }
html[data-design-theme="silver-screen"] .accent-slate-300 { accent-color: var(--slate-300); }
html[data-design-theme="silver-screen"] .color-slate-400 { color: var(--slate-400); }
html[data-design-theme="silver-screen"] .bg-slate-400 { background: var(--slate-400); }
html[data-design-theme="silver-screen"] .text-on-slate-400 { color: var(--black); }
html[data-design-theme="silver-screen"] .border-slate-400 { border-color: var(--slate-400); }
html[data-design-theme="silver-screen"] .ring-slate-400 { --ring-color: var(--slate-400); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-slate-400 { outline-color: var(--slate-400); }
html[data-design-theme="silver-screen"] .accent-slate-400 { accent-color: var(--slate-400); }
html[data-design-theme="silver-screen"] .color-slate-500 { color: var(--slate-500); }
html[data-design-theme="silver-screen"] .bg-slate-500 { background: var(--slate-500); }
html[data-design-theme="silver-screen"] .text-on-slate-500 { color: var(--white); }
html[data-design-theme="silver-screen"] .border-slate-500 { border-color: var(--slate-500); }
html[data-design-theme="silver-screen"] .ring-slate-500 { --ring-color: var(--slate-500); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-slate-500 { outline-color: var(--slate-500); }
html[data-design-theme="silver-screen"] .accent-slate-500 { accent-color: var(--slate-500); }
html[data-design-theme="silver-screen"] .color-slate-600 { color: var(--slate-600); }
html[data-design-theme="silver-screen"] .bg-slate-600 { background: var(--slate-600); }
html[data-design-theme="silver-screen"] .text-on-slate-600 { color: var(--white); }
html[data-design-theme="silver-screen"] .border-slate-600 { border-color: var(--slate-600); }
html[data-design-theme="silver-screen"] .ring-slate-600 { --ring-color: var(--slate-600); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-slate-600 { outline-color: var(--slate-600); }
html[data-design-theme="silver-screen"] .accent-slate-600 { accent-color: var(--slate-600); }
html[data-design-theme="silver-screen"] .color-slate-700 { color: var(--slate-700); }
html[data-design-theme="silver-screen"] .bg-slate-700 { background: var(--slate-700); }
html[data-design-theme="silver-screen"] .text-on-slate-700 { color: var(--white); }
html[data-design-theme="silver-screen"] .border-slate-700 { border-color: var(--slate-700); }
html[data-design-theme="silver-screen"] .ring-slate-700 { --ring-color: var(--slate-700); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-slate-700 { outline-color: var(--slate-700); }
html[data-design-theme="silver-screen"] .accent-slate-700 { accent-color: var(--slate-700); }
html[data-design-theme="silver-screen"] .color-slate-800 { color: var(--slate-800); }
html[data-design-theme="silver-screen"] .bg-slate-800 { background: var(--slate-800); }
html[data-design-theme="silver-screen"] .text-on-slate-800 { color: var(--white); }
html[data-design-theme="silver-screen"] .border-slate-800 { border-color: var(--slate-800); }
html[data-design-theme="silver-screen"] .ring-slate-800 { --ring-color: var(--slate-800); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-slate-800 { outline-color: var(--slate-800); }
html[data-design-theme="silver-screen"] .accent-slate-800 { accent-color: var(--slate-800); }
html[data-design-theme="silver-screen"] .color-slate-900 { color: var(--slate-900); }
html[data-design-theme="silver-screen"] .bg-slate-900 { background: var(--slate-900); }
html[data-design-theme="silver-screen"] .text-on-slate-900 { color: var(--white); }
html[data-design-theme="silver-screen"] .border-slate-900 { border-color: var(--slate-900); }
html[data-design-theme="silver-screen"] .ring-slate-900 { --ring-color: var(--slate-900); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-slate-900 { outline-color: var(--slate-900); }
html[data-design-theme="silver-screen"] .accent-slate-900 { accent-color: var(--slate-900); }
html[data-design-theme="silver-screen"] .color-slate-950 { color: var(--slate-950); }
html[data-design-theme="silver-screen"] .bg-slate-950 { background: var(--slate-950); }
html[data-design-theme="silver-screen"] .text-on-slate-950 { color: var(--white); }
html[data-design-theme="silver-screen"] .border-slate-950 { border-color: var(--slate-950); }
html[data-design-theme="silver-screen"] .ring-slate-950 { --ring-color: var(--slate-950); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-slate-950 { outline-color: var(--slate-950); }
html[data-design-theme="silver-screen"] .accent-slate-950 { accent-color: var(--slate-950); }
html[data-design-theme="silver-screen"] .color-micro-label-color { color: var(--micro-label-color); }
html[data-design-theme="silver-screen"] .bg-micro-label-color { background: var(--micro-label-color); }
html[data-design-theme="silver-screen"] .text-on-micro-label-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-micro-label-color { border-color: var(--micro-label-color); }
html[data-design-theme="silver-screen"] .ring-micro-label-color { --ring-color: var(--micro-label-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-micro-label-color { outline-color: var(--micro-label-color); }
html[data-design-theme="silver-screen"] .accent-micro-label-color { accent-color: var(--micro-label-color); }
html[data-design-theme="silver-screen"] .color-on-semantic-color { color: var(--on-semantic-color); }
html[data-design-theme="silver-screen"] .bg-on-semantic-color { background: var(--on-semantic-color); }
html[data-design-theme="silver-screen"] .text-on-on-semantic-color { color: var(--black); }
html[data-design-theme="silver-screen"] .border-on-semantic-color { border-color: var(--on-semantic-color); }
html[data-design-theme="silver-screen"] .ring-on-semantic-color { --ring-color: var(--on-semantic-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-on-semantic-color { outline-color: var(--on-semantic-color); }
html[data-design-theme="silver-screen"] .accent-on-semantic-color { accent-color: var(--on-semantic-color); }
html[data-design-theme="silver-screen"] .color-overlay-highlight { color: var(--overlay-highlight); }
html[data-design-theme="silver-screen"] .bg-overlay-highlight { background: var(--overlay-highlight); }
html[data-design-theme="silver-screen"] .text-on-overlay-highlight { color: var(--black); }
html[data-design-theme="silver-screen"] .border-overlay-highlight { border-color: var(--overlay-highlight); }
html[data-design-theme="silver-screen"] .ring-overlay-highlight { --ring-color: var(--overlay-highlight); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-overlay-highlight { outline-color: var(--overlay-highlight); }
html[data-design-theme="silver-screen"] .accent-overlay-highlight { accent-color: var(--overlay-highlight); }
html[data-design-theme="silver-screen"] .color-overlay-shadow { color: var(--overlay-shadow); }
html[data-design-theme="silver-screen"] .bg-overlay-shadow { background: var(--overlay-shadow); }
html[data-design-theme="silver-screen"] .text-on-overlay-shadow { color: var(--white); }
html[data-design-theme="silver-screen"] .border-overlay-shadow { border-color: var(--overlay-shadow); }
html[data-design-theme="silver-screen"] .ring-overlay-shadow { --ring-color: var(--overlay-shadow); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-overlay-shadow { outline-color: var(--overlay-shadow); }
html[data-design-theme="silver-screen"] .accent-overlay-shadow { accent-color: var(--overlay-shadow); }
html[data-design-theme="silver-screen"] .color-overlay-backdrop { color: var(--overlay-backdrop); }
html[data-design-theme="silver-screen"] .bg-overlay-backdrop { background: var(--overlay-backdrop); }
html[data-design-theme="silver-screen"] .text-on-overlay-backdrop { color: var(--white); }
html[data-design-theme="silver-screen"] .border-overlay-backdrop { border-color: var(--overlay-backdrop); }
html[data-design-theme="silver-screen"] .ring-overlay-backdrop { --ring-color: var(--overlay-backdrop); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-overlay-backdrop { outline-color: var(--overlay-backdrop); }
html[data-design-theme="silver-screen"] .accent-overlay-backdrop { accent-color: var(--overlay-backdrop); }
html[data-design-theme="silver-screen"] .color-card-border { color: var(--card-border); }
html[data-design-theme="silver-screen"] .bg-card-border { background: var(--card-border); }
html[data-design-theme="silver-screen"] .text-on-card-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-border { border-color: var(--card-border); }
html[data-design-theme="silver-screen"] .ring-card-border { --ring-color: var(--card-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-border { outline-color: var(--card-border); }
html[data-design-theme="silver-screen"] .accent-card-border { accent-color: var(--card-border); }
html[data-design-theme="silver-screen"] .color-card-header-color { color: var(--card-header-color); }
html[data-design-theme="silver-screen"] .bg-card-header-color { background: var(--card-header-color); }
html[data-design-theme="silver-screen"] .text-on-card-header-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-header-color { border-color: var(--card-header-color); }
html[data-design-theme="silver-screen"] .ring-card-header-color { --ring-color: var(--card-header-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-header-color { outline-color: var(--card-header-color); }
html[data-design-theme="silver-screen"] .accent-card-header-color { accent-color: var(--card-header-color); }
html[data-design-theme="silver-screen"] .dark .text-on-card-header-color { color: var(--black); }
html[data-design-theme="silver-screen"] .color-card-footer-color { color: var(--card-footer-color); }
html[data-design-theme="silver-screen"] .bg-card-footer-color { background: var(--card-footer-color); }
html[data-design-theme="silver-screen"] .text-on-card-footer-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-footer-color { border-color: var(--card-footer-color); }
html[data-design-theme="silver-screen"] .ring-card-footer-color { --ring-color: var(--card-footer-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-footer-color { outline-color: var(--card-footer-color); }
html[data-design-theme="silver-screen"] .accent-card-footer-color { accent-color: var(--card-footer-color); }
html[data-design-theme="silver-screen"] .dark .text-on-card-footer-color { color: var(--black); }
html[data-design-theme="silver-screen"] .color-card-hover-background { color: var(--card-hover-background); }
html[data-design-theme="silver-screen"] .bg-card-hover-background { background: var(--card-hover-background); }
html[data-design-theme="silver-screen"] .text-on-card-hover-background { color: var(--black); }
html[data-design-theme="silver-screen"] .border-card-hover-background { border-color: var(--card-hover-background); }
html[data-design-theme="silver-screen"] .ring-card-hover-background { --ring-color: var(--card-hover-background); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-hover-background { outline-color: var(--card-hover-background); }
html[data-design-theme="silver-screen"] .accent-card-hover-background { accent-color: var(--card-hover-background); }
html[data-design-theme="silver-screen"] .dark .text-on-card-hover-background { color: var(--white); }
html[data-design-theme="silver-screen"] .color-card-accent-color { color: var(--card-accent-color); }
html[data-design-theme="silver-screen"] .bg-card-accent-color { background: var(--card-accent-color); }
html[data-design-theme="silver-screen"] .text-on-card-accent-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-accent-color { border-color: var(--card-accent-color); }
html[data-design-theme="silver-screen"] .ring-card-accent-color { --ring-color: var(--card-accent-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-accent-color { outline-color: var(--card-accent-color); }
html[data-design-theme="silver-screen"] .accent-card-accent-color { accent-color: var(--card-accent-color); }
html[data-design-theme="silver-screen"] .color-card-filled-background { color: var(--card-filled-background); }
html[data-design-theme="silver-screen"] .bg-card-filled-background { background: var(--card-filled-background); }
html[data-design-theme="silver-screen"] .text-on-card-filled-background { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-filled-background { border-color: var(--card-filled-background); }
html[data-design-theme="silver-screen"] .ring-card-filled-background { --ring-color: var(--card-filled-background); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-filled-background { outline-color: var(--card-filled-background); }
html[data-design-theme="silver-screen"] .accent-card-filled-background { accent-color: var(--card-filled-background); }
html[data-design-theme="silver-screen"] .color-card-filled-color { color: var(--card-filled-color); }
html[data-design-theme="silver-screen"] .bg-card-filled-color { background: var(--card-filled-color); }
html[data-design-theme="silver-screen"] .text-on-card-filled-color { color: var(--black); }
html[data-design-theme="silver-screen"] .border-card-filled-color { border-color: var(--card-filled-color); }
html[data-design-theme="silver-screen"] .ring-card-filled-color { --ring-color: var(--card-filled-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-filled-color { outline-color: var(--card-filled-color); }
html[data-design-theme="silver-screen"] .accent-card-filled-color { accent-color: var(--card-filled-color); }
html[data-design-theme="silver-screen"] .dark .text-on-card-filled-color { color: var(--white); }
html[data-design-theme="silver-screen"] .color-card-filled-hover-background { color: var(--card-filled-hover-background); }
html[data-design-theme="silver-screen"] .bg-card-filled-hover-background { background: var(--card-filled-hover-background); }
html[data-design-theme="silver-screen"] .text-on-card-filled-hover-background { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-filled-hover-background { border-color: var(--card-filled-hover-background); }
html[data-design-theme="silver-screen"] .ring-card-filled-hover-background { --ring-color: var(--card-filled-hover-background); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-filled-hover-background { outline-color: var(--card-filled-hover-background); }
html[data-design-theme="silver-screen"] .accent-card-filled-hover-background { accent-color: var(--card-filled-hover-background); }
html[data-design-theme="silver-screen"] .color-card-body-padding { color: var(--card-body-padding); }
html[data-design-theme="silver-screen"] .bg-card-body-padding { background: var(--card-body-padding); }
html[data-design-theme="silver-screen"] .text-on-card-body-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-body-padding { border-color: var(--card-body-padding); }
html[data-design-theme="silver-screen"] .ring-card-body-padding { --ring-color: var(--card-body-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-body-padding { outline-color: var(--card-body-padding); }
html[data-design-theme="silver-screen"] .accent-card-body-padding { accent-color: var(--card-body-padding); }
html[data-design-theme="silver-screen"] .color-card-body-color { color: var(--card-body-color); }
html[data-design-theme="silver-screen"] .bg-card-body-color { background: var(--card-body-color); }
html[data-design-theme="silver-screen"] .text-on-card-body-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-body-color { border-color: var(--card-body-color); }
html[data-design-theme="silver-screen"] .ring-card-body-color { --ring-color: var(--card-body-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-body-color { outline-color: var(--card-body-color); }
html[data-design-theme="silver-screen"] .accent-card-body-color { accent-color: var(--card-body-color); }
html[data-design-theme="silver-screen"] .dark .text-on-card-body-color { color: var(--black); }
html[data-design-theme="silver-screen"] .color-card-body-filled-color { color: var(--card-body-filled-color); }
html[data-design-theme="silver-screen"] .bg-card-body-filled-color { background: var(--card-body-filled-color); }
html[data-design-theme="silver-screen"] .text-on-card-body-filled-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-body-filled-color { border-color: var(--card-body-filled-color); }
html[data-design-theme="silver-screen"] .ring-card-body-filled-color { --ring-color: var(--card-body-filled-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-body-filled-color { outline-color: var(--card-body-filled-color); }
html[data-design-theme="silver-screen"] .accent-card-body-filled-color { accent-color: var(--card-body-filled-color); }
html[data-design-theme="silver-screen"] .color-card-tag-padding { color: var(--card-tag-padding); }
html[data-design-theme="silver-screen"] .bg-card-tag-padding { background: var(--card-tag-padding); }
html[data-design-theme="silver-screen"] .text-on-card-tag-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-tag-padding { border-color: var(--card-tag-padding); }
html[data-design-theme="silver-screen"] .ring-card-tag-padding { --ring-color: var(--card-tag-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-tag-padding { outline-color: var(--card-tag-padding); }
html[data-design-theme="silver-screen"] .accent-card-tag-padding { accent-color: var(--card-tag-padding); }
html[data-design-theme="silver-screen"] .color-card-tag-background { color: var(--card-tag-background); }
html[data-design-theme="silver-screen"] .bg-card-tag-background { background: var(--card-tag-background); }
html[data-design-theme="silver-screen"] .text-on-card-tag-background { color: var(--black); }
html[data-design-theme="silver-screen"] .border-card-tag-background { border-color: var(--card-tag-background); }
html[data-design-theme="silver-screen"] .ring-card-tag-background { --ring-color: var(--card-tag-background); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-tag-background { outline-color: var(--card-tag-background); }
html[data-design-theme="silver-screen"] .accent-card-tag-background { accent-color: var(--card-tag-background); }
html[data-design-theme="silver-screen"] .dark .text-on-card-tag-background { color: var(--white); }
html[data-design-theme="silver-screen"] .color-card-tag-color { color: var(--card-tag-color); }
html[data-design-theme="silver-screen"] .bg-card-tag-color { background: var(--card-tag-color); }
html[data-design-theme="silver-screen"] .text-on-card-tag-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-tag-color { border-color: var(--card-tag-color); }
html[data-design-theme="silver-screen"] .ring-card-tag-color { --ring-color: var(--card-tag-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-tag-color { outline-color: var(--card-tag-color); }
html[data-design-theme="silver-screen"] .accent-card-tag-color { accent-color: var(--card-tag-color); }
html[data-design-theme="silver-screen"] .color-card-drop-shadow-color { color: var(--card-drop-shadow-color); }
html[data-design-theme="silver-screen"] .bg-card-drop-shadow-color { background: var(--card-drop-shadow-color); }
html[data-design-theme="silver-screen"] .text-on-card-drop-shadow-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-card-drop-shadow-color { border-color: var(--card-drop-shadow-color); }
html[data-design-theme="silver-screen"] .ring-card-drop-shadow-color { --ring-color: var(--card-drop-shadow-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-drop-shadow-color { outline-color: var(--card-drop-shadow-color); }
html[data-design-theme="silver-screen"] .accent-card-drop-shadow-color { accent-color: var(--card-drop-shadow-color); }
html[data-design-theme="silver-screen"] .color-card-separator-color { color: var(--card-separator-color); }
html[data-design-theme="silver-screen"] .bg-card-separator-color { background: var(--card-separator-color); }
html[data-design-theme="silver-screen"] .text-on-card-separator-color { color: var(--black); }
html[data-design-theme="silver-screen"] .border-card-separator-color { border-color: var(--card-separator-color); }
html[data-design-theme="silver-screen"] .ring-card-separator-color { --ring-color: var(--card-separator-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-card-separator-color { outline-color: var(--card-separator-color); }
html[data-design-theme="silver-screen"] .accent-card-separator-color { accent-color: var(--card-separator-color); }
html[data-design-theme="silver-screen"] .dark .text-on-card-separator-color { color: var(--white); }
html[data-design-theme="silver-screen"] .color-table-cell-padding { color: var(--table-cell-padding); }
html[data-design-theme="silver-screen"] .bg-table-cell-padding { background: var(--table-cell-padding); }
html[data-design-theme="silver-screen"] .text-on-table-cell-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-table-cell-padding { border-color: var(--table-cell-padding); }
html[data-design-theme="silver-screen"] .ring-table-cell-padding { --ring-color: var(--table-cell-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-table-cell-padding { outline-color: var(--table-cell-padding); }
html[data-design-theme="silver-screen"] .accent-table-cell-padding { accent-color: var(--table-cell-padding); }
html[data-design-theme="silver-screen"] .color-token-card-background { color: var(--token-card-background); }
html[data-design-theme="silver-screen"] .bg-token-card-background { background: var(--token-card-background); }
html[data-design-theme="silver-screen"] .text-on-token-card-background { color: var(--black); }
html[data-design-theme="silver-screen"] .border-token-card-background { border-color: var(--token-card-background); }
html[data-design-theme="silver-screen"] .ring-token-card-background { --ring-color: var(--token-card-background); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-token-card-background { outline-color: var(--token-card-background); }
html[data-design-theme="silver-screen"] .accent-token-card-background { accent-color: var(--token-card-background); }
html[data-design-theme="silver-screen"] .dark .text-on-token-card-background { color: var(--white); }
html[data-design-theme="silver-screen"] .color-token-card-border { color: var(--token-card-border); }
html[data-design-theme="silver-screen"] .bg-token-card-border { background: var(--token-card-border); }
html[data-design-theme="silver-screen"] .text-on-token-card-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-token-card-border { border-color: var(--token-card-border); }
html[data-design-theme="silver-screen"] .ring-token-card-border { --ring-color: var(--token-card-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-token-card-border { outline-color: var(--token-card-border); }
html[data-design-theme="silver-screen"] .accent-token-card-border { accent-color: var(--token-card-border); }
html[data-design-theme="silver-screen"] .color-token-card-title-color { color: var(--token-card-title-color); }
html[data-design-theme="silver-screen"] .bg-token-card-title-color { background: var(--token-card-title-color); }
html[data-design-theme="silver-screen"] .text-on-token-card-title-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-token-card-title-color { border-color: var(--token-card-title-color); }
html[data-design-theme="silver-screen"] .ring-token-card-title-color { --ring-color: var(--token-card-title-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-token-card-title-color { outline-color: var(--token-card-title-color); }
html[data-design-theme="silver-screen"] .accent-token-card-title-color { accent-color: var(--token-card-title-color); }
html[data-design-theme="silver-screen"] .color-token-card-title-border-bottom { color: var(--token-card-title-border-bottom); }
html[data-design-theme="silver-screen"] .bg-token-card-title-border-bottom { background: var(--token-card-title-border-bottom); }
html[data-design-theme="silver-screen"] .text-on-token-card-title-border-bottom { color: var(--white); }
html[data-design-theme="silver-screen"] .border-token-card-title-border-bottom { border-color: var(--token-card-title-border-bottom); }
html[data-design-theme="silver-screen"] .ring-token-card-title-border-bottom { --ring-color: var(--token-card-title-border-bottom); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-token-card-title-border-bottom { outline-color: var(--token-card-title-border-bottom); }
html[data-design-theme="silver-screen"] .accent-token-card-title-border-bottom { accent-color: var(--token-card-title-border-bottom); }
html[data-design-theme="silver-screen"] .color-token-row-padding { color: var(--token-row-padding); }
html[data-design-theme="silver-screen"] .bg-token-row-padding { background: var(--token-row-padding); }
html[data-design-theme="silver-screen"] .text-on-token-row-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-token-row-padding { border-color: var(--token-row-padding); }
html[data-design-theme="silver-screen"] .ring-token-row-padding { --ring-color: var(--token-row-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-token-row-padding { outline-color: var(--token-row-padding); }
html[data-design-theme="silver-screen"] .accent-token-row-padding { accent-color: var(--token-row-padding); }
html[data-design-theme="silver-screen"] .color-token-name-color { color: var(--token-name-color); }
html[data-design-theme="silver-screen"] .bg-token-name-color { background: var(--token-name-color); }
html[data-design-theme="silver-screen"] .text-on-token-name-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-token-name-color { border-color: var(--token-name-color); }
html[data-design-theme="silver-screen"] .ring-token-name-color { --ring-color: var(--token-name-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-token-name-color { outline-color: var(--token-name-color); }
html[data-design-theme="silver-screen"] .accent-token-name-color { accent-color: var(--token-name-color); }
html[data-design-theme="silver-screen"] .color-token-value-color { color: var(--token-value-color); }
html[data-design-theme="silver-screen"] .bg-token-value-color { background: var(--token-value-color); }
html[data-design-theme="silver-screen"] .text-on-token-value-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-token-value-color { border-color: var(--token-value-color); }
html[data-design-theme="silver-screen"] .ring-token-value-color { --ring-color: var(--token-value-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-token-value-color { outline-color: var(--token-value-color); }
html[data-design-theme="silver-screen"] .accent-token-value-color { accent-color: var(--token-value-color); }
html[data-design-theme="silver-screen"] .color-token-preview-color-border { color: var(--token-preview-color-border); }
html[data-design-theme="silver-screen"] .bg-token-preview-color-border { background: var(--token-preview-color-border); }
html[data-design-theme="silver-screen"] .text-on-token-preview-color-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-token-preview-color-border { border-color: var(--token-preview-color-border); }
html[data-design-theme="silver-screen"] .ring-token-preview-color-border { --ring-color: var(--token-preview-color-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-token-preview-color-border { outline-color: var(--token-preview-color-border); }
html[data-design-theme="silver-screen"] .accent-token-preview-color-border { accent-color: var(--token-preview-color-border); }
html[data-design-theme="silver-screen"] .color-token-preview-radius-border { color: var(--token-preview-radius-border); }
html[data-design-theme="silver-screen"] .bg-token-preview-radius-border { background: var(--token-preview-radius-border); }
html[data-design-theme="silver-screen"] .text-on-token-preview-radius-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-token-preview-radius-border { border-color: var(--token-preview-radius-border); }
html[data-design-theme="silver-screen"] .ring-token-preview-radius-border { --ring-color: var(--token-preview-radius-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-token-preview-radius-border { outline-color: var(--token-preview-radius-border); }
html[data-design-theme="silver-screen"] .accent-token-preview-radius-border { accent-color: var(--token-preview-radius-border); }
html[data-design-theme="silver-screen"] .color-btn-overlay-highlight { color: var(--btn-overlay-highlight); }
html[data-design-theme="silver-screen"] .bg-btn-overlay-highlight { background: var(--btn-overlay-highlight); }
html[data-design-theme="silver-screen"] .text-on-btn-overlay-highlight { color: var(--black); }
html[data-design-theme="silver-screen"] .border-btn-overlay-highlight { border-color: var(--btn-overlay-highlight); }
html[data-design-theme="silver-screen"] .ring-btn-overlay-highlight { --ring-color: var(--btn-overlay-highlight); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-btn-overlay-highlight { outline-color: var(--btn-overlay-highlight); }
html[data-design-theme="silver-screen"] .accent-btn-overlay-highlight { accent-color: var(--btn-overlay-highlight); }
html[data-design-theme="silver-screen"] .color-btn-overlay-shadow { color: var(--btn-overlay-shadow); }
html[data-design-theme="silver-screen"] .bg-btn-overlay-shadow { background: var(--btn-overlay-shadow); }
html[data-design-theme="silver-screen"] .text-on-btn-overlay-shadow { color: var(--white); }
html[data-design-theme="silver-screen"] .border-btn-overlay-shadow { border-color: var(--btn-overlay-shadow); }
html[data-design-theme="silver-screen"] .ring-btn-overlay-shadow { --ring-color: var(--btn-overlay-shadow); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-btn-overlay-shadow { outline-color: var(--btn-overlay-shadow); }
html[data-design-theme="silver-screen"] .accent-btn-overlay-shadow { accent-color: var(--btn-overlay-shadow); }
html[data-design-theme="silver-screen"] .color-toggle-icon-color { color: var(--toggle-icon-color); }
html[data-design-theme="silver-screen"] .bg-toggle-icon-color { background: var(--toggle-icon-color); }
html[data-design-theme="silver-screen"] .text-on-toggle-icon-color { color: var(--black); }
html[data-design-theme="silver-screen"] .border-toggle-icon-color { border-color: var(--toggle-icon-color); }
html[data-design-theme="silver-screen"] .ring-toggle-icon-color { --ring-color: var(--toggle-icon-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toggle-icon-color { outline-color: var(--toggle-icon-color); }
html[data-design-theme="silver-screen"] .accent-toggle-icon-color { accent-color: var(--toggle-icon-color); }
html[data-design-theme="silver-screen"] .color-toggle-transition { color: var(--toggle-transition); }
html[data-design-theme="silver-screen"] .bg-toggle-transition { background: var(--toggle-transition); }
html[data-design-theme="silver-screen"] .text-on-toggle-transition { color: var(--white); }
html[data-design-theme="silver-screen"] .border-toggle-transition { border-color: var(--toggle-transition); }
html[data-design-theme="silver-screen"] .ring-toggle-transition { --ring-color: var(--toggle-transition); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toggle-transition { outline-color: var(--toggle-transition); }
html[data-design-theme="silver-screen"] .accent-toggle-transition { accent-color: var(--toggle-transition); }
html[data-design-theme="silver-screen"] .color-badge-padding { color: var(--badge-padding); }
html[data-design-theme="silver-screen"] .bg-badge-padding { background: var(--badge-padding); }
html[data-design-theme="silver-screen"] .text-on-badge-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-badge-padding { border-color: var(--badge-padding); }
html[data-design-theme="silver-screen"] .ring-badge-padding { --ring-color: var(--badge-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-badge-padding { outline-color: var(--badge-padding); }
html[data-design-theme="silver-screen"] .accent-badge-padding { accent-color: var(--badge-padding); }
html[data-design-theme="silver-screen"] .color-toast-padding { color: var(--toast-padding); }
html[data-design-theme="silver-screen"] .bg-toast-padding { background: var(--toast-padding); }
html[data-design-theme="silver-screen"] .text-on-toast-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-toast-padding { border-color: var(--toast-padding); }
html[data-design-theme="silver-screen"] .ring-toast-padding { --ring-color: var(--toast-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toast-padding { outline-color: var(--toast-padding); }
html[data-design-theme="silver-screen"] .accent-toast-padding { accent-color: var(--toast-padding); }
html[data-design-theme="silver-screen"] .color-toast-bg { color: var(--toast-bg); }
html[data-design-theme="silver-screen"] .bg-toast-bg { background: var(--toast-bg); }
html[data-design-theme="silver-screen"] .text-on-toast-bg { color: var(--black); }
html[data-design-theme="silver-screen"] .border-toast-bg { border-color: var(--toast-bg); }
html[data-design-theme="silver-screen"] .ring-toast-bg { --ring-color: var(--toast-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toast-bg { outline-color: var(--toast-bg); }
html[data-design-theme="silver-screen"] .accent-toast-bg { accent-color: var(--toast-bg); }
html[data-design-theme="silver-screen"] .dark .text-on-toast-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .color-toast-bg-success { color: var(--toast-bg-success); }
html[data-design-theme="silver-screen"] .bg-toast-bg-success { background: var(--toast-bg-success); }
html[data-design-theme="silver-screen"] .text-on-toast-bg-success { color: var(--white); }
html[data-design-theme="silver-screen"] .border-toast-bg-success { border-color: var(--toast-bg-success); }
html[data-design-theme="silver-screen"] .ring-toast-bg-success { --ring-color: var(--toast-bg-success); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toast-bg-success { outline-color: var(--toast-bg-success); }
html[data-design-theme="silver-screen"] .accent-toast-bg-success { accent-color: var(--toast-bg-success); }
html[data-design-theme="silver-screen"] .color-toast-bg-error { color: var(--toast-bg-error); }
html[data-design-theme="silver-screen"] .bg-toast-bg-error { background: var(--toast-bg-error); }
html[data-design-theme="silver-screen"] .text-on-toast-bg-error { color: var(--white); }
html[data-design-theme="silver-screen"] .border-toast-bg-error { border-color: var(--toast-bg-error); }
html[data-design-theme="silver-screen"] .ring-toast-bg-error { --ring-color: var(--toast-bg-error); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toast-bg-error { outline-color: var(--toast-bg-error); }
html[data-design-theme="silver-screen"] .accent-toast-bg-error { accent-color: var(--toast-bg-error); }
html[data-design-theme="silver-screen"] .color-toast-bg-warning { color: var(--toast-bg-warning); }
html[data-design-theme="silver-screen"] .bg-toast-bg-warning { background: var(--toast-bg-warning); }
html[data-design-theme="silver-screen"] .text-on-toast-bg-warning { color: var(--white); }
html[data-design-theme="silver-screen"] .border-toast-bg-warning { border-color: var(--toast-bg-warning); }
html[data-design-theme="silver-screen"] .ring-toast-bg-warning { --ring-color: var(--toast-bg-warning); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toast-bg-warning { outline-color: var(--toast-bg-warning); }
html[data-design-theme="silver-screen"] .accent-toast-bg-warning { accent-color: var(--toast-bg-warning); }
html[data-design-theme="silver-screen"] .color-toast-bg-info { color: var(--toast-bg-info); }
html[data-design-theme="silver-screen"] .bg-toast-bg-info { background: var(--toast-bg-info); }
html[data-design-theme="silver-screen"] .text-on-toast-bg-info { color: var(--white); }
html[data-design-theme="silver-screen"] .border-toast-bg-info { border-color: var(--toast-bg-info); }
html[data-design-theme="silver-screen"] .ring-toast-bg-info { --ring-color: var(--toast-bg-info); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toast-bg-info { outline-color: var(--toast-bg-info); }
html[data-design-theme="silver-screen"] .accent-toast-bg-info { accent-color: var(--toast-bg-info); }
html[data-design-theme="silver-screen"] .color-toast-color { color: var(--toast-color); }
html[data-design-theme="silver-screen"] .bg-toast-color { background: var(--toast-color); }
html[data-design-theme="silver-screen"] .text-on-toast-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-toast-color { border-color: var(--toast-color); }
html[data-design-theme="silver-screen"] .ring-toast-color { --ring-color: var(--toast-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toast-color { outline-color: var(--toast-color); }
html[data-design-theme="silver-screen"] .accent-toast-color { accent-color: var(--toast-color); }
html[data-design-theme="silver-screen"] .dark .text-on-toast-color { color: var(--black); }
html[data-design-theme="silver-screen"] .color-toast-color-success { color: var(--toast-color-success); }
html[data-design-theme="silver-screen"] .bg-toast-color-success { background: var(--toast-color-success); }
html[data-design-theme="silver-screen"] .text-on-toast-color-success { color: var(--white); }
html[data-design-theme="silver-screen"] .border-toast-color-success { border-color: var(--toast-color-success); }
html[data-design-theme="silver-screen"] .ring-toast-color-success { --ring-color: var(--toast-color-success); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toast-color-success { outline-color: var(--toast-color-success); }
html[data-design-theme="silver-screen"] .accent-toast-color-success { accent-color: var(--toast-color-success); }
html[data-design-theme="silver-screen"] .color-toast-color-error { color: var(--toast-color-error); }
html[data-design-theme="silver-screen"] .bg-toast-color-error { background: var(--toast-color-error); }
html[data-design-theme="silver-screen"] .text-on-toast-color-error { color: var(--white); }
html[data-design-theme="silver-screen"] .border-toast-color-error { border-color: var(--toast-color-error); }
html[data-design-theme="silver-screen"] .ring-toast-color-error { --ring-color: var(--toast-color-error); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toast-color-error { outline-color: var(--toast-color-error); }
html[data-design-theme="silver-screen"] .accent-toast-color-error { accent-color: var(--toast-color-error); }
html[data-design-theme="silver-screen"] .color-toast-color-warning { color: var(--toast-color-warning); }
html[data-design-theme="silver-screen"] .bg-toast-color-warning { background: var(--toast-color-warning); }
html[data-design-theme="silver-screen"] .text-on-toast-color-warning { color: var(--white); }
html[data-design-theme="silver-screen"] .border-toast-color-warning { border-color: var(--toast-color-warning); }
html[data-design-theme="silver-screen"] .ring-toast-color-warning { --ring-color: var(--toast-color-warning); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toast-color-warning { outline-color: var(--toast-color-warning); }
html[data-design-theme="silver-screen"] .accent-toast-color-warning { accent-color: var(--toast-color-warning); }
html[data-design-theme="silver-screen"] .color-toast-color-info { color: var(--toast-color-info); }
html[data-design-theme="silver-screen"] .bg-toast-color-info { background: var(--toast-color-info); }
html[data-design-theme="silver-screen"] .text-on-toast-color-info { color: var(--white); }
html[data-design-theme="silver-screen"] .border-toast-color-info { border-color: var(--toast-color-info); }
html[data-design-theme="silver-screen"] .ring-toast-color-info { --ring-color: var(--toast-color-info); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-toast-color-info { outline-color: var(--toast-color-info); }
html[data-design-theme="silver-screen"] .accent-toast-color-info { accent-color: var(--toast-color-info); }
html[data-design-theme="silver-screen"] .color-tag-padding { color: var(--tag-padding); }
html[data-design-theme="silver-screen"] .bg-tag-padding { background: var(--tag-padding); }
html[data-design-theme="silver-screen"] .text-on-tag-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-tag-padding { border-color: var(--tag-padding); }
html[data-design-theme="silver-screen"] .ring-tag-padding { --ring-color: var(--tag-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-tag-padding { outline-color: var(--tag-padding); }
html[data-design-theme="silver-screen"] .accent-tag-padding { accent-color: var(--tag-padding); }
html[data-design-theme="silver-screen"] .color-field-bg { color: var(--field-bg); }
html[data-design-theme="silver-screen"] .bg-field-bg { background: var(--field-bg); }
html[data-design-theme="silver-screen"] .text-on-field-bg { color: var(--black); }
html[data-design-theme="silver-screen"] .border-field-bg { border-color: var(--field-bg); }
html[data-design-theme="silver-screen"] .ring-field-bg { --ring-color: var(--field-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-field-bg { outline-color: var(--field-bg); }
html[data-design-theme="silver-screen"] .accent-field-bg { accent-color: var(--field-bg); }
html[data-design-theme="silver-screen"] .color-field-border-color { color: var(--field-border-color); }
html[data-design-theme="silver-screen"] .bg-field-border-color { background: var(--field-border-color); }
html[data-design-theme="silver-screen"] .text-on-field-border-color { color: var(--black); }
html[data-design-theme="silver-screen"] .border-field-border-color { border-color: var(--field-border-color); }
html[data-design-theme="silver-screen"] .ring-field-border-color { --ring-color: var(--field-border-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-field-border-color { outline-color: var(--field-border-color); }
html[data-design-theme="silver-screen"] .accent-field-border-color { accent-color: var(--field-border-color); }
html[data-design-theme="silver-screen"] .color-field-border-hover { color: var(--field-border-hover); }
html[data-design-theme="silver-screen"] .bg-field-border-hover { background: var(--field-border-hover); }
html[data-design-theme="silver-screen"] .text-on-field-border-hover { color: var(--white); }
html[data-design-theme="silver-screen"] .border-field-border-hover { border-color: var(--field-border-hover); }
html[data-design-theme="silver-screen"] .ring-field-border-hover { --ring-color: var(--field-border-hover); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-field-border-hover { outline-color: var(--field-border-hover); }
html[data-design-theme="silver-screen"] .accent-field-border-hover { accent-color: var(--field-border-hover); }
html[data-design-theme="silver-screen"] .color-field-focus-border { color: var(--field-focus-border); }
html[data-design-theme="silver-screen"] .bg-field-focus-border { background: var(--field-focus-border); }
html[data-design-theme="silver-screen"] .text-on-field-focus-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-field-focus-border { border-color: var(--field-focus-border); }
html[data-design-theme="silver-screen"] .ring-field-focus-border { --ring-color: var(--field-focus-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-field-focus-border { outline-color: var(--field-focus-border); }
html[data-design-theme="silver-screen"] .accent-field-focus-border { accent-color: var(--field-focus-border); }
html[data-design-theme="silver-screen"] .color-field-textarea-padding { color: var(--field-textarea-padding); }
html[data-design-theme="silver-screen"] .bg-field-textarea-padding { background: var(--field-textarea-padding); }
html[data-design-theme="silver-screen"] .text-on-field-textarea-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-field-textarea-padding { border-color: var(--field-textarea-padding); }
html[data-design-theme="silver-screen"] .ring-field-textarea-padding { --ring-color: var(--field-textarea-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-field-textarea-padding { outline-color: var(--field-textarea-padding); }
html[data-design-theme="silver-screen"] .accent-field-textarea-padding { accent-color: var(--field-textarea-padding); }
html[data-design-theme="silver-screen"] .color-control-border-color { color: var(--control-border-color); }
html[data-design-theme="silver-screen"] .bg-control-border-color { background: var(--control-border-color); }
html[data-design-theme="silver-screen"] .text-on-control-border-color { color: var(--black); }
html[data-design-theme="silver-screen"] .border-control-border-color { border-color: var(--control-border-color); }
html[data-design-theme="silver-screen"] .ring-control-border-color { --ring-color: var(--control-border-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-control-border-color { outline-color: var(--control-border-color); }
html[data-design-theme="silver-screen"] .accent-control-border-color { accent-color: var(--control-border-color); }
html[data-design-theme="silver-screen"] .dark .text-on-control-border-color { color: var(--white); }
html[data-design-theme="silver-screen"] .color-control-checked-color { color: var(--control-checked-color); }
html[data-design-theme="silver-screen"] .bg-control-checked-color { background: var(--control-checked-color); }
html[data-design-theme="silver-screen"] .text-on-control-checked-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-control-checked-color { border-color: var(--control-checked-color); }
html[data-design-theme="silver-screen"] .ring-control-checked-color { --ring-color: var(--control-checked-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-control-checked-color { outline-color: var(--control-checked-color); }
html[data-design-theme="silver-screen"] .accent-control-checked-color { accent-color: var(--control-checked-color); }
html[data-design-theme="silver-screen"] .color-shell-navbar-link-padding { color: var(--shell-navbar-link-padding); }
html[data-design-theme="silver-screen"] .bg-shell-navbar-link-padding { background: var(--shell-navbar-link-padding); }
html[data-design-theme="silver-screen"] .text-on-shell-navbar-link-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-shell-navbar-link-padding { border-color: var(--shell-navbar-link-padding); }
html[data-design-theme="silver-screen"] .ring-shell-navbar-link-padding { --ring-color: var(--shell-navbar-link-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-shell-navbar-link-padding { outline-color: var(--shell-navbar-link-padding); }
html[data-design-theme="silver-screen"] .accent-shell-navbar-link-padding { accent-color: var(--shell-navbar-link-padding); }
html[data-design-theme="silver-screen"] .color-shell-navbar-dismiss-padding { color: var(--shell-navbar-dismiss-padding); }
html[data-design-theme="silver-screen"] .bg-shell-navbar-dismiss-padding { background: var(--shell-navbar-dismiss-padding); }
html[data-design-theme="silver-screen"] .text-on-shell-navbar-dismiss-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-shell-navbar-dismiss-padding { border-color: var(--shell-navbar-dismiss-padding); }
html[data-design-theme="silver-screen"] .ring-shell-navbar-dismiss-padding { --ring-color: var(--shell-navbar-dismiss-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-shell-navbar-dismiss-padding { outline-color: var(--shell-navbar-dismiss-padding); }
html[data-design-theme="silver-screen"] .accent-shell-navbar-dismiss-padding { accent-color: var(--shell-navbar-dismiss-padding); }
html[data-design-theme="silver-screen"] .color-shell-sidebar-item-padding { color: var(--shell-sidebar-item-padding); }
html[data-design-theme="silver-screen"] .bg-shell-sidebar-item-padding { background: var(--shell-sidebar-item-padding); }
html[data-design-theme="silver-screen"] .text-on-shell-sidebar-item-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-shell-sidebar-item-padding { border-color: var(--shell-sidebar-item-padding); }
html[data-design-theme="silver-screen"] .ring-shell-sidebar-item-padding { --ring-color: var(--shell-sidebar-item-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-shell-sidebar-item-padding { outline-color: var(--shell-sidebar-item-padding); }
html[data-design-theme="silver-screen"] .accent-shell-sidebar-item-padding { accent-color: var(--shell-sidebar-item-padding); }
html[data-design-theme="silver-screen"] .color-shell-aside-row-padding { color: var(--shell-aside-row-padding); }
html[data-design-theme="silver-screen"] .bg-shell-aside-row-padding { background: var(--shell-aside-row-padding); }
html[data-design-theme="silver-screen"] .text-on-shell-aside-row-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-shell-aside-row-padding { border-color: var(--shell-aside-row-padding); }
html[data-design-theme="silver-screen"] .ring-shell-aside-row-padding { --ring-color: var(--shell-aside-row-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-shell-aside-row-padding { outline-color: var(--shell-aside-row-padding); }
html[data-design-theme="silver-screen"] .accent-shell-aside-row-padding { accent-color: var(--shell-aside-row-padding); }
html[data-design-theme="silver-screen"] .color-screen-titlebar-padding { color: var(--screen-titlebar-padding); }
html[data-design-theme="silver-screen"] .bg-screen-titlebar-padding { background: var(--screen-titlebar-padding); }
html[data-design-theme="silver-screen"] .text-on-screen-titlebar-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-screen-titlebar-padding { border-color: var(--screen-titlebar-padding); }
html[data-design-theme="silver-screen"] .ring-screen-titlebar-padding { --ring-color: var(--screen-titlebar-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-screen-titlebar-padding { outline-color: var(--screen-titlebar-padding); }
html[data-design-theme="silver-screen"] .accent-screen-titlebar-padding { accent-color: var(--screen-titlebar-padding); }
html[data-design-theme="silver-screen"] .color-screen-dot-close { color: var(--screen-dot-close); }
html[data-design-theme="silver-screen"] .bg-screen-dot-close { background: var(--screen-dot-close); }
html[data-design-theme="silver-screen"] .text-on-screen-dot-close { color: var(--white); }
html[data-design-theme="silver-screen"] .border-screen-dot-close { border-color: var(--screen-dot-close); }
html[data-design-theme="silver-screen"] .ring-screen-dot-close { --ring-color: var(--screen-dot-close); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-screen-dot-close { outline-color: var(--screen-dot-close); }
html[data-design-theme="silver-screen"] .accent-screen-dot-close { accent-color: var(--screen-dot-close); }
html[data-design-theme="silver-screen"] .color-screen-dot-minimize { color: var(--screen-dot-minimize); }
html[data-design-theme="silver-screen"] .bg-screen-dot-minimize { background: var(--screen-dot-minimize); }
html[data-design-theme="silver-screen"] .text-on-screen-dot-minimize { color: var(--black); }
html[data-design-theme="silver-screen"] .border-screen-dot-minimize { border-color: var(--screen-dot-minimize); }
html[data-design-theme="silver-screen"] .ring-screen-dot-minimize { --ring-color: var(--screen-dot-minimize); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-screen-dot-minimize { outline-color: var(--screen-dot-minimize); }
html[data-design-theme="silver-screen"] .accent-screen-dot-minimize { accent-color: var(--screen-dot-minimize); }
html[data-design-theme="silver-screen"] .color-screen-dot-maximize { color: var(--screen-dot-maximize); }
html[data-design-theme="silver-screen"] .bg-screen-dot-maximize { background: var(--screen-dot-maximize); }
html[data-design-theme="silver-screen"] .text-on-screen-dot-maximize { color: var(--white); }
html[data-design-theme="silver-screen"] .border-screen-dot-maximize { border-color: var(--screen-dot-maximize); }
html[data-design-theme="silver-screen"] .ring-screen-dot-maximize { --ring-color: var(--screen-dot-maximize); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-screen-dot-maximize { outline-color: var(--screen-dot-maximize); }
html[data-design-theme="silver-screen"] .accent-screen-dot-maximize { accent-color: var(--screen-dot-maximize); }
html[data-design-theme="silver-screen"] .color-screen-url-padding { color: var(--screen-url-padding); }
html[data-design-theme="silver-screen"] .bg-screen-url-padding { background: var(--screen-url-padding); }
html[data-design-theme="silver-screen"] .text-on-screen-url-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-screen-url-padding { border-color: var(--screen-url-padding); }
html[data-design-theme="silver-screen"] .ring-screen-url-padding { --ring-color: var(--screen-url-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-screen-url-padding { outline-color: var(--screen-url-padding); }
html[data-design-theme="silver-screen"] .accent-screen-url-padding { accent-color: var(--screen-url-padding); }
html[data-design-theme="silver-screen"] .color-sg-border { color: var(--sg-border); }
html[data-design-theme="silver-screen"] .bg-sg-border { background: var(--sg-border); }
html[data-design-theme="silver-screen"] .text-on-sg-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-border { border-color: var(--sg-border); }
html[data-design-theme="silver-screen"] .ring-sg-border { --ring-color: var(--sg-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-border { outline-color: var(--sg-border); }
html[data-design-theme="silver-screen"] .accent-sg-border { accent-color: var(--sg-border); }
html[data-design-theme="silver-screen"] .color-sg-screen-shadow { color: var(--sg-screen-shadow); }
html[data-design-theme="silver-screen"] .bg-sg-screen-shadow { background: var(--sg-screen-shadow); }
html[data-design-theme="silver-screen"] .text-on-sg-screen-shadow { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-screen-shadow { border-color: var(--sg-screen-shadow); }
html[data-design-theme="silver-screen"] .ring-sg-screen-shadow { --ring-color: var(--sg-screen-shadow); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-screen-shadow { outline-color: var(--sg-screen-shadow); }
html[data-design-theme="silver-screen"] .accent-sg-screen-shadow { accent-color: var(--sg-screen-shadow); }
html[data-design-theme="silver-screen"] .color-sg-section-number-padding { color: var(--sg-section-number-padding); }
html[data-design-theme="silver-screen"] .bg-sg-section-number-padding { background: var(--sg-section-number-padding); }
html[data-design-theme="silver-screen"] .text-on-sg-section-number-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-section-number-padding { border-color: var(--sg-section-number-padding); }
html[data-design-theme="silver-screen"] .ring-sg-section-number-padding { --ring-color: var(--sg-section-number-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-section-number-padding { outline-color: var(--sg-section-number-padding); }
html[data-design-theme="silver-screen"] .accent-sg-section-number-padding { accent-color: var(--sg-section-number-padding); }
html[data-design-theme="silver-screen"] .color-sg-group-content-padding { color: var(--sg-group-content-padding); }
html[data-design-theme="silver-screen"] .bg-sg-group-content-padding { background: var(--sg-group-content-padding); }
html[data-design-theme="silver-screen"] .text-on-sg-group-content-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-sg-group-content-padding { border-color: var(--sg-group-content-padding); }
html[data-design-theme="silver-screen"] .ring-sg-group-content-padding { --ring-color: var(--sg-group-content-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-sg-group-content-padding { outline-color: var(--sg-group-content-padding); }
html[data-design-theme="silver-screen"] .accent-sg-group-content-padding { accent-color: var(--sg-group-content-padding); }
html[data-design-theme="silver-screen"] .color-branding-placeholder-border { color: var(--branding-placeholder-border); }
html[data-design-theme="silver-screen"] .bg-branding-placeholder-border { background: var(--branding-placeholder-border); }
html[data-design-theme="silver-screen"] .text-on-branding-placeholder-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-branding-placeholder-border { border-color: var(--branding-placeholder-border); }
html[data-design-theme="silver-screen"] .ring-branding-placeholder-border { --ring-color: var(--branding-placeholder-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-branding-placeholder-border { outline-color: var(--branding-placeholder-border); }
html[data-design-theme="silver-screen"] .accent-branding-placeholder-border { accent-color: var(--branding-placeholder-border); }
html[data-design-theme="silver-screen"] .color-branding-name-border { color: var(--branding-name-border); }
html[data-design-theme="silver-screen"] .bg-branding-name-border { background: var(--branding-name-border); }
html[data-design-theme="silver-screen"] .text-on-branding-name-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-branding-name-border { border-color: var(--branding-name-border); }
html[data-design-theme="silver-screen"] .ring-branding-name-border { --ring-color: var(--branding-name-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-branding-name-border { outline-color: var(--branding-name-border); }
html[data-design-theme="silver-screen"] .accent-branding-name-border { accent-color: var(--branding-name-border); }
html[data-design-theme="silver-screen"] .color-branding-field-value-color { color: var(--branding-field-value-color); }
html[data-design-theme="silver-screen"] .bg-branding-field-value-color { background: var(--branding-field-value-color); }
html[data-design-theme="silver-screen"] .text-on-branding-field-value-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-branding-field-value-color { border-color: var(--branding-field-value-color); }
html[data-design-theme="silver-screen"] .ring-branding-field-value-color { --ring-color: var(--branding-field-value-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-branding-field-value-color { outline-color: var(--branding-field-value-color); }
html[data-design-theme="silver-screen"] .accent-branding-field-value-color { accent-color: var(--branding-field-value-color); }
html[data-design-theme="silver-screen"] .dark .text-on-branding-field-value-color { color: var(--black); }
html[data-design-theme="silver-screen"] .color-branding-keyword-color { color: var(--branding-keyword-color); }
html[data-design-theme="silver-screen"] .bg-branding-keyword-color { background: var(--branding-keyword-color); }
html[data-design-theme="silver-screen"] .text-on-branding-keyword-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-branding-keyword-color { border-color: var(--branding-keyword-color); }
html[data-design-theme="silver-screen"] .ring-branding-keyword-color { --ring-color: var(--branding-keyword-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-branding-keyword-color { outline-color: var(--branding-keyword-color); }
html[data-design-theme="silver-screen"] .accent-branding-keyword-color { accent-color: var(--branding-keyword-color); }
html[data-design-theme="silver-screen"] .dark .text-on-branding-keyword-color { color: var(--black); }
html[data-design-theme="silver-screen"] .color-branding-keyword-padding { color: var(--branding-keyword-padding); }
html[data-design-theme="silver-screen"] .bg-branding-keyword-padding { background: var(--branding-keyword-padding); }
html[data-design-theme="silver-screen"] .text-on-branding-keyword-padding { color: var(--white); }
html[data-design-theme="silver-screen"] .border-branding-keyword-padding { border-color: var(--branding-keyword-padding); }
html[data-design-theme="silver-screen"] .ring-branding-keyword-padding { --ring-color: var(--branding-keyword-padding); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-branding-keyword-padding { outline-color: var(--branding-keyword-padding); }
html[data-design-theme="silver-screen"] .accent-branding-keyword-padding { accent-color: var(--branding-keyword-padding); }
html[data-design-theme="silver-screen"] .color-branding-keyword-border { color: var(--branding-keyword-border); }
html[data-design-theme="silver-screen"] .bg-branding-keyword-border { background: var(--branding-keyword-border); }
html[data-design-theme="silver-screen"] .text-on-branding-keyword-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-branding-keyword-border { border-color: var(--branding-keyword-border); }
html[data-design-theme="silver-screen"] .ring-branding-keyword-border { --ring-color: var(--branding-keyword-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-branding-keyword-border { outline-color: var(--branding-keyword-border); }
html[data-design-theme="silver-screen"] .accent-branding-keyword-border { accent-color: var(--branding-keyword-border); }
html[data-design-theme="silver-screen"] .color-hui-switch-thumb-bg { color: var(--hui-switch-thumb-bg); }
html[data-design-theme="silver-screen"] .bg-hui-switch-thumb-bg { background: var(--hui-switch-thumb-bg); }
html[data-design-theme="silver-screen"] .text-on-hui-switch-thumb-bg { color: var(--black); }
html[data-design-theme="silver-screen"] .border-hui-switch-thumb-bg { border-color: var(--hui-switch-thumb-bg); }
html[data-design-theme="silver-screen"] .ring-hui-switch-thumb-bg { --ring-color: var(--hui-switch-thumb-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-switch-thumb-bg { outline-color: var(--hui-switch-thumb-bg); }
html[data-design-theme="silver-screen"] .accent-hui-switch-thumb-bg { accent-color: var(--hui-switch-thumb-bg); }
html[data-design-theme="silver-screen"] .color-hui-control-label-color { color: var(--hui-control-label-color); }
html[data-design-theme="silver-screen"] .bg-hui-control-label-color { background: var(--hui-control-label-color); }
html[data-design-theme="silver-screen"] .text-on-hui-control-label-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-control-label-color { border-color: var(--hui-control-label-color); }
html[data-design-theme="silver-screen"] .ring-hui-control-label-color { --ring-color: var(--hui-control-label-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-control-label-color { outline-color: var(--hui-control-label-color); }
html[data-design-theme="silver-screen"] .accent-hui-control-label-color { accent-color: var(--hui-control-label-color); }
html[data-design-theme="silver-screen"] .dark .text-on-hui-control-label-color { color: var(--black); }
html[data-design-theme="silver-screen"] .color-hui-panel-item-color { color: var(--hui-panel-item-color); }
html[data-design-theme="silver-screen"] .bg-hui-panel-item-color { background: var(--hui-panel-item-color); }
html[data-design-theme="silver-screen"] .text-on-hui-panel-item-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-panel-item-color { border-color: var(--hui-panel-item-color); }
html[data-design-theme="silver-screen"] .ring-hui-panel-item-color { --ring-color: var(--hui-panel-item-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-panel-item-color { outline-color: var(--hui-panel-item-color); }
html[data-design-theme="silver-screen"] .accent-hui-panel-item-color { accent-color: var(--hui-panel-item-color); }
html[data-design-theme="silver-screen"] .dark .text-on-hui-panel-item-color { color: var(--black); }
html[data-design-theme="silver-screen"] .color-hui-tab-panel-color { color: var(--hui-tab-panel-color); }
html[data-design-theme="silver-screen"] .bg-hui-tab-panel-color { background: var(--hui-tab-panel-color); }
html[data-design-theme="silver-screen"] .text-on-hui-tab-panel-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-tab-panel-color { border-color: var(--hui-tab-panel-color); }
html[data-design-theme="silver-screen"] .ring-hui-tab-panel-color { --ring-color: var(--hui-tab-panel-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-tab-panel-color { outline-color: var(--hui-tab-panel-color); }
html[data-design-theme="silver-screen"] .accent-hui-tab-panel-color { accent-color: var(--hui-tab-panel-color); }
html[data-design-theme="silver-screen"] .dark .text-on-hui-tab-panel-color { color: var(--black); }
html[data-design-theme="silver-screen"] .color-hui-field-chevron-color { color: var(--hui-field-chevron-color); }
html[data-design-theme="silver-screen"] .bg-hui-field-chevron-color { background: var(--hui-field-chevron-color); }
html[data-design-theme="silver-screen"] .text-on-hui-field-chevron-color { color: var(--black); }
html[data-design-theme="silver-screen"] .border-hui-field-chevron-color { border-color: var(--hui-field-chevron-color); }
html[data-design-theme="silver-screen"] .ring-hui-field-chevron-color { --ring-color: var(--hui-field-chevron-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-field-chevron-color { outline-color: var(--hui-field-chevron-color); }
html[data-design-theme="silver-screen"] .accent-hui-field-chevron-color { accent-color: var(--hui-field-chevron-color); }
html[data-design-theme="silver-screen"] .color-hui-label-color { color: var(--hui-label-color); }
html[data-design-theme="silver-screen"] .bg-hui-label-color { background: var(--hui-label-color); }
html[data-design-theme="silver-screen"] .text-on-hui-label-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-label-color { border-color: var(--hui-label-color); }
html[data-design-theme="silver-screen"] .ring-hui-label-color { --ring-color: var(--hui-label-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-label-color { outline-color: var(--hui-label-color); }
html[data-design-theme="silver-screen"] .accent-hui-label-color { accent-color: var(--hui-label-color); }
html[data-design-theme="silver-screen"] .color-hui-description-color { color: var(--hui-description-color); }
html[data-design-theme="silver-screen"] .bg-hui-description-color { background: var(--hui-description-color); }
html[data-design-theme="silver-screen"] .text-on-hui-description-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-hui-description-color { border-color: var(--hui-description-color); }
html[data-design-theme="silver-screen"] .ring-hui-description-color { --ring-color: var(--hui-description-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-hui-description-color { outline-color: var(--hui-description-color); }
html[data-design-theme="silver-screen"] .accent-hui-description-color { accent-color: var(--hui-description-color); }
html[data-design-theme="silver-screen"] .color-code-bg { color: var(--code-bg); }
html[data-design-theme="silver-screen"] .bg-code-bg { background: var(--code-bg); }
html[data-design-theme="silver-screen"] .text-on-code-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-code-bg { border-color: var(--code-bg); }
html[data-design-theme="silver-screen"] .ring-code-bg { --ring-color: var(--code-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-code-bg { outline-color: var(--code-bg); }
html[data-design-theme="silver-screen"] .accent-code-bg { accent-color: var(--code-bg); }
html[data-design-theme="silver-screen"] .color-code-text { color: var(--code-text); }
html[data-design-theme="silver-screen"] .bg-code-text { background: var(--code-text); }
html[data-design-theme="silver-screen"] .text-on-code-text { color: var(--black); }
html[data-design-theme="silver-screen"] .border-code-text { border-color: var(--code-text); }
html[data-design-theme="silver-screen"] .ring-code-text { --ring-color: var(--code-text); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-code-text { outline-color: var(--code-text); }
html[data-design-theme="silver-screen"] .accent-code-text { accent-color: var(--code-text); }
html[data-design-theme="silver-screen"] .color-code-border { color: var(--code-border); }
html[data-design-theme="silver-screen"] .bg-code-border { background: var(--code-border); }
html[data-design-theme="silver-screen"] .text-on-code-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-code-border { border-color: var(--code-border); }
html[data-design-theme="silver-screen"] .ring-code-border { --ring-color: var(--code-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-code-border { outline-color: var(--code-border); }
html[data-design-theme="silver-screen"] .accent-code-border { accent-color: var(--code-border); }
html[data-design-theme="silver-screen"] .color-code-keyword { color: var(--code-keyword); }
html[data-design-theme="silver-screen"] .bg-code-keyword { background: var(--code-keyword); }
html[data-design-theme="silver-screen"] .text-on-code-keyword { color: var(--white); }
html[data-design-theme="silver-screen"] .border-code-keyword { border-color: var(--code-keyword); }
html[data-design-theme="silver-screen"] .ring-code-keyword { --ring-color: var(--code-keyword); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-code-keyword { outline-color: var(--code-keyword); }
html[data-design-theme="silver-screen"] .accent-code-keyword { accent-color: var(--code-keyword); }
html[data-design-theme="silver-screen"] .color-code-string { color: var(--code-string); }
html[data-design-theme="silver-screen"] .bg-code-string { background: var(--code-string); }
html[data-design-theme="silver-screen"] .text-on-code-string { color: var(--white); }
html[data-design-theme="silver-screen"] .border-code-string { border-color: var(--code-string); }
html[data-design-theme="silver-screen"] .ring-code-string { --ring-color: var(--code-string); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-code-string { outline-color: var(--code-string); }
html[data-design-theme="silver-screen"] .accent-code-string { accent-color: var(--code-string); }
html[data-design-theme="silver-screen"] .color-code-comment { color: var(--code-comment); }
html[data-design-theme="silver-screen"] .bg-code-comment { background: var(--code-comment); }
html[data-design-theme="silver-screen"] .text-on-code-comment { color: var(--white); }
html[data-design-theme="silver-screen"] .border-code-comment { border-color: var(--code-comment); }
html[data-design-theme="silver-screen"] .ring-code-comment { --ring-color: var(--code-comment); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-code-comment { outline-color: var(--code-comment); }
html[data-design-theme="silver-screen"] .accent-code-comment { accent-color: var(--code-comment); }
html[data-design-theme="silver-screen"] .color-code-function { color: var(--code-function); }
html[data-design-theme="silver-screen"] .bg-code-function { background: var(--code-function); }
html[data-design-theme="silver-screen"] .text-on-code-function { color: var(--white); }
html[data-design-theme="silver-screen"] .border-code-function { border-color: var(--code-function); }
html[data-design-theme="silver-screen"] .ring-code-function { --ring-color: var(--code-function); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-code-function { outline-color: var(--code-function); }
html[data-design-theme="silver-screen"] .accent-code-function { accent-color: var(--code-function); }
html[data-design-theme="silver-screen"] .color-code-number { color: var(--code-number); }
html[data-design-theme="silver-screen"] .bg-code-number { background: var(--code-number); }
html[data-design-theme="silver-screen"] .text-on-code-number { color: var(--white); }
html[data-design-theme="silver-screen"] .border-code-number { border-color: var(--code-number); }
html[data-design-theme="silver-screen"] .ring-code-number { --ring-color: var(--code-number); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-code-number { outline-color: var(--code-number); }
html[data-design-theme="silver-screen"] .accent-code-number { accent-color: var(--code-number); }
html[data-design-theme="silver-screen"] .color-code-line-number { color: var(--code-line-number); }
html[data-design-theme="silver-screen"] .bg-code-line-number { background: var(--code-line-number); }
html[data-design-theme="silver-screen"] .text-on-code-line-number { color: var(--white); }
html[data-design-theme="silver-screen"] .border-code-line-number { border-color: var(--code-line-number); }
html[data-design-theme="silver-screen"] .ring-code-line-number { --ring-color: var(--code-line-number); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-code-line-number { outline-color: var(--code-line-number); }
html[data-design-theme="silver-screen"] .accent-code-line-number { accent-color: var(--code-line-number); }
html[data-design-theme="silver-screen"] .color-terminal-bg { color: var(--terminal-bg); }
html[data-design-theme="silver-screen"] .bg-terminal-bg { background: var(--terminal-bg); }
html[data-design-theme="silver-screen"] .text-on-terminal-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-terminal-bg { border-color: var(--terminal-bg); }
html[data-design-theme="silver-screen"] .ring-terminal-bg { --ring-color: var(--terminal-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-terminal-bg { outline-color: var(--terminal-bg); }
html[data-design-theme="silver-screen"] .accent-terminal-bg { accent-color: var(--terminal-bg); }
html[data-design-theme="silver-screen"] .color-terminal-text { color: var(--terminal-text); }
html[data-design-theme="silver-screen"] .bg-terminal-text { background: var(--terminal-text); }
html[data-design-theme="silver-screen"] .text-on-terminal-text { color: var(--black); }
html[data-design-theme="silver-screen"] .border-terminal-text { border-color: var(--terminal-text); }
html[data-design-theme="silver-screen"] .ring-terminal-text { --ring-color: var(--terminal-text); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-terminal-text { outline-color: var(--terminal-text); }
html[data-design-theme="silver-screen"] .accent-terminal-text { accent-color: var(--terminal-text); }
html[data-design-theme="silver-screen"] .color-terminal-border { color: var(--terminal-border); }
html[data-design-theme="silver-screen"] .bg-terminal-border { background: var(--terminal-border); }
html[data-design-theme="silver-screen"] .text-on-terminal-border { color: var(--white); }
html[data-design-theme="silver-screen"] .border-terminal-border { border-color: var(--terminal-border); }
html[data-design-theme="silver-screen"] .ring-terminal-border { --ring-color: var(--terminal-border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-terminal-border { outline-color: var(--terminal-border); }
html[data-design-theme="silver-screen"] .accent-terminal-border { accent-color: var(--terminal-border); }
html[data-design-theme="silver-screen"] .color-terminal-title-bar-bg { color: var(--terminal-title-bar-bg); }
html[data-design-theme="silver-screen"] .bg-terminal-title-bar-bg { background: var(--terminal-title-bar-bg); }
html[data-design-theme="silver-screen"] .text-on-terminal-title-bar-bg { color: var(--white); }
html[data-design-theme="silver-screen"] .border-terminal-title-bar-bg { border-color: var(--terminal-title-bar-bg); }
html[data-design-theme="silver-screen"] .ring-terminal-title-bar-bg { --ring-color: var(--terminal-title-bar-bg); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-terminal-title-bar-bg { outline-color: var(--terminal-title-bar-bg); }
html[data-design-theme="silver-screen"] .accent-terminal-title-bar-bg { accent-color: var(--terminal-title-bar-bg); }
html[data-design-theme="silver-screen"] .color-terminal-prompt { color: var(--terminal-prompt); }
html[data-design-theme="silver-screen"] .bg-terminal-prompt { background: var(--terminal-prompt); }
html[data-design-theme="silver-screen"] .text-on-terminal-prompt { color: var(--white); }
html[data-design-theme="silver-screen"] .border-terminal-prompt { border-color: var(--terminal-prompt); }
html[data-design-theme="silver-screen"] .ring-terminal-prompt { --ring-color: var(--terminal-prompt); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-terminal-prompt { outline-color: var(--terminal-prompt); }
html[data-design-theme="silver-screen"] .accent-terminal-prompt { accent-color: var(--terminal-prompt); }
html[data-design-theme="silver-screen"] .color-terminal-command { color: var(--terminal-command); }
html[data-design-theme="silver-screen"] .bg-terminal-command { background: var(--terminal-command); }
html[data-design-theme="silver-screen"] .text-on-terminal-command { color: var(--black); }
html[data-design-theme="silver-screen"] .border-terminal-command { border-color: var(--terminal-command); }
html[data-design-theme="silver-screen"] .ring-terminal-command { --ring-color: var(--terminal-command); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-terminal-command { outline-color: var(--terminal-command); }
html[data-design-theme="silver-screen"] .accent-terminal-command { accent-color: var(--terminal-command); }
html[data-design-theme="silver-screen"] .color-terminal-output { color: var(--terminal-output); }
html[data-design-theme="silver-screen"] .bg-terminal-output { background: var(--terminal-output); }
html[data-design-theme="silver-screen"] .text-on-terminal-output { color: var(--black); }
html[data-design-theme="silver-screen"] .border-terminal-output { border-color: var(--terminal-output); }
html[data-design-theme="silver-screen"] .ring-terminal-output { --ring-color: var(--terminal-output); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-terminal-output { outline-color: var(--terminal-output); }
html[data-design-theme="silver-screen"] .accent-terminal-output { accent-color: var(--terminal-output); }
html[data-design-theme="silver-screen"] .color-terminal-success { color: var(--terminal-success); }
html[data-design-theme="silver-screen"] .bg-terminal-success { background: var(--terminal-success); }
html[data-design-theme="silver-screen"] .text-on-terminal-success { color: var(--white); }
html[data-design-theme="silver-screen"] .border-terminal-success { border-color: var(--terminal-success); }
html[data-design-theme="silver-screen"] .ring-terminal-success { --ring-color: var(--terminal-success); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-terminal-success { outline-color: var(--terminal-success); }
html[data-design-theme="silver-screen"] .accent-terminal-success { accent-color: var(--terminal-success); }
html[data-design-theme="silver-screen"] .color-terminal-error { color: var(--terminal-error); }
html[data-design-theme="silver-screen"] .bg-terminal-error { background: var(--terminal-error); }
html[data-design-theme="silver-screen"] .text-on-terminal-error { color: var(--white); }
html[data-design-theme="silver-screen"] .border-terminal-error { border-color: var(--terminal-error); }
html[data-design-theme="silver-screen"] .ring-terminal-error { --ring-color: var(--terminal-error); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-terminal-error { outline-color: var(--terminal-error); }
html[data-design-theme="silver-screen"] .accent-terminal-error { accent-color: var(--terminal-error); }
html[data-design-theme="silver-screen"] .color-terminal-warning { color: var(--terminal-warning); }
html[data-design-theme="silver-screen"] .bg-terminal-warning { background: var(--terminal-warning); }
html[data-design-theme="silver-screen"] .text-on-terminal-warning { color: var(--white); }
html[data-design-theme="silver-screen"] .border-terminal-warning { border-color: var(--terminal-warning); }
html[data-design-theme="silver-screen"] .ring-terminal-warning { --ring-color: var(--terminal-warning); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-terminal-warning { outline-color: var(--terminal-warning); }
html[data-design-theme="silver-screen"] .accent-terminal-warning { accent-color: var(--terminal-warning); }
html[data-design-theme="silver-screen"] .color-surface { color: var(--surface); }
html[data-design-theme="silver-screen"] .bg-surface { background: var(--surface); }
html[data-design-theme="silver-screen"] .text-on-surface { color: var(--black); }
html[data-design-theme="silver-screen"] .border-surface { border-color: var(--surface); }
html[data-design-theme="silver-screen"] .ring-surface { --ring-color: var(--surface); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-surface { outline-color: var(--surface); }
html[data-design-theme="silver-screen"] .accent-surface { accent-color: var(--surface); }
html[data-design-theme="silver-screen"] .dark .text-on-surface { color: var(--white); }
html[data-design-theme="silver-screen"] .color-surface-alt { color: var(--surface-alt); }
html[data-design-theme="silver-screen"] .bg-surface-alt { background: var(--surface-alt); }
html[data-design-theme="silver-screen"] .text-on-surface-alt { color: var(--black); }
html[data-design-theme="silver-screen"] .border-surface-alt { border-color: var(--surface-alt); }
html[data-design-theme="silver-screen"] .ring-surface-alt { --ring-color: var(--surface-alt); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-surface-alt { outline-color: var(--surface-alt); }
html[data-design-theme="silver-screen"] .accent-surface-alt { accent-color: var(--surface-alt); }
html[data-design-theme="silver-screen"] .dark .text-on-surface-alt { color: var(--white); }
html[data-design-theme="silver-screen"] .color-surface-inverse { color: var(--surface-inverse); }
html[data-design-theme="silver-screen"] .bg-surface-inverse { background: var(--surface-inverse); }
html[data-design-theme="silver-screen"] .text-on-surface-inverse { color: var(--white); }
html[data-design-theme="silver-screen"] .border-surface-inverse { border-color: var(--surface-inverse); }
html[data-design-theme="silver-screen"] .ring-surface-inverse { --ring-color: var(--surface-inverse); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-surface-inverse { outline-color: var(--surface-inverse); }
html[data-design-theme="silver-screen"] .accent-surface-inverse { accent-color: var(--surface-inverse); }
html[data-design-theme="silver-screen"] .dark .text-on-surface-inverse { color: var(--black); }
html[data-design-theme="silver-screen"] .color-text { color: var(--text); }
html[data-design-theme="silver-screen"] .bg-text { background: var(--text); }
html[data-design-theme="silver-screen"] .text-on-text { color: var(--white); }
html[data-design-theme="silver-screen"] .border-text { border-color: var(--text); }
html[data-design-theme="silver-screen"] .ring-text { --ring-color: var(--text); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-text { outline-color: var(--text); }
html[data-design-theme="silver-screen"] .accent-text { accent-color: var(--text); }
html[data-design-theme="silver-screen"] .dark .text-on-text { color: var(--black); }
html[data-design-theme="silver-screen"] .color-text-secondary { color: var(--text-secondary); }
html[data-design-theme="silver-screen"] .bg-text-secondary { background: var(--text-secondary); }
html[data-design-theme="silver-screen"] .text-on-text-secondary { color: var(--white); }
html[data-design-theme="silver-screen"] .border-text-secondary { border-color: var(--text-secondary); }
html[data-design-theme="silver-screen"] .ring-text-secondary { --ring-color: var(--text-secondary); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-text-secondary { outline-color: var(--text-secondary); }
html[data-design-theme="silver-screen"] .accent-text-secondary { accent-color: var(--text-secondary); }
html[data-design-theme="silver-screen"] .dark .text-on-text-secondary { color: var(--black); }
html[data-design-theme="silver-screen"] .color-text-muted { color: var(--text-muted); }
html[data-design-theme="silver-screen"] .bg-text-muted { background: var(--text-muted); }
html[data-design-theme="silver-screen"] .text-on-text-muted { color: var(--white); }
html[data-design-theme="silver-screen"] .border-text-muted { border-color: var(--text-muted); }
html[data-design-theme="silver-screen"] .ring-text-muted { --ring-color: var(--text-muted); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-text-muted { outline-color: var(--text-muted); }
html[data-design-theme="silver-screen"] .accent-text-muted { accent-color: var(--text-muted); }
html[data-design-theme="silver-screen"] .color-text-inverse { color: var(--text-inverse); }
html[data-design-theme="silver-screen"] .bg-text-inverse { background: var(--text-inverse); }
html[data-design-theme="silver-screen"] .text-on-text-inverse { color: var(--black); }
html[data-design-theme="silver-screen"] .border-text-inverse { border-color: var(--text-inverse); }
html[data-design-theme="silver-screen"] .ring-text-inverse { --ring-color: var(--text-inverse); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-text-inverse { outline-color: var(--text-inverse); }
html[data-design-theme="silver-screen"] .accent-text-inverse { accent-color: var(--text-inverse); }
html[data-design-theme="silver-screen"] .dark .text-on-text-inverse { color: var(--white); }
html[data-design-theme="silver-screen"] .color-border { color: var(--border); }
html[data-design-theme="silver-screen"] .bg-border { background: var(--border); }
html[data-design-theme="silver-screen"] .text-on-border { color: var(--black); }
html[data-design-theme="silver-screen"] .border-border { border-color: var(--border); }
html[data-design-theme="silver-screen"] .ring-border { --ring-color: var(--border); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-border { outline-color: var(--border); }
html[data-design-theme="silver-screen"] .accent-border { accent-color: var(--border); }
html[data-design-theme="silver-screen"] .dark .text-on-border { color: var(--white); }
html[data-design-theme="silver-screen"] .color-border-strong { color: var(--border-strong); }
html[data-design-theme="silver-screen"] .bg-border-strong { background: var(--border-strong); }
html[data-design-theme="silver-screen"] .text-on-border-strong { color: var(--black); }
html[data-design-theme="silver-screen"] .border-border-strong { border-color: var(--border-strong); }
html[data-design-theme="silver-screen"] .ring-border-strong { --ring-color: var(--border-strong); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-border-strong { outline-color: var(--border-strong); }
html[data-design-theme="silver-screen"] .accent-border-strong { accent-color: var(--border-strong); }
html[data-design-theme="silver-screen"] .dark .text-on-border-strong { color: var(--white); }
html[data-design-theme="silver-screen"] .color-shadow-color { color: var(--shadow-color); }
html[data-design-theme="silver-screen"] .bg-shadow-color { background: var(--shadow-color); }
html[data-design-theme="silver-screen"] .text-on-shadow-color { color: var(--white); }
html[data-design-theme="silver-screen"] .border-shadow-color { border-color: var(--shadow-color); }
html[data-design-theme="silver-screen"] .ring-shadow-color { --ring-color: var(--shadow-color); box-shadow: 0 0 0 var(--ring-width, 3px) var(--ring-color); }
html[data-design-theme="silver-screen"] .outline-shadow-color { outline-color: var(--shadow-color); }
html[data-design-theme="silver-screen"] .accent-shadow-color { accent-color: var(--shadow-color); }

/* ── LAYOUT ── (from: style-guide.page-layouts.yaml) */
/* (empty) */

/* ── CSS-SNIPPETS ── (from: style-guide.css-snippets.yaml) */
/* ── intro ── */
/**
 * intro: Silver Screen intro with geometric glyph and color bar
 *
 * Heavy sans-serif title, geometric block glyph, color accent bar, uppercase
 * label.
 */

html[data-design-theme="silver-screen"] .sg-intro-hero {
  text-align: center;
  padding: 64px 32px 0;
  margin-bottom: 48px;
  border: 2px solid var(--black, #0d1114);
  display: flex;
  flex-direction: column;
  align-items: center;
}
html[data-design-theme="silver-screen"] .sg-intro-glyph {
  font-size: 36px;
  color: var(--gray-400, #9aa5b1);
  display: block;
  margin: 0 auto 24px;
  background: none;
  border: none;
  box-shadow: none;
  line-height: 1;
  order: -1;
}
html[data-design-theme="silver-screen"] .sg-intro-title {
  font-family: var(--font-sans);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--black, #0d1114);
  text-transform: none;
  text-shadow: none;
}
html[data-design-theme="silver-screen"] .sg-intro-title::before,
html[data-design-theme="silver-screen"] .sg-intro-title::after {
  content: none;
}
html[data-design-theme="silver-screen"] .sg-intro-subtitle {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--gray-500, #74808d);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 16px;
  font-weight: 400;
}
html[data-design-theme="silver-screen"] .sg-intro-quote {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  color: var(--gray-600, #5a6672);
  max-width: 560px;
  margin: 24px auto 48px;
  line-height: 1.6;
  border-left: none;
  padding-left: 0;
}
html[data-design-theme="silver-screen"] .sg-intro-meta {
  display: flex;
  gap: 24px;
  margin-top: 32px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-500, #74808d);
  justify-content: center;
}
html[data-design-theme="silver-screen"] .sg-intro-color-bar {
  display: flex;
  height: 8px;
  margin-top: 40px;
  overflow: hidden;
  width: calc(100% + 64px);
  margin-left: -32px;
  margin-right: -32px;
}
html[data-design-theme="silver-screen"] .sg-intro-color-bar::before,
html[data-design-theme="silver-screen"] .sg-intro-color-bar::after {
  content: none;
}
html[data-design-theme="silver-screen"] .sg-intro-color-bar > * {
  flex: 1;
}
html[data-design-theme="silver-screen"] .sg-intro-meta-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: calc(100% + 64px);
  margin-left: -32px;
  margin-right: -32px;
  border-top: 2px solid var(--black, #0d1114);
}
html[data-design-theme="silver-screen"] .sg-intro-meta-card {
  padding: var(--space-2, 16px) var(--space-3, 24px);
  border-right: 1px solid var(--gray-200, #dde3e9);
}
html[data-design-theme="silver-screen"] .sg-intro-meta-card:last-child {
  border-right: none;
}
html[data-design-theme="silver-screen"] .sg-intro-meta-card-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500, #74808d);
  margin-bottom: 4px;
}
html[data-design-theme="silver-screen"] .sg-intro-meta-card-value {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--black, #0d1114);
}

/* ── sections ── */
/**
 * sections: Large number, bold title, clean divider
 *
 * Section headers with oversized light-gray numbers and bold mixed-case
 * titles.
 */

html[data-design-theme="silver-screen"] .sg-section-header {
  padding: var(--space-4, 32px) 0 var(--space-3, 24px);
}
html[data-design-theme="silver-screen"] .sg-section-number {
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 700;
  font-style: normal;
  color: var(--gray-200, #dde3e9);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: auto;
  line-height: 1;
}
html[data-design-theme="silver-screen"] .sg-section-title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
}
html[data-design-theme="silver-screen"] .sg-section-desc {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gray-500, #74808d);
}

/* ── branding ── */
/**
 * branding: White-surface branding with black borders and red accents
 *
 * Heavy sans name, monospace field labels, offset box shadow cards.
 */

html[data-design-theme="silver-screen"] .product-branding {
  background: var(--surface, #ffffff);
  border: 2px solid var(--black, #0d1114);
  box-shadow: 4px 4px 0 var(--gray-200, #dde3e9);
}
html[data-design-theme="silver-screen"] .product-branding-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.02em;
  text-transform: none;
}
html[data-design-theme="silver-screen"] .product-branding-field-label {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text, #0d1114);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 10px;
}
html[data-design-theme="silver-screen"] .product-branding-tag {
  border: 1px solid var(--gray-300, #c4ccd4);
  border-radius: 0;
  color: var(--gray-700, #414b55);
  background: var(--white, #ffffff);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}
/* Logo pane */
html[data-design-theme="silver-screen"] .product-branding-logo {
  background: var(--gray-100, #e9edf1);
}
.swiss-logo-glyph {
  font-size: 36px;
  color: var(--red, #ff4081);
  display: inline-block;
  margin-bottom: 8px;
}
.swiss-logo-text {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-700, #414b55);
  letter-spacing: -0.02em;
}

/* ── cards ── */
/**
 * cards: Sharp cards with 2px black borders
 *
 * No radius, no blur shadows. Color top-edge signals type. Filled cards
 * invert.
 */

html[data-design-theme="silver-screen"] .card {
  border: 2px solid var(--black, #0d1114);
  border-radius: 0;
  box-shadow: none;
  background: var(--white, #fff);
}
html[data-design-theme="silver-screen"] .card:hover {
  background: var(--gray-100, #e9edf1) !important;
  box-shadow: none !important;
}
html[data-design-theme="silver-screen"] .card:hover > * {
  background: transparent !important;
}
html[data-design-theme="silver-screen"] .card:hover .card-header[class*="danger"],
html[data-design-theme="silver-screen"] .card:hover .card-header[class*="warning"],
html[data-design-theme="silver-screen"] .card:hover .card-header[class*="success"],
html[data-design-theme="silver-screen"] .card:hover .card-header[class*="info"],
html[data-design-theme="silver-screen"] .card:hover .card-header[class*="brand"],
html[data-design-theme="silver-screen"] .card:hover .card-header[class*="primary"],
html[data-design-theme="silver-screen"] .card:hover .card-footer[class*="danger"],
html[data-design-theme="silver-screen"] .card:hover .card-footer[class*="warning"],
html[data-design-theme="silver-screen"] .card:hover .card-footer[class*="success"],
html[data-design-theme="silver-screen"] .card:hover .card-footer[class*="info"],
html[data-design-theme="silver-screen"] .card:hover .card-footer[class*="brand"],
html[data-design-theme="silver-screen"] .card:hover .card-footer[class*="primary"] {
  background: var(--accent) !important;
}
html[data-design-theme="silver-screen"] .card-header {
  border-bottom: none;
  border-radius: 0;
  background: var(--white, #fff);
}
html[data-design-theme="silver-screen"] .card-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black, #0d1114);
}
html[data-design-theme="silver-screen"] .card-body {
  font-size: 14px;
  color: var(--black, #0d1114);
  line-height: 1.6;
}
html[data-design-theme="silver-screen"] .card-body p {
  color: var(--gray-600, #5a6672);
}
html[data-design-theme="silver-screen"] .card-footer {
  border-top: none;
  border-radius: 0;
  background: transparent;
  border-color: transparent;
}
/* Silver Screen has no rounded variant — override to sharp */
html[data-design-theme="silver-screen"] .card.rounded,
html[data-design-theme="silver-screen"] .rounded {
  border-radius: 0;
}
html[data-design-theme="silver-screen"] .card.drop-shadow {
  box-shadow: 4px 4px 0 var(--accent, var(--gray-200, #dde3e9)) !important;
}
html[data-design-theme="silver-screen"] .card.drop-shadow:hover {
  box-shadow: 4px 4px 0 var(--accent, var(--gray-200, #dde3e9)) !important;
}
/* Semantic card text stays black, not semantic color */
html[data-design-theme="silver-screen"] .card .card-body {
  color: var(--black, #0d1114);
}
/* Card hover handled above — no duplicate rules */
/* Accent cards: top border colored, sides/bottom black */
html[data-design-theme="silver-screen"] .card[class*="accent-"] {
  border: 2px solid var(--black, #0d1114) !important;
  border-top: 6px solid var(--accent, var(--red, #ff4081)) !important;
}
html[data-design-theme="silver-screen"] .card.accent-danger,
html[data-design-theme="silver-screen"] .card.accent-brand {
  border-top-color: var(--red, #ff4081) !important;
}
html[data-design-theme="silver-screen"] .card.accent-info {
  border-top-color: var(--blue, #35688f) !important;
}
html[data-design-theme="silver-screen"] .card.accent-success {
  border-top-color: var(--success, #2e8b57) !important;
}
html[data-design-theme="silver-screen"] .card.accent-warning {
  border-top-color: var(--warning, #a6761d) !important;
}
html[data-design-theme="silver-screen"] .card.accent-primary {
  border-top-color: var(--black, #0d1114) !important;
}
/* Card-level semantic: all borders use semantic color, uniform 2px, top 6px */
html[data-design-theme="silver-screen"] .card.danger:not([class*="accent-"]),
html[data-design-theme="silver-screen"] .card.brand:not([class*="accent-"]) {
  border-top: 6px solid var(--red, #ff4081) !important;
  border-right: 2px solid var(--red, #ff4081) !important;
  border-bottom: 2px solid var(--red, #ff4081) !important;
  border-left: 2px solid var(--red, #ff4081) !important;
}
html[data-design-theme="silver-screen"] .card.warning:not([class*="accent-"]) {
  border-top: 6px solid var(--warning, #a6761d) !important;
  border-right: 2px solid var(--warning, #a6761d) !important;
  border-bottom: 2px solid var(--warning, #a6761d) !important;
  border-left: 2px solid var(--warning, #a6761d) !important;
}
html[data-design-theme="silver-screen"] .card.success:not([class*="accent-"]) {
  border-top: 6px solid var(--success, #2e8b57) !important;
  border-right: 2px solid var(--success, #2e8b57) !important;
  border-bottom: 2px solid var(--success, #2e8b57) !important;
  border-left: 2px solid var(--success, #2e8b57) !important;
}
html[data-design-theme="silver-screen"] .card.info:not([class*="accent-"]) {
  border-top: 6px solid var(--blue, #35688f) !important;
  border-right: 2px solid var(--blue, #35688f) !important;
  border-bottom: 2px solid var(--blue, #35688f) !important;
  border-left: 2px solid var(--blue, #35688f) !important;
}
html[data-design-theme="silver-screen"] .card.primary:not([class*="accent-"]) {
  border-top: 6px solid var(--black, #0d1114) !important;
  border-right: 2px solid var(--black, #0d1114) !important;
  border-bottom: 2px solid var(--black, #0d1114) !important;
  border-left: 2px solid var(--black, #0d1114) !important;
}
/* Semantic card-level: header/footer stay white */
html[data-design-theme="silver-screen"] .card.danger .card-header,
html[data-design-theme="silver-screen"] .card.danger .card-footer,
html[data-design-theme="silver-screen"] .card.warning .card-header,
html[data-design-theme="silver-screen"] .card.warning .card-footer,
html[data-design-theme="silver-screen"] .card.success .card-header,
html[data-design-theme="silver-screen"] .card.success .card-footer,
html[data-design-theme="silver-screen"] .card.info .card-header,
html[data-design-theme="silver-screen"] .card.info .card-footer,
html[data-design-theme="silver-screen"] .card.brand .card-header,
html[data-design-theme="silver-screen"] .card.brand .card-footer,
html[data-design-theme="silver-screen"] .card.primary .card-header,
html[data-design-theme="silver-screen"] .card.primary .card-footer {
  background: var(--white, #fff) !important;
  color: var(--black, #0d1114);
}
/* Tags / badges */
html[data-design-theme="silver-screen"] .tag,
html[data-design-theme="silver-screen"] .badge {
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
/* Buttons */
html[data-design-theme="silver-screen"] .btn {
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Alerts */
html[data-design-theme="silver-screen"] .alert {
  border-radius: 0;
  border-width: 2px;
}

/* ── code-widgets ── */
/**
 * code-widgets: Code blocks and terminal with Silver Screen styling
 *
 * Dark background, red accent bar, language tags, no rounded corners.
 */

html[data-design-theme="silver-screen"] .widget-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3, 24px);
  margin-bottom: var(--space-5, 40px);
}
html[data-design-theme="silver-screen"] .code-widget {
  background: var(--white, #fff);
  border: 2px solid var(--black, #0d1114);
  overflow: hidden;
}
html[data-design-theme="silver-screen"] .code-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--gray-800, #2a323a);
  border-bottom: 1px solid var(--gray-700, #414b55);
}
html[data-design-theme="silver-screen"] .code-widget-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white, #fff);
}
html[data-design-theme="silver-screen"] .code-widget-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border: 1px solid var(--gray-500, #74808d);
  background: transparent;
}
html[data-design-theme="silver-screen"] .code-widget-badge--syntax {
  color: var(--gray-400, #9aa5b1);
  border-color: var(--gray-600, #5a6672);
}
html[data-design-theme="silver-screen"] .code-widget-badge--cli {
  color: var(--gray-400, #9aa5b1);
  border-color: var(--gray-600, #5a6672);
}
html[data-design-theme="silver-screen"] .code-widget-badge--lang {
  color: var(--white, #fff);
  background: var(--gray-600, #5a6672);
  border: none;
}
html[data-design-theme="silver-screen"] .code-widget-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--gray-800, #2a323a);
  border-bottom: 2px solid var(--red, #ff4081);
}
html[data-design-theme="silver-screen"] .code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
html[data-design-theme="silver-screen"] .code-dot--red { background: #ff5f57; }
html[data-design-theme="silver-screen"] .code-dot--yellow { background: #febc2e; }
html[data-design-theme="silver-screen"] .code-dot--green { background: #28c840; }
html[data-design-theme="silver-screen"] .code-widget-filename {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gray-400, #9aa5b1);
  margin-left: 8px;
}
html[data-design-theme="silver-screen"] .code-widget-body {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  padding: 20px 16px;
  margin: 0;
  color: var(--gray-300, #c4ccd4);
  background: var(--gray-900, #1a2027);
  white-space: pre;
  overflow-x: auto;
}
html[data-design-theme="silver-screen"] .code-comment { color: var(--gray-600, #5a6672); }
html[data-design-theme="silver-screen"] .code-keyword { color: #ff6b6b; }
html[data-design-theme="silver-screen"] .code-string { color: #7cc79c; }
html[data-design-theme="silver-screen"] .code-function { color: var(--white, #fff); }
html[data-design-theme="silver-screen"] .code-number { color: var(--yellow, #8d97a3); }
html[data-design-theme="silver-screen"] .code-prompt { color: var(--gray-500, #74808d); }
html[data-design-theme="silver-screen"] .code-output { color: var(--gray-400, #9aa5b1); }
html[data-design-theme="silver-screen"] .code-success { color: #7cc79c; }
html[data-design-theme="silver-screen"] .code-widget-desc {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray-600, #5a6672);
  border-top: 1px solid var(--gray-200, #dde3e9);
}
html[data-design-theme="silver-screen"] .effects-subsection-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black, #0d1114);
  margin-top: var(--space-5, 40px);
  padding-bottom: var(--space-1, 8px);
  border-bottom: 2px solid var(--red, #ff4081);
}
@media (max-width: 700px) {
  html[data-design-theme="silver-screen"] .widget-grid {
    grid-template-columns: 1fr;
  }
}

/* ── hui ── */
/**
 * hui: Squared-off treatment for HUI components
 *
 * 2px black borders, offset box shadows, uppercase labels, red focus accents.
 */

/* Trigger buttons: sans uppercase */
html[data-design-theme="silver-screen"] .hui.menu-btn,
html[data-design-theme="silver-screen"] .hui.popover-btn {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  transition: box-shadow 0.15s ease;
}
html[data-design-theme="silver-screen"] .hui.menu-btn:hover,
html[data-design-theme="silver-screen"] .hui.popover-btn:hover {
  box-shadow: 4px 4px 0 var(--gray-200, #dde3e9);
}
/* Overlay panels: hard border, no blur */
html[data-design-theme="silver-screen"] .hui.menu-items,
html[data-design-theme="silver-screen"] .hui.listbox-options,
html[data-design-theme="silver-screen"] .hui.combo-options,
html[data-design-theme="silver-screen"] .hui.popover-panel {
  border: 2px solid var(--black, #0d1114);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--gray-200, #dde3e9);
}
/* Active items: yellow highlight */
html[data-design-theme="silver-screen"] .hui.menu-item[data-active],
html[data-design-theme="silver-screen"] .hui.listbox-option[data-active],
html[data-design-theme="silver-screen"] .hui.combo-option[data-active] {
  background: var(--yellow, #aab4bf);
  color: var(--black, #0d1114);
}
/* Tabs: bold uppercase underline */
html[data-design-theme="silver-screen"] .hui.tab-list {
  border-bottom: 2px solid var(--black, #0d1114);
  gap: 0;
}
html[data-design-theme="silver-screen"] .hui.tab {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 8px 16px;
  border: 2px solid transparent;
}
html[data-design-theme="silver-screen"] .hui.tab[data-selected] {
  border-bottom-color: var(--red, #ff5c94);
  color: var(--red, #ff5c94);
}
/* Switch: square toggle */
html[data-design-theme="silver-screen"] .hui.switch {
  border-radius: 0;
  border: 2px solid var(--black, #0d1114);
}
html[data-design-theme="silver-screen"] .hui.switch[data-checked] {
  background: var(--red, #ff5c94);
}
html[data-design-theme="silver-screen"] .hui.switch-thumb {
  border-radius: 0;
  background: var(--white, #ffffff);
  border: 1px solid var(--black, #0d1114);
}
/* Combo input: hard border */
html[data-design-theme="silver-screen"] .hui.combo-input {
  font-family: var(--font-sans);
  font-size: 13px;
  border-radius: 0;
  border: 2px solid var(--black, #0d1114);
}
html[data-design-theme="silver-screen"] .hui.combo-input:focus {
  outline: none;
  border-color: var(--red, #ff5c94);
  box-shadow: 3px 3px 0 var(--red, #ff5c94);
}
/* Disclosure: bold accordion */
html[data-design-theme="silver-screen"] .hui.disclosure-btn {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0;
  transition: background 0.1s ease;
}
html[data-design-theme="silver-screen"] .hui.disclosure-btn:hover {
  background: var(--yellow, #aab4bf);
  color: var(--black, #0d1114);
}
/* Dialog: hard frame, offset shadow */
html[data-design-theme="silver-screen"] .hui.dialog-panel {
  border: 2px solid var(--black, #0d1114);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--gray-200, #dde3e9);
}
html[data-design-theme="silver-screen"] .hui.dialog-title {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
/* Showcase: mono cell name */
html[data-design-theme="silver-screen"] .showcase-cell-name {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  font-size: 10px;
  text-transform: uppercase;
}
/* Card hover handled in cards section — no duplicate */

/* ── dividers ── */
/**
 * dividers: Hard-rule section dividers
 *
 * Solid 2px black rules for section breaks, thin 1px rules for subsections.
 */

html[data-design-theme="silver-screen"] .hr.section {
  border: none;
  height: 2px;
  background: var(--black, #0d1114);
  margin: var(--space-8) 0;
}
html[data-design-theme="silver-screen"] .hr.subsection {
  border: none;
  height: 1px;
  background: var(--gray-200, #dde3e9);
  margin: var(--space-4) 0;
}

/* ── typography ── */
/**
 * typography: Sans-serif font specimen names
 *
 * Heavy uppercase sans on font entry headings.
 */

html[data-design-theme="silver-screen"] .font-entry-name {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* ── ink-effects ── */
/**
 * ink-effects: Grid effects panel and agent dashboard
 *
 * Animation demos with Silver Screen geometry, and a 3-panel agent dashboard.
 */

/* --- Keyframes (grid-drop, bar-slide, fade-up — bar-slide & grid-drop in intro-hero) --- */
@keyframes grid-stamp {
  0% { transform: scale(1.15); opacity: 0; }
  60% { transform: scale(0.97); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pulse-block {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.8; }
}
@keyframes fade-up {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- Effects Grid --- */
html[data-design-theme="silver-screen"] .effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3, 16px);
  margin-bottom: var(--space-6, 48px);
}
html[data-design-theme="silver-screen"] .effect-card {
  background: var(--surface, #ffffff);
  border: 2px solid var(--black, #0d1114);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--gray-200, #dde3e9);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3, 16px);
  gap: var(--space-2, 8px);
}
html[data-design-theme="silver-screen"] .effect-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted, #74808d);
}

/* Demo: Grid Stamp (replaces ink-bleed) */
html[data-design-theme="silver-screen"] .ink-bleed-kanji {
  font-family: var(--font-sans);
  font-size: 64px;
  font-weight: 900;
  font-style: normal;
  color: var(--black, #0d1114);
  animation: grid-stamp 0.6s ease-out;
}

/* Demo: Slide-in text (replaces brush-in) */
html[data-design-theme="silver-screen"] .brush-in-text {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--black, #0d1114);
  animation: fade-up 0.5s ease-out;
}

/* Demo: Pulse block (replaces breath circle) */
html[data-design-theme="silver-screen"] .breath-circle {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: var(--red, #ff5c94);
  animation: pulse-block 2s ease-in-out infinite;
}

/* Demo: Grid Stamp glyph (replaces seal-stamp) */
html[data-design-theme="silver-screen"] .seal-stamp-glyph {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 900;
  color: var(--black, #0d1114);
  background: var(--yellow, #aab4bf);
  border: 2px solid var(--black, #0d1114);
  border-radius: 0;
  width: 56px;
  height: 56px;
  line-height: 52px;
  text-align: center;
  display: inline-block;
  animation: grid-stamp 0.6s ease-out 0.2s both;
}

/* Demo: Color Bar (replaces ink-wash gradient) */
html[data-design-theme="silver-screen"] .ink-wash-bar {
  width: 100%;
  height: 24px;
  border-radius: 0;
  border: 2px solid var(--black, #0d1114);
  background: linear-gradient(
    90deg,
    var(--black, #0d1114) 0%,
    var(--black, #0d1114) 25%,
    var(--red, #ff5c94) 25%,
    var(--red, #ff5c94) 50%,
    var(--blue, #2c5877) 50%,
    var(--blue, #2c5877) 75%,
    var(--yellow, #aab4bf) 75%,
    var(--yellow, #aab4bf) 100%
  );
}

/* Demo: Fade Up */
html[data-design-theme="silver-screen"] .fade-up-text {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--black, #0d1114);
  animation: fade-up 0.5s ease-out;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  html[data-design-theme="silver-screen"] .ink-bleed-kanji,
  html[data-design-theme="silver-screen"] .brush-in-text,
  html[data-design-theme="silver-screen"] .breath-circle,
  html[data-design-theme="silver-screen"] .seal-stamp-glyph,
  html[data-design-theme="silver-screen"] .fade-up-text {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* --- Agent Dashboard --- */
html[data-design-theme="silver-screen"] .agent-dashboard {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  gap: 2px;
  margin-top: var(--space-4, 24px);
  background: var(--black, #0d1114);
  border: 2px solid var(--black, #0d1114);
  border-radius: 0;
  overflow: hidden;
}
html[data-design-theme="silver-screen"] .dashboard-panel {
  background: var(--surface, #ffffff);
  padding: var(--space-3, 16px);
}
html[data-design-theme="silver-screen"] .dashboard-panel-title {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted, #74808d);
  font-weight: 700;
  margin-bottom: var(--space-2, 8px);
  padding-bottom: var(--space-1, 4px);
  border-bottom: 1px solid var(--gray-200, #dde3e9);
}

/* Stories Panel */
html[data-design-theme="silver-screen"] .story-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
html[data-design-theme="silver-screen"] .story-item {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary, #444);
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-200, #dde3e9);
  display: flex;
  align-items: center;
  gap: 8px;
}
html[data-design-theme="silver-screen"] .story-item:last-child {
  border-bottom: none;
}
html[data-design-theme="silver-screen"] .story-id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted, #74808d);
  letter-spacing: 0.05em;
}
html[data-design-theme="silver-screen"] .story-item--done {
  text-decoration: line-through;
  color: var(--text-muted, #9aa5b1);
}
html[data-design-theme="silver-screen"] .story-item--active {
  color: var(--black, #0d1114);
  font-weight: 700;
}
html[data-design-theme="silver-screen"] .story-item--active .story-id {
  color: var(--red, #ff5c94);
}
html[data-design-theme="silver-screen"] .story-item--queued {
  color: var(--text-muted, #9aa5b1);
}

/* Live Output Panel */
html[data-design-theme="silver-screen"] .dashboard-panel--output {
  background: var(--black, #0d1114);
}
html[data-design-theme="silver-screen"] .dashboard-panel--output .dashboard-panel-title {
  color: var(--gray-400, #8a94a0);
  border-bottom-color: var(--gray-700, #414b55);
}
html[data-design-theme="silver-screen"] .live-output {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  color: var(--gray-400, #adb6c0);
  margin-bottom: var(--space-2, 8px);
}
html[data-design-theme="silver-screen"] .output-line {
  padding: 2px 0;
}
html[data-design-theme="silver-screen"] .output-line--active {
  color: var(--yellow, #aab4bf);
}
html[data-design-theme="silver-screen"] .output-ts {
  color: var(--gray-600, #555);
  margin-right: 8px;
}

/* Agent Controls */
html[data-design-theme="silver-screen"] .agent-controls {
  display: flex;
  gap: 8px;
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--gray-700, #414b55);
}
html[data-design-theme="silver-screen"] .agent-btn {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  border: 2px solid var(--gray-400, #8a94a0);
  background: transparent;
  color: var(--gray-400, #adb6c0);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.1s ease, color 0.1s ease;
}
html[data-design-theme="silver-screen"] .agent-btn:hover {
  border-color: var(--yellow, #aab4bf);
  color: var(--yellow, #aab4bf);
}
html[data-design-theme="silver-screen"] .agent-btn--primary {
  background: var(--red, #ff5c94);
  border-color: var(--red, #ff5c94);
  color: var(--white, #ffffff);
}
html[data-design-theme="silver-screen"] .agent-btn--primary:hover {
  background: var(--black, #0d1114);
  border-color: var(--red, #ff5c94);
  color: var(--red, #ff5c94);
}

/* Criteria Panel */
html[data-design-theme="silver-screen"] .criteria-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
html[data-design-theme="silver-screen"] .criteria-item {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary, #444);
  padding: 5px 0;
  padding-left: 20px;
  position: relative;
  border-bottom: 1px solid var(--gray-200, #dde3e9);
}
html[data-design-theme="silver-screen"] .criteria-item:last-child {
  border-bottom: none;
}
html[data-design-theme="silver-screen"] .criteria-item::before {
  position: absolute;
  left: 0;
  top: 5px;
  font-size: 11px;
  font-family: var(--font-mono);
}
html[data-design-theme="silver-screen"] .criteria-item--done::before {
  content: "\2713";
  color: var(--blue, #2c5877);
  font-weight: 700;
}
html[data-design-theme="silver-screen"] .criteria-item--done {
  color: var(--text-muted, #9aa5b1);
  text-decoration: line-through;
}
html[data-design-theme="silver-screen"] .criteria-item--pending::before {
  content: "\25A1";
  color: var(--text-muted, #9aa5b1);
}

/* ── screens ── */
/**
 * screens: Mock browser frames in the Silver Screen grid system
 *
 * Landing and settings page mockups with white surfaces, black borders, and
 * primary color accents.
 */

/* ── Screen Frame ── */
html[data-design-theme="silver-screen"] .screen-frame {
  border: 2px solid var(--black, #0d1114);
  border-radius: 0;
  background: var(--surface, #ffffff);
  box-shadow: 6px 6px 0 var(--gray-200, #dde3e9);
}
html[data-design-theme="silver-screen"] .screen-titlebar {
  background: var(--black, #0d1114);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 2px solid var(--black, #0d1114);
}
html[data-design-theme="silver-screen"] .screen-dot {
  width: 10px;
  height: 10px;
  border-radius: 0;
  background: var(--gray-600, #555);
}
html[data-design-theme="silver-screen"] .screen-dot:first-child {
  background: var(--red, #ff5c94);
}
html[data-design-theme="silver-screen"] .screen-dot:nth-child(2) {
  background: var(--yellow, #aab4bf);
}
html[data-design-theme="silver-screen"] .screen-dot:nth-child(3) {
  background: var(--blue, #2c5877);
}
html[data-design-theme="silver-screen"] .screen-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gray-400, #adb6c0);
  background: var(--gray-800, #222);
  padding: 3px 12px;
  border-radius: 0;
  margin-left: 8px;
  flex: 1;
  max-width: 260px;
}
html[data-design-theme="silver-screen"] .screen-label {
  margin-left: auto;
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gray-400, #adb6c0);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px 0;
}
/* ── Navbar inside screen frames ── */
html[data-design-theme="silver-screen"] .screen-body > .content {
  padding-top: 0;
  margin-top: 0;
  background: var(--surface, #ffffff);
}
html[data-design-theme="silver-screen"] .screen-body .shell-navbar {
  display: flex;
  position: relative;
  top: auto; left: auto; right: auto;
  z-index: auto;
  height: auto;
  background: transparent;
  color: var(--black, #0d1114);
  align-items: center;
  padding: 16px 0;
  gap: var(--space-3);
  border-bottom: 2px solid var(--black, #0d1114);
}
html[data-design-theme="silver-screen"] .screen-body .shell-navbar-brand {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 900;
  font-style: normal;
  color: var(--black, #0d1114);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
html[data-design-theme="silver-screen"] .screen-body .shell-navbar-links {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #74808d);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[data-design-theme="silver-screen"] .screen-body .shell-navbar-link {
  color: var(--text-muted, #74808d);
  opacity: 1;
}
html[data-design-theme="silver-screen"] .screen-body .shell-navbar-link:last-child {
  color: var(--red, #ff5c94);
  font-weight: 900;
}
html[data-design-theme="silver-screen"] .screen-hero {
  text-align: left;
  padding: 48px 0 32px;
  background: var(--surface, #ffffff);
  border-bottom: 2px solid var(--black, #0d1114);
}
html[data-design-theme="silver-screen"] .screen-hero .typography-display {
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
html[data-design-theme="silver-screen"] .screen-hero .typography-body {
  max-width: 520px;
  margin: 0 auto 32px;
}
html[data-design-theme="silver-screen"] .screen-body .btn-group {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
}
html[data-design-theme="silver-screen"] .screen-body {
  zoom: 0.65;
  background: var(--surface, #ffffff);
  overflow: visible;
  aspect-ratio: auto;
  padding: 0;
  display: block;
}
html[data-design-theme="silver-screen"] .screen-body .btn {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 40px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 0;
  border: 2px solid var(--black, #0d1114);
}
html[data-design-theme="silver-screen"] .screen-body .btn.btn-outline {
  border-color: var(--black, #0d1114);
  color: var(--black, #0d1114);
  background: transparent;
}
html[data-design-theme="silver-screen"] .screen-body .card {
  background: var(--surface, #ffffff);
  border: 2px solid var(--black, #0d1114);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--gray-200, #dde3e9);
  min-height: 160px;
}
html[data-design-theme="silver-screen"] .screen-body .card-body {
  padding: var(--space-3, 16px);
}
html[data-design-theme="silver-screen"] .screen-body .card-title {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}
html[data-design-theme="silver-screen"] .screen-body .hr.section {
  border: none;
  height: 2px;
  background: var(--black, #0d1114);
  margin: 24px 0;
}
html[data-design-theme="silver-screen"] .screen-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* ── Settings Page ── */
html[data-design-theme="silver-screen"] .settings-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--black, #0d1114);
  margin-bottom: 24px;
}
html[data-design-theme="silver-screen"] .settings-layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
}
html[data-design-theme="silver-screen"] .screen-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html[data-design-theme="silver-screen"] .screen-sidebar-item {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #74808d);
  padding: 6px 12px;
  border-radius: 0;
  cursor: default;
}
html[data-design-theme="silver-screen"] .screen-sidebar-item.active {
  background: var(--yellow, #aab4bf);
  color: var(--black, #0d1114);
  border-left: 3px solid var(--red, #ff5c94);
  padding-left: 9px;
}
html[data-design-theme="silver-screen"] .settings-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
html[data-design-theme="silver-screen"] .screen-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* ── Dashboard Screen ── */
html[data-design-theme="silver-screen"] .screen-dashboard-grid {
  display: grid;
  grid-template-columns: 200px 1fr 220px;
  gap: 2px;
  background: var(--black, #0d1114);
  border: 2px solid var(--black, #0d1114);
  border-radius: 0;
  overflow: hidden;
  min-height: 320px;
}
html[data-design-theme="silver-screen"] .screen-dashboard-panel {
  background: var(--surface, #ffffff);
  padding: 16px;
}
html[data-design-theme="silver-screen"] .screen-dashboard-panel--output {
  background: var(--black, #0d1114);
}
html[data-design-theme="silver-screen"] .screen-dashboard-panel .typography-label {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-200, #dde3e9);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
}
html[data-design-theme="silver-screen"] .screen-dashboard-panel--output .typography-label {
  color: var(--gray-400, #8a94a0);
  border-bottom-color: var(--gray-700, #414b55);
}
html[data-design-theme="silver-screen"] .screen-dashboard-story {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted, #74808d);
  border-radius: 0;
  margin-bottom: 2px;
}
html[data-design-theme="silver-screen"] .screen-dashboard-story.active {
  background: var(--yellow, #aab4bf);
  border-left: 3px solid var(--red, #ff5c94);
  color: var(--black, #0d1114);
  font-weight: 700;
}
html[data-design-theme="silver-screen"] .screen-dashboard-story.done {
  color: var(--gray-300, #c4ccd4);
  text-decoration: line-through;
}
html[data-design-theme="silver-screen"] .screen-dashboard-ts {
  color: var(--gray-500, #8a94a0);
  margin-right: 8px;
  font-family: var(--font-mono);
}
html[data-design-theme="silver-screen"] .screen-dashboard-line-active {
  color: var(--yellow, #aab4bf);
}
html[data-design-theme="silver-screen"] .screen-dashboard-criteria {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted, #74808d);
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-200, #dde3e9);
}
html[data-design-theme="silver-screen"] .screen-dashboard-criteria:last-child {
  border-bottom: none;
}
html[data-design-theme="silver-screen"] .screen-dashboard-criteria.done::before {
  content: '\2713  ';
  color: var(--blue, #2c5877);
  font-weight: 700;
}
html[data-design-theme="silver-screen"] .screen-dashboard-criteria.pending::before {
  content: '\25A1  ';
  color: var(--gray-300, #c4ccd4);
}

/* ── Responsive ── */
@media (max-width: 640px) {
  html[data-design-theme="silver-screen"] .screen-features {
    grid-template-columns: 1fr;
  }
  html[data-design-theme="silver-screen"] .settings-layout {
    grid-template-columns: 1fr;
  }
  html[data-design-theme="silver-screen"] .screen-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  html[data-design-theme="silver-screen"] .screen-nav-links {
    display: none;
  }
}

/* ── CODE-TERMINAL ── (from: style-guide.css-snippets.yaml) */
/* ═══════════════════════════════════════
   CODE BLOCKS
   ═══════════════════════════════════════ */

/* ─── Inline code ─── */
html[data-design-theme="silver-screen"] .code-inline {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  padding: 0.1em 0.35em;
}

/* ─── Code window shell ─── */
html[data-design-theme="silver-screen"] .code-window {
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ─── Title bar ─── */
html[data-design-theme="silver-screen"] .code-title-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--code-title-bar-bg, color-mix(in srgb, var(--code-bg) 85%, var(--black)));
  border-bottom: 1px solid var(--code-border);
}

html[data-design-theme="silver-screen"] .code-title-bar-dots {
  display: flex;
  gap: var(--space-half);
}

html[data-design-theme="silver-screen"] .code-title-bar-dots span {
  width: var(--font-size-2xs);
  height: var(--font-size-2xs);
  border-radius: var(--radius-circle);
  background: var(--code-border);
  display: inline-block;
}

html[data-design-theme="silver-screen"] .code-title-bar-filename {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--code-comment);
}

/* ─── Code block ─── */
html[data-design-theme="silver-screen"] .code-block {
  margin: 0;
  padding: var(--space-3);
  background: var(--code-bg);
  color: var(--code-text);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  overflow-x: auto;
  tab-size: 2;
}

/* ─── Line-numbered variant ─── */
html[data-design-theme="silver-screen"] .code-block-lined {
  padding: var(--space-2) 0;
}

html[data-design-theme="silver-screen"] .code-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  min-height: 1.5em;
}

html[data-design-theme="silver-screen"] .code-line:hover {
  background: color-mix(in srgb, var(--code-line-number) 6%, transparent);
}

html[data-design-theme="silver-screen"] .code-line-number {
  flex-shrink: 0;
  min-width: var(--space-3);
  text-align: right;
  color: var(--code-line-number);
  font-size: var(--font-size-xs);
  user-select: none;
}

html[data-design-theme="silver-screen"] .code-line-content {
  flex: 1;
}

/* ═══════════════════════════════════════
   TERMINAL
   ═══════════════════════════════════════ */

/* ─── Terminal window shell ─── */
html[data-design-theme="silver-screen"] .terminal-window {
  border: 1px solid var(--terminal-border);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--font-mono);
}

/* ─── Title bar ─── */
html[data-design-theme="silver-screen"] .terminal-title-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--terminal-title-bar-bg);
  border-bottom: 1px solid var(--terminal-border);
}

html[data-design-theme="silver-screen"] .terminal-dots {
  display: flex;
  gap: var(--space-half);
  align-items: center;
}

html[data-design-theme="silver-screen"] .terminal-dot {
  width: var(--font-size-2xs);
  height: var(--font-size-2xs);
  border-radius: var(--radius-circle);
  display: inline-block;
}
html[data-design-theme="silver-screen"] .terminal-dot-close { background: var(--screen-dot-close, #ff5f56); }
html[data-design-theme="silver-screen"] .terminal-dot-minimize { background: var(--screen-dot-minimize, #ffbd2e); }
html[data-design-theme="silver-screen"] .terminal-dot-maximize { background: var(--screen-dot-maximize, #27c93f); }

html[data-design-theme="silver-screen"] .terminal-title {
  font-size: var(--font-size-xs);
  color: var(--terminal-output);
  opacity: 0.6;
}

/* ─── Terminal body ─── */
html[data-design-theme="silver-screen"] .terminal-body {
  padding: var(--space-2) var(--space-3);
  background: var(--terminal-bg);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* ─── Rows ─── */
html[data-design-theme="silver-screen"] .terminal-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-half) 0;
  line-height: var(--line-height-compact);
}

html[data-design-theme="silver-screen"] .terminal-prompt {
  color: var(--terminal-prompt);
  font-size: var(--font-size-sm);
  user-select: none;
  flex-shrink: 0;
}

html[data-design-theme="silver-screen"] .terminal-command {
  color: var(--terminal-command);
  font-size: var(--font-size-sm);
}

/* ─── Output variants ─── */
html[data-design-theme="silver-screen"] .terminal-output {
  color: var(--terminal-output);
  font-size: var(--font-size-sm);
  padding: 1px 0 1px var(--space-2);
  line-height: var(--line-height-relaxed);
}

html[data-design-theme="silver-screen"] .terminal-success { color: var(--terminal-success); }
html[data-design-theme="silver-screen"] .terminal-error { color: var(--terminal-error); }
html[data-design-theme="silver-screen"] .terminal-warning { color: var(--terminal-warning); }


/* ── GLOBALS ── (from: style-guide.globals.yaml) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--base-font-size); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  font-family: var(--base-font-family);
  color: var(--base-font-color);
  background: var(--base-background);
  line-height: var(--base-line-height);
}
html[data-design-theme="silver-screen"] ::selection { background: var(--yellow); color: var(--black); }
[data-design-theme="silver-screen"] { font-variant-ligatures: none; }