:root {
  --font-main: 'Inter', sans-serif;

  --site-max-width: 1440px;
  --site-gutter: 40px;
  --site-gutter-tablet: 24px;
  --site-gutter-mobile: 18px;
  --site-gutter-mobile-sm: 14px;

  --bg-main: #f5f5f7;
  --bg-page: #f5f5f7;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-inset: #eeeeef;

  --text-main: #1d1d1f;
  --text-muted: rgba(29,29,31,0.68);
  --text-soft: rgba(29,29,31,0.48);
  --text-inverse: #ffffff;
  --text-inverse-muted: rgba(255,255,255,0.72);
  --text-inverse-soft: rgba(255,255,255,0.54);

  --accent: #1d1d1f;
  --accent-hover: #000000;
  --accent-active: #333336;

  --divider: rgba(29,29,31,0.10);
  --divider-strong: rgba(29,29,31,0.16);
  --border-soft: rgba(29,29,31,0.08);
  --border-strong: rgba(29,29,31,0.14);

  --glass-light-bg: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.58));
  --glass-light-bg-hover: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.72));
  --glass-light-border: rgba(29,29,31,0.18);

  --glass-dark-bg: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.05));
  --glass-dark-bg-hover: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.10));
  --glass-dark-border: rgba(255,255,255,0.16);
  --glass-dark-border-hover: rgba(255,255,255,0.28);

  --glass-blur-sm: blur(14px);
  --glass-blur-md: blur(18px);
  --glass-blur-lg: blur(22px);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-soft: none;
  --shadow-card: none;
  --shadow-panel: none;
  --shadow-strong: 0 28px 90px rgba(0,0,0,0.12);

  --motion-fast: 0.16s ease;
  --motion-base: 0.22s ease;
  --motion-slow: 0.35s ease;

  --fs-header-title: 17px;
  --fs-header-subtitle: 12px;
  --fs-header-nav: 14px;
  --fs-header-cta: 14px;
  --fs-header-lang: 14px;
  --fs-header-badge: 12px;

  --fs-mobile-brand-title: 16px;
  --fs-mobile-brand-subtitle: 11px;
  --fs-mobile-menu-item: 17px;
  --fs-mobile-menu-meta: 17px;
  --fs-mobile-menu-cta: 16px;

  --fs-search-input: 16px;
  --fs-search-title: 14px;
  --fs-search-desc: 13px;
  --fs-search-empty: 13px;

  --fs-story-title: 24px;
  --fs-story-desc: 16px;
  --fs-story-meta-title: 17px;
  --fs-story-meta-subtitle: 13px;

  --fs-story-title-mobile: 22px;
  --fs-story-desc-mobile: 15px;
  --fs-story-meta-title-mobile: 16px;
  --fs-story-meta-subtitle-mobile: 13px;

  --fs-hero-title-desktop: clamp(56px, 4.8vw, 92px);
  --fs-hero-title-tablet: clamp(38px, 5vw, 54px);
  --fs-hero-title-mobile: clamp(24px, 6.2vw, 31px);
  --fs-hero-title-mobile-sm: clamp(22px, 5.8vw, 28px);

  --fs-hero-desc-desktop: clamp(20px, 1.4vw, 26px);
  --fs-hero-desc-tablet: clamp(16px, 2vw, 19px);
  --fs-hero-desc-mobile: 15px;
  --fs-hero-desc-mobile-sm: 14px;

  --fs-hero-button-desktop: 20px;
  --fs-hero-button-tablet: 18px;
  --fs-hero-button-mobile: 16px;

  --lh-tight: 0.95;
  --lh-title: 1.04;
  --lh-base: 1.4;
  --lh-text: 1.5;
  --lh-menu: 1.2;

  --letter-title-desktop: -0.06em;
  --letter-title-mobile: -0.04em;
  --letter-text: -0.01em;
  --letter-button: -0.02em;

  --header-height-desktop: 80px;
  --header-height-tablet: 78px;
  --header-height-mobile: 72px;

  --header-bg: transparent;
  --header-bg-solid: transparent;
  --header-text: #1d1d1f;
  --header-muted: rgba(29,29,31,0.62);
  --header-icon: #1d1d1f;
  --header-border: rgba(29,29,31,0.10);
  --header-divider: rgba(29,29,31,0.12);
  --header-blur: 22px;

  --header-avatar-size: 50px;
  --header-avatar-size-mobile: 44px;
  --header-avatar-border: rgba(29,29,31,0.24);
  --header-avatar-bg: rgba(255,255,255,0.48);

  --header-panel-bg: #f5f5f7;
  --header-panel-bg-solid: #f5f5f7;
  --header-panel-border: rgba(29,29,31,0.10);
  --header-panel-icon: rgba(29,29,31,0.68);

  --header-cta-bg: var(--glass-light-bg);
  --header-cta-bg-hover: var(--glass-light-bg-hover);
  --header-cta-border: rgba(29,29,31,0.18);
  --header-cta-border-hover: rgba(29,29,31,0.28);
  --header-cta-text: #1d1d1f;

  --header-panel-cta-bg: #1d1d1f;
  --header-panel-cta-bg-hover: #000000;
  --header-panel-cta-border: #1d1d1f;
  --header-panel-cta-border-hover: #000000;
  --header-panel-cta-text: #ffffff;

  --badge-bg: var(--glass-light-bg);
  --badge-bg-hover: var(--glass-light-bg-hover);
  --badge-border: rgba(29,29,31,0.18);
  --badge-text: #1d1d1f;

  --button-primary-bg: #1d1d1f;
  --button-primary-bg-hover: #000000;
  --button-primary-bg-active: #333336;
  --button-primary-text: #ffffff;
  --button-primary-border: #1d1d1f;

  --button-glass-bg: var(--glass-light-bg);
  --button-glass-bg-hover: var(--glass-light-bg-hover);
  --button-glass-border: rgba(29,29,31,0.18);
  --button-glass-border-hover: rgba(29,29,31,0.28);
  --button-glass-text: #1d1d1f;

  --search-overlay-bg: #f5f5f7;
  --search-modal-bg: #ffffff;
  --search-field-bg: #ffffff;
  --search-item-bg: transparent;
  --search-item-hover-bg: rgba(29,29,31,0.045);
  --search-border: rgba(29,29,31,0.14);
  --search-border-strong: rgba(29,29,31,0.22);
  --search-divider: rgba(29,29,31,0.10);
  --search-text: #1d1d1f;
  --search-muted: rgba(29,29,31,0.62);

  --story-frame-w: 460px;
  --story-frame-h: 820px;
  --story-frame-radius: 24px;
  --story-bg: #000000;
  --story-overlay-bg: rgba(0,0,0,0.62);
  --story-border: rgba(255,255,255,0.16);
  --story-progress-bg: rgba(255,255,255,0.24);
  --story-progress-fill: rgba(255,255,255,0.92);
  --story-title: #ffffff;
  --story-muted: rgba(255,255,255,0.72);
  --story-soft: rgba(255,255,255,0.54);

  --hero-bg: #05070a;
  --hero-text: #ffffff;
  --hero-muted: rgba(255,255,255,0.72);
  --hero-muted-mobile: rgba(255,255,255,0.76);
  --hero-content-max: 980px;
  --hero-content-tablet-max: 880px;
  --hero-title-max: 980px;
  --hero-desc-max: 860px;
  --hero-desc-tablet-max: 720px;
  --hero-desc-mobile-max: 390px;
  --hero-control-size: 38px;
  --hero-control-size-mobile: 36px;

  --modal-bg: #ffffff;
  --modal-text: #1d1d1f;
  --modal-muted: rgba(29,29,31,0.62);
  --modal-border: rgba(29,29,31,0.12);
  --modal-radius: 22px;
}

html[data-theme="dark"] {
  --bg-main: #000000;
  --bg-page: #000000;
  --bg-card: #111113;
  --bg-elevated: #161617;
  --bg-inset: #0a0a0b;

  --text-main: #f5f5f7;
  --text-muted: rgba(245,245,247,0.68);
  --text-soft: rgba(245,245,247,0.48);

  --accent: #f5f5f7;
  --accent-hover: #ffffff;
  --accent-active: #d8d8dc;

  --divider: rgba(245,245,247,0.10);
  --divider-strong: rgba(245,245,247,0.16);
  --border-soft: rgba(245,245,247,0.08);
  --border-strong: rgba(245,245,247,0.14);

  --ui-bg-hover: rgba(245,245,247,0.055);
  --ui-bg-active: rgba(245,245,247,0.085);
  --ui-border: rgba(245,245,247,0.14);
  --ui-border-hover: rgba(245,245,247,0.24);
  --ui-border-active: rgba(245,245,247,0.30);

  --header-text: #f5f5f7;
  --header-muted: rgba(245,245,247,0.68);
  --header-icon: #f5f5f7;
  --header-border: rgba(245,245,247,0.10);
  --header-divider: rgba(245,245,247,0.12);

  --header-avatar-border: rgba(245,245,247,0.34);
  --header-avatar-bg: rgba(245,245,247,0.10);

  --header-panel-bg: #000000;
  --header-panel-bg-solid: #000000;
  --header-panel-border: rgba(245,245,247,0.10);
  --header-panel-icon: rgba(245,245,247,0.68);

  --header-cta-bg: var(--glass-dark-bg);
  --header-cta-bg-hover: var(--glass-dark-bg-hover);
  --header-cta-border: rgba(245,245,247,0.16);
  --header-cta-border-hover: rgba(245,245,247,0.28);
  --header-cta-text: #f5f5f7;

  --header-panel-cta-bg: var(--glass-dark-bg);
  --header-panel-cta-bg-hover: var(--glass-dark-bg-hover);
  --header-panel-cta-border: rgba(245,245,247,0.16);
  --header-panel-cta-border-hover: rgba(245,245,247,0.28);
  --header-panel-cta-text: #f5f5f7;

  --badge-bg: var(--glass-dark-bg);
  --badge-bg-hover: var(--glass-dark-bg-hover);
  --badge-border: rgba(245,245,247,0.18);
  --badge-text: #f5f5f7;

  --button-primary-bg: #f5f5f7;
  --button-primary-bg-hover: #ffffff;
  --button-primary-bg-active: #d8d8dc;
  --button-primary-text: #000000;
  --button-primary-border: #f5f5f7;

  --button-glass-bg: var(--glass-dark-bg);
  --button-glass-bg-hover: var(--glass-dark-bg-hover);
  --button-glass-border: rgba(245,245,247,0.16);
  --button-glass-border-hover: rgba(245,245,247,0.28);
  --button-glass-text: #f5f5f7;

  --search-overlay-bg: #000000;
  --search-modal-bg: #000000;
  --search-field-bg: #000000;
  --search-item-hover-bg: rgba(245,245,247,0.055);
  --search-border: rgba(245,245,247,0.14);
  --search-border-strong: rgba(245,245,247,0.24);
  --search-divider: rgba(245,245,247,0.10);
  --search-text: #f5f5f7;
  --search-muted: rgba(245,245,247,0.68);

  --modal-bg: #111113;
  --modal-text: #f5f5f7;
  --modal-muted: rgba(245,245,247,0.68);
  --modal-border: rgba(245,245,247,0.12);
}

.header[data-scheme="dark"] {
  --header-text: #ffffff;
  --header-muted: rgba(255,255,255,0.70);
  --header-icon: #ffffff;
  --header-divider: rgba(255,255,255,0.16);
  --header-border: rgba(255,255,255,0.12);
  --header-avatar-border: rgba(255,255,255,0.34);
  --header-avatar-bg: rgba(255,255,255,0.10);

  --badge-text: #ffffff;
  --badge-border: rgba(255,255,255,0.22);
  --badge-bg: var(--glass-dark-bg);

  --header-cta-bg: var(--glass-dark-bg);
  --header-cta-bg-hover: var(--glass-dark-bg-hover);
  --header-cta-border: rgba(255,255,255,0.24);
  --header-cta-border-hover: rgba(255,255,255,0.38);
  --header-cta-text: #ffffff;
}

.header[data-scheme="light"] {
  --header-text: #1d1d1f;
  --header-muted: rgba(29,29,31,0.62);
  --header-icon: #1d1d1f;
  --header-divider: rgba(29,29,31,0.12);
  --header-border: rgba(29,29,31,0.10);
  --header-avatar-border: rgba(29,29,31,0.24);
  --header-avatar-bg: rgba(255,255,255,0.48);

  --badge-text: #1d1d1f;
  --badge-border: rgba(29,29,31,0.18);
  --badge-bg: var(--glass-light-bg);

  --header-cta-bg: var(--glass-light-bg);
  --header-cta-bg-hover: var(--glass-light-bg-hover);
  --header-cta-border: rgba(29,29,31,0.18);
  --header-cta-border-hover: rgba(29,29,31,0.28);
  --header-cta-text: #1d1d1f;
}

.header[data-state="menu"][data-scheme="light"] {
  --header-bg: #f5f5f7;
  --header-bg-solid: #f5f5f7;
  --header-panel-bg: #f5f5f7;
  --header-panel-bg-solid: #f5f5f7;
  --header-panel-border: rgba(29,29,31,0.10);
}

.header[data-state="menu"][data-scheme="dark"] {
  --header-bg: #000000;
  --header-bg-solid: #000000;
  --header-panel-bg: #000000;
  --header-panel-bg-solid: #000000;
  --header-panel-border: rgba(245,245,247,0.10);
}

html,
body {
  min-height: 100%;
  background: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}