/* The site's text pages (the manual, privacy, health and safety): site.css's brand, a column made for reading. */
.doc-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 var(--gutter); background: rgba(9, 6, 20, .84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.doc-nav nav { display: flex; gap: 24px; }
.doc-nav nav a { font: 600 13px var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink2); padding: 6px 0; }
.doc-nav nav a:hover, .doc-nav nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--magenta); }
.doc-hero { padding: clamp(56px, 8vw, 100px) 0 22px; background: radial-gradient(55% 90% at 15% 0%, rgba(255, 42, 133, .13), transparent), radial-gradient(40% 70% at 90% 0%, rgba(0, 240, 255, .08), transparent); }
.doc-hero h1 { margin: 0; font: italic 800 clamp(40px, 6.2vw, 80px) / .95 var(--display); font-stretch: 112%; letter-spacing: -.01em; text-transform: uppercase; }
.doc-hero .stripes { width: min(360px, 70%); }
.doc-hero p { max-width: 640px; margin: 20px 0 0; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink2); }
.doc-meta { margin-top: 16px; font: 500 12.5px var(--mono); color: var(--mute); }
.doc { display: grid; grid-template-columns: 210px minmax(0, 780px); gap: 56px; padding: 36px 0 100px; }
.doc-toc { position: sticky; top: 92px; align-self: start; display: grid; gap: 4px; font: 500 13.5px var(--display); }
.doc-toc a { padding: 5px 0 5px 12px; border-left: 2px solid var(--line); color: var(--mute); text-decoration: none; transition: color .2s, border-color .2s; }
.doc-toc a:hover { color: #fff; border-color: var(--cyan); }
.doc-body { font-size: 17px; line-height: 1.7; color: var(--ink2); }
.doc-body h2 { margin: 60px 0 14px; font: italic 800 clamp(24px, 2.6vw, 30px) / 1.1 var(--display); font-stretch: 112%; text-transform: uppercase; color: #fff; scroll-margin-top: 92px; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { margin: 30px 0 8px; font: 700 18px var(--display); color: #fff; }
.doc-body p, .doc-body ul, .doc-body ol { margin: 0 0 16px; }
.doc-body ul, .doc-body ol { padding-left: 1.3em; }
.doc-body li { margin: 6px 0; }
.doc-body li::marker { color: var(--magenta); }
.doc-body a { color: var(--cyan); }
.doc-body strong { color: #fff; }
.doc-body code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); font: 500 14px var(--mono); color: #fff; word-break: break-all; }
.table-wrap { margin: 8px 0 24px; overflow-x: auto; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc-body th, .doc-body td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-body th { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.doc-body td:first-child { font-weight: 600; color: #fff; }
kbd { display: inline-block; min-width: 1.9em; margin: 1px 1px; padding: 0 7px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 6px; background: rgba(255, 255, 255, .04); font: 600 12.5px / 1.7 var(--mono); color: #fff; text-align: center; }
.callout { margin: 18px 0 26px; padding: 18px 20px; border-left: 3px solid var(--amber); border-radius: 0 14px 14px 0; background: rgba(255, 184, 0, .07); color: var(--ink); }
.callout--warn { border-color: var(--magenta); background: rgba(255, 42, 133, .08); }
.callout p:last-child { margin-bottom: 0; }
.doc-foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 8px; padding: 0; list-style: none; }
.doc-foot-links a { color: var(--ink2); }
@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; gap: 26px; }
  .doc-toc { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
  .doc-toc a { padding: 6px 12px; border: 1px solid var(--line2); border-radius: 999px; }
  .doc-nav nav { display: none; }
}