:root{
  --bg:#f6f1e7; --surface:#fffcf5; --surface-2:#efe7d6; --ink:#221f1a;
  --muted:#6d6454; --accent:#8a2b39; --border:#e4dbc8;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,Cambria,serif;
  --sans:"Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
:root[data-theme=dark]{
  --bg:#16130d; --surface:#201b13; --surface-2:#2a241a; --ink:#ece4d4;
  --muted:#9a9080; --accent:#df909b; --border:#322b1f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);line-height:1.6}
a{color:var(--accent)}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  height:58px;padding:0 1.3rem;background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.brand{font-weight:700;font-size:1.3rem;text-decoration:none;color:var(--ink);letter-spacing:-.02em}
.topnav{display:flex;gap:1.2rem;align-items:center;font-family:var(--sans);font-size:.92rem}
.topnav a{color:var(--muted);text-decoration:none}
.topnav a:hover{color:var(--ink)}
.themebtn{background:var(--surface);border:1px solid var(--border);color:var(--ink);
  border-radius:8px;padding:.3rem .6rem;cursor:pointer;font-size:.9rem}
.menubtn{display:none;background:none;border:0;color:var(--ink);cursor:pointer;
  font-size:1.3rem;line-height:1;padding:.2rem .5rem;margin-left:-.3rem}
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0;max-width:1180px;margin:0 auto}
.sidebar{position:sticky;top:58px;align-self:start;height:calc(100vh - 58px);overflow-y:auto;
  padding:1.6rem 1rem 3rem;border-right:1px solid var(--border);font-family:var(--sans)}
.navgroup{margin-bottom:1.4rem}
.navhead{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  font-weight:700;margin:0 .6rem .5rem}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li a{display:block;padding:.32rem .6rem;border-radius:7px;text-decoration:none;
  color:var(--ink);font-size:.93rem}
.sidebar li a:hover{background:var(--surface-2)}
.sidebar li a.cur{background:var(--accent);color:#fff8ef;font-weight:600}
.content{padding:2.4rem 3rem 5rem;min-width:0}
.home-sec{margin:1.5rem 0}
.home-sec ul{padding-left:1.2rem}

/* content — the compiled Wit fragment */
.wit-doc{max-width:44rem}
.wit-doc>:first-child{margin-top:0}
.wit-doc h1{font-size:2.3rem;letter-spacing:-.02em;margin:0 0 .6rem}
.wit-doc h2{font-size:1.5rem;margin:2rem 0 .6rem;padding-top:.3rem;border-top:1px solid var(--border)}
.wit-doc h3{font-size:1.18rem;margin:1.5rem 0 .4rem}
.wit-doc p{margin:0 0 1rem}
.wit-doc strong{font-weight:700}
.wit-doc em{font-style:italic}
.wit-doc a{text-underline-offset:3px}
.wit-doc ul,.wit-doc ol{margin:0 0 1rem;padding-left:1.5em}
.wit-doc li{margin:.25em 0}
.wit-doc blockquote{margin:1.2em 0;padding:.4em 0 .4em 1em;border-left:3px solid var(--accent);color:var(--muted)}
.wit-doc code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:.12em .4em;border-radius:5px}
.wit-doc pre{background:#1b1811;color:#d8cfbf;border:1px solid #2e2820;border-radius:11px;
  padding:1.1rem 1.3rem;overflow-x:auto;font-family:var(--mono);font-size:.85rem;line-height:1.6}
.wit-doc pre code{background:none;padding:0;color:inherit}
/* Side-by-side example: Wit source next to its rendered result */
.wit-doc .example{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1rem;align-items:start;margin:1.4em 0}
.wit-doc .example .ex-pane{min-width:0}
.wit-doc .example pre{margin:0}
.wit-doc .ex-label{display:block;font-family:var(--sans);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  font-weight:700;margin:0 0 .35rem .1rem}
.wit-doc .ex-out .ex-render{background:var(--surface);border:1px solid var(--border);
  border-radius:11px;padding:1rem 1.15rem;font-size:.92rem}
.wit-doc .ex-render>:first-child{margin-top:0}
.wit-doc .ex-render>:last-child{margin-bottom:0}
/* Rendered previews are small — scale headings down so they read in-pane */
.wit-doc .ex-render h1{font-size:1.5rem;margin:.2rem 0 .5rem}
.wit-doc .ex-render h2{font-size:1.2rem;border-top:none;margin:1rem 0 .4rem;padding-top:0}
.wit-doc .ex-render h3{font-size:1.02rem}
/* Wide examples (flex rows, tables) stack so the result gets full width */
.wit-doc .example.wide{grid-template-columns:1fr}
.wit-doc .example.wide .ex-out .ex-render{font-size:.95rem}
@media(max-width:720px){.wit-doc .example{grid-template-columns:1fr}}
/* Wit syntax tokens (build-time highlighter) */
.wit-doc pre .tok-com{color:#8a8069;font-style:italic}
.wit-doc pre .tok-node{color:#e0a24f}
.wit-doc pre .tok-def{color:#e394a4}
.wit-doc pre .tok-fence{color:#6fbfa6}
.wit-doc pre .tok-ctrl{color:#c79ae0}
.wit-doc pre .tok-interp{color:#74c6b4}
.wit-doc pre .tok-cap{color:#a0c97e}
.wit-doc pre .tok-kw{color:#c79ae0;font-weight:600}
.wit-doc pre .tok-str{color:#a0c97e}
.wit-doc table{border-collapse:collapse;width:100%;margin:1.2em auto;font-family:var(--sans);font-size:.93rem}
.wit-doc th,.wit-doc td{border:1px solid var(--border);padding:.45rem .7rem;text-align:left;vertical-align:top}
.wit-doc thead th{background:var(--surface-2)}
.wit-doc figure{margin:1.5em 0;text-align:center}
.wit-doc figcaption{margin-top:.5em;font-size:.9em;color:var(--muted)}
.wit-doc .note,.wit-doc aside{background:var(--surface-2);border-left:3px solid var(--accent);
  padding:.7rem 1rem;border-radius:8px;margin:1.2em 0}
img,svg{max-width:100%;height:auto}
/* Wide content never forces the page to scroll sideways — it scrolls itself.
   Tables keep normal table layout on desktop; they go scrollable only on mobile. */
.wit-doc pre,.wit-doc table{max-width:100%}

@media(max-width:820px){
  body{overflow-x:hidden}
  .menubtn{display:inline-flex}
  .shell{grid-template-columns:1fr;max-width:100%}
  .content{padding:1.6rem 1.2rem 4rem}
  /* Sidebar becomes a full-screen drawer toggled by the ☰ button */
  .sidebar{position:fixed;top:58px;left:0;right:0;bottom:0;z-index:30;
    height:auto;border-right:none;background:var(--bg);
    padding:1.2rem 1.3rem 3rem;display:none}
  body.nav-open .sidebar{display:block}
  body.nav-open{overflow:hidden}
  .wit-doc{max-width:none}
  .wit-doc h1{font-size:1.9rem}
  .wit-doc h2{font-size:1.3rem}
  .wit-doc pre{font-size:.8rem}
  .wit-doc table{display:block;overflow-x:auto}
}
@media(max-width:720px){
  .wit-doc .example{grid-template-columns:1fr}
}
@media(max-width:480px){
  /* Topbar declutters — the ☰ menu covers navigation, ◑ stays */
  .topnav a{display:none}
}
@media(max-width:400px){
  .content{padding:1.2rem 1rem 3rem}
}