:root {
  color-scheme: dark;
  --bg: #0b0910;
  --panel: #100d16;
  --panel-2: #15111d;
  --term: #08070b;
  --text: #eeeaf4;
  --muted: #9b94a5;          /* 6.76:1 on --bg */
  --quiet: #817a8b;          /* 4.80:1 on --bg, 4.51:1 on --panel-2, clears AA at small sizes */
  --line: #3d3449;
  --edge: #5b4a70;           /* borders that outline a component rather than divide a section */
  --purple: #9a7cff;
  --green: #72ef98;
  --max: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* No webfont is loaded and none is self-hosted, so naming one we do not ship would render
   the site in two different typefaces depending on the visitor's machine. The system stack
   is the one every visitor actually gets. */
body {
  margin: 0; min-width: 320px; background: var(--bg); color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}
a { color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nowrap { white-space: nowrap; }
.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 20; padding: .6rem .8rem; background: var(--green); color: #07150a; }
.skip-link:focus { top: 1rem; }

/* Header and main are both centred on the same box. Mixing `100%` here with `100vw` in the
   section padding put them half a scrollbar apart on desktop. */
.site-header { width: min(calc(100% - 2rem), var(--max)); min-height: 3.8rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.brand { flex: none; font: 850 1.18rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.06em; text-decoration: none; }
.brand span, .brand i { color: var(--green); font-style: normal; }
nav { display: flex; gap: clamp(.8rem, 2.4vw, 1.8rem); }
nav a { color: var(--muted); font: 650 .71rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none; white-space: nowrap; }
nav a:hover, nav a:focus-visible { color: var(--green); }

main > section, footer { padding-left: max(1rem, calc((100% - var(--max)) / 2)); padding-right: max(1rem, calc((100% - var(--max)) / 2)); }
.intro { padding-top: 3.8rem; padding-bottom: 2.5rem; }
.technical-line, .section-label { margin: 0 0 .9rem; color: var(--green); font: 700 .7rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
h1 { margin: 0 0 1rem; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.055em; }
.summary { max-width: 780px; margin: 0; color: #bbb5c4; font-size: clamp(1rem, 1.8vw, 1.18rem); }
.meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.meta span { padding: .3rem .55rem; border: 1px solid var(--edge); color: var(--muted); font: 650 .62rem/1 ui-monospace, monospace; }
.meta .pre { border-color: #7a5fc4; color: var(--purple); }

.coverage { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; padding-bottom: 0; background: var(--line); border-block: 1px solid var(--line); }
.coverage div { padding: 1.1rem clamp(.5rem, 1.5vw, 1.1rem); background: var(--bg); }
.coverage strong { display: block; color: var(--purple); font: 750 clamp(1.4rem, 3vw, 2rem)/1 ui-monospace, monospace; letter-spacing: -.03em; }
.coverage span { display: block; margin-top: .35rem; color: var(--muted); font: 600 .67rem/1.3 ui-monospace, monospace; }

.terminal-demo { padding-top: 2.6rem; padding-bottom: 4.5rem; }
.terminal-top { min-height: 2.4rem; padding: 0 .9rem; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-bottom: 0; background: var(--panel-2); color: var(--muted); font: 650 .64rem/1 ui-monospace, monospace; }
.terminal-top i { display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 .5rem #72ef9888; }
/* The floor used to be .56rem (~9px), which was neither legible nor enough to stop the frame
   overflowing, because it is 120 columns wide and scrolls on any phone regardless. Legible and
   scrolling beats illegible and scrolling. */
.terminal-demo pre { margin: 0; padding: clamp(1rem, 2.2vw, 1.8rem); overflow-x: auto; border: 1px solid var(--line); background: var(--term); font: clamp(.7rem, 1.15vw, .84rem)/1.52 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.terminal-demo pre:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.violet { color: var(--purple); } .green { color: var(--green); } .dim { color: var(--quiet); }
.selected { background: var(--green); color: #07150a; }
.demo-note { margin: .65rem 0 0; color: var(--quiet); font: 600 .68rem/1.4 ui-monospace, monospace; text-align: right; }
.demo-note code { color: var(--muted); }
/* Placeholders for the owner's screenshot or a recorded demo, whichever lands first. */
.terminal-demo img, .terminal-demo video { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--term); }

.text-section, .feature-section, .internals, .install { padding-top: 4.5rem; padding-bottom: 4.5rem; border-top: 1px solid var(--line); }
h2 { margin: 0; font-size: clamp(1.8rem, 3.3vw, 3rem); line-height: 1.08; letter-spacing: -.04em; }
.section-content { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); }
.story-content > div { color: var(--muted); font-size: .98rem; }
.story-content > div p:last-child { margin-bottom: 0; }

.feature-section { background: var(--panel); }
.feature-section > h2 { margin-bottom: 2rem; }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature-list article { min-height: 150px; padding: 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-list article > :first-child { min-width: 0; }
/* `kbd` is a keystroke; a CLI flag is not one. Both get the same chip, different elements. */
kbd, .flag { align-self: start; justify-self: start; min-width: 2.1rem; padding: .35rem .45rem; border: 1px solid var(--edge); border-radius: .25rem; color: var(--green); background: var(--bg); box-shadow: none; font: 700 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; white-space: nowrap; }
.feature-list h3 { margin: 0 0 .35rem; font-size: 1rem; }
.feature-list p { margin: 0; color: var(--muted); font-size: .83rem; }
.feature-list em { color: #c6c0ce; font-style: normal; }

.internals h2 { margin-bottom: 2rem; }
.stack { border-top: 1px solid var(--line); }
.stack div { min-height: 3.5rem; padding: .7rem 0; display: grid; grid-template-columns: 130px 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.stack span { color: var(--purple); font: 700 .67rem/1 ui-monospace, monospace; }
.stack strong { color: #c6c0ce; font: 600 .79rem/1.5 ui-monospace, monospace; }

.install { background: var(--panel-2); }
.install-heading { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; margin-bottom: 2rem; }
.install-heading p { max-width: 590px; margin: 0; color: var(--muted); font-size: .86rem; }
.commands { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.commands > div { position: relative; min-width: 0; padding: 1rem; border: 1px solid var(--line); background: var(--term); }
.commands span { display: block; margin-bottom: .6rem; color: var(--quiet); font: 650 .64rem/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .04em; }
.commands .planned { color: var(--purple); }
.commands code { display: block; overflow-x: auto; padding-right: 3.5rem; color: var(--green); font: 650 .75rem/1.5 ui-monospace, monospace; white-space: nowrap; }
.commands code:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.commands button { position: absolute; right: .75rem; bottom: .75rem; border: 0; background: transparent; color: var(--purple); font: 650 .62rem/1 ui-monospace, monospace; cursor: pointer; }
.commands button:hover { color: var(--green); }
.install-note { margin: 1.4rem 0 0; max-width: 590px; color: var(--muted); font-size: .86rem; }
.install-note a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
.install-note a:hover, .install-note a:focus-visible { color: var(--green); }
.copy-status { margin: .8rem 0 0; min-height: 1rem; color: var(--green); font: 650 .68rem/1 ui-monospace, monospace; }

footer { padding-top: 2.5rem; padding-bottom: 2.5rem; display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; color: var(--quiet); border-top: 1px solid var(--line); }
footer > div { display: flex; flex-direction: column; gap: .6rem; }
.wordmark { margin: 0; color: var(--text); font: 850 1rem/1 ui-monospace, monospace; }
.wordmark span, .wordmark i { color: var(--green); font-style: normal; }
footer span, footer p { margin: 0; font-size: .7rem; }
footer p { max-width: 650px; }

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

@media (max-width: 860px) {
  .coverage { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  /* The nav used to be `display: none` on everything but the last link, which removed all
     in-page navigation on the devices most likely to need it. It scrolls instead. */
  .site-header { flex-wrap: wrap; min-height: 0; padding-block: .7rem; gap: .5rem; }
  nav { width: 100%; overflow-x: auto; scrollbar-width: none; gap: 1.1rem; padding-bottom: .15rem; }
  nav::-webkit-scrollbar { display: none; }
  .intro { padding-top: 2.4rem; }
  .section-content, .install-heading, footer { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature-list, .commands { grid-template-columns: 1fr; }
  .feature-list article { min-height: 0; }
  .demo-note { text-align: left; }
}
@media (max-width: 520px) {
  .coverage { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 430px) {
  h1 { font-size: 2.3rem; }
  .stack div { grid-template-columns: 95px 1fr; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.not-found { width: min(calc(100% - 2rem), 760px); min-height: 100svh; margin: 0 auto; padding: 16vh 0 4rem; }
.not-found a { color: var(--green); font: 700 .75rem/1 ui-monospace, monospace; text-decoration: none; }

/* ---- usage.html ---------------------------------------------------------- */

.doc .intro { padding-bottom: 1.8rem; }
.doc h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); }

.toc { display: flex; flex-wrap: wrap; gap: .45rem; padding: 1.1rem max(1rem, calc((100% - var(--max)) / 2)); border-block: 1px solid var(--line); background: var(--panel); }
.toc a { padding: .32rem .6rem; border: 1px solid var(--line); color: var(--muted); font: 650 .66rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none; }
.toc a:hover, .toc a:focus-visible { border-color: var(--edge); color: var(--green); }

.doc-section { padding-top: 3.2rem; padding-bottom: 3.2rem; border-top: 1px solid var(--line); }
.doc-section:first-of-type { border-top: 0; }
.doc-section h2 { margin-bottom: 1.2rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.doc-section h3 { margin: 2rem 0 .6rem; font-size: 1rem; color: var(--text); }
.doc-section h3 code { color: var(--green); font-size: .95em; }
.doc-section p { max-width: 74ch; color: var(--muted); font-size: .92rem; }
.doc-section p em { color: #c6c0ce; font-style: italic; }
.doc-section p code, .deflist code, td code { padding: .08em .3em; border-radius: .2rem; background: #1a1526; color: var(--green); font-size: .88em; }
.doc-section a[href^="http"], .doc-section a[href^="/"] { color: var(--green); }

.callout { border-left: 2px solid var(--purple); padding: .1rem 0 .1rem 1rem; }

.ns-list { max-width: none !important; display: flex; flex-wrap: wrap; gap: .35rem; }
.ns-list code { color: var(--purple); }

pre.sample { max-width: 74ch; margin: 1.2rem 0; padding: 1rem 1.1rem; overflow-x: auto; border: 1px solid var(--line); background: var(--term); }
pre.sample code { padding: 0; background: none; color: var(--green); font: 600 .8rem/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre.sample:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.deflist { border-top: 1px solid var(--line); }
.deflist > div { padding: .95rem 0; display: grid; grid-template-columns: 160px 1fr; gap: 1.2rem; align-items: baseline; border-bottom: 1px solid var(--line); }
.deflist span { color: var(--purple); font: 700 .72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.deflist p { margin: 0; max-width: 68ch; color: var(--muted); font-size: .88rem; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.table-wrap:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.doc table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.doc caption.sr-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.doc th, .doc td { padding: .7rem .9rem; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--line); }
.doc tbody tr:last-child th, .doc tbody tr:last-child td { border-bottom: 0; }
.doc thead th { color: var(--purple); font: 700 .68rem/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; background: var(--panel); }
.doc tbody th { width: 150px; color: var(--text); font: 700 .8rem/1.5 ui-monospace, monospace; white-space: nowrap; }
.doc tbody th code { background: none; padding: 0; color: var(--green); }
.doc td { color: var(--muted); }
.doc td kbd, .doc th kbd { min-width: 0; margin-right: .1rem; padding: .18rem .34rem; font-size: .74rem; }
.doc table.actions td:first-child { white-space: nowrap; }

.steps { max-width: 74ch; margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .92rem; }
.steps li { margin-bottom: .7rem; }
.steps strong { color: var(--text); }

@media (max-width: 720px) {
  .deflist > div { grid-template-columns: 1fr; gap: .35rem; }
  .doc tbody th { width: auto; }
}

/* ---- questions ----------------------------------------------------------- */

.faq { padding-top: 4.5rem; padding-bottom: 4.5rem; border-top: 1px solid var(--line); background: var(--panel); }
.faq > h2 { margin-bottom: 2rem; }
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.qa > div { padding: 1.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qa h3 { margin: 0 0 .45rem; color: var(--text); font-size: .95rem; }
.qa p { margin: 0; max-width: 60ch; color: var(--muted); font-size: .85rem; }
.qa code { padding: .08em .3em; border-radius: .2rem; background: #1a1526; color: var(--green); font-size: .88em; }
.summary a { color: var(--green); }

@media (max-width: 720px) { .qa { grid-template-columns: 1fr; } }

/* ---- clips ---------------------------------------------------------------- */

.clips { padding-top: 4.5rem; padding-bottom: 4.5rem; border-top: 1px solid var(--line); }
.clips > h2 { margin-bottom: .6rem; }
.clips-intro { margin: 0 0 1.8rem; max-width: 60ch; color: var(--muted); font-size: .92rem; }
.clip-grid { display: grid; grid-template-columns: 1fr; gap: 2.6rem; }
.clip-grid figure { margin: 0; }
.clip-grid video { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 980; border: 1px solid var(--line); background: var(--term); }
.clip-grid figcaption { margin-top: .65rem; color: var(--muted); font-size: .92rem; }
.clip-grid figcaption strong { color: var(--text); }
.clip-grid figcaption code { padding: .08em .3em; border-radius: .2rem; background: #1a1526; color: var(--green); font-size: .88em; }

/* /try: the live session and the comments. The frame is 120 columns wide like the recorded
   demo; the aspect ratio keeps 34 rows visible at desktop widths and scrolls inside on phones. */
.try-install { padding-top: 2.4rem; padding-bottom: 2.4rem; }
.try-live { padding-top: 2.4rem; }
.terminal-top a { color: var(--muted); text-decoration: none; }
.terminal-top a:hover, .terminal-top a:focus-visible { color: var(--green); }
.try-frame { border: 1px solid var(--line); background: var(--term); }
.try-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 420px; max-height: 78vh; border: 0; background: var(--term); }
.try-callout { margin-top: 1.4rem; }
.try-comments .giscus { margin-top: 1.6rem; }
.try-comments .summary { max-width: 760px; }
@media (max-width: 700px) {
  .try-frame iframe { aspect-ratio: 4 / 5; min-height: 360px; }
}
.try-intro { padding-bottom: 1rem; }
.try-intro .summary { max-width: 720px; }
.try-live { padding-top: 0; }
/* Home page: the pointer to /try, under the intro. */
.try-teaser { padding-top: .5rem; padding-bottom: 2.6rem; display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center; }
.try-teaser h2 { margin: 0 0 .6rem; }
.try-teaser p:not(.section-label) { margin: 0; max-width: 640px; color: var(--muted); font-size: .86rem; }
.try-link { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); background: var(--term); text-decoration: none; color: var(--muted); }
.try-link code { color: var(--green); font: 650 .9rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.try-link span { font: 650 .68rem/1 ui-monospace, monospace; }
.try-link:hover, .try-link:focus-visible { border-color: var(--green); color: var(--green); }
.meta a { color: var(--green); text-decoration: none; }
@media (max-width: 700px) { .try-teaser { grid-template-columns: 1fr; } }