:root {
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  color:#0f172a;
  background:#fff;
  font-synthesis:none;
  line-height:1.65}
* {
  box-sizing:border-box}
body {
  margin:0}
a {
  color:#4338ca;
  text-underline-offset:4px}
a:hover {
  color:#312e81}
a:focus-visible {
  outline:3px solid #6366f1;
  outline-offset:5px}
header,footer {
  border-bottom:1px solid #e2e8f0}
header .wrap,footer .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:20px;
  padding-bottom:20px;
  flex-wrap:wrap}
.wrap,main {
  max-width:1160px;
  margin:auto;
  padding:0 28px}
.brand {
  font-size:21px;
  font-weight:650;
  color:#0f172a;
  text-decoration:none;
  letter-spacing:-.6px}
.brand span {
  color:#4f46e5;
  margin-right:8px}
nav {
  display:flex;
  gap:24px;
  flex-wrap:wrap}
nav a,footer a {
  font-size:14px;
  text-decoration:none;
  color:#475569}
section {
  padding:76px 0}
h1,h2,h3 {
  line-height:1.12;
  letter-spacing:-.035em}
h1 {
  font-size:clamp(44px,6.6vw,80px);
  font-weight:600;
  max-width:920px;
  margin:22px 0}
h2 {
  font-size:clamp(30px,4vw,44px);
  font-weight:600;
  margin:16px 0 28px}
h3 {
  font-size:23px;
  font-weight:600}
p {
  color:#475569;
  max-width:720px}
.eyebrow {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:650;
  color:#4f46e5}
.lead {
  font-size:20px;
  max-width:760px}
.hero {
  background:radial-gradient(ellipse at 90% 20%,#eef2ff,transparent 65%)}
.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:32px}
.button {
  display:inline-block;
  background:#4f46e5;
  border:1px solid #4f46e5;
  border-radius:8px;
  padding:12px 20px;
  color:white;
  text-decoration:none;
  font-size:14px;
  font-weight:600}
.button:hover {
  background:#4338ca;
  color:white}
.secondary {
  background:white;
  color:#334155;
  border-color:#cbd5e1}
.model {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:72px;
  border-top:1px solid #cbd5e1;
  gap:24px;
  padding-top:24px;
  color:#64748b;
  font-family:ui-monospace,monospace;
  font-size:11px}
.model strong {
  display:block;
  font-family:Inter,system-ui,sans-serif;
  color:#334155;
  font-size:15px;
  font-weight:500;
  margin-top:10px}
.grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px}
.card {
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:28px;
  background:#fff}
.card h3 a {
  text-decoration:none;
  color:#0f172a}
.number {
  font-family:ui-monospace,monospace;
  color:#6366f1}
.feature {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  border-top:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0}
.code-panel {
  background:#0f172a;
  color:#c7d2fe;
  border-radius:12px;
  padding:32px;
  align-self:center;
  overflow:auto;
  font-size:13px}
.code-panel pre {
  color:#f8fafc;
  font-size:17px;
  padding:24px 0;
  line-height:1.8}
.code-panel a {
  color:#c7d2fe}
.closing {
  border-top:1px solid #e2e8f0}
.text-link {
  display:inline-block;
  margin:20px}
.post {
  max-width:760px;
  margin:0 auto;
  padding:60px 0 90px}
.post h1 {
  font-size:clamp(38px,5vw,60px)}
.post h2 {
  font-size:28px;
  margin-top:48px}
.post p {
  font-size:18px}
.meta {
  font-size:13px;
  color:#64748b}
.posts {
  grid-template-columns:repeat(2,1fr)}
footer {
  border-top:1px solid #e2e8f0;
  background:#f8fafc;
  color:#64748b;
  font-size:13px}
.skip {
  position:absolute;
  left:16px;
  top:-80px;
  background:#fff;
  padding:10px}
.skip:focus {
  top:8px}
pre {
  max-width:100%;
  overflow:auto}
@media(max-width:640px) {
  .wrap,main {
  padding:0 20px}
header .wrap {
  gap:14px}
nav {
  gap:16px}
section {
  padding:48px 0}
.grid,.feature,.model {
  grid-template-columns:1fr}
.model {
  margin-top:40px;
  gap:16px}
.feature {
  gap:24px}
.post {
  padding:40px 0}
.card {
  padding:22px}
}


.contact-page { max-width: 760px; margin: auto; }
.contact-page h1 { font-size: clamp(38px, 5vw, 60px); }
.contact-form { margin-top: 36px; }
.contact-form fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.contact-form label { display: block; font-size: 14px; font-weight: 600; margin: 20px 0 6px; }
.contact-form input:not([type=checkbox]), .contact-form textarea, .contact-form select { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 12px; font: inherit; color: #0f172a; background: white; }
.contact-form textarea { resize: vertical; }
.contact-form :is(input, textarea, select, button):focus-visible { outline: 3px solid #6366f1; outline-offset: 3px; }
.contact-form .consent { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; color: #475569; }
.consent input { margin-top: 5px; flex-shrink: 0; }
.contact-form button { cursor: pointer; }
.contact-form button:disabled { opacity: .6; cursor: wait; }
.contact-trap, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-error { color: #b91c1c; }

/* Diagram SVGs and equation layout are generated locally in the reader's browser. */
.post .mermaid { overflow-x: auto; padding: 1.25rem; border-radius: 1rem; background: #f8fafc; text-align: center; }
.post .mermaid svg { max-width: 100%; height: auto; }
.post [data-math="display"] { overflow-x: auto; padding: .5rem 0; }
.post .render-error { white-space: pre-wrap; color: #9f1239; }