:root {
  --ui-ink: #1d1d1f;
  --ui-ink-deep: #071725;
  --ui-muted: #5f6368;
  --ui-muted-soft: #7a7f86;
  --ui-paper: #ffffff;
  --ui-soft: #f5f5f7;
  --ui-warm: #f7f3eb;
  --ui-navy: #071725;
  --ui-navy-raised: #0b2237;
  --ui-brand: #0071e3;
  --ui-brand-hover: #0062c4;
  --ui-brand-soft: #eaf4ff;
  --ui-active: #b46817;
  --ui-success: #197a55;
  --ui-line: rgba(29, 29, 31, 0.12);
  --ui-line-strong: rgba(29, 29, 31, 0.2);
  --ui-header-height: 68px;
  --ui-content: 1280px;
  --ui-feature: 1180px;
  --ui-reading: 800px;
  --ui-page-pad: clamp(20px, 3.8vw, 52px);
  --ui-section: clamp(80px, 9vw, 136px);
  --ui-section-tight: clamp(56px, 6vw, 88px);
  --ui-gap-1: 8px;
  --ui-gap-2: 16px;
  --ui-gap-3: 24px;
  --ui-gap-4: 32px;
  --ui-gap-5: 40px;
  --ui-gap-6: 48px;
  --ui-radius-sm: 10px;
  --ui-radius-md: 18px;
  --ui-radius-lg: 28px;
  --ui-shadow-soft: 0 24px 70px rgba(15, 31, 46, 0.08);
  --ui-shadow-float: 0 18px 48px rgba(15, 31, 46, 0.14);
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  color-scheme: light;
  scroll-padding-top: calc(var(--ui-header-height) + 20px);
}

body.ui-v2 {
  overflow-x: clip;
  background: var(--ui-paper);
  color: var(--ui-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Backward-compatible aliases used by the existing page styles. */
  --ink: var(--ui-ink);
  --body: var(--ui-muted);
  --muted: var(--ui-muted);
  --paper: var(--ui-paper);
  --soft: var(--ui-soft);
  --line: var(--ui-line);
  --blue: var(--ui-brand);
  --blue-dark: var(--ui-brand-hover);
  --navy: var(--ui-navy);
  --navy-2: var(--ui-navy-raised);
  --navy-soft: var(--ui-navy-raised);
  --orange: var(--ui-active);
  --max: var(--ui-feature);
  --section-space: var(--ui-section);
}

.ui-v2 *,
.ui-v2 *::before,
.ui-v2 *::after {
  box-sizing: border-box;
}

.ui-v2 img {
  display: block;
  max-width: 100%;
}

.ui-v2 a,
.ui-v2 button,
.ui-v2 summary {
  touch-action: manipulation;
}

.ui-v2 :where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid rgba(8, 125, 227, 0.5);
  outline-offset: 4px;
}

.ui-v2 ::selection {
  background: rgba(8, 125, 227, 0.18);
}

.ui-v2 :where(h1, h2, h3, h4) {
  color: inherit;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 690;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.ui-v2 :where(p, li, dd) {
  text-wrap: pretty;
}

.ui-v2 .container {
  width: min(calc(100% - (var(--ui-page-pad) * 2)), var(--ui-feature));
  margin-inline: auto;
}

.ui-v2 section[id],
.ui-v2 article[id],
.ui-v2 nav[id] {
  scroll-margin-top: calc(var(--ui-header-height) + 20px);
}

@media (max-width: 767px) {
  :root {
    --ui-header-height: 60px;
    --ui-section: 72px;
    --ui-section-tight: 52px;
    --ui-page-pad: 20px;
  }

  body.ui-v2 {
    font-size: 16px;
    line-height: 1.62;
  }

  .ui-v2 :where(p, li, dd, summary) {
    font-size: max(16px, 1em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-v2 *,
  .ui-v2 *::before,
  .ui-v2 *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}