/* localbrowser — hand-written stylesheet. No framework, no build step.
   Layout archetype: a layered stack. The stack is the navigation. */

/* ── tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:        #e6e9ec;
  --bg-deep:   #d8dde2;
  --panel:     #f6f8f9;
  --panel-2:   #eceff2;
  --ink:       #12171b;
  --ink-2:     #4a5661;
  --ink-3:     #6d7a85;
  --line:      #c2cad2;
  --line-2:    #aab5bf;
  --accent:    #8c520c;
  --accent-2:  #b8791f;
  --signal:    #14666b;
  --alert:     #9c2f1a;
  --ok:        #2f6a34;

  --l-agent:   #3f6486;
  --l-mcp:     #23716d;
  --l-crw:     #8b5714;
  --l-searx:   #536f2c;
  --l-rend:    #8a4634;
  --l-host:    #4e5865;

  --tex-op:    .05;
  --tex-blend: multiply;
  --tex-filter: none;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --slab-r: 2px;
  --wrap: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #080b0e;
    --bg-deep: #05070a;
    --panel:   #11161b;
    --panel-2: #171e24;
    --ink:     #dde5ec;
    --ink-2:   #9aa8b4;
    --ink-3:   #78868f;
    --line:    #263139;
    --line-2:  #34424c;
    --accent:  #d99b47;
    --accent-2:#e8b871;
    --signal:  #4fb2b4;
    --alert:   #dd6a4d;
    --ok:      #6fb573;

    --l-agent: #6d9ac4;
    --l-mcp:   #43a8a1;
    --l-crw:   #c9903f;
    --l-searx: #8dae55;
    --l-rend:  #c17d63;
    --l-host:  #8693a3;

    --tex-op:    .085;
    --tex-blend: screen;
    --tex-filter: invert(1) hue-rotate(180deg);
  }
}

/* ── reset-ish ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: .6rem 1rem; font: 600 14px/1 var(--mono);
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── shell ──────────────────────────────────────────────────────────── */
.shell {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 32px);
}
@media (min-width: 1000px) {
  .shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
}

main { min-width: 0; padding-bottom: 5rem; }

/* ── the rail: the stack, as navigation ─────────────────────────────── */
.rail { position: relative; padding: 1.4rem 0 2rem; }
@media (min-width: 1000px) {
  .rail { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding-top: 1.6rem; }
}

.rail-home {
  display: block; text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: .85rem; margin-bottom: 1rem;
}
.rail-home b {
  display: block;
  font: 700 17px/1.2 var(--mono);
  letter-spacing: -.02em;
  color: var(--ink);
}
.rail-home span {
  display: block; margin-top: .3rem;
  font-size: 11.5px; line-height: 1.4; color: var(--ink-3);
}
.rail-home:hover b { color: var(--accent); }

.rail-cap {
  font: 600 10px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .55rem;
}

.stack-nav ol { list-style: none; margin: 0; padding: 0; }

.slab { position: relative; }
.slab > a {
  display: block; text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--lc, var(--line-2));
  border-radius: var(--slab-r);
  padding: .5rem .6rem .55rem .7rem;
  margin-bottom: 3px;
  transition: background .12s linear, transform .12s ease-out;
}
.slab > a:hover { background: var(--panel-2); transform: translateX(2px); }
.slab .nm {
  display: block;
  font: 600 13.5px/1.25 var(--mono);
  color: var(--ink);
  letter-spacing: -.01em;
}
.slab .rl {
  display: block; margin-top: .12rem;
  font-size: 11px; line-height: 1.35; color: var(--ink-3);
}
.slab[aria-current="true"] > a,
.slab.is-current > a {
  background: var(--panel-2);
  border-color: var(--lc);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 32%, transparent);
}
.slab.is-current .nm { color: var(--lc); }

.l-agent { --lc: var(--l-agent); }
.l-mcp   { --lc: var(--l-mcp); }
.l-crw   { --lc: var(--l-crw); }
.l-searx { --lc: var(--l-searx); }
.l-rend  { --lc: var(--l-rend); }
.l-host  { --lc: var(--l-host); }

.rail-note {
  margin-top: 1.1rem; padding-top: .85rem;
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.5; color: var(--ink-3);
}
.rail-note a { color: var(--ink-2); }
.rail-note p { margin: 0 0 .5rem; }

/* ── masthead ───────────────────────────────────────────────────────── */
.mast {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--slab-r);
  background: var(--panel);
  padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.1rem, 3.4vw, 2.4rem);
  margin: 1.4rem 0 2.2rem;
}
.tex {
  position: absolute; inset: 0;
  background-image: url("strata.png");
  background-size: cover; background-position: center;
  opacity: var(--tex-op);
  mix-blend-mode: var(--tex-blend);
  filter: var(--tex-filter);
  pointer-events: none;
}
.mast > *:not(.tex) { position: relative; }
.eyebrow {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .8rem;
}
h1 {
  font-size: clamp(1.75rem, 4.4vw, 2.7rem);
  line-height: 1.12; letter-spacing: -.028em;
  margin: 0 0 .7rem; font-weight: 700;
}
.dek {
  font-size: clamp(1rem, 2.1vw, 1.18rem);
  line-height: 1.55; color: var(--ink-2);
  max-width: 62ch; margin: 0;
}

/* ── prose ──────────────────────────────────────────────────────────── */
main h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.2; letter-spacing: -.02em;
  margin: 3rem 0 .9rem; padding-top: .9rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 1rem;
}
main h2 .h-tag {
  display: block;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .55rem;
}
main h3 {
  font-size: 1.05rem; letter-spacing: -.01em;
  margin: 2rem 0 .55rem;
}
main h4 {
  font: 600 12.5px/1.3 var(--mono);
  letter-spacing: .02em; color: var(--ink-2);
  margin: 1.5rem 0 .45rem;
}
main p { margin: 0 0 1.05rem; max-width: 74ch; }
main ul, main ol { max-width: 74ch; padding-left: 1.15rem; margin: 0 0 1.15rem; }
main li { margin-bottom: .45rem; }
main li::marker { color: var(--ink-3); }
main a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
main a:hover { color: var(--ink); }
strong { font-weight: 650; color: var(--ink); }

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .08em .32em;
  word-break: break-word;
}
main h2 code, main h3 code { font-size: .9em; }

.lead { font-size: 1.08rem; color: var(--ink-2); max-width: 68ch; }

/* ── pull quote ─────────────────────────────────────────────────────── */
blockquote.pull {
  margin: 2rem 0; padding: 0 0 0 1.15rem;
  border-left: 3px solid var(--accent);
  max-width: 66ch;
}
blockquote.pull p {
  font-size: clamp(1.05rem, 2.2vw, 1.24rem);
  line-height: 1.42; letter-spacing: -.015em;
  color: var(--ink); margin: 0 0 .5rem;
}
blockquote.pull cite {
  font: 400 12px/1.4 var(--mono);
  color: var(--ink-3); font-style: normal;
}

/* ── callouts ───────────────────────────────────────────────────────── */
.note {
  margin: 1.6rem 0; padding: .95rem 1.05rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--slab-r);
  max-width: 74ch;
}
.note > :last-child { margin-bottom: 0; }
.note-t {
  display: block;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .55rem;
}
.note.warn { border-left-color: var(--alert); }
.note.warn .note-t { color: var(--alert); }
.note.gotcha { border-left-color: var(--accent); }
.note.gotcha .note-t { color: var(--accent); }
.note p { font-size: .95rem; }

/* ── tables ─────────────────────────────────────────────────────────── */
.tw { overflow-x: auto; margin: 1.5rem 0 1.8rem; border: 1px solid var(--line); border-radius: var(--slab-r); }
table { border-collapse: collapse; width: 100%; min-width: 480px; background: var(--panel); }
caption {
  caption-side: bottom; text-align: left;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
  padding: .7rem .9rem 0;
}
th, td {
  text-align: left; padding: .58rem .85rem;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px; vertical-align: top;
}
thead th {
  font: 600 10.5px/1.3 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  background: var(--panel-2);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td code { background: transparent; border: 0; padding: 0; color: var(--ink); }
td.mono, th.mono { font-family: var(--mono); font-size: 12.5px; }
.tag-bad { color: var(--alert); font-weight: 600; }
.tag-ok  { color: var(--ok); font-weight: 600; }
.tag-mid { color: var(--ink-3); }

/* ── figures / diagrams ─────────────────────────────────────────────── */
figure {
  margin: 2.2rem 0;
  border: 1px solid var(--line);
  border-radius: var(--slab-r);
  background: var(--panel);
  overflow: hidden;
}
.fig-scroll { overflow-x: auto; padding: clamp(.8rem, 2vw, 1.4rem); }
figure svg { display: block; width: 100%; height: auto; min-width: 540px; }
figure.wide svg { min-width: 680px; }
figcaption {
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  padding: .75rem 1rem;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
figcaption b {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  display: block; margin-bottom: .3rem;
}

/* diagram primitives — driven by CSS vars so both themes work */
.d-panel  { fill: var(--panel-2); stroke: var(--line); stroke-width: 1; }
.d-panel2 { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.d-hole   { fill: var(--bg-deep); stroke: var(--line); stroke-width: 1; }
.d-line   { stroke: var(--line-2); stroke-width: 1.4; fill: none; }
.d-dash   { stroke: var(--line-2); stroke-width: 1.4; fill: none; stroke-dasharray: 5 4; }
.d-flow   { stroke: var(--accent); stroke-width: 1.8; fill: none; }
.d-flow-b { stroke: var(--signal); stroke-width: 1.8; fill: none; }
.d-bad    { stroke: var(--alert); stroke-width: 1.8; fill: none; }
.d-t      { fill: var(--ink); font-family: var(--sans); font-size: 13px; }
.d-tm     { fill: var(--ink); font-family: var(--mono); font-size: 12.5px; }
.d-s      { fill: var(--ink-2); font-family: var(--sans); font-size: 11.5px; }
.d-sm     { fill: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.d-cap    { fill: var(--ink-3); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.d-em     { fill: var(--accent); font-family: var(--mono); font-size: 11.5px; }
.d-alert  { fill: var(--alert); font-family: var(--mono); font-size: 11.5px; }
.d-ok     { fill: var(--ok); font-family: var(--mono); font-size: 11.5px; }
.a-line   { fill: var(--line-2); }
.a-flow   { fill: var(--accent); }
.a-flow-b { fill: var(--signal); }
.a-bad    { fill: var(--alert); }

/* stack slab faces — plain fills first, so browsers without color-mix()
   still get a legible (if monochrome) stack. */
.f-front { fill: var(--panel-2); stroke: var(--line-2); stroke-width: 1; }
.f-top   { fill: var(--bg-deep); stroke: var(--line-2); stroke-width: 1; }
.f-side  { fill: var(--panel);   stroke: var(--line-2); stroke-width: 1; }

.sv-agent .f-front { fill: color-mix(in srgb, var(--l-agent) 20%, var(--panel)); }
.sv-agent .f-top   { fill: color-mix(in srgb, var(--l-agent) 42%, var(--panel)); }
.sv-agent .f-side  { fill: color-mix(in srgb, var(--l-agent) 10%, var(--panel)); }
.sv-mcp   .f-front { fill: color-mix(in srgb, var(--l-mcp) 20%, var(--panel)); }
.sv-mcp   .f-top   { fill: color-mix(in srgb, var(--l-mcp) 42%, var(--panel)); }
.sv-mcp   .f-side  { fill: color-mix(in srgb, var(--l-mcp) 10%, var(--panel)); }
.sv-crw   .f-front { fill: color-mix(in srgb, var(--l-crw) 20%, var(--panel)); }
.sv-crw   .f-top   { fill: color-mix(in srgb, var(--l-crw) 42%, var(--panel)); }
.sv-crw   .f-side  { fill: color-mix(in srgb, var(--l-crw) 10%, var(--panel)); }
.sv-searx .f-front { fill: color-mix(in srgb, var(--l-searx) 20%, var(--panel)); }
.sv-searx .f-top   { fill: color-mix(in srgb, var(--l-searx) 42%, var(--panel)); }
.sv-searx .f-side  { fill: color-mix(in srgb, var(--l-searx) 10%, var(--panel)); }
.sv-rend  .f-front { fill: color-mix(in srgb, var(--l-rend) 20%, var(--panel)); }
.sv-rend  .f-top   { fill: color-mix(in srgb, var(--l-rend) 42%, var(--panel)); }
.sv-rend  .f-side  { fill: color-mix(in srgb, var(--l-rend) 10%, var(--panel)); }
.sv-host  .f-front { fill: color-mix(in srgb, var(--l-host) 18%, var(--panel)); }
.sv-host  .f-top   { fill: color-mix(in srgb, var(--l-host) 38%, var(--panel)); }
.sv-host  .f-side  { fill: color-mix(in srgb, var(--l-host) 9%, var(--panel)); }

a.slab-link { text-decoration: none; cursor: pointer; }
a.slab-link .f-front { transition: fill .12s linear; }
a.slab-link:hover .f-front { fill: color-mix(in srgb, var(--accent) 26%, var(--panel)); }
a.slab-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── terminal ───────────────────────────────────────────────────────── */
.term {
  margin: 1.8rem 0;
  border: 1px solid #22303a;
  border-radius: var(--slab-r);
  background: #070b0e;
  overflow: hidden;
  color: #c9d6e0;
}
.term-bar {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem .8rem;
  background: #0e161c;
  border-bottom: 1px solid #22303a;
  font: 600 10.5px/1.4 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: #6d8494;
}
.term-bar span:last-child { text-transform: none; letter-spacing: 0; color: #4e6373; }
.term pre {
  margin: 0; padding: .9rem 1rem 1rem;
  overflow-x: auto;
  font: 400 12.5px/1.68 var(--mono);
  white-space: pre;
  tab-size: 2;
}
.term .c { color: #7c94a6; }          /* comment */
.term .p { color: #4f9ad0; }          /* prompt / user */
.term .k { color: #d9a15b; }          /* command */
.term .ok { color: #74c47c; }
.term .no { color: #e0765b; }
.term .d { color: #5d7383; }          /* dim output */
.term .hl { color: #e8e3d8; }
.term .url { color: #57b0b2; }

/* ── code blocks / annotated config ─────────────────────────────────── */
.code {
  margin: 1.6rem 0;
  border: 1px solid var(--line);
  border-radius: var(--slab-r);
  background: var(--panel);
  overflow: hidden;
}
.code-bar {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  justify-content: space-between; align-items: baseline;
  padding: .5rem .85rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font: 600 11px/1.4 var(--mono);
  color: var(--ink-2);
}
.code-bar em { font-style: normal; color: var(--ink-3); font-weight: 400; }
.code pre {
  margin: 0; padding: .85rem 1rem;
  overflow-x: auto;
  font: 400 12.5px/1.62 var(--mono);
  color: var(--ink);
  white-space: pre;
}
.code .cm { color: var(--ink-3); }
.code .st { color: var(--signal); }
.code .kw { color: var(--accent); }
.code .no { color: var(--alert); }
.ann {
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  margin: 0; padding: .75rem 1rem;
  font-size: 12.5px; line-height: 1.55;
}
.ann dt {
  font: 600 11.5px/1.5 var(--mono);
  color: var(--accent);
  margin-top: .5rem;
}
.ann dt:first-child { margin-top: 0; }
.ann dd { margin: .1rem 0 0; color: var(--ink-2); }

/* ── fact grid (compact key/value, not marketing cards) ─────────────── */
.facts {
  margin: 1.4rem 0 1.6rem;
  border-top: 1px solid var(--line);
}
.facts div {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
  gap: 0 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  font: 600 11px/1.6 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
}
.facts dd { margin: 0; font-size: 13.5px; line-height: 1.55; }
.facts dd code { font-size: 12.5px; }
@media (max-width: 520px) {
  .facts div { grid-template-columns: 1fr; gap: .1rem; }
}

/* ── index: layer sections ──────────────────────────────────────────── */
.layer-sec {
  border-top: 2px solid var(--lc, var(--line));
  padding-top: 1rem; margin-top: 3rem;
  scroll-margin-top: .8rem;
}
.layer-sec > h2 {
  border-top: 0; padding-top: 0; margin-top: 0;
}
.layer-sec .h-tag { color: var(--lc); }
.layer-sec .depth {
  float: right;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .12em; color: var(--ink-3);
  padding-top: .5rem;
}
.golink {
  display: inline-block; margin-top: .3rem;
  font: 600 12.5px/1 var(--mono);
  text-decoration: none;
  border-bottom: 1px solid var(--lc, var(--accent));
  padding-bottom: .25rem;
  color: var(--ink);
}
.golink:hover { color: var(--lc, var(--accent)); }
.golink::after { content: " →"; color: var(--lc, var(--accent)); }

/* ── page footer ────────────────────────────────────────────────────── */
.foot {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--panel);
  margin-top: 3rem;
  padding: 2rem 0 2.6rem;
}
.foot-in {
  position: relative;
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 32px);
  display: grid; gap: 1.6rem;
}
@media (min-width: 760px) { .foot-in { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.foot h2 {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .7rem;
  border: 0; padding: 0;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .35rem; font-size: 13px; }
.foot a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.foot a:hover { color: var(--accent); border-color: var(--accent); }
.foot p { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); margin: 0 0 .6rem; max-width: 42ch; }

/* prev/next between layers */
.updown {
  display: grid; gap: .5rem; margin-top: 3rem;
  border-top: 1px solid var(--line); padding-top: 1.4rem;
}
@media (min-width: 620px) { .updown { grid-template-columns: 1fr 1fr; } }
.updown a {
  display: block; text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--slab-r);
  background: var(--panel);
  padding: .7rem .9rem;
}
.updown a:hover { background: var(--panel-2); border-color: var(--line-2); }
.updown small {
  display: block;
  font: 600 10px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .35rem;
}
.updown b { font: 600 13.5px/1.3 var(--mono); color: var(--ink); }
.updown a:hover b { color: var(--accent); }

/* misc */
.hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.small { font-size: 13px; color: var(--ink-2); }
.nowrap { white-space: nowrap; }
ul.plain { list-style: none; padding-left: 0; }
ul.plain li { padding-left: 1.1rem; position: relative; }
ul.plain li::before {
  content: "▸"; position: absolute; left: 0; top: 0;
  color: var(--ink-3); font-size: .85em;
}