/* Single source of design values. Apple.com measurements and adaptations: DESIGN-SYSTEM.md. */
:root {
  color-scheme: light;
  --white: #ffffff;
  --gray-50: #f5f5f7;
  --gray-75: #ededf2;
  --gray-100: #e8e8ed;
  --gray-200: #d2d2d7;
  --gray-400: #a1a1a6;
  --gray-600: #6e6e73;
  --gray-850: #272729;
  --gray-900: #1d1d1f;
  --gray-950: #18181a;
  --blue-400: #2997ff;
  --blue-550: #0076df;
  --blue-600: #0071e3;
  --blue-650: #006edb;
  --blue-700: #0066cc;
  --transparent: transparent;
  --background: var(--white);
  --surface: var(--white);
  --surface-muted: var(--gray-50);
  --surface-control: var(--gray-100);
  --surface-inverse: var(--gray-900);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-control: var(--gray-900);
  --text-inverse: var(--gray-50);
  --text-inverse-secondary: var(--gray-400);
  --link: var(--blue-700);
  --link-inverse: var(--blue-400);
  --border: var(--gray-200);
  --action: var(--blue-600);
  --action-hover: var(--blue-550);
  --action-active: var(--blue-650);
  --action-neutral-hover: var(--gray-850);
  --action-neutral-active: var(--gray-950);
  --action-neutral-inverse: var(--gray-50);
  --action-neutral-inverse-hover: var(--white);
  --action-neutral-inverse-active: var(--gray-75);
  --on-action: var(--white);
  --focus: var(--blue-600);
  --focus-inverse: var(--blue-400);

  --font-text: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
  --font-display: var(--font-text);
  --font-code: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --weight-regular: 400;
  --weight-semibold: 600;
  --size-caption: 12px;
  --line-caption: 16px;
  --tracking-caption: -.01em;
  --size-small: 14px;
  --line-small: 20px;
  --tracking-small: -.016em;
  --size-body: 17px;
  --line-body: 25px;
  --tracking-body: -.022em;
  --size-lead: 24px;
  --line-lead: 28px;
  --tracking-lead: .009em;
  --size-subhead: 28px;
  --line-subhead: 32px;
  --tracking-subhead: .007em;
  --size-title: 32px;
  --line-title: 36px;
  --tracking-title: .004em;
  --size-headline: 48px;
  --line-headline: 52px;
  --tracking-headline: -.003em;
  --size-display: 80px;
  --line-display: 84px;
  --tracking-display: -.015em;
  --font-caption: var(--weight-regular) var(--size-caption)/var(--line-caption) var(--font-text);
  --font-small: var(--weight-regular) var(--size-small)/var(--line-small) var(--font-text);
  --font-label: var(--weight-semibold) var(--size-small)/var(--line-small) var(--font-text);
  --font-body: var(--weight-regular) var(--size-body)/var(--line-body) var(--font-text);
  --font-button: var(--weight-regular) var(--size-body)/var(--control-line) var(--font-text);
  --font-button-compact: var(--weight-regular) var(--size-small)/var(--control-compact-line) var(--font-text);
  --font-lead: var(--weight-regular) var(--size-lead)/var(--line-lead) var(--font-display);
  --font-subhead: var(--weight-semibold) var(--size-subhead)/var(--line-subhead) var(--font-display);
  --font-title: var(--weight-semibold) var(--size-title)/var(--line-title) var(--font-display);
  --font-headline: var(--weight-semibold) var(--size-headline)/var(--line-headline) var(--font-display);
  --font-hero: var(--weight-semibold) var(--size-display)/var(--line-display) var(--font-display);

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;
  --radius-small: 8px;
  --radius-control: 10px;
  --radius-control-large: 12px;
  --radius-card: 28px;
  --radius-media: var(--radius-card);
  --radius-pill: 980px;
  --radius-circle: 50%;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --shadow-flat: none;
  --opacity-disabled: .42;
  --motion-fast: 100ms;
  --motion-card: 300ms;
  --ease-control: linear;
  --ease-card: cubic-bezier(0, 0, .5, 1);

  --control-min: 44px;
  --control-compact: 36px;
  --control-large: 56px;
  --control-icon: 36px;
  --control-line: 20px;
  --control-compact-line: 18px;
  --control-padding-block: 11px;
  --control-padding-inline: 21px;
  --control-compact-padding-block: 8px;
  --control-compact-padding-inline: 15px;
  --control-large-padding-block: 17px;
  --control-large-padding-inline: 30px;
  --disclosure-min: 56px;
  --icon-size: 20px;
  --icon-small: 16px;
  --content-width: 1160px;
  --container-width: 1256px;
  --container-wide: 1440px;
  --container-tablet: 900px;
  --reading-width: 68ch;
  --hero-reading-width: 40ch;
  --section-gutter: var(--space-12);
  --section-gap: var(--space-22);
  --grid-gap: var(--space-16);
  --columns-editorial: minmax(0, .92fr) minmax(0, 1.08fr);
  --card-padding: var(--space-12);
  --card-padding-compact: var(--space-8);
}

/* CSS custom properties cannot be used in media-query conditions. Breakpoints are 1068 / 734px. */
@media (max-width: 1068px) {
  :root {
    --size-display: 64px; --line-display: 68px; --tracking-display: -.009em;
    --size-headline: 40px; --line-headline: 44px; --tracking-headline: normal;
    --size-title: 28px; --line-title: 32px; --tracking-title: .007em;
    --size-subhead: 24px; --line-subhead: 28px; --tracking-subhead: .009em;
    --size-lead: 21px; --line-lead: 25px; --tracking-lead: .011em;
    --section-gutter: var(--space-10); --grid-gap: var(--space-8); --card-padding: var(--space-10);
  }
}
@media (max-width: 734px) {
  :root {
    --size-display: 48px; --line-display: 52px; --tracking-display: -.003em;
    --size-headline: 32px; --line-headline: 36px; --tracking-headline: .004em;
    --size-title: 24px; --line-title: 28px; --tracking-title: .009em;
    --size-subhead: 21px; --line-subhead: 25px; --tracking-subhead: .011em;
    --size-lead: 19px; --line-lead: 23px; --tracking-lead: .012em;
    --section-gutter: var(--space-6); --section-gap: var(--space-14); --grid-gap: var(--space-6); --card-padding: var(--space-6); --card-padding-compact: var(--space-6);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0s; --motion-card: 0s; }
}