*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  background: var(--bg);
  color: var(--label);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:root {
  --font-regular: "SFProText-Regular", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-medium: "SFProText-Medium", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-semibold: "SFProText-Semibold", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-bold: "SFProText-Bold", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-display: "SFProDisplay-Regular", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-display-medium: "SFProDisplay-Medium", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-display-semibold: "SFProDisplay-Semibold", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-display-bold: "SFProDisplay-Bold", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-rounded: "SFRounded-Regular", -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Helvetica Neue", Arial, sans-serif;
  --font-rounded-medium: "SFRounded-Medium", -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Helvetica Neue", Arial, sans-serif;
  --font-rounded-semibold: "SFRounded-Semibold", -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Helvetica Neue", Arial, sans-serif;
  --font-rounded-bold: "SFRounded-Bold", -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Helvetica Neue", Arial, sans-serif;

  --text-caption2: 11px;
  --text-caption: 12px;
  --text-footnote: 13px;
  --text-subheadline: 15px;
  --text-callout: 16px;
  --text-body: 17px;
  --text-headline: 17px;
  --text-title3: 20px;
  --text-title2: 22px;
  --text-title: 28px;
  --text-large-title: 34px;

  --lh-caption2: 13px;
  --lh-caption: 16px;
  --lh-footnote: 18px;
  --lh-subheadline: 20px;
  --lh-callout: 21px;
  --lh-body: 22px;
  --lh-headline: 22px;
  --lh-title3: 25px;
  --lh-title2: 28px;
  --lh-title: 34px;
  --lh-large-title: 41px;

  --tracking: 0;

  --sys-red: rgb(255, 56, 60);
  --sys-orange: rgb(255, 141, 40);
  --sys-yellow: rgb(255, 204, 0);
  --sys-green: rgb(52, 199, 89);
  --sys-mint: rgb(0, 200, 179);
  --sys-teal: rgb(0, 195, 208);
  --sys-cyan: rgb(0, 192, 232);
  --sys-blue: rgb(0, 136, 255);
  --sys-indigo: rgb(97, 85, 245);
  --sys-purple: rgb(203, 48, 224);
  --sys-pink: rgb(255, 45, 85);
  --sys-brown: rgb(172, 127, 94);

  --sys-gray: rgb(142, 142, 147);
  --sys-gray-2: rgb(174, 174, 178);
  --sys-gray-3: rgb(199, 199, 204);
  --sys-gray-4: rgb(209, 209, 214);
  --sys-gray-5: rgb(229, 229, 234);
  --sys-gray-6: rgb(242, 242, 247);

  --brand-primary: rgb(26, 140, 255);
  --brand-secondary: rgb(122, 92, 255);
  --brand-tertiary: rgb(242, 90, 203);
  --brand-quaternary: rgb(40, 199, 247);
  --brand-accent: var(--brand-secondary);
  --brand-soft: rgb(234, 244, 255);
  --brand-soft-secondary: rgb(243, 236, 255);
  --brand-gradient: linear-gradient(135deg, var(--brand-quaternary) 0%, var(--brand-primary) 32%, var(--brand-secondary) 66%, var(--brand-tertiary) 100%);
  --brand-wash: linear-gradient(135deg, rgba(40, 199, 247, 0.16) 0%, rgba(122, 92, 255, 0.14) 55%, rgba(242, 90, 203, 0.12) 100%);

  --apple-black: rgb(29, 29, 31);
  --apple-black-2: rgb(45, 45, 48);
  --apple-gray: rgb(245, 245, 247);
  --apple-gray-2: rgb(251, 251, 253);
  --apple-gray-deep: rgb(232, 232, 237);
  --apple-border: rgb(210, 210, 215);
  --apple-border-soft: rgb(230, 230, 235);
  --apple-text-secondary: rgb(110, 110, 115);
  --apple-text-tertiary: rgb(140, 140, 145);

  --bg: rgb(255, 255, 255);
  --bg-secondary: var(--apple-gray);
  --bg-tertiary: var(--apple-gray-2);
  --fill-primary: var(--brand-soft);
  --fill-secondary: var(--brand-soft-secondary);
  --label: var(--apple-black);
  --label-secondary: var(--apple-text-secondary);
  --label-tertiary: var(--apple-text-tertiary);
  --label-quaternary: rgba(60, 60, 67, 0.18);
  --label-inverse: rgb(255, 255, 255);
  --label-accent: var(--brand-primary);
  --label-accent-secondary: var(--brand-secondary);
  --label-success: var(--sys-green);
  --label-warning: var(--sys-orange);
  --label-danger: var(--sys-red);
  --label-info: var(--sys-blue);
  --separator: var(--apple-border-soft);
  --focus-ring: rgba(26, 140, 255, 0.28);
  --clear: transparent;

  --surface: var(--bg);
  --surface-raised: var(--bg-secondary);
  --surface-hero: linear-gradient(180deg, rgb(255, 255, 255) 0%, var(--apple-gray-2) 100%);

  --shadow-hairline: 0 1px 0 var(--apple-border-soft);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 56px -20px rgba(0, 0, 0, 0.22);
  --shadow-soft: 0 20px 60px -24px rgba(0, 0, 0, 0.18);

  --tap-min: 44px;
  --radius-button-sm: 12px;
  --radius-button: 14px;
  --radius-button-lg: 980px;

  --on-brand: rgb(255, 255, 255);
  --on-brand-secondary: rgba(255, 255, 255, 0.86);
  --on-brand-tertiary: rgba(255, 255, 255, 0.6);
  --on-brand-soft: rgba(255, 255, 255, 0.12);
  --on-brand-divider: rgba(255, 255, 255, 0.24);
  --inverse-card: rgba(255, 255, 255, 0.94);

  --glass-tint-thin: rgba(255, 255, 255, 0.6);
  --glass-tint: rgba(255, 255, 255, 0.75);
  --glass-tint-strong: rgba(255, 255, 255, 0.88);
  --glass-border-soft: rgba(0, 0, 0, 0.06);
  --glass-blur: 22px;
  --glass-saturate: 180%;

  --hero-wash:
    radial-gradient(60% 50% at 50% -10%, color-mix(in srgb, var(--brand-quaternary) 24%, transparent) 0%, transparent 60%),
    radial-gradient(50% 40% at 90% 10%, color-mix(in srgb, var(--brand-tertiary) 18%, transparent) 0%, transparent 60%),
    radial-gradient(40% 35% at 10% 30%, color-mix(in srgb, var(--brand-primary) 16%, transparent) 0%, transparent 60%);

  --button-primary-bg: var(--brand-primary);
  --button-secondary-bg: var(--brand-soft);
  --button-tertiary-bg: var(--bg-secondary);
  --button-ghost-bg: var(--clear);
  --button-success-bg: var(--sys-green);
  --button-warning-bg: var(--sys-yellow);
  --button-danger-bg: var(--sys-red);
  --button-border: var(--separator);
  --button-border-clear: var(--clear);
  --button-focus: var(--focus-ring);
}

@media (prefers-contrast: more) {
  :root {
    --sys-red: rgb(233, 21, 45);
    --sys-orange: rgb(197, 83, 0);
    --sys-yellow: rgb(161, 106, 0);
    --sys-green: rgb(0, 137, 50);
    --sys-mint: rgb(0, 133, 117);
    --sys-teal: rgb(0, 129, 152);
    --sys-cyan: rgb(0, 126, 174);
    --sys-blue: rgb(30, 110, 244);
    --sys-indigo: rgb(86, 74, 222);
    --sys-purple: rgb(176, 47, 194);
    --sys-pink: rgb(231, 18, 77);
    --sys-brown: rgb(149, 109, 81);

    --sys-gray: rgb(108, 108, 112);
    --sys-gray-2: rgb(142, 142, 147);
    --sys-gray-3: rgb(174, 174, 178);
    --sys-gray-4: rgb(188, 188, 192);
    --sys-gray-5: rgb(216, 216, 220);
    --sys-gray-6: rgb(235, 235, 240);

    --separator: rgb(180, 180, 188);
    --apple-border: rgb(180, 180, 188);
  }
}