/*==================== LIBRAIN — the case study, in the house system ====================
  projects/librain.html only. Loaded after styles.css and modern-sections.css (the footer).
  Same language as the home page: paper and ink, Space Mono for labels and numbers, Poppins
  for reading, square corners, 2px ink frames, and dithered lifts (a 50% checkerboard) in
  place of soft shadows. Nothing here is shared: the few home components it needs (the
  hero button, the stat tile, the chapter line, the terminal window, the Career Line's
  "+ details" key) are copied in small, under .lb- names.

  Layout   1100px+: a sticky index column on the left, the case study on the right.
           Narrower: the index is a sticky "on this page" control at the top (phones: beside
           the language keys), opening a list. Prose keeps a 68ch measure.
  Sections Each opens with a chapter line: "03 Architecture ··········". The five long
           evaluation sections are <details> in a 2px frame; the first starts open.
  Motion   Controls move (press, hover on fine pointers). Once each: the metrics and chapter
           numbers resolve out of ASCII glyphs, and the architecture diagram plays one pass
           of data (the script in projects/librain.html). No overshoot, no `transition: all`.
           Reduced motion: no transitions, no cursor blink, none of the once-only motion.
========================================================================================= */

.lb {
    --lb-ink: var(--first-color-dark);
    --lb-paper: var(--body-color);
    --lb-panel: #f1f1f1;
    --lb-text: #1d1d1d;
    --lb-soft: #333;
    --lb-mute: #595959;
    --lb-rule: #d4d4d4;
    --lb-term: #141414;
    --lb-term-fg: #ececec;
    --lb-term-mute: #a6a6a6;
    --lb-ease: cubic-bezier(.23, 1, .32, 1);
    --lb-dither: repeating-conic-gradient(var(--lb-ink) 0 25%, transparent 0 50%);
    --lb-dither-light: repeating-conic-gradient(#bdbdbd 0 25%, transparent 0 50%);

    max-width: 1200px;
    margin: 0 auto;
    padding: 7rem 1.5rem 5rem;
    color: var(--lb-text);
}

/* the global `span { italic; grey }` (styles.css): not here. :where() keeps this at element
   specificity, so every class rule below still wins. */
:where(.lb) span { font-style: normal; color: inherit; font-size: inherit; }
:where(.lb) em { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---------- layout: index column + body ---------- */
.lb-body { min-width: 0; max-width: 54rem; }

@media screen and (min-width: 1100px) {
    .lb {
        display: grid;
        grid-template-columns: 14rem minmax(0, 1fr);
        column-gap: clamp(2.5rem, 4vw, 4.5rem);
        align-items: start;
    }
}

/* ---------- prose ---------- */
:where(.lb-body) p {
    max-width: 68ch;
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--lb-text);
    text-wrap: pretty;
}

:where(.lb-body) p:last-child { margin-bottom: 0; }

.lb-body a:not([class]) {
    color: var(--lb-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: .2em;
    transition: background-color .15s ease, color .15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .lb-body a:not([class]):hover { background: var(--lb-ink); color: var(--lb-paper); text-decoration-color: var(--lb-ink); }
}

.lb-body a:not([class]):focus-visible { outline: 2px solid var(--lb-ink); outline-offset: 2px; }

.lb-body code {
    padding: .05em .3em;
    background: #ececec;
    font-family: var(--mono-font);
    font-size: .86em;
    color: var(--lb-ink);
    overflow-wrap: anywhere;
}

.lb-body h3 { color: var(--title-color); }

/* ---------- chapter line: "03 Architecture ··········" ---------- */
.lb-sec {
    margin-top: 5.5rem;
    scroll-margin-top: 6.5rem;
}

.lb-chap {
    display: flex;
    align-items: first baseline;
    gap: .9rem;
    margin: 0 0 1.4rem;
}

.lb-chap__n {
    flex: none;
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--lb-ink);
}

.lb-chap h2 {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--body-font);
    font-weight: 600;
    font-size: clamp(1.3rem, 1rem + 1.1vw, 1.65rem);
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--title-color);
    text-wrap: balance;
}

.lb-chap__lead {
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    align-self: center;
    height: 2px;
    background-image: var(--lb-dither-light);
    background-size: 4px 4px;
}

/* ---------- hero ---------- */
.lb-prompt {
    margin: 0 0 1rem;
    font-family: var(--mono-font);
    font-size: .8rem;
    line-height: 1.4;
    color: var(--lb-mute);
    overflow-wrap: anywhere;
}

.lb-prompt b { color: var(--lb-ink); font-weight: 700; }

.lb-title {
    display: flex;
    align-items: flex-end;
    gap: .1em;
    margin: 0 0 .9rem;
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: clamp(2.9rem, 1.6rem + 5.4vw, 5.25rem);
    line-height: .95;
    letter-spacing: -.05em;
    color: var(--lb-ink);
}

/* the block cursor, as the header logo has it */
.lb-title::after {
    content: "";
    flex: none;
    width: .4em;
    height: .78em;
    margin-bottom: .04em;
    background: var(--lb-ink);
    animation: lb-blink 1.1s steps(1) infinite;
}

@keyframes lb-blink { 50% { opacity: 0; } }

.lb-sub {
    max-width: 40ch;
    margin: 0 0 1.25rem;
    font-family: var(--body-font);
    font-weight: 500;
    font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--title-color);
    text-wrap: balance;
}

:where(.lb-body) .lb-lede { font-size: 1.0625rem; }

/* buttons: an ink face over a dithered lift (the home hero's .hbtn) */
.lb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    margin: 1.75rem 0 2.25rem;
}

.lb-btn {
    --lift: 6px;
    position: relative;
    isolation: isolate;
    display: inline-block;
    max-width: calc(100% - var(--lift));
    margin: 0 var(--lift) var(--lift) 0;
    color: var(--lb-paper);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.lb-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: var(--lift) calc(var(--lift) * -1) calc(var(--lift) * -1) var(--lift);
    background-image: var(--lb-dither);
    background-size: 4px 4px;
    pointer-events: none;
}

.lb-btn--ghost { color: var(--lb-ink); }

.lb-btn__face {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 48px;
    padding: .5rem 1.15rem;
    border: 2px solid var(--lb-ink);
    background: var(--lb-ink);
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .86rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    transition: transform .16s var(--lb-ease);
}

.lb-btn--ghost .lb-btn__face { background: var(--lb-paper); }
.lb-btn__face i { flex: none; font-size: 1.1rem; }

@media (hover: hover) and (pointer: fine) {
    .lb-btn:hover .lb-btn__face { transform: translate(-2px, -2px); }
}

.lb-btn:active .lb-btn__face { transform: translate(var(--lift), var(--lift)); transition-duration: 60ms; }
.lb-btn:focus-visible { outline: none; }
.lb-btn:focus-visible .lb-btn__face { outline: 2px solid var(--lb-ink); outline-offset: 4px; }

/* ---------- tiles: a 2px frame on a small dithered lift (the home projects panel) ----------
   The frame and its paper are ::after, the lift ::before, both under the text. */
.metric-callout,
.stat-tile {
    position: relative;
    isolation: isolate;
    min-width: 0;
    margin: 0 4px 4px 0;
}

.metric-callout::before,
.stat-tile::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 4px -4px -4px 4px;
    background-image: var(--lb-dither);
    background-size: 4px 4px;
}

.metric-callout::after,
.stat-tile::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 2px solid var(--lb-ink);
    background: var(--lb-paper);
}

.metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    max-width: 42rem;
}

.metric-callout { padding: .7rem .9rem .8rem; }

.metric-value,
.stat-value {
    display: block;
    font-family: var(--mono-font);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--lb-ink);
}

.metric-value { font-size: 1.6rem; }

.metric-label {
    display: block;
    margin-top: .3rem;
    font-family: var(--mono-font);
    font-size: .72rem;
    line-height: 1.4;
    color: var(--lb-mute);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
    gap: 1.1rem 1.25rem;
    margin: 1.5rem 0;
}

.stat-tile { padding: .9rem 1rem 1rem; }
.stat-value { font-size: 1.25rem; overflow-wrap: anywhere; }

.stat-label {
    margin-top: .5rem;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--lb-soft);
    text-wrap: pretty;
}

/* ---------- notes: a dithered bar in the margin ---------- */
.papers-callout,
.demo-footnote,
.step-callout {
    position: relative;
    max-width: 68ch;
    padding-left: 1.2rem;
}

.papers-callout::before,
.demo-footnote::before,
.step-callout::before {
    content: "";
    position: absolute;
    left: 0;
    top: .25rem;
    bottom: .25rem;
    width: 6px;
    background-image: var(--lb-dither);
    background-size: 4px 4px;
}

:where(.lb-body) .papers-callout,
:where(.lb-body) .demo-footnote {
    margin: 1.4rem 0 0;
    font-size: .98rem;
    line-height: 1.65;
    color: var(--lb-soft);
}

/* ---------- tech stack ---------- */
.tech-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }

.lb-tag {
    padding: .45rem .6rem;
    border: 1.5px solid var(--lb-ink);
    background: var(--lb-paper);
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .76rem;
    line-height: 1.1;
    color: var(--lb-ink);
}

/* ---------- terminal windows: code, tables, the API list ----------
   The 2px frame and paper are ::after, the lift ::before; the window's own padding (the
   frame's width) keeps its bar and body inside the frame. */
.lb-term {
    --lift: 6px;
    position: relative;
    isolation: isolate;
    margin: 1.5rem var(--lift) calc(1.25rem + var(--lift)) 0;
    padding: 2px;
}

.lb-term::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: var(--lift) calc(var(--lift) * -1) calc(var(--lift) * -1) var(--lift);
    background-image: var(--lb-dither);
    background-size: 4px 4px;
}

.lb-term::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 2px solid var(--lb-ink);
    background: var(--lb-paper);
}

.lb-term__bar {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 2.1rem;
    padding: .4rem .8rem;
    background: var(--lb-term);
    color: var(--lb-term-fg);
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .74rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* window buttons, as on the Skills terminal and the portrait */
.lb-term__bar::before,
.demo-card__head::before {
    content: "";
    flex: none;
    width: 2.75rem;
    height: .62rem;
    background:
        radial-gradient(circle at .31rem 50%, #ff5f56 .3rem, transparent .32rem),
        radial-gradient(circle at 1.37rem 50%, #febc2e .3rem, transparent .32rem),
        radial-gradient(circle at 2.43rem 50%, #28c840 .3rem, transparent .32rem);
}

.lb-term__bar span { color: var(--lb-term-mute); font-weight: 400; }

/* code */
.lb-term--code { background: var(--lb-term); }

.code-block {
    margin: 0;
    padding: 1.1rem 1.25rem 1.25rem;
    overflow-x: auto;
    background: #101010;
    color: #e6e6e6;
    font-family: var(--mono-font);
    font-size: .82rem;
    line-height: 1.7;
    tab-size: 4;
}

.code-block code { padding: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: normal; }
.code-block .lb-c { color: #9c9c9c; }
.code-block:focus-visible { outline: 2px solid #f2f2f2; outline-offset: -5px; }

:where(.lb-body) .code-caption { font-size: .95rem; color: var(--lb-soft); }

/* tables: they scroll sideways inside their window on narrow screens */
.lb-scroll { overflow-x: auto; background: var(--lb-paper); }
.lb-scroll:focus-visible { outline: 2px solid var(--lb-ink); outline-offset: -5px; }

.results-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: .95rem;
    line-height: 1.45;
}

.results-table th {
    padding: .7rem .9rem .6rem;
    border-bottom: 2px solid var(--lb-ink);
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .72rem;
    text-align: left;
    white-space: nowrap;
    color: var(--lb-mute);
}

.results-table td {
    padding: .65rem .9rem;
    border-bottom: 1px solid var(--lb-rule);
    vertical-align: top;
    color: var(--lb-text);
}

.results-table tr:last-child td { border-bottom: 0; }

.results-table td:not(:first-child),
.results-table th:not(:first-child) {
    font-family: var(--mono-font);
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.results-table th:not(:first-child) { font-size: .72rem; }
.results-table th:first-child { white-space: normal; min-width: 9rem; }
.results-table td:first-child { font-weight: 500; }

/* API surface */
.api-row {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: .45rem .9rem;
    padding: .95rem 1.1rem 1.05rem;
    border-top: 1px solid var(--lb-rule);
    background: var(--lb-paper);
}

.lb-term__bar + .api-row { border-top: 0; }

.api-method {
    justify-self: start;
    align-self: center;
    padding: .3rem .45rem;
    background: var(--lb-ink);
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .7rem;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--lb-paper);
}

.api-path {
    align-self: center;
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--lb-ink);
    overflow-wrap: anywhere;
}

.lb-body .api-path { padding: 0; background: none; font-size: .9rem; }

.api-desc {
    grid-column: 2;
    max-width: 68ch;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--lb-soft);
    text-wrap: pretty;
}

/* ---------- metro line: the pipeline steps and the roadmap's phases ---------- */
.pipeline-step,
.roadmap-phase {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: 1.1rem;
    padding-bottom: 1.9rem;
}

.pipeline-step::before,
.roadmap-phase::before {
    content: "";
    position: absolute;
    left: calc(1.125rem - 1px);
    top: 2.25rem;
    bottom: 0;
    width: 2px;
    background: var(--lb-ink);
}

.pipeline-step:last-child,
.roadmap-phase:last-child { padding-bottom: 0; }
.pipeline-step:last-child::before,
.roadmap-phase:last-child::before { display: none; }

/* the stretch into the deferred phase is only half drawn */
.roadmap-phase.done:has(+ .roadmap-phase:not(.done))::before {
    width: 4px;
    left: calc(1.125rem - 2px);
    background: var(--lb-dither);
    background-size: 4px 4px;
}

.step-num,
.roadmap-marker {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid var(--lb-ink);
    background: var(--lb-paper);
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1;
    color: var(--lb-ink);
}

.step-num,
.roadmap-phase.done .roadmap-marker { background: var(--lb-ink); color: var(--lb-paper); }

.step-body,
.roadmap-body { min-width: 0; overflow-wrap: anywhere; }

.step-body h3,
.roadmap-body h3 {
    margin: .35rem 0 .5rem;
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 1.12rem;
    line-height: 1.3;
    text-wrap: balance;
}

.roadmap-body h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
}

.roadmap-date {
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .72rem;
    color: var(--lb-mute);
}

:where(.lb-body) .step-body p,
:where(.lb-body) .roadmap-body p { margin-bottom: .6rem; font-size: 1rem; }

:where(.lb-body) .step-callout {
    margin: .7rem 0 0;
    font-family: var(--mono-font);
    font-size: .8rem;
    line-height: 1.6;
    color: var(--lb-soft);
}

.roadmap { margin-top: 2.5rem; }

.roadmap-result {
    margin: .4rem 0 1rem;
    padding: 0;
    list-style: none;
}

.roadmap-result li {
    position: relative;
    max-width: 68ch;
    margin: 0 0 .45rem;
    padding-left: 1.2rem;
    font-size: .98rem;
    line-height: 1.6;
}

.roadmap-result li::before {
    content: "\203A";
    content: "\203A" / "";
    position: absolute;
    left: .1rem;
    font-family: var(--mono-font);
    font-weight: 700;
    color: var(--lb-ink);
}

/* ---------- lessons ---------- */
.lesson {
    padding: 1.1rem 0 1.3rem;
    border-top: 2px solid var(--lb-ink);
}

.lesson + .lesson { border-top: 1px solid var(--lb-rule); }

.lesson h3 {
    margin: 0 0 .45rem;
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.35;
    text-wrap: balance;
}

.lesson h3::before {
    content: "> ";
    content: "> " / "";
    font-family: var(--mono-font);
    color: #8a8a8a;
}

/* ---------- the corpus ---------- */
.lb-h3 {
    margin: 2.5rem 0 .55rem;
    font-family: var(--body-font);
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.3;
}

.lb-h4 {
    margin: 1.9rem 0 .45rem;
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .8rem;
    line-height: 1.3;
    color: var(--lb-ink);
}

.lb-h4::before { content: "// "; content: "// " / ""; color: #8a8a8a; }

.paper-list { margin: .75rem 0 1rem; border-top: 2px solid var(--lb-ink); }

.paper-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .2rem 1rem;
    align-items: baseline;
    padding: .6rem 0;
    border-bottom: 1px solid var(--lb-rule);
}

.paper-id a {
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .82rem;
    color: var(--lb-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: background-color .15s ease, color .15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .paper-id a:hover { background: var(--lb-ink); color: var(--lb-paper); }
}

.paper-id a:focus-visible { outline: 2px solid var(--lb-ink); outline-offset: 2px; }

.paper-title { font-size: .95rem; line-height: 1.55; color: var(--lb-soft); }

/* ---------- architecture: one diagram in ink frames and lines ----------
   Phones: one column, arrows pointing down. From 600px of its own width: the 2 x query
   path on top, Discovery branching off Reader, the Task.WhenAll band, the three scorers
   side by side, and the lines joining them into the aggregator. */
.lb-arch {
    container-type: inline-size;
    margin: 1.75rem 0 0;
    padding: 1.25rem;
    border: 2px solid var(--lb-ink);
    background: var(--lb-panel);
}

.lb-arch__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

:where(.lb-body) .lb-arch p { max-width: none; }

.lb-lane {
    margin: 0 0 .55rem;
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .72rem;
    line-height: 1.3;
    color: var(--lb-mute);
}

.lb-lane--2 { margin-top: 1.4rem; }

.lb-node {
    min-width: 0;
    border: 2px solid var(--lb-ink);
    background: var(--lb-paper);
}

.lb-node__name {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .5rem .7rem;
    background: var(--lb-ink);
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .82rem;
    line-height: 1.2;
    color: var(--lb-paper);
    overflow-wrap: anywhere;
}

.lb-body .lb-node__name { color: var(--lb-paper); }
.lb-node__name i { flex: none; font-size: 1rem; }

:where(.lb-body) .lb-node p {
    margin: 0;
    padding: .7rem .75rem .8rem;
    font-size: .86rem;
    line-height: 1.55;
    color: #2b2b2b;
}

/* the trace (projects/librain.html): before the one pass of data, set just before it plays */
.lb-arch.is-armed :is(.lb-node, .lb-dispatch) { opacity: .22; }
.lb-arch.is-armed :is(.lb-link, .lb-v, .lb-fan, .lb-join, .lb-joinlabel, .lb-from) { clip-path: inset(0 100% 100% 0); }

/* the three scorers: secondary, a lighter frame */
.lb-node--scorer { border-width: 1.5px; }
.lb-body .lb-node--scorer .lb-node__name { background: var(--lb-paper); color: var(--lb-ink); border-bottom: 1.5px solid var(--lb-ink); }

/* the aggregator: the output, on a lift */
.lb-node--out {
    position: relative;
    isolation: isolate;
    padding: 2px;
    margin: 0 6px 6px 0;
    border: 0;
    background: none;
}

.lb-node--out::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 6px -6px -6px 6px;
    background-image: var(--lb-dither);
    background-size: 4px 4px;
}

.lb-node--out::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 2px solid var(--lb-ink);
    background: var(--lb-paper);
}

/* where Discovery leaves Reader */
.lb-from {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mono-font);
    font-size: .76rem;
    line-height: 1.35;
    color: var(--lb-soft);
}

.lb-from__arrow { font-size: 1.1rem; font-weight: 700; color: var(--lb-ink); }

/* the dispatch: a band of ink across the diagram */
.lb-dispatch {
    padding: .85rem 1rem .95rem;
    background: var(--lb-term);
    color: var(--lb-term-fg);
}

:where(.lb-body) .lb-dispatch p { margin: 0; color: inherit; }

:where(.lb-body) .lb-dispatch .lb-dispatch__title {
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.3;
}

:where(.lb-body) .lb-dispatch .lb-dispatch__meta {
    margin-top: .35rem;
    font-size: .88rem;
    line-height: 1.55;
    color: #d2d2d2;
}

.lb-dispatch code { background: #2a2a2a; color: #f2f2f2; }

/* lines: phones draw each as a short arrow down */
.lb-link,
.lb-v,
.lb-fan,
.lb-join {
    position: relative;
    justify-self: center;
    width: 2px;
    height: 1.6rem;
    background: var(--lb-ink);
}

.lb-link::after,
.lb-v::after,
.lb-fan::after,
.lb-join::after,
.lb-joinlabel::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    border-top: 7px solid var(--lb-ink);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.lb-a-v1 { display: none; }
.lb-fan i,
.lb-join i { display: none; }
.lb-join::after { display: none; }
.lb-a-nov,
.lb-a-deval { margin-bottom: .75rem; }

.lb-joinlabel {
    position: relative;
    margin: 0;
    padding: .55rem 0 1.1rem;
    text-align: center;
    background: linear-gradient(var(--lb-ink), var(--lb-ink)) center / 2px 100% no-repeat;
}

.lb-joinlabel span {
    display: inline-block;
    padding: .2rem .5rem;
    background: var(--lb-panel);
    font-family: var(--mono-font);
    font-size: .74rem;
    line-height: 1.35;
    color: var(--lb-soft);
}

@container (min-width: 600px) {
    .lb-arch__grid {
        grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, 1fr) 2.25rem minmax(0, 1fr);
    }

    .lb-lane--1 { grid-area: 1 / 1 / 2 / -1; }
    .lb-a-reader { grid-area: 2 / 1; }
    .lb-a-l1 { grid-area: 2 / 2; }
    .lb-a-synth { grid-area: 2 / 3; }
    .lb-a-l2 { grid-area: 2 / 4; }
    .lb-a-eval { grid-area: 2 / 5; }
    .lb-a-v1 { grid-area: 3 / 1; }
    .lb-lane--2 { grid-area: 3 / 3 / 4 / -1; align-self: end; }
    .lb-a-from { grid-area: 4 / 1; }
    .lb-a-l3 { grid-area: 4 / 2; }
    .lb-a-disc { grid-area: 4 / 3 / 5 / -1; }
    .lb-a-v2 { grid-area: 5 / 3 / 6 / -1; }
    .lb-a-dispatch { grid-area: 6 / 1 / 7 / -1; }
    .lb-a-fan { grid-area: 7 / 1 / 8 / -1; }
    .lb-a-nov { grid-area: 8 / 1; }
    .lb-a-deval { grid-area: 8 / 3; }
    .lb-a-claim { grid-area: 8 / 5; }
    .lb-a-join { grid-area: 9 / 1 / 10 / -1; }
    .lb-a-joinlabel { grid-area: 10 / 1 / 11 / -1; }
    .lb-a-agg { grid-area: 11 / 2 / 12 / 5; }

    .lb-a-nov,
    .lb-a-deval { margin-bottom: 0; }

    /* horizontal arrows between the query path's agents, at their name bars */
    .lb-link {
        justify-self: stretch;
        align-self: start;
        width: auto;
        height: 2px;
        margin: 1.05rem .3rem 0;
    }

    .lb-link::after {
        left: auto;
        right: -1px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        border-left: 7px solid var(--lb-ink);
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 0;
    }

    .lb-a-l3 { align-self: center; margin-top: 0; }

    /* Reader -> the branch, under Reader */
    .lb-a-v1 { display: block; height: auto; min-height: 1.5rem; align-self: stretch; }
    .lb-a-v1::after { display: none; }
    /* the branch drawn as an elbow: down from Reader, across into the arrow to Discovery;
       its label sits under the bend */
    .lb-a-from {
        position: relative;
        align-self: stretch;
        align-items: flex-end;
        padding: 0 0 .5rem;
    }

    .lb-a-from::before,
    .lb-a-from::after {
        content: "";
        position: absolute;
        left: calc(50% - 1px);
        background: var(--lb-ink);
    }

    .lb-a-from::before { top: 0; height: 50%; width: 2px; }
    .lb-a-from::after { top: calc(50% - 1px); right: 0; height: 2px; }
    .lb-a-from .lb-from__arrow { display: none; }
    .lb-a-l3 { margin-left: 0; }

    /* the three lines from the band down to each scorer, and from them into one */
    .lb-fan,
    .lb-join {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, 1fr) 2.25rem minmax(0, 1fr);
        grid-template-columns: subgrid;
        justify-self: stretch;
        width: auto;
        height: 1.9rem;
        background: none;
    }

    .lb-fan::after { display: none; }
    .lb-fan i,
    .lb-join i { display: block; position: relative; }

    .lb-fan i:nth-child(odd) { background: linear-gradient(var(--lb-ink), var(--lb-ink)) center / 2px 100% no-repeat; }

    .lb-fan i:nth-child(odd)::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -1px;
        transform: translateX(-50%);
        border-top: 7px solid var(--lb-ink);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
    }

    .lb-join { height: 1.6rem; }

    .lb-join i:nth-child(1) {
        background:
            linear-gradient(var(--lb-ink), var(--lb-ink)) center top / 2px 50% no-repeat,
            linear-gradient(var(--lb-ink), var(--lb-ink)) right center / 50% 2px no-repeat;
    }

    .lb-join i:nth-child(2),
    .lb-join i:nth-child(4) { background: linear-gradient(var(--lb-ink), var(--lb-ink)) center / 100% 2px no-repeat; }

    .lb-join i:nth-child(3) {
        background:
            linear-gradient(var(--lb-ink), var(--lb-ink)) center / 2px 100% no-repeat,
            linear-gradient(var(--lb-ink), var(--lb-ink)) center / 100% 2px no-repeat;
    }

    .lb-join i:nth-child(5) {
        background:
            linear-gradient(var(--lb-ink), var(--lb-ink)) center top / 2px 50% no-repeat,
            linear-gradient(var(--lb-ink), var(--lb-ink)) left center / 50% 2px no-repeat;
    }
}

/* ---------- Discovery Mode: each run is a terminal window ---------- */
.demo-grid {
    container-type: inline-size;
    display: grid;
    gap: 2rem;
    margin: 1.75rem 0 0;
}

.demo-card {
    --lift: 6px;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 var(--lift) var(--lift) 0;
    padding: 2px;
}

.demo-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: var(--lift) calc(var(--lift) * -1) calc(var(--lift) * -1) var(--lift);
    background-image: var(--lb-dither);
    background-size: 4px 4px;
}

.demo-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 2px solid var(--lb-ink);
    background: var(--lb-paper);
}

.demo-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .7rem;
    padding: .55rem .9rem .75rem;
    background: var(--lb-term);
    color: var(--lb-term-fg);
}

.demo-badge {
    padding: .22rem .45rem;
    border: 1.5px solid #8c8c8c;
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .66rem;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: lowercase;
    color: var(--lb-term-fg);
}

.demo-badge--cross { background: var(--lb-term-fg); border-color: var(--lb-term-fg); color: var(--lb-term); }

.lb-body .demo-card__title {
    flex-basis: 100%;
    margin: 0;
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .86rem;
    line-height: 1.5;
    color: #f4f4f4;
    overflow-wrap: anywhere;
}

.demo-card__title::before { content: "$ "; content: "$ " / ""; color: var(--lb-term-mute); }
.demo-cross { padding: 0 .2rem; color: var(--lb-term-mute); }

.demo-hyp,
.demo-claim,
.demo-block,
.demo-scores {
    min-width: 0;
    padding: 1rem 1.15rem 1.1rem;
    border-top: 1px solid var(--lb-rule);
}

.demo-card__head + .demo-hyp { border-top: 0; }

.demo-label {
    margin: 0 0 .55rem;
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .74rem;
    line-height: 1.4;
    text-transform: lowercase;
    color: var(--lb-ink);
}

.demo-label::before { content: "// "; content: "// " / ""; color: #8a8a8a; }

.demo-label-sub {
    margin-left: .35rem;
    font-weight: 400;
    text-transform: none;
    color: var(--lb-mute);
}

:where(.lb-body) .demo-hyp p,
:where(.lb-body) .demo-block p { margin: .6rem 0 0; font-size: .95rem; line-height: 1.65; }

/* the full hypothesis waits behind a disclosure; the Discovery is the point */
.demo-hyp { padding: 0; }

.demo-hyp > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1.15rem;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.demo-hyp > summary::-webkit-details-marker { display: none; }
.demo-hyp > summary .demo-label { margin: 0; }
.demo-hyp > summary:focus-visible { outline: 2px solid var(--lb-ink); outline-offset: -4px; }
.demo-hyp[open] > summary { padding-bottom: 0; }
:where(.lb-body) .demo-hyp > p { padding: 0 1.15rem 1.1rem; }

.demo-claim { background: var(--lb-panel); }
.demo-label--discovery { color: var(--lb-ink); }

:where(.lb-body) .demo-claim .demo-tldr {
    margin: 0 0 .8rem;
    font-weight: 600;
    font-size: 1.12rem;
    line-height: 1.4;
    color: var(--title-color);
    text-wrap: pretty;
}

.demo-claim blockquote {
    margin: 0;
    padding: .1rem 0 .1rem .9rem;
    border-left: 2px solid var(--lb-ink);
    font-size: .95rem;
    line-height: 1.65;
    color: var(--lb-text);
}

:where(.lb-body) .demo-claim .demo-claim-note {
    margin: .8rem 0 0;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--lb-mute);
}

.demo-evidence { margin: 0; padding: 0; list-style: none; }

.demo-evidence li {
    padding: .5rem 0;
    border-top: 1px solid var(--lb-rule);
    font-size: .9rem;
    line-height: 1.55;
    color: var(--lb-soft);
    overflow-wrap: anywhere;
}

.demo-evidence li:first-child { border-top: 0; padding-top: 0; }

.demo-evidence a {
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .82rem;
    color: var(--lb-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: background-color .15s ease, color .15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .demo-evidence a:hover { background: var(--lb-ink); color: var(--lb-paper); }
}

.demo-evidence a:focus-visible { outline: 2px solid var(--lb-ink); outline-offset: 2px; }

.demo-citation-mode {
    display: inline-block;
    margin-left: .3rem;
    padding: .12rem .35rem;
    border: 1.5px solid var(--lb-ink);
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .64rem;
    line-height: 1;
    text-transform: lowercase;
    color: var(--lb-ink);
    vertical-align: .1em;
}

.demo-citation-mode--analog { background: var(--lb-ink); color: var(--lb-paper); }

/* scores: ink bars on a light dithered track */
.demo-scores { display: grid; gap: .45rem; align-content: start; }

.score-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) 2.6rem;
    align-items: center;
    gap: .75rem;
    font-family: var(--mono-font);
    font-size: .76rem;
    line-height: 1.3;
}

.score-label { color: var(--lb-soft); text-transform: lowercase; }
.score-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lb-ink); }
.score-bar { height: 8px; background-image: var(--lb-dither-light); background-size: 2px 2px; }
.score-bar__fill { height: 100%; background: var(--lb-ink); }
.score-row--quality .score-label { font-weight: 700; color: var(--lb-ink); }
.score-row--quality .score-bar { height: 12px; }

@container (min-width: 44rem) {
    .demo-card {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        grid-template-areas:
            "head head"
            "hyp  hyp"
            "claim ev"
            "claim sc";
        grid-template-rows: auto auto auto 1fr;
    }

    .demo-card__head { grid-area: head; }
    .demo-hyp { grid-area: hyp; }
    .demo-claim { grid-area: claim; border-right: 1px solid var(--lb-rule); }
    .demo-block { grid-area: ev; }
    .demo-scores { grid-area: sc; }
}

/* ---------- Gantt: mono, square ink bars ---------- */
.gantt {
    margin: 2rem 0 2.5rem;
    padding: 1.1rem 1.1rem .9rem;
    overflow-x: auto;
    border: 2px solid var(--lb-ink);
    background: var(--lb-paper);
}

.gantt:focus-visible { outline: 2px solid var(--lb-ink); outline-offset: 3px; }

.gantt-grid {
    display: grid;
    grid-template-columns: 11rem repeat(9, minmax(2.6rem, 1fr));
    grid-auto-rows: minmax(2.35rem, auto);
    row-gap: .3rem;
    align-items: center;
    min-width: 38rem;
}

.gantt-corner,
.gantt-month {
    align-self: end;
    padding-bottom: .45rem;
    border-bottom: 2px solid var(--lb-ink);
}

.gantt-month {
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .68rem;
    text-align: center;
    text-transform: lowercase;
    color: var(--lb-mute);
}

.gantt-label {
    grid-column: 1;
    padding-right: .9rem;
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .76rem;
    line-height: 1.2;
    color: var(--lb-ink);
}

.gantt-label span {
    display: block;
    margin-top: .1rem;
    font-family: var(--body-font);
    font-weight: 400;
    font-size: .74rem;
    color: var(--lb-mute);
}

.gantt-bar,
.gantt-legend-swatch {
    background: var(--lb-ink);
}

.gantt-bar {
    display: flex;
    align-items: center;
    height: 1.6rem;
    padding: 0 .55rem;
    overflow: hidden;
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .68rem;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--lb-paper);
}

/* recent: ink, ringed; deferred / planned: an open frame over a light dither */
.gantt-bar--accent,
.gantt-legend-swatch--accent { outline: 2px solid var(--lb-ink); outline-offset: 2px; }

.gantt-bar--planned,
.gantt-legend-swatch--planned {
    border: 1.5px solid var(--lb-ink);
    background-color: var(--lb-paper);
    background-image: repeating-conic-gradient(#d9d9d9 0 25%, transparent 0 50%);
    background-size: 4px 4px;
    color: var(--lb-ink);
}

.gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--lb-rule);
    font-family: var(--mono-font);
    font-size: .72rem;
    color: var(--lb-soft);
}

.gantt-legend-item { display: inline-flex; align-items: center; gap: .55rem; }
.gantt-legend-swatch { display: inline-block; width: 1.4rem; height: .75rem; }
.gantt-legend-swatch--accent { margin: 0 2px; }

/* ---------- the evaluation sections: disclosures in a 2px frame ----------
   The summary is the chapter line plus the Career Line's "+ show / - hide" key. */
.lb-disc {
    border: 2px solid var(--lb-ink);
    background: var(--lb-paper);
}

.lb-disc > summary {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0;
    padding: 1rem 1.1rem;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.lb-disc > summary::-webkit-details-marker { display: none; }
.lb-disc > summary:focus-visible { outline: 2px solid var(--lb-ink); outline-offset: 3px; }
.lb-disc[open] > summary { border-bottom: 2px solid var(--lb-ink); }
.lb-disc > summary .lb-chap__n { align-self: first baseline; }

.lb-disc__body { padding: 1.4rem 1.1rem 1.5rem; }

/* evaluation sections that follow one another stack closer, as one group */
.lb-sec:has(> .lb-disc) + .lb-sec:has(> .lb-disc) { margin-top: 1.5rem; }
.lb-disc__body > .stat-grid:first-child { margin-top: 0; }
.lb-disc__body > .papers-callout:last-child { margin-bottom: 0; }

.lb-disc[open] > .lb-disc__body { animation: lb-rise .24s var(--lb-ease); }

@keyframes lb-rise { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.lb-key {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .55rem;
    border: 1.5px solid var(--lb-ink);
    background: var(--lb-paper);
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .7rem;
    line-height: 1;
    color: var(--lb-ink);
    transition: background-color .15s ease, color .15s ease;
}

.lb-key__sign::before { content: "+"; }
details[open] > summary .lb-key { background: var(--lb-ink); color: var(--lb-paper); }
details[open] > summary .lb-key__sign::before { content: "\2013"; }
.lb-key__less { display: none; }
details[open] > summary .lb-key__more { display: none; }
details[open] > summary .lb-key__less { display: inline; }

@media (hover: hover) and (pointer: fine) {
    .lb-disc > summary:hover .lb-key,
    .demo-hyp > summary:hover .lb-key { background: var(--lb-ink); color: var(--lb-paper); }
}

/* ---------- the index ---------- */
.lb-toc { font-family: var(--mono-font); }

.lb-toc__box > summary {
    display: flex;
    align-items: center;
    gap: .65rem;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.lb-toc__box > summary::-webkit-details-marker { display: none; }

.lb-toc__label {
    font-weight: 700;
    text-transform: lowercase;
    font-size: .72rem;
    line-height: 1.2;
    color: var(--lb-mute);
}

.lb-toc__now {
    display: block;
    overflow: hidden;
    font-weight: 700;
    font-size: .78rem;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--lb-ink);
}

.lb-toc__now:empty { display: none; }

.lb-toc__list { margin: 0; padding: 0; list-style: none; }
.lb-toc__head { display: none; }

.lb-toc__list a {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    padding: .3rem .35rem;
    font-size: .78rem;
    line-height: 1.35;
    color: #3a3a3a;
    text-decoration: none;
    transition: color .15s ease;
}

.lb-toc__n {
    flex: none;
    width: 1.55rem;
    padding: .12rem 0;
    font-weight: 700;
    font-size: .68rem;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: #6b6b6b;
    transition: background-color .2s var(--lb-ease), color .2s var(--lb-ease);
}

.lb-toc__list a[aria-current] { color: var(--lb-ink); font-weight: 700; }
.lb-toc__list a[aria-current] .lb-toc__n { background: var(--lb-ink); color: var(--lb-paper); }

@media (hover: hover) and (pointer: fine) {
    .lb-toc__list a:hover { color: var(--lb-ink); }
    .lb-toc__list a:hover .lb-toc__t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
}

.lb-toc__list a:focus-visible { outline: 2px solid var(--lb-ink); outline-offset: 1px; }

/* wide: a column that stays put and stays open */
@media screen and (min-width: 1100px) {
    .lb-toc {
        position: sticky;
        top: 6.5rem;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        scrollbar-width: thin;
        padding: .4rem 0 1rem;
    }

    /* the list is always open here: no toggle, a plain label above it (the nav is named) */
    .lb-toc__box > summary { display: none; }

    .lb-toc__head {
        display: block;
        margin: 0 0 .7rem .35rem;
    }

    .lb-toc__head::before { content: "// "; content: "// " / ""; }

    .lb-toc__list { border-left: 2px solid var(--lb-ink); padding-left: .35rem; }
}

/* narrower: a sticky "on this page" control that opens a list */
@media screen and (max-width: 1099px) {
    /* tablets: it sticks under the header's dock, on a strip of paper so the text
       scrolling under it does not show through the gap */
    .lb { padding-top: 1.5rem; }

    .lb-toc {
        position: sticky;
        top: 0;
        z-index: 50;
        margin: 0 -1.5rem 2rem;
        padding: 6rem 1.5rem .5rem;
        background: var(--lb-paper);
    }

    .lb-toc__box {
        position: relative;
        max-width: 24rem;
        border: 2px solid var(--lb-ink);
        background: var(--lb-paper);
        box-shadow: 3px 3px 0 var(--lb-ink);
    }

    .lb-toc__box > summary {
        min-height: 40px;
        padding: .3rem .7rem;
        cursor: pointer;
    }

    .lb-toc__box > summary:focus-visible { outline: 2px solid var(--lb-ink); outline-offset: 3px; }

    .lb-toc__text { display: grid; min-width: 0; }

    /* a list glyph, a cross while open */
    .lb-toc__icon {
        position: relative;
        flex: none;
        width: 1rem;
        height: .8rem;
        background:
            linear-gradient(var(--lb-ink), var(--lb-ink)) 0 0 / 100% 2px no-repeat,
            linear-gradient(var(--lb-ink), var(--lb-ink)) 0 50% / 100% 2px no-repeat,
            linear-gradient(var(--lb-ink), var(--lb-ink)) 0 100% / 100% 2px no-repeat;
    }

    .lb-toc__box[open] .lb-toc__icon {
        background:
            linear-gradient(45deg, transparent calc(50% - 1px), var(--lb-ink) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
            linear-gradient(-45deg, transparent calc(50% - 1px), var(--lb-ink) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
        height: 1rem;
    }

    .lb-toc__list {
        position: absolute;
        left: -2px;
        right: -2px;
        top: calc(100% + 2px);
        max-height: min(65vh, 32rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .3rem 0;
        border: 2px solid var(--lb-ink);
        background: var(--lb-paper);
        box-shadow: 3px 3px 0 var(--lb-ink);
    }

    .lb-toc__list a {
        align-items: center;
        min-height: 44px;
        padding: .45rem .75rem;
        font-size: .84rem;
    }

    .lb-sec { scroll-margin-top: 10rem; }
}

/* ---------- the header's back key (the subpages' .nav__back), beside the language keys ---------- */
@media screen and (min-width: 768px) {
    .nav__btns .nav__back { margin-left: .5rem; }
}

/* ---------- phones ---------- */
@media screen and (max-width: 767px) {
    .lb { padding: 0 1rem 4rem; }

    /* the header is the bottom bar here, so the index has the top to itself; a strip of
       paper above it keeps the text scrolling under it from showing through the gap */
    .lb-toc {
        margin: 0 -1rem 1.5rem;
        padding: calc(.75rem + env(safe-area-inset-top, 0px)) 1rem .5rem;
    }

    .lb-toc__box { max-width: none; }

    .lb-sec { margin-top: 4rem; scroll-margin-top: 4.75rem; }
    .lb-chap { gap: .7rem; }
    .lb-chap__n { font-size: 1.5rem; }

    :where(.lb-body) p { font-size: 1rem; }
    :where(.lb-body) .lb-lede { font-size: 1rem; }

    .lb-btn__face { padding: .5rem .9rem; font-size: .78rem; }

    .metric-row { grid-template-columns: minmax(0, 1fr); gap: .75rem; max-width: 26rem; }
    .metric-callout { display: flex; align-items: baseline; gap: .9rem; padding: .6rem .8rem; }
    .metric-value { flex: none; min-width: 5.6rem; font-size: 1.3rem; }
    .metric-label { margin-top: 0; }

    .lb-arch { padding: .9rem; }

    .api-row { grid-template-columns: auto minmax(0, 1fr); padding: .85rem .9rem .95rem; }
    .api-desc { grid-column: 1 / -1; }

    .paper-row { grid-template-columns: minmax(0, 1fr); }

    .lb-disc > summary { flex-wrap: wrap; gap: .5rem .7rem; padding: .85rem .9rem; }
    .lb-disc > summary .lb-chap__lead { display: none; }
    .lb-disc > summary h2 { flex: 1 1 10rem; }
    .lb-disc__body { padding: 1.2rem .9rem 1.3rem; }

    .demo-hyp > summary,
    .demo-claim,
    .demo-block,
    .demo-scores { padding-left: .9rem; padding-right: .9rem; }
    :where(.lb-body) .demo-hyp > p { padding: 0 .9rem 1rem; }
    .score-row { grid-template-columns: 5.6rem minmax(0, 1fr) 2.4rem; gap: .6rem; }

    .gantt { padding: .9rem .8rem .8rem; }
    .gantt-grid { grid-template-columns: 7.25rem repeat(9, minmax(2.1rem, 1fr)); min-width: 31rem; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .lb-title::after { animation: none; }
    .lb-disc[open] > .lb-disc__body { animation: none; }
    .lb-btn__face,
    .lb-key,
    .lb-toc__list a,
    .lb-toc__n,
    .lb-body a:not([class]),
    .paper-id a,
    .demo-evidence a { transition: none; }
    .lb-btn:active .lb-btn__face { transform: none; }
}

@media print {
    .lb { display: block; padding-top: 1rem; }
    .lb-toc { display: none; }
    .lb-title::after { display: none; }
}