:root {
  color-scheme: light;
  --bg: #fbfbf9; --surface: #ffffff; --text: #1b1b1b; --muted: #5d5d58; --line: #e3e2dc;
  --accent: #1f5aa6; --mark: #ffcb05;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141414; --surface: #1c1c1b; --text: #f2f2ef; --muted: #b1b0a8; --line: #33332f; --accent: #8db8ea;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141414; --surface: #1c1c1b; --text: #f2f2ef; --muted: #b1b0a8; --line: #33332f; --accent: #8db8ea;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
header.site, main, footer.site { max-width: 780px; margin: 0 auto; padding: 0 16px; }
header.site { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; padding-top: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
header.site .name { font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; }
header.site nav { display: flex; flex-wrap: wrap; gap: 4px 13px; font-size: .94rem; }
header.site nav a { text-decoration: none; }
header.site nav a[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom: 3px solid var(--mark); }
main { padding-top: 8px; padding-bottom: 32px; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: 24px 0 8px; }
h2 { font-size: 1.3rem; margin: 32px 0 8px; }
h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.identity { color: var(--muted); }
.lead { font-size: 1.2rem; font-weight: 600; border-left: 4px solid var(--mark); padding-left: 12px; }
.domain { font-size: .8rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-left: 6px; }
.soon { color: var(--muted); font-style: italic; }
ul.tracks { padding-left: 1.2em; }
ol.pubs, ul.pubs { padding-left: 1.4em; }
.pubs li { margin: 0 0 14px; }
.pubs .title { font-weight: 600; }
.pubs .authors, .pubs .meta { color: var(--muted); font-size: .95rem; }
.pubs.brief li { margin-bottom: 8px; }
footer.site { border-top: 1px solid var(--line); padding-top: 12px; padding-bottom: 28px; color: var(--muted); font-size: .9rem; }
@media (max-width: 600px) { body { font-size: 16px; } h1 { font-size: 1.6rem; } }
.pubs .contrib { display: block; margin-top: 2px; font-size: .95rem; }
.talks li { margin-bottom: 8px; }
.crumb { color: var(--muted); font-size: .9rem; margin: 20px 0 0; }
.crumb + h1 { margin-top: 4px; }
/* Drop-down under Research: opens on hover or keyboard focus; the link itself still goes to the overview */
.menu { position: relative; }
.submenu { display: none; position: absolute; top: 100%; left: -12px; z-index: 10; min-width: 15.5rem; margin: 0; padding: 6px 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.menu:hover .submenu, .menu:focus-within .submenu { display: block; }
header.site nav .submenu a { display: block; padding: 5px 14px; white-space: nowrap; color: var(--accent); font-weight: 400; border-bottom: 0; }
header.site nav .submenu a:hover, header.site nav .submenu a:focus { background: var(--bg); }
header.site nav .submenu a[aria-current="page"] { color: var(--text); font-weight: 600; }
.caret { display: inline-block; margin-left: 3px; font-size: .8em; transition: transform .15s; }
.menu:hover .caret, .menu:focus-within .caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .caret { transition: none; } }
ul.pubs { list-style: none; padding-left: 0; }
.software li { margin-bottom: 12px; }
/* Header stays at the top on wider screens; on phones, where it wraps, it scrolls away */
@media (min-width: 700px) {
  header.site { position: sticky; top: 0; z-index: 20; background: var(--bg); }
  /* full-width background behind the header, without clipping the drop-down menus */
  header.site::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vmax; right: -100vmax; background: var(--bg); z-index: -1; }
  html { scroll-padding-top: 80px; }
}
/* keeps the header's full-width background from widening the page (clip, unlike hidden, keeps the header sticky) */
body { overflow-x: clip; }
.submenu li.sep { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
h2 a { color: inherit; text-decoration: none; }
h2 a:hover { text-decoration: underline; }
ul.news { list-style: none; padding-left: 0; }
ul.news li { margin-bottom: 10px; }
ul.news .date { display: inline-block; min-width: 5.5em; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Skip link: hidden until focused with the keyboard */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--surface); color: var(--accent); border: 2px solid var(--accent); border-radius: 6px; }
.skip:focus { left: 16px; }
/* Print: light colors, no menu, no page breaks inside entries; URLs printed after links in the text */
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; --bg: #fff; --surface: #fff; --text: #000; --muted: #444; --line: #bbb; --accent: #000; }
  body { font-size: 11pt; background: #fff; color: #000; }
  header.site nav, .skip, .hrd-controls, noscript { display: none !important; }
  header.site { position: static; border-bottom: 1px solid #bbb; }
  header.site::before { display: none; }
  main, header.site, footer.site { max-width: none; padding: 0; }
  a { color: #000; text-decoration: underline; }
  main p:not(.identity) a[href^="http"]::after { content: " <" attr(href) ">"; font-size: .85em; word-break: break-all; }
  h1, h2, h3 { break-after: avoid; }
  .pubs li, .software li, ul.news li, figure, .hl, details { break-inside: avoid; }
  details > *:not(summary) { display: block; }
  pre { white-space: pre-wrap; max-height: none; overflow: visible; }
}
/* Keyword strip under the name on Home */
/* Paper highlights */
.highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 12px 0 8px; }
.hl { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 12px 14px; }
.hl img { display: block; width: 100%; height: auto; border-radius: 6px; margin-bottom: 8px; }
.hl h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.35; }
.hl p { margin: 0 0 6px; font-size: .93rem; }
.hl .hl-links { color: var(--muted); font-size: .88rem; margin: 0; }
/* Software status labels and start table */
.status { display: inline-block; font-size: .78rem; font-weight: 600; padding: 0 8px; border-radius: 999px; border: 1px solid currentColor; vertical-align: 1px; }
.status.active { color: var(--accent); }
.status.archived { color: var(--muted); }
table.start { border-collapse: collapse; font-size: .95rem; }
table.start th, table.start td { text-align: left; vertical-align: top; padding: 5px 12px 5px 0; border-bottom: 1px solid var(--line); }

/* Home: at a glance (P21) */
ul.glance { margin: 14px 0 18px; padding-left: 1.2rem; }
ul.glance li { margin: 6px 0; }

/* P22: three-box figure and glossary links */
.fig-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.fig .fig-loop { margin: 10px 0; }
a.term { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
a.term:hover, a.term:focus { color: var(--accent); }
dl.glossary dt { font-weight: 600; margin-top: 16px; scroll-margin-top: 16px; }
dl.glossary dd { margin: 4px 0 0 0; }
dl.glossary dd .seen { color: var(--muted); font-size: .9rem; }
dl.glossary dt:target { background: var(--mark); }
.newbie { color: var(--muted); font-size: .92rem; }

/* P28: "Terms on this page" box and pop-up definitions (tools/terms.py, assets/terms.js) */
.terms-box { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 8px; }
.terms-box > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.terms-box dl.glossary dt:first-child { margin-top: 8px; }
.term-pop { position: absolute; z-index: 20; box-sizing: border-box; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: .95rem; line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.term-pop[hidden] { display: none; }
.term-pop .term-pop-more { white-space: nowrap; }
@media print { .term-pop { display: none !important; } }

/* P29: term words look different from ordinary links and text; pop-ups can be turned off for the visit */
a.term { color: inherit; text-decoration: underline dotted var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
html.term-popups a.term { cursor: help; }
a.term:hover, a.term:focus { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 3px; }
.term-toggle { font-size: .95rem; color: var(--muted); margin: 8px 0 0; }
.term-toggle input { margin-right: 6px; vertical-align: -1px; }
.term-pop-actions { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 8px; font-size: .9rem; }
.term-pop-off { font: inherit; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.term-pop-off:hover, .term-pop-off:focus { color: var(--text); border-color: var(--muted); }

/* Contents (assets/site.js): a box at the top of the page, a sidebar beside the text on wide screens */
.toc { margin: 16px 0 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .92rem; line-height: 1.45; max-width: 24em; }
.toc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.toc-title { font-weight: 600; }
.toc-toggle { font: inherit; font-size: .85rem; color: var(--accent); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.toc-toggle::before { content: "["; color: var(--muted); }
.toc-toggle::after { content: "]"; color: var(--muted); }
.toc ol { list-style: none; margin: 6px 0 2px; padding: 0; }
.toc ol ol { margin: 2px 0 2px 1em; }
.toc li { margin: 3px 0; }
.toc a { text-decoration: none; }
.toc a:hover, .toc a:focus { text-decoration: underline; }
.toc a.toc-current { color: var(--text); font-weight: 600; }
.toc.toc-hidden { padding-top: 6px; padding-bottom: 6px; }
/* beside the text whenever the margin has room; its width follows the margin (narrower windows,
   such as Chrome with vertical tabs), and it never starts closer than 12px to the window's edge */
@media (min-width: 1180px) {
  .toc { position: fixed; top: var(--toc-top, 90px); width: clamp(150px, calc(50% - 390px - 52px), 212px);
    left: max(12px, calc(50% - 390px - 250px)); max-height: calc(100vh - var(--toc-top, 90px) - 24px); overflow-y: auto; margin: 0; background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 0 14px 0 0; }
  .toc.toc-hidden { border-right: 0; width: auto; }
}
@media print { .toc { display: none; } }

/* Code: inline code in a light box; code blocks with a Copy button (assets/site.js) */
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
:not(pre) > code { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: .05em .3em; }
pre { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; overflow-x: auto; line-height: 1.45; }
pre code { font-size: .88rem; }
.copy-code { position: absolute; top: 6px; right: 6px; font: inherit; font-size: .8rem; color: var(--accent); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; cursor: pointer; opacity: .85; }
.copy-code:hover, .copy-code:focus-visible { opacity: 1; }
@media print { .copy-code { display: none; } }
.hl img { background: #fff; }
.hl .hl-credit { color: var(--muted); font-size: .8rem; margin: -2px 0 8px; }
/* a small logo beside the text */
.logo-right { float: right; margin: 4px 0 8px 16px; }
.logo-right img { display: block; border-radius: 12px; }
/* About: portrait beside the first section */
figure.portrait { float: right; width: 180px; margin: 4px 0 12px 20px; }
figure.portrait img { display: block; width: 100%; height: auto; border-radius: 10px; }
figure.portrait figcaption { color: var(--muted); font-size: .78rem; margin-top: 4px; text-align: right; }
@media (max-width: 600px) { figure.portrait { width: 130px; } }

/* Small line icons before section headings on text-heavy pages (drawn for this site; shown in the accent color) */
h2.i::before { content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .45em; vertical-align: -0.16em; background: var(--accent); -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; }
.i-briefcase { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%207V5a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2M3%2013h18%22/%3E%3C/svg%3E"); }
.i-award { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%226%22/%3E%3Cpath%20d%3D%22M8.5%2014%207%2022l5-3%205%203-1.5-8%22/%3E%3C/svg%3E"); }
.i-cap { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209l10-5%2010%205-10%205z%22/%3E%3Cpath%20d%3D%22M6%2011v5c0%201.5%203%203%206%203s6-1.5%206-3v-5M22%209v6%22/%3E%3C/svg%3E"); }
.i-board { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%221%22/%3E%3Cpath%20d%3D%22M12%2016v4M8%2020h8M7%209h6M7%2012h9%22/%3E%3C/svg%3E"); }
.i-heart { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020s-7-4.5-7-10a4%204%200%200%201%207-2.6A4%204%200%200%201%2019%2010c0%205.5-7%2010-7%2010z%22/%3E%3C/svg%3E"); }
.i-wrench { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200-5.4%205.4L3%2018v3h3l6.3-6.3a4%204%200%200%200%205.4-5.4l-2.5%202.5-2.4-.6-.6-2.4z%22/%3E%3C/svg%3E"); }
.i-mail { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%207l9%206%209-6%22/%3E%3C/svg%3E"); }
.i-chat { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v10H9l-5%204z%22/%3E%3C/svg%3E"); }
.i-user { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021c0-4%204-6%208-6s8%202%208%206%22/%3E%3C/svg%3E"); }
.i-route { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M8%2018h6a3%203%200%200%200%200-6h-4a3%203%200%200%201%200-6h6%22/%3E%3C/svg%3E"); }
.i-clock { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%207v5l3%202%22/%3E%3C/svg%3E"); }
.i-globe { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M3%2012h18M12%203c3%203.5%203%2014.5%200%2018M12%203c-3%203.5-3%2014.5%200%2018%22/%3E%3C/svg%3E"); }
.i-book { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205a2%202%200%200%201%202-2h13v16H6a2%202%200%200%200-2%202zM4%2019V5%22/%3E%3C/svg%3E"); }
@media print { h2.i::before { display: none; } }
h2 .hide-toggle { font-size: .8rem; font-weight: 400; vertical-align: middle; margin-left: 4px; }
/* hidden elements stay hidden even where a layout sets display (e.g. the Highlights grid) */
[hidden] { display: none !important; }
.i-atom { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.5%22/%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212%22%20rx%3D%2210%22%20ry%3D%224%22/%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212%22%20rx%3D%2210%22%20ry%3D%224%22%20transform%3D%22rotate%2860%2012%2012%29%22/%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212%22%20rx%3D%2210%22%20ry%3D%224%22%20transform%3D%22rotate%28120%2012%2012%29%22/%3E%3C/svg%3E"); }
.i-pen { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020l4-1%2011-11-3-3L5%2016z%22/%3E%3Cpath%20d%3D%22M14%206l3%203%22/%3E%3C/svg%3E"); }
.i-users { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2%2020c0-3.5%203-5.5%207-5.5s7%202%207%205.5%22/%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207M18%2014.5c2.4.6%204%202.4%204%205.5%22/%3E%3C/svg%3E"); }
.i-spark { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v4M12%2017v4M3%2012h4M17%2012h4M6%206l2.5%202.5M15.5%2015.5%2018%2018M6%2018l2.5-2.5M15.5%208.5%2018%206%22/%3E%3C/svg%3E"); }
.i-sprout { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021v-9%22/%3E%3Cpath%20d%3D%22M12%2012c0-4%203-7%208-7%200%204-3%207-8%207z%22/%3E%3Cpath%20d%3D%22M12%2014c0-3-2.5-5.5-7-5.5%200%203%202.5%205.5%207%205.5z%22/%3E%3C/svg%3E"); }
.i-checklist { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2216%22%20height%3D%2218%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%209l2%202%204-4M8%2016h8%22/%3E%3C/svg%3E"); }
.i-compass { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M15.5%208.5l-2%205-5%202%202-5z%22/%3E%3C/svg%3E"); }
.i-database { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%225%22%20rx%3D%228%22%20ry%3D%223%22/%3E%3Cpath%20d%3D%22M4%205v14c0%201.7%203.6%203%208%203s8-1.3%208-3V5M4%2012c0%201.7%203.6%203%208%203s8-1.3%208-3%22/%3E%3C/svg%3E"); }
.i-search { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22/%3E%3Cpath%20d%3D%22M15.5%2015.5%2021%2021%22/%3E%3C/svg%3E"); }
.i-scale { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v18M7%2021h10M4%207h16%22/%3E%3Cpath%20d%3D%22M6%207l-3%206a3%203%200%200%200%206%200zM18%207l-3%206a3%203%200%200%200%206%200z%22/%3E%3C/svg%3E"); }
.i-alert { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%202%2020h20z%22/%3E%3Cpath%20d%3D%22M12%2010v4M12%2017v.5%22/%3E%3C/svg%3E"); }
.i-bulb { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6M10%2021h4%22/%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200-3.5%2010.9c.6.5%201%201.2%201%202.1h5c0-.9.4-1.6%201-2.1A6%206%200%200%200%2012%203z%22/%3E%3C/svg%3E"); }
.i-link { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2014a4%204%200%200%200%205.7%200l3-3a4%204%200%200%200-5.7-5.7l-1%201%22/%3E%3Cpath%20d%3D%22M14%2010a4%204%200%200%200-5.7%200l-3%203a4%204%200%200%200%205.7%205.7l1-1%22/%3E%3C/svg%3E"); }
.i-layers { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%202%208l10%205%2010-5z%22/%3E%3Cpath%20d%3D%22M2%2012.5l10%205%2010-5%22/%3E%3Cpath%20d%3D%22M2%2016.5l10%205%2010-5%22/%3E%3C/svg%3E"); }
.i-play { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M10%208l6%204-6%204z%22/%3E%3C/svg%3E"); }
.i-io { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%227%22%20width%3D%228%22%20height%3D%2210%22%20rx%3D%221.5%22/%3E%3Cpath%20d%3D%22M2%2012h6M16%2012h6M5%209l3%203-3%203M19%209l3%203-3%203%22/%3E%3C/svg%3E"); }
.i-tag { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012V4h8l10%2010-8%208z%22/%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%228.5%22%20r%3D%221.5%22/%3E%3C/svg%3E"); }
.i-code { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%207l-5%205%205%205M16%207l5%205-5%205M14%204l-4%2016%22/%3E%3C/svg%3E"); }
.i-grid { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221%22/%3E%3Crect%20x%3D%2213%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221%22/%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221%22/%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221%22/%3E%3C/svg%3E"); }
.i-list { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206h12M9%2012h12M9%2018h12%22/%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%226%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%2212%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%224.5%22%20cy%3D%2218%22%20r%3D%221%22/%3E%3C/svg%3E"); }
.i-swap { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h14l-3-3M20%2016H6l3%203%22/%3E%3C/svg%3E"); }
.i-file { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202h8l5%205v15H6z%22/%3E%3Cpath%20d%3D%22M14%202v5h5M9%2013h7M9%2017h7%22/%3E%3C/svg%3E"); }
.i-nodes { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%226%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%226%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2218%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M7%206h10M6%208l5%208.3M18%208l-5%208.3%22/%3E%3C/svg%3E"); }

/* Python code blocks: tinted tokens (keywords, built-ins, strings, numbers, comments, prompts) */
:root { --tk-k: #8a3fb0; --tk-b: #1f5aa6; --tk-s: #2e7d32; --tk-n: #b5521b; --tk-c: #6d6d68; --tk-p: #9a9a94; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tk-k: #d29bf0; --tk-b: #8db8ea; --tk-s: #8fd18f; --tk-n: #f0a87c; --tk-c: #a3a39c; --tk-p: #77776f; } }
:root[data-theme="dark"] { --tk-k: #d29bf0; --tk-b: #8db8ea; --tk-s: #8fd18f; --tk-n: #f0a87c; --tk-c: #a3a39c; --tk-p: #77776f; }
.tk-k { color: var(--tk-k); font-weight: 600; } .tk-b { color: var(--tk-b); } .tk-s { color: var(--tk-s); }
.tk-n { color: var(--tk-n); } .tk-c { color: var(--tk-c); font-style: italic; } .tk-p { color: var(--tk-p); }

/* Chinese version (P23): language switch and Chinese typography */
nav a.lang { margin-left: 2px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; }
html:lang(zh-CN) body { font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; line-height: 1.75; }
html:lang(zh-CN) h1, html:lang(zh-CN) h2, html:lang(zh-CN) h3 { letter-spacing: .02em; }
html:lang(zh-CN) em { font-style: normal; font-weight: 600; }