:root{
  --paper:#f1f0e8; --paper-2:#faf9f3; --paper-3:#fffefb;
  --ink:#1c1418; --ink-2:#574a4e; --ink-3:#6e5f63;
  --line:rgba(40,18,24,.13); --line-2:rgba(40,18,24,.28);
  --green:#C8102E; --green-d:#7A0C1E; --green-br:#FF5A5F;
  --clay:#FFA000; --amber:#a8732a;
  --term:#1c0e12; --term-2:#f6dce0;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --grotesk:"Helvetica Neue","Arial Nova",Arial,"Segoe UI",Roboto,sans-serif;
  --sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sidebar:290px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);line-height:1.68;
  background:
    radial-gradient(620px 380px at 100% -6%, rgba(200,16,46,.07), transparent 60%),
    var(--paper);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--green);color:#fff}

/* keyboard focus (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--green-br);outline-offset:2px;border-radius:5px}
/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--green);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 0;font:600 .9rem var(--sans)}
.skip:focus{left:0}
/* mobile nav scrim */
.scrim{position:fixed;inset:0;z-index:24;background:rgba(40,14,20,.45);backdrop-filter:blur(1px)}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:13px;
  padding:13px 20px;background:rgba(241,240,232,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)
}
.topbar .badge{width:32px;height:32px;border-radius:9px;flex:0 0 auto;
  background:var(--green);display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;
  font-family:var(--grotesk)}
.topbar .brand{font-weight:800;font-family:var(--grotesk);letter-spacing:-.01em}
.topbar .brand small{display:block;font:600 .66rem/1.4 var(--mono);letter-spacing:.18em;
  color:var(--ink-3);font-weight:600}
.topbar .spacer{flex:1}
.topbar .home{font:600 .82rem var(--sans);color:var(--ink-2)}
.nav-toggle{display:none;background:var(--paper-2);border:1px solid var(--line-2);
  color:var(--ink);border-radius:8px;padding:7px 13px;min-height:44px;font:600 .85rem var(--sans);cursor:pointer}

/* Layout */
.layout{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);max-width:1300px;margin:0 auto}
nav.side{
  position:sticky;top:59px;align-self:start;height:calc(100dvh - 59px);overflow-y:auto;
  padding:24px 16px 60px;border-right:1px solid var(--line)
}
nav.side ul{list-style:none;margin:0;padding:0}
nav.side li{margin:1px 0}
nav.side a{display:block;color:var(--ink-2);font-size:.9rem;padding:6px 11px;border-radius:7px;line-height:1.35}
nav.side a:hover{color:var(--ink);background:rgba(40,18,24,.05);text-decoration:none}
nav.side a.active{color:#fff;background:var(--green);font-weight:600}
nav.side .lvl1>a{font-weight:700;color:var(--ink);margin-top:12px;font-family:var(--grotesk)}
nav.side .lvl2{margin-left:11px;border-left:1px solid var(--line);padding-left:7px}
nav.side .lvl3{margin-left:8px;border-left:1px solid var(--line);padding-left:7px}

/* Content */
main.doc{padding:34px 48px 90px;min-width:0;max-width:880px}
main.doc h1{font-family:var(--grotesk);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.12;margin:.1em 0 .7em}
main.doc h2{font-family:var(--grotesk);font-weight:700;letter-spacing:-.01em;font-size:1.5rem;
  margin:2em 0 .5em;padding-top:.7em;border-top:1px solid var(--line)}
main.doc h3{font-family:var(--grotesk);font-weight:700;font-size:1.18rem;margin:1.6em 0 .4em}
main.doc h4{font-size:1rem;margin:1.3em 0 .3em;color:var(--ink-2);
  font:600 .76rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
main.doc p,main.doc li{font-size:1.01rem;color:var(--ink-2)}
main.doc strong{color:var(--ink)}
main.doc img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line-2);
  margin:16px 0;display:block;box-shadow:0 14px 30px -22px rgba(40,14,20,.4)}
main.doc code{font-family:var(--mono);font-size:.88em;background:rgba(40,18,24,.07);
  padding:.13em .42em;border-radius:5px;color:var(--green-d);word-break:break-word}
main.doc pre{background:var(--term);border-radius:12px;padding:16px 18px;overflow:auto;margin:16px 0;
  border:1px solid rgba(200,16,46,.35)}
main.doc pre code{background:none;padding:0;color:var(--term-2);font-size:.86rem;line-height:1.6}
main.doc a{word-break:break-word;border-bottom:1px solid rgba(200,16,46,.32)}
main.doc a:hover{text-decoration:none;border-bottom-color:var(--green)}
main.doc blockquote{margin:16px 0;padding:12px 18px;border-left:3px solid var(--green);
  background:rgba(200,16,46,.05);color:var(--ink-2);border-radius:0 9px 9px 0}
main.doc blockquote strong{color:var(--green-d)}
main.doc ul,main.doc ol{padding-left:1.4em}
main.doc table{border-collapse:collapse;width:100%;margin:18px 0;font-size:.92rem;display:block;overflow-x:auto}
main.doc th,main.doc td{border:1px solid var(--line-2);padding:9px 12px;text-align:left;vertical-align:top}
main.doc th{background:rgba(200,16,46,.08);font-weight:700;color:var(--ink);
  font-family:var(--grotesk)}
main.doc tr:nth-child(even) td{background:rgba(40,18,24,.025)}
main.doc hr{border:0;border-top:1px solid var(--line);margin:30px 0}

/* License banner */
.licbanner{background:var(--paper-2);border:1px solid var(--line-2);border-left:3px solid var(--clay);
  border-radius:0 10px 10px 0;padding:13px 17px;margin:0 0 24px;color:var(--ink-2);font-size:.9rem}
.licbanner b{color:var(--ink)}

/* Footer */
footer.docfoot{margin-top:52px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:.82rem}
footer.docfoot a{color:var(--ink-2)}

@media (max-width:880px){
  :root{--sidebar:0px}
  .nav-toggle{display:inline-block}
  .layout{display:block}
  nav.side{position:fixed;top:59px;left:0;right:0;bottom:0;height:auto;width:min(320px,86vw);
    background:var(--paper-2);border-right:1px solid var(--line-2);z-index:25;
    transform:translateX(-102%);transition:transform .2s ease;box-shadow:0 20px 50px -20px rgba(40,14,20,.3)}
  nav.side.open{transform:none}
  nav.side a{padding:10px 12px}
  main.doc{padding:24px 22px 76px;max-width:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}
