:root {
  --wxs-ink: #102a32;
  --wxs-paper: #f4f1e8;
  --wxs-panel: #fffdf7;
  --wxs-line: #c9c6ba;
  --wxs-muted: #607178;
  --wxs-cyan: #007f86;
  --wxs-cyan-dark: #005d63;
  --wxs-signal: #ef6f43;
  --wxs-ok: #19765b;
  --wxs-warn: #9b6418;
  --wxs-error: #a43d36;
  --wxs-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --wxs-sans: Inter, "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wxs-motion-fast: 120ms;
  --wxs-motion-base: 190ms;
  --wxs-motion-slow: 280ms;
  --wxs-motion-ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
body { color: var(--wxs-ink); background: var(--wxs-paper); font-family: var(--wxs-sans); }
a { color: inherit; }
button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--wxs-cyan) 32%, transparent);
  outline-offset: 2px;
}

.wxs-wordmark {
  display: inline-flex;
  align-items: center;
  gap: .68rem;
  color: var(--wxs-ink);
  font-weight: 800;
  letter-spacing: .12em;
  text-decoration: none;
}
.wxs-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .55rem;
  background: var(--wxs-ink);
  color: #70d7d2;
  font: 800 1rem/1 var(--wxs-sans);
  letter-spacing: -.08em;
}
.wxs-nav { display: flex; align-items: center; gap: 1.25rem; }
.wxs-nav a {
  color: var(--wxs-muted);
  font-size: .85rem;
  font-weight: 650;
  text-decoration: none;
  transition: color var(--wxs-motion-fast) ease;
}
.wxs-nav a:hover, .wxs-nav a[aria-current="page"] { color: var(--wxs-ink); }

.wxs-button {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  border: 1px solid var(--wxs-ink);
  border-radius: .35rem;
  background: var(--wxs-ink);
  color: #fffdf7;
  font-size: .84rem;
  font-weight: 750;
  text-decoration: none;
  transition: background var(--wxs-motion-fast) ease, border-color var(--wxs-motion-fast) ease,
    color var(--wxs-motion-fast) ease, transform var(--wxs-motion-fast) var(--wxs-motion-ease);
}
.wxs-button:active { transform: translateY(1px); }
.wxs-button:hover { background: var(--wxs-cyan-dark); border-color: var(--wxs-cyan-dark); }
.wxs-button.secondary { background: transparent; color: var(--wxs-ink); }
.wxs-button.secondary:hover { background: #e8e4d9; border-color: var(--wxs-ink); }

.wxs-kicker {
  color: var(--wxs-cyan-dark);
  font: 700 .72rem/1.2 var(--wxs-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wxs-rule { border-color: var(--wxs-line); }
.wxs-mono { font-family: var(--wxs-mono); }
.wxs-muted { color: var(--wxs-muted); }

@media (max-width: 760px) {
  .wxs-nav { gap: .75rem; }
  .wxs-nav .wxs-nav-optional { display: none; }
}

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