:root{
  --bg:#0f1210; --panel:#161a17; --panel2:#1b201d; --text:#e7ece8; --muted:#9aa39c;
  --brand:#aee23f; --border:rgba(255,255,255,.09); --code:#11140f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--brand);color:#0f1210;padding:.5rem .75rem;border-radius:6px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.5rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(15,18,16,.92);backdrop-filter:blur(8px);z-index:10}
.brand{font-weight:700;color:var(--text);font-size:1.05rem}
.brand span{color:var(--brand)}
.home{font-size:.85rem;border:1px solid var(--border);padding:.35rem .7rem;border-radius:8px;color:var(--text)}
.shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;max-width:1200px;margin:0 auto}
.sidebar{padding:1.5rem 1rem;border-right:1px solid var(--border);position:sticky;top:57px;align-self:start;height:calc(100vh - 57px);overflow:auto}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar > ul > li{margin:.15rem 0}
.sidebar a{display:block;color:var(--muted);padding:.35rem .5rem;border-radius:6px;font-size:.9rem}
.sidebar a:hover{color:var(--text);text-decoration:none;background:var(--panel)}
.sidebar a.active{color:var(--brand);background:var(--panel2)}
.sidebar ul ul{margin:.1rem 0 .4rem .6rem;border-left:1px solid var(--border);padding-left:.4rem}
.content{padding:2rem 2.5rem 4rem;min-width:0}
.content article{max-width:780px}
h1{font-size:2rem;margin:.2rem 0 1rem;line-height:1.2}
h2{font-size:1.35rem;margin:2.2rem 0 .8rem;padding-top:.4rem}
h3{font-size:1.1rem;margin:1.6rem 0 .6rem}
.lead{font-size:1.12rem;color:var(--text)}
.callout{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--brand);border-radius:8px;padding:.8rem 1rem;margin:1.2rem 0;color:var(--text);font-size:.95rem}
p,li{color:var(--text)}
dl dt{font-weight:600;margin-top:.8rem}
dl dd{margin:.2rem 0 .2rem 0;color:var(--muted)}
code{background:var(--panel2);padding:.12rem .35rem;border-radius:5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
.code{background:var(--code);border:1px solid var(--border);border-radius:10px;padding:1rem 1.1rem;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;line-height:1.55}
.code code{background:none;padding:0}
.flow{counter-reset:step;list-style:none;padding:0;margin:1rem 0}
.flow li{counter-increment:step;position:relative;padding:.6rem 0 .6rem 2.4rem;border-left:1px solid var(--border);margin-left:.9rem}
.flow li::before{content:counter(step);position:absolute;left:-.95rem;top:.55rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--brand);color:#0f1210;font-weight:700;display:grid;place-items:center;font-size:.85rem}
table.grid{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.9rem}
table.grid th,table.grid td{text-align:left;padding:.55rem .65rem;border-bottom:1px solid var(--border);vertical-align:top}
table.grid th{color:var(--muted);font-weight:600}
.console{display:flex;flex-direction:column;gap:.9rem;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem;margin:1.25rem 0}
.console label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:var(--muted)}
.console input,.console select,.console textarea{background:var(--code);border:1px solid var(--border);border-radius:8px;padding:.55rem .7rem;color:var(--text);font:inherit;font-size:.9rem}
.console textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.btn{align-self:flex-start;background:var(--brand);color:#0f1210;border:none;border-radius:8px;padding:.55rem 1.1rem;font-weight:600;cursor:pointer}
#sb-result:empty{display:none}
.pagefoot{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--border);color:var(--muted);font-size:.85rem}
@media (max-width:820px){.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--border)}.content{padding:1.5rem}}