/* contextlake docs — shared styling, aligned to the landing brand */
:root{
  --deepwater:#0E2A33; --lake:#137A8B; --current:#2BB3A3; --mist:#EAF4F4;
  --shore:#D7C5A0; --sun:#E7B53C;
  --bg:#f4fafb; --surface:#ffffff; --ink:#0E2A33; --muted:#41606a; --subtle:#6c878f;
  --line:#d6e6e9; --line-2:#c2d8dc;
  --ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-d: "Space Grotesk", var(--ff);
  --ff-m: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --rs: 9px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{margin:0;font-family:var(--ff);color:var(--ink);background:var(--bg);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--lake)} a:hover{color:#0f6473}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--current);border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;background:var(--deepwater);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}

/* header */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:16px;height:58px;max-width:1180px;margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-d);font-weight:600;font-size:17px;color:var(--ink);text-decoration:none}
.brand .glyph{height:28px;width:auto;display:block}
.nav .spacer{flex:1}
.nav a.navlink{color:var(--muted);font-size:14px;font-weight:500;text-decoration:none}
.nav a.navlink:hover{color:var(--ink)}
.social-row{display:inline-flex;align-items:center;gap:8px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line-2);border-radius:9px;color:var(--muted);background:var(--surface);
  transition:color .15s,border-color .15s,background .15s,transform .15s}
.icon-btn:hover{color:var(--ink);border-color:var(--lake);background:#eef6f7;transform:translateY(-1px)}
.icon-btn .lmark{flex:none}
.side .ext .social-row{gap:10px}
footer .icon-btn{border-color:rgba(234,244,244,.22);color:var(--mist);background:transparent}
footer .icon-btn:hover{border-color:var(--current);color:#fff;background:rgba(234,244,244,.08)}

/* layout: sidebar + content */
.shell{display:grid;grid-template-columns:220px minmax(0,1fr) 200px;gap:40px;max-width:1320px;margin:0 auto;padding:30px 24px 80px}
.side{position:sticky;top:78px;align-self:start;max-height:calc(100vh - 96px);overflow:auto}
.side h2{font-family:var(--ff-m);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--subtle);margin:0 0 10px}
.side nav a{display:block;padding:7px 12px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:500}
.side nav a:hover{background:#e9f4f5;color:var(--ink)}
.side nav a.active{background:var(--lake);color:#fff}
.side .ext{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}

/* prose */
.prose{min-width:0;max-width:820px}
.prose>p:first-child img{max-width:100%}
.prose h1{font-family:var(--ff-d);font-size:clamp(28px,4vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:.2em 0 .5em}
.prose h2{font-family:var(--ff-d);font-size:24px;font-weight:600;letter-spacing:-.01em;margin:1.7em 0 .6em;padding-bottom:.3em;border-bottom:1px solid var(--line)}
.prose h3{font-family:var(--ff-d);font-size:18px;font-weight:600;margin:1.5em 0 .5em}
.prose p,.prose li{font-size:15.5px;color:#26414a}
.prose p{margin:.8em 0}
.prose ul,.prose ol{padding-left:1.3em;margin:.7em 0}
.prose li{margin:.3em 0}
.prose a{text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--lake) 35%,transparent)}
.prose a:hover{border-bottom-color:var(--lake)}
.prose code{font-family:var(--ff-m);font-size:.86em;background:#e9f1f2;color:#0c3a44;padding:.15em .42em;border-radius:5px}
.prose pre{background:var(--deepwater);color:var(--mist);padding:16px 18px;border-radius:12px;overflow:auto;
  font-family:var(--ff-m);font-size:13.5px;line-height:1.55;box-shadow:0 8px 22px -14px rgba(14,42,51,.5);margin:1.1em 0}
.prose pre code{background:none;color:inherit;padding:0;font-size:inherit}
.prose blockquote{margin:1.1em 0;padding:2px 18px;border-left:3px solid var(--current);background:#eef7f8;border-radius:0 8px 8px 0;color:#2f4d55}
.prose table{border-collapse:collapse;width:100%;margin:1.1em 0;font-size:14px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line-2);padding:8px 12px;text-align:left;vertical-align:top}
.prose th{background:#e9f4f5;font-weight:600;font-family:var(--ff-d)}
.prose tr:nth-child(2n) td{background:#f6fafb}
.prose img{max-width:100%;height:auto;border-radius:10px}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose :is(h1,h2,h3,h4) .anchor{opacity:0;color:var(--subtle);text-decoration:none;border:0;
  padding-left:.4em;font-size:.62em;font-weight:500;vertical-align:middle;transition:opacity .15s ease}
.prose :is(h1,h2,h3,h4):hover .anchor{opacity:.5}
.prose .anchor:hover,.prose .anchor:focus{opacity:1;color:var(--lake)}

/* code syntax (pygments, subset) on dark pre */
.prose .codehilite{margin:1.1em 0}
.prose .codehilite pre{margin:0}
.prose .codehilite .c,.prose .codehilite .c1,.prose .codehilite .cm{color:#7fa6ae}
.prose .codehilite .k,.prose .codehilite .kd,.prose .codehilite .kn{color:#7fd1c4}
.prose .codehilite .s,.prose .codehilite .s1,.prose .codehilite .s2{color:#e7c98a}
.prose .codehilite .nb,.prose .codehilite .nf{color:#9fd0d8}

/* footer */
footer{background:var(--deepwater);color:#a9c6cb;padding:34px 0;font-size:14px}
footer .f-in{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto;padding:0 24px}
footer a{color:var(--mist)} footer .f-links{display:flex;flex-wrap:wrap;gap:16px}
footer .tagline{font-family:var(--ff-d);color:var(--mist)}

/* page hero */
.doc-hero{display:flex;align-items:flex-end;justify-content:flex-start;gap:18px;
  margin:0 0 26px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.doc-hero-text{min-width:0}
.doc-eyebrow{font-family:var(--ff-m);font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lake);margin-bottom:10px}
.doc-hero h1{font-family:var(--ff-d);font-size:clamp(30px,4.2vw,40px);font-weight:700;
  letter-spacing:-.022em;line-height:1.12;margin:0}
.doc-sub{font-size:16px;color:var(--muted);margin:.55em 0 0;max-width:40em;line-height:1.5}
.doc-pebble{width:104px;height:auto;flex:none;filter:drop-shadow(0 8px 16px rgba(14,42,51,.14))}

/* on-page TOC rail */
.toc-rail{position:sticky;top:78px;align-self:start;max-height:calc(100vh - 96px);overflow:auto;
  font-size:13px}
.toc-title{font-family:var(--ff-m);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--subtle);margin:0 0 10px}
.toc-rail nav>ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc-rail ul ul{list-style:none;margin:0;padding-left:12px}
.toc-rail li{margin:0}
.toc-rail a{display:block;padding:4px 0 4px 12px;margin-left:-1px;color:var(--muted);
  text-decoration:none;border-left:2px solid transparent;line-height:1.35}
.toc-rail a:hover{color:var(--ink);border-left-color:var(--line-2)}

/* next-steps footer */
.next-steps{margin:48px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.next-steps h2{font-family:var(--ff-d);font-size:15px;font-weight:600;letter-spacing:.01em;
  text-transform:none;color:var(--subtle);border:0;margin:0 0 14px;padding:0}
.next-grid{display:flex;flex-wrap:wrap;gap:12px}
.next-card{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:11px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);text-decoration:none;
  font-family:var(--ff-d);font-weight:600;font-size:14.5px;transition:border-color .15s,transform .15s,box-shadow .15s}
.next-card svg{color:var(--lake);transition:transform .15s}
.next-card:hover{border-color:var(--lake);transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(14,42,51,.4)}
.next-card:hover svg{transform:translateX(3px)}

@media (max-width:1080px){
  .shell{grid-template-columns:220px minmax(0,1fr)}
  .toc-rail{display:none}
}
@media (max-width:860px){
  .shell{grid-template-columns:1fr;gap:18px}
  .side{position:static;max-height:none;border-bottom:1px solid var(--line);padding-bottom:14px}
  .side nav{display:flex;flex-wrap:wrap;gap:4px}
  .side nav a{padding:6px 10px}
  .doc-pebble{width:88px}
}