/* the manual: same glass, one long readable column beside a fixed contents window */
body { overflow-y: auto; }
.docs { max-width: 1240px; margin: 0 auto; }
.doc-top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.doc-top .home img { display: block; width: 240px; height: auto; }
.doc-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; align-items: start; }
.toc { position: sticky; top: 14px; }
.toc h2, .doc h2 { font-size: 16px; font-weight: normal; color: var(--yellow); margin-bottom: 8px; }
.toc ol { display: grid; gap: 2px; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { display: block; color: var(--ink); text-decoration: none; padding: 2px 6px; }
.toc a::before { content: counter(t) ". "; color: var(--cyan); }
.toc a:hover, .toc a:focus-visible { background: var(--ink); color: #000; text-shadow: none; outline: none; }
.toc .back { margin-top: 12px; }
.doc { padding: 6px 14px 20px; }
.doc section { padding: 14px 0 18px; border-bottom: 2px dotted #2a3a40; scroll-margin-top: 14px; max-width: 86ch; }
.doc section:last-child { border-bottom: 0; }
.doc h2 { font-size: 32px; line-height: 36px; color: var(--ink); margin-bottom: 12px; }
.doc p, .doc li, .doc dd { line-height: 22px; margin-bottom: 10px; }
.doc b { font-weight: normal; }
.doc i { font-style: normal; color: var(--yellow); }
.doc a { color: var(--cyan); }
.doc code { font: inherit; color: var(--green); overflow-wrap: anywhere; }
.steps { display: grid; gap: 4px; }
.plain li { padding-left: 2ch; text-indent: -2ch; }
.plain li::before { content: "> "; color: var(--cyan); }
.formula { margin: 0 0 12px 2ch; }
.formula li { display: grid; grid-template-columns: 8ch 1fr; }
.doc table { width: 100%; border-collapse: collapse; margin: 4px 0 12px; }
.doc th { text-align: left; font-weight: normal; color: var(--cyan); border-bottom: 2px solid var(--ink); padding: 4px 8px 4px 0; }
.doc td { vertical-align: top; padding: 5px 12px 5px 0; border-bottom: 1px solid #1f2d33; }
.doc td:first-child { color: var(--yellow); white-space: nowrap; }
.addr td:last-child { overflow-wrap: anywhere; }
.doc dt { color: var(--yellow); margin-top: 10px; }
.doc dd { margin: 4px 0 0 2ch; }
@media (max-width: 860px) {
  .doc-grid { grid-template-columns: 1fr; }
  .toc { position: static; }
  .doc h2 { font-size: 16px; line-height: 22px; }
  .doc td:first-child { white-space: normal; }
}
.toc a.key, .toc a.key:hover { color: #000; display: inline-block; }
.toc a.key::before { content: none; }