:root {
  --ink-950: #10233f;
  --ink-900: #17304f;
  --ink-800: #24405f;
  --ink-700: #38536f;
  --ink-600: #536b82;
  --ink-500: #5b7085;
  --ink-400: #8fa1b2;
  --ink-300: #b7c4d0;
  --ink-200: #d5dee7;
  --ink-100: #e8eef4;
  --ink-50: #f4f7fb;
  --paper: #ffffff;
  --blue-800: #1b4485;
  --blue-700: #2458a6;
  --blue-600: #316bc0;
  --blue-100: #dfeaff;
  --blue-50: #edf4ff;
  --red-800: #9e1930;
  --red-700: #c9233f;
  --red-100: #ffdce2;
  --red-50: #fff0f2;
  --green-800: #0c5b43;
  --green-700: #13795b;
  --green-100: #ccefe3;
  --green-50: #ebfaf5;
  --amber-800: #86570a;
  --amber-700: #9a630d;
  --amber-100: #ffe9b2;
  --amber-50: #fff8e6;

  --font-display: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body: Arial, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.35rem;
  --text-2xl: clamp(1.6rem, 2.4vw, 2.1rem);
  --text-3xl: clamp(2rem, 3.2vw, 3rem);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: .45rem;
  --radius-md: .7rem;
  --radius-lg: 1rem;
  --radius-xl: 1.35rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(16 35 63 / .08), 0 5px 16px rgb(16 35 63 / .05);
  --shadow-md: 0 14px 36px rgb(16 35 63 / .12);
  --shadow-focus: 0 0 0 3px rgb(36 88 166 / .25);

  --header-h: 64px;
  --outline-w: 312px;
  --assistant-w: 330px;
  --content-max: 880px;
  --content-measure: 720px;
  --control-min: 44px;
  --section-gap: var(--space-10);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink-950);
  background: var(--ink-50);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: var(--blue-700); }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--blue-700);
  outline-offset: 3px;
}

::selection { color: var(--ink-950); background: var(--amber-100); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  margin: 0;
  color: var(--blue-700);
  font: 700 var(--text-xs)/1.2 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.button, .icon-button {
  border: 0;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.button {
  min-height: var(--control-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: .65rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 700;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .45; }
.button--primary { color: var(--paper); background: var(--blue-700); }
.button--primary:hover:not(:disabled) { background: var(--blue-800); }
.button--quiet { color: var(--ink-900); background: var(--paper); border: 1px solid var(--ink-200); }
.button--quiet:hover:not(:disabled) { border-color: var(--blue-700); color: var(--blue-800); }
.button--danger { color: var(--paper); background: var(--red-700); }
.button--danger:hover { background: var(--red-800); }
.button--small { min-height: var(--control-min); padding: .45rem .75rem; font-size: var(--text-sm); }

.icon-button {
  width: var(--control-min);
  height: var(--control-min);
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: transparent;
  font-weight: 700;
  font-size: 1.2rem;
}
.icon-button:hover { background: var(--ink-100); }
.icon-button--send { color: var(--paper); background: var(--blue-700); border-radius: var(--radius-pill); }
.icon-button--send:hover { background: var(--blue-800); }

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