/* The page's sections, one block each (their sources and build scripts: sections/<name>/). */

/* ---- demo ---- */
/* The demo: Backplane building the neurband (github.com/jlcjak/neurband) from one sentence; static/site/demo-neurband-v1.js draws it. */
.bp-demo { margin: 24px 0 0; }
.bp-demo .dm-wrap { position: relative; border: 1px solid #2c3229; background: #0c0e0c; }
.bp-demo canvas { display: block; width: 100%; aspect-ratio: 16 / 9; cursor: pointer; }
.bp-demo .dm-bar { display: flex; gap: 6px; margin: 12px 0 0; align-items: stretch; }
.bp-demo .dm-play { flex: none; width: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #555b50; background: transparent; color: #e6e9de; cursor: pointer; font: inherit; }
.bp-demo .dm-play:hover { border-color: #d6edaf; background: #1a1f18; }
.bp-demo .dm-play svg { width: 14px; height: 14px; fill: currentColor; }
.bp-demo .dm-ch { display: flex; flex: 1; gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.bp-demo .dm-ch li { flex: var(--w, 1) 1 0; min-width: 0; }
.bp-demo .dm-ch button { position: relative; width: 100%; height: 40px; padding: 0 10px; overflow: hidden; border: 1px solid #2c3229; background: #121511; color: #969d90; font: inherit; font-size: 12px; text-align: left; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.bp-demo .dm-ch button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--done, 0) * 100%); background: #d6edaf; }
.bp-demo .dm-ch button:hover { color: #e6e9de; border-color: #555b50; }
.bp-demo .dm-ch button.now { color: #e6e9de; border-color: #d6edaf; background: #1a1f18; }
.bp-demo :focus-visible { outline: 2px solid #d6edaf; outline-offset: 2px; }
@media (max-width: 720px) {
  .bp-demo .dm-play { width: 40px; height: 34px; }
  .bp-demo .dm-bar { align-items: flex-start; }
  .bp-demo .dm-ch { flex-wrap: wrap; }
  .bp-demo .dm-ch li { flex: 1 1 22%; }
  .bp-demo canvas { aspect-ratio: 3 / 4; }
  .bp-demo .dm-ch button { height: 34px; padding: 0 4px; font-size: 10px; text-align: center; }
}

/* ---- bots ---- */
/* Bots: real Backplane bot screens, one per tab (section.js) */
.sec-bots { width: 100%; margin: 24px 0 0; }
.sec-bots .bt-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 14px; }
.sec-bots .bt-num { font-size: clamp(22px, 3vw, 32px); color: #747c6e; font-variant-numeric: tabular-nums; }
.sec-bots .bt-title { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 500; letter-spacing: -.04em; }
.sec-bots .bt-lede { margin: 0 0 18px; max-width: 62ch; font-size: 14px; line-height: 1.5; color: #a7afa0; }
.sec-bots .bt-stage { border: 1px solid #2c3229; background: #0c0e0c; }
.sec-bots .bt-tabs { display: flex; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #2c3229; overflow-x: auto; scrollbar-width: none; }
.sec-bots .bt-tabs::-webkit-scrollbar { display: none; }
.sec-bots .bt-tabs li { flex: 1 0 auto; }
.sec-bots .bt-tabs button { position: relative; display: block; width: 100%; padding: 12px 14px 10px; border: 0; border-right: 1px solid #2c3229; background: none; color: #747c6e; font: inherit; font-size: 12px; text-align: left; white-space: nowrap; cursor: pointer; }
.sec-bots .bt-tabs li:last-child button { border-right: 0; }
.sec-bots .bt-tabs button::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--done, 0) * 100%); background: #d6edaf; }
.sec-bots .bt-tabs button:hover, .sec-bots .bt-tabs button[aria-selected="true"] { color: #e6e9de; }
.sec-bots .bt-tabs button[aria-selected="true"]::before { width: calc(var(--done, 1) * 100%); }
.sec-bots .bt-tabs button:focus-visible { outline: 1px solid #d6edaf; outline-offset: -1px; }
.sec-bots .bt-panel { margin: 0; }
.sec-bots .bt-panel[hidden] { display: none; }
.sec-bots .bt-shot { display: block; padding: 16px; line-height: 0; }
.sec-bots .bt-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 900; background: #0f1115; outline: 1px solid #2c3229; }
.sec-bots figcaption { padding: 12px 16px 14px; border-top: 1px solid #2c3229; font-size: 13px; line-height: 1.5; color: #a7afa0; }
.sec-bots .bt-data { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: #747c6e; font-variant-numeric: tabular-nums; }
.sec-bots .bt-data code { font: inherit; color: #a7afa0; }
@media (max-width: 700px) {
  .sec-bots .bt-head { flex-wrap: wrap; gap: 4px 12px; }
  .sec-bots .bt-tabs { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; border-bottom: 0; }
  .sec-bots .bt-tabs button { padding: 11px 10px 9px; font-size: 11px; border-bottom: 1px solid #2c3229; }
  .sec-bots .bt-tabs li:nth-child(3n) button { border-right: 0; }
  .sec-bots .bt-tabs li:last-child button { border-right: 0; }
  .sec-bots .bt-shot { padding: 8px; }
  .sec-bots .bt-shot img { aspect-ratio: auto; }
  .sec-bots figcaption { padding: 10px 10px 12px; font-size: 12px; }
}

/* ---- harness ---- */
/* Harness: one real session's calls, lane by lane (sections/harness) */
.sec-harness { margin: 72px 0 0; --hx-lane: 22px; }
.sec-harness .rp-title { min-width: 0; }
.sec-harness .hx-clock { margin-left: auto; font-size: 12px; color: #a7afa0; font-variant-numeric: tabular-nums; white-space: nowrap; }

.sec-harness .hx-stage { border: 1px solid #2c3229; background: #0c0e0c; }
.sec-harness .hx-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid #2c3229; font-size: 12px; color: #747c6e; }
.sec-harness .hx-play { min-height: 0; padding: 4px 10px; border: 1px solid #555b50; background: transparent; color: #e6e9de; font-size: 12px; }
.sec-harness .hx-play:hover { border-color: #e6e9de; background: transparent; }
.sec-harness .hx-session { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sec-harness .hx-lanes { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; padding: 14px 14px 0; }
.sec-harness .hx-names, .sec-harness .hx-n { margin: 0; padding: 0; list-style: none; font-size: 12px; }
.sec-harness .hx-names li, .sec-harness .hx-n li { height: var(--hx-lane); line-height: var(--hx-lane); white-space: nowrap; color: #747c6e; }
.sec-harness .hx-names li { padding-right: 14px; }
.sec-harness .hx-names li.hot { color: #d6edaf; }
.sec-harness .hx-n li { padding-left: 12px; text-align: right; font-variant-numeric: tabular-nums; min-width: 6ch; }
.sec-harness .hx-n li.done { color: #a7afa0; }
.sec-harness .hx-track { display: block; width: 100%; height: calc(var(--hx-lane) * 10 + 22px); cursor: crosshair; touch-action: pan-y; }
.sec-harness .hx-track:focus-visible { outline-offset: -2px; }

.sec-harness .hx-tape { margin: 10px 0 0; padding: 10px 14px 12px; list-style: none; border-top: 1px solid #2c3229; font-size: 12px; line-height: 20px; min-height: calc(20px * 7 + 22px); font-variant-numeric: tabular-nums; }
.sec-harness .hx-tape li { display: grid; grid-template-columns: 9ch 17ch minmax(0, 1fr); gap: 12px; color: #747c6e; white-space: nowrap; }
.sec-harness .hx-tape li:last-child { color: #e6e9de; }
.sec-harness .hx-tape li:last-child .hx-l { color: #d6edaf; }
.sec-harness .hx-tape span { overflow: hidden; text-overflow: ellipsis; }

.sec-harness .hx-counts { margin: 8px 0 0; font-size: 12px; color: #747c6e; font-variant-numeric: tabular-nums; }

.sec-harness .hx-index { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin: 36px 0 0; font-size: 13px; }
.sec-harness .hx-index > div { padding: 12px 0; border-top: 1px solid #2c3229; }
.sec-harness .hx-index dt { margin: 0 0 6px; line-height: 1.5; }
.sec-harness .hx-index dd { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; line-height: 1.7; color: #4b5246; }
.sec-harness .hx-index dd .on { color: #a7afa0; }
.sec-harness .hx-index dd b { margin-left: .5ch; font-weight: 400; color: #747c6e; font-variant-numeric: tabular-nums; }
.sec-harness .hx-index > div.hot dd .on { color: #e6e9de; }
.sec-harness .hx-note { margin: 12px 0 0; font-size: 12px; color: #747c6e; }

@media (max-width: 860px) {
  .sec-harness { margin-top: 56px; }
  .sec-harness .hx-clock { flex-basis: 100%; margin-left: 0; }
  .sec-harness .hx-index { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sec-harness { --hx-lane: 20px; }
  .sec-harness .hx-bar { padding: 8px 10px; }
  .sec-harness .hx-lanes { padding: 10px 10px 0; }
  .sec-harness .hx-names, .sec-harness .hx-n { font-size: 10.5px; }
  .sec-harness .hx-names li { padding-right: 8px; }
  .sec-harness .hx-n li { padding-left: 6px; min-width: 4.5ch; }
  .sec-harness .hx-tape { padding: 8px 10px 10px; font-size: 11px; line-height: 18px; min-height: calc(18px * 7 + 18px); }
  .sec-harness .hx-tape li { grid-template-columns: 11ch minmax(0, 1fr); gap: 8px; }
  .sec-harness .hx-tape .hx-t { display: none; }
}

/* ---- kicad-fork ---- */
/* KiCad fork: a person in KiCad and Backplane on the same files (sections/kicad-fork) */
.sec-kicad-fork { margin: 72px 0 0; }
.sec-kicad-fork .kf-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 10px; }
.sec-kicad-fork .kf-num { font-size: clamp(22px, 3vw, 32px); color: #747c6e; font-variant-numeric: tabular-nums; }
.sec-kicad-fork .kf-title { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 500; letter-spacing: -.04em; }
.sec-kicad-fork .kf-lede { max-width: 62ch; margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: #a7afa0; }

/* The recording: one side-by-side screen capture, KiCad left, Backplane right */
.sec-kicad-fork .kf-rec { margin: 0; }
.sec-kicad-fork .kf-panes { display: grid; grid-template-columns: 1fr 1fr; font-size: 12px; color: #a7afa0; }
.sec-kicad-fork .kf-panes span { padding: 0 0 6px; }
.sec-kicad-fork .kf-panes span + span { padding-left: 10px; }
.sec-kicad-fork .kf-screen { position: relative; aspect-ratio: 16 / 9; border: 1px solid #2c3229; background: #0c0e0c; overflow: hidden; }
.sec-kicad-fork .kf-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0c0e0c; cursor: pointer; }
.sec-kicad-fork .kf-empty { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.sec-kicad-fork .kf-empty-pane + .kf-empty-pane { border-left: 1px solid #2c3229; }
.sec-kicad-fork .kf-empty p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 12px; background: #0c0e0c; border-top: 1px solid #2c3229; font-size: 12px; text-align: center; }
.sec-kicad-fork .kf-rec.has-video .kf-empty { display: none; }

.sec-kicad-fork .kf-bar { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: #a7afa0; }
.sec-kicad-fork .kf-play { min-height: 32px; min-width: 64px; padding: 0 10px; border: 1px solid #555b50; background: transparent; color: #e6e9de; font-size: 12px; }
.sec-kicad-fork .kf-play:hover { border-color: #e6e9de; background: transparent; }
.sec-kicad-fork .kf-track { position: relative; flex: 1; height: 24px; cursor: pointer; }
.sec-kicad-fork .kf-track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: #2c3229; }
.sec-kicad-fork .kf-fill { position: absolute; left: 0; top: 11px; height: 2px; width: 0; background: #d6edaf; }
.sec-kicad-fork .kf-mark { position: absolute; top: 7px; width: 1px; height: 10px; background: #747c6e; }
.sec-kicad-fork .kf-time { min-width: 4.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.sec-kicad-fork .kf-marks { display: flex; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 12px; }
.sec-kicad-fork .kf-marks li { flex: 1 1 0; min-width: 0; padding: 8px 8px 0 0; border-top: 2px solid #2c3229; color: #747c6e; cursor: pointer; }
.sec-kicad-fork .kf-marks li.now { color: #e6e9de; border-top-color: #d6edaf; }
.sec-kicad-fork .kf-marks li:hover { color: #e6e9de; }

/* Phones: the halves stacked; each half's name sits on its top edge */
.sec-kicad-fork .kf-rec.stacked .kf-panes { display: none; }
.sec-kicad-fork .kf-stack-label { position: absolute; left: 0; padding: 3px 8px; background: #0c0e0c; border: 1px solid #2c3229; border-width: 0 1px 1px 0; font-size: 11px; color: #a7afa0; }
.sec-kicad-fork .kf-cap { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: #a7afa0; }

/* One real step: the lines it wrote, and the same file as KiCad draws it */
.sec-kicad-fork .kf-file { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 40px; }
.sec-kicad-fork .kf-col { min-width: 0; display: flex; flex-direction: column; }
.sec-kicad-fork .kf-label { margin: 0 0 6px; font-size: 12px; color: #e6e9de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-kicad-fork .kf-dim { color: #747c6e; }
.sec-kicad-fork .kf-diff { flex: 1; margin: 0; aspect-ratio: 3 / 2; padding: 10px 0; overflow: auto; border: 1px solid #2c3229; background: #0c0e0c; font: 11.5px/1.55 'Berkeley Mono', monospace; color: #a7afa0; scrollbar-width: thin; scrollbar-color: #2c3229 transparent; }
.sec-kicad-fork .kf-diff span { display: block; padding: 0 12px; white-space: pre; }
.sec-kicad-fork .kf-diff .add { color: #d6edaf; }
.sec-kicad-fork .kf-diff .add::before { content: "+"; color: #747c6e; margin-right: 1ch; }
.sec-kicad-fork .kf-diff .del { color: #ffb5a7; }
.sec-kicad-fork .kf-diff .del::before { content: "-"; margin-right: 1ch; }
.sec-kicad-fork .kf-diff .hunk { color: #747c6e; }
.sec-kicad-fork .kf-plot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border: 1px solid #2c3229; background: #0c0e0c; }
.sec-kicad-fork .kf-data { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #747c6e; font-variant-numeric: tabular-nums; }
.sec-kicad-fork .kf-data a { color: inherit; text-underline-offset: .15em; }
.sec-kicad-fork .kf-data a:hover { color: #e6e9de; }

@media (max-width: 860px) {
  .sec-kicad-fork { margin-top: 56px; }
  .sec-kicad-fork .kf-file { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
  .sec-kicad-fork .kf-col:last-child { order: -1; }
  .sec-kicad-fork .kf-diff { flex: none; aspect-ratio: auto; height: 260px; font-size: 11px; }
  .sec-kicad-fork .kf-marks { flex-direction: column; gap: 0; }
  .sec-kicad-fork .kf-marks li { padding: 6px 0; border-top-width: 1px; }
}

/* folded into the harness section, under its replay */
.kf-in-harness { margin: 32px 0 0; }

/* ---- kistack ---- */
/* KiStack: the real skills, from their own SKILL.md (sections/kistack/build.py) */
.sec-kistack { margin: 72px 0 0; }
.sec-kistack .ks-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 10px; }
.sec-kistack .ks-num { font-size: clamp(22px, 3vw, 32px); color: #747c6e; font-variant-numeric: tabular-nums; }
.sec-kistack .ks-title { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 500; letter-spacing: -.04em; }
.sec-kistack .ks-repo { margin-left: auto; font-size: 12px; color: #a7afa0; text-decoration: none; white-space: nowrap; }
.sec-kistack .ks-repo:hover { color: #e6e9de; text-decoration: underline; text-underline-offset: .15em; }
.sec-kistack .ks-lede { margin: 0 0 16px; max-width: 70ch; line-height: 1.7; }

.sec-kistack .ks-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 1px solid #2c3229; background: #0c0e0c; }
.sec-kistack .ks-list-wrap { padding: 14px 0 12px; border-right: 1px solid #2c3229; }
.sec-kistack .ks-cols,
.sec-kistack .ks-row { display: grid; grid-template-columns: var(--ks-nw, 150px) minmax(0, 1fr) 32px 36px; gap: 12px; align-items: center; padding: 0 16px; }
.sec-kistack .ks-cols { margin: 0 0 6px; font-size: 11px; color: #747c6e; }
.sec-kistack .ks-cols span:nth-child(2) { grid-column: 2 / 4; }
.sec-kistack .ks-cols span:last-child { grid-column: 4; }
.sec-kistack .ks-cols span:last-child,
.sec-kistack .ks-n, .sec-kistack .ks-f { text-align: right; font-variant-numeric: tabular-nums; }
.sec-kistack .ks-list { margin: 0; padding: 0; list-style: none; }
.sec-kistack .ks-row { width: 100%; min-height: 34px; border: 0; border-left: 2px solid transparent; background: transparent; color: #a7afa0; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.sec-kistack .ks-row:hover { color: #e6e9de; background: #111410; }
.sec-kistack .ks-row[aria-selected="true"] { color: #e6e9de; background: #151915; border-left-color: #d6edaf; }
.sec-kistack .ks-row:focus-visible { outline-offset: -2px; }
.sec-kistack .ks-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-kistack .ks-has .ks-name::after,
.sec-kistack .ks-key-note i { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: .15em; background: #d6edaf; }
.sec-kistack .ks-key-note i { margin: 0 8px 0 0; }
.sec-kistack .ks-bar { height: 8px; background: #1a1e18; }
.sec-kistack .ks-bar i { display: block; height: 100%; min-width: 2px; background: #555b50; }
.sec-kistack .ks-row[aria-selected="true"] .ks-bar i { background: #d6edaf; }
.sec-kistack .ks-n { color: #e6e9de; }
.sec-kistack .ks-f { color: #747c6e; }
.sec-kistack .ks-key-note { margin: 12px 16px 0; font-size: 11px; color: #747c6e; }

.sec-kistack .ks-detail { min-width: 0; font-size: 12.5px; line-height: 1.6; }
.sec-kistack .ks-panel { padding: 16px 20px 20px; outline: none; }
.sec-kistack .ks-path { margin: 0 0 10px; color: #e6e9de; overflow-wrap: anywhere; }
.sec-kistack .ks-path span { color: #747c6e; }
.sec-kistack .ks-desc { margin: 0 0 14px; color: #c9cfbf; }
.sec-kistack .ks-key { color: #747c6e; }
.sec-kistack .ks-outline, .sec-kistack .ks-cmds, .sec-kistack .ks-files ul { margin: 0 0 14px; padding: 10px 0 0; list-style: none; border-top: 1px solid #2c3229; }
.sec-kistack .ks-outline li { color: #a7afa0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-kistack .ks-outline li.h3 { padding-left: 2ch; color: #747c6e; }
.sec-kistack .ks-cmds { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sec-kistack .ks-cmds li { color: #a7afa0; white-space: nowrap; }
.sec-kistack .ks-cmds li::before { content: "$ "; color: #555b50; }
.sec-kistack .ks-files { margin: 0 0 14px; color: #747c6e; }
.sec-kistack .ks-files summary { cursor: pointer; }
.sec-kistack .ks-files summary:hover { color: #e6e9de; }
.sec-kistack .ks-files ul { margin: 8px 0 0; padding-top: 6px; columns: 2; column-gap: 20px; font-size: 11.5px; }
.sec-kistack .ks-files li { overflow-wrap: anywhere; }

.sec-kistack .ks-example { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding-top: 12px; border-top: 1px solid #2c3229; }
.sec-kistack .ks-label { grid-column: 1 / -1; margin: 0; }
.sec-kistack .ks-label > span:not(.copy-todo) { margin-left: .6em; color: #747c6e; }
.sec-kistack .ks-out { grid-column: 1; margin: 0; min-width: 0; }
.sec-kistack .ks-out figcaption { font-size: 11px; color: #747c6e; }
.sec-kistack .ks-out pre { margin: 4px 0 0; padding: 8px 10px; border: 1px solid #2c3229; background: #111410; color: #c9cfbf; font: inherit; font-size: 11px; line-height: 1.5; overflow-x: auto; scrollbar-width: thin; }
.sec-kistack .ks-img { grid-column: 2; grid-row: 2 / span 4; width: 180px; }
.sec-kistack .ks-img img { display: block; width: 100%; height: auto; margin-top: 4px; border: 1px solid #2c3229; }
.sec-kistack .ks-meta { grid-column: 1; margin: 0; font-size: 11px; color: #747c6e; }

.sec-kistack .ks-counts { margin: 8px 0 0; font-size: 12px; color: #747c6e; font-variant-numeric: tabular-nums; }
.sec-kistack .ks-note { margin: 14px 0 0; max-width: 70ch; line-height: 1.7; }

@media (max-width: 860px) {
  .sec-kistack .ks-stage { grid-template-columns: 1fr; }
  .sec-kistack .ks-list-wrap { border-right: 0; border-bottom: 1px solid #2c3229; }
}
@media (max-width: 600px) {
  .sec-kistack { margin-top: 56px; }
  .sec-kistack .ks-head { flex-wrap: wrap; gap: 4px 12px; }
  .sec-kistack .ks-repo { flex-basis: 100%; margin-left: 0; }
  .sec-kistack .ks-cols, .sec-kistack .ks-row { --ks-nw: 134px; grid-template-columns: var(--ks-nw) minmax(0, 1fr) 28px 34px; gap: 8px; padding: 0 12px; }
  .sec-kistack .ks-row { font-size: 12px; min-height: 36px; }
  .sec-kistack .ks-panel { padding: 14px 12px 16px; }
  .sec-kistack .ks-example { grid-template-columns: minmax(0, 1fr); }
  .sec-kistack .ks-img { grid-column: 1; grid-row: auto; width: min(100%, 220px); }
  .sec-kistack .ks-files ul { columns: 1; }
  .sec-kistack .ks-outline li { white-space: normal; padding-left: 3ch; text-indent: -3ch; }
  .sec-kistack .ks-outline li.h3 { padding-left: 5ch; }
}

/* ---- library ---- */
/* KiCad library: real footprints from Backplane_KiCad_Library (section.js, build.py) */
.sec-library { --cu: #c83434; --mask: #d864ff; --silk: #f2eda1; --fab: #8f958a; --crt: #ff26e2; margin: 24px 0 0; }
.sec-library .lib-head { display: flex; align-items: baseline; gap: 16px; margin: 0 0 14px; }
.sec-library .lib-num { font-size: clamp(22px, 3vw, 32px); color: #747c6e; font-variant-numeric: tabular-nums; }
.sec-library .lib-title { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 500; letter-spacing: -.04em; }
.sec-library .lib-lead { margin: 0 0 18px; max-width: 70ch; font-size: 14px; line-height: 1.7; }

.sec-library .lib-stage { border: 1px solid #2c3229; background: #0c0e0c; }
.sec-library .lib-tabs { display: flex; border-bottom: 1px solid #2c3229; overflow-x: auto; scrollbar-width: none; }
.sec-library .lib-tabs button { flex: none; min-height: 0; padding: 10px 14px; border: 0; border-right: 1px solid #2c3229; background: transparent; color: #747c6e; font: inherit; font-size: 12px; cursor: pointer; }
.sec-library .lib-tabs button span { margin-left: 6px; color: #555b50; font-variant-numeric: tabular-nums; }
.sec-library .lib-tabs button:hover { color: #e6e9de; background: transparent; }
.sec-library .lib-tabs button[aria-selected="true"] { color: #e6e9de; box-shadow: inset 0 -2px #d6edaf; }
.sec-library .lib-tabs button[aria-selected="true"] span { color: #a7afa0; }

.sec-library .lib-view { margin: 0; padding: 14px 16px 0; }
.sec-library .lib-name { display: flex; gap: 16px; align-items: baseline; font-size: 12px; color: #e6e9de; }
.sec-library .lib-pos { margin-left: auto; color: #747c6e; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sec-library .lib-fp { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-library .lib-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 1px; height: clamp(180px, 24vw, 300px); margin-top: 12px; }
.sec-library .lib-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sec-library .lib-panel svg { display: block; flex: 1 1 0; min-height: 0; width: 100%; height: auto; }
.sec-library .lib-panel p { margin: 6px 0 0; font-size: 11px; color: #a7afa0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-library .lib-panel p span { color: #747c6e; font-variant-numeric: tabular-nums; }

.sec-library .lib-grid { display: grid; grid-template-rows: repeat(2, 76px); grid-auto-flow: column; grid-auto-columns: 76px; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; overflow-x: auto; border-top: 1px solid #2c3229; scrollbar-width: thin; scrollbar-color: #2c3229 transparent; }
.sec-library .lib-grid li { display: flex; flex-direction: column; min-height: 0; padding: 6px 4px 4px; border-right: 1px solid #1a1e18; border-bottom: 1px solid #1a1e18; cursor: pointer; }
.sec-library .lib-grid li svg { flex: 1 1 0; min-height: 0; width: 100%; }
.sec-library .lib-grid li span { font-size: 9px; color: #747c6e; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-library .lib-grid li:hover span { color: #e6e9de; }
.sec-library .lib-grid li.now { box-shadow: inset 0 -2px #d6edaf; }
.sec-library .lib-grid li.now span { color: #e6e9de; }
.sec-library .lib-grid li:focus-visible { outline-offset: -2px; }

/* Layers, KiCad's default colours. Sizes are in mm (the SVG's units). */
.sec-library .L-FCu { fill: var(--cu); }
.sec-library .L-FMask { fill: var(--mask); fill-opacity: .32; }
.sec-library .L-FSilkS { fill: var(--silk); stroke: var(--silk); }
.sec-library .L-FFab { fill: var(--fab); stroke: var(--fab); opacity: .55; }
.sec-library .L-FCrtYd { fill: none; stroke: var(--crt); opacity: .6; }
.sec-library .L-FCrtYd .f { fill: var(--crt); fill-opacity: .25; }
.sec-library .L-FFab .s, .sec-library .L-FCrtYd .s { vector-effect: non-scaling-stroke; stroke-width: 1px !important; }
.sec-library svg .s { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sec-library svg .f { stroke: none; fill-rule: evenodd; }
.sec-library .H { fill: #0c0e0c; stroke: #555b50; stroke-width: 1px; vector-effect: non-scaling-stroke; }

.sec-library .lib-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: baseline; margin: 8px 0 0; font-size: 12px; color: #747c6e; }
.sec-library .lib-meta p { margin: 0; font-variant-numeric: tabular-nums; }
.sec-library .lib-legend { margin-left: auto !important; }
.sec-library .lib-legend i { display: inline-block; width: 8px; height: 8px; margin: 0 5px 0 10px; vertical-align: 0; }
.sec-library .lib-legend i:first-child { margin-left: 0; }
.sec-library .k-cu { background: var(--cu); }
.sec-library .k-mask { background: color-mix(in srgb, var(--mask) 32%, #0c0e0c); }
.sec-library .k-silk { background: var(--silk); }
.sec-library .k-fab { background: color-mix(in srgb, var(--fab) 55%, #0c0e0c); }
.sec-library .k-crt { border: 1px solid color-mix(in srgb, var(--crt) 60%, #0c0e0c); }
.sec-library .lib-caption { margin: 14px 0 0; max-width: 70ch; font-size: 12px; line-height: 1.6; color: #a7afa0; }
.sec-library .lib-link { margin: 10px 0 0; font-size: 14px; }
.sec-library .lib-link a { color: inherit; text-underline-offset: .15em; white-space: nowrap; }

@media (max-width: 860px) {
  .sec-library .lib-panels { height: clamp(140px, 40vw, 240px); }
  .sec-library .lib-legend { margin-left: 0 !important; }
}
@media (max-width: 600px) {
  .sec-library .lib-view { padding: 12px 10px 0; }
  .sec-library .lib-tabs button { padding: 10px 10px; }
  .sec-library .lib-grid { grid-template-rows: repeat(2, 68px); grid-auto-columns: 68px; }
  .sec-library .lib-panels { height: 170px; }
  .sec-library .lib-panel p { font-size: 10px; }
  .sec-library .lib-panel p span { display: block; }
}