@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --gray-0: #fffffe;
  --gray-50: #fcfbf9;
  --gray-100: #f2f1ef;
  --gray-200: #dededf;
  --gray-300: #d0cdcc;
  --gray-400: #adadae;
  --gray-500: #919192;
  --gray-600: #757576;
  --gray-700: #5a5a5b;
  --gray-800: #434241;
  --gray-850: #242425;
  --gray-900: #323130;
  --gray-950: #21201f;
  --gray-975: #141415;
  --gray-1000: #0d0d0e;
  --paper: #f7f5f2;

  --warm-light-400: #9a9795;
  --warm-light-600: #6e6a68;
  --warm-dark-400: #aeabaa;
  --warm-dark-600: #918f8e;

  --blue-300: #2965f5;
  --blue-400: #316af3;
  --green-400: #00b159;
  --orange-400: #ef7758;
  --orange-600: #bd3c1e;
  --amber-400: #d19201;
  --amber-600: #a15e01;

  --gold: #ffb547;
  --gold-hover: #f7a935;

  --font-sans: "Helvetica Neue", "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* whole steps only: Helvetica Neue ships 300/400/500/700, so 450 would render as Medium */
  --weight-book: 400;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --text-hero: clamp(3.375rem, 1.8125rem + 3.125vw, 4.625rem);
  --text-hero--leading: 1;
  --text-hero--tracking: -0.05em;

  --text-display-xl: clamp(2.25rem, -0.09375rem + 4.6875vw, 4.125rem);
  --text-display-xl--leading: 1.08;
  --text-display-xl--tracking: -0.04em;

  --text-display-lg: clamp(2.25rem, 0.53125rem + 3.4375vw, 3.625rem);
  --text-display-lg--leading: 1;
  --text-display-lg--tracking: -0.04em;

  --text-display: 2.375rem;
  --text-display--leading: 1;
  --text-display--tracking: -0.04em;

  --text-heading-lg: clamp(1.25rem, 0.78125rem + 0.9375vw, 1.625rem);
  --text-heading-lg--leading: 1.15;
  --text-heading-lg--tracking: -0.02em;

  --text-heading: 1.25rem;
  --text-heading--leading: 1.15;
  --text-heading--tracking: -0.02em;

  --text-body-lg: 1rem;
  --text-body-lg--leading: 1.5;
  --text-body-lg--tracking: -0.02em;

  --text-body-md: 0.9375rem;
  --text-body-md--leading: 1.375rem;
  --text-body-md--tracking: -0.01875em;

  --text-body: 0.875rem;
  --text-body--leading: 1.43;
  --text-body--tracking: -0.02em;

  --text-caption: 0.75rem;
  --text-caption--leading: 1.17;
  --text-caption--tracking: -0.02em;

  --text-numeric: 0.625rem;
  --text-numeric--leading: 1.15;
  --text-numeric--tracking: -0.01em;

  --radius-xs: 0.125rem;
  --radius-element: 0.1875rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --radius-pill: 9999px;

  --shadow-sm: 0 4px 4px #00000026;
  --shadow-md: 0 2px 12px 0 #00000005, 0 4px 16px 0 #0000001a;
  --shadow-float: 0 6px 44px #00000026, 0 4px 8px #00000008;

  --button-height: 3rem;
  --button-padding: 1rem 1.5rem;

  color-scheme: light;
  --bg-primary: var(--gray-0);
  --bg-paper: var(--paper);
  --bg-light-elevation: var(--gray-50);
  --bg-elevation: var(--gray-100);
  --bg-card: var(--gray-0);
  --bg-floating: var(--gray-0);
  --bg-toast: var(--gray-0);
  --bg-neutral: var(--gray-500);
  --bg-inverted: var(--gray-1000);
  --bg-scrim: color-mix(in oklch, var(--gray-1000) 40%, transparent);
  --bg-image-overlay: color-mix(in oklch, var(--gray-800) 40%, transparent);

  --text-primary: var(--gray-1000);
  --text-secondary: var(--warm-light-600);
  --text-tertiary: var(--warm-light-400);
  --text-quaternary: var(--gray-300);
  --text-disabled: var(--gray-300);
  --text-inverted: var(--gray-0);
  --text-link: var(--blue-300);
  --text-critical: var(--orange-600);
  --text-warning: var(--amber-600);
  --text-success: var(--green-400);

  --border-primary: color-mix(in oklch, var(--gray-1000) 12%, transparent);
  --border-hover: color-mix(in oklch, #5c5755 18%, transparent);
  --border-active: var(--gray-1000);
  --border-critical: var(--orange-600);

  --button-primary: var(--gray-1000);
  --button-primary-text: var(--gray-0);
  --button-secondary: var(--gray-100);
  --button-secondary-text: var(--gray-1000);

  --hover-primary: #232324;
  --hover-secondary: #e8e6e3;
  --hover-tertiary: #f9f8f7;

  --accent: var(--gold);
  --accent-hover: var(--gold-hover);
  --accent-ink: var(--gray-1000);
  --accent-soft: color-mix(in oklch, var(--gold) 18%, transparent);
  --accent-text: var(--text-primary);
  --logo-mark: var(--text-primary);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: var(--gray-975);
  --bg-paper: var(--gray-975);
  --bg-light-elevation: var(--gray-950);
  --bg-elevation: var(--gray-900);
  --bg-card: var(--gray-950);
  --bg-floating: var(--gray-950);
  --bg-toast: var(--gray-850);
  --bg-neutral: var(--gray-200);
  --bg-inverted: var(--gray-0);

  --text-primary: var(--gray-0);
  --text-secondary: var(--warm-dark-400);
  --text-tertiary: var(--warm-dark-600);
  --text-quaternary: var(--gray-800);
  --text-disabled: #3a3837;
  --text-inverted: var(--gray-1000);
  --text-link: var(--blue-400);
  --text-critical: var(--orange-400);
  --text-warning: var(--amber-400);

  --border-primary: color-mix(in oklch, var(--paper) 12%, transparent);
  --border-hover: color-mix(in oklch, #f8f5f1 20%, transparent);
  --border-active: var(--gray-0);
  --border-critical: var(--orange-400);

  --button-primary: var(--gray-0);
  --button-primary-text: var(--gray-1000);
  --button-secondary: var(--gray-900);
  --button-secondary-text: var(--gray-0);

  --hover-primary: #e8e6e3;
  --hover-secondary: #3e3d3c;
  --hover-tertiary: #181819;

  --accent-soft: color-mix(in oklch, var(--gold) 14%, transparent);
  --accent-text: var(--gold);
  --logo-mark: var(--gold);
}

morph-icon { display: inline-flex; flex: none; width: 1em; height: 1em; line-height: 0; vertical-align: -0.125em; }
morph-icon svg { display: block; flex: none; width: 1em; height: 1em; }

.tt { display: block; flex: none; overflow: visible; }
.tt .tt-moon, .tt .tt-sun, .tt .tt-ray, .tt .tt-tilt, .tt .tt-spin { transform-box: view-box; transform-origin: 12px 12px; }
.tt .tt-horizon { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.tt .tt-tilt, .tt .tt-spin { transition: rotate .5s cubic-bezier(.3,1.4,.5,1); }
:root:not([data-theme="dark"]) .tt .tt-sun { transform: translateY(20px); }
:root:not([data-theme="dark"]) .tt .tt-ray { transform: scale(0); }
:root[data-theme="dark"] .tt .tt-moon { transform: translateY(20px); }
.theme:hover .tt .tt-tilt { rotate: -18deg; }
.theme:hover .tt .tt-spin { rotate: 45deg; }
@media (prefers-reduced-motion: reduce) { .tt .tt-tilt, .tt .tt-spin { transition: none; } }

.brand { --lh: 26px; position: relative; display: flex; align-items: center; gap: calc(var(--lh) * 0.276); color: var(--text-primary); }
.logo.brand { --lh: 22px; }
@media (max-width: 767px) { .logo.brand { --lh: 20px; } }
.brand svg { display: block; flex: none; width: auto; fill: currentColor; }
.brand .logo-m { height: var(--lh); aspect-ratio: 32 / 29; fill: var(--logo-mark); }
.brand .logo-t { height: calc(var(--lh) * 0.5917); aspect-ratio: 135.98 / 17.16; }
.brand .logo-t path { transform-box: fill-box; transform-origin: 50% 100%; }
.brand .logo-mw { position: relative; z-index: 1; display: block; flex: none; }
.brand .logo-orb { position: absolute; left: 50%; top: 50%; max-width: none; translate: -50% -50%; pointer-events: none; }
.brand .logo-tw { position: relative; display: block; flex: none; }
.brand .logo-ghost { position: absolute; left: 0; top: 0; pointer-events: none; }
.brand[data-intro] { opacity: 0; animation: brand-failsafe 0s 3s forwards; }
@keyframes brand-failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .brand[data-intro] { opacity: 1; animation: none; } }

.t-hero { font-family: var(--font-sans); font-weight: var(--weight-book); font-size: var(--text-hero); line-height: var(--text-hero--leading); letter-spacing: var(--text-hero--tracking); }
.t-display-xl { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-display-xl); line-height: var(--text-display-xl--leading); letter-spacing: var(--text-display-xl--tracking); }
.t-display-lg { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-display-lg); line-height: var(--text-display-lg--leading); letter-spacing: var(--text-display-lg--tracking); }
.t-display { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-display); line-height: var(--text-display--leading); letter-spacing: var(--text-display--tracking); }
.t-heading-lg { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-heading-lg); line-height: var(--text-heading-lg--leading); letter-spacing: var(--text-heading-lg--tracking); }
.t-heading { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-heading); line-height: var(--text-heading--leading); letter-spacing: var(--text-heading--tracking); }
.t-body-lg { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-body-lg); line-height: var(--text-body-lg--leading); letter-spacing: var(--text-body-lg--tracking); }
.t-label { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-body-lg); line-height: var(--text-body-lg--leading); letter-spacing: var(--text-body-lg--tracking); }
.t-nav { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-body-md); line-height: var(--text-body-md--leading); letter-spacing: var(--text-body-md--tracking); }
.t-body { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-body); line-height: var(--text-body--leading); letter-spacing: var(--text-body--tracking); }
.t-caption { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-caption); line-height: var(--text-caption--leading); letter-spacing: var(--text-caption--tracking); }
.t-numeric { font-family: var(--font-mono); font-weight: var(--weight-regular); font-size: var(--text-numeric); line-height: var(--text-numeric--leading); letter-spacing: var(--text-numeric--tracking); }