/* OYEE — the functional pages: the lab (/laboratoire/) and the course (/cours/).
   Loaded after public/css/site.css, whose tokens, faces, grid and components it uses.
   The vocabulary is the homepage experience's exhibits (design spec §6, public/css/flow.css):
   - Georgia for everything a person or a machine says; Helvetica/Arial for instruments and numbers.
   - Ink is what is set: the machine's picks, a pressed control, what you have completed.
   - Vermilion is the visitor's mark (a strike, an underline, the chosen strand on hover or focus),
     the educator's margin tick, the focus ring. UI state is never vermilion.
   - A hairline outline (dashed when empty) is what is still open. Sage is grounded / checked.
   No monospace, no uppercase, no shadows, no radii, no plates.
   Hooks: every id, class and data-* attribute here is bound by public/js/studio.js (the lab),
   immersive.js (the anatomy view), course.js, machine.js, world.js and discovery.js (the course). */

/* ---------- 0. Local tokens ---------- */
.site{--fs-note:clamp(1.0625rem, 0.993rem + 0.286vw, 1.25rem); --open:var(--field-edge); --lh-note:1.45}
html[data-reading="true"] .site{--lh-note:1.6; --fs-note:var(--fs-lead)}

/* ---------- 1. Shared exhibit vocabulary (flow.css §6.3, same looks) ---------- */
.site :is(.x-label, .x-step, .x-caption){display:block; margin:0; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2); font-variant-numeric:tabular-nums lining-nums; letter-spacing:0; text-transform:none}
.site .x-label{margin-bottom:8px}
.site .x-step{margin-bottom:12px}
.site .x-caption{max-width:48em; text-wrap:pretty}
/* The educator's note: Georgia ink-2 with a 2px vermilion tick hanging in the margin (one visible per state). */
.site .x-note{position:relative; margin:0; padding-left:14px; max-width:34em; font:400 var(--fs-note)/var(--lh-note) var(--voice); color:var(--ink-2); text-wrap:pretty}
.site .x-note::before{content:""; position:absolute; left:0; top:.2em; width:2px; height:1.1em; background:var(--vermilion)}
@media (min-width:1024px){.site .x-note{padding-left:0} .site .x-note::before{left:auto; right:100%; margin-right:calc(var(--gap) - 2px)}}
/* A document someone wrote (paper-hi, open edge) and what the machine generated (a paper-lo well). */
.site .x-doc{padding:clamp(18px, 2.2vw, 24px); border:1px solid var(--open); background:var(--paper-hi); font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink)}
.site .x-output{padding:clamp(16px, 2vw, 22px); background:var(--paper-lo); font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink)}
.site .x-safe{background:var(--sage)}
/* Instruments. */
.site .x-controls{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0}
.site .x-btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:44px; margin:0; padding:0 18px; border:1px solid var(--ink); border-radius:0; background:var(--paper); 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; -webkit-appearance:none; appearance:none; transition:background-color var(--t-state) linear, color var(--t-state) linear}
.site .x-btn:hover, .site .x-btn.is-strong, .site .x-btn[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.site .x-btn.is-strong:hover{background:var(--ink-2); border-color:var(--ink-2)}
.site .x-btn:active{transform:translateY(1px)}
.site .x-btn:is(:disabled, [aria-disabled="true"]){cursor:default; transform:none; background:var(--paper); color:var(--ink-2); border-style:dashed; border-color:var(--open)}
.site .x-btn-quiet{display:inline-flex; align-items:center; min-height:44px; margin:0; padding:0; border:0; border-radius:0; background:none; color:var(--ink); font:400 var(--fs-ui)/1.2 var(--tool); text-decoration:underline; text-decoration-color:var(--ink-3); text-decoration-thickness:1px; text-underline-offset:.25em; cursor:pointer; -webkit-appearance:none; appearance:none}
.site .x-btn-quiet:hover{text-decoration-color:var(--vermilion); text-decoration-thickness:2px}
.site .x-btn-quiet:is(:disabled, [aria-disabled="true"]){cursor:default; color:var(--ink-2); text-decoration-color:var(--rule); text-decoration-thickness:1px}
/* A segmented choice (buttons with aria-pressed / aria-selected / aria-current): one row joined by 1px ink;
   the selected segment is an ink fill. Its focus ring sits inside, paper-hi on ink (never vermilion on ink). */
.site .x-seg{display:flex; flex-wrap:nowrap; max-width:100%; margin:0; padding:0; border:1px solid var(--ink); background:var(--paper)}
.site .x-seg>button{position:relative; flex:1 1 0; display:flex; align-items:center; justify-content:flex-start; gap:10px; min-width:0; min-height:52px; margin:0; padding:10px 16px; border:0; border-left:1px solid var(--ink); border-radius:0; background:var(--paper); color:var(--ink); box-shadow:none; font:400 var(--fs-ui)/1.25 var(--tool); letter-spacing:0; text-align:left; text-transform:none; cursor:pointer; -webkit-appearance:none; appearance:none}
.site .x-seg>button:first-child{border-left:0}
/* Hover never repaints the selected segment (its paper text needs the ink). */
.site .x-seg>button:hover:not([aria-pressed="true"], [aria-selected="true"], [aria-current="step"]){background:var(--paper-lo)}
.site .x-seg>:is([aria-pressed="true"], [aria-selected="true"], [aria-current="step"]){background:var(--ink); color:var(--paper)}
.site .x-seg>button:focus-visible{outline:2px solid var(--vermilion); outline-offset:-5px; z-index:1}
.site .x-seg>:is([aria-pressed="true"], [aria-selected="true"], [aria-current="step"]):focus-visible{outline-color:var(--paper-hi)}
.site .x-seg .seg-n{flex:none; font:400 var(--fs-small)/1 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
.site .x-seg>:is([aria-pressed="true"], [aria-selected="true"], [aria-current="step"]) .seg-n{color:var(--paper)}
/* A range: 44px to hit, a 2px track (ink up to the value, public/js/immersive.js keeps --fill), a 10 × 32 ink thumb. */
.site .x-range, .site .world-slider input[type=range]{-webkit-appearance:none; appearance:none; display:block; width:100%; height:44px; margin:0; padding:0; border:0; background:transparent; cursor:pointer}
.site :is(.x-range, .world-slider input[type=range])::-webkit-slider-runnable-track{height:2px; background:linear-gradient(to right, var(--ink) var(--fill, 0%), var(--open) var(--fill, 0%))}
.site :is(.x-range, .world-slider input[type=range])::-webkit-slider-thumb{-webkit-appearance:none; width:10px; height:32px; margin-top:-15px; border:0; border-radius:0; background:var(--ink)}
.site :is(.x-range, .world-slider input[type=range])::-moz-range-track{height:2px; background:var(--open)}
.site :is(.x-range, .world-slider input[type=range])::-moz-range-progress{height:2px; background:var(--ink)}
.site :is(.x-range, .world-slider input[type=range])::-moz-range-thumb{width:10px; height:32px; border:0; border-radius:0; background:var(--ink)}
.site :is(.x-range, .world-slider input[type=range]):focus-visible{outline:2px solid var(--vermilion); outline-offset:3px}
.site :is(.x-range, .world-slider input[type=range]){margin-top:6px}
.site .x-range-stops{display:flex; justify-content:space-between; gap:16px; margin:2px 0 0; padding:0; list-style:none; font:400 var(--fs-small)/1.3 var(--tool); color:var(--ink-2)}
.site .x-range-stops>li{margin:0}
.site .x-range-stops+.x-caption{margin-top:12px}
/* A meter (the machine's odds): a 1px track, a 6px ink fill. */
/* The track is the element's own background, so every engine draws it (Firefox and WebKit ignore the bar's). */
.site :is(meter, #course-meter){background:linear-gradient(transparent 3px, var(--open) 3px, var(--open) 4px, transparent 4px)}
.site meter{-webkit-appearance:none; appearance:none; display:block; width:100%; height:6px; margin:0; border:0; border-radius:0}
.site meter::-webkit-meter-bar{height:6px; border:0; border-radius:0; background:transparent}
.site meter::-webkit-meter-optimum-value, .site meter::-webkit-meter-suboptimum-value, .site meter::-webkit-meter-even-less-good-value{border-radius:0; background:var(--ink)}
.site meter::-moz-meter-bar{border-radius:0; background:var(--ink)}
/* Labels of instruments. */
.site :is(.lab-field, .dissection-field, .world-select, .world-slider)>label, .site :is(.range-label, .dissection-range, .fairness-range)>label, .site .lab-field>legend{display:block; margin:0 0 8px; padding:0; font:400 var(--fs-ui)/1.3 var(--tool); color:var(--ink)}
.site :is(.range-label, .dissection-range, .fairness-range){display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.site :is(.range-label, .dissection-range, .fairness-range)>label{margin:0}
.site :is(.range-label, .dissection-range, .fairness-range)>output, .site .world-slider>output{font:400 var(--fs-num)/1.2 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink)}
.site fieldset.lab-field{margin-inline:0; margin-bottom:0; padding:0; border:0; min-width:0}

/* Rows to choose from (a checkpoint's answers, the bench's hunch): the planner's options, as buttons.
   The trunk and elbows are the homepage's choose strands; the chosen answer is a 2px ink elbow and an ink
   square (UI state); the one you consider (hover, focus) turns vermilion. */
.site :is(.course-answers, .bench-options){position:relative; display:flex; flex-direction:column; margin:0; padding:0 0 0 28px}
.site :is(.course-answers, .bench-options)::before{content:""; position:absolute; left:0; top:-10px; height:10px; border-left:1px solid var(--strand)}
.site :is(.course-answers, .bench-options)>button{position:relative; display:grid; grid-template-columns:20px minmax(0, 1fr); align-items:center; column-gap:14px; width:100%; min-height:56px; margin:0; padding:12px 0; border:0; border-top:1px solid var(--edge); border-radius:0; background:none; color:var(--ink); box-shadow:none; font:400 var(--fs-body)/1.35 var(--voice); letter-spacing:0; text-align:left; text-transform:none; cursor:pointer; -webkit-appearance:none; appearance:none}
.site :is(.course-answers, .bench-options)>button:last-child{border-bottom:1px solid var(--edge)}
/* The elbow from the trunk to the row; the trunk runs on to the next row (the planner's .option, site.css). */
.site :is(.course-answers, .bench-options)>button::before{content:""; position:absolute; left:-28px; top:-1px; width:20px; height:calc(50% + 1px); border-left:1px solid var(--strand); border-bottom:1px solid var(--strand); border-bottom-left-radius:12px}
.site :is(.course-answers, .bench-options)>button:not(:last-child)::after{content:""; position:absolute; left:-28px; top:calc(50% - 12px); bottom:0; border-left:1px solid var(--strand)}
.site :is(.course-answers, .bench-options)>button:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.site :is(.course-answers, .bench-options)>button[aria-pressed="true"]::before{border-left:2px solid var(--ink); border-bottom:2px solid var(--ink)}
.site :is(.course-answers, .bench-options)>button:is(:hover, :focus-visible)::before{border-left:2px solid var(--vermilion); border-bottom:2px solid var(--vermilion)}
.site :is(.course-answers, .bench-options)>button:focus-visible{outline:2px solid var(--vermilion); outline-offset:-2px}
/* The square (site.css radios): an ink border; chosen = an ink square holding a paper square. */
.site .answer-mark{display:block; width:20px; height:20px; border:1px solid var(--ink); background:var(--paper-hi)}
.site [aria-pressed="true"]>.answer-mark{border-width:6px}

/* ---------- 2. Page structure ---------- */
.site :is(.lab-workspace, .course-shell){padding:var(--sect) var(--margin) 0}
.site .lab-workspace{padding-top:clamp(48px, 6vw, 96px)}
@media (min-width:1024px){
  .site .lab-workspace>*{margin-left:var(--hang); margin-right:var(--hang)}
  .site .qa>.anatomy-exhibit{margin-right:var(--hang)}
}
/* The opener's quiet lines (the honesty note, the course's facts). */
@media (min-width:600px){.site .opener .meta>span{white-space:nowrap}}
.site .opener .meta{margin-top:32px; max-width:min(48em, var(--span8)); font:400 var(--fs-small)/1.5 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2); text-wrap:balance}
.site .opener .fine{margin-top:12px; max-width:min(48em, var(--span8))}
.site .opener-actions+.fine{margin-top:32px}

/* ---------- 3. The lab: progress, the three experiments ---------- */
.site .lab-toolbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 24px; margin-bottom:12px}
.site #lab-progress{font:400 var(--fs-small)/1.4 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
/* Tabs: a segmented row; an experiment you have completed carries a check after its name. */
.site .lab-tabs>button{min-height:60px; padding:12px 18px}
.site .lab-tabs .tab-name{min-width:0}
.site .lab-tabs>button.completed .tab-name::after{content:"\a0✓"; content:"\a0✓" / ""}
.site .lab-tabs .tab-state{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.site .lab-tabs>button:not(.completed) .tab-state{display:none}
@media (max-width:767px){
  .site .lab-tabs{flex-direction:column}
  .site .lab-tabs>button{flex:none; min-height:52px; border-left:0; border-top:1px solid var(--ink)}
  .site .lab-tabs>button:first-child{border-top:0}
}
.site .lab-panel{padding-top:clamp(40px, 5vw, 64px)}
.site .lab-panel:focus-visible{outline:2px solid var(--vermilion); outline-offset:8px}
.site .experiment-intro h2{max-width:min(20em, 100%); font:400 var(--fs-h2)/1.15 var(--voice)}
.site .experiment-intro .lead{margin-top:16px; max-width:min(34em, 100%)}
.site .takeaway{margin-top:clamp(40px, 5vw, 64px)}
/* Two columns from 1024: the instruments, then what responds. */
.site :is(.prediction-grid, .evidence-grid, .prompt-grid){display:grid; grid-template-columns:minmax(0, 1fr); gap:40px; margin-top:40px}
@media (min-width:1024px){
  .site :is(.prediction-grid, .evidence-grid, .prompt-grid){grid-template-columns:minmax(0, 4fr) minmax(0, 6fr); column-gap:calc(var(--gap) * 3); align-items:start}
}
.site :is(.prediction-controls, .prompt-controls)>*+*{margin-top:24px}
.site .instruction-note{margin-bottom:-4px}
/* Prediction: the machine's odds as ranked bars; the sampled word in the machine's well. */
.site .chart-heading{display:flex; justify-content:space-between; gap:16px; margin:0 0 4px; padding-bottom:8px; border-bottom:1px solid var(--edge); font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site #probability-flow{display:none}
.site #probability-bars{display:grid; margin:0}
/* One bar grammar on the site, the homepage's .x-bar (public/css/flow.css): the word, a 1px track carrying the 6px ink
   fill, the number right-aligned, on one line; no rule between rows. */
.site .probability-row{display:grid; grid-template-columns:minmax(6em, 2fr) minmax(0, 3fr) 3.75rem; align-items:center; column-gap:16px; min-height:44px; padding:4px 0; isolation:isolate}
.site .probability-label{display:contents}
.site .probability-label>span:first-child{grid-column:1; grid-row:1; font:400 var(--fs-piece)/1.2 var(--voice); color:var(--ink)}
.site .probability-label>span:last-child{grid-column:3; grid-row:1; font:400 var(--fs-num)/1.2 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink); text-align:right}
.site .probability-row>svg{grid-column:2; grid-row:1; display:block; width:100%; height:6px; overflow:visible}
.site .probability-row>svg rect{fill:var(--ink); transition:width var(--t-move) var(--ease-out)}
.site .probability-row::after{content:""; grid-column:2; grid-row:1; align-self:center; height:1px; background:var(--open); z-index:-1}
/* When a list of odds is too narrow for word, bar and number on one line (a phone with text at 175–200 %), the word and
   its number share the first line and the bar runs full width beneath: nothing is clipped, nothing scrolls sideways.
   The lists are containers named odds (their rows below: the lab, the board, the machine, the bench); rem follows the
   root font size, so enlarged text stacks sooner. */
.site :is(#probability-bars, .lesson-cards, .machine-scene, .bench-bars){container:odds / inline-size}
@container odds (max-width:16rem){
  .site .probability-row{grid-template-columns:minmax(0, 1fr) auto; row-gap:6px; padding:8px 0}
  .site .probability-label>span:last-child{grid-column:2}
  .site .probability-row>svg, .site .probability-row::after{grid-column:1 / -1; grid-row:2}
}
.site .sample-result{margin-top:16px; padding:16px 20px; border:1px solid var(--ink-3); background:var(--paper-lo); font:400 var(--fs-lead)/var(--lh-lead) var(--voice); color:var(--ink)}
.site .sample-history{margin-top:24px}
.site .sample-history:has(#sample-history:empty){display:none}
.site #sample-history{display:flex; flex-wrap:wrap; gap:6px; min-height:34px}
/* The machine's draws: its picks, so ink-filled pieces. */
.site .history-token{display:inline-block; padding:.2em .55em .25em; border:1px solid var(--ink); background:var(--ink); color:var(--paper); font:400 17px/1.2 var(--voice)}
/* Evidence: the source is a document someone wrote; the claims are the summary to check. */
.site .source-paper h3{margin:0; font:400 var(--fs-choice)/var(--lh-choice) var(--voice); text-wrap:balance}
.site .source-paper>p{margin-top:12px; font:400 var(--fs-body)/var(--lh-body) var(--voice)}
.site .source-paper>p.source-note{margin-top:16px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site .source-paper{padding:clamp(18px, 2.2vw, 28px); border:1px solid var(--open); background:var(--paper-hi)}
@media (min-width:1024px){.site .source-paper{position:sticky; top:24px}}
.site .evidence-card{padding:20px 0 24px; border-top:1px solid var(--edge)}
.site .evidence-card:last-child{border-bottom:1px solid var(--edge)}
.site .evidence-claim{margin:0 0 16px; font:400 var(--fs-lead)/var(--lh-lead) var(--voice); text-wrap:balance}
.site .evidence-claims{container:claims / inline-size}
.site .evidence-choices{display:flex; border:1px solid var(--ink); background:var(--paper)}
.site .evidence-choices>button{flex:1 1 0; min-height:48px; margin:0; padding:8px 12px; border:0; border-left:1px solid var(--ink); border-radius:0; background:var(--paper); color:var(--ink); font:400 var(--fs-ui)/1.2 var(--tool); cursor:pointer; -webkit-appearance:none; appearance:none}
.site .evidence-choices>button:first-child{border-left:0}
.site .evidence-choices>button:hover{background:var(--paper-lo)}
.site .evidence-choices>button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.site .evidence-choices>button:focus-visible{outline:2px solid var(--vermilion); outline-offset:-5px; position:relative; z-index:1}
.site .evidence-choices>button[aria-pressed="true"]:focus-visible{outline-color:var(--paper-hi)}
/* Checked against the source: the right reading is grounded (sage). */
.site .evidence-card.correct .evidence-choices>button[aria-pressed="true"]{background:var(--sage); color:var(--ink)}
.site .evidence-card.correct .evidence-choices>button[aria-pressed="true"]:focus-visible{outline-color:var(--vermilion)}
.site .evidence-feedback{margin:12px 0 0; font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink-2)}
.site .evidence-feedback:empty{display:none}
.site .evidence-card.correct .evidence-feedback{color:var(--ink)}
/* rem follows the root font size (the labels are rem too), so a row that cannot hold «Contradicted» three times stacks. */
@container claims (max-width:23rem){
  .site .evidence-choices{flex-direction:column}
  .site .evidence-choices>button{flex:none; border-left:0; border-top:1px solid var(--ink); text-align:left; justify-content:flex-start}
  .site .evidence-choices>button:first-child{border-top:0}
}
/* The instruction: controls, then the request taking shape as a document. */
/* The criteria: the planner's rows with strands (public/css/site.css .option), the one checkbox grammar of the site. A
   label that wraps keeps its box, and the elbow that points at it, on its first line. */
.site .criteria>legend{margin:0 0 10px}
.site .criteria .option{align-items:start}
.site .criteria .option>input{margin-top:calc((var(--fs-body) * 1.35 - 20px) / 2)}
.site .criteria .option::before{height:calc(12px + var(--fs-body) * 1.35 / 2 + 1px)}
.site .criteria .option:not(:last-child)::after{top:calc(var(--fs-body) * 1.35 / 2)}
.site .lab-field .hint{display:block; margin-top:8px}
.site .prompt-paper>.x-label{margin-top:24px}
.site .prompt-paper>.x-label:first-child{margin-top:0}
.site .weak-prompt{margin:0; font:400 var(--fs-lead)/var(--lh-lead) var(--voice); color:var(--ink-2)}
.site #built-prompt{margin:0; min-height:6em; padding:clamp(18px, 2.2vw, 24px); border:1px solid var(--open); background:var(--paper-hi); white-space:pre-line; overflow-wrap:anywhere; font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink)}
.site .prompt-paper>.x-controls{margin-top:16px}
.site #prompt-feedback{margin-top:12px}
.site #prompt-feedback:empty{display:none}
.site #prompt-feedback+.x-caption{margin-top:12px}
/* The ingredients: set (ink) once they are in the request, a dashed outline while still open. */
.site .prompt-paper{container:paper / inline-size}
.site .prompt-blueprint{display:grid; grid-template-columns:minmax(0, 1fr); gap:4px}
.site .blueprint-block{display:grid; grid-template-columns:1.25em minmax(0, 1fr); align-items:baseline; column-gap:8px; min-width:0; padding:8px 10px; border:1px dashed var(--open); background:transparent; color:var(--ink-2); font:400 var(--fs-small)/1.25 var(--tool)}
.site .blueprint-block>span{font-variant-numeric:tabular-nums lining-nums}
.site .blueprint-block>b{min-width:0; font-weight:400}
/* One row of five where the paper holds it (each number above its name); five rows below that, never a ragged grid. */
@container paper (min-width:26rem){
  .site .prompt-blueprint{grid-template-columns:repeat(5, minmax(0, 1fr))}
  .site .blueprint-block{grid-template-columns:minmax(0, 1fr); row-gap:2px}
}
.site .blueprint-block.is-built{border:1px solid var(--ink); background:var(--ink); color:var(--paper)}
/* Done: the three experiments are complete (sage: checked, grounded). */
.site .lab-completion{margin-top:var(--sect)}
.site .lab-completion h2{max-width:min(20em, 100%); font:400 var(--fs-h2)/1.15 var(--voice); text-wrap:balance}
.site .lab-completion .lead{margin-top:16px}
.site .lab-completion .actions{margin-top:32px}
.site .lab-workspace>noscript>p{margin-top:24px}

/* ---------- 4. The exploded view (the anatomy exhibit) ---------- */
.site .qa>.anatomy-exhibit, .site .anatomy-section>.anatomy-exhibit{margin-top:40px}
.site .anatomy-exhibit{display:grid; grid-template-columns:minmax(0, 1fr); gap:32px}
@media (min-width:1024px){.site .anatomy-exhibit{grid-template-columns:minmax(0, 5fr) minmax(0, 5fr); column-gap:calc(var(--gap) * 3); align-items:start}}
.site .dissection-top{display:flex; justify-content:space-between; gap:16px; margin:0; padding-bottom:8px; border-bottom:1px solid var(--edge); font:400 var(--fs-small)/1.4 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
.site #dissection-svg{display:block; width:100%; height:auto; max-height:min(560px, 70vh); margin:8px auto 0; overflow:visible}
.site .dissection-spine{fill:none; stroke:var(--open); stroke-width:1; stroke-dasharray:3 5; vector-effect:non-scaling-stroke}
.site .dissection-layer{cursor:pointer; transition:transform var(--t-move) var(--ease-inout)}
.site .layer-shadow{display:none}
.site .layer-plate{fill:var(--paper); stroke:var(--ink-3); stroke-width:1; vector-effect:non-scaling-stroke}
.site .layer-grid{display:none}
.site .layer-symbol{fill:none; stroke:var(--ink-2); stroke-width:1.5; stroke-linecap:butt; stroke-linejoin:miter; vector-effect:non-scaling-stroke}
.site .layer-number-disc{fill:var(--paper); stroke:var(--ink-3); stroke-width:1; vector-effect:non-scaling-stroke}
.site .layer-number{fill:var(--ink); font:400 13px var(--tool); font-variant-numeric:tabular-nums lining-nums}
.site .layer-badge{transform-box:fill-box; transform-origin:center; transform:scale(max(1, calc(14 / 13 / var(--layer-scale, 1))))}
.site .dissection-layer:hover .layer-plate{stroke:var(--ink)}
/* The layer in view is set in ink (its plate, a 2px symbol). Selecting is UI state, so it is never vermilion by itself:
   only the two layers in the visitor's hands (1, the message; 4, the judgment) keep a vermilion symbol, as in the 3D view.
   The machine proposes; you decide. */
.site .is-selected .layer-plate{stroke:var(--ink)}
.site .is-selected .layer-symbol{stroke:var(--ink); stroke-width:2}
.site .is-selected:is([data-layer="0"], [data-layer="3"]) .layer-symbol{stroke:var(--vermilion)}
.site .is-selected .layer-number-disc{fill:var(--ink); stroke:var(--ink)}
.site .is-selected .layer-number{fill:var(--paper)}
/* Isolate: the other layers fade to a trace (tests/dissection.cjs reads this exact opacity). */
.site .anatomy-exhibit[data-isolated=true] .dissection-layer:not(.is-selected){opacity:.1; pointer-events:none}
.site .anatomy-exhibit[data-isolated=true] .dissection-spine{opacity:.2}
.site .anatomy-center{display:none}
.site .dissection-output{margin-top:16px}
.site #dissection-tokens{display:flex; flex-wrap:wrap; gap:6px; min-height:36px; font:400 var(--fs-body)/1.3 var(--voice)}
/* What flows through: pieces of text, open (the machine has not set anything yet). */
.site .dissection-odds{font:400 var(--fs-num)/1 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
.site .dissection-token{display:inline-block; max-width:100%; padding:.22em .55em .26em; border:1px solid var(--ink); background:var(--paper-hi); color:var(--ink); font:400 var(--fs-body)/1.2 var(--voice)}
.site .anatomy-console{max-width:44rem}
.site .anatomy-console>*+*{margin-top:24px}
/* A segmented grid: each cell draws its own 1px ink border, overlapping its neighbours by 1px. */
.site :is(.anatomy-buttons.x-seg, .world-choices, .machine-track){display:grid; gap:0; padding:1px 0 0 1px; border:0; background:none}
.site :is(.anatomy-buttons.x-seg, .world-choices, .machine-track)>button{margin:-1px 0 0 -1px; border:1px solid var(--ink)}
.site :is(.anatomy-buttons.x-seg, .world-choices, .machine-track)>button:is(:focus-visible, [aria-pressed="true"], [aria-current="step"]){z-index:1}
/* Four stages: two by two, or one column when the console (or enlarged text) leaves under 26rem. */
.site .anatomy-console{container:console / inline-size}
.site .anatomy-buttons.x-seg{grid-template-columns:repeat(2, minmax(0, 1fr))}
@container console (max-width:26rem){.site .anatomy-buttons.x-seg{grid-template-columns:minmax(0, 1fr)}}
.site .anatomy-buttons.x-seg>button{min-height:56px}
.site .anatomy-step{margin:0}
.site .anatomy-step h3{margin:0; font:400 var(--fs-choice)/var(--lh-choice) var(--voice); text-wrap:balance}
.site .anatomy-step .stage-example{margin:12px 0 0; padding:14px 18px; background:var(--paper-lo); font:400 var(--fs-lead)/var(--lh-lead) var(--voice)}
.site .anatomy-step>p:last-child{margin-top:12px; max-width:34em; font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink-2)}
/* With the script, the example is in the pieces under the drawing; without it, each stage keeps its own. */
html[data-enhanced] .site .anatomy-step .stage-example{display:none}
.site .anatomy-step+.anatomy-step{margin-top:28px}
.site .dissection-controls>*+*{margin-top:20px}
.site .dissection-transport{display:grid; grid-template-columns:minmax(0, 1fr); align-items:stretch; gap:8px}
.site .dissection-transport>.x-btn{padding:8px 14px; line-height:1.25; text-wrap:balance}
/* From 30rem the buttons are sized to their words, each on one line; the toggle takes the next line when all three do
   not fit (never three squeezed columns of two-line labels). */
@container console (min-width:30rem){
  .site .dissection-transport{display:flex; flex-wrap:wrap}
  .site .dissection-transport>.x-btn{flex:1 1 auto; white-space:nowrap}
}
.site .dissection-controls{padding-top:20px; border-top:1px solid var(--edge)}
.site .anatomy-fine{padding-top:16px; border-top:1px solid var(--edge)}

/* ---------- 5. The course: opener facts, the map, one module at a time ---------- */
.site .course-shell{display:grid; grid-template-columns:minmax(0, 1fr); gap:40px; align-items:start}
/* The frame is a container: 68.75rem is 1100px at the default text size and doubles with a 200% root font size, so
   enlarged text gets the stacked layout (the map as a row of seven) rather than a cramped sidebar. */
.site .course-frame{container:frame / inline-size}
@container frame (min-width:68.75rem){
  .site .course-shell{grid-template-columns:calc((100% - 11 * var(--gap)) / 12 * 3 + 2 * var(--gap)) minmax(0, 1fr); column-gap:var(--gap)}
  .site .course-map{position:sticky; top:24px; max-height:calc(100vh - 48px); margin:0 -8px 0 -18px; padding:0 8px 0 18px; overflow-y:auto; overscroll-behavior:contain}
  .site .course-stage{padding-left:calc(var(--gap) * 1.5)}
}
/* The map: the homepage's map list. Each module is a piece of the ring: outlined while open, ink once done,
   vermilion where you are; the row in view also gets a 2px vermilion tick. */
.site .course-map #course-progress{margin:0; font:400 var(--fs-small)/1.4 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink)}
.site #course-meter{-webkit-appearance:none; appearance:none; display:block; width:100%; height:6px; margin:10px 0 0; border:0; border-radius:0; color:var(--ink)}
.site #course-meter::-webkit-progress-bar{border-radius:0; background:transparent}
.site #course-meter::-webkit-progress-value{border-radius:0; background:var(--ink)}
.site #course-meter::-moz-progress-bar{border-radius:0; background:var(--ink)}
.site .map-list{list-style:none; margin:16px 0 0; padding:0; border-bottom:1px solid var(--edge)}
.site .map-list>li{margin:0; padding:0}
.site .course-map .map-list a{position:relative; display:grid; grid-template-columns:16px 1.4em minmax(0, 1fr) auto; align-items:center; column-gap:10px; min-height:52px; padding:10px 0; border-top:1px solid var(--edge); color:var(--ink); text-decoration:none}
.site .map-list .piece{width:16px; height:16px; max-width:none; overflow:visible}
.site .map-list .piece path{fill:none; stroke:var(--ink-3); stroke-width:1.5; vector-effect:non-scaling-stroke}
.site .course-map .map-list a.is-complete .piece path{fill:var(--ink); stroke:var(--ink)}
.site .course-map .map-list a[aria-current="step"] .piece path{fill:var(--vermilion); stroke:var(--vermilion)}
.site .map-n{font:400 var(--fs-small)/1 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
.site .map-title{font:400 clamp(1.0625rem, 1rem + .2vw, 1.1875rem)/1.3 var(--voice); color:var(--ink); text-wrap:balance}
.site .unit-checkmark{font:400 var(--fs-small)/1 var(--tool); color:var(--ink)}
.site .course-map .map-list a:hover .map-title{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.site .course-map .map-list a[aria-current="step"]::before{content:""; position:absolute; left:-14px; top:calc(50% - .55em); width:2px; height:1.1em; background:var(--vermilion)}
.site .course-map .map-list a:focus-visible{outline-offset:3px}
.site .map-foot{margin-top:12px}
.site .course-reset-menu{margin-top:4px}
.site .course-reset-menu>summary{display:inline-flex; align-items:center; min-height:44px; list-style:none; cursor:pointer; font:400 var(--fs-small)/1.3 var(--tool); color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:.25em}
.site .course-reset-menu>summary::-webkit-details-marker{display:none}
.site .course-reset-menu>summary:hover{color:var(--ink)}
.site .course-reset-menu>p{margin:4px 0 12px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
/* Below that (1100px at the default text size) the map sits above the module: the seven pieces in one row, their numbers as labels
   (public/js/course.js names each link in full). */
@container frame (width < 68.75rem){
  .site .map-list{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:0; border:1px solid var(--edge); border-bottom-color:var(--edge)}
  .site .map-list>li+li a{border-left:1px solid var(--edge)}
  .site .course-map .map-list a{grid-template-columns:minmax(0, 1fr); justify-items:center; row-gap:6px; min-height:60px; padding:10px 2px 8px; border-top:0}
  .site .map-list .map-title, .site .map-list .unit-checkmark{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  .site .course-map .map-list a[aria-current="step"]::before{left:0; right:0; top:auto; bottom:-1px; width:auto; height:2px}
  .site .course-map .map-list a.is-complete .map-n::after{content:"\a0✓"; content:"\a0✓" / ""}
}
.site .course-unit{outline:none}
.site .unit-header h2{position:relative}
.site .course-unit:focus-visible .unit-header h2::before{content:""; position:absolute; left:-14px; top:.12em; width:3px; height:1em; background:var(--vermilion)}
.site .unit-header h2{max-width:20em; font:400 var(--fs-h2)/1.15 var(--voice)}
.site .unit-objective{margin-top:16px; max-width:34em; font:400 var(--fs-lead)/var(--lh-lead) var(--voice); color:var(--ink)}
.site .unit-header .fine{margin-top:12px}
/* «Comprendre ce que vous observez»: a disclosure row like the FAQ. */
.site .unit-reading{margin-top:32px; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge)}
.site .unit-reading>summary{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; column-gap:var(--gap); min-height:60px; padding:16px 0; list-style:none; cursor:pointer; font:400 var(--fs-choice)/var(--lh-choice) var(--voice)}
.site .unit-reading>summary::-webkit-details-marker{display:none}
.site :is(.unit-reading, .discovery-notebook, .lesson-optional, .machine-alternatives, .machine-learned)>summary, .site :is(.bench-prediction, .criteria, .course-question)>legend{text-wrap:balance}
.site .unit-reading>summary::after{content:"+"; content:"+" / ""; width:1ch; font:400 var(--fs-choice)/1 var(--tool); text-align:center; color:var(--ink-2)}
.site .unit-reading[open]>summary::after{content:"−"; content:"−" / ""}
.site .unit-reading>summary:hover>span{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.site .unit-reading>p{max-width:var(--measure); font:400 var(--fs-body)/var(--lh-body) var(--voice)}
.site .unit-reading>p+p{margin-top:1em}
.site .unit-reading>p:last-child{padding-bottom:24px}
.site .unit-mission{margin-top:32px}
.site .unit-mission{position:relative; padding-left:14px; max-width:34em; font:400 var(--fs-note)/var(--lh-note) var(--voice); color:var(--ink-2)}
.site .unit-mission::before{content:""; position:absolute; left:0; top:.2em; width:2px; height:1.1em; background:var(--vermilion)}
.site .unit-activity{margin-top:clamp(32px, 4vw, 48px)}
.site .unit-activity .lab-panel{padding-top:0}
.site .unit-activity :is(.experiment-intro, .instruction-note){display:none}
.site .unit-activity :is(.prediction-grid, .evidence-grid, .prompt-grid){margin-top:0}
.site .unit-check{margin-top:clamp(48px, 6vw, 72px)}
.site .unit-check h3{font:400 var(--fs-choice)/var(--lh-choice) var(--voice)}
.site .unit-status{margin-top:16px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site .unit-status-decisions{margin-top:24px}
/* A checkpoint: the question in Georgia, the answers as rows with strands, the explanation after the pick. */
.site .course-question{margin:24px 0 0; padding:0; border:0; min-width:0; max-width:44rem}
.site .course-question>legend{display:block; float:left; width:100%; margin:0 0 20px; padding:0; font:400 var(--fs-lead)/var(--lh-lead) var(--voice); color:var(--ink); text-wrap:balance}
.site .course-question>legend+*{clear:both}
.site .question-feedback{margin:16px 0 0; max-width:34em; font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink-2)}
.site .question-feedback:empty{display:none}
/* Right: grounded (sage). The row you picked keeps its ink square either way. */
.site .course-question.answered-correctly .question-feedback{padding:12px 16px; background:var(--sage); color:var(--ink)}
.site .course-question+.course-question{margin-top:48px}
/* Module 5: privacy files. */
.site :is(.privacy-desk, .capstone-source, .capstone-questions, .fairness-controls){max-width:44rem}
.site .privacy-file+.privacy-file{margin-top:clamp(40px, 5vw, 56px)}
.site .privacy-file>h3{margin:0; padding:clamp(16px, 2vw, 22px); border:1px solid var(--open); background:var(--paper-hi); font:400 var(--fs-lead)/var(--lh-lead) var(--voice); text-wrap:pretty}
/* Module 6: the sample. A = ink dots, B = open diamonds: shape and fill tell them apart. */
.site .fairness-lab{display:grid; grid-template-columns:minmax(0, 1fr); gap:32px}
@media (min-width:880px){.site .fairness-lab{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:calc(var(--gap) * 3); align-items:start}}
.site .fairness-controls h3{margin:0 0 24px; font:400 var(--fs-choice)/var(--lh-choice) var(--voice)}
.site .fairness-controls>p{margin-top:16px; max-width:30em; font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink-2)}
.site #sample-dots{display:grid; grid-template-columns:repeat(10, 14px); gap:10px; justify-content:start}
.site #sample-dots>i{display:block; width:14px; height:14px}
.site .sample-a{border-radius:50%; background:var(--ink)}
.site .sample-b{border:1px solid var(--ink); background:var(--paper-hi); transform:rotate(45deg) scale(.8)}
.site .sample-legend{margin-top:20px; font:400 var(--fs-small)/1.9 var(--tool); color:var(--ink)}
.site :is(.key-a, .key-b){display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:-1px}
.site .key-a{border-radius:50%; background:var(--ink)}
.site .key-b{border:1px solid var(--ink); background:var(--paper-hi); transform:rotate(45deg) scale(.85)}
.site .sample-total{margin-top:16px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site .sample-total strong{display:block; margin-top:4px; font:400 var(--fs-num-lg)/1 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink)}
.site .sample-caption{margin-top:16px}
/* Module 7: the notes, then the five decisions. */
.site .capstone-source{padding:clamp(18px, 2.2vw, 28px); border:1px solid var(--open); background:var(--paper-hi)}
.site .capstone-source h3{margin:0; font:400 var(--fs-choice)/var(--lh-choice) var(--voice)}
.site .capstone-source>p{margin-top:12px; max-width:36em; font:400 var(--fs-body)/var(--lh-body) var(--voice)}
.site .capstone-questions{margin-top:clamp(32px, 4vw, 48px)}
/* Moving through: the previous module, where you are, the next one. */
.site .course-transport{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin-top:clamp(48px, 6vw, 72px); padding-top:24px; border-top:1px solid var(--edge)}
.site #course-position{font:400 var(--fs-small)/1.4 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
@media (max-width:479px){.site #course-position{order:-1; flex-basis:100%}}
/* What to keep. */
.site .course-toolkit .reflexes .step-name{font:400 var(--fs-lead)/var(--lh-lead) var(--voice)}
.site .course-toolkit .reflexes>li{padding:16px 0}
.site .course-finish{margin-top:clamp(40px, 5vw, 64px); max-width:min(40rem, var(--span8))}
.site .course-finish h3{margin:0; font:400 var(--fs-choice)/var(--lh-choice) var(--voice)}
.site .course-finish>p{margin-top:12px; font:400 var(--fs-body)/var(--lh-body) var(--voice)}
.site .finish-count{font:400 var(--fs-num)/1 var(--tool); font-variant-numeric:tabular-nums lining-nums}
.site .course-finish .actions{margin-top:12px}
.site .course-finish .x-safe{padding:0 .2em}

/* ---------- 6. The course's worked example (public/js/world.js) ---------- */
/* A hairline opens it: no label over its heading (design spec §7.4). */
.site .world-theatre{margin-top:clamp(32px, 4vw, 48px); padding-top:clamp(24px, 3vw, 32px); border-top:1px solid var(--edge); min-width:0}
.site .course-stage{container:stage / inline-size; min-width:0}
/* One set of controls per module. Module 1 is the machine's board, full width; its dock only serves the optional 3D
   view. In modules 2–7 the board is the read-only picture of the activity below (public/js/world.js redraws it from the
   activity's own controls), so the dock never shows there. */
.site .world-layout{display:block}
.site .world-dock{display:none; container:dock / inline-size}
.site .world-course[data-module="0"]:has(.lesson-optional[open]) .world-dock{display:block; max-width:44rem; margin-top:32px}
.site .world-course:not([data-module="0"]) .lesson-visual{max-width:40rem}
.site .world-flow, .site .world-object-title{display:none!important}
.site .lesson-visual{min-width:0}
.site .lesson-board{min-width:0}
.site .lesson-board>h3{margin:0 0 16px; font:400 var(--fs-choice)/var(--lh-choice) var(--voice); text-wrap:balance}
.site .lesson-cards{display:grid; grid-template-columns:minmax(0, 1fr); border-bottom:1px solid var(--edge)}
.site .lesson-card{display:grid; grid-template-columns:minmax(0, 1fr); row-gap:6px; padding:14px 0; border-top:1px solid var(--edge)}
.site .lesson-card h4{margin:0; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site .lesson-card p{margin:0; font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink); white-space:pre-line; overflow-wrap:anywhere}
.site .lesson-card:has(>meter){grid-template-columns:minmax(6em, 2fr) minmax(0, 3fr) 3.75rem; align-items:center; column-gap:16px; min-height:44px; padding:4px 0; border-top:0}
.site .lesson-card:has(>meter)>h4{grid-column:1; grid-row:1; font:400 var(--fs-piece)/1.2 var(--voice); color:var(--ink)}
.site .lesson-card:has(>meter)>meter{grid-column:2; grid-row:1}
.site .lesson-card:has(>meter)>p{grid-column:3; grid-row:1; font:400 var(--fs-num)/1.2 var(--tool); font-variant-numeric:tabular-nums lining-nums; text-align:right}
@container odds (max-width:16rem){
  .site .lesson-card:has(>meter){grid-template-columns:minmax(0, 1fr) auto; row-gap:6px; padding:8px 0}
  .site .lesson-card:has(>meter)>p{grid-column:2}
  .site .lesson-card:has(>meter)>meter{grid-column:1 / -1; grid-row:2}
}
.site .lesson-card.lesson-number>p{font:400 var(--fs-ui)/1.35 var(--tool); font-variant-numeric:tabular-nums lining-nums}
.site .lesson-card ul{margin:6px 0 0; padding:0; list-style:none; font:400 var(--fs-small)/1.8 var(--tool); color:var(--ink)}
/* The line that matters now: a 2px ink bar in the margin (set, not vermilion: it is not your mark). */
.site .lesson-card.is-current{position:relative}
.site .lesson-card.is-current::before{content:""; position:absolute; left:-14px; top:14px; bottom:14px; width:2px; background:var(--ink)}
.site .lesson-card.lesson-paper{padding:16px 18px; margin:12px 0; border:1px solid var(--open); background:var(--paper-hi)}
.site .lesson-card.lesson-paper+.lesson-card{border-top:0}
.site .lesson-takeaway{position:relative; margin:20px 0 0; padding-left:14px; max-width:34em; font:400 var(--fs-note)/var(--lh-note) var(--voice); color:var(--ink-2)}
.site .lesson-takeaway::before{content:""; position:absolute; left:0; top:.2em; width:2px; height:1.1em; background:var(--vermilion)}
.site .lesson-caption{margin-top:16px}
.site .lesson-people{display:grid; grid-template-columns:repeat(10, minmax(0, 30px)); gap:4px; margin-top:8px}
.site .lesson-people>span{display:grid; place-items:center; aspect-ratio:1; font:400 14px/1 var(--tool)}
.site .person-a{background:var(--ink); color:var(--paper)}
.site .person-b{border:1px solid var(--ink); background:var(--paper-hi); color:var(--ink)}
/* The optional 3D metaphor: a quiet disclosure. */
.site .lesson-optional{margin-top:24px; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge)}
.site .lesson-optional>summary{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:16px; min-height:52px; padding:12px 0; list-style:none; cursor:pointer; font:400 var(--fs-ui)/1.3 var(--tool); color:var(--ink)}
.site .lesson-optional>summary::-webkit-details-marker{display:none}
.site .lesson-optional>summary::after{content:"+"; content:"+" / ""; font:400 20px/1 var(--tool); color:var(--ink-2)}
.site .lesson-optional[open]>summary::after{content:"−"; content:"−" / ""}
.site .lesson-optional>summary:hover{text-decoration:underline; text-underline-offset:.25em}
.site .world-theatre[data-render=fallback] .lesson-optional{display:none}
.site .world-viewport{position:relative; min-height:clamp(320px, 52vw, 560px); margin-bottom:16px; overflow:hidden; background:var(--paper-lo)}
.site .world-canvas{position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:pan-y; cursor:grab; opacity:0}
.site .world-canvas:active{cursor:grabbing}
.site .world-theatre[data-render=ready] .world-canvas{opacity:1}
.site .world-camera{position:absolute; left:12px; bottom:12px; right:12px; display:flex; flex-wrap:wrap; gap:6px}
.site .world-camera>button{display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; margin:0; padding:0 10px; border:1px solid var(--ink); border-radius:0; background:var(--paper); color:var(--ink); font:400 18px/1 var(--tool); cursor:pointer}
.site .world-camera>button:hover, .site .world-camera>button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.site .world-camera .world-motion{font-size:var(--fs-ui); padding:0 14px}
.site .world-gesture{margin:0 0 8px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site .world-pins{position:absolute; inset:0; pointer-events:none}
.site .world-pin{position:absolute; top:0; left:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; height:44px; margin:0; padding:0 10px; border:1px solid var(--ink); border-radius:0; background:var(--paper); color:var(--ink); font:400 14px/1 var(--tool); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; pointer-events:auto; cursor:pointer}
.site .world-pin[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.site .world-pin:hover:not([aria-pressed="true"]){background:var(--paper-lo)}
.site .world-pin:is(:hover, :focus-visible){z-index:2}
.site .world-pin[aria-pressed="true"]:focus-visible{outline-color:var(--vermilion)}
/* On the scene a pin shows its number; its name joins it on hover and focus (public/js/world.js keeps 44px boxes 4px apart). */
.site .world-pin-name{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.site .world-pin:is(:hover, :focus-visible) .world-pin-name{position:static; width:auto; height:auto; overflow:visible; clip-path:none}
/* Under 600px (public/js/world.js sets data-pins="row"): the camera buttons sit under the scene, then the pins as one
   joined row with their names; module 1's stage buttons, just below, already choose its layers, so its pins stay out. */
.site .world-theatre[data-pins=row] .world-viewport{margin-bottom:8px}
.site .world-theatre[data-pins=row] .world-camera{position:static; margin:0 0 12px}
.site .world-theatre[data-pins=row] .world-pins{position:static; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap:0; margin:0 0 16px; padding:1px 0 0 1px; pointer-events:auto}
.site .world-theatre[data-pins=row] .world-pin{position:relative; justify-content:flex-start; height:auto; min-height:48px; margin:-1px 0 0 -1px; padding:8px 14px; font-size:var(--fs-ui); line-height:1.25; white-space:normal; text-align:left}
.site .world-theatre[data-pins=row] .world-pin-name{position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal}
.site .world-theatre[data-pins=row][data-module="0"] .world-pins{display:none}
.site .world-theatre:not([data-render=ready]) .world-pins{display:none}
.site .world-discovery-label{position:absolute; top:12px; right:12px; max-width:65%; padding:6px 10px; border:1px solid var(--open); background:var(--paper); font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink); pointer-events:none}
.site .world-discovery-label:empty{display:none}
.site .world-theatre[data-render=fallback] :is(.world-camera, .world-gesture){display:none}
.site .world-fallback-note{margin-top:16px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
/* The dock: the instruments of the example, then what they change. */
.site .world-dock h3{margin:0 0 20px; font:400 var(--fs-choice)/var(--lh-choice) var(--voice); text-wrap:balance}
.site .world-controls{display:flex; flex-direction:column; align-items:stretch; gap:12px}
.site .world-choices{grid-template-columns:minmax(0, 1fr)}
@container dock (min-width:32rem){.site .world-choices{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr)}}
.site .world-choices>.world-choice{min-height:48px; justify-content:center; text-align:center}
.site .world-choice{display:flex; align-items:center; justify-content:flex-start; min-height:48px; margin:0; padding:8px 14px; border:1px solid var(--ink); border-radius:0; background:var(--paper); color:var(--ink); font:400 var(--fs-ui)/1.25 var(--tool); text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none}
.site .world-choice:hover{background:var(--paper-lo)}
.site .world-choice[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.site .world-choice:focus-visible{outline:2px solid var(--vermilion); outline-offset:-5px; position:relative; z-index:1}
.site .world-choice[aria-pressed="true"]:focus-visible{outline-color:var(--paper-hi)}
.site .world-controls>.button{display:inline-flex; align-items:center; justify-content:center; min-height:48px; margin:0; padding:0 18px; border:1px solid var(--ink); border-radius:0; background:var(--ink); color:var(--paper); font:400 var(--fs-ui)/1.2 var(--tool); cursor:pointer; -webkit-appearance:none; appearance:none}
.site .world-controls>.button:hover{background:var(--ink-2); border-color:var(--ink-2)}
.site .world-slider{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; column-gap:16px}
.site .world-slider>label{margin:0}
.site .world-slider>input{grid-column:1 / -1; grid-row:2}
.site .world-slider>output{grid-column:2; grid-row:1}
.site .world-select{position:relative}
.site .world-select::after{content:""; position:absolute; right:19px; bottom:23px; width:7px; height:7px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); transform:rotate(45deg); pointer-events:none}
.site .world-select select{padding-right:48px; cursor:pointer}
.site .world-readout{margin-top:20px; padding-top:16px; border-top:1px solid var(--edge); font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink); white-space:pre-line; overflow-wrap:anywhere}
.site .world-readout:empty{display:none}
.site .world-readout:focus-visible{outline:2px solid var(--vermilion); outline-offset:3px}
.site .world-note{margin-top:16px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}

/* ---------- 7. The machine's board (module 1, public/js/machine.js) ---------- */
.site .machine-board{container:board / inline-size}
.site .machine-heading{margin:0 0 24px}
.site .machine-heading h3{margin:0; font:400 var(--fs-choice)/var(--lh-choice) var(--voice); text-wrap:balance}
.site .machine-heading>p:last-child{margin:12px 0 0; max-width:34em; font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink-2)}
.site .machine-track{grid-template-columns:repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); margin:0 0 32px}
.site .machine-stop{position:relative; display:flex; align-items:center; gap:10px; min-height:52px; padding:10px 14px; border-radius:0; background:var(--paper); color:var(--ink); font:400 var(--fs-ui)/1.25 var(--tool); text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none}
.site .machine-stop:hover{background:var(--paper-lo)}
.site .machine-stop[aria-current="step"]{background:var(--ink); color:var(--paper)}
.site .machine-stop:focus-visible{outline:2px solid var(--vermilion); outline-offset:-5px; position:relative; z-index:1}
.site .machine-stop[aria-current="step"]:focus-visible{outline-color:var(--paper-hi)}
.site .machine-stop-number{font:400 var(--fs-small)/1 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
.site .machine-stop[aria-current="step"] .machine-stop-number{color:var(--paper)}
.site .machine-stage{display:grid; grid-template-columns:minmax(0, 1fr); gap:32px}
/* The pieces need the room: the screen takes five parts of eight, so the seven pieces of step 2 hold one line from 1280. */
@container board (min-width:800px){.site .machine-stage{grid-template-columns:minmax(0, 5fr) minmax(0, 3fr); column-gap:calc(var(--gap) * 2); align-items:start}}
.site .machine-screen-bar{display:flex; justify-content:space-between; gap:16px; margin:0 0 16px; padding-bottom:8px; border-bottom:1px solid var(--edge); font:400 var(--fs-small)/1.4 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
.site .machine-screen>*+*:not(.machine-screen-bar){margin-top:16px}
.site .machine-person{display:block; margin:0 0 8px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site .machine-person+.machine-bubble{margin-top:0}
/* The request: a document the visitor wrote. */
.site .machine-bubble{margin:0; padding:clamp(18px, 2.2vw, 24px); border:1px solid var(--open); background:var(--paper-hi); font:400 var(--fs-choice)/1.3 var(--voice); color:var(--ink); text-wrap:balance}
.site .machine-receiver{display:flex; align-items:center; gap:10px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site .machine-arrow{font:400 18px/1 var(--tool); color:var(--ink)}
.site .machine-audience{display:flex; flex-wrap:wrap; border:1px solid var(--ink); width:max-content; max-width:100%}
.site .machine-pill{min-height:44px; margin:0; padding:0 18px; border:0; border-left:1px solid var(--ink); border-radius:0; background:var(--paper); color:var(--ink); font:400 var(--fs-ui)/1.2 var(--tool); cursor:pointer; -webkit-appearance:none; appearance:none}
.site .machine-pill:first-child{border-left:0}
.site .machine-pill:hover{background:var(--paper-lo)}
.site .machine-pill[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.site .machine-pill:focus-visible{outline:2px solid var(--vermilion); outline-offset:-5px}
.site .machine-pill[aria-pressed="true"]:focus-visible{outline-color:var(--paper-hi)}
.site .machine-original{margin:0; font:400 var(--fs-lead)/var(--lh-lead) var(--voice); color:var(--ink-2)}
.site .machine-cut{font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
/* The pieces: tiles with their number under them; the one you inspect is set in ink. */
.site :is(.machine-tokens, .machine-token-pair){display:flex; flex-wrap:wrap; gap:4px}
.site .machine-token-pair{flex-wrap:nowrap}
.site .machine-token{display:inline-flex; flex-direction:column-reverse; justify-content:space-between; align-items:center; gap:.3em; min-width:44px; min-height:44px; margin:0; padding:.3em .36em .35em; border:1px solid var(--ink); border-radius:0; background:var(--paper-hi); color:var(--ink); cursor:pointer; -webkit-appearance:none; appearance:none}
.site .machine-token-name{font:400 var(--fs-small)/1 var(--tool); color:var(--ink-2)}
.site .machine-token[aria-pressed="true"] .machine-token-name{color:var(--paper)}
.site .machine-token strong{font:400 var(--fs-piece)/1.1 var(--voice)}
.site .machine-token>span{font:400 var(--fs-num)/1.2 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
.site .machine-token:hover{background:var(--paper-lo)}
.site .machine-token[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.site .machine-token[aria-pressed="true"]>span{color:var(--paper)}
.site .machine-token:focus-visible{outline:2px solid var(--vermilion); outline-offset:3px}
.site .machine-token-detail{margin:0; font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink-2)}
/* The answer being built: the machine's text, in its well; each new piece fades in. */
.site .machine-output{margin:0; padding:clamp(16px, 2vw, 22px); background:var(--paper-lo); font:400 var(--fs-choice)/1.35 var(--voice); color:var(--ink)}
.site .machine-new-piece{animation:machine-piece var(--t-state) linear both}
@keyframes machine-piece{from{opacity:0}}
.site .machine-cursor{color:var(--ink-2)}
.site .machine-eyebrow{display:block; margin:0; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
/* The choice of a first word: ranked bars you can pick; your pick keeps a 2px vermilion underline. */
.site .machine-word-options{display:grid; margin:0}
.site .machine-word{display:grid; grid-template-columns:minmax(6em, 2fr) minmax(0, 3fr) 3.75rem; align-items:center; column-gap:16px; width:100%; min-height:52px; margin:0; padding:4px 0; border:0; border-radius:0; background:none; color:var(--ink); text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none}
.site .machine-word>span{grid-column:1; grid-row:1; font:400 var(--fs-piece)/1.2 var(--voice)}
.site .machine-word>meter{grid-column:2; grid-row:1}
.site .machine-word>strong{grid-column:3; grid-row:1; font:400 var(--fs-num)/1.2 var(--tool); font-variant-numeric:tabular-nums lining-nums; text-align:right}
.site .machine-word:hover{background:var(--paper-lo)}
.site .machine-word[aria-pressed="true"]>span{text-decoration:underline; text-decoration-color:var(--vermilion); text-decoration-thickness:2px; text-underline-offset:.2em}
.site .machine-word:focus-visible{outline:2px solid var(--vermilion); outline-offset:-2px}
@container odds (max-width:17rem){
  .site .machine-word{grid-template-columns:minmax(0, 1fr) auto; row-gap:6px; padding:8px 0}
  .site .machine-word>strong{grid-column:2}
  .site .machine-word>meter{grid-column:1 / -1; grid-row:2}
}
/* The next piece and the rest share one grid (the rows are subgrids): the label column holds «Autres morceaux» on one
   line and both tracks start at the same x. */
.site .machine-next-preview{display:grid; grid-template-columns:minmax(max-content, 2fr) minmax(0, 3fr) 3.75rem; column-gap:16px; padding:16px 0 0}
.site .machine-next-preview>.machine-eyebrow{grid-column:1 / -1}
.site .machine-next-row{grid-column:1 / -1; display:grid; grid-template-columns:subgrid; align-items:center; min-height:44px}
.site .machine-next-row>span{grid-column:1; grid-row:1; font:400 var(--fs-body)/1.3 var(--voice)}
.site .machine-next-row>meter{grid-column:2; grid-row:1}
.site .machine-rest>span{font:400 var(--fs-small)/1.3 var(--tool); color:var(--ink-2)}
.site .machine-rest>meter::-webkit-meter-optimum-value{background:repeating-linear-gradient(-45deg, transparent 0 3px, var(--ink-3) 3px 4px)}
.site .machine-rest>meter::-moz-meter-bar{background:repeating-linear-gradient(-45deg, transparent 0 3px, var(--ink-3) 3px 4px)}
.site .machine-next-row>strong{grid-column:3; grid-row:1; font:400 var(--fs-num)/1.2 var(--tool); font-variant-numeric:tabular-nums lining-nums; text-align:right}
@container odds (max-width:17rem){
  .site .machine-next-preview{grid-template-columns:minmax(0, 1fr) auto}
  .site .machine-next-row{row-gap:6px; padding:4px 0}
  .site .machine-next-row>strong{grid-column:2}
  .site .machine-next-row>meter{grid-column:1 / -1; grid-row:2}
}
.site .machine-small{margin:0; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site .machine-complete{margin:0; padding:10px 14px; background:var(--sage); font:400 var(--fs-body)/1.4 var(--voice); color:var(--ink)}
.site :is(.machine-alternatives, .machine-learned){border-top:1px solid var(--edge); border-bottom:1px solid var(--edge)}
.site :is(.machine-alternatives, .machine-learned)>summary{display:flex; align-items:center; min-height:48px; list-style:none; cursor:pointer; font:400 var(--fs-ui)/1.3 var(--tool); color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-3); text-underline-offset:.25em}
.site :is(.machine-alternatives, .machine-learned)>summary::-webkit-details-marker{display:none}
.site .machine-alternatives>.machine-word-options{margin-bottom:16px}
.site .machine-learned>p{margin:0 0 16px; font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink-2)}
/* The check: the false claim gets the visitor's vermilion strike; the course note is the grounded source. */
.site .machine-claim{margin:0; font:400 var(--fs-lead)/var(--lh-lead) var(--voice); color:var(--ink)}
.site del.machine-claim{display:block; text-decoration:line-through; text-decoration-color:var(--vermilion); text-decoration-thickness:2px}
.site .machine-proof{padding:14px 18px; background:var(--sage)}
.site .machine-proof strong{display:block; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink)}
.site .machine-proof p{margin:6px 0 0; font:400 var(--fs-body)/var(--lh-body) var(--voice)}
.site .machine-verdict{margin:0; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink)}
.site :is(.machine-secondary, .machine-action){display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin:0; padding:0 18px; border:1px solid var(--ink); border-radius:0; background:var(--paper); color:var(--ink); font:400 var(--fs-ui)/1.2 var(--tool); text-align:center; cursor:pointer; -webkit-appearance:none; appearance:none}
.site :is(.machine-secondary, .machine-action):hover{background:var(--ink); color:var(--paper)}
.site .machine-explain .machine-action{background:var(--ink); color:var(--paper)}
.site .machine-explain .machine-action:hover{background:var(--ink-2); border-color:var(--ink-2)}
/* One ink button per step, on the step's own task (public/js/machine.js): adding the pieces, then comparing and correcting
   the claim; moving on stays outlined until that task is done. */
.site .machine-secondary.is-strong{background:var(--ink); color:var(--paper)}
.site .machine-secondary.is-strong:hover{background:var(--ink-2); border-color:var(--ink-2)}
.site .machine-explain .machine-action.is-quiet{background:var(--paper); color:var(--ink)}
.site .machine-explain .machine-action.is-quiet:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.site .machine-explain>*+*{margin-top:12px}
.site .machine-explain h4{margin:0; font:400 var(--fs-choice)/var(--lh-choice) var(--voice); color:var(--ink); text-wrap:balance}
.site .machine-explain>p:not(.machine-eyebrow){margin-top:12px; font:400 var(--fs-body)/var(--lh-body) var(--voice); color:var(--ink-2)}
.site .machine-explain .machine-action{margin-top:20px}
.site .machine-footnote{margin:24px 0 0; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}

/* ---------- 8. The bench: a hunch, the experiment, what it shows (public/js/discovery.js) ---------- */
.site .experiment-bench{display:grid; grid-template-columns:minmax(0, 1fr); gap:24px 32px; margin-top:clamp(56px, 7vw, 96px)}
@container stage (min-width:760px){
  .site .experiment-bench{grid-template-columns:minmax(0, 2fr) minmax(0, 3fr)}
  .site .bench-work{display:contents}
  .site .bench-intro{grid-column:1; grid-row:1 / span 2}
  .site :is(.bench-prediction, .bench-controls){grid-column:2}
  .site .bench-controls{margin-top:0}
  .site .bench-result{grid-column:1 / -1; margin-top:8px}
}
.site .bench-title{margin:0; font:400 var(--fs-choice)/var(--lh-choice) var(--voice); text-wrap:balance}
.site .bench-question{margin-top:12px; font:400 var(--fs-lead)/var(--lh-lead) var(--voice)}
.site .bench-prediction{margin:0; padding:0; border:0; min-width:0}
.site .bench-prediction>legend{display:block; float:left; width:100%; margin:0 0 20px; padding:0; font:400 var(--fs-ui)/1.3 var(--tool); color:var(--ink)}
.site .bench-prediction>legend+*{clear:both}
.site .bench-controls{display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:24px}
.site .bench-run:disabled{cursor:default; background:var(--paper); color:var(--ink-2); border-style:dashed; border-color:var(--open)}
.site .bench-run:disabled::after{content:none}
/* After the experiment: which state the page shows, as a two-segment toggle (selected = ink, public/js/discovery.js). */
.site .bench-toggle{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px}
.site .bench-toggle>.x-label{margin:0}
.site .bench-toggle>.x-seg{flex:0 1 16rem; min-width:0}
.site .bench-toggle>.x-seg>button{flex:1 1 0; min-width:0; min-height:48px; padding:8px 16px; justify-content:center}
.site .bench-result{margin-top:24px; outline:none}
.site .bench-feedback{margin:0; font:400 var(--fs-lead)/var(--lh-lead) var(--voice); color:var(--ink)}
.site .bench-comparison{display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; margin-top:20px}
@container stage (min-width:600px){.site .bench-comparison{grid-template-columns:repeat(2, minmax(0, 1fr))}}
.site .bench-comparison>div{padding:16px 18px; background:var(--paper-lo)}
.site .bench-comparison p{margin:0; font:400 var(--fs-body)/var(--lh-body) var(--voice)}
/* Before and after (public/js/discovery.js): ranked bars on a 1px track, or the sample as 100 dots. */
.site .bench-chart{margin:4px 0 14px}
.site .bench-bars{display:grid}
.site .bench-bar-row{display:grid; grid-template-columns:minmax(4.5em, 2fr) minmax(0, 3fr) 3.75rem; align-items:center; column-gap:12px; min-height:36px; margin:0}
.site .bench-bar-row>span:first-child{grid-column:1; grid-row:1; font:400 var(--fs-body)/1.2 var(--voice); color:var(--ink)}
.site .bench-bar-row>span:last-of-type{grid-column:3; grid-row:1; font:400 var(--fs-num)/1.2 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink); text-align:right}
.site .bench-bar-row>i{position:relative; z-index:1; grid-column:2; grid-row:1; display:block; height:6px; background:var(--ink); transform-origin:left center; transform:scaleX(var(--p, 0))}
.site .bench-bar-row::after{content:""; grid-column:2; grid-row:1; align-self:center; height:1px; background:var(--open)}
@container odds (max-width:14rem){
  .site .bench-bar-row{grid-template-columns:minmax(0, 1fr) auto; row-gap:4px; padding:4px 0}
  .site .bench-bar-row>span:last-of-type{grid-column:2}
  .site .bench-bar-row>i, .site .bench-bar-row::after{grid-column:1 / -1; grid-row:2}
}
.site .bench-dots{display:grid; grid-template-columns:repeat(10, 8px); gap:6px}
.site .bench-dots>i{display:block; width:8px; height:8px}
.site .bench-dots>.bench-a{border-radius:50%; background:var(--ink)}
.site .bench-dots>.bench-b{border:1px solid var(--ink); background:var(--paper-hi); transform:rotate(45deg) scale(.8)}
.site .bench-explanation{position:relative; margin-top:20px; padding-left:14px; max-width:34em; font:400 var(--fs-note)/var(--lh-note) var(--voice); color:var(--ink-2)}
.site .bench-explanation::before{content:""; position:absolute; left:0; top:.2em; width:2px; height:1.1em; background:var(--vermilion)}
.site .bench-save{margin-top:20px}
.site .discovery-notebook{grid-column:1 / -1; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge)}
.site .discovery-notebook>summary{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; min-height:56px; padding:14px 0; list-style:none; cursor:pointer; font:400 var(--fs-lead)/1.3 var(--voice); color:var(--ink)}
.site .discovery-notebook>summary::-webkit-details-marker{display:none}
.site .discovery-notebook>summary::after{content:"+"; content:"+" / ""; margin-left:auto; font:400 20px/1 var(--tool); color:var(--ink-2)}
.site .discovery-notebook[open]>summary::after{content:"−"; content:"−" / ""}
.site .discovery-notebook>summary:hover>span:first-child{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em}
.site .notebook-count{font:400 var(--fs-small)/1.4 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2)}
.site .discovery-notebook>p{margin:0 0 12px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink-2)}
.site .notebook-list{margin:0; padding:0 0 0 1.4em; font:400 var(--fs-body)/var(--lh-body) var(--voice)}
.site .notebook-list>li+li{margin-top:6px}
.site .notebook-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin:16px 0 8px}
.site .notebook-status{min-height:1.4em; margin:0 0 16px; font:400 var(--fs-small)/1.4 var(--tool); color:var(--ink)}
.site .notebook-status:empty{margin-bottom:8px}

/* ---------- 9. Reading comfort, stronger contrast, calm ---------- */
/* Georgia at 40px or more tracks -0.012em (spec §2.3): --fs-h2 reaches 40px from about 1280px. */
@media (min-width:1280px){.site :is(.experiment-intro h2, .unit-header h2, .lab-completion h2){letter-spacing:-.012em}}
html[data-reading="true"] .site :is(.experiment-intro h2, .unit-header h2, .lab-completion h2){line-height:1.3}
html[data-reading="true"] .site :is(.experiment-intro h2, .unit-header h2, .lab-completion h2){letter-spacing:0}
html[data-contrast="true"] .site{--open:var(--ink)}
html[data-contrast="true"] .site .sample-result{border-color:var(--ink)}
html[data-contrast="true"] .site .dissection-spine{stroke-dasharray:none}
html[data-calm="true"] .site .machine-new-piece{animation:none}
@media (prefers-reduced-motion:reduce){.site .machine-new-piece{animation:none}}

/* ---------- 10. Forced colours ---------- */
@media (forced-colors:active){
  .site :is(.x-seg, .anatomy-buttons, .machine-track, .world-choices, .evidence-choices, .machine-audience){border:1px solid ButtonText; background:ButtonText}
  .site :is(.x-seg>button, .evidence-choices>button, .machine-stop, .world-choice, .machine-pill, .x-btn, .machine-token, .world-camera>button, .world-pin){forced-color-adjust:none; background:ButtonFace; color:ButtonText; border-color:ButtonText}
  .site :is(.x-seg>[aria-pressed="true"], .x-seg>[aria-selected="true"], .evidence-choices>[aria-pressed="true"], .machine-stop[aria-current="step"], .world-choice[aria-pressed="true"], .machine-pill[aria-pressed="true"], .x-btn[aria-pressed="true"], .machine-token[aria-pressed="true"], .world-pin[aria-pressed="true"]){background:Highlight; color:HighlightText}
  .site :is(.x-seg>[aria-pressed="true"], .x-seg>[aria-selected="true"]) .seg-n{color:HighlightText}
  .site .answer-mark{forced-color-adjust:none; border-color:CanvasText; background:Canvas}
  .site [aria-pressed="true"]>.answer-mark{border-color:Highlight}
  .site :is(.course-answers, .bench-options)>button::before, .site :is(.course-answers, .bench-options)>button::after, .site :is(.course-answers, .bench-options)::before{border-color:CanvasText}
  .site :is(.course-answers, .bench-options)>button:is([aria-pressed="true"], :hover, :focus-visible)::before{border-color:Highlight}
  .site .blueprint-block.is-built, .site .history-token, .site .person-a, .site .sample-a, .site .bench-a, .site .key-a{forced-color-adjust:none; background:CanvasText; color:Canvas; border-color:CanvasText}
  .site .map-list .piece path{stroke:CanvasText}
  .site .course-map .map-list a.is-complete .piece path{fill:CanvasText}
  .site .course-map .map-list a[aria-current="step"] .piece path{fill:Highlight; stroke:Highlight}
  .site :is(.x-note, .unit-mission, .lesson-takeaway, .bench-explanation)::before, .site .course-map .map-list a[aria-current="step"]::before{forced-color-adjust:none; background:Highlight}
  .site .layer-plate, .site .layer-number-disc{fill:Canvas; stroke:CanvasText}
  .site .layer-number{fill:CanvasText}
  .site :is(.layer-grid, .layer-symbol, .dissection-spine){stroke:CanvasText}
  .site .is-selected .layer-plate{stroke:Highlight; stroke-width:3}
  .site .is-selected .layer-number-disc{fill:Highlight}
  .site .is-selected .layer-number{fill:HighlightText}
  .site del.machine-claim{text-decoration-color:Highlight}
  .site .probability-row>svg rect{fill:CanvasText}
  .site :is(.probability-row, .bench-bar-row)::after{forced-color-adjust:none; background:CanvasText}
  .site .bench-bar-row>i{forced-color-adjust:none; background:CanvasText}
  /* A range draws with system colours: a CanvasText track, a Highlight thumb (its gradient track would vanish). */
  .site :is(.x-range, .world-slider input[type=range]){forced-color-adjust:none}
  .site :is(.x-range, .world-slider input[type=range])::-webkit-slider-runnable-track{background:CanvasText}
  .site :is(.x-range, .world-slider input[type=range])::-webkit-slider-thumb{background:Highlight}
  .site :is(.x-range, .world-slider input[type=range])::-moz-range-track{background:CanvasText}
  .site :is(.x-range, .world-slider input[type=range])::-moz-range-progress{background:Highlight}
  .site :is(.x-range, .world-slider input[type=range])::-moz-range-thumb{background:Highlight}
  /* These out-rank the authored picks (0,3,1 and 0,5,1): a verdict you picked is Highlight, right or wrong (the note under
     it says which); group A's dots are CanvasText on the bench too. */
  .site .evidence-card .evidence-choices>button[aria-pressed="true"], .site .evidence-card.correct .evidence-choices>button[aria-pressed="true"]{background:Highlight; color:HighlightText}
  .site .evidence-card.correct .evidence-choices>button[aria-pressed="true"]:focus-visible{outline-color:HighlightText}
  .site .bench-dots>.bench-a{background:CanvasText}
  .site .bench-dots>.bench-b{forced-color-adjust:none; border-color:CanvasText; background:Canvas}
  .site .lesson-card.is-current::before{forced-color-adjust:none; background:CanvasText}
}

/* ---------- 11. Without JavaScript ---------- */
/* public/js/immersive.js sets html[data-enhanced]. Without it, the explanations, sources, stages and checkpoints read
   top to bottom, and every instrument that needs the script (progress, tabs, controls, drawings it paints, the worked
   example) stays out of the way instead of looking broken. */
html:not([data-enhanced]) .site :is(.lab-toolbar, .lab-tabs, .prediction-grid, .evidence-claims, .prompt-grid, .anatomy-art, .world-theatre, .unit-status, .fairness-range, #sample-share, .fairness-controls .x-range-stops, #sample-dots),
html:not([data-enhanced]) .site .course-map :is(#course-progress, #course-meter, .course-reset-menu){display:none!important}
html:not([data-enhanced]) .site :is(.evidence-grid, .anatomy-exhibit){grid-template-columns:minmax(0, 1fr)}
.site .opener noscript>.course-noscript{margin-top:12px; max-width:min(48em, var(--span8))}

/* ---------- 12. Print: every experiment and module on paper, no instruments ---------- */
@media print{
  .site :is(.lab-toolbar, .lab-tabs, .x-controls, .dissection-controls, .anatomy-buttons, .course-map, .course-transport, .course-lab-runtime, .world-theatre, .opener-actions){display:none!important}
  .site .lab-panel[hidden], .site .course-unit[hidden]{display:block!important}
  .site .course-shell{display:block}
  .site .course-unit{break-before:page}
  .site .course-question, .site .lab-panel, .site .evidence-card{break-inside:avoid}
  .site .unit-reading>p{display:block}
  .site .source-paper{position:static}
  .site .anatomy-step[hidden]{display:block!important}
  .site .unit-check h3{break-after:avoid}
}