/* notazizelse.xyz: laid out like a component datasheet.
   Type: Departure Mono (Helena Zhang & Tobias Fried, OFL) for part numbers and labels,
   Atkinson Hyperlegible Next + Mono (Braille Institute, OFL) for reading. */

@font-face {
  font-family: "Departure Mono";
  src: url("https://cdn.jsdelivr.net/gh/rektdeckard/departure-mono@v1.500/public/assets/DepartureMono-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --paper: #f4f2ea;
  --ink: #15140f;
  --muted: #5d594f;
  --rule: #bfb9aa;
  --hair: #dcd6c7;
  --th: #e2ddcf;
  --mask: #14532d;      /* solder mask */
  --gold: #c58b2b;      /* ENIG pads */
  --link: #14532d;
  --hover: #a5481a;
  --fig: #f7f5ee;       /* figures stay "printed" in both themes */
  --pixel: "Departure Mono", "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, Consolas, monospace;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101310;
    --ink: #ece9df;
    --muted: #a39e92;
    --rule: #3c4038;
    --hair: #2a2d27;
    --th: #1d211c;
    --mask: #3fa66b;
    --link: #7fd1a0;
    --hover: #f0a46b;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.58 var(--sans); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { color: var(--hover); }
::selection { background: #ffe08a; color: #15140f; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 .9em; }
.sheet { max-width: 1120px; margin: 0 auto; padding: 0 28px 40px; }
.muted { color: var(--muted); }

/* ---------- running header ---------- */
.runhead {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 20px; flex-wrap: wrap;
  padding: 16px 0 10px; border-bottom: 5px solid var(--mask);
  font: 13px/1.3 var(--pixel); text-transform: uppercase; letter-spacing: .02em;
}
.runhead a { color: inherit; text-decoration: none; }
.runhead a:hover { color: var(--hover); }
.runhead .mark { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; }
.runhead .chip { width: 30px; height: 16px; background: var(--ink); border-radius: 2px; position: relative; }
.runhead .chip::before, .runhead .chip::after {
  content: ""; position: absolute; left: 3px; right: 3px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 3px, transparent 3px 6px);
}
.runhead .chip::before { top: -4px; }
.runhead .chip::after { bottom: -4px; }
.runhead nav { display: flex; gap: 6px 18px; flex-wrap: wrap; }

/* ---------- title ---------- */
.title-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 34px 0 30px; border-bottom: 1px solid var(--ink); }
.partno { font: 400 clamp(64px, 11vw, 132px)/.86 var(--pixel); letter-spacing: -.03em; margin: 0 0 16px; }
.title-long { font: 700 clamp(21px, 2.4vw, 27px)/1.22 var(--sans); margin: 0 0 14px; max-width: 30ch; }
.byline { font: 14px/1.6 var(--pixel); color: var(--muted); }
.byline b { color: var(--ink); font-weight: 400; }

/* ---------- section headings ---------- */
.sec { font: 700 23px/1.2 var(--sans); margin: 46px 0 14px; display: flex; gap: 14px; align-items: baseline; }
.sec .num { font: 400 23px var(--pixel); color: var(--mask); min-width: 1.2em; }
.sub { font: 700 18px/1.25 var(--sans); margin: 30px 0 10px; }
.sub .num { font: 400 15px var(--pixel); color: var(--mask); margin-right: 10px; }

/* ---------- page 1 ---------- */
.p1 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.p1 > div:first-child { border-right: 1px solid var(--rule); padding-right: 44px; margin-right: -44px; }
ul.bul { margin: 0; padding: 0 0 0 1.2em; }
ul.bul li { margin: 0 0 7px; padding-left: 2px; }
ul.bul li::marker { content: "•  "; color: var(--mask); }
.desc-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: start; }
.fn { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ---------- tables ---------- */
.tw { overflow-x: auto; margin: 6px 0 4px; }
table.dt { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.dt caption { caption-side: top; text-align: center; font: 700 14px var(--sans); padding: 0 0 8px; }
.dt caption b { font-family: var(--pixel); font-weight: 400; color: var(--mask); margin-right: 6px; }
.dt th { font: 400 12px/1.3 var(--pixel); text-transform: uppercase; letter-spacing: .03em; text-align: left; background: var(--th); padding: 8px 10px; border-bottom: 1px solid var(--ink); }
.dt td { padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.dt td.n, .dt th.n { text-align: center; font-family: var(--mono); white-space: nowrap; }
.dt td.code { font-family: var(--pixel); font-size: 14px; white-space: nowrap; }
.dt tr:last-child td { border-bottom: 0; }
.dt a { font-weight: 700; }

/* ---------- figures ---------- */
figure.fig { margin: 18px 0 8px; }
figure.fig > .frame { background: var(--fig); border: 1px solid var(--ink); display: block; }
figure.fig figcaption { text-align: center; font-size: 14px; margin-top: 10px; }
figure.fig figcaption b { font-family: var(--pixel); font-weight: 400; color: var(--mask); margin-right: 6px; }
figure.fig svg { display: block; width: 100%; height: auto; }

/* ---------- LCD module ---------- */
.lcd { margin: 0; justify-self: end; width: 100%; max-width: 520px; }
.lcd .board { cursor: text; background: #14532d; border-radius: 6px; padding: 32px 22px 14px; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.lcd .holes { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; }
.lcd .holes i { width: 11px; height: 11px; border-radius: 50%; background: #c58b2b; box-shadow: inset 0 0 0 3.5px #0d3a1f; }
.lcd .holes i:first-child { border-radius: 2px; }
.lcd .mh { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #0b0c0b; box-shadow: 0 0 0 3px #c58b2b; }
.lcd .mh.a { top: 9px; left: 9px; }
.lcd .mh.b { top: 9px; right: 9px; }
.lcd .mh.c { bottom: 9px; left: 9px; }
.lcd .mh.d { bottom: 9px; right: 9px; }
.lcd .bezel { background: #151515; padding: 12px; border-radius: 3px; cursor: text; outline: none; }
.lcd .bezel:focus-visible { box-shadow: 0 0 0 3px #ffe08a; }
.lcd canvas { display: block; width: 100%; height: auto; background: #9cbf2b; border-radius: 2px; box-shadow: inset 0 0 22px rgba(40, 60, 0, .5); }
.lcd .silk { display: flex; justify-content: space-between; padding: 8px 18px 0; font: 11px var(--pixel); color: #e9efe3; letter-spacing: .05em; }
.lcd figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; }
.lcd figcaption b { font: 400 14px var(--pixel); color: var(--mask); margin-right: 6px; }
.lcd .btns { display: flex; gap: 8px; }
.lcd button { font: 12px var(--pixel); color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 3px; padding: 5px 10px 4px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.lcd button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #2b2b2b; box-shadow: 0 0 0 2px #9c9c9c; }
.lcd button:hover { border-color: var(--hover); color: var(--hover); }
.lcd button:active { transform: translateY(1px); }
.lcd .type-in { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: 0; top: 0; }

/* ---------- TOC ---------- */
.toc { border: 1px solid var(--ink); padding: 16px 20px 10px; margin: 40px 0 0; }
.toc h2 { font: 700 18px var(--sans); margin: 0 0 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 44px; }
.toc li { display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px; break-inside: avoid; }
.toc li .n { font-family: var(--pixel); color: var(--mask); min-width: 1.4em; }
.toc li a { text-decoration: none; color: var(--ink); }
.toc li a:hover { color: var(--hover); text-decoration: underline; }
.toc li .dots { flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-4px); min-width: 20px; }
.toc li .pg { font-family: var(--pixel); }

/* ---------- page breaks ---------- */
.pagebreak { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 60px 0 0; padding: 8px 0 9px;
  border-top: 1px solid var(--ink); border-bottom: 5px solid var(--mask); font: 12px var(--pixel); text-transform: uppercase; color: var(--muted); }
.pagebreak a { color: inherit; }
.pagebreak .pg { color: var(--ink); }

/* ---------- pins ---------- */
.pins { display: grid; grid-template-columns: .85fr 1.15fr; gap: 34px; align-items: start; }
.pinout a .pin { transition: fill .15s; }
.pinout a:hover .pin, .pinout a:focus .pin { fill: #c58b2b; }
.pinout a:hover .lbl, .pinout a:focus .lbl { fill: #a5481a; text-decoration: underline; }
.pinout a:focus { outline: none; }

/* ---------- block diagram ---------- */
.blocks { list-style: none; padding: 0; margin: 12px 0 6px; display: flex; flex-wrap: nowrap; gap: 22px 32px; overflow-x: auto; }
.blocks li { flex: 1 1 0; min-width: 104px; }
.blocks li { position: relative; border: 1.5px solid var(--ink); background: var(--fig); color: #15140f; padding: 8px 12px 9px; }
.blocks li .y { display: block; font: 12px var(--pixel); color: #14532d; }
.blocks li .t { font-weight: 700; font-size: 15px; }
.blocks li:not(:last-child)::after { content: ""; position: absolute; right: -29px; top: 50%; width: 22px; border-top: 1.5px solid var(--ink); }
.blocks li:not(:last-child)::before { content: ""; position: absolute; right: -30px; top: calc(50% - 5px); border: 5px solid transparent; border-left: 7px solid var(--ink); border-right: 0; }

/* ---------- overview ---------- */
.overview { display: grid; grid-template-columns: 1.3fr .7fr; gap: 36px; align-items: start; }
.overview figure.fig { margin-top: 4px; }
.modes { margin: 0; display: grid; grid-template-columns: 11rem 1fr; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.modes dt, .modes dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.modes dt { font: 14px var(--pixel); padding-top: 10px; }
.modes > :nth-last-child(-n+2) { border-bottom: 0; }

/* ---------- applications (projects) ---------- */
.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; margin-top: 16px; }
.app { margin: 0; }
.app a.shot { display: block; position: relative; border: 1px solid var(--ink); background: var(--fig); overflow: hidden; aspect-ratio: 4 / 3; }
.app a.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.app a.shot:hover img { transform: scale(1.035); }
.app .ref { position: absolute; top: 8px; left: 8px; font: 13px var(--pixel); background: #14532d; color: #f4f1e6; padding: 2px 7px 3px; border-radius: 2px; }
.app .status { position: absolute; bottom: 8px; right: 8px; font: 11px var(--pixel); text-transform: uppercase; background: #f7f5ee; color: #15140f; border: 1px solid #15140f; padding: 2px 6px; border-radius: 2px; }
.app figcaption { margin-top: 10px; font-size: 15px; line-height: 1.45; }
.app figcaption .fno { font: 12px var(--pixel); color: var(--mask); display: block; margin-bottom: 3px; }
.app figcaption .t { font-weight: 700; font-size: 17px; }
.app figcaption .t a { color: var(--ink); text-decoration: none; }
.app figcaption .t a:hover { color: var(--hover); text-decoration: underline; }
.app figcaption .host { display: block; font: 12px var(--pixel); color: var(--muted); margin-top: 4px; }

/* ---------- notice + footer ---------- */
.notice { border: 1px solid var(--ink); padding: 14px 18px 6px; margin: 46px 0 0; font-size: 14px; color: var(--muted); }
.notice b { color: var(--ink); font: 400 13px var(--pixel); display: block; margin-bottom: 6px; letter-spacing: .03em; }
.legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 14px 0 0; margin-top: 30px; border-top: 1px solid var(--ink);
  font: 12px/1.6 var(--pixel); color: var(--muted); }
.legal a { color: inherit; }

/* ---------- application note (project pages) ---------- */
.an-head { padding: 30px 0 22px; border-bottom: 1px solid var(--ink); }
.an-head .kind { font: 14px var(--pixel); color: var(--mask); text-transform: uppercase; letter-spacing: .03em; }
.an-head h1 { font: 700 clamp(34px, 5vw, 56px)/1.05 var(--sans); margin: 8px 0 10px; letter-spacing: -.01em; }
.an-head .meta { font: 13px var(--pixel); color: var(--muted); }
.abstract { border: 1px solid var(--ink); padding: 16px 20px 4px; margin: 26px 0 0; max-width: 820px; }
.abstract > b { font: 400 13px var(--pixel); letter-spacing: .04em; display: block; margin-bottom: 8px; }
.abstract p { font-size: 17.5px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.actions a { font: 13px var(--pixel); text-transform: uppercase; text-decoration: none; padding: 9px 14px 8px; border: 1px solid var(--ink); color: var(--ink); }
.actions a.go { background: var(--mask); border-color: var(--mask); color: #f4f1e6; }
.actions a:hover { border-color: var(--hover); color: var(--hover); }
.actions a.go:hover { background: var(--hover); border-color: var(--hover); color: #fff; }
.an-body { max-width: 780px; }
.an-wide .frame img { width: 100%; max-height: 78vh; object-fit: contain; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; }
.gallery figure.fig { margin: 0; }
.gallery figure.full { grid-column: 1 / -1; }
.gallery .frame img { width: 100%; }
ul.files { list-style: none; padding: 0; margin: 6px 0 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
ul.files li { display: flex; flex-wrap: wrap; gap: 2px 14px; justify-content: space-between; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--hair); }
ul.files li:last-child { border-bottom: 0; }
ul.files a { font-weight: 700; }
ul.files .desc { flex: 1 1 100%; color: var(--muted); font-size: 15px; }
ul.files .size { font: 12px var(--pixel); color: var(--muted); }
.credit { font-size: 14px; color: var(--muted); margin-top: 26px; }
.back { font: 13px var(--pixel); text-transform: uppercase; margin: 18px 0 0; }
.back a { text-decoration: none; }

/* ---------- application note: hero ---------- */
.an-hero { display: grid; grid-template-columns: 1fr; gap: 40px; padding: 24px 0 34px; border-bottom: 1px solid var(--ink); align-items: start; }
.an-hero.has-media { grid-template-columns: 1.02fr .98fr; }
.an-text .kind { font: 14px var(--pixel); color: var(--mask); text-transform: uppercase; letter-spacing: .03em; }
.an-text h1 { font: 700 clamp(38px, 5.2vw, 62px)/1.02 var(--sans); margin: 8px 0 10px; letter-spacing: -.015em; }
.an-text .meta { font: 13px var(--pixel); color: var(--muted); }
.an-hero .abstract { margin-top: 20px; }
.an-hero > figure, .an-hero > .repo { position: sticky; top: 18px; margin: 4px 0 0; }
.an-cover .frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--fig); }

/* product status: idea -> in use */
.life { margin: 20px 0 0; }
.life-k { display: block; font: 11px var(--pixel); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.life ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.life li { font: 11px var(--pixel); text-transform: uppercase; letter-spacing: .02em; padding: 7px 2px 0; border-top: 7px solid var(--hair); color: var(--muted); white-space: nowrap; }
.life li.done { border-top-color: var(--mask); color: var(--ink); }
.life li.now { border-top-color: #e3a32a; color: var(--ink); }
.life li.now::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ffb52e; box-shadow: 0 0 7px #ffb52e; margin-right: 6px; vertical-align: 1px; animation: led 1.8s ease-in-out infinite; }
@keyframes led { 50% { opacity: .35; box-shadow: none; } }
.life-note { display: block; font-size: 14px; color: var(--muted); margin-top: 6px; }

/* key specs */
.specgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.specgrid > div { padding: 12px 16px 14px 0; border-bottom: 1px solid var(--hair); margin-bottom: -1px; }
.specgrid dt { font: 11px var(--pixel); text-transform: uppercase; letter-spacing: .06em; color: var(--mask); margin-bottom: 4px; }
.specgrid dd { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.35; }

/* block diagram inside a printed figure */
.fig.flow .blocks { margin: 0; padding: 24px 20px; background: var(--fig); border: 1px solid var(--ink); }
.fig.flow .blocks li { border-color: #15140f; background: #fffef8; }
.fig.flow .blocks li:not(:last-child)::after { border-top-color: #15140f; }
.fig.flow .blocks li:not(:last-child)::before { border-left-color: #15140f; }

/* live demos */
.demo .browser { border: 1px solid var(--ink); background: #111; border-radius: 6px 6px 2px 2px; overflow: hidden; }
.demo .bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #222; color: #d6d3cb; font: 12px var(--pixel); }
.demo .bar i { display: none; }
.demo .bar i:first-child { display: block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #3fdc6e; box-shadow: 0 0 8px #3fdc6e; }
.demo .bar .url { flex: 1; min-width: 0; background: #151515; padding: 4px 10px; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo .bar a { color: #d6d3cb; text-decoration: none; white-space: nowrap; }
.demo .bar a:hover { color: #ffb52e; }
.demo iframe { display: block; width: 100%; height: min(660px, 78vh); border: 0; background: #fff; }
.demo .load { display: grid; place-items: center; width: 100%; height: min(560px, 70vh); border: 0; padding: 0; background: #000; cursor: pointer; position: relative; }
.demo .load img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .5; }
.demo .load span { position: relative; font: 14px var(--pixel); text-transform: uppercase; background: #14532d; color: #f4f1e6; padding: 13px 20px 12px; border: 1px solid #f4f1e6; }
.demo .load:hover span { background: #a5481a; }

/* technical documents as little sheets of paper */
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.doc { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 236px; padding: 0 16px 16px; text-decoration: none; color: #15140f;
  background: #fbfaf5 repeating-linear-gradient(180deg, transparent 0 27px, #e9e4d6 27px 28px);
  border: 1px solid #15140f; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); transition: transform .15s ease; }
.doc::after { content: ""; position: absolute; top: 0; right: 0; width: 24px; height: 24px; background: linear-gradient(225deg, transparent 50%, #cfc8b6 50%); }
.doc:hover { transform: translateY(-4px); color: #15140f; }
.docbar { margin: 0 -16px 10px; padding: 6px 16px 5px; background: #14532d; color: #f4f1e6; font: 11px var(--pixel); letter-spacing: .05em; }
.doct { font-weight: 700; font-size: 18px; line-height: 1.2; }
.docd { font-size: 14px; color: #5d594f; line-height: 1.45; }
.docgo { margin-top: auto; font: 12px var(--pixel); text-transform: uppercase; color: #14532d; }
.doc:hover .docgo { color: #a5481a; }

/* design files with file-type tags */
ul.files li { display: grid; grid-template-columns: 54px 1fr auto; gap: 4px 14px; align-items: center; }
ul.files .fname a { font-weight: 700; }
ul.files .fname .desc { display: block; color: var(--muted); font-size: 14px; }
.ext { font: 11px var(--pixel); text-align: center; padding: 7px 0 6px; border: 1px solid var(--ink); background: var(--th); }
.ext-zip, .ext-step { background: #14532d; border-color: #14532d; color: #f4f1e6; }
.ext-pdf { background: #a5481a; border-color: #a5481a; color: #fff; }
.ext-csv, .ext-xlsx { background: #c58b2b; border-color: #c58b2b; color: #15140f; }
.ext-ino, .ext-py, .ext-js, .ext-h { background: #15140f; border-color: #15140f; color: #e9efe3; }

/* repository panel */
.repo { border: 1px solid var(--ink); background: var(--fig); color: #15140f; padding: 16px 18px 14px; }
.repo-h { display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; font: 12px var(--pixel); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.repo-h a { color: #14532d; text-transform: none; letter-spacing: 0; }
.langbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #e2ddcf; }
.langbar span { display: block; height: 100%; }
.langs { list-style: none; padding: 0; margin: 10px 0 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.langs i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.langs span { color: #5d594f; }
.tree { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid #dcd6c7; font: 13px/1.8 var(--mono); columns: 2; column-gap: 20px; }
.tree li { break-inside: avoid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree li::before { content: "· "; color: #b0a993; }
.tree li.dir { font-weight: 600; color: #14532d; }
.tree li.dir::before { content: "▸ "; }
.tree li.more { color: #5d594f; }
.repo-f { font: 12px var(--pixel); color: #5d594f; margin: 10px 0 0; }
.repo-wrap { max-width: 640px; }

/* previous / next application note */
.annav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; padding-top: 18px; border-top: 5px solid var(--mask); }
.annav a { display: grid; grid-template-columns: 128px 1fr; grid-template-rows: auto 1fr; gap: 3px 16px; text-decoration: none; color: var(--ink); align-content: start; }
.annav img { grid-row: 1 / span 2; width: 128px; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--ink); background: var(--fig); }
.annav .next { grid-template-columns: 1fr 128px; text-align: right; }
.annav .next img { grid-column: 2; grid-row: 1 / span 2; }
.annav .next .k, .annav .next .t { grid-column: 1; }
.annav .k { font: 12px var(--pixel); color: var(--mask); }
.annav .t { font-weight: 700; font-size: 19px; line-height: 1.2; }
.annav a:hover .t { color: var(--hover); text-decoration: underline; }

/* ---------- rendered markdown ---------- */
.prose { max-width: 780px; }
.prose h2 { font: 700 22px var(--sans); margin: 36px 0 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.prose h3 { font-size: 18px; margin: 26px 0 8px; }
.prose h4 { font-size: 16px; margin: 20px 0 6px; }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--hair); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .3em; }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--th); padding: 1px 4px; border-radius: 2px; }
.prose pre { background: var(--th); padding: 12px 14px; overflow-x: auto; line-height: 1.45; border-left: 3px solid var(--mask); }
.prose pre code { background: none; padding: 0; font-size: 13px; }
.prose blockquote { margin: 0 0 1em; padding: 4px 0 4px 16px; border-left: 3px solid var(--rule); color: var(--muted); }
.prose hr { display: none; }
.table-wrap { overflow-x: auto; margin: 0 0 1.2em; }
.prose table { border-collapse: collapse; font-size: 14.5px; line-height: 1.4; min-width: 100%; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.prose th { font: 400 12px var(--pixel); text-transform: uppercase; text-align: left; background: var(--th); padding: 7px 10px; border-bottom: 1px solid var(--ink); }
.prose td { padding: 7px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }

.lost { padding: 60px 0; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .title-row, .desc-grid, .pins, .overview { grid-template-columns: 1fr; gap: 26px; }
  .lcd { justify-self: stretch; max-width: none; }
  .apps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .sheet { padding: 0 16px 32px; }
  .p1 { grid-template-columns: 1fr; }
  .p1 > div:first-child { border-right: 0; padding-right: 0; margin-right: 0; }
  .toc ol { columns: 1; }
  .apps, .gallery { grid-template-columns: 1fr; }
  .modes { grid-template-columns: 1fr; }
  .modes dt { border-bottom: 0; padding-bottom: 0; }
  .blocks { flex-direction: column; align-items: flex-start; gap: 24px; }
  .blocks li:not(:last-child)::after { right: auto; left: 22px; top: auto; bottom: -23px; width: 0; height: 17px; border-top: 0; border-left: 1.5px solid var(--ink); }
  .blocks li:not(:last-child)::before { right: auto; left: 17.5px; top: auto; bottom: -24px; border: 5px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
  .runhead nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- application notes on small screens ---------- */
@media (max-width: 900px) {
  .an-hero.has-media { grid-template-columns: 1fr; gap: 28px; }
  .an-hero > figure, .an-hero > .repo { position: static; }
}
@media (max-width: 640px) {
  .life li { font-size: 9px; letter-spacing: 0; }
  .life li.now::before { display: none; }
  .annav { grid-template-columns: 1fr; }
  .annav a, .annav .next { grid-template-columns: 96px 1fr; text-align: left; }
  .annav img, .annav .next img { width: 96px; grid-column: 1; }
  .annav .next .k, .annav .next .t { grid-column: 2; }
  .tree { columns: 1; }
  ul.files li { grid-template-columns: 48px 1fr; }
  ul.files .size { grid-column: 2; }
  .fig.flow .blocks li:not(:last-child)::after { border-left-color: #15140f; }
  .fig.flow .blocks li:not(:last-child)::before { border-top-color: #15140f; border-left-color: transparent; }
  .demo iframe { height: 72vh; }
  .docs { grid-template-columns: 1fr 1fr; gap: 12px; }
  .doc { min-height: 196px; padding: 0 12px 12px; }
  .docbar { margin: 0 -12px 8px; padding-left: 12px; }
  .doct { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .life li.now::before { animation: none; } }