:root {
  color-scheme: light dark;
  --bg: #f7fafa; --surface: #ffffff; --text: #17262e; --muted: #4a5c66;
  --head: #1d4a52; --link: #145a66; --link-hover: #0c3a42; --rule: #c9d8da;
  --code-bg: #e8efef; --accent: #c4502f; --note-bg: #e6f2f0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11181b; --surface: #182226; --text: #e2eaec; --muted: #a8b8bd;
    --head: #9fd6ce; --link: #7fd0c4; --link-hover: #b5ebe3; --rule: #2d3d42;
    --code-bg: #1f2c31; --accent: #ef8f72; --note-bg: #1a2c2e;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
header, footer { max-width: 1240px; margin: auto; padding: 18px 24px; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; border-bottom: 1px solid var(--rule); }
.tagline { color: var(--muted); font-size: .95rem; }
.shell { max-width: 1240px; margin: auto; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; padding: 0 24px; }
main { min-width: 0; padding: 8px 0 32px; }
.side { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding: 18px 0; font-size: .95rem; }
.side ul, .side-mobile ul { list-style: none; margin: 0 0 10px; padding: 0; }
.side li, .side-mobile li { margin: 2px 0; }
.side a, .side-mobile a { display: block; padding: 3px 10px; border-left: 3px solid transparent; text-decoration: none; }
.side a[aria-current=page], .side-mobile a[aria-current=page] { border-left-color: var(--accent); font-weight: 700; color: var(--head); }
.group { margin: 14px 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.side-mobile { display: none; }
.brand { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 1.35rem; text-decoration: none; color: var(--head); }
.brand img { width: 48px; height: 48px; }
h1, h2, h3 { line-height: 1.25; color: var(--head); }
h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
p, li { max-width: 80ch; }
pre { overflow-x: auto; padding: 16px; background: var(--code-bg); border-radius: 8px; }
code { font-size: .9em; }
table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; font-size: .93rem; }
td, th { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
blockquote { margin: 1em 0; padding: 10px 18px; border-left: 4px solid var(--head); background: var(--note-bg); }
details { margin: .8em 0; }
summary { cursor: pointer; }
img { max-width: 100%; height: auto; }
footer { border-top: 1px solid var(--rule); font-size: .9rem; color: var(--muted); }
.skip { position: absolute; top: -100px; left: 12px; padding: 8px; background: var(--surface); }
.skip:focus { top: 8px; }
.hero { padding: 8px 0 4px; }
.eyebrow { color: var(--muted); font-size: .95rem; letter-spacing: .02em; margin: 0; }
.lead { font-size: 1.15rem; }
.banner { display: block; width: 100%; max-width: 640px; border-radius: 18px; margin: 8px 0 12px; }
.boundary { border-left: 5px solid var(--accent); padding: 12px 20px; background: var(--note-bg); border-radius: 0 8px 8px 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button { display: inline-block; padding: 9px 16px; border-radius: 8px; background: var(--head); color: var(--bg); text-decoration: none; font-weight: 600; }
.button:hover { color: var(--bg); opacity: .9; }
.button.secondary { background: transparent; color: var(--link); border: 2px solid var(--link); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 1em 0; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; }
.card h4 { margin: 0 0 6px; font-size: 1.05rem; }
.card p { margin: 0; font-size: .95rem; }
@media (max-width: 860px) {
  .shell { display: block; padding: 0 16px; }
  .side { display: none; }
  .side-mobile { display: block; margin: 12px 0; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
  .side-mobile summary { font-weight: 700; }
  header, footer { padding: 14px 16px; }
  td, th { padding: 7px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
/* Typeset TeX statements (see math.js) */
.tex-statement { margin: .6em 0 .2em; padding: .6em .9em; border-left: 3px solid var(--head); overflow-x: auto; line-height: 1.6; }
details.tex-source { margin: 0 0 1em; font-size: .85em; }
details.tex-source > summary { opacity: .8; }
mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; max-width: 100%; }

/* Narrow screens. Long inline code (declaration names, receipt files) wraps instead of widening the page. */
:not(pre) > code { overflow-wrap: anywhere; }
/* Inside a table the code keeps its words whole: the table scrolls horizontally instead. */
td code, th code { overflow-wrap: normal; }
/* MathJax 3 does not break formulas. math.js marks a formula wider than its column with .mjx-wide; only
   that formula scrolls inside its own box. The vertical padding keeps superscripts and fraction bars clear
   of the box edge, so nothing is clipped. Formulas that fit are left as MathJax renders them. */
mjx-container.mjx-wide { position: relative; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 0.4em 0; }
mjx-container.mjx-wide:not([display="true"]) { display: inline-block; vertical-align: middle; }
/* MathJax's hidden screen-reader copy is absolutely positioned and laid out unwrapped; capped, it
   no longer widens the page past an inline formula near the end of a line. Screen readers read its
   text whatever its box width. */
mjx-assistive-mml { max-width: 100%; }