@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-normal.woff2") format("woff2");
  font-style: normal; font-weight: 100 800; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-italic.woff2") format("woff2");
  font-style: italic; font-weight: 100 800; font-display: swap;
}

/* Themes: the colours of the Ghostty themes of the same name. */
:root, [data-theme="gruvbox-dark"] {
  --bg: #1d2021; --panel: #282828; --fg: #ebdbb2; --dim: #a89984; --line: #3c3836;
  --accent: #fe8019; --green: #b8bb26; --blue: #83a598; --red: #fb4934; --yellow: #fabd2f;
  --on-accent: #1d2021; color-scheme: dark;
}
[data-theme="gruvbox-light"] {
  --bg: #fbf1c7; --panel: #f2e5bc; --fg: #3c3836; --dim: #6f6259; --line: #d5c4a1;
  --accent: #af3a03; --green: #6c6a0c; --blue: #076678; --red: #9d0006; --yellow: #8f5e0b;
  --on-accent: #fbf1c7; color-scheme: light;
}
[data-theme="catppuccin-mocha"] {
  --bg: #181825; --panel: #1e1e2e; --fg: #cdd6f4; --dim: #a6adc8; --line: #313244;
  --accent: #cba6f7; --green: #a6e3a1; --blue: #89b4fa; --red: #f38ba8; --yellow: #f9e2af;
  --on-accent: #181825; color-scheme: dark;
}
[data-theme="catppuccin-latte"] {
  --bg: #eff1f5; --panel: #e6e9ef; --fg: #4c4f69; --dim: #666980; --line: #ccd0da;
  --accent: #8839ef; --green: #2f7d20; --blue: #1e66f5; --red: #d20f39; --yellow: #9a6208;
  --on-accent: #eff1f5; color-scheme: light;
}
[data-theme="tokyo-night"] {
  --bg: #16161e; --panel: #1a1b26; --fg: #c0caf5; --dim: #8990b8; --line: #292e42;
  --accent: #7aa2f7; --green: #9ece6a; --blue: #7dcfff; --red: #f7768e; --yellow: #e0af68;
  --on-accent: #16161e; color-scheme: dark;
}
[data-theme="nord"] {
  --bg: #272c36; --panel: #2e3440; --fg: #d8dee9; --dim: #a3adbf; --line: #3b4252;
  --accent: #88c0d0; --green: #a3be8c; --blue: #81a1c1; --red: #d08770; --yellow: #ebcb8b;
  --on-accent: #272c36; color-scheme: dark;
}
[data-theme="rose-pine"] {
  --bg: #191724; --panel: #1f1d2e; --fg: #e0def4; --dim: #9893b3; --line: #2a2740;
  --accent: #ebbcba; --green: #9ccfd8; --blue: #c4a7e7; --red: #eb6f92; --yellow: #f6c177;
  --on-accent: #191724; color-scheme: dark;
}
[data-theme="everforest-dark"] {
  --bg: #272e33; --panel: #2d353b; --fg: #d3c6aa; --dim: #9da9a0; --line: #3d484d;
  --accent: #a7c080; --green: #83c092; --blue: #7fbbb3; --red: #e67e80; --yellow: #dbbc7f;
  --on-accent: #272e33; color-scheme: dark;
}
[data-theme="solarized-light"] {
  --bg: #fdf6e3; --panel: #eee8d5; --fg: #475b62; --dim: #667a80; --line: #ddd6c1;
  --accent: #bd4311; --green: #5b6900; --blue: #1c6fab; --red: #c22a27; --yellow: #8a6800;
  --on-accent: #fdf6e3; color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 .9375rem/1.6 "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  transition: background-color .25s, color .25s;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
strong, b { font-weight: 700; color: var(--fg); }
code { color: var(--fg); }
kbd {
  display: inline-block; font: inherit; font-size: .86em; line-height: 1; padding: .3em .45em .34em;
  border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: var(--fg); white-space: nowrap;
}
.dim { color: var(--dim); }
.on { color: var(--accent); }
.prompt { color: var(--accent); user-select: none; }

/* One narrow column, as a manual page. */
.col { width: min(51rem, 100% - 2.5rem); margin-inline: auto; padding-top: clamp(1.5rem, 6vw, 5rem); }

.top {
  display: flex; align-items: center; gap: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 800; letter-spacing: .14em;
}
.brand img { border-radius: 4px; display: block; }
.top nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem 1.6rem; margin-left: auto; }
.top nav a, .req-head, .term-head, .row > h2, figcaption, footer, .chart figcaption {
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
}
.top nav a { text-decoration: none; color: var(--dim); }
.top nav a:hover { color: var(--fg); }
.top nav a.hot { color: var(--accent); }

h1 { margin: 2.1rem 0 2.4rem; font-size: clamp(1.5rem, 4.6vw, 2.05rem); line-height: 1.22; font-weight: 700; letter-spacing: -.01em; }
h1 em { font-style: italic; }

/* Fig. 1: the demo window */
.demo { margin: 0; }
.demo > figcaption { text-align: right; color: var(--dim); padding: .5rem 0 0; }
.win {
  border: 1px solid var(--line); overflow: hidden; background: var(--bg); font-size: .78rem; line-height: 1.4;
  transition: background-color .25s, border-color .25s;
}
.win-body { display: flex; height: 19.5rem; }
.side {
  flex: 0 0 15.5rem; background: var(--panel); overflow: auto; padding: .35rem 0;
  border-right: 1px solid var(--line); transition: background-color .25s, flex-basis .2s, padding .2s;
}
.win.no-side .side { flex-basis: 0; padding: 0; border: 0; overflow: hidden; }
.group-head {
  display: flex; align-items: center; gap: .45rem; width: 100%; padding: .4rem .7rem .2rem;
  background: none; border: 0; color: var(--dim); font: inherit; font-weight: 700; cursor: pointer; text-align: left;
}
.group-head::before { content: "▾"; width: .8em; }
.group-head.folded::before { content: "▸"; }
.group-head .swatch { width: .45rem; height: .45rem; }
.group-head .count { margin-left: auto; font-weight: 400; }
.tab {
  display: flex; align-items: baseline; gap: .45rem; width: 100%; padding: .2rem .7rem .2rem .95rem;
  background: none; border: 0; border-left: 2px solid transparent; color: var(--fg);
  font: inherit; cursor: pointer; text-align: left;
}
.tab .dot { flex: none; color: var(--dim); }
.tab .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab .jira { flex: none; margin-left: auto; font-size: .92em; }
.tab.asleep .title { color: var(--dim); }
.tab.on { background: color-mix(in srgb, var(--accent) 18%, transparent); border-left-color: var(--accent); }
.tab:hover:not(.on) { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.env { flex: none; font-size: .78em; font-weight: 700; padding: .05em .4em; color: var(--bg); background: var(--dim); }
.env.TEST { background: var(--yellow); }
.env.PROD { background: var(--red); }
.env.LOCAL { background: var(--green); }

.page { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.progress { position: absolute; inset: 0 auto auto 0; height: 2px; width: 0; background: var(--accent); }
.progress.run { animation: load .45s ease-out; }
@keyframes load { from { width: 0; opacity: 1; } 80% { width: 100%; opacity: 1; } to { width: 100%; opacity: 0; } }
/* The page inside the demo is set in a text face, so it reads as a web page and not as Lean. */
.page-inner { height: 100%; overflow: auto; padding: 1.2rem 1.4rem; font: .9rem/1.5 system-ui, -apple-system, "Helvetica Neue", sans-serif; }
.page-inner h4 { margin: 0 0 .25rem; font-size: 1.2rem; line-height: 1.25; }
.page-inner .where { margin: 0 0 .8rem; color: var(--dim); font: .75rem "JetBrains Mono", monospace; overflow-wrap: anywhere; }
.page-inner p { margin: 0 0 .7rem; max-width: 34em; }
.page-inner ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.page-inner .link { position: relative; color: var(--blue); text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; text-align: left; }
.pill { display: inline-block; font: 700 .68rem/1 "JetBrains Mono", monospace; padding: .35em .6em; color: var(--bg); margin-bottom: .7rem; }
.hint { position: absolute; left: -.3rem; top: -.5rem; z-index: 2; font: 700 .7rem/1 "JetBrains Mono", monospace; background: var(--yellow); color: var(--bg); padding: .2em .35em; }

.palette {
  position: absolute; left: 50%; top: 10%; transform: translateX(-50%); width: min(26rem, 92%);
  background: var(--panel); border: 1px solid var(--accent); overflow: hidden; box-shadow: 0 16px 30px -12px rgb(0 0 0 / .6);
}
.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg); font: inherit; padding: .55rem .7rem; outline: none; }
.palette ul { list-style: none; margin: 0; padding: .25rem 0; max-height: 11rem; overflow: auto; }
.palette li { display: flex; gap: .55rem; padding: .22rem .7rem; cursor: pointer; white-space: nowrap; }
.palette li .title { overflow: hidden; text-overflow: ellipsis; }
.palette li .proj { margin-left: auto; color: var(--dim); }
.palette li.on { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.palette .none { color: var(--dim); cursor: default; }

.status {
  display: flex; align-items: center; gap: .7rem; padding: .3rem .7rem; background: var(--panel);
  border-top: 1px solid var(--line); white-space: nowrap; min-height: 1.9rem; transition: background-color .25s;
}
.mode { font-weight: 700; color: var(--bg); background: var(--green); padding: 0 .5em; }
.mode.hint-mode, .mode.search-mode { background: var(--yellow); }
.status-url { color: var(--dim); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.status-msg { margin-left: auto; color: var(--accent); overflow: hidden; text-overflow: ellipsis; }
.status-keys { min-width: 2ch; text-align: right; font-weight: 700; }

/* Rows: label on the left, content on the right. */
.row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); padding-top: 1.9rem; }
.row > h2 { margin: 0; padding-top: .28rem; font-weight: 700; color: var(--accent); }
.row p { margin: 0 0 .75rem; color: color-mix(in srgb, var(--fg) 80%, var(--bg)); }
.row p:last-child { margin-bottom: 0; }
.row .note { margin-top: .9rem; font-size: .8125rem; color: var(--dim); }

.chips, .tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips button, .tags button {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; background: none;
  border: 1px solid var(--line); padding: .28rem .55rem .28rem .3rem; color: var(--dim); font: inherit; font-size: .8125rem;
}
.chips button kbd { border: 0; }
.chips button:hover, .tags button:hover { border-color: var(--accent); color: var(--fg); }
.chips button.pressed { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.chips .chip-theme { border: 1px dashed var(--accent); color: var(--accent); }
/* Each tag carries its own data-theme, so it is drawn in the colours of the theme it names. */
.tags button { padding: .28rem .55rem; text-transform: uppercase; font-size: .6875rem; letter-spacing: .12em; background: var(--bg); color: var(--fg); border-color: var(--line); }
.tags button::before { content: ""; width: .5rem; height: .5rem; background: var(--accent); }
.tags button[aria-pressed="true"] { border-color: var(--accent); }
.tags .more { border: 1px dashed var(--accent); color: var(--accent); padding: .28rem .55rem; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; }

/* Alpha request: a command you fill in. */
.req, .term { border: 1px solid var(--line); }
.req:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.req-head, .term-head { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: center; padding: .5rem .8rem; border-bottom: 1px solid var(--line); color: var(--dim); }
.req-head i, .term-head i, .links i { font-style: normal; color: color-mix(in srgb, var(--accent) 60%, var(--bg)); }
.req-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding: .95rem .8rem; }
.req-line label { font-weight: 700; white-space: nowrap; }
.req-line input {
  flex: 1 1 12rem; min-width: 0; background: none; border: 0; border-bottom: 1px dashed var(--dim); color: var(--fg);
  font: inherit; font-weight: 700; padding: .15rem 0; outline: none; caret-color: var(--accent);
}
.req-line input:focus { border-bottom: 1px solid var(--accent); }
.req input::placeholder { color: var(--dim); opacity: .65; font-weight: 400; }
.req-line button {
  cursor: pointer; background: var(--accent); color: var(--on-accent); border: 0; padding: .55rem .9rem;
  font: inherit; font-weight: 700; font-size: .8125rem; white-space: nowrap; transition: background-color .25s;
}
.req-line button:hover { filter: brightness(1.1); }
.req-line button[disabled] { opacity: .6; cursor: default; }
.req-opts { border-top: 1px solid var(--line); padding: .8rem .8rem .9rem; display: grid; gap: .8rem; font-size: .8125rem; }
.req fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.req legend, .req-note label { padding: 0; margin-bottom: .4rem; color: var(--fg); display: block; }
.req fieldset label { cursor: pointer; }
.req fieldset input { position: absolute; opacity: 0; pointer-events: none; }
.req fieldset label span { display: block; border: 1px solid var(--line); padding: .22rem .6rem; color: var(--dim); }
.req fieldset label:hover span { border-color: var(--accent); color: var(--fg); }
.req fieldset input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.req fieldset input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 2px; }
.req-note input { width: 100%; background: none; border: 0; border-bottom: 1px dashed var(--line); color: var(--fg); font: inherit; padding: .15rem 0; outline: none; }
.req-note input:focus { border-bottom: 1px solid var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.req-out { border-top: 1px solid var(--line); padding: .8rem; display: grid; gap: .15rem; }
.req-out[hidden] { display: none; }
.req-out .ok::before { content: "✓ "; color: var(--green); }
.req-out .bad { color: var(--red); }
.req-out .bad::before { content: "✗ "; }
.req-out .cmd { color: var(--dim); overflow-wrap: anywhere; }
.req.done .req-line, .req.done .req-opts { display: none; }
.req.done .req-out { border-top: 0; padding: 1.1rem .8rem; }
.req-out .big { font-size: 1.15rem; font-weight: 700; margin: .5rem 0 .3rem; }
.req-out .big b { color: var(--accent); }

.gets { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .875rem; }
.gets li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; }
.gets b::before { content: "+ "; color: var(--green); }
.gets span { color: var(--dim); }

/* Lists: term on the left, plain text on the right. */
.list { margin: 0; display: grid; gap: .5rem; }
.list > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; }
.list dt { display: flex; flex-wrap: wrap; gap: .25rem; color: var(--accent); font-weight: 700; }
.list dd { margin: 0; color: var(--dim); }
.list dd b { margin-right: .5em; }
.list.tight { margin-top: 1rem; }
.list.out s { color: var(--fg); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.list.out > div { grid-template-columns: 10rem 1fr; }

.list.plat dt { color: var(--fg); }
.list.plat dd b { color: var(--dim); }
.list.plat dd b.on { color: var(--green); }

.term { margin: 1rem 0 0; }
.term pre { margin: 0; padding: .95rem .8rem; overflow-x: auto; font: inherit; font-size: .8125rem; font-weight: 700; line-height: 1.7; }
.copy { margin-left: auto; cursor: pointer; background: none; border: 0; padding: 0; color: var(--dim); font: inherit; letter-spacing: inherit; text-transform: inherit; }
.copy:hover { color: var(--accent); }

.chart { margin: 0 0 1.3rem; }
.chart figcaption { color: var(--dim); margin-bottom: .55rem; }
.bars { display: grid; gap: .28rem; }
.bar { display: grid; grid-template-columns: 4.2rem 1fr; align-items: center; gap: .8rem; font-size: .8125rem; color: var(--dim); }
.bar .track { display: flex; align-items: center; gap: .6rem; }
.bar .fill { height: .8rem; background: color-mix(in srgb, var(--dim) 45%, var(--bg)); min-width: 2px; }
.bar.lean { color: var(--fg); font-weight: 700; }
.bar.lean .fill { background: var(--accent); }
.bar .num { white-space: nowrap; font-variant-numeric: tabular-nums; }

.coffee {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; margin-top: .25rem; padding: .7rem .9rem;
  border: 1px dashed var(--accent); text-decoration: none; font-weight: 700; font-size: .8125rem;
}
.coffee:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--fg); }
.coffee .cup { color: var(--accent); white-space: pre; }
.coffee .dim { font-weight: 400; }

.links { display: flex; flex-wrap: wrap; gap: .3rem .7rem; }

footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 3rem; padding: 1.1rem 0 3.5rem;
  border-top: 1px solid var(--line); color: var(--dim);
}
.linkish { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--accent); cursor: pointer; }

/* Documentation: navigation, text, "on this page". */
.col.wide { width: min(76rem, 100% - 2.5rem); padding-top: clamp(1.25rem, 3vw, 2.5rem); }
.top nav a[aria-current="page"] { color: var(--fg); }
.docs { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 12.5rem; gap: 3.5rem; align-items: start; padding-top: 2.2rem; }
.docs-nav, .docs-toc { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow: auto; font-size: .8125rem; }
.docs-nav h2, .docs-toc h2, .eyebrow { margin: 0 0 .5rem; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.docs-nav h2:not(:first-child) { margin-top: 1.4rem; }
.docs-nav ul, .docs-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.docs-nav a, .docs-toc a { display: block; padding: .22rem 0 .22rem .85rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--dim); text-decoration: none; }
.docs-nav a:hover, .docs-toc a:hover { color: var(--fg); }
.docs-nav a[aria-current="page"], .docs-toc a.on { color: var(--fg); border-left-color: var(--accent); }
.docs-nav a[aria-current="page"] { font-weight: 700; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.docs-toc a.sub { padding-left: 1.7rem; }
.docs-menu { display: none; }

.docs-body { min-width: 0; padding-bottom: 1rem; }
.docs-body h1 { margin: 0 0 .7rem; font-size: clamp(1.5rem, 4vw, 1.9rem); }
.docs-body .lead { margin: 0 0 2.2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 1rem; }
.docs-body h2 { margin: 2.6rem 0 .8rem; font-size: 1.15rem; line-height: 1.3; scroll-margin-top: 1.5rem; }
.docs-body h3 { margin: 1.8rem 0 .6rem; font-size: .9375rem; color: var(--fg); scroll-margin-top: 1.5rem; }
.docs-body p, .docs-body li { color: color-mix(in srgb, var(--fg) 82%, var(--bg)); }
.docs-body p { margin: 0 0 .85rem; }
.docs-body ul, .docs-body ol { margin: 0 0 .85rem; padding-left: 1.5rem; display: grid; gap: .35rem; }
.docs-body li::marker { color: var(--accent); }
.docs-body code { font-size: .92em; background: var(--panel); border: 1px solid var(--line); padding: .05em .35em; border-radius: 3px; overflow-wrap: anywhere; }
.docs-body .anchor { color: var(--line); text-decoration: none; font-weight: 400; }
.docs-body h2:hover .anchor, .docs-body h3:hover .anchor, .docs-body .anchor:focus-visible { color: var(--accent); }
pre.code {
  position: relative; margin: 0 0 1rem; padding: .9rem 4.5rem .9rem .9rem; border: 1px solid var(--line); background: var(--panel);
  overflow-x: auto; font: inherit; font-size: .8125rem; line-height: 1.65; color: var(--fg);
}
pre.code .copy { position: absolute; top: .6rem; right: .7rem; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; }
.tbl { overflow-x: auto; margin: 0 0 1rem; border: 1px solid var(--line); }
.tbl table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.tbl th { text-align: left; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 700; background: var(--panel); }
.tbl th, .tbl td { padding: .5rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td { color: color-mix(in srgb, var(--fg) 82%, var(--bg)); }
.tbl td:first-child { white-space: nowrap; color: var(--fg); }
.tbl td:first-child code { white-space: nowrap; }
.tbl table.keys td:first-child { white-space: normal; min-width: 11rem; }
.docs-next { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.docs-next a { display: grid; gap: .15rem; text-decoration: none; border: 1px solid var(--line); padding: .6rem .9rem; min-width: 11rem; }
.docs-next a:hover { border-color: var(--accent); color: var(--fg); }
.docs-next a.next { text-align: right; }
.docs-next .dim { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 68rem) {
  .docs { grid-template-columns: 12.5rem minmax(0, 1fr); gap: 2.5rem; }
  .docs-toc { display: none; }
}
@media (max-width: 48rem) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 1.2rem; }
  .docs-nav { position: static; max-height: none; border: 1px solid var(--line); }
  .docs-menu { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .6rem .8rem; color: var(--accent); cursor: pointer; font: inherit; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; }
  .docs-menu::after { content: " +"; }
  .docs-nav.open .docs-menu::after { content: " -"; }
  .docs-lists { display: none; padding: .2rem .8rem .9rem; }
  .docs-nav.open .docs-lists { display: block; }
  .tbl td:first-child, .tbl td:first-child code { white-space: normal; }
  .docs-next a { min-width: 0; flex: 1; }
}

/* Screenshots */
.shot { margin: 0 0 1.4rem; }
.shot a { display: block; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.shot figcaption { text-align: right; color: var(--dim); padding: .45rem 0 0; }
.shot.narrow { max-width: 26rem; }
.shots3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.shots3 .shot figcaption { text-align: left; }
@media (max-width: 48rem) { .shots3 { grid-template-columns: minmax(0, 1fr); } }

.quiet-link { color: inherit; text-decoration: none; margin-left: 1.2rem; opacity: .75; }
.quiet-link:hover { opacity: 1; }

/* Privacy page */
.doc { padding-bottom: 1rem; }
.doc h2 { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 2rem 0 .6rem; }
.doc p { margin: 0 0 .75rem; max-width: 44rem; color: color-mix(in srgb, var(--fg) 80%, var(--bg)); }

@media (max-width: 44rem) {
  .row { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .side { flex-basis: 10.5rem; }
  .tab .jira, .status-env, .status-keys { display: none; }
  .top nav a:not(.hot) { display: none; }
  .gets li, .list > div, .list.out > div { grid-template-columns: 1fr; gap: 0; }
  .list { gap: .8rem; }
  .req-line button { width: 100%; }
}
@media (max-width: 26rem) {
  .side { flex-basis: 8.5rem; }
  .tab .env { display: none; }
  .page-inner { padding: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}