/* Shared styling for Karma's document pages (/quickstart/, /docs/, /privacy/, /terms/).
   The homepage keeps its own inline styles; these pages share one small sheet. */

@font-face { font-family:"Geist"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(/fonts/geist-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(/fonts/geist-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(/fonts/geist-mono-symbols2.woff2) format("woff2");
  unicode-range:U+2500-259F; }

:root {
  --app:#1c1d21; --pane:#212226; --card:#26272c;
  --control:rgba(255,255,255,.045); --selected:rgba(123,121,255,.09);
  --sidebar:#1a1b1f; --bar:#191a1e;
  --sep:rgba(255,255,255,.09); --sep-soft:rgba(255,255,255,.055); --sep-strong:rgba(255,255,255,.15);
  --l1:rgba(244,245,248,.93); --l2:rgba(244,245,248,.66); --l3:rgba(244,245,248,.45); --l4:rgba(244,245,248,.27);
  --accent:#7d7aff; --accent-hi:#9693ff; --green:#65c18c; --red:#e06c75;
  --r-sm:6px; --r-md:9px; --r-lg:12px;
  --sans:"Manrope","Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html,body { min-height:100%; }
body { min-height:100svh; display:grid; place-items:center;
  padding:clamp(20px,4vh,56px) clamp(18px,5vw,80px);
  background:radial-gradient(110% 90% at 50% -15%, #2a2c35 0%, #1a1b20 52%, #131417 100%);
  color:var(--l1); font:400 13px/1.5 var(--sans); letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; overflow:auto; }
svg { display:block; flex:0 0 auto; }
.ic { stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:4px; }

/* the same app-window frame the homepage uses, in document form */
.app { width:min(1020px,94vw); min-height:min(760px,84svh); display:flex; flex-direction:column;
  overflow:hidden; border-radius:15px; background:var(--app);
  box-shadow:0 0 0 .5px rgba(255,255,255,.13),0 28px 85px rgba(0,0,0,.58); }
.tbar { flex:0 0 auto; height:44px; display:flex; align-items:center; gap:10px;
  padding:0 13px; background:var(--bar); border-bottom:.5px solid var(--sep-soft); }
.lights { display:flex; gap:7px; padding-right:4px; }
.lights i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.15); }
.crumbs { display:flex; align-items:center; gap:7px; min-width:0; font-size:12.5px; color:var(--l3); }
.karma-logo { width:18px; height:18px; display:block; flex:0 0 auto; border-radius:4px; object-fit:contain; }
.crumbs .c1 { color:var(--l2); font-weight:500; }
.crumbs .on { color:var(--l1); font-weight:600; }
.crumbs .sep2 { color:var(--l4); }
.sp { flex:1; }
.tbar .dl-mini { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px;
  border-radius:var(--r-md); background:var(--accent); color:#fff; font-size:11.5px; font-weight:600; }
.tbar .dl-mini:hover { background:var(--accent-hi); }

.tabs { flex:0 0 auto; height:39px; display:flex; align-items:stretch; padding:0 8px 0 0;
  background:rgba(0,0,0,.12); border-bottom:.5px solid var(--sep-soft); }
.tab { display:flex; align-items:center; gap:7px; padding:0 13px; position:relative;
  color:var(--l3); font-size:12.5px; }
.tab:hover { color:var(--l2); }
.tab[aria-current="page"] { color:var(--l1); background:rgba(255,255,255,.018); }
.tab[aria-current="page"]::after { content:""; position:absolute; inset:auto 10px 0 10px; height:2px;
  background:var(--accent); border-radius:2px 2px 0 0; }

.pane { flex:1; min-height:0; overflow:auto; }
.in { width:min(760px, calc(100% - 48px)); margin:0 auto; padding:28px 0 40px; }

/* document typography (mirrors the homepage .doc styles) */
.doc h1 { font:600 22px/1.25 var(--sans); letter-spacing:-.02em; color:var(--l1); }
.doc .lede { margin-top:8px; font-size:13px; line-height:1.65; color:var(--l2); }
.doc h2 { margin-top:30px; font:600 15px/1.3 var(--sans); letter-spacing:-.015em; color:var(--l1); }
.doc h3 { margin-top:20px; font:600 12.5px var(--sans); color:var(--l1); }
.doc p { margin-top:9px; font-size:12.5px; line-height:1.65; color:var(--l2); }
.doc ul,.doc ol { margin-top:8px; padding-left:17px; }
.doc li { margin-top:4px; font-size:12px; line-height:1.6; color:var(--l3); }
.doc li b, .doc p b { color:var(--l1); font-weight:550; }
.doc a { color:var(--accent-hi); text-decoration:underline; text-underline-offset:2px; }
.doc code { font:400 11px var(--mono); color:var(--l2); background:var(--control); padding:1px 5px; border-radius:5px; }
.call { margin-top:13px; padding:11px 13px; border-radius:var(--r-lg); background:var(--card); box-shadow:inset 0 0 0 .5px var(--sep); }
.call p { margin:0; }

/* code blocks */
.doc pre { margin-top:10px; padding:12px 14px; overflow-x:auto; border-radius:var(--r-lg);
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 .5px var(--sep);
  font:400 11px/1.7 var(--mono); color:var(--l2); }
.doc pre code { background:none; padding:0; font:inherit; color:inherit; }
.doc pre .c { color:var(--l4); }            /* comment */
.doc pre .k { color:var(--accent-hi); }     /* command / keyword */
.doc pre .s { color:var(--green); }         /* string / value */
.doc pre .p { color:#e2b86b; }              /* prompt-ish / id */

/* simple two-column definition tables */
.doc table { margin-top:10px; width:100%; border-collapse:collapse; font-size:11.5px; }
.doc th { text-align:left; padding:6px 10px; color:var(--l4); font-weight:600; font-size:10.5px;
  letter-spacing:.03em; text-transform:uppercase; border-bottom:.5px solid var(--sep); }
.doc td { padding:6px 10px; color:var(--l3); line-height:1.55; border-bottom:.5px solid var(--sep-soft); vertical-align:top; }
.doc td:first-child { white-space:nowrap; color:var(--l2); font:500 11px var(--mono); }

/* figures (inline SVG diagrams) */
.fig { margin-top:14px; padding:16px; border-radius:var(--r-lg); background:var(--card);
  box-shadow:inset 0 0 0 .5px var(--sep); }
.fig svg { width:100%; height:auto; }
.fig figcaption { margin-top:10px; font-size:11px; color:var(--l4); text-align:center; }

/* step flow */
.steps { margin-top:12px; display:grid; gap:8px; counter-reset:step; }
.step { display:flex; gap:11px; padding:11px 13px; border-radius:var(--r-lg);
  background:var(--card); box-shadow:inset 0 0 0 .5px var(--sep); }
.step .n { counter-increment:step; flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center;
  border-radius:50%; background:var(--selected); color:var(--accent-hi); font:600 11px var(--mono); }
.step .n::before { content:counter(step); }
.step h3 { margin:1px 0 0; font:600 12.5px var(--sans); color:var(--l1); }
.step p { margin-top:3px; font-size:11.5px; line-height:1.55; color:var(--l3); }

.stbar { flex:0 0 auto; min-height:25px; display:flex; align-items:center; gap:14px; padding:2px 12px;
  background:var(--bar); border-top:.5px solid var(--sep-soft); font:400 10.5px var(--mono); color:var(--l4); flex-wrap:wrap; }
.stbar .g { display:flex; align-items:center; gap:5px; }
.stbar a:hover { color:var(--l2); }
.stbar .sp { flex:1; }

@media (max-width:640px) {
  body { padding:12px; }
  .app { width:100%; min-height:92svh; }
  .tabs { overflow-x:auto; scrollbar-width:none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}