/* mygekko.si, draft c: hardware datasheet. Fonts are self-hosted; the hero word is a PNG mask only. */
@font-face { font-family: "Newsreader"; src: url("assets/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #0a0d0b; --surface: #0f1310; --raise: #151a16; --line: #1d2420; --line-2: #2a332e;
  /* t2 for any small text people need to read; t3 (3.8:1) only for decoration or duplicates */
  --t1: #e8efe9; --t2: #9aa39d; --t3: #67706a;
  --acc: #00ff66; --warn: #ffb84d; --err: #ff5e7a;
  /* the hero at load: a blue X-ray of the word on light film */
  --x-film: #e8eef7; --x-haze: #2f5ee0;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gut: 40px; --max: 1280px; --rail: 200px; --colgap: 56px;
  --fast: 140ms; --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
@media (max-width: 1080px) { :root { --rail: 150px; --colgap: 40px; --gut: 32px; } }
@media (max-width: 760px) { :root { --gut: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--t2); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
code, .m { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font-size: .9em; color: var(--t1); }
p { margin: 0 0 1em; }
h2, h3 { margin: 0; font-weight: 400; color: var(--t1); }
::selection { background: var(--acc); color: var(--bg); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.no-js .copy, .no-js .th-replay { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: 12px; z-index: 100; background: var(--acc); color: var(--bg); padding: 8px 12px; border-radius: 4px; font-weight: 600; text-decoration: none; }
.skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 4px; font: 500 15px/1 var(--sans); text-decoration: none; border: 1px solid transparent; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.btn-primary { background: var(--acc); color: var(--bg); }
.btn-primary:hover { background: #5cff9a; }
.btn-ghost { border-color: var(--line-2); color: var(--t1); }
.btn-ghost:hover { border-color: var(--t3); background: var(--raise); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }

/* ---------- masthead (appears once the hero is done) ---------- */
/* hidden with transform AND visibility, so its links leave the tab order while it is off screen;
   visibility flips after the slide when hiding, and at once when showing */
.masthead { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); transform: translateY(-101%); visibility: hidden; transition: transform 180ms var(--ease), visibility 0s linear 180ms; }
.masthead[data-shown="true"] { transform: none; visibility: visible; transition: transform 180ms var(--ease), visibility 0s; }
.mh-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); height: 56px; display: flex; align-items: center; gap: 24px; }
.mh-brand { flex: none; }
.mh-brand img { height: 20px; width: auto; }
.mh-doc { font: 400 12px/1 var(--mono); color: var(--t2); white-space: nowrap; }
.mh-doc i { font-style: normal; color: var(--line-2); padding: 0 4px; }
.mh-nav { display: flex; gap: 4px; margin-left: auto; }
.mh-nav a { font-size: 14px; color: var(--t2); text-decoration: none; padding: 6px 10px; border-radius: 4px; transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.mh-nav a:hover { color: var(--t1); background: var(--raise); }
.mh-nav a[aria-current="true"] { color: var(--t1); box-shadow: inset 0 -1px 0 var(--acc); border-radius: 0; }
.mh-inner > .btn { flex: none; }
/* below 980px: a contents button that opens the section list */
.mh-toc-btn { display: none; align-items: center; gap: 10px; min-width: 0; height: 36px; margin-left: auto; padding: 0 4px 0 0; background: none; border: 0; color: var(--t1); font: 400 14px/1 var(--sans); cursor: pointer; }
.mt-cur { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mt-n { font: 400 12px/1 var(--mono); color: var(--acc); }
.mt-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-open { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 4px; font: 500 12px/1 var(--sans); color: var(--t2); transition: color var(--fast), border-color var(--fast); }
.mt-open::after { content: ""; width: 5px; height: 5px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--fast) var(--ease), margin var(--fast) var(--ease); }
.mh-toc-btn:hover .mt-open, .mh-toc-btn[aria-expanded="true"] .mt-open { color: var(--t1); border-color: var(--t2); }
.mh-toc-btn[aria-expanded="true"] .mt-open::after { transform: rotate(-135deg); margin-top: 3px; }
.toc { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line-2); max-height: calc(100svh - 56px); overflow-y: auto; }
.toc ol { list-style: none; margin: 0 auto; padding-top: 4px; padding-bottom: 12px; }
.toc li + li { border-top: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; padding: 11px 0; text-decoration: none; color: var(--t1); }
.toc-n { grid-row: span 2; font: 400 12px/22px var(--mono); color: var(--t2); }
.toc-t { font: 400 16px/22px var(--sans); }
.toc-p { font-size: 13.5px; line-height: 20px; color: var(--t2); }
.toc a:hover .toc-t { color: var(--acc); }
.toc a[aria-current="true"] .toc-n, .toc a[aria-current="true"] .toc-t { color: var(--acc); }
@media (max-width: 980px) {
  .mh-nav { display: none; }
  .mh-toc-btn { display: flex; }
  .mh-inner { gap: 16px; }
}
@media (min-width: 981px) { .toc { display: none; } }
@media (max-width: 520px) { .mh-doc { display: none; } }
@media (max-width: 440px) { .mt-cur { display: none; } }

/* ---------- HERO ---------- */
.hero { position: relative; z-index: 0; height: 350svh; background: var(--bg); }
.hero-pin { position: sticky; top: 0; height: 100svh; }
/* layers run 30svh past the pin so a collapsing mobile address bar never shows a seam */
.layer { position: absolute; left: 0; right: 0; top: 0; bottom: -30svh; }
.layer-norm { background: var(--bg); }
/* the film and the X-ray letters fade out on their own curves (main.js writes --film / --xray),
   so the light film goes dark first and the blue letters stay readable while they turn green */
.layer-film { background: var(--x-film); opacity: var(--film, 1); will-change: opacity; }
.layer-xray { opacity: var(--xray, 1); will-change: opacity; }
.word, .haze {
  position: absolute; left: 0; top: 0; width: 100%; height: 100svh;
  -webkit-mask: url("assets/gekko-word-wide.webp") 0 0 / 100% 100% no-repeat;
  mask: url("assets/gekko-word-wide.webp") 0 0 / 100% 100% no-repeat;
}
.layer-norm .word { background: var(--acc); }
/* X-ray letters: crisp outline from the word mask, density inside from the fill texture */
.layer-xray .word { background: url("assets/gekko-xray-fill-wide.webp") 0 0 / 100% 100% no-repeat; }
/* scatter around the letters, and film grain over the whole sheet */
.haze { background: var(--x-haze); opacity: .2; -webkit-mask-image: url("assets/gekko-xray-haze-wide.webp"); mask-image: url("assets/gekko-xray-haze-wide.webp"); }
.grain { position: absolute; inset: 0; background: url("assets/xray-grain.png") 0 0 / 128px 128px repeat; opacity: .07; mix-blend-mode: multiply; }
@media (max-aspect-ratio: 1/1) {
  .word { -webkit-mask-image: url("assets/gekko-word-tall.webp"); mask-image: url("assets/gekko-word-tall.webp"); }
  .layer-xray .word { background-image: url("assets/gekko-xray-fill-tall.webp"); }
  .haze { -webkit-mask-image: url("assets/gekko-xray-haze-tall.webp"); mask-image: url("assets/gekko-xray-haze-tall.webp"); }
}
.no-js .hero { height: 100svh; }
.no-js .layer-film, .no-js .layer-xray { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; }
  .layer-film, .layer-xray { display: none; }
}
/* Windows High Contrast (forced colours) swaps every background colour for the system one, and the
   word is a mask over a background colour, so it would vanish. The hero is a picture of a word in
   two high-contrast pairs (blue on film, green on black): keep its own colours. */
@media (forced-colors: active) {
  .hero .layer, .hero .word, .hero .haze { forced-color-adjust: none; }
  /* pressed segments would otherwise look exactly like the others */
  .gfilter button[aria-pressed="true"], .seg button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* body copy: no one-word last lines; product names and part numbers never split at their hyphen */
p, li, dd, figcaption, .lead { text-wrap: pretty; }
.nw { white-space: nowrap; }

/* everything after the hero sits above the layer overhang */
main { position: relative; z-index: 1; background: var(--bg); }

/* ---------- doc bar + title block ---------- */
.docbar { border-bottom: 1px solid var(--line); }
.docbar-in { display: flex; justify-content: space-between; gap: 24px; height: 44px; align-items: center; font: 400 12px/1 var(--mono); color: var(--t2); }
@media (max-width: 760px) { .db-mid { display: none; } }

.title-block { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; padding-top: 104px; padding-bottom: 120px; align-items: end; }
/* three explicit lines on wide screens: "Your AI assistant, / plugged into / the board." */
.tb-h { font-family: var(--serif); font-weight: 360; font-size: clamp(40px, 6.6vw, 100px); line-height: .98; letter-spacing: -.022em; text-wrap: balance; }
.tb-h span { display: block; }
.tb-lead { font-family: var(--serif); font-weight: 360; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: var(--t2); max-width: 36em; margin: 36px 0 36px; }
.tb-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.devinfo { border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); }
.devinfo-t { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line-2); font: 500 13px/1.2 var(--sans); color: var(--t1); display: flex; justify-content: space-between; }
.devinfo dl { margin: 0; }
.devinfo dl > div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.devinfo dt { color: var(--t2); }
.devinfo dd { margin: 0; color: var(--t1); }
.devinfo sup, .fn sup { font: 500 10px/0 var(--mono); color: var(--warn); margin-left: 2px; }
.st-dev { color: var(--warn); }
.fn { margin: 0; padding: 12px 16px; font-size: 12.5px; line-height: 1.5; color: var(--t2); }
.fn code { color: var(--t1); }
@media (max-width: 900px) {
  .title-block { grid-template-columns: 1fr; gap: 56px; padding-top: 72px; padding-bottom: 88px; }
}

/* ---------- section scaffold ---------- */
.sec { border-top: 1px solid var(--line-2); padding: 104px 0 120px; }
.sec-grid { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--colgap); }
.rail { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; position: sticky; top: 88px; align-self: start; }
.rail-n { font: 400 13px/1 var(--mono); color: var(--acc); }
/* the datasheet label, then the same thing in plain words */
.rail-t { font: 400 13px/1.4 var(--sans); color: var(--t2); }
.rail-p { display: block; color: var(--t1); }
.sec-main { min-width: 0; }
.sec h2 { font-family: var(--serif); font-weight: 380; font-size: clamp(36px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -.018em; max-width: 17ch; text-wrap: balance; margin-bottom: 28px; }
.lead { font-family: var(--serif); font-weight: 360; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; color: var(--t1); }
.lead.narrow { max-width: 38em; }
.lead code { font-size: .78em; }
.h-sub { font: 500 14px/1.3 var(--sans); color: var(--t1); margin: 36px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.feat { list-style: none; margin: 0 0 28px; padding: 0; }
.feat li { position: relative; padding: 7px 0 7px 22px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--t1); }
/* a text dash, not a 1px box: a box on a fractional row offset anti-aliases into grey on every other row */
.feat li::before { content: "\2013"; position: absolute; left: 1px; top: 7px; color: var(--acc); line-height: inherit; }
.fig { margin: 0; }
.fig figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--t2); max-width: 46em; }
.fig figcaption b, .pt caption b, .spec caption b { color: var(--t1); font-weight: 600; }
@media (max-width: 760px) {
  .sec { padding: 72px 0 88px; }
  .sec-grid { grid-template-columns: 1fr; }
  .rail { position: static; flex-direction: row; align-items: baseline; gap: 12px; padding: 0 0 18px; }
  .rail-p { display: inline; }
}

/* ---------- 1 description ---------- */
.desc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; align-items: start; }
.desc-text > p:not(.lead) { max-width: 36em; }
.desc-text > .pull { margin: 32px 0 20px; padding: 4px 0 4px 24px; border-left: 2px solid var(--acc); font: 380 clamp(26px, 2.6vw, 36px)/1.15 var(--serif); letter-spacing: -.014em; color: var(--t1); max-width: 18ch; text-wrap: balance; }
.blockdia { width: 100%; height: auto; overflow: visible; }
.bd-wire path { fill: none; stroke: var(--t3); stroke-width: 1.25; }
.bd-wire .dash { stroke-dasharray: 4 4; }
.bd-lab text { font: 400 11px var(--mono); fill: var(--t2); }
.bd-box rect { fill: var(--surface); stroke: var(--line-2); stroke-width: 1; }
.bd-core rect { stroke: var(--acc); fill: var(--raise); }
.bd-box .bt { font: 500 14px var(--sans); fill: var(--t1); }
.bd-box .bs { font: 400 11px var(--mono); fill: var(--t2); }
.fig-block { padding-top: 8px; position: sticky; top: 96px; }
@media (max-width: 1080px) { .desc-cols { grid-template-columns: 1fr; gap: 40px; } .fig-block { position: static; max-width: 480px; } }

/* ---------- 2 application: typed transcript ---------- */
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 48px; margin-top: 48px; align-items: start; }
.term { border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); overflow: hidden; }
.term-head { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.th-t { color: var(--t1); font-weight: 500; }
.th-m { font-family: var(--mono); font-size: 12px; color: var(--t2); }
.th-replay { margin-left: auto; height: 28px; padding: 0 10px; background: none; border: 1px solid var(--line-2); border-radius: 4px; color: var(--t2); font: 500 12px var(--sans); cursor: pointer; transition: color var(--fast), border-color var(--fast); }
.th-replay:hover { color: var(--t1); border-color: var(--t3); }
.term-body { list-style: none; margin: 0; padding: 8px 0; font-size: 15px; }
.tl { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tl:last-child { border-bottom: 0; }
.who { font: 400 12px/24px var(--mono); color: var(--t2); }
.tl-user .say { color: var(--t1); font-family: var(--mono); font-size: 14px; line-height: 24px; }
.tl-ai .say { color: var(--t1); font-family: var(--serif); font-size: 19px; line-height: 1.5; font-weight: 380; }
.tl-ai .who { color: var(--acc); }
.say { margin: 0; }
.call p { margin: 0; line-height: 24px; }
.fn-name { color: var(--acc); font-size: 14px; }
.args { font-family: var(--mono); font-size: 13px; color: var(--t2); margin-left: 8px; }
.args b { color: var(--t1); font-weight: 500; }
.cap { display: flex; align-items: center; gap: 12px; margin-top: 10px; font: 400 12px var(--mono); color: var(--t2); }
.cap-bar { position: relative; width: 160px; height: 4px; background: var(--line-2); border-radius: 1px; overflow: hidden; }
.cap-bar i { position: absolute; inset: 0; background: var(--acc); transform-origin: 0 50%; transform: scaleX(var(--cp, 1)); }
.cap-s { color: var(--t1); font-weight: 500; }
.res { margin: 0; font: 400 13px/1.5 var(--mono); }
.res > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 1px 0; }
.res dt { color: var(--t2); }
.res dd { margin: 0; color: var(--t1); overflow-wrap: anywhere; }
.res .err { color: var(--err); }
/* typing states (JS only). Lines that have not played yet stay laid out but invisible, so the box
   never reflows; before it plays, the first line shows an empty prompt with a blinking caret. */
.js .term[data-run] .tl { transition: opacity 120ms linear; }
.js .term:not([data-run="done"]) .tl:not(.on) { opacity: 0; }
.js .term .res > div { transition: opacity 120ms linear; }
.js .term:not([data-run="done"]) .tl-res .res > div:not(.on) { opacity: 0; }
/* the untyped rest of a sentence is see-through, not visibility:hidden, so screen readers and
   find-in-page always get the whole sentence while the eye watches it being typed */
.type .rest { color: transparent; }
.caret { display: inline-block; width: .55em; height: 1.05em; margin-right: -.55em; margin-bottom: -.18em; background: var(--acc); }
.term.near .caret.blink { animation: caret-blink 1s steps(1) infinite; }   /* only near the viewport: an off-screen blink still costs a style pass per frame */
@keyframes caret-blink { 50% { opacity: 0; } }
.notes { padding-top: 4px; }
.note { position: relative; padding: 0 0 18px 28px; margin: 0 0 18px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.55; transition: color var(--fast) linear; }
.note:last-child { border-bottom: 0; }
.note-n { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border: 1px solid var(--line-2); border-radius: 4px; font: 500 11px/16px var(--mono); text-align: center; color: var(--t2); transition: color var(--fast) linear, border-color var(--fast) linear, background-color var(--fast) linear; }
/* the note for the line being typed lights up */
.note.is-on { color: var(--t1); }
.note.is-on .note-n { color: var(--bg); background: var(--acc); border-color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .caret.blink { animation: none; } }
@media (max-width: 1080px) { .app-grid { grid-template-columns: 1fr; gap: 32px; } .notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .note { border-bottom: 0; padding-bottom: 0; } }
@media (max-width: 760px) {
  .tl { grid-template-columns: 1fr; gap: 4px; padding: 14px; }
  .who { line-height: 18px; }
  .args { display: block; margin: 2px 0 0; }
  .tl-ai .say { font-size: 18px; }
  .notes { grid-template-columns: 1fr; gap: 0; }
  .note { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
}

/* ---------- 3 tools: DIP + pin table ---------- */
#tools .rail, #boards .rail { position: static; }
.tools-body { grid-column: 1 / -1; margin-top: 48px; }
.gfilter { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line-2); border-radius: 4px; width: fit-content; max-width: 100%; margin-bottom: 40px; overflow: hidden; }
.gfilter button { background: none; border: 0; border-right: 1px solid var(--line-2); color: var(--t2); font: 500 13px/1 var(--sans); height: 38px; padding: 0 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color var(--fast), background-color var(--fast); }
.gfilter button:last-child { border-right: 0; }
.gfilter button span { font: 400 12px var(--mono); color: var(--t2); }
.gfilter button:hover { color: var(--t1); background: var(--raise); }
.gfilter button[aria-pressed="true"] { background: var(--t1); color: var(--bg); }
.gfilter button[aria-pressed="true"] span { color: var(--bg); opacity: .6; }
/* segmented controls clip their children to the rounded frame, so the focus ring is drawn inside the
   button: green at the edge, then a dark band so it still reads on the light pressed segment */
.seg button:focus-visible { outline-offset: -2px; border-radius: 0; box-shadow: inset 0 0 0 4px var(--bg); }
@media (min-width: 761px) { .gfilter button:focus-visible { outline-offset: -2px; border-radius: 0; box-shadow: inset 0 0 0 4px var(--bg); } }
.tools-grid { display: grid; grid-template-columns: minmax(0, 456px) minmax(0, 1fr); gap: 64px; align-items: start; }
.fig-dip { position: sticky; top: 88px; }
.dip { width: 100%; height: auto; overflow: visible; }
.dip-body { fill: var(--raise); stroke: var(--line-2); }
.dip-notch { fill: var(--bg); stroke: var(--line-2); }
.dip-dot { fill: var(--t3); }
.dip-mark { font: 400 12px var(--mono); fill: var(--t3); letter-spacing: .04em; }
.dip .stub { fill: var(--t3); transition: fill var(--fast); }
.dip .pnum { font: 400 10px var(--mono); fill: var(--t2); }
.dip .plab { font: 400 12px var(--mono); fill: var(--t1); transition: fill var(--fast), opacity var(--fast); }
.dip .pin { cursor: default; transition: opacity var(--fast); }
.dip .pin.hl .stub { fill: var(--acc); }
.dip .pin.hl .plab { fill: var(--acc); }
/* Table 1: a real table, one tbody per tool group */
.pt { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line-2); font-size: 14.5px; }
.pt caption { caption-side: bottom; text-align: left; padding-top: 18px; font-size: 13px; line-height: 1.5; color: var(--t2); }
.pt th, .pt td { text-align: left; font-weight: 400; vertical-align: baseline; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); }
.pt thead th { font: 400 12px var(--sans); color: var(--t2); border-bottom-color: var(--line-2); }
.pt .pt-n { width: 40px; font: 400 12px var(--mono); color: var(--t2); text-align: right; }
.pt .pt-name { width: 190px; }
.pt-name code { color: var(--t1); font-size: 13.5px; }
.pt .pt-fn { color: var(--t2); line-height: 1.5; }
.pt .pt-ok, .pt thead th:last-child { width: 72px; padding-right: 0; }
.pt .pt-ok { font: 400 12px var(--mono); color: var(--warn); }
.pt-row { transition: background-color var(--fast); }
.pt-row :is(td, th) { transition: opacity var(--fast); }
.pt-row:focus { outline: none; }
.pt-row:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.pt-group th { padding: 28px 0 8px 56px; border-bottom-color: var(--line-2); transition: opacity var(--fast); }
.pt tbody:first-of-type .pt-group th { padding-top: 18px; }
.pt-gn { font: 500 14px var(--sans); color: var(--t1); }
.pt-gm { float: right; font: 400 12px/22px var(--mono); color: var(--t2); }
.pt-row.hl { background: var(--raise); }
.pt-row.hl .pt-name code, .pt-row.hl .pt-n { color: var(--acc); }
/* group filter: the chosen group stays, the rest dim */
#tools:not([data-g="all"]) .pin { opacity: .22; }
#tools:not([data-g="all"]) .pt tbody :is(td, th) { opacity: .28; }
#tools[data-g="io"] .pin[data-g="io"], #tools[data-g="bld"] .pin[data-g="bld"], #tools[data-g="dbg"] .pin[data-g="dbg"],
#tools[data-g="chk"] .pin[data-g="chk"], #tools[data-g="live"] .pin[data-g="live"], #tools[data-g="set"] .pin[data-g="set"] { opacity: 1; }
#tools[data-g="io"] .pin[data-g="io"] .stub, #tools[data-g="bld"] .pin[data-g="bld"] .stub, #tools[data-g="dbg"] .pin[data-g="dbg"] .stub,
#tools[data-g="chk"] .pin[data-g="chk"] .stub, #tools[data-g="live"] .pin[data-g="live"] .stub, #tools[data-g="set"] .pin[data-g="set"] .stub { fill: var(--acc); }
#tools[data-g="io"] .pt tbody[data-g="io"] :is(td, th), #tools[data-g="bld"] .pt tbody[data-g="bld"] :is(td, th), #tools[data-g="dbg"] .pt tbody[data-g="dbg"] :is(td, th),
#tools[data-g="chk"] .pt tbody[data-g="chk"] :is(td, th), #tools[data-g="live"] .pt tbody[data-g="live"] :is(td, th), #tools[data-g="set"] .pt tbody[data-g="set"] :is(td, th) { opacity: 1; }
@media (max-width: 1080px) {
  .tools-grid { grid-template-columns: 1fr; gap: 48px; }
  .fig-dip { position: static; max-width: 456px; }
}
/* the joined filter wraps below about 900px; switch to separate chips before it does */
@media (max-width: 900px) {
  .gfilter { border: 0; gap: 6px; width: auto; overflow: visible; }
  .gfilter button { border: 1px solid var(--line-2); border-radius: 4px; height: 34px; padding: 0 10px; }
  .gfilter button:last-child { border-right: 1px solid var(--line-2); }
}
@media (max-width: 760px) {
  .tools-body { margin-top: 32px; }
  /* the table reflows into two-line rows; the caption stays underneath */
  .pt { display: flex; flex-direction: column; }
  .pt caption { display: block; order: 2; }
  .pt thead { display: none; }
  .pt tbody, .pt .pt-group { display: block; }
  .pt .pt-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "n name ok" ". fn fn"; gap: 2px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .pt-row :is(td, th) { display: block; width: auto; padding: 0; border: 0; }
  .pt .pt-n { grid-area: n; width: auto; }
  .pt .pt-name { grid-area: name; width: auto; }
  .pt .pt-fn { grid-area: fn; font-size: 14px; }
  .pt .pt-ok { grid-area: ok; width: auto; }
  .pt-group th { display: block; padding-left: 40px; }
}
/* below 560px the full chip would shrink its labels under 11px, so phones get the same chip drawn
   narrower (numbers inside the body, 11-unit labels) at roughly 1:1 */
.dip-sm, .cap-sm { display: none; }
.dip-sm .plab { font-size: 11px; }
.dip-sm .pnum { font-size: 9.5px; }
.dip-sm .dip-mark { font-size: 9px; letter-spacing: .02em; }
@media (max-width: 560px) {
  .dip-lg, .cap-lg { display: none; }
  .dip-sm { display: block; max-width: 400px; }
  .cap-sm { display: inline; }
  .tools-grid { gap: 32px; }
}

/* ---------- 4 wiring ---------- */
.wire-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 56px; margin-top: 48px; align-items: start; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
.seg button { background: none; border: 0; color: var(--t2); font: 500 13px/1 var(--sans); height: 36px; padding: 0 14px; cursor: pointer; transition: color var(--fast), background-color var(--fast); }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button:hover { color: var(--t1); background: var(--raise); }
.seg button[aria-pressed="true"] { background: var(--t1); color: var(--bg); }
.wiring { width: 100%; height: auto; overflow: visible; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); padding: 12px; }
.wiring .part rect, .wiring .part circle { fill: var(--raise); stroke: var(--line-2); stroke-width: 1.25; }
.wiring .part .mesh { fill: none; stroke: var(--line-2); stroke-dasharray: 2 3; }
.wiring .pn { font: 500 14px var(--sans); fill: var(--t1); }
.wiring .ps { font: 400 11px var(--mono); fill: var(--t2); }
.wiring .pl text { font: 400 11px var(--mono); fill: var(--t2); }
.wiring .stub { stroke: var(--t3); stroke-width: 3; fill: none; }
.wiring .w { fill: none; stroke: var(--t3); stroke-width: 1.75; stroke-linejoin: round; transition: stroke 180ms var(--ease), opacity 120ms linear; }
.wiring .w-pwr { stroke: var(--t2); }
.wiring .rail-l { font: 400 11px var(--mono); fill: var(--t2); }
.wiring .res { fill: var(--bg); stroke: var(--t1); stroke-width: 1.5; }
.wiring .rl, .wiring .rv { font: 400 11px var(--mono); fill: var(--t1); }
.wiring .jn { fill: var(--t1); }
.wiring .vt-v { font: 600 18px var(--mono); transition: fill 180ms var(--ease); }
.wiring .vt-l { font: 400 11px var(--mono); fill: var(--t2); }
.wiring .fix { transition: opacity 160ms linear; }
.wiring .w-r2 { stroke: var(--t1); stroke-dasharray: 120; transition: stroke-dashoffset 260ms var(--ease) 80ms; }
/* state: as wired */
[data-state="wired"] .wiring .w-echo-a, [data-state="wired"] .wiring .w-bridge, [data-state="wired"] .wiring .w-echo-b { stroke: var(--err); stroke-width: 2.25; }
[data-state="wired"] .wiring .fix { opacity: 0; }
[data-state="wired"] .wiring .w-r2 { stroke-dashoffset: 120; }
[data-state="wired"] .wiring .vt-v { fill: var(--err); }
/* state: divider fitted */
[data-state="fixed"] .wiring .w-bridge { opacity: 0; }
[data-state="fixed"] .wiring .w-echo-a { stroke: var(--t2); }
[data-state="fixed"] .wiring .w-echo-b { stroke: var(--acc); stroke-width: 2.25; }
[data-state="fixed"] .wiring .vt-v { fill: var(--acc); }
[data-state="fixed"] .wiring .w-r2 { stroke-dashoffset: 0; }
.listing { border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); }
.lst-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.lst-head code { color: var(--acc); font-size: 13.5px; }
.lst-st { font: 500 12px var(--mono); color: var(--err); transition: color var(--fast) linear; }
[data-state="fixed"] .lst-st { color: var(--acc); }
.lst { margin: 0; padding: 10px 0 12px; font: 400 13px/1.55 var(--mono); }
.lst > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 2px 16px; }
.lst > div.gap { margin-top: 10px; }
.lst dt { color: var(--t2); }
.lst dd { margin: 0; color: var(--t1); }
.lst .hl dd, .lst .hl dt { color: var(--err); }
.lst .e dt, .lst .e b { color: var(--err); font-weight: 500; }
.lst .f dt { color: var(--acc); }
.lst .pass dt { color: var(--acc); }
.lst dd.bad { color: var(--err); }
.lst dd.good { color: var(--acc); }
/* the result card follows the figure's state */
[data-state="wired"] .only-fixed, [data-state="fixed"] .only-wired { display: none; }
.no-js .seg { display: none; }
.side-p { margin-top: 24px; font-size: 15px; max-width: 34em; }
@media (max-width: 1080px) { .wire-grid { grid-template-columns: 1fr; gap: 40px; } .fig-wire { max-width: 480px; } }
@media (max-width: 560px) {
  /* the figure renders at ~0.75 scale on a phone, so its type is set larger in viewBox units */
  .wiring { padding: 6px; }
  .wiring .pl text, .wiring .rl, .wiring .rv, .wiring .rail-l, .wiring .vt-l { font-size: 14px; }
  .wiring .ps { font-size: 13.5px; }
  .wiring .pn { font-size: 17px; }
  .wiring .vt-v { font-size: 22px; }
  .bd-box .bs, .bd-lab text { font-size: 11.5px; }
}

/* ---------- 5 live ---------- */
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; margin-top: 16px; align-items: start; }
.live-what > p { font-size: 15px; max-width: 34em; }
.kv { width: 100%; border-collapse: collapse; font-size: 15px; }
.kv th { text-align: left; font-weight: 500; color: var(--t1); width: 120px; padding: 10px 16px 10px 0; vertical-align: baseline; border-bottom: 1px solid var(--line); }
.kv td { color: var(--t2); padding: 10px 0; border-bottom: 1px solid var(--line); }
.kv-2 th { width: 140px; }
.kv-2 th .m { color: var(--t2); font-weight: 400; font-size: 12px; margin-left: 6px; }
/* Figure 5: a working sketch of the Panel tab, drawn like the other figures */
.fig-panel { margin-top: 52px; }
.pnl { border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); }
.pnl-top { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line-2); font-size: 13px; font-weight: 500; color: var(--t1); }
.pnl-top .m { font-size: 12px; font-weight: 400; color: var(--t2); }
.pnl-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 18px;
  grid-template-areas: "sl sl sl sl ga ga" "gr gr gr gr ga ga" "tg tg ld ld co co";
  background-image: radial-gradient(var(--line-2) 1px, transparent 1.3px); background-size: 16px 16px; background-position: 9px 9px;
}
.pnl-slider { grid-area: sl; } .pnl-gauge { grid-area: ga; } .pnl-graph { grid-area: gr; }
.pnl-toggle { grid-area: tg; } .pnl-led { grid-area: ld; } .pnl-color { grid-area: co; }
.pnl-tile { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 10px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); }
.pnl-name { display: flex; justify-content: space-between; gap: 8px; font: 400 11.5px/1.2 var(--mono); color: var(--t2); }
.pnl-name output { color: var(--t1); font-size: 12px; }
/* slider */
.pnl-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.pnl-slider input::-webkit-slider-runnable-track { height: 4px; border-radius: 1px; background: linear-gradient(to right, var(--acc) var(--fill, 50%), var(--line-2) var(--fill, 50%)); }
.pnl-slider input::-moz-range-track { height: 4px; border-radius: 1px; background: var(--line-2); }
.pnl-slider input::-moz-range-progress { height: 4px; border-radius: 1px; background: var(--acc); }
.pnl-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 22px; margin-top: -9px; border: 0; border-radius: 2px; background: var(--t1); }
.pnl-slider input::-moz-range-thumb { width: 14px; height: 22px; border: 0; border-radius: 2px; background: var(--t1); }
.pnl-slider input:focus-visible { outline-offset: 2px; }
/* gauge */
.pnl-gauge { align-content: space-between; }
.pnl-gauge svg { width: 100%; max-width: 132px; height: auto; margin: 4px auto 0; }
.g-track, .g-val { fill: none; stroke-width: 8; }
.g-track { stroke: var(--line-2); }
.g-val { stroke: var(--acc); stroke-dasharray: 100; stroke-dashoffset: 50; transition: stroke-dashoffset 90ms linear; }
.g-num { margin-top: -6px; font-size: 13px; color: var(--t1); text-align: center; }
/* graph */
.pnl-graph svg { width: 100%; height: 56px; }
.pnl-graph polyline { fill: none; stroke: var(--acc); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* toggle */
.pnl-switch { position: relative; width: 52px; height: 28px; padding: 0; border: 1px solid var(--t2); border-radius: 4px; background: none; cursor: pointer; transition: border-color var(--fast) var(--ease); }
.pnl-switch span { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 2px; background: var(--t2); transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.pnl-switch[aria-checked="true"] { border-color: var(--acc); }
.pnl-switch[aria-checked="true"] span { transform: translateX(24px); background: var(--acc); }
/* LED */
.pnl-ledbulb { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--raise); transition: background-color 120ms linear, border-color 120ms linear; }
.pnl-ledbulb.is-on { background: var(--led, var(--acc)); border-color: transparent; }
/* colour picker */
.pnl-color input { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; padding: 0; border: 1px solid var(--line-2); border-radius: 4px; background: none; cursor: pointer; }
.pnl-color input::-webkit-color-swatch-wrapper { padding: 3px; }
.pnl-color input::-webkit-color-swatch { border: 0; border-radius: 2px; }
.pnl-color input::-moz-color-swatch { border: 0; border-radius: 2px; }
@media (max-width: 1080px) { .live-grid { grid-template-columns: 1fr; gap: 40px; } .fig-panel { margin-top: 0; max-width: 520px; } }
@media (max-width: 560px) {
  .pnl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "sl sl sl" "ga gr gr" "tg ld co"; gap: 8px; padding: 12px; }
  .pnl-long { display: none; }
}

/* ---------- 6 iot ---------- */
.iot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: start; }
.iot-text .btn { margin-top: 4px; }
.fig-timing { max-width: 440px; }
.timing { width: 100%; height: auto; overflow: visible; }
.tm-lab text { font: 500 13px var(--sans); fill: var(--t1); }
.tm-lab .tm-sub { font: 400 11px var(--mono); fill: var(--t2); }
.tm-sig { fill: none; stroke: var(--t2); stroke-width: 1.75; }
.tm-sig.acc { stroke: var(--acc); }
.tm-guide { stroke: var(--line-2); stroke-dasharray: 3 4; }
.tm-dim, .tm-tick { stroke: var(--t1); stroke-width: 1; fill: none; }
.tm-val { font: 500 14px var(--mono); fill: var(--t1); }
.spec { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 36px; }
.spec caption { text-align: left; caption-side: bottom; padding-top: 14px; font-size: 13px; color: var(--t2); }
.spec th, .spec td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.spec thead th { font: 400 12px var(--sans); color: var(--t2); border-bottom: 1px solid var(--line-2); padding-top: 0; }
.spec tbody th { font-weight: 500; color: var(--t1); }
.spec td { color: var(--t2); }
.spec .r { text-align: right; padding-right: 0; }
.spec td.m { color: var(--t1); font-size: 13px; white-space: nowrap; }
.spec td.acc { color: var(--acc); }
@media (max-width: 1080px) { .iot-grid { grid-template-columns: 1fr; gap: 48px; } .iot-spec { max-width: 560px; } }
@media (max-width: 520px) {
  .spec:not(.boards) thead { display: none; }
  .spec:not(.boards) tr { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .spec:not(.boards) th, .spec:not(.boards) td { border: 0; padding: 0; }
  .spec:not(.boards) tbody td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 13px; }
  .spec:not(.boards) tbody td:nth-child(3) { grid-column: 2; grid-row: 1; }
}

/* ---------- 7 boards ---------- */
/* Table 3 needs about 640px once board names and voltages stay on one line. The column beside the
   rail is narrower than that below 1080px, so there the table takes the full width, as Table 1 does.
   .tscroll is only a safety net and should never scroll. */
.boards-body { grid-column: 2 / -1; margin-top: 40px; }
@media (max-width: 1080px) { .boards-body { grid-column: 1 / -1; } }
.tscroll { overflow-x: auto; }
.boards { margin-top: 0; font-size: 14.5px; }
.boards tbody th { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--t1); padding-top: 14px; padding-bottom: 14px; white-space: nowrap; }
.lv { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); white-space: nowrap; }
.lv i { display: block; width: calc(var(--v) / 5 * 56px); height: 6px; background: var(--t2); border-radius: 1px; }
.lv b { font-weight: 500; color: var(--t1); font-size: 13px; }
.lv.five i { background: var(--warn); }
.lv.five b { color: var(--warn); }
.tnote { margin-top: 20px; font-size: 14px; max-width: 40em; }
@media (max-width: 760px) {
  .boards-body { grid-column: 1 / -1; margin-top: 24px; }
  .tscroll { overflow: visible; }
  .boards { min-width: 0; }
  .boards thead { display: none; }
  .boards tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .boards th, .boards td { border: 0; padding: 0; }
  .boards tbody th { grid-column: 1; font-size: 18px; padding: 0 0 4px; }
  .boards td:nth-of-type(1) { grid-column: 1; font-size: 12.5px; color: var(--t2); }
  .boards td:nth-of-type(2) { grid-column: 2; grid-row: 1; align-self: center; }
  .boards td:nth-of-type(3) { grid-column: 1 / -1; font-size: 12.5px; }
  .boards td:nth-of-type(4) { grid-column: 1 / -1; font-size: 13px; }
  .boards td:nth-of-type(3)::before { content: "flash "; color: var(--t2); }
  .boards td:nth-of-type(4)::before { content: "runs "; color: var(--t2); font-family: var(--mono); font-size: 12.5px; }
}

/* ---------- 8 install ---------- */
.status { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); max-width: 720px; margin-bottom: 56px; }
.status-k { font: 500 12px/24px var(--mono); color: var(--warn); }
.status p { margin: 0; color: var(--t1); font-size: 15px; line-height: 24px; }
.steps { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 28px 0; border-top: 1px solid var(--line-2); }
.step:last-child { border-bottom: 1px solid var(--line-2); }
.step-n { font: 400 28px/1 var(--mono); color: var(--t3); padding-top: 4px; }
.step h3 { font: 400 26px/1.2 var(--serif); margin-bottom: 8px; }
.step p { font-size: 15px; margin-bottom: 10px; }
.step .small { font-size: 13.5px; color: var(--t2); margin-top: 14px; margin-bottom: 0; }
.step .ask { font: 400 26px/1.3 var(--serif); color: var(--acc); margin: 4px 0 0; }
.code { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface); padding: 6px 6px 6px 16px; margin-bottom: 12px; min-height: 48px; }
/* commands never wrap (a break at "uv --" or "gekko-" reads as two tokens); long ones scroll */
.code code { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--t1); white-space: pre; overflow-x: auto; scrollbar-width: thin; }
.code-later code { color: var(--t2); }
.copy { flex: none; height: 32px; padding: 0 12px; background: var(--raise); color: var(--t2); border: 1px solid var(--line-2); border-radius: 4px; font: 500 12px var(--sans); cursor: pointer; transition: color var(--fast), border-color var(--fast); }
.copy:hover { color: var(--t1); border-color: var(--t3); }
.copy.ok { color: var(--acc); border-color: var(--acc); }
.tabs { display: flex; gap: 20px; margin: 18px 0 12px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; padding: 8px 0; margin-bottom: -1px; border-bottom: 1px solid transparent; color: var(--t2); font: 500 13px var(--sans); cursor: pointer; transition: color var(--fast), border-color var(--fast); }
.tabs button:hover { color: var(--t1); }
.tabs button[aria-selected="true"] { color: var(--t1); border-bottom-color: var(--acc); }
@media (max-width: 760px) {
  .status { grid-template-columns: 1fr; gap: 4px; margin-bottom: 40px; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0; }
  .step-n { font-size: 18px; color: var(--acc); }
  .step h3 { font-size: 23px; }
  .code { padding-left: 12px; }
  .code code { font-size: 12.5px; }
}

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line-2); background: var(--bg); position: relative; z-index: 1; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 48px; align-items: end; padding-top: 72px; padding-bottom: 56px; }
.foot-brand img { width: min(320px, 70vw); height: auto; }
.foot-brand p { margin: 18px 0 0; font: 400 13px var(--mono); color: var(--t2); }
.foot-links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 22px; }
.foot-links a { color: var(--t2); text-decoration: none; transition: color var(--fast); }
.foot-links a:hover { color: var(--acc); }
.foot-doc { margin: 0; display: flex; flex-direction: column; gap: 8px; font: 400 13px/22px var(--mono); color: var(--t2); text-align: right; }
@media (max-width: 760px) {
  .foot-in { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; padding-bottom: 40px; }
  .foot-doc { text-align: left; flex-direction: row; gap: 16px; }
}