/* docs.synsema.com — base styles. Dark by default; [data-theme=light] flips it. */
:root, :root[data-theme=dark]{
  --bg:#0d1117; --panel:#0f141b; --ink:#e6edf3; --muted:#9aa4b2; --line:#222b36;
  --accent:#4493f8; --accent-soft:#1c2b40; --code-bg:#161b22; --code-ink:#e6edf3;
  --sel:#1f3a5f; --radius:10px; --maxw:1180px; --prose:760px;
}
:root[data-theme=light]{
  --bg:#ffffff; --panel:#f6f8fa; --ink:#1f2328; --muted:#59636e; --line:#d1d9e0;
  --accent:#0969da; --accent-soft:#ddf4ff; --code-bg:#f6f8fa; --code-ink:#1f2328; --sel:#b6e3ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--sel)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* top bar */
.top{display:flex;align-items:center;gap:14px;padding:0 22px;height:56px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}
.brand{font-weight:700;color:var(--ink);font-size:15px;letter-spacing:-.01em}
.brand::before{content:"◇ ";color:var(--accent)}
.ver{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.ver-select{font:12px inherit;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:3px 7px;cursor:pointer}
.ver-select:hover{border-color:var(--accent);color:var(--ink)}
.langs{margin-left:auto;display:flex;gap:6px}
.langs a{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);
  border-radius:7px;padding:3px 9px}
.langs a.on{color:#fff;background:var(--accent);border-color:var(--accent)}
.theme-toggle{margin-left:4px;background:transparent;border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:3px 9px;cursor:pointer;font-size:13px;line-height:1}

/* layout */
.layout{display:grid;grid-template-columns:280px minmax(0,1fr);max-width:var(--maxw);margin:0 auto}
.side{position:sticky;top:56px;align-self:start;max-height:calc(100vh - 56px);overflow:auto;
  padding:22px 18px;border-right:1px solid var(--line)}
.side h4{margin:20px 0 6px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted)}
.side h4:first-child{margin-top:0}
.side ul{list-style:none;margin:0;padding:0}
.side li{margin:1px 0}
.side a{display:block;color:var(--ink);font-size:14px;padding:5px 10px;border-radius:7px}
.side a:hover{background:var(--panel);text-decoration:none}
.side a.active{background:var(--accent-soft);color:var(--accent);font-weight:600}

/* prose */
.prose{padding:34px 44px;max-width:calc(var(--prose) + 88px);min-width:0}
.prose h1{font-size:2.1rem;line-height:1.2;letter-spacing:-.02em;margin:.1em 0 .5em}
.prose h2{font-size:1.4rem;margin:2em 0 .6em;padding-bottom:.25em;border-bottom:1px solid var(--line)}
.prose h3{font-size:1.12rem;margin:1.6em 0 .4em}
.prose p{margin:.9em 0}
.prose em{font-style:italic}
.prose table{border-collapse:collapse;margin:1.3em 0;font-size:.92em;display:block;overflow-x:auto;max-width:100%}
.prose th,.prose td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--panel);font-weight:600;white-space:nowrap}
.prose blockquote{margin:1.3em 0;padding:.7em 1.1em;border-left:3px solid var(--accent);background:var(--panel);border-radius:0 8px 8px 0;color:var(--muted)}
.prose blockquote code,.prose blockquote strong{color:var(--ink)}
.prose ul{padding-left:1.3em}
.prose li{margin:.3em 0}
.prose strong{color:var(--ink);font-weight:700}
.prose code{background:var(--code-bg);border:1px solid var(--line);padding:.12em .4em;border-radius:6px;
  font-size:.88em;font-family:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace}

/* code blocks + copy */
.prose pre{position:relative;background:var(--code-bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;overflow:auto;margin:0}
.prose pre code{background:none;border:0;padding:0;color:var(--code-ink);font-size:13.5px;line-height:1.6}
figure.example{margin:1.4em 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
figure.example figcaption{font:600 12px ui-monospace,monospace;color:var(--muted);
  background:var(--panel);padding:8px 14px;border-bottom:1px solid var(--line)}
figure.example pre{border:0;border-radius:0}
.copy{position:absolute;top:8px;right:8px;font-size:11px;font-weight:600;color:var(--muted);
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:3px 8px;cursor:pointer;opacity:0;transition:opacity .12s}
pre:hover .copy{opacity:1}
.copy:hover{color:var(--ink)}

/* interactive runner */
figure.example code[contenteditable]{outline:none;display:block}
figure.example code[contenteditable]:focus{box-shadow:inset 0 0 0 9999px color-mix(in srgb,var(--accent) 6%,transparent)}
.run-bar{display:flex;gap:8px;padding:8px 14px;background:var(--panel);border-top:1px solid var(--line)}
.run-btn{font:600 12px ui-monospace,monospace;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:6px;padding:4px 12px;cursor:pointer}
.run-btn:hover{border-color:var(--accent);color:var(--accent)}
.run-btn.primary{color:#fff;background:var(--accent);border-color:var(--accent)}
.run-btn.primary:hover{color:#fff;filter:brightness(1.08)}
.run-btn:disabled{opacity:.5;cursor:default}
.run-output{margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:var(--code-bg);
  padding:12px 16px;font:12.5px/1.55 ui-monospace,monospace;white-space:pre-wrap;max-height:260px;overflow:auto}
.run-output.ok{color:var(--ink)}
.run-output.err{color:#f85149}

.foot{max-width:var(--maxw);margin:0 auto;padding:26px 44px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}

@media(max-width:820px){
  .layout{grid-template-columns:1fr}
  .side{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line)}
  .prose{padding:24px 20px}
}