:root{
 --bg:#0c111d; --panel:#141b2c; --panel2:#1a2338; --line:#2a3450; --line-soft:#212a41;
 --text:#eef1f7; --muted:#8a93ad; --muted2:#c3c9db;
 --accent:#d98a4f; --accent-soft:#a8683a; --accent2:#5fb8ab;
 --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
 --serif:ui-serif,Georgia,"Iowan Old Style","Palatino Linotype",serif;
}
@media (prefers-color-scheme: light){
 :root{
  --bg:#f5f7fb; --panel:#ffffff; --panel2:#eef1f8; --line:#d7deec; --line-soft:#e3e8f3;
  --text:#131a2c; --muted:#5b6478; --muted2:#333d54;
  --accent:#b8672f; --accent-soft:#8f4f24; --accent2:#2f8a7d;
 }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;margin:0;background:var(--bg);
 color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--accent2)}
code,pre{font-family:var(--mono)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

.wrap{max-width:78rem;margin:0 auto;padding-inline:1.5rem}

/* -------- top bar -------- */
header.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in oklab, var(--bg) 90%, transparent);
 backdrop-filter:blur(8px);z-index:20}
.top-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:.6rem;column-gap:1rem;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--serif);font-size:1.15rem;font-weight:600;
 text-decoration:none;color:var(--text);flex-shrink:0}
.brand .flame{width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0;
 box-shadow:0 0 0 3px rgba(217,138,79,.22)}
.brand .tld{color:var(--muted);font-weight:400}
.top-nav{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.1rem;font-size:.88rem;min-width:0}
.top-nav a{text-decoration:none;color:var(--muted2);white-space:nowrap}
.top-nav a:hover,.top-nav a.active{color:var(--text)}
.top-nav a.btn{background:transparent;border:1px solid var(--line);border-radius:6px;padding:.4rem .85rem;color:var(--text)}
.top-nav a.btn:hover{background:var(--panel2);border-color:var(--muted)}

/* -------- layout: sidebar + content -------- */
.layout{display:grid;grid-template-columns:15rem 1fr;gap:2.5rem;padding:2.2rem 0 4rem;align-items:start}
@media (max-width:860px){ .layout{grid-template-columns:1fr} }

nav.side{position:sticky;top:5rem;font-size:.86rem}
nav.side h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent2);
 margin:1.3rem 0 .5rem}
nav.side h4:first-child{margin-top:0}
nav.side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
nav.side a{display:block;padding:.32rem .6rem;border-radius:6px;text-decoration:none;color:var(--muted2)}
nav.side a:hover{background:var(--panel2);color:var(--text)}
nav.side a.active{background:var(--panel2);color:var(--accent2);font-weight:600}

main.content{min-width:0}
.eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);
 display:flex;align-items:center;gap:.5rem;margin:0 0 .8rem}
.eyebrow::before{content:"";width:1.4rem;height:1px;background:var(--accent2)}
main.content h1{font-size:2rem;margin:0 0 .6rem}
main.content h2{font-size:1.35rem;margin:2.2rem 0 .8rem;padding-top:.4rem;border-top:1px solid var(--line)}
main.content h2:first-of-type{border-top:none;padding-top:0;margin-top:1.6rem}
main.content h3{font-size:1.08rem;margin:1.6rem 0 .6rem;font-family:inherit;font-weight:700}
main.content p{color:var(--muted2);margin:0 0 1.1rem;max-width:42rem}
main.content ul,main.content ol{color:var(--muted2);max-width:42rem;padding-left:1.3rem}
main.content li{margin-bottom:.4rem}
main.content strong{color:var(--text)}
main.content code{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:.1rem .35rem;font-size:.88em;color:var(--text)}
main.content pre{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.9rem 1.1rem;overflow-x:auto;margin:0 0 1.3rem}
main.content pre code{background:none;border:none;padding:0;color:var(--muted2);font-size:.86rem;line-height:1.6}
main.content blockquote{border-left:2px solid var(--accent2);margin:0 0 1.3rem;padding:.2rem 0 .2rem 1.1rem;color:var(--muted2)}
main.content table{border-collapse:collapse;margin:0 0 1.3rem;font-size:.88rem;width:100%;max-width:42rem;
 display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
main.content th,main.content td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left}
main.content th{background:var(--panel2);font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
main.content hr{border:none;border-top:1px solid var(--line);margin:2rem 0}
main.content figure{margin:0 0 1.5rem;max-width:52rem}
main.content figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px}
main.content figcaption{margin-top:.5rem;font-size:.82rem;color:var(--muted);text-align:center}

.callout{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent2);border-radius:8px;
 padding:1rem 1.2rem;font-size:.92rem;color:var(--muted2);margin:0 0 1.3rem;max-width:42rem}
.callout strong{color:var(--text)}
.callout.warn{border-left-color:var(--accent)}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);
 border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:1.5rem 0 2rem}
.card-grid a.card{background:var(--panel);padding:1.3rem 1.4rem;text-decoration:none;color:inherit;display:block}
.card-grid a.card:hover{background:var(--panel2)}
.card-grid .k{font-family:var(--mono);font-size:.72rem;color:var(--accent2);margin-bottom:.5rem}
.card-grid h3{margin:0 0 .4rem;font-size:1rem;font-family:inherit;font-weight:700;color:var(--text)}
.card-grid p{margin:0;color:var(--muted);font-size:.85rem}

.page-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
 margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.page-foot a{color:var(--muted2)}

footer.site-footer{border-top:1px solid var(--line);padding:2rem 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.82rem;color:var(--muted)}
.footer-inner .legal-links{display:flex;gap:.9rem;flex-wrap:wrap;font-family:var(--mono)}
.footer-inner .legal-links a{color:var(--muted2);text-decoration:none}
.footer-inner .legal-links a:hover{text-decoration:underline}

/* -------- per-page table of contents (desktop sticky right column) -------- */
/* Hidden by default (no separate mobile off-canvas of its own -- below
   1180px its content is mirrored into #mobile-menu's .mm-toc section
   instead, so there is exactly one off-canvas panel, not two). The
   :not([hidden]) override below has higher specificity than this base
   rule by construction (attribute selector adds to it), so it reliably
   wins at >=1180px regardless of source order. */
nav.toc{display:none;font-size:.82rem}
nav.toc h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent2);margin:0 0 .7rem}
nav.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.05rem}
nav.toc li.toc-sub{padding-left:.85rem}
nav.toc a{display:block;padding:.32rem .6rem;border-radius:6px;text-decoration:none;color:var(--muted);border-left:2px solid transparent}
nav.toc a:hover{color:var(--text);background:var(--panel2)}
nav.toc a.active{color:var(--accent2);border-left-color:var(--accent2);background:var(--panel2);font-weight:600}

@media (min-width:1180px){
 .layout{grid-template-columns:15rem 1fr 14rem}
 nav.toc:not([hidden]){grid-column:3;display:block;position:sticky;top:5rem;max-height:calc(100vh - 7rem);overflow-y:auto}
 #menu-toggle,#mobile-menu-backdrop{display:none}
}

/* -------- unified mobile menu: site nav + on-page TOC in one panel, one toggle -------- */
#mobile-menu-backdrop{display:none;position:fixed;inset:0;background:rgba(6,9,16,.5);z-index:40}
body.menu-open #mobile-menu-backdrop{display:block}

#mobile-menu{
 position:fixed;top:0;right:0;height:100vh;width:min(19rem,88vw);
 background:var(--panel);border-left:1px solid var(--line);
 padding:4.6rem 1.3rem 2rem;box-shadow:-14px 0 34px rgba(0,0,0,.28);
 transform:translateX(100%);transition:transform .25s ease;
 overflow-y:auto;z-index:45;font-size:.86rem;
 display:flex;flex-direction:column;gap:1.7rem;
}
body.menu-open #mobile-menu{transform:translateX(0)}

#mobile-menu .mm-title{
 display:flex;align-items:center;gap:.5rem;font-family:var(--serif);font-weight:600;
 font-size:1.05rem;color:var(--text);padding-bottom:1.1rem;border-bottom:1px solid var(--line);
}
#mobile-menu .mm-title .flame{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 0 3px rgba(217,138,79,.22)}

/* Between 861-1179px the sidebar is already a normal visible column, so the
   panel only needs to carry the page TOC there -- avoids showing the site
   nav twice. Below 861px the sidebar is hidden (see nav.side override at
   the end of this file) so the panel carries both sections. */
@media (min-width:861px){ #mobile-menu .mm-nav{display:none} }

#mobile-menu .mm-nav nav.side{display:block;position:static;font-size:inherit}
#mobile-menu .mm-toc[hidden]{display:none}
#mobile-menu .mm-toc{border-top:1px solid var(--line);padding-top:1.5rem}
#mobile-menu .mm-toc h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent2);margin:0 0 .7rem}
#mobile-menu .mm-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.05rem}
#mobile-menu .mm-toc li.toc-sub{padding-left:.85rem}
#mobile-menu .mm-toc a{display:block;padding:.32rem .6rem;border-radius:6px;text-decoration:none;color:var(--muted);border-left:2px solid transparent}
#mobile-menu .mm-toc a:hover{color:var(--text);background:var(--panel2)}
#mobile-menu .mm-toc a.active{color:var(--accent2);border-left-color:var(--accent2);background:var(--panel2);font-weight:600}

#menu-toggle{
 display:none;position:fixed;right:1.1rem;bottom:1.1rem;z-index:46;
 width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid var(--line);
 background:var(--accent);color:#1a1206;align-items:center;justify-content:center;
 box-shadow:0 8px 20px rgba(0,0,0,.32);cursor:pointer;padding:0;
}
#menu-toggle svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#menu-toggle svg line{transition:transform .2s ease,opacity .2s ease;transform-origin:12px 12px}
body.menu-open #menu-toggle svg .l1{transform:translateY(5px) rotate(45deg)}
body.menu-open #menu-toggle svg .l2{opacity:0}
body.menu-open #menu-toggle svg .l3{transform:translateY(-5px) rotate(-45deg)}

@media (max-width:1179px){ #menu-toggle{display:flex} }

/* -------- staggered scroll-reveal for list items -------- */
.reveal-item{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.reveal-item.revealed{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
 .reveal-item{opacity:1;transform:none;transition:none}
}

/* Below 860px the desktop sidebar column is hidden entirely -- its content
   is mirrored into #mobile-menu's .mm-nav section instead, so there is one
   navigation surface (the hamburger panel), not a permanently-visible
   sidebar block stacked above the content plus a second overlay for the
   page TOC. `.layout > nav.side` (direct child only) deliberately doesn't
   match the second `nav.side` copy nested inside #mobile-menu .mm-nav.
   Higher specificity than the base `nav.side{position:sticky}` rule (an
   extra class from `.layout >`), so this wins regardless of source order --
   kept last in the file anyway for consistency with the rest of this
   history of mobile-breakpoint fixes. */
@media (max-width:860px){ .layout > nav.side{display:none} }