:root {
  --bg: #f6f5f1;
  --bg2: #efeee9;
  --line: #d8d5cc;
  --fg: #17191b;
  --dim: #4d565b;
  --accent: #0f8a4b;
  --bad: #b73a28;
  --sel: #e8e6de;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0c0e0f;
  --bg2: #121517;
  --line: #2a3134;
  --fg: #dde3e5;
  --dim: #9aa5aa;
  --accent: #3ddc84;
  --bad: #e5604d;
  --sel: #161b1d;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0e0f;
    --bg2: #121517;
    --line: #2a3134;
    --fg: #dde3e5;
    --dim: #9aa5aa;
    --accent: #3ddc84;
    --bad: #e5604d;
    --sel: #161b1d;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0 auto;
  max-width: 66rem;
  padding: 3rem 2rem 5rem;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.7 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: grid;
  grid-template-columns: 13rem minmax(0, 44rem);
  column-gap: 4rem;
  row-gap: 0;
}

::selection { background: var(--sel); }

a { color: var(--fg); text-decoration-color: var(--dim); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

code, pre, kbd, .m {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--bg2);
  color: var(--fg);
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- rail ---- */

.rail {
  grid-row: 1 / span 2;
  position: sticky;
  top: 3rem;
  align-self: start;
  max-height: calc(100vh - 6rem);
  overflow: auto;
}

.mark {
  margin: 0 0 0.5rem;
  font: 700 20px/1 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mark svg { color: var(--accent); width: 16px; height: 16px; }

.sub {
  margin: 0 0 2.2rem;
  font: 14px/1.6 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color: var(--dim);
}

.rail nav {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
}

.rail nav a {
  display: flex;
  gap: 0.7rem;
  padding: 0.4rem 0 0.4rem 1rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--dim);
  text-decoration: none;
}
.rail nav a span {
  color: var(--accent);
  font: 600 12px/1.8 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
.rail nav a:hover { color: var(--fg); border-left-color: var(--accent); }

#theme {
  margin-top: 2.2rem;
  background: none;
  border: 1px solid var(--line);
  color: var(--dim);
  font: 14px/1 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}
#theme:hover { color: var(--fg); border-color: var(--dim); }

/* ---- content ---- */

main { grid-column: 2; }

section {
  border-top: 1px solid var(--line);
  padding: 2.2rem 0 3.4rem;
  scroll-margin-top: 2rem;
}
section:first-child { border-top: 0; padding-top: 0; }

h2 {
  margin: 0 0 1.6rem;
  font: 700 26px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
  color: var(--fg);
}
h2 span {
  color: var(--accent);
  margin-right: 0.7rem;
  font: 600 17px/1.2 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

h3 {
  margin: 2rem 0 0.4rem;
  font: 700 18px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

p { margin: 0 0 1.2rem; max-width: 66ch; }

.footnote {
  font-size: 15px;
  color: var(--dim);
  max-width: 62ch;
}
.footnote code { font-size: 13.5px; }

kbd {
  font-size: 13px;
  border: 1px solid var(--line);
  background: var(--bg2);
  padding: 0.1em 0.45em;
  color: var(--fg);
}

/* ---- tables ---- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0 1.2rem;
}

th {
  text-align: left;
  font: 600 13px/1.5 system-ui, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0.4rem 1rem 0.4rem 0;
  border-bottom: 1px solid var(--line);
}

td {
  padding: 0.8rem 1rem 0.8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.6;
  vertical-align: top;
}

td code {
  font-size: 13px;
  color: var(--dim);
}

td.glyph { width: 2rem; padding-top: 1rem; }
td.glyph svg { display: block; }

table.keys td:first-child { white-space: nowrap; }

/* ---- terminal blocks ---- */

.term {
  position: relative;
  margin: 1.4rem 0;
  background: var(--bg2);
  border: 1px solid var(--line);
}

.term pre {
  margin: 0;
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.65;
}

.term .bad { color: var(--bad); }
.term .cmt { color: var(--dim); }

button.copy {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--dim);
  font: 13px/1 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms;
}
.term:hover button.copy, button.copy:focus-visible { opacity: 1; }
button.copy:hover { color: var(--fg); border-color: var(--dim); }

/* ---- diagram ---- */

.diagram { margin: 1.8rem 0 0.8rem; }
.diagram svg { width: 100%; max-width: 700px; height: auto; display: block; }
.diagram .box { fill: none; stroke: var(--line); stroke-width: 1.4; }
.diagram .box.hot { stroke: var(--accent); }
.diagram .arrow { fill: none; stroke: var(--dim); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.diagram .lbl { font: 600 14px "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; fill: var(--fg); }
.diagram .lbl.dim { fill: var(--dim); font-weight: 400; font-size: 13px; }
.diagram .lbl.strong { font-weight: 700; fill: var(--accent); font-size: 16px; }
.diagram .note { font: italic 13px system-ui, sans-serif; fill: var(--dim); }
.diagram figcaption { margin-top: 0.8rem; font-size: 15px; color: var(--dim); max-width: 62ch; }

/* ---- screenshot ---- */

.shot { margin: 1.6rem 0 0.8rem; }
.shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
}
.shot figcaption { margin-top: 0.8rem; font-size: 15px; color: var(--dim); }

/* ---- test list ---- */

ol.tests {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  columns: 2;
  column-gap: 3rem;
}

ol.tests li {
  break-inside: avoid;
  font: 14px/1.6 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}
ol.tests li span { color: var(--accent); margin-right: 0.55rem; font-size: 12.5px; }

/* ---- limits ---- */

#limits ul { margin: 0; padding: 0; list-style: none; }
#limits li {
  padding: 0.9rem 0 0.9rem 1.4rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.65;
}
#limits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.7rem;
  width: 7px;
  height: 2px;
  background: var(--dim);
}

/* ---- footer ---- */

footer {
  grid-column: 2;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}
footer p {
  margin: 0;
  font: 14px/1.7 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color: var(--dim);
  max-width: 62ch;
}

/* ---- small screens ---- */

@media (max-width: 50rem) {
  body { display: block; padding: 1.6rem 1.4rem 3.5rem; }
  .rail { position: static; max-height: none; margin-bottom: 2.5rem; }
  .sub br { display: none; }
  .rail nav { flex-direction: row; flex-wrap: wrap; gap: 0.2rem 1.2rem; border-left: 0; }
  .rail nav a { border-left: 0; margin-left: 0; padding: 0.3rem 0; }
  main, footer { width: 100%; }
  ol.tests { columns: 1; }
  section { scroll-margin-top: 1rem; }
  h2 { font-size: 23px; }
}

/* ---- motion ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  button.copy { transition: none; }
}