:root {
  --mx-app-stage-height: 620px;
  --mx-app-thumb-height: 96px;
  --mx-app-card-height: 130px;
  --mx-phone-border: 4px;
  --mx-phone-radius: 14px;
  --mx-color-primary: #30343d;
  --mx-color-primary-hover: #454b57;
  --mx-color-text: #252932;
  --mx-color-text-secondary: #707784;
  --mx-color-white: #fff;
  --mx-color-bg: #f0f2f5;
  --mx-color-bg-hover: #e5e8ee;
  --mx-color-bg-active: #dae0e9;
  --mx-color-page: #f7f8fa;
  --mx-color-panel: #fff;
  --mx-color-border: #dce1e9;
  --mx-color-accent: #7062a5;
  --mx-color-accent-soft: #eeeaf8;
  --mx-color-success: #31705b;
  --mx-color-success-soft: #edf5f1;
  --mx-color-danger: #bd3d52;
  --mx-color-danger-soft: #fbeef0;
  --mx-color-danger-hover: #f5dce1;
  --mx-color-warning: #8c6828;
  --mx-color-warning-soft: #faf2e2;
  --mx-space-xs: 4px;
  --mx-space-sm: 8px;
  --mx-space-md: 16px;
  --mx-space-lg: 24px;
  --mx-space-xl: 32px;
  --mx-space-2xl: 48px;
  --mx-space-3xl: 64px;
  --mx-space-4xl: 96px;
  --mx-gap: 1px;
  --mx-radius-sm: 5px;
  --mx-radius-md: 5px;
  --mx-radius-lg: 8px;
  --mx-radius-full: 9999px;
  --mx-size-sm: 28px;
  --mx-size-md: 36px;
  --mx-size-lg: 44px;
  --mx-size-xl: 56px;
  --mx-font-xs: 11px;
  --mx-font-sm: 12px;
  --mx-font-md: 14px;
  --mx-font-lg: 16px;
  --mx-font-xl: 20px;
  --mx-font-2xl: 28px;
  --mx-font-3xl: 40px;
  --mx-font-display: clamp(38px, 4.2vw, 68px);
  --mx-font-about: clamp(48px, 6vw, 88px);
  --mx-weight-normal: 400;
  --mx-weight-medium: 500;
  --mx-weight-bold: 700;
  --mx-weight-heavy: 800;
  --mx-line-tight: 1.2;
  --mx-line-body: 1.7;
  --mx-letter-tight: -2px;
  --mx-border-width: 1px;
  --mx-container: 1280px;
  --mx-container-gutter: 40px;
  --mx-header-height: 88px;
  --mx-card-image-height: 220px;
  --mx-card-summary-height: 48px;
  --mx-hero-preview-height: 224px;
  --mx-hero-mini-height: 98px;
  --mx-hero-copy-width: 10em;
  --mx-grid-size: 24px;
  --mx-grid-color: #edf0f4;
  --mx-select-width: 138px;
  --mx-select-max-height: 280px;
  --mx-textarea-height: 144px;
  --mx-dialog-width: 480px;
  --mx-dialog-wide: 920px;
  --mx-dialog-max-height: 90vh;
  --mx-message-top: 24px;
  --mx-message-width: 90vw;
  --mx-auth-panel-width: 400px;
  --mx-auth-min-height: 640px;
  --mx-content-width: 720px;
  --mx-narrow-width: 520px;
  --mx-preview-max-height: 70vh;
  --mx-z-base: 1;
  --mx-z-header: 100;
  --mx-z-tooltip: 1100;
  --mx-z-dropdown: 1000;
  --mx-z-dialog: 2000;
  --mx-z-message: 3000;
  --mx-transition: 0.2s ease;
  --mx-group-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --mx-opacity-disabled: 0.45;
  --mx-overlay: rgba(25, 30, 39, 0.5);
  --mx-overlay-blur: 4px;
  --mx-shadow-popover: 0 16px 56px rgba(25, 30, 39, 0.14);
  --mx-glass-bg: rgba(229, 232, 238, 0.58);
  --mx-glass-border: rgba(255, 255, 255, 0.78);
  --mx-glass-indicator: rgba(255, 255, 255, 0.93);
  --mx-glass-hover: rgba(255, 255, 255, 0.45);
  --mx-glass-shadow:
    0 2px 8px rgba(30, 34, 43, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  --mx-glass-blur: 14px;
  --mx-glass-saturation: 140%;
  --mx-group-padding: 5px;
  --mx-group-radius: 10px;
  --mx-focus: 2px solid #79718f;
  --mx-hero-bg: linear-gradient(135deg, #eef0f6, #f7f7fc);
  --mx-skeleton: linear-gradient(100deg, #eceff3 20%, #f6f7f9 45%, #eceff3 70%);
  --mx-skeleton-duration: 1.8s;
  --mx-spinner-duration: 1s;
  --mx-browser-dot: #b9beca;
  --mx-dot-size: 5px;
  --mx-brand-dot: #8e82b5;
  --mx-brand-size: 38px;
  --mx-hero-shadow: 0 16px 40px rgba(65, 62, 85, 0.1);
  --mx-preview-background: #e9edf3;
  --mx-preview-gradient: linear-gradient(120deg, #e6eaf3, #eeeaf5);
  --mx-preview-zoom: 1.015;
}
:root[data-theme="dark"] {
  --mx-color-primary: #cbd0db;
  --mx-color-primary-hover: #dde1e8;
  --mx-color-text: #e4e7ed;
  --mx-color-text-secondary: #a3abb9;
  --mx-color-white: #20242c;
  --mx-color-bg: #2b303a;
  --mx-color-bg-hover: #363d4a;
  --mx-color-bg-active: #434c5c;
  --mx-color-page: #1d2128;
  --mx-color-panel: #242931;
  --mx-color-border: #3d4552;
  --mx-grid-color: #282e37;
  --mx-color-accent: #c0b0ea;
  --mx-color-accent-soft: #3b334e;
  --mx-color-success: #a0d8bd;
  --mx-color-success-soft: #263e34;
  --mx-color-danger: #f2a5b3;
  --mx-color-danger-soft: #482d36;
  --mx-color-danger-hover: #583640;
  --mx-color-warning: #e7c585;
  --mx-color-warning-soft: #443b2b;
  --mx-glass-bg: rgba(49, 57, 70, 0.7);
  --mx-glass-border: rgba(255, 255, 255, 0.1);
  --mx-glass-indicator: rgba(255, 255, 255, 0.12);
  --mx-glass-hover: rgba(255, 255, 255, 0.06);
  --mx-glass-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  --mx-hero-bg: linear-gradient(135deg, #2e3241, #2b2c36);
  --mx-preview-background: #343b48;
  --mx-preview-gradient: linear-gradient(120deg, #333a48, #3d3447);
  --mx-skeleton: linear-gradient(100deg, #333945 20%, #3d4552 45%, #333945 70%);
}

:root {--mx-seo-width:1240px;--mx-seo-heading:48px;--mx-seo-heading-mobile:34px;--mx-seo-hero-height:370px;--mx-seo-card-height:210px;--mx-seo-detail-height:640px;--mx-seo-thumb-height:120px;--mx-seo-min-height:65vh;--mx-seo-search-width:220px;--mx-seo-tracking:.06em;--mx-seo-focus-width:2px;--mx-color-white:#fff;}