/* The library: 23 retained learning pages inside the site's own chrome (.site-top, .site-foot in site.css).
   Cascade: oyee.css (their original components) → site.css (tokens, chrome) → legacy-studio.css → this file.
   This file re-dresses those components in the site's language (design spec §1, §2, §7, §8, §9):
   paper, ink, one vermilion for the human act; Georgia is the voice, Helvetica/Arial the instrument;
   no mono, no uppercase, no letter-spaced labels, no coloured bands, no 3px frames, no radii, no shadows.
   Every rule is scoped to body[data-library]. */

/* ---------- 0. The older stylesheet's variables, re-pointed ---------- */
body[data-library]{
  --ink-60:var(--ink-2); --ink-30:var(--ink-3); --red:var(--vermilion);
  --hair:1px solid var(--ink); --hair-soft:1px solid var(--rule);
  --grot:var(--tool); --utility:var(--tool);
  /* ≥1024 the text starts on col 2 of the 12-column grid, like the sales pages (spec §2.5, §7.1). */
  --hang:0px; --lib-sect:clamp(56px, 7vw, 112px);
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--fs-body)/1.5 var(--voice); letter-spacing:0; overflow-wrap:break-word;
  -webkit-text-size-adjust:100%; text-size-adjust:100%
}
[data-library] ::selection{background:var(--yellow); color:var(--ink)}
[data-library] :focus-visible{outline:2px solid var(--vermilion); outline-offset:3px}
[data-library] :focus:not(:focus-visible){outline:none}
/* No uppercase, no letter-spaced labels, weight 400 for every face (spec §2.3). */
[data-library] :where(main, .onepager, #attestation) *{text-transform:none; letter-spacing:0}
[data-library] :where(main, .onepager, #attestation) :where(h1, h2, h3, h4, p, span, a, button, label, li, dt, dd, summary){font-weight:400}
/* Georgia at weight 400 only, and italic only for a genuine title (spec §2.3): no bold or italic accents in running prose. */
[data-library] :is(main, .onepager, #attestation) :is(strong, b){font-weight:400}
[data-library] :is(main, .onepager, #attestation) :is(em, i){font-style:normal; color:inherit}
[data-library] :is(main, .onepager, #attestation) cite{font-style:italic}

/* ---------- 1. Layout: sections separated by space only ---------- */
[data-library] .wrap{max-width:none; margin:0; padding:0 var(--margin)}
@media (min-width:1024px){
  [data-library] .wrap{padding:0 calc(var(--margin) + (100% - 2 * var(--margin) - 11 * var(--gap)) / 12 + var(--gap))}
}
[data-library] :is(.chapter-hero, .hero){min-height:0; display:block; padding:clamp(40px, 6.67vw, 96px) 0 0; border:0}
[data-library] .section{padding:var(--lib-sect) 0 0; border:0}
[data-library] .section + .section{border-top:0}
[data-library] main > :last-child:not(.workshop-bridge):not(.library-end){padding-bottom:var(--lib-sect)}
[data-library] .journey-section{padding:var(--lib-sect) 0 0}

/* ---------- 2. Type ---------- */
[data-library] main :is(h1, h2, h3, h4){margin:0; font-family:var(--voice); color:var(--ink); text-wrap:balance; hyphens:manual}
[data-library] main h1{max-width:16em; font-size:var(--fs-question); line-height:1.08; letter-spacing:-.012em}
[data-library] main h2{max-width:20em; font-size:var(--fs-h2); line-height:1.15}
@media (min-width:1280px){[data-library] main h2{letter-spacing:-.012em}}
[data-library] main h3{max-width:24em; margin:48px 0 12px; font-size:var(--fs-choice); line-height:1.25}
[data-library] main h4{margin:24px 0 8px; font-size:var(--fs-body); line-height:1.4}
[data-library] main :is(p, li, dd){max-width:36em; font-size:var(--fs-body); line-height:1.5; text-wrap:pretty; hyphens:manual}
[data-library] main p{margin:0 0 1em}
[data-library] main h2 + :is(p, div, ul, ol){margin-top:16px}
[data-library] main a:not([class]), [data-library] main a.text-link:not(.library-course){color:var(--ink); border:0; text-decoration:underline; text-decoration-color:var(--ink-3); text-decoration-thickness:1px; text-underline-offset:.2em}
[data-library] main a:not([class]):hover, [data-library] main a.text-link:not(.library-course):hover{color:var(--ink); text-decoration-color:var(--vermilion); text-decoration-thickness:2px}
[data-library] .lede{max-width:30em; margin:24px 0 0; font:400 var(--fs-lead)/1.4 var(--voice); color:var(--ink)}
[data-library] .learn-block{max-width:none}
[data-library] .learn-block h3{border-top:0; padding-top:0}
[data-library] .learn-block > h3:first-of-type{margin-top:0}
/* Section headings that follow the H1 directly are H2 in the markup (heading order, WCAG 1.3.1) and keep the H3 look. */
[data-library] main h2.as-h3{max-width:24em; margin:48px 0 12px; font-size:var(--fs-choice); line-height:1.25; letter-spacing:0; border-top:0; padding-top:0}
[data-library] main h2.as-h3 + :is(p, div, ul, ol){margin-top:0}
[data-library] .learn-block > h2.as-h3:first-child{margin-top:0}
[data-library] .idees h2.as-h3 + .ir-row{border-top:none; padding-top:.1rem; margin-top:.4rem}

/* Labels: the instrument's voice, small, ink-2, sentence case (spec §2.3, §7.4). */
[data-library] :is(.kicker, .section-label, .scene-num, .crier-line, .quiz-progress, .game-status, .journey-state, .progress-label,
  .tl-year, .ir-lab, .door-who, .hw-who, .member-role, .critter-meter-label, .hero-live-label, .ff-group-t, .ff-lab, .age-note,
  .mch-caption, .mch-temp, .mch-tally, .place-status, .m3-caption, .m3-temp-label, .lab-slider, .lab-step, .lab-hint, .bells-chip,
  .jr-lab, .ct-q, .db-how){
  font-family:var(--tool); font-size:var(--fs-small); line-height:1.4; font-style:normal; color:var(--ink-2); text-transform:none; letter-spacing:0
}
[data-library] :is(.kicker, .section-label){display:block; margin:0 0 16px; padding:0; background:none; text-wrap:balance}
[data-library] .section-label{margin-bottom:24px}
[data-library] .crier-line{margin:0 0 16px}
[data-library] .age-note{max-width:36em; margin:16px 0 0; padding:0; border:0}
[data-library] :is(.mch-temp, .m3-temp-label, .lab-slider){color:var(--ink)}
[data-library] :is(.mch-tally, .place-status, .m3-caption, .lab-step, .pred-pct, .mch-temp-val, .m3-temp-val, .lab-slider-v){font-family:var(--tool); font-variant-numeric:tabular-nums lining-nums}
[data-library] .lab-readout{font:400 var(--fs-body)/1.5 var(--voice); border-left:1px solid var(--ink); padding-left:16px; margin-top:16px}

/* ---------- 3. The opener's scene, the margin notes ---------- */
/* Narrative and speech carry the same 1px ink rule as .callout: vermilion is the human act, never decoration (spec §2.1). */
[data-library] :is(.scene, .speech){max-width:36em; margin:32px 0 0; padding:2px 0 2px 20px; border:0; border-left:1px solid var(--ink); background:none}
[data-library] .mascot-row{margin:32px 0 0}
[data-library] .scene-num{display:block; margin:0 0 8px}
[data-library] :is(.scene, .speech) p{margin:0; font:400 var(--fs-lead)/1.4 var(--voice); color:var(--ink)}
[data-library] .callout{max-width:36em; margin:32px 0; padding:2px 0 2px 20px; border:0; border-left:1px solid var(--ink)}
[data-library] .journey-note{font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2); max-width:48em}

/* ---------- 4. Buttons: ink for the next step, vermilion only to book (spec §7.5) ---------- */
[data-library] :is(main, .band-ink) .btn, [data-library] .lab-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; margin:0; padding:0 22px;
  border:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); box-shadow:none;
  font:400 var(--fs-ui)/1.2 var(--tool); letter-spacing:0; text-transform:none; text-decoration:none; text-align:center; cursor:pointer
}
[data-library] .btn:hover, [data-library] .lab-btn:hover{background:var(--paper-lo); color:var(--ink); border-color:var(--ink)}
[data-library] .btn.btn-primary{background:var(--ink); border-color:var(--ink); color:var(--paper)}
[data-library] .btn.btn-primary:hover{background:var(--ink); color:var(--paper); text-decoration:underline; text-underline-offset:.25em}
/* Vermilion only on .btn-book, whose label is «Réserver un atelier» (spec §7.5); any other link to the planner stays ink. */
[data-library] .btn.btn-book{background:var(--vermilion); border-color:var(--vermilion); color:var(--paper)}
[data-library] .btn.btn-book:hover{background:var(--vermilion); color:var(--paper); text-decoration:underline; text-underline-offset:.25em}
[data-library] .btn:is(.btn-ghost, .btn-quiet){background:transparent; color:var(--ink); border-color:var(--ink)}
[data-library] .btn-step{border-style:solid}
[data-library] .btn:is([disabled], [aria-disabled="true"]){opacity:1; color:var(--ink-2); border-color:var(--ink-3); background:transparent; cursor:default}
[data-library] .band-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:32px}
[data-library] .chapter-hero .band-actions, [data-library] .hero .band-actions{margin-top:40px}
[data-library] .hero .btn-primary{margin-top:40px}
[data-library] .hero .band-actions .btn-primary{margin-top:0}
[data-library] .chapter-nav{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:48px 0 0}

/* Chips and toggles in the labs: instrument buttons; the chosen one is set (ink), the human pick vermilion. */
[data-library] :is(.lab-chip, .lab-toggle){min-height:44px; padding:0 14px; border:1px solid var(--ink-3); border-radius:0; background:transparent; color:var(--ink); font:400 var(--fs-small)/1.2 var(--tool); text-transform:none; letter-spacing:0}
[data-library] :is(.lab-chip, .lab-toggle):hover{border-color:var(--ink); background:var(--paper-lo); color:var(--ink)}
[data-library] :is(.lab-chip, .lab-toggle).is-on{background:var(--ink); border-color:var(--ink); color:var(--paper)}
/* A pressed control is set (ink fill), as in the experience; the visitor's second word keeps vermilion as a 2px ring, never a fill. */
[data-library] .lab-chips + .lab-chips .lab-chip.is-on{background:transparent; border-color:var(--vermilion); color:var(--ink); box-shadow:inset 0 0 0 1px var(--vermilion)}
[data-library] :is(.mch-temp, .m3-temp, .lab-range) input[type=range], [data-library] input[type=range]{accent-color:var(--vermilion)}
/* Sliders: a 24px hit area at least (spec §9.2), the track stays thin; 44px where the slider is the lab's main control. */
[data-library] input[type=range]{min-block-size:24px; margin-block:0}
[data-library] :is(.lab-range, .lab-slider) input[type=range]{min-block-size:44px}

/* ---------- 5. Try, check and completion: rows and hairlines, no frames ---------- */
[data-library] :is(.try-card, .check-card){max-width:none; margin-top:24px; padding:24px 0 0; border:0; border-top:1px solid var(--ink)}
[data-library] .complete-card{margin-top:32px; padding:24px 0 0; border:0; border-top:1px solid var(--ink)}
[data-library] .badge-name{margin:8px 0 16px; font:400 var(--fs-h2)/1.15 var(--voice)}
[data-library] .badge-name::after{content:none}
[data-library] .bell-award{display:inline-block; margin:8px 0; padding:4px 10px; border:1px solid var(--ink-3); color:var(--ink); font:400 var(--fs-small)/1.4 var(--tool)}

/* Quiz (quiz.js): the question in the voice, answers as rows; your pick is marked, never coloured text. */
[data-library] .quiz-q{max-width:24em; margin:0 0 24px; font:400 var(--fs-choice)/1.25 var(--voice); color:var(--ink)}
[data-library] .quiz-choices{margin:0 0 16px; padding:0; list-style:none; border-top:1px solid var(--rule); max-width:44em}
[data-library] .quiz-choices li{max-width:none; border-bottom:1px solid var(--rule)}
[data-library] .quiz-choice{display:block; width:100%; min-height:52px; padding:14px 0; border:0; background:none; color:var(--ink); text-align:left; font:400 var(--fs-body)/1.4 var(--voice); cursor:pointer}
[data-library] .quiz-choice:hover:not([disabled]){text-decoration:underline; text-decoration-color:var(--vermilion); text-decoration-thickness:2px; text-underline-offset:.2em; color:var(--ink)}
[data-library] .quiz-choice.is-right{padding-left:16px; background:var(--sage); box-shadow:inset 2px 0 0 var(--ink); color:var(--ink); font-weight:400}
[data-library] .quiz-choice.is-wrong{color:var(--ink-2); text-decoration:line-through; text-decoration-color:var(--vermilion); text-decoration-thickness:2px}
[data-library] .quiz-feedback{max-width:36em; margin:8px 0; padding:16px 0 0; font:400 var(--fs-body)/1.5 var(--voice)}
[data-library] .quiz-feedback.is-right{border-top:1px solid var(--ink)}
[data-library] .quiz-feedback.is-wrong{border-top:2px solid var(--vermilion)}
[data-library] .quiz-result{font:400 var(--fs-h2)/1.15 var(--voice)}

/* Journey index (/parcours/): rows with a quiet number, never KPI numerals. */
[data-library] .journey{border-top:1px solid var(--rule); max-width:none}
[data-library] .journey li{max-width:none; border-bottom:1px solid var(--rule)}
[data-library] .journey-card{grid-template-columns:3rem minmax(0, 1fr) auto; gap:16px 24px; padding:20px 0; color:var(--ink); text-decoration:none}
[data-library] .journey-num{font:400 var(--fs-num)/1.3 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2); align-self:baseline}
[data-library] .journey-card.is-done .journey-num{color:var(--ink)}
[data-library] .journey-card.is-next .journey-num{color:var(--vermilion)}
[data-library] .journey-title{font:400 var(--fs-choice)/1.25 var(--voice)}
[data-library] .journey-tagline{margin:4px 0 0; font:400 var(--fs-body)/1.5 var(--voice); color:var(--ink-2)}
[data-library] .journey-card:hover .journey-title{color:var(--ink); text-decoration:underline; text-decoration-color:var(--vermilion); text-decoration-thickness:2px; text-underline-offset:.2em}
[data-library] .journey-card:hover .journey-num{color:var(--ink)}
[data-library] .journey-card.is-next .journey-state{color:var(--ink)}
[data-library] .progress-track{height:1px; background:var(--rule)}
[data-library] .progress-fill{background:var(--ink)}
@media (max-width:640px){[data-library] .journey-card{grid-template-columns:2rem minmax(0, 1fr)}}

/* Timeline, myths, doors, steps, members. */
[data-library] .timeline{border-top:1px solid var(--rule); max-width:44em}
[data-library] .timeline li{max-width:none; padding:16px 0; border-bottom:1px solid var(--rule)}
[data-library] .tl-year{display:block; margin-bottom:4px; color:var(--ink-2); font-variant-numeric:tabular-nums lining-nums}
[data-library] .ir-row{max-width:36em; margin-top:16px; padding-top:16px; border-top:1px solid var(--rule)}
[data-library] .ir-lab{display:block; margin-bottom:4px}
[data-library] .ir-myth{font-style:normal; color:var(--ink-2)}
[data-library] .ir-myth .ir-lab{color:var(--ink-2)}
/* Doors and steps become rows (spec §7.5: rows replace every card grid; no three-column feature rows). */
[data-library] .doors{display:block; max-width:none; margin:32px 0 0; border:0; border-bottom:1px solid var(--rule)}
[data-library] .door, [data-library] .door + .door, [data-library] .doors .door:nth-child(n){display:grid; grid-template-columns:minmax(0, 12rem) minmax(0, 1fr) auto; align-items:baseline; gap:4px var(--gap); padding:20px 0; border:0; border-top:1px solid var(--rule); color:var(--ink); text-decoration:none}
[data-library] .door-who{color:var(--ink-2)}
[data-library] .door-line{max-width:34em; font:400 var(--fs-body)/1.5 var(--voice)}
[data-library] .door-cta{white-space:nowrap; font:400 var(--fs-ui)/1.3 var(--tool); text-decoration:underline; text-decoration-color:var(--ink-3); text-underline-offset:.2em}
[data-library] .door:hover{border-top-color:var(--ink)}
[data-library] .door:hover .door-cta{color:var(--ink); text-decoration-color:var(--vermilion); text-decoration-thickness:2px}
@media (max-width:767px){[data-library] .door, [data-library] .door + .door, [data-library] .doors .door:nth-child(n){grid-template-columns:minmax(0, 1fr); gap:6px}[data-library] .door-cta{white-space:normal}}
[data-library] .steps-grid{display:block; margin:0; border-bottom:1px solid var(--rule)}
[data-library] .step{display:grid; grid-template-columns:3rem minmax(0, 1fr); column-gap:var(--gap); padding:20px 0; border-top:1px solid var(--rule)}
[data-library] .step-num{grid-column:1; grid-row:1 / span 2; margin:0; font:400 var(--fs-num)/1.8 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
[data-library] .step h3{grid-column:2; grid-row:1; margin:0 0 4px; font:400 var(--fs-choice)/1.25 var(--voice)}
[data-library] .step p:not(.step-num){grid-column:2; margin:0; font-size:var(--fs-body); color:var(--ink-2)}
[data-library] .member{border-top:1px solid var(--rule)}
[data-library] .member-name{font:400 var(--fs-h2)/1.15 var(--voice)}
[data-library] .member-name::after{content:none}
[data-library] .lx-terms{font:400 var(--fs-small)/1.5 var(--tool); color:var(--ink-2)}

/* ---------- 6. Exhibits: the machine's output in ink, the human pick in vermilion ---------- */
[data-library] :is(.pred-sentence, .halluc-statement){max-width:none; padding:20px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); font:400 var(--fs-material)/1.35 var(--voice); color:var(--ink)}
[data-library] .halluc-statement{font-size:var(--fs-lead); line-height:1.4}
[data-library] .pred-options{border-top:1px solid var(--rule)}
[data-library] .pred-option{min-height:52px; width:100%; max-width:100%; grid-template-columns:minmax(0, 8rem) minmax(1.5rem, 1fr) auto; gap:12px 16px; border-bottom:1px solid var(--rule); font:400 var(--fs-body)/1.3 var(--voice)}
[data-library] .pred-word{min-width:0; overflow-wrap:anywhere}
[data-library] .pred-word{font-family:var(--voice); font-weight:400}
[data-library] .pred-option:hover .pred-word{color:var(--ink); text-decoration:underline; text-decoration-color:var(--vermilion); text-decoration-thickness:2px}
[data-library] :is(.pred-bar-wrap, .critter-meter){height:2px; background:var(--rule)}
[data-library] .pred-bar{background:var(--ink)}
[data-library] .pred-option:hover .pred-bar{background:var(--vermilion)}
[data-library] .pred-pct{font-size:var(--fs-num); color:var(--ink-2)}
[data-library] .critter-say{font:400 var(--fs-lead)/1.4 var(--voice)}
[data-library] .fruit-card{border:1px solid var(--ink-3); font:400 var(--fs-small)/1.2 var(--tool); text-transform:none; letter-spacing:0; min-height:44px}
[data-library] .fruit-card:not([disabled]):hover{border-color:var(--ink); color:var(--ink); background:var(--paper-lo)}
[data-library] .verdict-tag{padding:2px 8px; font:400 var(--fs-small)/1.4 var(--tool); letter-spacing:0}
[data-library] .hw-title{font:400 var(--fs-choice)/1.25 var(--voice); border-bottom:1px solid var(--ink)}
[data-library] .hw-bubble{border:1px solid var(--rule)}
[data-library] .hw-student{border-left:2px solid var(--ink)}
[data-library] .hw-ai{border-left:2px solid var(--ink-3); background:var(--paper-lo)}
[data-library] .hw-note{font:400 var(--fs-body)/1.5 var(--voice); font-style:normal; color:var(--ink-2); border-top:1px solid var(--rule)}
[data-library] .fork-row{border-top:1px solid var(--rule)}
[data-library] .fork-row:first-child{border-top:0}
[data-library] .fork-builder-line{border-left:2px solid var(--vermilion)}
[data-library] .vm-title{font:400 var(--fs-choice)/1.25 var(--voice)}
[data-library] :is(.place-wrap, .lab-canvas-wrap, .m3-wrap){border:1px solid var(--ink); background:var(--paper-hi)}
[data-library] .scene-vs{border:0}
/* SVG drawn by the exhibits (their presentation attributes lose to CSS): the older palette re-pointed. */
[data-library] svg [fill="#0A0A0A"], [data-library] svg [fill="#2A2A2A"]{fill:var(--ink)}
[data-library] svg [stroke="#0A0A0A"], [data-library] svg [stroke="#2A2A2A"]{stroke:var(--ink)}
[data-library] svg [fill="#E63312"]{fill:var(--vermilion)}
[data-library] svg [stroke="#E63312"]{stroke:var(--vermilion)}
[data-library] svg [fill="#FFFFFF"]:not(text){fill:var(--paper-hi)}
[data-library] svg :is(.mch-token-text, .mch-bar-word){font-family:var(--voice); font-weight:400; fill:var(--ink)}
[data-library] svg :is(.mch-bar-val, .dp-label, .vm-col-label, .vm-num){font-family:var(--tool); letter-spacing:0; font-variant-numeric:tabular-nums lining-nums}
[data-library] svg .mch-bar-val{fill:var(--ink-2)}
[data-library] svg :is(.dp-label, .vm-col-label){fill:var(--ink)}
[data-library] svg .vm-col-red{fill:var(--vermilion)}
/* SVG words stay readable: phones get their own drawing (machine.js, datapath.js) where one unit ≈ one pixel. */
[data-library] svg .mch-token-text{font-size:16px}
[data-library] svg .mch-bar-word{font-size:15px}
[data-library] svg .mch-bar-val{font-size:14px}
[data-library] svg .dp-label{font-size:14px; letter-spacing:0}
[data-library] svg .dp-label-region{fill:var(--ink-2)}
/* The phone drawings are 340–360 units wide; on a 320px screen they shrink by about a sixth, so their words grow to match. */
@media (max-width:374px){[data-library] svg .mch-token-text{font-size:18px}[data-library] svg :is(.mch-bar-word, .mch-bar-val){font-size:17.5px}[data-library] svg .dp-label{font-size:16.5px}}

/* «La bête» (critter.js): fruit as word pieces on paper-hi, traits in the instrument face, a tally of what it has seen. */
[data-library] .critter-stage{grid-template-columns:minmax(9rem, 13rem) minmax(0, 1fr); gap:24px 40px}
[data-library] .critter-seen .critter-meter-label{margin:0 0 8px}
[data-library] .critter-seen .critter-meter-label + .critter-meter{margin-bottom:0}
[data-library] .critter-tally{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:4px 12px; margin:0; padding:10px 0; border-top:1px solid var(--rule); max-width:none}
[data-library] .critter-tally + .critter-meter-label{margin-top:0; padding-top:16px; border-top:1px solid var(--rule)}
[data-library] .tally-word{font:400 var(--fs-piece)/1.1 var(--voice); color:var(--ink)}
[data-library] .tally-marks{grid-column:1; font:400 var(--fs-body)/1 var(--voice); color:var(--ink); letter-spacing:.18em; min-height:1em}
[data-library] .tally-num{grid-column:2; grid-row:1; font:400 var(--fs-num)/1.2 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
[data-library] .critter-meter-fill{background:var(--ink)}
[data-library] .card-tray{gap:12px}
[data-library] .fruit-card{display:grid; justify-items:start; gap:4px; min-width:8.5rem; min-height:72px; padding:12px 16px; background:var(--paper-hi); border:1px solid var(--ink); color:var(--ink); text-align:left}
[data-library] .fruit-word{font:400 var(--fs-piece)/1.1 var(--voice)}
[data-library] .fruit-traits{font:400 var(--fs-small)/1.3 var(--tool); color:var(--ink-2)}
[data-library] .fruit-card[disabled]{opacity:1; cursor:default; border-color:var(--rule); background:transparent; color:var(--ink-2)}
[data-library] .fruit-card[disabled] .fruit-word{color:var(--ink-2)}
[data-library] .fruit-card.is-grounded{background:var(--sage); border-color:var(--ink)}
[data-library] .fruit-card.is-look{background:var(--yellow); border-color:var(--ink)}
[data-library] .fruit-card:is(.is-grounded, .is-look) :is(.fruit-word, .fruit-traits){color:var(--ink)}
@media (max-width:600px){[data-library] .critter-stage{grid-template-columns:minmax(0, 1fr)}}

/* The labs' figures (mecanique.js): under the canvas in HTML, so they reflow; ink, instrument face, tabular. */
[data-library] .lab-figures{display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:6px 20px; margin:16px 0 0; padding:12px 0 0; border-top:1px solid var(--rule); max-width:44em}
[data-library] .lab-figures dt{margin:0; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
[data-library] .lab-figures dd{margin:0; max-width:none; font:400 var(--fs-num)/1.4 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink); overflow-wrap:anywhere}
@media (max-width:480px){[data-library] .lab-figures{grid-template-columns:minmax(0, 1fr); gap:0}[data-library] .lab-figures dd{margin-bottom:8px}}
/* The Bastani evidence (evidence.js): drawn like the experience's odds, never a stock bar chart (spec §6.4, §8).
   Rows: the name in the voice, an ink bar on a 1px ink-3 track, the value in the instrument face; the answer-bot
   solid, the guided tutor hatched (both are the machine's condition: ink, never vermilion). One ink-3 tick = no AI. */
[data-library] .ev{--name:minmax(8.5em, 11em); --val:4.5em; margin:0; max-width:48em}
[data-library] .ev-title{margin:0 0 8px; font:400 var(--fs-choice)/1.25 var(--voice); color:var(--ink)}
[data-library] .ev-panel{margin-top:20px}
[data-library] .ev-panel-t{margin:0 0 4px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
[data-library] .ev-rows{margin:0; padding:0; list-style:none; border-top:1px solid var(--rule)}
[data-library] .ev-rows li.ev-row{display:grid; grid-template-columns:var(--name) minmax(0, 1fr) var(--val); align-items:center; column-gap:16px; max-width:none; min-height:48px; margin:0; padding:6px 0; border-bottom:1px solid var(--rule)}
[data-library] .ev-name{font:400 var(--fs-body)/1.3 var(--voice); color:var(--ink)}
[data-library] .ev-track{position:relative; display:block; height:14px; background:linear-gradient(var(--ink-3), var(--ink-3)) 0 50% / 100% 1px no-repeat}
[data-library] .ev-track::after{content:""; position:absolute; left:var(--base); top:-10px; bottom:-10px; border-left:1px solid var(--ink-3)}
[data-library] .ev-bar{position:absolute; left:0; top:0; bottom:0; width:var(--w); background:var(--ink); box-sizing:border-box}
[data-library] .ev-tutor .ev-bar{border:1px solid var(--ink); background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px)}
[data-library] .ev-val{justify-self:end; font:400 var(--fs-num)/1.2 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink); white-space:nowrap}
[data-library] .ev-scale{display:grid; grid-template-columns:var(--name) minmax(0, 1fr) var(--val); column-gap:16px; max-width:none; margin:6px 0 0}
[data-library] .ev-scale-gap{grid-column:1}
[data-library] .ev-scale-at{grid-column:2; position:relative; display:block; min-height:1.4em}
[data-library] .ev-scale-label{position:absolute; left:var(--base); top:0; padding-left:6px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2); white-space:nowrap}
[data-library] .ev-note{max-width:48em; margin:16px 0 0; font:400 var(--fs-small)/1.5 var(--tool); color:var(--ink-2)}
/* Phones: the name sits above its bar, so the bar keeps its length (the scale is what the chart is about). */
@media (max-width:600px){
  [data-library] .ev-rows li.ev-row{grid-template-columns:minmax(0, 1fr) var(--val); row-gap:2px; padding:10px 0}
  [data-library] .ev-name{grid-column:1 / -1}
  [data-library] .ev-scale{grid-template-columns:minmax(0, 1fr) var(--val)}
  [data-library] .ev-scale-gap{display:none}
  [data-library] .ev-scale-at{grid-column:1}
}
html[data-contrast=true] [data-library] :is(.ev-rows, .ev-rows li.ev-row){border-color:var(--ink)}
@media (forced-colors:active){[data-library] .ev-bar{forced-color-adjust:none; background:CanvasText}[data-library] .ev-tutor .ev-bar{background:repeating-linear-gradient(90deg, CanvasText 0 2px, Canvas 2px 5px); border-color:CanvasText}}

/* Forms (/batisseur/, /defi/): label above, 52px paper-hi fields, ink-3 border (spec §7.5 forms). */
[data-library] :is(.ff-in, .attest-input){min-height:52px; padding:0 14px; border:1px solid var(--ink-3); border-radius:0; background:var(--paper-hi); color:var(--ink); font:400 17px/1.3 var(--tool)}
[data-library] .ff-ta{padding:12px 14px; min-height:120px}
[data-library] :is(.ff-in, .attest-input):focus{border-color:var(--ink)}
[data-library] .ff-opt{border-bottom:1px solid var(--rule); min-height:44px; align-items:center}
[data-library] .ff-opts{border-top:1px solid var(--rule)}
[data-library] .ff-opt input{accent-color:var(--vermilion); width:20px; height:20px}
[data-library] .ff-lab{color:var(--ink); font-size:var(--fs-ui)}
[data-library] .ff-summary{padding:20px 24px; border:1px solid var(--ink); background:var(--paper-hi); font:400 var(--fs-body)/1.5 var(--voice)}
[data-library] .ff-note{font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}

/* Code (/mecanique/): shown in the instrument face, on a paper-lo well with an ink-3 edge (no monospace, spec §2.3). */
[data-library] .codebox{border:1px solid var(--ink-3); max-width:none}
[data-library] .codebox > summary{min-height:44px; display:flex; align-items:center; padding:0 14px; background:transparent; font:400 var(--fs-small)/1.2 var(--tool); text-transform:none; letter-spacing:0}
[data-library] .codebox > summary:hover{background:var(--paper-lo); color:var(--ink)}
[data-library] .codebox[open] > summary{border-bottom:1px solid var(--ink-3)}
[data-library] .codebox pre{background:var(--paper-lo)}
[data-library] .codebox code{font:400 var(--fs-small)/1.6 var(--tool); tab-size:4}

/* ---------- 7. Former ink bands become the closing (spec §7.5: paper, no coloured band) ---------- */
[data-library] .band-ink{padding:var(--lib-sect) 0; background:var(--paper); color:var(--ink); border:0}
[data-library] .band-ink h2{max-width:14em; margin:0 0 16px; color:var(--ink); font:400 var(--fs-question)/1.08 var(--voice); letter-spacing:-.012em}
[data-library] .band-ink .kicker{color:var(--ink-2)}
[data-library] .band-ink p:not(.kicker){color:var(--ink); font:400 var(--fs-lead)/1.4 var(--voice); max-width:34em}
[data-library] .band-ink .btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent}
[data-library] .band-ink .btn-ghost:hover{background:var(--paper-lo); color:var(--ink)}
[data-library] .band-ink :focus-visible{outline-color:var(--vermilion)}


/* ---------- 8. The orientation line: one quiet line under the opener (spec §7.3), never a band above it ---------- */
[data-library] p.library-orientation{max-width:48em; margin:24px 0 0; padding:0; border:0; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
[data-library] .library-course{display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; color:var(--ink-2); font:400 var(--fs-small)/1.4 var(--tool); text-decoration:underline; text-decoration-color:var(--ink-3); text-decoration-thickness:1px; text-underline-offset:.25em}
[data-library] .library-course:hover{color:var(--ink); text-decoration-color:var(--vermilion); text-decoration-thickness:2px}
[data-library] main .attestation-scope{max-width:48em; margin:24px 0 0; padding:2px 0 2px 20px; border-left:1px solid var(--ink); font:400 var(--fs-small)/1.5 var(--tool); color:var(--ink-2)}

/* The end of every page, as on the sales pages (site.css .closing and .choose inside div.site.library-end). */
[data-library] .library-end li{max-width:none}
[data-library] .library-end p{margin-bottom:0}
[data-library] .library-end .choices>li{font-size:inherit}

/* ---------- 9. Reflow ---------- */
[data-library] main{display:block; overflow-wrap:break-word}
[data-library] .quiz-choices{list-style:none; padding-left:0}
@media (max-width:600px){
  [data-library] .po2-grid{grid-template-columns:1fr}
  [data-library] .onepager{width:auto; min-width:0}
  [data-library] .band-actions .btn{width:100%}
}

/* ---------- 10. Reading comfort and stronger contrast (spec §9.7, §9.8) ---------- */
html[data-reading=true] [data-library] main :is(p, li, dd){line-height:1.65; word-spacing:.06em; letter-spacing:.01em; max-width:30em}
html[data-reading=true] [data-library] :is(.scene, .speech) p{line-height:1.55}
html[data-reading=true] [data-library] main :is(h3, h2.as-h3){line-height:1.4}
html[data-contrast=true] body[data-library]{--ink-2:var(--ink); --ink-3:#57544c; --rule:#7d796e}
html[data-contrast=true] [data-library] :is(.kicker, .section-label, .band-ink .kicker){color:var(--ink)}
html[data-contrast=true] [data-library] :is(.quiz-choices, .quiz-choices li, .journey, .journey li, .timeline, .timeline li, .ir-row, .pred-options, .pred-option, .codebox, .fruit-card, .lab-chip, .lab-toggle){border-color:var(--ink)}
/* Nothing fades or slides in on scroll, for anyone (spec §5): older markup that still carries data-reveal shows at once. */
[data-library] [data-reveal]{opacity:1; transform:none; transition:none}
[data-library] .readbar{display:none}
@media (forced-colors:active){[data-library] :is(.btn, .lab-btn, .lab-chip, .lab-toggle){border:1px solid ButtonText}}

/* ---------- 11. Print: the page's words, on white, without the chrome ---------- */
@media print{
  body[data-library]{background:#fff; font-size:11pt}
  [data-library] .site-top, [data-library] .site-foot, .library-orientation, [data-library] .library-end, [data-library] .skip-link, [data-library] .chapter-nav{display:none!important}
  [data-library] .wrap{padding:0}
  [data-library] :is(.section, .journey-section, .band-ink){padding-top:24pt}
  [data-library] main h1{font-size:30pt}
  [data-library] main h2{font-size:20pt}
  [data-library] main :is(h3, h2.as-h3){font-size:14pt; margin-top:18pt; break-after:avoid}
  [data-library] main :is(p, li){font-size:11pt; max-width:none}
  [data-library] .po2-grid{grid-template-columns:1fr 1fr}
  [data-library] .band-actions{display:none}
}

/* ---------- 12. The 404 page (public/404.html, a sales-page body: site.css + this rule) ---------- */
.not-found main{padding-bottom:var(--sect)}
.not-found .site-top .language{color:var(--ink); font-size:15px; white-space:nowrap}
/* A value and its unit («5 %») never split across lines. */
[data-library] :is(.mch-temp-val, .m3-temp-val, .lab-slider-v, .pred-pct){white-space:nowrap}
/* …but the rows that hold them wrap, so a reader at 200 % root size never scrolls sideways (spec §9). */
[data-library] :is(.mch-temp, .m3-temp-label, .lab-slider){display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; max-width:100%; min-width:0}
[data-library] :is(.mch-temp, .lab-slider) input[type=range], [data-library] .m3-temp{width:min(9rem, 100%); flex:1 1 6rem; min-width:0}
[data-library] :is(.mch-controls, .lab-row, .lab-chips){flex-wrap:wrap; max-width:100%; min-width:0}
[data-library] .jr-lab{white-space:normal; overflow-wrap:anywhere}
/* «La machine pas à pas» (machine3d.js): the stage count in HTML above the drawing, never dashes on the canvas. */
[data-library] .m3-step{min-height:1.4em; margin:24px 0 8px; font:400 var(--fs-small)/1.4 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
[data-library] .m3-step + .m3-wrap{margin-top:0}
/* A French page opening in English waits, invisible, for its overlay (library.js), so nothing shifts after first paint.
   The fallback shows it after 1.5 s whatever happens (never !important-suppressed by calm mode, which targets descendants). */
html[data-lang-pending] body[data-library]{visibility:hidden; animation:lib-lang-reveal 0s linear 1.5s forwards!important}
@keyframes lib-lang-reveal{to{visibility:visible}}