:root {
  color-scheme: light dark;
  --bg: #f7f7f6;
  --raise: #efeeec;
  --text: #1d1c1a;
  --muted: #5f5b56;
  --line: #dddad5;
  --plate: #161514;
  --plate-text: #ece4da;
  --plate-muted: #a39d96;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e0f;
    --raise: #18181a;
    --text: #ece4da;
    --muted: #a39d96;
    --line: #2a2a2d;
    --plate: #18181a;
  }
}
:root[data-theme="dark"] {
  --bg: #0e0e0f;
  --raise: #18181a;
  --text: #ece4da;
  --muted: #a39d96;
  --line: #2a2a2d;
  --plate: #18181a;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--selection); color: var(--text); }
code, pre { font-family: var(--mono); font-size: 0.9em; }

.skip-link { position: absolute; left: var(--gutter); top: -3rem; padding: 0.5rem 0.75rem; background: var(--plate); color: var(--plate-text); z-index: 2; }
.skip-link:focus { top: 0.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* page-frame:begin — byte-identical in sites/holmhq.com/site.css,
   sites/holmhq.com/docs/styles.css and internal/publicpage/page.css; go test
   ./sites enforces it. Every page shares this column, header and footer, so
   nothing shifts between pages. */
:root { --measure: 38rem; --gutter: 1rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.6 var(--sans);
  overflow-wrap: break-word;
}
.wrap { width: 100%; max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Header: brand on the left; nav and settings on the right, nav below on
   phones. With script, prefs.css folds the nav into More (and one Menu on
   phones) on the same line. The settings slot has a fixed size, so every
   header is the same. */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; padding-block: 0.75rem; }
.brand { display: inline-flex; color: var(--text); padding-block: 0.5rem; margin-inline-end: auto; }
.brand-mark { display: block; width: 3.75rem; height: auto; }
.site-nav { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.site-nav a { color: var(--muted); text-decoration: none; padding-block: 0.5rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 1.5rem 2.5rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.site-footer a { color: var(--muted); padding-block: 0.375rem; display: inline-block; }
.site-footer a:hover { color: var(--text); }

@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
  body { font-size: 1.125rem; }
  .site-nav { order: 0; flex-basis: auto; }
  .site-header .settings { margin-inline-start: 0.5rem; }
}
/* page-frame:end */

/* Hero: the wordmark is the one loud thing on the page. */
.hero { padding-block: 3rem 2.5rem; }
.wordmark { display: block; width: min(100%, 26rem); height: auto; margin-block-end: 2rem; }
h1 { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance; }
.lede { margin: 0 0 2rem; color: var(--muted); text-wrap: pretty; }
.lede strong { color: var(--text); font-weight: 600; }

/* Four plain ideas, each with a Lucide icon in the accent colour. */
.facts { list-style: none; margin: 0 0 2.25rem; padding: 0; display: grid; gap: 1.25rem 2rem; }
.facts li { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: 0.875rem; align-content: start; }
.icon { grid-row: span 2; width: 1.5rem; height: 1.5rem; margin-block-start: 0.0625rem; color: var(--mark); }
.fact-title { font-weight: 600; line-height: 1.4; }
.fact-text { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }
@media (min-width: 34rem) {
  .facts { grid-template-columns: 1fr 1fr; }
}
.star {
  margin-inline-start: 0.125rem; padding: 0 0.25rem; border: 0; border-radius: 0.25rem;
  background: none; color: var(--accent); font: inherit; line-height: 1; vertical-align: super; cursor: pointer;
}
.star:hover { background: var(--accent-soft); }
/* The note opens in the top layer; site.js places it under its star. */
.note {
  grid-column: 2; position: fixed; inset: auto; margin: 0; width: min(21rem, calc(100vw - 2rem));
  padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: 0.5rem;
  background: var(--bg); color: var(--text); font-size: 0.9375rem; line-height: 1.5;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.12);
}
.note p { margin: 0 0 0.5rem; }
.note p:last-child { margin-block-end: 0; }

.command-label { margin: 1.75rem 0 0.625rem; color: var(--muted); font-size: 0.9375rem; }
.command { background: var(--plate); color: var(--plate-text); border-radius: 0.5rem; padding: 1rem; display: grid; gap: 0.75rem; }
.command-line { margin: 0; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; }
.command-line code { font-size: inherit; }
.prompt { color: var(--plate-accent); user-select: none; margin-inline-end: 0.5ch; }
.nowrap { white-space: nowrap; }
.copy {
  justify-self: start; min-width: 5.5rem; height: 2.5rem; padding-inline: 1rem;
  border: 1px solid #3a3836; border-radius: 0.375rem;
  background: transparent; color: var(--plate-accent); font: 600 0.875rem var(--sans); cursor: pointer;
}
.copy:hover { background: #24221f; }
.install-note { margin: 0.875rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.install-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.5rem 0 0; font-size: 0.9375rem; }
.install-links a { padding-block: 0.375rem; display: inline-block; }
.release-line { margin: 1.5rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.missing-path { margin: 0 0 1rem; color: var(--muted); overflow-wrap: anywhere; }
.missing-path:empty { display: none; }

/* Sections */
.section { border-top: 1px solid var(--line); padding-block: 2.5rem; }
h2 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 1rem; }
.section p { margin: 0 0 1rem; }

.paths { list-style: none; margin: 0; padding: 0; }
.paths li + li { border-top: 1px solid var(--line); }
.paths a { display: block; padding-block: 0.875rem; text-decoration: none; color: var(--text); }
.paths a:hover .path-title { text-decoration: underline; text-decoration-thickness: 1px; }
.path-title { display: block; font-weight: 600; color: var(--accent); }
.path-text { display: block; color: var(--muted); font-size: 0.9375rem; }

.flow { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.5rem; justify-items: start; }
.flow li { font-family: var(--mono); font-size: 0.875rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 0.375rem; background: var(--raise); }
.flow li.node { border-color: var(--mark); }
.flow .down { border: 0; background: none; padding: 0 0 0 1rem; color: var(--muted); }

@media (min-width: 48rem) {
  .hero { padding-block: 5rem 3.5rem; }
  h1 { font-size: 3rem; }
  h2 { font-size: 1.5rem; }
  .section { padding-block: 3.5rem; }
  .flow { grid-auto-flow: column; align-items: center; justify-content: start; }
  .flow .down { padding: 0; transform: rotate(-90deg); }
  .command { grid-template-columns: 1fr auto; align-items: center; padding-block: 0.75rem; }
  .command-line { font-size: 0.875rem; }
}
@media (forced-colors: active) {
  .wordmark path { fill: CanvasText; }
  .icon { color: CanvasText; }
}

/* Long-form reading: blog posts. */
.post-header { padding-block: 2.5rem 1.5rem; }
.post-header h1 { font-size: 2rem; }
.post-meta { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.prose { padding-block-end: 3rem; }
.prose > * { margin-block: 0 1.25rem; }
.prose h2 { font-size: 1.375rem; margin-block: 2.25rem 0.75rem; }
.prose h3 { font-size: 1.125rem; margin-block: 1.75rem 0.5rem; }
.prose ul, .prose ol { padding-inline-start: 1.25rem; }
.prose li + li { margin-block-start: 0.375rem; }
.prose li::marker { color: var(--mark); }
.prose blockquote { margin-inline: 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--mark); color: var(--muted); }
.prose :not(pre) > code { background: var(--raise); border-radius: 0.25rem; padding: 0.1em 0.3em; }
.prose pre {
  background: var(--plate); color: var(--plate-text); border-radius: 0.5rem;
  padding: 1rem; overflow-x: auto; line-height: 1.5; font-size: 0.8125rem;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2rem; }

/* A post's figure: a Hairline line drawing (figures/host.js) in the page's
   palette, so it follows the theme and the accent. It needs script. */
.post-figure { display: none; margin-block: 0 2rem; }
.js .post-figure { display: block; }
.figure-stage {
  position: relative; max-width: 32rem; aspect-ratio: 5 / 4; margin-inline: auto;
  --hairline-plate: var(--bg);
  --hairline-hi: var(--mark);
  --hairline-edge: light-dark(#a8a39c, #67625c);
  --hairline-mid: light-dark(#c9c5be, #46433f);
  --hairline-lo: light-dark(#e2dfda, #2c2a28);
}
.figure-read {
  position: absolute; z-index: 1; inset-block-start: 0.25rem; inset-inline-end: 0;
  font: 0.75rem/1 var(--mono); color: var(--muted); pointer-events: none;
}
.post-figure figcaption { margin-block-start: 0.5rem; color: var(--muted); font-size: 0.9375rem; text-align: center; }

/* Blog index */
.post-list { list-style: none; margin: 0; padding: 0 0 3rem; }
.post-list li { border-top: 1px solid var(--line); padding-block: 1.25rem; }
.post-list a { font-size: 1.25rem; font-weight: 650; text-decoration: none; }
.post-list a:hover { text-decoration: underline; }
.post-list p { margin: 0.375rem 0 0; color: var(--muted); }
.post-list time { display: block; margin-block-end: 0.25rem; color: var(--muted); font-size: 0.875rem; }
.feed-link { color: var(--muted); font-size: 0.9375rem; }

@media (min-width: 48rem) {
  .post-header { padding-block: 4rem 2rem; }
  .post-header h1 { font-size: 2.75rem; }
  .prose pre { font-size: 0.875rem; }
}

/* FAQ: generated by scripts/sites/holmhq-faq/. Search (the shared bar above),
   the open/close toggle and the stuck rule come from /faq/faq.js; without it
   every answer is still a working <details>. */
/* search-bar:begin — byte-identical in sites/holmhq.com/site.css and
   sites/holmhq.com/docs/styles.css; go test ./sites enforces it. Pages with
   search (FAQ, docs) open with this bar straight under the header, so the
   field sits in the same place on each. It sticks once the header scrolls
   away; the page script sets data-stuck to draw the rule beneath it. */
.search-bar { position: sticky; inset-block-start: 0; z-index: 20; background: var(--bg); }
.search-bar[hidden] { display: none; }
.search-bar[data-stuck] { box-shadow: 0 1px 0 var(--line); }
.search-bar > .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; padding-block: 0.75rem; }
.search-field { position: relative; flex: 1; min-width: 0; }
.search-input {
  display: block; width: 100%; height: 3rem; margin: 0; padding: 0 2.75rem;
  border: 1px solid var(--line); border-radius: 0.625rem;
  background: var(--raise); color: var(--text);
  font: 1rem/1 var(--sans); text-align: start;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none;
}
button.search-input { color: var(--muted); cursor: pointer; }
.search-input::placeholder { color: var(--muted); opacity: 1; }
.search-input:hover { border-color: var(--mark); }
.search-input:focus-visible { outline: none; border-color: var(--mark); background: var(--bg); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-icon {
  position: absolute; inset-inline-start: 0.875rem; top: 50%; width: 1.25rem; height: 1.25rem; margin-top: -0.625rem;
  fill: none; stroke: var(--muted); stroke-width: 1.75; stroke-linecap: round; pointer-events: none;
}
.search-key {
  position: absolute; inset-inline-end: 0.75rem; top: 50%; transform: translateY(-50%);
  min-width: 1.5rem; padding: 0.125rem 0.375rem; border: 1px solid var(--line); border-radius: 0.25rem;
  background: var(--bg); color: var(--muted); font: 0.75rem/1.2 var(--mono); text-align: center; pointer-events: none;
}
.search-input:focus ~ .search-key, input.search-input:not(:placeholder-shown) ~ .search-key { display: none; }
@media (hover: none) { .search-key { display: none; } }
/* search-bar:end */

.faq { padding-block-end: 3rem; --stick: 6.75rem; }
.faq > .post-header { padding-block-start: 2.25rem; }
.faq-clear {
  position: absolute; inset-inline-end: 0.375rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.faq-clear[hidden] { display: none; }
.faq-clear:hover { background: var(--raise); color: var(--text); }
.faq-clear svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.faq-bar { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.25rem; margin-block-end: -0.5rem; }
.faq-status { margin: 0; color: var(--muted); font-size: 0.875rem; }
.faq-toggle {
  flex: none; padding: 0.5rem 0; border: 0; background: none; color: var(--accent);
  font: 600 0.875rem var(--sans); cursor: pointer;
}
.faq-toggle:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.faq-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.75rem 0.5rem; }
.faq-topics a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0.25rem 0.875rem;
  border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: 0.875rem; text-decoration: none;
}
.faq-topics a:hover { border-color: var(--mark); }
.faq-topics a span { color: var(--muted); font: 0.75rem var(--mono); }
.faq-topics a[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.faq-topics a[aria-disabled="true"]:hover { border-color: var(--line); }

.faq-topic { padding-block-start: 2.25rem; scroll-margin-top: var(--stick); }
.faq-topic h2 { margin-block-end: 0.5rem; }
.faq-item { border-top: 1px solid var(--line); scroll-margin-top: var(--stick); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item[hidden] { display: none; }
.faq-item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-block: 0.875rem; cursor: pointer; list-style: none; font-weight: 600; line-height: 1.45;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover .faq-q { color: var(--accent); }
/* A plus that folds into a minus, in the mark's square-cut spirit. */
.faq-icon { position: relative; flex: none; width: 0.875rem; height: 0.875rem; margin-block-start: 0.375em; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--muted); border-radius: 1px; }
.faq-icon::before { width: 100%; height: 2px; }
.faq-icon::after { width: 2px; height: 100%; }
.faq-item > summary:hover .faq-icon::before, .faq-item > summary:hover .faq-icon::after,
.faq-item[open] .faq-icon::before { background: var(--mark); }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
@media (prefers-reduced-motion: no-preference) {
  .faq-icon::after { transition: transform 160ms ease-out; }
}
.faq-a.prose { padding-block-end: 0; }
.faq-a.prose > * { margin-block: 0 0.875rem; }
.faq-a.prose pre { font-size: 0.8125rem; }
.faq-link { margin: 0; padding-block-end: 1rem; font-size: 0.875rem; }
.faq-link a { color: var(--muted); }
.faq-link a:hover { color: var(--text); }
.faq mark { background: var(--selection); color: inherit; border-radius: 0.125rem; box-shadow: 0 0 0 1px var(--selection); }

.faq-empty { padding-block: 2rem 0; }
.faq-empty p { margin: 0; color: var(--muted); }
.faq-empty strong { color: var(--text); }
.faq-more { margin-block-start: 3rem; padding-block-start: 2rem; border-top: 1px solid var(--line); }

@media (min-width: 48rem) {
  .faq > .post-header { padding-block-start: 3rem; }
  .faq-topic { padding-block-start: 3rem; }
  .faq-a.prose pre { font-size: 0.875rem; }
}
@media print {
  .search-bar, .faq-topics, .faq-link, .faq-icon, .faq-more { display: none; }
}