:root{
  --bg:#ffffff;
  --fg:#0b0b0c;
  --muted:#5b636a;
  --brand:#1a4cff;
  --line:#e5e7eb;
  --card:#fafafa;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif}
a{color:var(--brand);text-decoration:underline}
.site-header{padding:2rem 1rem;border-bottom:1px solid var(--line)}
h1{font-size:1.9rem;margin:.2rem 0}
.subtitle{color:var(--muted);margin:.25rem 0 0}
.date{color:var(--muted);margin:.25rem 0 0}
.toc{padding:1rem;border-bottom:1px solid var(--line);background:var(--card)}
.toc h2{font-size:1.1rem;margin:.2rem 0 .5rem}
.toc ol{margin:.2rem 0 0 1rem}
section{padding:1.25rem 1rem;border-bottom:1px solid var(--line)}
h2{font-size:1.45rem;margin:0 0 .75rem}
h3{font-size:1.1rem;margin:1rem 0 .5rem}
.bullets{list-style:disc inside}
.steps{list-style:decimal;margin-left:1.25rem}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}
pre.code{background:#0f172a;color:#e2e8f0;padding:10px;border-radius:.5rem;overflow:auto}
pre.code::-webkit-scrollbar{height:8px}
.grid{width:100%;border-collapse:collapse;margin:.5rem 0}
.grid th,.grid td{padding:.6rem;border:1px solid var(--line);vertical-align:top}
.grid thead th{background:#f6f7fb}
.spec{width:100%;border-collapse:collapse;margin:.5rem 0}
.spec th{width:180px;text-align:left;background:#f6f7fb}
.spec th,.spec td{border:1px solid var(--line);padding:.6rem;vertical-align:top}
.diagram{background:#f8f8f8;border:1px dashed var(--line);border-radius:.6rem;padding:.75rem;margin-top:.5rem}
.site-footer{padding:1rem;color:var(--muted)}
@media (max-width:900px){.columns{grid-template-columns:1fr}}
@media print{
  a{text-decoration:none;color:inherit}
  .toc{page-break-after:avoid}
}