:root {
  --ground:#faf8f5; --ink:#221c16; --ink-soft:#6e6459; --accent:#b85c28; --line:#e6ddd2;
  --panel:#f3efe9;
  --term-bg:#16120e; --term-ink:#d6d0c6; --term-edge:#2b241d;
  --o:#d7875f; --g:#8f8a82; --gr:#67af5f; --r:#d75f5f;
  --edge-bg:#f7ecdf; --edge-ink:#8a5a2b;
}
@media (prefers-color-scheme: dark) {
  :root { --ground:#151210; --ink:#e9e2d8; --ink-soft:#a2988c; --accent:#d7875f; --line:#2e2822;
          --panel:#1c1815; --edge-bg:#2a2118; --edge-ink:#dfa570; }
}
:root[data-theme="dark"] { --ground:#151210; --ink:#e9e2d8; --ink-soft:#a2988c; --accent:#d7875f; --line:#2e2822;
          --panel:#1c1815; --edge-bg:#2a2118; --edge-ink:#dfa570; }
:root[data-theme="light"] { --ground:#faf8f5; --ink:#221c16; --ink-soft:#6e6459; --accent:#b85c28; --line:#e6ddd2;
          --panel:#f3efe9; --edge-bg:#f7ecdf; --edge-ink:#8a5a2b; }

* { box-sizing:border-box; }
html { background:var(--ground); scroll-behavior:smooth; scroll-padding-top:1.5rem; }
body { color:var(--ink); font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif; margin:0; }
h1,h2,h3,.mono,.term-cmd,.code-lang,.edge-tag,.nav-chapter>a { font-family:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace; }

.layout { display:grid; grid-template-columns:270px minmax(0,1fr); max-width:1200px; margin:0 auto; gap:2.5rem; padding:0 1.25rem; }
nav.side { position:sticky; top:0; align-self:start; max-height:100vh; overflow-y:auto;
  padding:2.2rem 0 3rem; font-size:.83rem; border-right:1px solid var(--line); }
.brand { display:block; text-decoration:none; color:var(--ink); margin:0 1rem 1.4rem 0; }
.brand b { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.05rem; letter-spacing:-.01em; }
.brand b .amp { color:var(--accent); }
.brand span { display:block; color:var(--ink-soft); font-size:.72rem; margin-top:.1rem; }
nav.side ul { list-style:none; margin:0; padding:0; }
nav.side li.nav-chapter { margin:0 0 .9rem; }
.nav-chapter > a { display:block; color:var(--ink); text-decoration:none; font-weight:600; font-size:.8rem;
  padding:.2rem .6rem .2rem 0; }
.nav-chapter > a::before { content:"## "; color:var(--accent); }
.nav-chapter ul { border-left:1px solid var(--line); margin:.15rem 0 0 .1rem; }
.nav-chapter ul a { display:block; color:var(--ink-soft); text-decoration:none; padding:.14rem .6rem;
  border-left:2px solid transparent; margin-left:-1px; }
.nav-chapter ul a:hover { color:var(--accent); }
.nav-chapter ul a.active { color:var(--accent); border-left-color:var(--accent); }

main { padding:2.2rem 0 6rem; min-width:0; max-width:800px; }
header.hero { margin-bottom:3rem; }
h1 { font-size:2rem; line-height:1.2; margin:0 0 .5rem; letter-spacing:-.02em; text-wrap:balance; }
h1 .amp { color:var(--accent); }
.sub { color:var(--ink-soft); margin:0; max-width:62ch; }
.hero-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem; }
.chip { border:1px solid var(--line); border-radius:6px; padding:.3rem .65rem; font-size:.78rem;
  color:var(--ink-soft); font-family:ui-monospace,Menlo,Consolas,monospace; }
.chip b { color:var(--ink); font-weight:600; }

section.chapter { margin:0 0 3.5rem; }
h2 { font-size:1.25rem; margin:3rem 0 .8rem; letter-spacing:0; scroll-margin-top:1.5rem; }
h2::before { content:"## "; color:var(--accent); }
h3 { font-size:.98rem; margin:2.1rem 0 .5rem; scroll-margin-top:1.5rem; }
h3::before { content:"### "; color:var(--accent); opacity:.75; }
h2 .anchor, h3 .anchor { color:inherit; text-decoration:none; }
h2 .anchor:hover, h3 .anchor:hover { text-decoration:underline; text-decoration-color:var(--accent); }
p { margin:.55rem 0 .9rem; max-width:70ch; }
a { color:var(--accent); }
code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.86em;
  background:color-mix(in srgb, var(--ink) 7%, transparent); padding:.08em .3em; border-radius:4px; }

.term { margin:1rem 0 1.2rem; border-radius:8px; overflow:hidden; border:1px solid var(--term-edge);
  background:var(--term-bg); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.term-bar { display:flex; align-items:center; gap:.4rem; padding:.45rem .8rem; background:#1f1a14;
  border-bottom:1px solid var(--term-edge); }
.dot { width:.6rem; height:.6rem; border-radius:50%; background:#3a322a; }
.term-cmd { margin-left:.5rem; font-size:.75rem; color:#b7ad9f; }
.term-body { margin:0; padding:.85rem 1rem; overflow-x:auto; color:var(--term-ink);
  font:.8rem/1.55 ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace; }
.tok-p { color:var(--gr); } .tok-cmd { color:#efe9df; }

.codeblock { margin:1rem 0 1.2rem; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:var(--panel); }
.code-lang { font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  padding:.35rem .9rem; border-bottom:1px solid var(--line); }
.code-body { margin:0; padding:.85rem 1rem; overflow-x:auto; color:var(--ink);
  font:.8rem/1.55 ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace; }
.tok-c { color:var(--g); } .tok-s { color:var(--o); } .tok-k { color:var(--accent); font-weight:600; }

.edge { display:block; background:var(--edge-bg); border-left:3px solid var(--accent); border-radius:0 6px 6px 0;
  padding:.55rem .9rem; margin:.9rem 0 1.1rem; font-size:.88rem; color:var(--ink); max-width:70ch; }
.edge-tag { display:inline-block; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--edge-ink); font-weight:700; margin-right:.5rem; }

.mermaid-wrap { border:1px solid var(--line); border-radius:8px; padding:1rem; margin:1rem 0 1.2rem; overflow-x:auto; }

@media (max-width: 860px) {
  .layout { grid-template-columns:1fr; gap:0; }
  nav.side { position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line);
    padding:1.4rem 0 1rem; }
  main { padding-top:1.6rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* multi-page additions */
.page-head { margin-bottom: 2.2rem; }
.page-head h1 { font-size: 1.8rem; margin: 0 0 .4rem; letter-spacing: -.02em; }
.page-head .sub { color: var(--ink-soft); margin: 0; max-width: 62ch; }
.nav-chapter > a.active { color: var(--accent); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .8rem; margin: 1.6rem 0 2.4rem; }
.card { display: flex; flex-direction: column; gap: .3rem; border: 1px solid var(--line);
  border-radius: 8px; padding: .9rem 1rem; text-decoration: none; color: var(--ink); }
.card:hover { border-color: var(--accent); }
.card b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
.card span { font-size: .8rem; color: var(--ink-soft); line-height: 1.45; }
.pager-row { display: flex; margin-top: 3.5rem; gap: 1rem; }
.pager-spacer { flex: 1; }
a.pager { text-decoration: none; border: 1px solid var(--line); border-radius: 8px;
  padding: .55rem .9rem; font-size: .85rem; color: var(--ink);
  font-family: ui-monospace, Menlo, Consolas, monospace; }
a.pager:hover { border-color: var(--accent); color: var(--accent); }
.colophon { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1.1rem;
  font-size: .8rem; color: var(--ink-soft); }
.table-wrap { overflow-x: auto; margin: 1rem 0 1.2rem; }
.table-wrap table { border-collapse: collapse; font-size: .85rem; min-width: 100%; }
.table-wrap th, .table-wrap td { border: 1px solid var(--line); padding: .45rem .7rem;
  text-align: left; vertical-align: top; }
.table-wrap th { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); }
main h2 { font-size: 1.15rem; margin: 2.6rem 0 .6rem; }
main h2::before { content: "## "; color: var(--accent); }

/* quieter sidebar: chapters as small caps, no ## prefix */
.nav-chapter > a::before { content: ""; }
.nav-chapter > a { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; }
.nav-chapter > a:hover, .nav-chapter > a.active { color: var(--accent); }
nav.side li.nav-chapter { margin-bottom: 1.05rem; }
.nav-chapter ul { margin-top: .3rem; }
.nav-chapter ul a { font-size: .8rem; line-height: 1.4; padding: .17rem .6rem; }

/* hero */
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 1.6rem; }
.btn { display: inline-block; text-decoration: none; border: 1px solid var(--line);
  border-radius: 8px; padding: .55rem 1.05rem; font-size: .88rem; color: var(--ink);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); color: #fff; }
.hero-term { max-width: 34rem; }
.page-head h1 { font-size: 2.1rem; }
.page-head { border-bottom: 1px solid var(--line); padding-bottom: 1.6rem; margin-bottom: 2rem; }

/* copy button on code blocks */
.codeblock, .term { position: relative; }
.copy-btn { position: absolute; top: .35rem; right: .5rem; border: 1px solid transparent;
  background: transparent; color: #8f8a82; font: .68rem ui-monospace, Menlo, Consolas, monospace;
  padding: .2rem .55rem; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.codeblock .copy-btn { color: var(--ink-soft); }
.codeblock:hover .copy-btn, .term:hover .copy-btn { opacity: 1; }
.copy-btn:hover { border-color: currentColor; }
.copy-btn.done { color: var(--gr); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .copy-btn { transition: none; } }

/* readability */
main p { line-height: 1.7; }
main ul { line-height: 1.65; padding-left: 1.3rem; }
main ul li { margin: .25rem 0; }
figure { margin: 1rem 0 1.2rem; }