/* AI in Human Words: the stylesheet of /human-words/ and its versions (added 5 Oct 2026). Only those pages load it.
   It uses the site's own tokens and fonts from site.css, so light, dark and the theme button work as on every other page. System fonts
   only: no font files and no third-party requests. Every selector starts with .hw or sits inside it, so nothing here reaches the rest
   of the site. Buttons and the rows of checkboxes are 44 px high.
   Every released version of the page uses this one file. Change it only in ways that keep all of them working (add rules; do not change
   what an earlier version's markup relies on). A change that cannot be made that way needs new files and a new version. */

/* The receipt at the top: a paper strip with a torn edge, and the stamp. */
.hw-receipt {position:relative;max-width:26rem;margin:26px 0 0;padding:1.1rem 1.2rem 1.4rem;background:var(--panel);border:1px solid var(--line);color:var(--ink);font:400 .95rem/1.55 var(--mono);-webkit-mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 0/16px 100% repeat-x;mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 0/16px 100% repeat-x}
.hw-row {display:flex;justify-content:space-between;gap:1rem}
.hw-row span:last-child {text-align:right}
.hw-receipt hr {margin:.6rem 0;border:0;border-top:1px dashed var(--line)}
.hw-stamp {position:absolute;right:1rem;bottom:1.2rem;transform:rotate(-8deg);padding:.35rem .55rem;border:3px solid var(--contra);color:var(--contra);font:700 .95rem/1 var(--mono);letter-spacing:.08em}

/* The eight lessons. */
.hw-lesson {display:grid;gap:1rem;margin-top:2.25rem;padding-top:2rem;border-top:1px solid var(--line)}
.hw-lesson>* {margin:0}
.hw-lesson p {max-width:62ch}
.hw-lesson h2 {font:600 clamp(1.4rem,4.2vw,1.8rem)/1.25 var(--serif);text-wrap:balance}
.hw-n {font:600 .8rem/1 var(--mono);color:var(--muted)}
.hw mark {padding:0 .15em;background:var(--amber-soft);color:var(--ink)}
.hw-fact {padding:.15rem 0 .15rem .9rem;border-left:4px solid var(--accent);font-size:1.05rem}
.hw-fact b {font-family:var(--serif);font-size:1.2rem}

/* Lesson 3: two ways to ask. */
.hw-swap {display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem}
.hw-swap>div {display:grid;gap:.4rem;min-width:0;padding:.9rem;background:var(--panel);border:1px solid var(--line)}
.hw-swap>div>* {margin:0}
.hw-swap>.hw-bad {border-top:5px solid var(--contra)}
.hw-swap>.hw-good {border-top:5px solid var(--shown)}
.hw-swap q {font:400 1rem/1.5 var(--mono);quotes:none}

/* Lesson 2: the desk. The script sets data-hw-count (how many boxes are ticked); the meter and the sentence follow from it. */
.hw-desk {display:grid;gap:.9rem;padding:1rem;background:var(--panel);border:1px solid var(--line)}
.hw-desk>* {margin:0}
.hw-toggles {display:grid;gap:.5rem}
.hw-toggles label {display:flex;align-items:flex-start;gap:.6rem;min-height:44px;margin:0;padding:.35rem .2rem;font-weight:400;cursor:pointer}
.hw-toggles label input[type=checkbox] {flex:none;width:1.3rem;height:1.3rem;min-height:0;margin:.25rem 0 0;padding:0}
.hw-meter {position:relative;height:.9rem;overflow:hidden;background:var(--line)}
.hw-meter i {position:absolute;top:0;bottom:0;left:0;width:75%;background:var(--amber);transition:width .3s}
.hw-desk[data-hw-count="0"] .hw-meter i {width:100%}
.hw-desk[data-hw-count="1"] .hw-meter i {width:75%}
.hw-desk[data-hw-count="2"] .hw-meter i {width:50%}
.hw-desk[data-hw-count="3"] .hw-meter i {width:25%}
.hw-desk[data-hw-count="4"] .hw-meter i {width:0}
.hw-verdict {font:600 1rem/1.4 var(--mono)}
.hw-plain {margin:0;padding-left:24px}

/* Lesson 4: 140 dots, and the choice of model. */
.hw-dotsbox {display:grid;gap:1rem}
.hw-dotsbox>* {margin:0}
.hw-seg, .hw-choices {display:flex;flex-wrap:wrap;gap:.5rem}
.hw-dots {display:grid;grid-template-columns:repeat(20,1fr);gap:4px;max-width:26rem}
.hw-dots span {aspect-ratio:1;border-radius:50%;background:var(--line)}
.hw-dots span.a, .hw-dots[data-hw-model="b"] span.b {background:var(--contra)}

/* Buttons that stay pressed (the model choice, the quiz answers). */
.hw button[aria-pressed="true"] {background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.hw button[aria-pressed="true"]:hover {background:var(--accent);filter:brightness(.95)}

/* Lesson 5: the three answers, and the list of what does not count. */
.hw-three {display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.75rem}
.hw-ans {display:grid;gap:.35rem;min-width:0;padding:.9rem;background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--c)}
.hw-ans>* {margin:0}
.hw-shown {--c:var(--shown)}
.hw-contra {--c:var(--contra)}
.hw-notshown {--c:var(--notshown)}
.hw-tips {display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.hw-tips li {padding:.8rem .9rem;background:var(--panel);border:1px solid var(--line)}
.hw-tips li+li {margin-top:0}

/* Lesson 6: the quiz. */
.hw-quiz {display:grid;gap:1rem}
.hw-q {display:grid;gap:.7rem;min-width:0;padding:1rem;background:var(--panel);border:1px solid var(--line)}
.hw-q>* {margin:0}
.hw-out {margin:0;padding:.6rem .7rem;overflow-x:auto;white-space:pre;background:var(--bg);border:1px dashed var(--line);font:400 .9rem/1.5 var(--mono)}
.hw-feedback {font-size:1rem}

/* The closing note. */
.hw-colophon {display:grid;gap:.6rem;margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.hw-colophon>* {margin:0}
.hw-mail a {display:inline-flex;align-items:center;min-height:44px;font:600 1rem/1.4 var(--mono)}

/* Lesson 13 (added in version 4, 6 Oct 2026): the words. Each word is a 44 px button, and its note shows while the word is hovered or
   focused (a tap focuses it, or hovers it on phones that do not focus buttons). The note spans the line under the phrase, so it never
   runs off a narrow screen. No script: the notes are in the markup, and each button names its note with aria-describedby. */
.hw-words {display:grid;gap:.8rem;padding:1rem;background:var(--panel);border:1px solid var(--line)}
.hw-words>* {margin:0}
.hw-phrase {position:relative;font:400 clamp(1.05rem,3.6vw,1.22rem)/1.9 var(--mono)}
.hw-when {display:block;font:600 .74rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hw-word button {display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 .12rem;border:0;border-radius:4px;background:none;color:var(--accent);font:inherit;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-underline-offset:.22em;cursor:help}
.hw-word button:hover,.hw-word button:focus-visible {background:var(--amber-soft);color:var(--ink)}
.hw-word button:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
.hw-wnote {display:none;position:absolute;left:0;right:0;top:calc(100% + .3rem);z-index:2;padding:.7rem .85rem;background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--accent);color:var(--ink);font:400 .98rem/1.5 var(--sans);white-space:normal}
.hw-word:hover .hw-wnote,.hw-word:focus-within .hw-wnote {display:block}

@media (prefers-reduced-motion:reduce) {.hw-meter i {transition:none}}

/* The instrument report: the released markup keeps its place and behavior. */
.hw {min-width:0}
.hw header.page {padding-bottom:1.5rem}
.hw header.page h1 {max-width:20ch}
.hw-receipt {max-width:29rem;margin-top:2rem;padding:1.25rem;border:1px solid var(--edge);border-top:5px solid var(--ink);background:var(--panel);-webkit-mask:none;mask:none;font-size:.85rem}
.hw-row {gap:.8rem;padding:.35rem 0}
.hw-row span:first-child {font-weight:700;color:var(--muted)}
.hw-row span:last-child {overflow-wrap:anywhere}
.hw-receipt hr {margin:.5rem 0;border-top:1px solid var(--line)}
.hw-stamp {position:static;display:block;width:max-content;max-width:100%;margin:1.1rem 0 .2rem auto;padding:.5rem .7rem;transform:rotate(-4deg);border-width:2px;font-size:.8rem}
.hw-lesson {gap:1.15rem;margin-top:1.75rem;padding-block:2.25rem .5rem;border-top:2px solid var(--ink);scroll-margin-top:1.5rem}
.hw-lesson p {max-width:68ch}
.hw-lesson h2 {max-width:28ch;font:700 clamp(1.65rem,4.3vw,2.35rem)/1.14 var(--sans);letter-spacing:-.02em}
.hw-n {color:var(--accent);font-size:.75rem;letter-spacing:.035em;line-height:1.5}
.hw mark {padding:.08em .2em;background:var(--accent-soft);color:var(--ink)}
.hw-fact {max-width:none;padding:1rem 1.1rem;background:var(--accent-soft);border-left-width:4px;font-size:1rem;line-height:1.6}
.hw-status {padding:.6rem .9rem;border:1px dashed var(--notshown);border-left:4px solid var(--notshown);background:var(--panel);font-size:.95rem;line-height:1.55}
.hw-fact b {font:700 1.15em/1 var(--sans);padding:0 .22em;background:var(--panel);box-shadow:inset 0 -.2em 0 var(--accent-soft);font-variant-numeric:tabular-nums}
.hw-swap,.hw-three {gap:1rem}
.hw-swap>div,.hw-ans {padding:1.2rem;border-top-width:4px}
.hw-swap>div {border-color:var(--edge)}
.hw-ans {border-color:var(--edge);border-top-color:var(--c)}
.hw-swap q {font-size:.92rem;line-height:1.65}
.hw-swap h3,.hw-ans h3 {font-family:var(--sans);font-weight:700;letter-spacing:-.015em}
.hw-desk,.hw-words,.hw-q {padding:1.25rem;border-color:var(--edge)}
.hw-desk {gap:1.1rem}
.hw-toggles {gap:0}
.hw-toggles label {align-items:center;min-height:44px;padding:.65rem 0;border-top:1px solid var(--line);font-size:1rem}
.hw-toggles label input[type=checkbox] {margin:0;accent-color:var(--accent)}
.hw-toggles label:hover {background:var(--soft)}
.hw-meter {height:1.15rem;border:1px solid var(--edge)}
.hw-meter i {background:var(--amber)}
.hw-verdict {font-size:.9rem;line-height:1.6}
.hw-dotsbox {padding:1.25rem;background:var(--panel);border:1px solid var(--edge)}
.hw-dots {width:100%;max-width:30rem;gap:clamp(3px,.6vw,6px)}
.hw-dots span {outline:1px solid var(--muted);transition:background-color .18s ease}
.hw-seg,.hw-choices {gap:.5rem}
.hw button {border-radius:0;padding:.65rem .85rem;font-size:.9rem}
.hw button[aria-pressed="true"] {box-shadow:inset 0 -3px 0 var(--accent-ink)}
.hw button[aria-pressed="true"]:hover {filter:none}
.hw-tips {gap:0;border-top:1px solid var(--line)}
.hw-tips li {padding:1rem 0;border:0;border-bottom:1px solid var(--line);background:none}
.hw-quiz {gap:1rem}
.hw-q {gap:1rem;border-top:4px solid var(--ink)}
.hw-out {padding:1rem;border:1px solid var(--edge);border-left:3px solid var(--accent);background:var(--bg);font-size:.82rem;line-height:1.7;tab-size:2}
.hw-feedback {max-width:62ch;border-left:3px solid var(--accent);padding-left:.85rem}
.hw-words {gap:1.75rem;padding-bottom:2rem}
.hw-phrase {padding-top:.6rem;border-top:1px solid var(--line);font-size:clamp(1rem,3.3vw,1.2rem);line-height:1.9}
.hw-when {margin-bottom:.25rem;font-size:.72rem;letter-spacing:.06em}
.hw-word button {min-height:44px;padding:0 .4rem;border:1px solid var(--edge);border-radius:0;background:var(--accent-soft);box-shadow:0 2px 0 var(--edge);color:var(--ink);text-decoration:none;font:inherit}
.hw-word button:hover,.hw-word button:focus-visible {background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.hw-wnote {background:var(--panel);border-color:var(--edge);border-left-color:var(--accent);padding:1rem;font-size:.95rem;line-height:1.6;box-shadow:0 6px 0 var(--soft)}
.hw-colophon {margin-top:3rem;padding-top:1.5rem;border-top:2px solid var(--ink)}
.hw-colophon p {max-width:68ch}
.hw-mail a {min-height:44px;font-size:.9rem}
@media(max-width:480px) {
  .hw-desk,.hw-words,.hw-q,.hw-dotsbox {padding:1rem}
  .hw-swap,.hw-three {grid-template-columns:minmax(0,1fr)}
  .hw-seg button,.hw-choices button {flex:1 1 8rem}
  .hw-fact {padding:.9rem}
}
@media (prefers-reduced-motion:reduce) {.hw-dots span {transition:none}}

/* Round 2 additions. */
.hw-receipt::after {content:"";position:absolute;left:-1px;right:-1px;bottom:-8px;height:8px;background:linear-gradient(135deg,var(--panel) 25%,transparent 25%) 0 0/16px 8px,linear-gradient(225deg,var(--panel) 25%,transparent 25%) 0 0/16px 8px}
.hw-ans h3::before {content:"";display:inline-block;width:.7em;height:.7em;margin-right:.5rem;background:var(--c)}
.hw-notshown h3::before {background:none;border:2px solid var(--c)}
.hw-word button::after {content:"";display:inline-block;margin-left:.4em;border:.28em solid transparent;border-top-color:currentColor;border-bottom:0}
.hw-meter::after {content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 2px),var(--panel) calc(25% - 2px) 25%)}
.hw-meter i {transition:width .3s,background-color .3s}
.hw-desk[data-hw-count="0"] .hw-meter i,.hw-desk[data-hw-count="1"] .hw-meter i {background:var(--contra)}
.hw-desk[data-hw-count="3"] .hw-meter i,.hw-desk[data-hw-count="4"] .hw-meter i {background:var(--shown)}
.hw-dots[data-hw-model="b"] span.b {animation:hw-flip .5s ease both}
@keyframes hw-flip {from {transform:scale(.2)} 60% {transform:scale(1.25)} to {transform:scale(1)}}
.hw-q {--c:var(--ink);border-top-color:var(--c)}
.hw-feedback {border-left-color:var(--c)}
.hw-q[data-hw-right="Shown"]:has(.hw-choices button:nth-child(1)[aria-pressed="true"]),.hw-q[data-hw-right="Contradicted"]:has(.hw-choices button:nth-child(2)[aria-pressed="true"]),.hw-q[data-hw-right="Not shown"]:has(.hw-choices button:nth-child(3)[aria-pressed="true"]) {--c:var(--shown)}
.hw-q[data-hw-right="Shown"]:has(.hw-choices button:is(:nth-child(2),:nth-child(3))[aria-pressed="true"]),.hw-q[data-hw-right="Contradicted"]:has(.hw-choices button:is(:nth-child(1),:nth-child(3))[aria-pressed="true"]),.hw-q[data-hw-right="Not shown"]:has(.hw-choices button:is(:nth-child(1),:nth-child(2))[aria-pressed="true"]) {--c:var(--contra)}
.hw-wnote {opacity:1;transform:none;transition:opacity .14s,transform .14s;transition:opacity .14s,transform .14s,display .14s allow-discrete}
.hw-word:hover .hw-wnote,.hw-word:focus-within .hw-wnote {opacity:1;transform:none}
@starting-style {.hw-word:hover .hw-wnote,.hw-word:focus-within .hw-wnote {opacity:0;transform:translateY(-4px)}}
.hw-words[data-hw-hide] .hw-wnote {display:none}
@supports (animation-timeline:scroll()) {
  @media (prefers-reduced-motion:no-preference) {
    .hw::before {content:"";position:fixed;top:0;left:0;width:100%;height:4px;z-index:6;background:var(--accent);transform:scaleX(1);transform-origin:0 50%;animation:hw-progress linear both;animation-timeline:scroll(root)}
    @keyframes hw-progress {from {transform:scaleX(0)} to {transform:scaleX(1)}}
  }
}

/* Lesson 12 (version 3 and later): a band above the three facts, drawn from the section's own pseudo-element. Two lanes of three
   steps. Top lane: a false "done" reaches the end (red). Bottom lane: a gate stops it (amber ring). It carries no words and no numbers;
   the facts under it keep theirs. The still, and the state without scroll-driven animation, is the end of the journey. */
@property --hw-px {syntax:'<percentage>';inherits:false;initial-value:94%}
.hw-lesson[aria-labelledby="l12"]::before {content:"";order:3;height:7rem;background:radial-gradient(circle at var(--hw-px) 26%,var(--contra) 0 .35rem,transparent calc(.35rem + 1px)),radial-gradient(circle at min(var(--hw-px),31%) 74%,transparent 0 .2rem,var(--amber) calc(.2rem + 1px) .4rem,transparent calc(.4rem + 1px)),linear-gradient(var(--ink),var(--ink)) 34% 74%/3px 2.4rem no-repeat,radial-gradient(circle at 6% 26%,transparent 0 .45rem,var(--ink) calc(.45rem + 1px) .55rem,transparent calc(.55rem + 1px)),radial-gradient(circle at 50% 26%,transparent 0 .45rem,var(--ink) calc(.45rem + 1px) .55rem,transparent calc(.55rem + 1px)),radial-gradient(circle at 94% 26%,transparent 0 .45rem,var(--ink) calc(.45rem + 1px) .55rem,transparent calc(.55rem + 1px)),radial-gradient(circle at 6% 74%,transparent 0 .45rem,var(--ink) calc(.45rem + 1px) .55rem,transparent calc(.55rem + 1px)),radial-gradient(circle at 50% 74%,transparent 0 .45rem,var(--ink) calc(.45rem + 1px) .55rem,transparent calc(.55rem + 1px)),radial-gradient(circle at 94% 74%,transparent 0 .45rem,var(--ink) calc(.45rem + 1px) .55rem,transparent calc(.55rem + 1px)),linear-gradient(var(--edge),var(--edge)) 0 26%/100% 2px no-repeat,linear-gradient(var(--edge),var(--edge)) 0 74%/100% 2px no-repeat}
.hw-lesson[aria-labelledby="l12"]>.hw-fact,.hw-lesson[aria-labelledby="l12"]>p:last-child {order:4}
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
    .hw-lesson[aria-labelledby="l12"]::before {animation:hw-run linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
    @keyframes hw-run {from {--hw-px:6%} to {--hw-px:94%}}
  }
}

/* Lesson 13's notes (7 Oct 2026). A note used to open under its sentence, so it covered the sentence or the paragraph after it. Now
   every note opens above the sentences, in a place of its own: the hint line at the top of the box is that place, and a note shows
   over the hint only. Nothing moves and nothing else is covered. The place is as tall as the longest note at the box's width, plus a
   line to spare for wider system fonts (measured 7 Oct 2026 in steps of 20 px; the steps below are the box's inner width). The
   entrance rises from just below, toward the place it shows. */
.hw-words {position:relative;container-type:inline-size}
.hw-phrase {position:static}
.hw-words>p.small {box-sizing:border-box;max-width:none;display:flex;align-items:center;justify-content:center;min-height:6.75rem;padding:1rem;border:1px dashed var(--edge);font-size:.95rem;text-align:center}
.hw-wnote {top:1.25rem;left:1.25rem;right:1.25rem;box-sizing:border-box;min-height:6.75rem;box-shadow:none}
@starting-style {.hw-word:hover .hw-wnote,.hw-word:focus-within .hw-wnote {opacity:0;transform:translateY(4px)}}
@media(max-width:480px) {.hw-wnote {top:1rem;left:1rem;right:1rem}}
@container (width < 57.5rem) {.hw-words>p.small,.hw-wnote {min-height:8.25rem}}
@container (width < 40rem) {.hw-words>p.small,.hw-wnote {min-height:9.75rem}}
@container (width < 30rem) {.hw-words>p.small,.hw-wnote {min-height:11.25rem}}
@container (width < 26.25rem) {.hw-words>p.small,.hw-wnote {min-height:12.8rem}}
@container (width < 22.5rem) {.hw-words>p.small,.hw-wnote {min-height:14.3rem}}
@container (width < 20rem) {.hw-words>p.small,.hw-wnote {min-height:15.85rem}}
@container (width < 17.5rem) {.hw-words>p.small,.hw-wnote {min-height:17.35rem}}
@container (width < 16.25rem) {.hw-words>p.small,.hw-wnote {min-height:18.9rem}}
@container (width < 15rem) {.hw-words>p.small,.hw-wnote {min-height:20.35rem}}