/* Syntax and Markdown colors for dark code surfaces. */
.hl { background:none; color:var(--fg); }
.hl-cmt  { color:#91a896; font-style:italic; }
.hl-kw   { color:#d7a6e5; }
.hl-typ  { color:#e5bd72; }
.hl-fn   { color:#8fc8ee; }
.hl-str  { color:#a7e28d; }
.hl-num  { color:#d8b1df; }
.hl-lit  { color:#d8b1df; }
.hl-attr { color:#8fc8ee; }
.hl-tag  { color:#72d6d0; }
.hl-pre  { color:#d8b1df; }

.code-block { border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
              background:var(--bg); margin:16px 0; }
.code-head { display:flex; align-items:center; gap:10px; padding:8px 12px;
             background:var(--bg); border-bottom:1px solid var(--line);
             font-family:var(--sans); font-size:11px; color:var(--dim); }
.code-head .code-lang { color:var(--dim); font-family:var(--mono); font-size:10px; }
.code-head .code-copy { margin-left:auto; font:inherit; font-size:11px; cursor:pointer;
                        background:var(--panel); border:1px solid var(--line); color:var(--dim);
                        border-radius:var(--r-xs); padding:3px 8px; }
.code-head .code-copy:hover { color:var(--cyan); background:var(--panel-2); border-color:var(--cyan); }
.code-block pre { margin:0; border:0; border-radius:0; background:none; padding:14px 16px; overflow-x:auto; }
.code-block code { background:none; border:0; padding:0; font-size:12px; color:var(--fg); line-height:1.7; }

.md { font-size:14px; line-height:1.8; font-family:var(--sans); color:var(--fg); overflow-wrap:anywhere; }
.md > *:first-child { margin-top:0; }
.md > *:last-child { margin-bottom:0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  display:block; background:none; color:var(--fg); font-family:var(--sans); padding:0;
  margin:1.5em 0 .55em; line-height:1.35; font-weight:650; letter-spacing:0;
  text-transform:none; }
.md h1 { font-size:1.65em; }
.md h2 { font-size:1.3em; }
.md h3 { font-size:1.12em; }
.md h4, .md h5, .md h6 { font-size:1em; }
.md h1::before, .md h2::before, .md h3::before, .md h4::before { content:none; }
.md p { margin:.75em 0; font-size:inherit; color:inherit; }
.md a { color:var(--cyan); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.md a:hover { text-decoration-color:var(--cyan); }
.md strong { color:var(--fg); font-weight:650; }
.md ul, .md ol { margin:.75em 0; padding-left:1.5em; }
.md li { margin:.25em 0; }
.md li > p { margin:.3em 0; }
.md blockquote { margin:1em 0; padding:.2em 1em; border-left:3px solid var(--green);
                 background:var(--bg); color:var(--dim); }
.md hr { border:0; border-top:1px solid var(--line); margin:1.7em 0; }
.md table { display:block; max-width:100%; overflow-x:auto; width:max-content; min-width:100%;
            border-collapse:collapse; margin:1.2em 0; font-size:12px; }
.md th, .md td { border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
.md th { background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:12px;
         text-transform:none; letter-spacing:0; font-weight:600; }
.md tbody tr:nth-child(2n) { background:var(--panel-2); }
.md img { max-width:100%; height:auto; border-radius:var(--r-sm); border:1px solid var(--line); }
.md del { color:var(--dim); }
@media (pointer:coarse), (max-width:600px) {
  .code-head .code-copy { min-height:36px; padding:4px 10px; }
}