/* Generated by scripts/build-docs-site.py; do not edit manually. */
:root { color-scheme: light; --ink:#111827; --muted:#5b6575; --line:#d9dee8; --paper:#fbfcff; --panel:#ffffff; --accent:#246bfe; --accent2:#00a889; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); line-height: 1.55; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { position: sticky; top: 0; z-index: 5; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px clamp(20px, 5vw, 64px); border-bottom:1px solid rgba(17,24,39,.08); background:rgba(251,252,255,.92); backdrop-filter: blur(14px); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight: 800; letter-spacing: 0; color: var(--ink); }
.brand::before { content:""; width:18px; height:18px; border-radius:6px; background:linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 5px 18px rgba(36,107,254,.25); }
nav { display:flex; gap:18px; flex-wrap:wrap; font-size:14px; }
main { padding-bottom: 64px; }
section { max-width: 1120px; margin: 0 auto; padding: 42px clamp(20px, 5vw, 64px); }
.hero { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(280px, .65fr); gap:56px; align-items:center; padding-top: 74px; padding-bottom:54px; }
.hero-copy { min-width:0; }
.hero-map { border:1px solid var(--line); border-radius:8px; background:linear-gradient(180deg, #ffffff, #f7fbff); box-shadow:0 22px 50px rgba(17,24,39,.07); padding:18px; display:grid; gap:10px; }
.hero-map span { display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid #e3e8f2; border-radius:8px; background:#fff; font-weight:800; color:var(--ink); }
.hero-map .icon { width:20px; height:20px; margin:0; color:var(--accent); }
.eyebrow { margin:0 0 12px; color:var(--accent2); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
h1 { margin:0; max-width:820px; font-size: clamp(38px, 5vw, 64px); line-height:1.03; letter-spacing:0; }
.page-head h1 { font-size: clamp(36px, 5vw, 64px); }
h2 { margin:0 0 14px; font-size: clamp(24px, 3vw, 38px); line-height:1.1; letter-spacing:0; }
h3 { margin:0 0 8px; font-size:20px; line-height:1.2; }
.lede { max-width:760px; color:var(--muted); font-size:20px; }
.hero-links { display:flex; gap:18px; flex-wrap:wrap; margin:22px 0 0; font-weight:800; }
.hero-links a::after { content:" ->"; }
.icon { width:24px; height:24px; display:block; color:var(--accent); stroke:var(--accent); fill:none; margin-bottom:16px; }
.page-head > .icon { width:34px; height:34px; }
.metrics { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.metrics span, .proof, .source { border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:8px 12px; color:var(--muted); }
.metrics strong { color:var(--ink); }
.band { max-width:none; background:#eef5ff; border-block:1px solid #dce8ff; }
.band > * { max-width:1000px; margin-left:auto; margin-right:auto; }
.flow { display:grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap:10px; margin-top:24px; }
.flow span { position:relative; padding:14px; background:var(--panel); border:1px solid #cbd8f6; border-radius:8px; text-align:center; font-weight:800; }
.flow span:not(:last-child)::after { content:""; position:absolute; top:50%; right:-10px; width:10px; border-top:2px solid #b8c8ec; transform:translateY(-50%); }
.quickstart { display:grid; grid-template-columns:minmax(240px, .7fr) minmax(0, 1.3fr); gap:24px; align-items:start; }
.quickstart > div:first-child p:not(.eyebrow) { color:var(--muted); }
.quicksteps { display:grid; gap:12px; }
.quickstep { border:1px solid var(--line); border-radius:8px; background:var(--panel); padding:18px; }
.quickstep span { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; background:#eef5ff; color:var(--accent); font-weight:800; margin-bottom:12px; }
.quickstep code { display:block; padding:10px 12px; border:1px solid #e3e8f2; border-radius:8px; background:#f8fafc; color:var(--ink); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; overflow-wrap:anywhere; }
.quickstep p { color:var(--muted); margin-bottom:0; }
.task-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:18px; }
.task-card { display:grid; gap:8px; align-content:start; min-height:150px; border:1px solid var(--line); border-radius:8px; background:var(--panel); padding:18px; color:var(--ink); box-shadow:0 10px 28px rgba(17,24,39,.04); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.task-card:hover { text-decoration:none; border-color:#b8c8ec; transform:translateY(-1px); box-shadow:0 16px 34px rgba(17,24,39,.07); }
.task-card .icon { margin-bottom:2px; }
.task-card span { color:var(--accent); font-weight:800; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; }
.task-card strong { font-size:18px; line-height:1.25; }
.empty { max-width:1120px; margin:0 auto; padding:0 clamp(20px, 5vw, 64px) 28px; color:var(--muted); font-weight:700; }
.trigger { display:inline-block; width:max-content; max-width:100%; padding:5px 8px; border:1px solid #dce8ff; border-radius:6px; background:#f8fbff; color:var(--accent); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; font-weight:800; overflow-wrap:anywhere; }
.trigger.large { font-size:15px; padding:8px 10px; margin-top:10px; }
.source-excerpt { margin:18px 0 0; padding:18px; border:1px solid var(--line); border-radius:8px; background:#0f172a; color:#e5ecff; overflow:auto; white-space:pre-wrap; font-size:13px; line-height:1.55; }
.source-excerpt code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.grid { display:grid; gap:16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card, .catalog-card, .workflow { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:22px; box-shadow: 0 10px 28px rgba(17,24,39,.04); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.card:hover, .catalog-card:hover, .workflow:hover { border-color:#b8c8ec; transform:translateY(-1px); box-shadow:0 16px 34px rgba(17,24,39,.07); }
.card p, .catalog-card p, .workflow p { color:var(--muted); margin-bottom:0; }
.card-link, .catalog-card a { display:inline-block; margin-top:16px; font-weight:800; }
.stack { display:grid; gap:16px; }
.workflow { border-left:4px solid var(--accent); }
.workflow .icon, .catalog-card .icon { margin-bottom:14px; }
.workflow-figure-section { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(280px, .9fr); gap:24px; align-items:start; }
.workflow-figure { margin:0; border:1px solid var(--line); border-radius:8px; background:var(--panel); overflow:hidden; box-shadow:0 10px 28px rgba(17,24,39,.04); }
.workflow-figure img { display:block; width:100%; height:auto; background:#fff; }
.workflow-figure figcaption { padding:12px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.text-equivalent { border:1px solid var(--line); border-radius:8px; background:#f7f8fb; padding:22px; }
.text-equivalent h2 { font-size:24px; line-height:1.18; margin-bottom:12px; }
.text-equivalent ul { margin:12px 0 0; padding-left:20px; color:var(--muted); }
.steps { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:12px; }
.steps article { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:18px; }
.steps span { display:block; margin-bottom:8px; color:var(--accent2); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.proof { display:inline-block; margin-top:16px; }
.checklist { background:#f7f8fb; border-block:1px solid var(--line); max-width:none; }
.checklist > * { max-width:960px; margin-left:auto; margin-right:auto; }
.compact { padding-left:0; list-style:none; display:grid; gap:10px; }
.compact li { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.compact a { color:var(--ink); font-weight:700; }
.compact span { color:var(--muted); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; overflow-wrap:anywhere; }
.source { display:inline-block; font-size:14px; }
.controls { display:flex; gap:12px; align-items:center; padding-top:0; }
input, select { min-height:42px; border:1px solid var(--line); border-radius:8px; padding:8px 12px; background:var(--panel); color:var(--ink); font:inherit; }
input { flex:1; min-width:220px; }
.catalog-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; padding-top:8px; }
.catalog-card span { display:inline-block; margin-bottom:12px; color:var(--accent2); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.primitive-head { border-bottom:1px solid var(--line); }
@media (max-width: 980px) { .hero, .quickstart { grid-template-columns:1fr; gap:28px; } .hero-map { grid-template-columns:repeat(2, minmax(0, 1fr)); } .task-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .topbar { align-items:flex-start; flex-direction:column; } .flow, .grid.two, .grid.three, .catalog-grid, .steps, .task-grid, .workflow-figure-section { grid-template-columns:1fr; } .flow span:not(:last-child)::after { display:none; } h1 { font-size:42px; } .controls { align-items:stretch; flex-direction:column; } .compact li { align-items:flex-start; grid-template-columns:1fr; } }
@media (max-width: 520px) { section { padding-inline:20px; } .hero { padding-top:48px; } .hero-map { grid-template-columns:1fr; } .lede { font-size:18px; } }