/* Layout: one reading column on graticule paper; sections keyed by scope channel colours; real screens from our units */
:root {
  /* Dark-first, like the scope's own screen; the same in every browser and theme */
  color-scheme: dark;
  --paper: #0f151b;
  --grid: #1c2731;
  --ink: #e3e9ee;
  --muted: #9aa8b4;
  --rule: #2a3742;
  --accent: #5cc8e4;
  --ch1: #e8c547; --ch2: #4fc6e2; --ch3: #e46bb4; --ch4: #7d9cff;
  --panel: #151d25;
  --scope: #0d1117;
  --good: #3ecf8e;
  --display: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Literata", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --s-1: .82rem; --s0: 1.02rem; --s1: 1.3rem; --s2: 1.75rem; --s3: 2.6rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--s0); line-height: 1.6;
  padding-inline: max(20px, env(safe-area-inset-left, 0px)); padding-block: env(safe-area-inset-top, 0px) calc(64px + env(safe-area-inset-bottom, 0px));
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
.wrap { max-width: 50rem; margin: 0 auto; display: grid; gap: 3.4rem; }
header { display: grid; gap: 1.1rem; }
/* the page title sits just under the nav: the column's section gap (3.4rem) is for between sections */
.wrap > nav.top + header { margin-top: -1.6rem; }
.eyebrow { font-family: var(--mono); font-size: var(--s-1); color: var(--muted); letter-spacing: .04em; }
.eyebrow b { color: var(--good); font-weight: 600; }
h1 { font-family: var(--display); font-weight: 700; font-size: var(--s3); line-height: 1; margin: 0; letter-spacing: .01em; text-wrap: balance; }
h1 span { color: var(--accent); }
.lede { font-size: var(--s1); line-height: 1.45; margin: 0; max-width: 40rem; text-wrap: pretty; }
figure { margin: 0; }
.shot { border: 1px solid var(--rule); background: var(--scope); border-radius: 6px; overflow: hidden; }
.shot img { width: 100%; height: auto; aspect-ratio: 1024 / 600; }
figcaption { font-family: var(--mono); font-size: var(--s-1); color: var(--muted); padding: .5rem .2rem 0; }
.hero figcaption b { color: var(--ink); font-weight: 600; }
section { display: grid; gap: .95rem; }
h2 { font-family: var(--display); font-weight: 700; font-size: var(--s2); line-height: 1.1; margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; text-wrap: balance; }
h2 .ch { font-family: var(--mono); font-size: .72rem; font-weight: 600; padding: .15rem .45rem; border-radius: 3px; color: var(--paper); letter-spacing: .03em; }
h3 { font-family: var(--display); font-weight: 700; font-size: var(--s1); margin: .5rem 0 0; }
.c1 { background: var(--ch1); } .c2 { background: var(--ch2); } .c3 { background: var(--ch3); } .c4 { background: var(--ch4); }
p { margin: 0; max-width: 42rem; }
ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; max-width: 42rem; }
code, .mono { font-family: var(--mono); font-size: .86em; }
.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; }
.phase { border: 1px solid var(--rule); background: var(--panel); border-radius: 6px; padding: .9rem 1rem; display: grid; gap: .35rem; align-content: start; text-decoration: none; color: var(--ink); }
.phase .n { font-family: var(--mono); font-size: var(--s-1); color: var(--muted); }
.phase .t { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; }
.phase .s { font-family: var(--mono); font-size: .72rem; justify-self: start; border-radius: 3px; padding: .05rem .4rem; border: 1px solid var(--rule); }
.phase.now { border-color: var(--good); box-shadow: inset 3px 0 0 var(--good); }
.phase.now .s { color: var(--good); border-color: var(--good); }
.phase p { font-size: .95rem; }
/* Screenshots at about their own size: wider than the text column, one scope screen (1024 px) to a row; a page with
   smaller screens sets its own columns (the DL3031's .gallery.lcd). */
.gallery { --bw: min(64rem, calc(100vw - 2rem)); width: var(--bw); margin-inline: calc((100% - var(--bw)) / 2); display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.gallery button { all: unset; cursor: zoom-in; display: grid; gap: .1rem; width: 100%; min-width: 0; }
.gallery button:focus-visible .shot { outline: 2px solid var(--accent); outline-offset: 2px; }
button.zoom { all: unset; cursor: zoom-in; display: block; width: 100%; min-width: 0; }
button.zoom:focus-visible .shot { outline: 2px solid var(--accent); outline-offset: 2px; }
.tbl { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .75rem; border-bottom: 1px solid var(--rule); }
tr:last-child td { border-bottom: 0; }
th { font-family: var(--display); font-weight: 500; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
td:first-child { white-space: nowrap; }
td b { font-family: var(--mono); font-weight: 600; color: var(--good); font-size: .92em; }
td code { color: var(--accent); }
.tag { font-family: var(--mono); font-size: .72rem; color: var(--muted); border: 1px solid var(--rule); border-radius: 3px; padding: 0 .35rem; white-space: nowrap; }
.note { border-left: 3px solid var(--ch3); padding: .2rem 0 .2rem .9rem; color: var(--ink); }
.ask { border: 1px solid var(--accent); border-radius: 6px; padding: 1rem 1.1rem; background: var(--panel); display: grid; gap: .6rem; }
/* The download page's box: the day the download opens, or the button once it has */
.dl { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--panel); padding: .85rem 1.1rem; }
.dl-when { font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }
.dl-when b { color: var(--accent); }
.dl-what { font-family: var(--mono); font-size: var(--s-1); color: var(--muted); }
.dl-btn { font-family: var(--mono); font-weight: 600; color: var(--paper); background: var(--accent); text-decoration: none; border-radius: 4px; padding: .6rem 1.1rem; }
.dl-btn:hover, .dl-btn:focus-visible { background: var(--ink); }
.dl-btn[aria-disabled] { background: var(--muted); cursor: default; }
.road { list-style: none; padding: 0; counter-reset: step; gap: .8rem; }
.road li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; }
.road li::before { content: counter(step); font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: var(--accent); line-height: 1.3; }
.road li.done::before { color: var(--good); }
footer { font-family: var(--mono); font-size: var(--s-1); color: var(--muted); border-top: 1px solid var(--rule); padding-top: 1rem; display: grid; gap: .4rem; }
dialog { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); }
dialog::backdrop { background: rgba(5, 8, 12, .86); }
dialog img { width: 100%; border-radius: 6px; }
dialog p { color: #e3e9ee; font-family: var(--mono); font-size: var(--s-1); padding: .5rem .2rem; max-width: none; }
dialog form { text-align: right; }
dialog form button { font-family: var(--mono); background: #151d25; color: #e3e9ee; border: 1px solid #2a3742; border-radius: 4px; padding: .3rem .7rem; cursor: pointer; }
@media (max-width: 480px) { h1 { font-size: 2.1rem; } .lede { font-size: 1.12rem; } td:first-child { white-space: normal; } }
nav.top { display: flex; flex-wrap: wrap; gap: .3rem .95rem; align-items: baseline; font-family: var(--mono); font-size: var(--s-1); padding-top: 1.2rem; }
nav.top a { color: var(--muted); text-decoration: none; }
nav.top a:hover, nav.top a[aria-current="page"] { color: var(--accent); }
nav.top .brand { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-right: auto; }
nav.top .brand span { color: var(--accent); }
/* Site search (search.js): the box at the end of the nav, its instant results, and the /search/ page */
/* On a wide screen the box is a magnifier that opens over the nav (click, or "/"); on a phone a full-width box */
nav.top form.search { position: relative; flex: 0 0 2rem; height: 1.85rem; align-self: center; }
nav.top form.search input { position: absolute; right: 0; top: 0; z-index: 21; width: 2rem; height: 1.85rem; font-family: var(--mono); font-size: var(--s-1); color: transparent; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa8b4' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.8'/%3E%3Cpath d='M10.4 10.4 14.5 14.5'/%3E%3C/svg%3E") no-repeat .5rem center / .95rem; border: 1px solid var(--rule); border-radius: 4px; padding: .3rem .55rem .3rem 1.85rem; cursor: pointer; transition: width .15s; }
nav.top form.search input::placeholder { color: transparent; }
nav.top form.search input:hover { border-color: var(--accent); }
nav.top form.search:focus-within input { width: min(18rem, calc(100vw - 40px)); color: var(--ink); cursor: text; }
nav.top form.search:focus-within input::placeholder { color: var(--muted); }
nav.top form.search input:focus-visible, .sr-page input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sr-panel { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 20; width: min(30rem, calc(100vw - 40px)); max-height: min(70vh, 34rem); overflow-y: auto; background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 10px 30px rgb(0 0 0 / .5); padding: .3rem; display: grid; gap: .1rem; }
.sr-panel[hidden] { display: none; }
.sr { display: grid; gap: .1rem; padding: .5rem .6rem; border-radius: 4px; text-decoration: none; color: var(--ink); }
.sr:hover, .sr.on, .sr:focus-visible { background: var(--grid); outline: none; }
.sr-t { font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; color: var(--accent); }
.sr-where { font-family: var(--mono); font-size: .75rem; color: var(--ink); }
.sr-u { font-family: var(--mono); font-size: .7rem; color: var(--muted); overflow-wrap: anywhere; }
.sr-x { font-size: .88rem; line-height: 1.45; color: var(--muted); }
.sr mark { background: none; color: var(--ch1); font-weight: 600; }
.sr-all { display: block; padding: .45rem .6rem; font-family: var(--mono); font-size: var(--s-1); text-decoration: none; border-top: 1px solid var(--rule); }
.sr-none { margin: 0; padding: .5rem .6rem; font-family: var(--mono); font-size: var(--s-1); color: var(--muted); }
.sr-page { display: grid; gap: .8rem; }
.sr-page input.filter { max-width: none; font-size: var(--s0); padding: .6rem .75rem; }
.sr-list { display: grid; gap: .4rem; }
.sr-list .sr { border: 1px solid var(--rule); background: var(--panel); padding: .75rem .9rem; }
.sr-list .sr-t { font-size: 1.25rem; }
.sr-list .sr-x { font-size: .95rem; }
@media (max-width: 640px) { nav.top form.search { flex-basis: 100%; } nav.top form.search input, nav.top form.search:focus-within input { width: 100%; color: var(--ink); cursor: text; } nav.top form.search input::placeholder { color: var(--muted); } .sr-panel { left: 0; right: auto; width: 100%; } }
.crumbs { font-family: var(--mono); font-size: var(--s-1); color: var(--muted); }
details { border: 1px solid var(--rule); border-radius: 6px; background: var(--panel); padding: .7rem .9rem; }
details summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
details[open] summary { margin-bottom: .5rem; }
details p + p, details p + ul { margin-top: .5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; }
.card { border: 1px solid var(--rule); background: var(--panel); border-radius: 6px; padding: .9rem 1rem; display: grid; gap: .35rem; text-decoration: none; color: var(--ink); }
.card .t { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.15; }
.card p { font-size: .95rem; }
article { display: grid; gap: 1rem; }
article h2 { margin-top: 1rem; }
/* Learn guides (scripts/build_aioscilloscope_learn.py): the numbered steps, a screenshot not yet taken, a drawn signal */
ol.steps { margin: 0; padding-left: 1.4rem; display: grid; gap: .5rem; max-width: 42rem; }
.shot.pending { aspect-ratio: 1024 / 600; display: grid; place-items: center; border-style: dashed; color: var(--muted); font-family: var(--mono); font-size: var(--s-1); padding: 1rem 1.5rem; text-align: center; }
figure.diagram svg { width: 100%; height: auto; display: block; background: var(--scope); border: 1px solid var(--rule); border-radius: 6px; }
figure.diagram polyline { fill: none; stroke: var(--ch1); stroke-width: 2.5; }
figure.diagram .grid line { stroke: var(--grid); stroke-width: 1; }
figure.diagram .lbl text { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
figure.diagram .lbl text.b { fill: var(--ink); font-size: 13px; }
figure.diagram .xb-pcb { fill: #1f6db3; stroke: #15528a; stroke-width: 1.5; }
figure.diagram .xb-mount { fill: var(--scope); stroke: #e9eef3; stroke-width: 1.5; }
figure.diagram .xb-line { fill: none; stroke: #e9eef3; stroke-width: 1.4; }
figure.diagram .xb-silkf { fill: #e9eef3; }
figure.diagram .xb-strip, figure.diagram .xb-chip { fill: #14181c; }
figure.diagram .xb-pin { fill: #c9a24a; }
figure.diagram .xb-hole { fill: #0e2f4f; stroke: #dfe6ec; stroke-width: 1.5; }
figure.diagram .xb-h1 { fill: var(--ch1); } figure.diagram .xb-h2 { fill: var(--ch2); } figure.diagram .xb-hg { fill: #ffffff; }
figure.diagram .xb-grove { fill: #eef1f3; stroke: #c3cad0; }
figure.diagram .xb-btn { fill: #b9c1c8; } figure.diagram .xb-btnc { fill: #e3e8ec; stroke: #8b949c; }
figure.diagram .xb-usb { fill: #aab3bb; stroke: #7d868e; } figure.diagram .xb-jump { fill: #14181c; }
figure.diagram text.xb-silk, figure.diagram text.xb-silks { fill: #f4f7fa; font-family: var(--display); font-size: 9px; }
figure.diagram text.xb-silks { font-size: 7.5px; }
figure.diagram .xb-w1, figure.diagram .xb-w2, figure.diagram .xb-wg { fill: none; stroke-width: 2; }
figure.diagram .xb-w1 { stroke: var(--ch1); } figure.diagram .xb-w2 { stroke: var(--ch2); } figure.diagram .xb-wg { stroke: var(--ink); }
figure.diagram text.xb-t, figure.diagram text.xb-t1, figure.diagram text.xb-t2, figure.diagram text.xb-tg { font-family: var(--mono); font-size: 12px; fill: var(--muted); }
figure.diagram text.xb-t1 { fill: var(--ch1); } figure.diagram text.xb-t2 { fill: var(--ch2); } figure.diagram text.xb-tg { fill: var(--ink); }
figure.diagram text.xb-t1 { fill: var(--ch1); } figure.diagram text.xb-t2 { fill: var(--ch2); } figure.diagram text.xb-tg { fill: var(--ink); }
pre.log { margin: 0; overflow-x: auto; background: var(--scope); border: 1px solid var(--rule); border-radius: 6px; padding: .8rem 1rem; font-family: var(--mono); font-size: .8rem; line-height: 1.45; color: var(--ink); }
/* Changelog: one card per release, newest first; measured figures in mono green */
.rels { gap: 1.1rem; }
.rel { border: 1px solid var(--rule); background: var(--panel); border-radius: 6px; padding: 1rem 1.1rem; display: grid; gap: .6rem; }
.rel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.rel-head h2 { font-size: var(--s2); color: var(--accent); scroll-margin-top: 1rem; }
.rel-head time { font-family: var(--mono); font-size: var(--s-1); color: var(--muted); }
.rel-lead { font-size: 1.08rem; font-style: italic; }
.hl { list-style: none; padding: 0; gap: .55rem; max-width: none; }
.hl li { font-size: .95rem; line-height: 1.5; }
.hl .tag { margin-right: .1rem; }
.hl li > time { font-family: var(--mono); font-size: .72rem; color: var(--ink); margin-right: .25rem; white-space: nowrap; }
.fig { font-family: var(--mono); font-weight: 600; color: var(--good); font-size: .88em; }
.hl .on { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
/* Open source: filterable tables */
input.filter { width: 100%; max-width: 28rem; font-family: var(--mono); font-size: var(--s-1); color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: .45rem .6rem; }
input.filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pk { font-family: var(--mono); font-size: .72rem; color: var(--muted); white-space: normal; }
/* SCPI reference and compatibility (scripts/build_aioscilloscope_reference.py): verdict badges, filter, groups */
.v { font-family: var(--mono); font-size: .72rem; font-weight: 600; white-space: nowrap; border: 1px solid currentColor; border-radius: 3px; padding: 0 .35rem; cursor: help; }
.v-match, .v-have { color: var(--good); }
.v-format { color: var(--ch2); }
.v-diff, .v-partial { color: var(--ch1); }
.v-guide { color: var(--ch3); }
.v-missing { color: #ff7f6e; }
.v-notin, .v-na { color: var(--muted); }
th .v { font-weight: 600; text-transform: none; letter-spacing: 0; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: center; }
.filters input.filter { flex: 1 1 16rem; }
select.filter { font-family: var(--mono); font-size: var(--s-1); color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: .4rem .5rem; }
select.filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.shown { font-family: var(--mono); font-size: var(--s-1); color: var(--muted); }
.grp { display: grid; gap: .5rem; }
.grp h3 { display: flex; align-items: baseline; gap: .5rem; font-family: var(--mono); font-size: 1rem; scroll-margin-top: 1rem; }
td.w, td.w:first-child { white-space: normal; min-width: 12rem; }
.rg { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.rg .mono { color: var(--ink); font-size: 1em; }
code.ans { word-break: break-word; white-space: pre-wrap; color: var(--ink); }
.none { font-family: var(--mono); font-size: .75rem; color: var(--muted); font-style: italic; }
.ask.draft { border-color: var(--ch3); }
/* every group's table shares one set of column widths, so the columns line up down the page */
table.cols { table-layout: fixed; min-width: 40rem; }
table.cols td, table.cols td:first-child { white-space: normal; overflow-wrap: anywhere; }
table.cols td.w { min-width: 0; }