/* ==========================================================================
 * 稽古 THE CURATED COURSE — the lesson surface (demo: lesson 8)
 *
 * The app's own dress, nothing minted: paper/ink/indigo/kintsugi from
 * tokens.css, Klee One for Japanese and Inter for the chrome, cards that rest
 * rather than float, ONE accent for the thing under the cursor, and gold
 * reserved for a single case — a miss that came back and was answered.
 *
 * ⛔ It does NOT borrow the walk's .kw-* rules: --sh / --kw-paper /
 * --kw-card-w are declared on #keikoWalk alone, so a .kw-card mounted
 * anywhere else renders with a default width and grey (not sumi) shadows —
 * and naming this root #keikoWalk would opt it into furigana.js's
 * leanFromPeek, which WRITES kanjiLeanLedgerV1 on every ruby peek.
 * ==========================================================================*/

#kotobaLesson {
    /* ⭐ ROUND 2 (L10 / gap-4, 2026-09-10): ONE UNIT, LESSON-SCOPED. The room
       breathed with the monitor only in its Japanese steps; the column, the
       plate, the English and the airs stayed a fixed 720px strip at 16px on a
       2560 glass. rem cannot carry the breath (it reads <html>, which the
       sheet must not touch under the app), so the lesson declares its own
       unit, and every token that carries the room's proportion is a multiple
       of it: the column, the gutter, the airs, the origins, the glass cap, the
       ten type steps. Ordinary rem paddings, gaps and seats stay in rem.
       ⭐ DESKTOP IS THE PRODUCT (owner, 2026-09-23), so the breath starts where
       the desktop starts. The old ramp reached its top at 2500 and was
       therefore FLAT across every laptop ever used on this course: 1280 and
       1440 rendered the identical 720px strip and the wider window bought
       nothing but margin. The ramp now runs from 1120 to 1600 — 16px to 1120,
       17 at 1280, 18 at 1440, 19 from 1600 up — so the same law the Japanese
       steps already live under ("a bigger screen shows bigger writing, never
       more emptiness") is true of the screens people actually open. Same floor,
       same cap: nothing above 1600 or below 1120 changes.
       ⭐ AND THE GLASS'S HEIGHT BINDS IT (the laptop census, 11 November 2026; the
       owner's yes of that night). The ramp rode the window's WIDTH alone, so a
       wide, short window (a laptop's 1536x735) was laid at 18.6px a unit and
       stood 39.5 units tall, where the smallest walked glass (1280x900) stands
       52.9: one screen in eighteen of lessons 1 to 28 ran past it. The unit is
       now also at most 2.13% of the window's height: 16px at 735, 17 at 800,
       and from 893px of height up the bound never binds, so 1280x900,
       1680x1050 and the owner's 2000x1150 are laid exactly as before. Its
       mirror: js/course-lesson.js unitAt(w, h). */
    --cl-u: clamp(16px, min(9px + 0.625vw, 2.13vh), 19px);
    /* ⭐ THE DESIGN ELEVATION, STEPS 1 AND 2 (the owner's "let's implement", 1 November 2026; docs/course_v2/reviews/
       design_elevation_2026-10-31/SYNTHESIS.md §4, the palette of record): ONE PAPER AND THREE INKS. The room paper is
       白練 (shironeri, "glossed white silk") #FCFAF2, L* 98.2 (was #F3F0EA, 94.9: the darkest warm paper among the calm
       benchmarks measured); a slip is 胡粉 (gofun, "shell white") #FFFFFB, lighter than the page, told by its shadow and
       never by a ring. Every kanji and kana prints in 墨 sumi #2A231F (14.8:1; the brush brown #523E1E and the cold
       #2C2C2C leave the course: the owner's call 7), every English line in the ink #38322D (12.1:1), and glosses,
       readings and captions in ONE quiet ink #69625A (5.75:1 on the paper). The app's own tokens (css/tokens.css) keep
       their values for the hall: the room re-points the Japanese ink below (--color-jp-text), as a room re-points
       --room-ground, so every rule that reads it inside the lesson takes the sumi. */
    --cl-paper: #FCFAF2;
    --cl-sheet: #FFFFFB;
    --color-jp-text: #2A231F;
    /* ⭐ ROUND 2 (CT-4): THE ENGLISH IS WARM INK. The app's neutral #2C2C2C was
       the one cold colour on a warm page (JP brown beside it, stone chrome,
       cream paper); the kanji drawer already reads the slip's warm sumi, and
       the lesson joins it. Since the elevation (1 November 2026) the ink is the sumi's own English step, #38322D:
       12.1:1 on the paper, one step lighter than the Japanese so the kanji lead. The triple
       beside it is for a dimmed word (a paler ink, never a browner one). */
    --cl-ink: #38322D;
    --cl-ink-rgb: 56, 50, 45;
    /* the ink of a day already lived: last week's kana under today's kanji, and
       lesson 7's leaf in the warm-up. ONE past ink, spent twice, declared once.
       ⛔ It is the app's warm-stone secondary, NOT a lighter grey: the warm-up
       asks the reader to press what they can no longer read, so this is a
       legibility floor and never an amount of fade. (The elevation: the stone of the sumi's family, #514A44, 8.3:1.) */
    --cl-ink-past: #514A44;
    /* ⭐ THE SLIP'S TWO SHADOWS (the elevation's step 1): a control at rest is paper on paper, a slip a shade lighter
       than the page told by a contact line and a soft fall (an option, a tile); a surface laid on the page (the verse
       slip, the ⋮ card, the kanji home's sheet) rests on the house's slip recipe (css/tokens.css --slip-rest) in sumi.
       Neither draws a ring. */
    --cl-slip: 0 0 1px rgba(var(--cl-sh), 0.15), 0 1px 2px rgba(var(--cl-sh), 0.06), 0 2px 6px -3px rgba(var(--cl-sh), 0.10);
    --cl-slip-rest: 0 1px 2px rgba(var(--cl-sh), 0.05), -3px 8px 22px -10px rgba(var(--cl-sh), 0.16);
    /* ⭐ S5: THE PAGE HAS TWO AIRS. Inside a tier blocks step by --cl-air-in;
       between tiers the paper opens by --cl-air-between (and --cl-air-close
       before the teacher's closing sentence). The character page had six gaps
       within 0.6rem of each other, so nothing on it was grouped; no block on
       the page may invent a third value. */
    --cl-air-in: calc(1.2 * var(--cl-u));
    --cl-air-close: calc(2.4 * var(--cl-u));
    --cl-air-between: calc(2.8 * var(--cl-u));
    /* the ONE quiet ink (glosses, readings, captions): opaque, 5.75:1 on the paper, 5.99:1 on the slip; a step back is a
       lighter ink, never a fade (the elevation's step 2; was the app's #6E6860, 4.84:1 on the old paper) */
    --cl-quiet: #69625A;
    /* ⭐ ROUND 2 (CR-7): ONE FOCUS RING, SOLID INDIGO. Thirty rings at .4-.55
       alpha composited to 1.9-2.5:1 on the paper — invisible to the hand that
       needs them. The ring gains ink, not a hue: the app's own solid ring. */
    --cl-ring: 2px solid var(--cl-accent);
    --cl-ring-off: 3px;
    --cl-rule: #E6E1D7;                      /* the hairline, a step lighter with the paper (was #D8D2C8 on #F3F0EA) */
    --cl-accent: var(--color-accent, #3D5A80);
    --cl-gold: var(--color-gold, #C9A96E);
    /* ⭐ THE TWO ANSWERS, AND THEY ARE THE APP'S OWN COLOURS. Moss is what the
       rail already dots a settled word with — the house mark for "known" — and
       gold is the kintsugi the design system reserves for a repair. A row is
       right in moss or mended in gold; there is no red in this book. Declared
       as triples so a wash and an ink can come from one colour. */
    --cl-moss: 122, 132, 96;
    --cl-mend: 176, 138, 82;
    /* ⭐ S1: THE VERDICT IS INK ALONE NOW (no wash under a seat), so the ink
       has to carry it on its own — and ⭐ ROUND 2 (CT-3) deepened both: the
       old moss (98,108,72) sat at dE 22 from the JP brown and the old mend
       (138,102,50) shared the brown's hue exactly, so the one colour that
       changes with the learner's answer read as the headword's own ink.
       Moss #4A6B3A: 5.3:1 on paper, 5.7:1 on the sheet, dE 30 from the
       brown, still a house moss and never a signal green. Mend #8F6512:
       4.6:1 / 4.9:1, dE 32, below the seal's chroma (the one loud mark).
       The wash triples above stay for FILLS only. */
    --cl-moss-ink: 74, 107, 58;
    /* (the mend's own ink, --cl-mend-ink 143, 101, 18, retired 28 October 2026: U-064 gave every wrong mark the seal's
       terracotta, and nothing read it) */
    /* ⭐ THE OWNER'S ITEM 4a (18 October 2026): A WORD TAUGHT BY THIS POINT WEARS THE HOUSE'S "KNOWN". In an example
       sentence a word the learner has been taught (js sentTokKind) is tinted in the moss the rail dots a settled word
       with, softened toward the sumi so a line of words still reads as one line: 6.2:1 on the paper, apart from the
       day's word (.cl-sent-hit), the two ways' inks and the seal. A word not taught yet and a small word stay sumi. */
    --cl-known: color-mix(in srgb, rgb(var(--cl-moss-ink)) 78%, var(--cl-ink));
    /* ⭐ THE OWNER'S ITEM 5 (18 October 2026): THE WORD THIS LESSON TEACHES TODAY IS DARK ORANGE, and nothing else is
       (CT-2's law, below). A burnt orange: 5.5:1 on the paper, 5.9:1 on the sheet; darker and browner than the borrowed
       way's terracotta (--color-kanji-on #9E5E43) and the seal's vermilion (--cl-hanko). The headwords and the titles
       keep the Japanese ink (--color-jp-text: the sumi since the elevation); the two ways keep their inks. (On the
       elevation's paper the orange measures 5.86:1, and 6.06:1 on the slip.) */
    --cl-hit: #9A4A16;
    /* the hanko's own vermilion, and it is the SEAL'S — declared on the room
       because the seal is pressed at the close and kept by the book, and a
       colour scoped to one of those two surfaces leaves the other's rim and
       glyph falling back to black ink the moment the seal is hung elsewhere */
    --cl-hanko: 181, 73, 58;
    --cl-sh: 42, 35, 31;                     /* every shadow cast in sumi (the elevation: the brush brown 67, 50, 30 left with the brown ink) */
    /* ⭐ S10: ONE DOT for "not yet". The rail's unmet word and the street's
       place not yet found are the same device, so both read from one token
       and can never drift apart. */
    --cl-dot: 4px;
    --cl-dot-ink: rgba(105, 98, 90, 0.3);
    --cl-col-max: calc(45 * var(--cl-u));          /* 720 at ≤1120, 765 at 1280, 810 at 1440, 855 from 1600 */
    --cl-col: min(var(--cl-col-max), 100% - 3rem);
    /* the air between the column's right edge and anything standing beside
       it (the words rail). ONE gutter, read where the rail is placed. */
    --cl-gutter: calc(4 * var(--cl-u));
    /* ⭐ S1: THE PLATE. Every painting inside a card hangs as ONE plate — the
       column's width, the door's hairline, whole at 3:2, never a cover crop.
       ⛔ NOT the door's 1100px: the rail's seat is one gutter off the column,
       and a plate that runs 48px past the column's edge to meet it is a
       misalignment, not a plate. ⛔ And never a HEIGHT-BUDGETED width either:
       a plate 48px SHORT of the column reads the same way (measured at
       1680×1050: a 46vh budget hung 672px in a 720px column). The plate is
       the column; a short glass steps it down to the old 34em vignette in
       ONE step, by breakpoint (below), so it is always one of two widths
       and never a near-miss of either. ⛔ 100% of the STATION, never
       var(--cl-col): that token's "100% - 3rem" is written against the
       room, and read inside the column it comes out 48px short (672 in
       720 — measured). */
    --cl-plate-w: 100%;

    /* ── the type scale ──────────────────────────────────────────────────
       Ten steps and nothing between them. Japanese runs on k1–k6 (Klee),
       the chrome's English on e1–e4 (Inter), and every font-size in this
       sheet is one of the ten — a new size is a new step, argued for, not
       a number typed at a rule. The sheet held forty-seven of them.
       ⛔ K6 IS THE FLOOR FOR JAPANESE. Only furigana riding under a k2-or-
       larger glyph goes below it, and never under 0.75rem: Japanese set
       smaller than the English beside it is a page that does not mean what
       it says about which language is being read. */
    /* ⭐ THE JAPANESE STEPS BREATHE WITH THE GLASS (density wave
       2026-08-29): a bigger screen shows bigger writing, never more
       emptiness. Same ten steps, same law — each JP step now carries a
       vh slope so the scale is set to the room it is read in. ⛔ The
       English steps do not grow: the glass's gift goes to the Japanese. */
    /* ⭐ ROUND 2 (L10): the steps ride the lesson UNIT now — one mechanism,
       never two compounding (a vh slope on top of a width unit reached 90px
       at 2560). The vh slopes of the 2026-08-29 wave are flattened to their
       midpoints; the hero glyph alone keeps a height budget so the character
       page's one glyph grows with a tall glass. */
    /* ⭐ AND THE HERO GROWS (2026-09-24, design review L2, stage 2, ruling 1):
       at 16vh the glyph's ink was 120px in the top-left third of a 1280x900
       glass, the smallest the strokes are anywhere in the meeting but the rail,
       on the one page that exists to make the reader look at them. 21vh is
       189px at 900. "One column" forbids a second column, not a bigger thing. */
    --k1: clamp(9rem, 21vh, 15rem);                  /* the character page's hero glyph, and nowhere else */
    --k2: calc(4.4 * var(--cl-u));                   /* a word's head; the kanji home's glyph */
    --k3: calc(2.9 * var(--cl-u));                   /* the glyph rows: parts, lookalikes, second sounds, tomorrow */
    --k4: calc(2.05 * var(--cl-u));                  /* what is ASKED or ANSWERED: ask lines, tiles, the settle */
    --k5: calc(1.6 * var(--cl-u));                   /* what is READ: passage lines, quoted sentences */
    --k6: calc(1.125 * var(--cl-u));                 /* readings, rail rows — the floor */
    --e1: calc(1.5 * var(--cl-u));                   /* the one English line that leads a page */
    --e2: calc(1 * var(--cl-u));                     /* the chrome talking: asks, labels, translations */
    --e3: calc(0.8125 * var(--cl-u));                /* glosses, translations, notes, feet */
    --e4: calc(0.6875 * var(--cl-u));                /* the micro-labels — and ONE tracking for all of them */
    /* ⭐ ROUND 2 (CT-1): THE TEACHER'S PROSE HAS A FACE OF ITS OWN. Every
       English line was Inter, so the machine's ask, the pressed option and
       the teacher's reply read as one paragraph. The AUTHORED prose — the
       lines that come from a lesson-JSON *_en field the teacher wrote — is
       set in Literata (the fallbacks are real book faces, never a sans);
       every chrome string, machine verdict, data seat, hand, rail, spine and
       translation stays Inter. The boundary is an explicit class list (below,
       "the teacher's cut"), never mixed(). Never italic. */
    --cl-font-tell: 'Literata', 'Literata Fallback', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Noto Serif JP', serif;
    --e2-tell: calc(1.0625 * var(--cl-u));
    --e4-track: 0.12em;
    /* S1: and ONE case. Tracked lowercase read as a spec sheet; the rest of
       the app tracks its micro-labels in uppercase (.wp-verb .cap). */
    --e4-case: uppercase;

    /* ── the motion clocks (motion doctrine, 2026-08-30) ─────────────────
       ⭐ TWO CURVES, AND THEY ARE NOT INTERCHANGEABLE. --ease-brush and
       --ease-settle are both expo-out: they put ~47% of the distance into
       the first two frames. That is right for INK, which should appear
       decisively and then settle — and it is exactly what "jaggered" means
       when it is asked to carry 90-190px of GEOMETRY. Geometry gets its own
       symmetric curve; ink keeps the house's. ⛔ Never --ease-brush on
       height / max-height / width / margin / padding / transform. */
    --cl-ease-move: cubic-bezier(0.4, 0, 0.2, 1);
    /* ⛔ THE CLOCKS ARE --cl-t-*, NEVER A COLOUR'S NAME. This block once
       declared the 320ms clock under the colour's own name (--cl-ink, :20),
       and the later declaration won: forty colour rules fell through to the
       UA's black and every English paragraph printed pure rgb(0,0,0). A
       custom property is declared ONCE in #kotobaLesson (pinned by
       tests/course/css_tokens_test.js). */
    --cl-t-ink: 320ms;       /* ink arriving on a seat that was already there */
    --cl-t-ink-quick: 160ms; /* a control answering a press */
    --cl-t-ink-long: 520ms;  /* a painting, a glyph, a whole told body */
    --cl-fold: 260ms;        /* the ONE geometry clock, tail of the sheet only */
    --cl-turn: 260ms;        /* the page arriving */
    --cl-turn-out: 90ms;     /* S9: inside a meeting, the sheet leaving before the wipe */
    --cl-ink-step: 120ms;    /* S9: one ink after another — a record's lines, a told body's tiers */
    /* ⭐ card layout 2026-09-28 (PLAN.md Addendum, no blink on Tell me): a
       question DISSOLVES evenly before its answer inks in, and the answer (the
       told tiers, and Next in the corner seat) begins only once it is gone.
       The runner keeps the two numbers in step (js TELL_DISSOLVE_MS / _FADE_MS). */
    --cl-t-dissolve: 200ms;  /* the look's question and Tell me, fading out in their seats */
    --cl-t-fade: 240ms;      /* the first told tier's start: the question is gone by then */
    /* ⭐ elevate C (REPORT §5.5's table, 10 October 2026): the frame's clocks and the glyph's for seat S */
    --cl-dot-move: 260ms;    /* the runner's dot clock (MOTION.dot); since the quiet row of 24 October 2026 no dot or ink is drawn */
    --cl-held-live: 160ms;   /* a held seat taking its ink, 60 → 100 per cent */
    --cl-glyph-cap: 2400ms;  /* the glyph writing itself, whole, at most (the aside alone; never holds a page) */
    --cl-stroke: 180ms;      /* one stroke of it */
    --cl-stroke-gap: 60ms;   /* between two strokes */
    /* ⭐ elevate C (REPORT §5.6, the type rule): every Japanese string in the chrome, never the brush face */
    --cl-font-chrome-jp: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;

    /* ── two vertical origins ────────────────────────────────────────────
       A page begins where a page begins. A screen that asks ONE thing
       begins about a quarter of the way down, which is where the eye
       lands first — and the seat DEEPENS with the glass (owner #77: on a
       tall screen the one block on the page hugged the top edge while
       three quarters of the room stood empty). Two numbers, so no
       station can invent a third. */
    --cl-origin-page: calc(2 * var(--cl-u));
    /* ⭐ ROUND 2 (2026-09-09): THE GLASS. The sheet of glass a station is laid on is the
       glass minus the corner chrome and the stage's bottom air — capped at
       52rem, so the floor stops rising with the monitor (at 2560×1440 the
       hands sat 1350px down, a screen-height under the last line). Every
       floor in this file reads it; nothing measures the glass twice. */
    --cl-glass: min(calc(100vh - var(--cl-chrome-h, 4.6rem) - 2.6rem), calc(52 * var(--cl-u)));
    /* ⛔ the ask origin is a quarter of the GLASS SHEET, not of the raw viewport: at 24vh
       flat a set item's rack ran 40-50px past a 900px laptop glass with no
       scrollbar to say so, and at 1440p the block floated at 353 under a 1350
       floor. 38rem = the tallest set item with its seat, measured. */
    --cl-origin-ask: clamp(1.5rem, min(24vh, calc(var(--cl-glass) - 38rem)), 15rem);
    /* ⭐ one foot (2026-09-29, the owner's walk of lesson 5, item 8): THE
       FOOT'S TWO SEATS, one width for both hands, wide enough for the widest
       face the right seat wears between the door and the close (教えて Tell
       me), measured 145 / 151 / 158 / 164px at u 16 / 17 / 18 / 19, so the
       seat is 147 / 153 / 160 / 166px (the corner seat PLAN.md §2 measured:
       150px, x 865 to 1015 at 1280). The close's press wears a face that fits
       it (おわる Finish, fix round 1), so no seat runs wider. The hand's
       height, measured 47 / 49 / 50 / 52px, is the paper the character page
       keeps under its lead (--cl-foot-h, a hair over it).
       ⛔ The tether (round 2, --cl-tether: 11.6rem) is retired with it: the
       foot is fixed on the glass floor, so no told page hangs its hand.
       ⛔⛔ ITS OWN NAME (batch A fix round 1, item 1): it was declared as
       --cl-seat-w, the name every build row reads as ONE MORA's width
       (.cl-seat, .cl-bk, .cl-yours-m, stamped by seatWidth). A row seatWidth
       does not stamp inherited 153px a mark: the order item's wrong row ran
       1112px wide at 1280, off the right edge, and a wrong 来る stood at x 330
       and 490 under two 48px seats. The foot reads --cl-foot-seat-w alone. */
    --cl-foot-seat-w: calc(6.2 * var(--cl-u) + 3rem);
    --cl-foot-h: calc(1.6 * var(--cl-u) + 1.4rem);
    /* ⭐ card layout 2026-09-28 (PLAN.md §2 and §4; the owner's answer to §7
       question 4): ONE LINE OF CHROME ON EVERY SCREEN, 3.75rem (60px): the
       lesson mark, the spine, then 音 and ✕ at the right. The corner's box is
       this tall on every station (.cl-topmark), so the rail can read it as a
       constant; --cl-chrome-h stays the MEASURED height the glass reads. */
    --cl-chrome-line: 3.75rem;
    /* ⭐ card layout 2026-09-28 (PLAN.md §5 item 7): THE PICTURE'S SEAT STEPS
       DOWN ON A SHORT GLASS. Thirteen units, or 24% of the window's height
       where that is smaller: 216px against 221 at 1280x900, 192 at 1280x800,
       and the same 247 at 1680x1050. The unit itself is untouched, so no
       other station moves. */
    --cl-kpic: min(calc(13 * var(--cl-u)), 24vh);
    /* ⭐ MEDIA_CONTRACT §6 (D24, 2026-09-28): SECTION 2'S NEW SEATS, in the
       unit and capped by the window's height the way the picture seat is: the
       phone plate beside the check (240x360 at 1280x900) and the miss strip's
       card picture (120). (The +1 item's 340 seat, --cl-plus1-pic, is retired:
       its picture takes the corner seat, --cl-kpic; batch A fix round 2, item
       5.) The plate above the check keeps the contract's name, --cl-plate-w,
       declared on its own block (.cl-read--plate): the name here is the
       course's column plate. */
    --cl-phone-w: min(calc(14.1 * var(--cl-u)), 26.7vh);
    --cl-miss-pic: calc(7.06 * var(--cl-u));

    position: fixed;
    inset: 0;
    z-index: 9400;                            /* under the hall (9500), over the rooms */
    overflow-y: auto;
    overflow-x: hidden;
    /* ⛔ AND THE SPINE SURVIVES A LONG PAGE. The passage is the one station
       taller than the glass, so it was the one station that grew a scrollbar
       — and the centred column then slid half a scrollbar left of every other
       screen in the lesson. The gutter is reserved on all of them, so the
       margin the eye has been reading down all evening does not move under a
       page just because that page is long. (Overlay scrollbars reserve
       nothing, so on a Mac this changes not one pixel of anything.) */
    scrollbar-gutter: stable;
    /* ⭐ THE ROOM ENDS ON THE FOOT'S OWN HEIGHT OF PAPER (batch D1, sitting 2).
       The foot is fixed on the glass floor, and each station used to keep the
       paper that lets its last block scroll clear of it by a number of its own
       (5.4rem, 4.4rem, 3.3rem, the hand's height), and a station that forgot
       would end under the hands (every station dealt today remembered: the
       closes, the reads and the cards all clear it at the scroll end). The
       scroll box now keeps --cl-foot-h at its end for every station of every
       lesson; the stage's 2.6rem under it is the foot's own floor, so the last
       block always ends at or above the foot's top. Each station's reserve and
       the glass floor's min-height give the same height back (below), so a
       page that fits still fits to the pixel and a long page scrolls exactly
       as far as it did. */
    padding-bottom: var(--cl-foot-h);
    background: var(--cl-paper);
    color: var(--cl-ink);
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;
}
body.course-lesson-open { overflow: hidden; }
/* ⭐ THE SYNC RIBBON KEEPS CLEAR OF THE LESSON'S CHROME (9 November 2026; the owner's screenshot of lesson 29's story: "Sync
   stuck — click to retry" over 閉じる Close). The app's ribbon (js/sync.js ensureRibbon: fixed, top 8px, right 8px, z-index
   9999, over the room's 9400) shows to a signed-in learner whose sync has failed for a minute (offline, the sync API down)
   or is retrying with marks unsaved, the public site's lessons too, and it stood over the head's right end, 閉じる Close and
   the ⋮ menu. While a lesson is open it stands at the window's foot instead, on one line, under the foot's floor (the foot
   stands 2.6rem over the window's floor at the least, the ribbon's top 36 px over it), where no control of the room
   stands. Its words and its press are the app's, unchanged. */
.course-lesson-open .kotoba-sync-ribbon { top: auto; bottom: 6px; white-space: nowrap; max-width: none; }
/* ⭐ A READING IS A READABLE LINE, NEVER A FADE (the design elevation's step 1, 1 November 2026). css/base.css sets every
   ruby rt at opacity 0.55, the app's flashcard hierarchy; in the lesson it printed the quiet ink at 2.15:1 on the paper
   and the past ink at 2.47:1 (the census of 31 October 2026: 26 sentence readings under AA, and the day's word's own
   reading at 2.36:1). Every reading in the room stands opaque in the ink its own rule names: the quiet ink (5.75:1), the
   past ink (8.3:1), the day's orange (5.86:1). */
#kotobaLesson rt { opacity: 1; }

/* ⛔ components.css:378 gives EVERY <button> `background: white` and a raised
   shadow, and button:hover a bigger one (0-1-1 beats a plain class). A flat
   mark like 一週間前 or the quiet Stop here therefore wore a white pill nobody
   asked for. Answer it once, here, for the flat hands only — the tiles, the
   next buttons and the listen disc cast their own sumi shadow.
   ⛔ AND THE SPINE'S ONE DOOR (2026-09-23, design review L2, item 12): a passed
   言葉 is a <button> (nav-C1), so it wore the raised white pill on every
   screen after the cards, the one raised thing on sixty pages of flat ink. */
#kotobaLesson .cl-sp-door,
#kotobaLesson .cl-sp-door:hover,
#kotobaLesson .cl-quiet,
#kotobaLesson .cl-leave,
#kotobaLesson .cl-weekago,
#kotobaLesson .cl-rcw,
#kotobaLesson .cl-signoff-jp,
#kotobaLesson .cl-kh-back,
#kotobaLesson .cl-kh-more,
#kotobaLesson .cl-sound,
#kotobaLesson .cl-draw,
#kotobaLesson .cl-wk-word,
#kotobaLesson .cl-night-jp,
#kotobaLesson .cl-scene-w,
#kotobaLesson .cl-draw:hover,
#kotobaLesson .cl-sound:hover,
#kotobaLesson .cl-quiet:hover,
#kotobaLesson .cl-leave:hover,
#kotobaLesson .cl-weekago:hover,
#kotobaLesson .cl-rcw:hover,
#kotobaLesson .cl-signoff-jp:hover,
#kotobaLesson .cl-wk-word:hover,
#kotobaLesson .cl-night-jp:hover,
#kotobaLesson .cl-scene-w:hover,
#kotobaLesson .cl-kh-back:hover,
#kotobaLesson .cl-kh-more:hover { box-shadow: none; background: none; }

#kotobaLesson [lang="ja"],
#kotobaLesson .cl-word,
#kotobaLesson .cl-page,
#kotobaLesson .cl-tile--kanji { font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif); }

/* ── the standing mark: lesson, title, the way out ───────────────────────── */
/* ⭐⭐ card layout 2026-09-28 (PLAN.md §4 and §5 item 12; the owner's answer
   to §7 question 4): ONE LINE, 3.75rem, ON EVERY SCREEN OF THE LESSON. The
   corner was two rows (the mark over the spine) and the card head started
   130px down; it is one row now, the lesson mark, the spine, then 音 and ✕ at
   the right, everything on the line's middle, and the card head starts at
   94px (the chrome plus the page origin). A window too narrow for one line
   (a phone) lets the spine wrap under the mark: the box grows and the runner
   measures it (seatChrome), as it always has. */
.cl-topmark {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: var(--cl-chrome-line);
    padding: 0 clamp(1rem, 4vw, 2.4rem);
    /* ROUND 2 (CR-8): paper under the whole spine.
       ⛔ AND NO FADE AT ALL (2026-09-23, design review L2, item 26). The fade in
       the box's bottom padding was a strip of half-paper: at 0.9rem the scrolled
       character page's hero stroke showed through it as a 14px brown drip under
       the spine, and at the 0.4rem the review asked for, still as a 4px stub
       (screen 028 scrolled to its foot). Any fade is a window onto what scrolls
       under the chrome, and nothing may sit on the chrome but the chrome: the
       paper runs to the box's edge, 0.9rem under the spine's ink.
       ⛔ OVERRIDDEN 2026-09-24 (design review L2, walk 3): THE REVIEW'S SHORT
       FADE, AND NO BAND. The band of paper item 26's walk hung under this box
       (.cl-topmark::after, 0.9rem) hid 半's 8px stroke end on screen 028 and
       sliced the top off whatever else scrolled under it: on 003 scrolled the
       name "hundred" stood half-cut in the reading area, 14px below the chrome.
       Ink cut inside the reading area is worse than a stub under the chrome, so
       the band is gone and nothing hangs below the box. The box stays opaque
       paper down to its last 0.4rem, and that 0.4rem fades to paper-at-zero (the
       review's own fix), so a line leaving the glass softens at the edge rather
       than being cut flat. The stroke's 4px stub below the chrome on 028 / 032
       scrolled to their foot is accepted as a nit. */
    background: linear-gradient(var(--cl-paper) calc(100% - 0.4rem), rgba(252, 250, 242, 0));
}
/* ⭐ THE TAG OWNS THE CORNER. One small grey line was the only thing on every
   screen saying WHICH DAY this is, and it was quieter than the ✕ beside it.
   Two lines: the day's name in Japanese with its number in front, the plain
   English echo beneath. Chrome still — it must never compete with the station
   it stands over — but chrome that can be read.
   ⛔ card layout 2026-09-28: ONE ROW, NOT TWO. The mark's line (Lesson 5, the
   title, its English) and the spine stand side by side, 2.4rem apart, each on
   the chrome's middle; they wrap to two rows only where the window cannot
   hold one. */
.cl-mark { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 2.4rem; row-gap: 0.1rem; line-height: 1.25; }
.cl-mark-line { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.cl-mark-line .cl-mark-en { margin-left: 0.2rem; }
.cl-mark-n {
    font-size: var(--e4);
    letter-spacing: var(--e4-track);
    text-transform: var(--e4-case);
    color: var(--cl-quiet);
    font-variant-numeric: tabular-nums;
}
.cl-mark-title { font-size: var(--k5); color: var(--color-jp-text, #2A231F); }
.cl-mark-en { font-size: var(--e3); color: var(--cl-quiet); }
/* on the door the day's name is already standing on the painting at full size,
   and printing it twice on one screen is the surface talking to itself.
   ⛔ THE SAME YIELD ON EVERY PAGE SCREEN: the leaf carries a dateline now, and
   on the warm-up the corner was worse than redundant — it printed TODAY's day
   over MONDAY's page. The corner keeps the lesson number and the way out.
   ⛔⛔ BUT ONLY THE DOOR GIVES THE SEAT UP (batch D1 fix round 1, item 2).
   With display: none on the warm-up, the mark's title and English left the
   chrome's row, so the section row (.cl-spine) stood at x 145 instead of 229
   at 1280 (153, not 245, at 1680) and jumped 84 to 92px right when the first
   +1 item opened. The warm-up, the page and the reread now yield the ink and
   keep the box (visibility, as the 心 look card already does with
   .cl-looking-room below), so the row stands at one x on every screen. The
   door keeps display: none: it has no section row to hold. */
#kotobaLesson[data-screen="door"] .cl-mark-title,
#kotobaLesson[data-screen="door"] .cl-mark-en { display: none; }
#kotobaLesson[data-screen="warmup"] .cl-mark-title,
#kotobaLesson[data-screen="warmup"] .cl-mark-en,
#kotobaLesson[data-screen="page"] .cl-mark-title,
#kotobaLesson[data-screen="page"] .cl-mark-en,
#kotobaLesson[data-screen="reread"] .cl-mark-title,
#kotobaLesson[data-screen="reread"] .cl-mark-en { visibility: hidden; }
/* and on the door the NUMBER stands down too — the 扉 head prints "Lesson 8"
   on the leaf itself, and a day is never numbered twice on one screen */
#kotobaLesson[data-screen="door"] .cl-mark-n { display: none; }
.cl-leave {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--cl-quiet);
    font-size: var(--e2);
    line-height: 1;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: color var(--duration-fast, .15s) var(--ease-settle, ease);
}
/* ⭐ S8: THE WAY OUT SAYS WHERE YOU LAND. "Your place is kept." stands to the
   left of ✕ with its width reserved and wakes in INK alone — on the mark's
   hover, on the keyboard's focus, and on Escape's first press (the room's
   .cl-leave-asked). A hover reveal changes ink, never geometry: the seat is
   there at rest, invisible, so nothing moves when the promise appears. */
/* ⛔ OVERRIDDEN IN PART (card layout 2026-09-28, PLAN.md §5 item 10): UNDER ✕,
   NOT BESIDE IT. The reserved width held 176px of the one line open between 音
   and ✕, so the toggle lined up with nothing; the promise now hangs under ✕,
   out of the line (absolute, on the corner's own box), and wakes exactly as
   before: in ink alone, on hover, focus and the first Escape. 音 stands beside
   ✕. */
.cl-leave-note {
    position: absolute;
    right: clamp(1rem, 4vw, 2.4rem);      /* the corner's own inset: ✕'s right edge */
    top: calc(100% - 0.6rem);
    margin-left: 0;
    font-size: var(--e3);
    color: var(--cl-quiet);
    white-space: nowrap;
    visibility: hidden;
    padding-right: 0.15rem;
}
.cl-leave-note + .cl-leave { margin-left: 0; }
.cl-topmark:has(.cl-leave:hover) .cl-leave-note,
.cl-topmark:has(.cl-leave:focus-visible) .cl-leave-note,
#kotobaLesson.cl-leave-asked .cl-leave-note { visibility: visible; }
.cl-leave:hover { color: var(--cl-accent); }
/* ⭐ S8: THE SPINE — the chapter's stations under the corner mark, three inks.
   Passed in past ink, the one the FRONTIER stands in inked (its Japanese in
   the JP brown), the ones to come quiet; a 3px dot between. No number, no
   fill: a row of names is a place, not a meter.
   ⭐ ROUND 2 (nav-C2): the frontier is the axis and the cursor is a mark — the
   station the cursor stands in carries the one hairline underline, so after a
   Back the row still says where the walk has got to. The "coming" ink moves
   from the rule colour (1.32:1, illegible) to --cl-quiet (4.8:1).
   ⭐ (nav-C1): ONE DOOR — a passed 言葉 is a button back to the first word,
   in the file's door grammar (rest in past ink, hover indigo with one
   underline under the Japanese, the shared focus ring); every other station
   stays text and promises nothing it lacks. */
.cl-spine {
    list-style: none;
    margin: 0;                            /* card layout 2026-09-28: beside the mark, on the one line, not under it */
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 0.15rem;
    font-size: var(--e3);
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.cl-spine[hidden] { display: none; }   /* the [hidden] reset law: an author display owes its own */
.cl-sp {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    white-space: nowrap;
    color: var(--cl-rule);
}
.cl-sp [lang="ja"] { font-family: var(--font-jp, 'Klee One', serif); font-size: 0.9375rem; letter-spacing: 0.06em; }
.cl-sp i { font-style: normal; }
.cl-sp + .cl-sp::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cl-rule);
    margin: 0 0.65rem;
    align-self: center;
}
.cl-sp--past { color: var(--cl-ink-past); }
.cl-sp--now { color: var(--cl-ink); }
.cl-sp--now [lang="ja"] { color: var(--color-jp-text, #2A231F); }
.cl-sp--here [lang="ja"] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: currentColor;
}
.cl-sp--next { color: var(--cl-quiet); }
.cl-sp-door {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
    transition: color var(--duration-fast, .15s) var(--ease-settle, ease);
}
.cl-sp-door:hover { color: var(--cl-accent); }
.cl-sp-door:hover [lang="ja"] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: currentColor;
}
.cl-sp-door:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
.cl-sp-door:disabled { cursor: default; color: inherit; }
.cl-sp-door:disabled [lang="ja"] { text-decoration: none; }
/* ⭐ S8: BACK AT THE LEFT OF EVERY FOOT. ⭐ one foot (2026-09-29): in the way
   on's own dress now (the hairline hand, below), the same width and height as
   the right seat, and never gone: disabled where no page stands behind the
   screen (the door, the wake) or while a hand holds tiles, in the pale dress
   an unfinished row's 答える wears. ⛔ Retired with it: Back's landing after a
   middle dot (.cl-prev-to, "戻る Back · 手 the word", round 2's nav-C4), the
   bookmark hand (.cl-bookmark, しおり where I was, nav-C3), the close's three
   hands in a wrapping row (Back and Start again at the left, the goodbye at
   the right) and the seam's fork (.cl-foot--pair): one foot, two hands. */
/* ⭐ S8: START AGAIN, OFF THE CORNER, AND OFF THE FOOT (2026-09-29). On the
   door's own row (a chapter part-way) and as the close's last line, in the
   quiet dress; the press turns it in place into one sentence and two hands,
   いいえ under the hand. */
.cl-againrow { margin-top: 1.2rem; }
.cl-again[hidden] { display: none; }   /* the confirm stands in its place */
.cl-again-ask { display: inline-flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; }
.cl-again-q { font-size: var(--e2); color: var(--cl-ink); }
.cl-leave:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }

/* ── the stage ───────────────────────────────────────────────────────────── */
/* ⛔ THE STAGE ITSELF HOLDS NO ORIGIN. Its own padding-top would be a third
   number under the two tokens — every station declares which origin it reads
   on, and that number is the whole distance from the top of the stage. */
.cl-stage {
    width: var(--cl-col);
    margin: 0 auto;
    /* the air under the way on: the same 2.6rem at the end of a long page as
       under a page that fits (the seat law below reads this number) */
    padding: 0 0 2.6rem;
    opacity: 0;
    /* ⛔ NO TRAVEL ON A PAGE TURN. 4px of rise on ~60 turns a lesson is text
       moving while it is arriving, which is the one thing this surface may not
       do — and it bought nothing a fade does not. The cut out is honest (JS
       kills the transition while the stage is wiped), the arrival is 260ms. */
    transition: opacity var(--cl-turn) var(--ease-brush, ease);
}
.cl-stage.cl-in { opacity: 1; }
/* a pointer turn seats the hand on the stage itself (focusFirst): no ring
   on a container nobody pressed — a real Tab lands on a real control */
.cl-stage:focus, .cl-stage:focus-visible { outline: none; }
/* the wipe itself: no clock, so the outgoing page is gone before the new one
   begins — a cut, not a 33%-opacity flicker (--ease-brush front-loads) */
.cl-stage.cl-cut { transition: none; }
/* ⭐ S9: INSIDE A MEETING THE SHEET TURNS. A 90ms out before the wipe and the
   260ms arrival read as one page turning where a hard cut read as the card
   being replaced (JS adds it on turn(); render() takes it off with the cut). */
.cl-stage.cl-in.cl-out { opacity: 0; transition: opacity var(--cl-turn-out) var(--ease-settle, ease); }
/* ⭐⭐ S1: THE WAY ON HAS ONE SEAT. Measured across one lesson: ten heights and
   three x positions (the column's edge, the set's 34em edge, the street's
   plate). Rule: x = the column's right edge on every station; y = the bottom
   of the glass on any station that fits, else the end of the content. The
   station is the positioned box and reserves the seat's height at its foot;
   min-height is the glass minus the corner chrome (measured by the runner
   into --cl-chrome-h) minus the stage's own bottom air, so a page that fits
   puts the seat on the glass floor and a page that scrolls puts it after its
   last line. ⛔ WORK buttons are not the way on and keep their row: 答える
   under its rack, the seam's fork under its line, the door's greeting under
   the day's line. ⛔ Three stations keep their own foot: the street's plate
   IS its column (the foot rides the plate's right edge), the close is a long
   receipt whose door out follows its last section, and the door has no way
   on at all — its greeting is the door. */
/* ⭐ ROUND 2 (2026-09-09): TWO SEATS, ONE X. The owner read S1's floor as
   "buttons too low" and "75% of the page empty": a pair page ended a third of
   the way down and its hands sat on the glass floor 650px below. The y half of
   the law now has two cases and the x half is untouched. An ASK (the meet ask,
   a set item, a check) keeps the floor: Back stands in its foot while the
   paper is still changing, and a hand that moved at the verdict would break
   "the verdict belongs to the question". A TOLD page (the character page once
   told, the word, the example, the pair, a beat) is TETHERED: the runner
   measures the page (seatFloor) and sets its min-height to the content plus
   --cl-tether, never past the sheet — so the hand rests under the reading on
   a short page and on the floor on a page that fills the glass.
   ⭐ AND NEVER UNDER 72% OF THE SHEET (2026-09-24, design review L2, stage 2,
   ELEVATE 1 / ruling 3): a told page's way on never rises above the lower
   third of the glass, so inside a card it stands in two seats, not four.
   ⛔⛔ BOTH SUPERSEDED (2026-09-29, the owner's item 8, "always in the same two
   seats"): the one foot is FIXED on the glass floor on every station (the rule
   below the overhang note), the tether is retired, and a station's min-height
   and 5.4rem bottom padding now only keep its last line clear of the hand when
   the page is scrolled to its end. */
.cl-stage > section:not(.cl-door):not(.cl-pano):not(.cl-close):not(.cl-night):not(.cl-fail) {
    position: relative;
    /* batch D1 sitting 2: the room keeps the foot's height (#kotobaLesson), so
       the floor and the seat give it back: the same page height, the same
       2.4rem of air over the hand at the scroll end */
    min-height: calc(var(--cl-glass) - var(--cl-foot-h));
    padding-bottom: calc(5.4rem - var(--cl-foot-h));   /* the seat: the hand's height + its 2.4rem of air, less the room's share */
}
/* ⭐ MEDIA_CONTRACT §6 (2026-09-28): A PLATE SCREEN'S HAND KEEPS LESS AIR. The
   plate above the check takes 347 + 33 of the 380px a piece has at 1280x900,
   and the contract seats the check's last seat at or above the foot's top (y
   809): with 2.4rem of air under it the page overhung by 35px and the guard
   below turned that into a 214px scroll. The plated read keeps the hand's
   own height and a hair (3.3rem), so it fits the glass. (The overhang guard
   that used to follow it is retired, 2026-09-29: the one foot is fixed.) */
.cl-stage > section.cl-read--plated:not(.cl-door):not(.cl-pano):not(.cl-close):not(.cl-night):not(.cl-fail) { padding-bottom: max(0px, calc(3.3rem - var(--cl-foot-h))); }
/* a station whose foot is a WORK fork (the seam's 続ける / ここまで) is not
   absolutely seated, so the 5.4rem seat under it was a phantom tail: the
   rest scrolled by 45px on every glass with nothing to scroll to */
.cl-stage > .cl-seam { padding-bottom: 0; }
/* ⛔ one foot (2026-09-29): THE OVERHANG GUARD IS RETIRED (.cl-overhang, a
   13.4rem tail on a page that ran past the glass by under 8rem, so the cut
   never fell through the hand): the foot is fixed on the glass floor and a
   page that runs over scrolls above it, never under it. */
/* ⭐⭐ ONE FOOT ON EVERY SCREEN (2026-09-29; the owner's walk of lesson 5, item
   8: "navigation which is confusing... we should be more simple and clear,
   have nice buttons or something: back, next, back and exit"). Two real
   buttons in two fixed seats, the same box on every screen of every lesson,
   the door and the close included: 戻る Back at the column's left edge, the
   right seat (次へ Next; 教えて Tell me before a telling; the close's one
   closing press) at its right edge, both on the glass floor, where every ask's
   way on already stood (y 809 to 858 at 1280x900). FIXED, so nothing the page
   above does (a told page that is short, a read that runs long, a close that
   stages its proof) can move it: the tether's four heights inside one card and
   the absolute foot under a long page are gone. The column's x is the stage's:
   centred in the room less the scroll gutter the room reserves (--cl-sbw, the
   runner's measure; 0 with overlay scrollbars). The floor is the glass's, so
   a very tall window keeps its hand where the glass cap puts it. The foot
   carries the paper under it down to the window's edge, so a page scrolling
   under it never shows through its two ghosts.
   ⛔ The ID in front is the law's weight, not a habit: each station used to
   seat its own foot (absolute, sticky on the character page, in flow on the
   door, the street, the close and the night paper), and this one rule
   outranks every one of them. */
#kotobaLesson .cl-stage .cl-foot {
    position: fixed;
    z-index: 3;
    left: 0;
    right: var(--cl-sbw, 0px);
    bottom: max(2.6rem, calc(100vh - var(--cl-chrome-h, 4.6rem) - var(--cl-glass)));
    width: var(--cl-col);
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.4rem;
    background: var(--cl-paper);
    /* the paper carried down to the window's edge (2.6rem of air under the
       hand), with a hair to spare: a single 2.6rem copy left the last pixel
       row of a scrolled page showing under it at 1280x900 */
    box-shadow: 0 1.5rem 0 var(--cl-paper), 0 3rem 0 var(--cl-paper);
}
/* the two seats: one width, one height (the dress, below), Back at the left
   edge, the corner cell at the right edge */
#kotobaLesson .cl-stage .cl-foot > .cl-prev,
#kotobaLesson .cl-stage .cl-foot > .cl-corner { flex: 0 0 auto; width: var(--cl-foot-seat-w); margin: 0; }
#kotobaLesson .cl-stage .cl-foot > .cl-prev { justify-content: center; }
/* ⛔ THE CLOSE'S SEAT IS THE SAME SEAT (batch A fix round 1, item 3). Its
   press wore the file's close.door_jp and grew leftward to it (.cl-foot--close
   > .cl-corner { width: auto }): 279px against 153 on lesson 5 at 1280, 309 on
   lesson 1, 328 on lesson 3, the one foot button with a box of its own. And it
   said goodbye a second time under じゃ、また。 (いい一日を。 Have a good day.;
   See you tomorrow), and lessons 3 and 4 named the weekday item 4 took off the
   door (じゃ、木曜日に。 See you Thursday.). The press now wears COPY's fixed
   face, おわる Finish (closeDoorHTML), which fits the standard seat, and the
   override is gone: じゃ、また。 is the close's one goodbye. */
/* a foot that is not on this page is not in it: the [hidden] reset below is
   outranked by the rule above, so it is said again at the rule's weight */
#kotobaLesson .cl-stage .cl-foot[hidden] { display: none; }
/* every station keeps the foot's seat as paper at its end, so its last line
   clears the hand when the page is scrolled to its end: the ask/told stations
   already carry it (5.4rem, the seat rule above); the door, the street, the
   close and the night paper take it here; the character page carries the
   hand's own height, the height its sticky foot stood in (its 43-card fit was
   measured so) */
.cl-stage > section.cl-door,
.cl-stage > section.cl-pano,
.cl-stage > section.cl-close,
.cl-stage > section.cl-night,
.cl-stage > section.cl-wake { padding-bottom: calc(5.4rem - var(--cl-foot-h)); }   /* the room keeps the rest (batch D1 s2) */
/* the close's end (batch A fix round 1, item 4): 4.4rem + the stage's 2.6rem
   = 112px, the hand's 91 (49 tall on 42 of air at 1280x900) and 21px of
   paper, a hair under the 1.4rem a landed readback line keeps over the hand
   (bringAboveFoot, fix round 2), so a close that fits arrives whole on the
   glass (lessons 1, 2 and 4 scrolled 14px at 1280x900 on 5.4rem) */
.cl-stage > section.cl-close { padding-bottom: calc(4.4rem - var(--cl-foot-h)); }   /* 4.4rem with the room's share */

/* ⛔ A THING THAT HAS NOT ARRIVED HOLDS NO SEAT. [hidden] is display:none from
   the UA sheet and an author `display` outranks it — .cl-foot is flex, .cl-pale
   is flex, .cl-pano-found is flex — so the room says it once, above every class
   inside it, and nothing waiting is in the layout. */
#kotobaLesson [hidden] { display: none; }
/* ⭐⭐ AND THE OTHER HALF OF THAT LAW: A THING THAT WILL ARRIVE HERE HOLDS ITS
   SEAT FROM MOUNT. [hidden] is for what belongs to another page; [data-veil]
   is for what belongs to THIS one and has not been said yet. The seat is laid
   at mount, at its true height, and arrival is ink alone — which is the only
   way an answer can land while the learner is reading and move nothing.
   visibility (never opacity) so the unsaid is out of the a11y tree, out of a
   selection, and out of the tab order until it has been said. */
#kotobaLesson [data-veil] { visibility: hidden; }
/* ⛔ MARGINS MUST NOT COLLAPSE OUT OF A BOX WHOSE CHILDREN COME AND GO. A
   spent rack removed at the end of its fold turned .cl-built's 2.1rem bottom
   margin into the parent's last margin — 34px closing in ONE frame, 420ms
   after the answer, with the learner's hand already on 次へ (measured on 13 of
   14 answer transitions). flow-root pins the box: nothing collapses through
   it, so a removal inside it can never change its height. */
.cl-hand, .cl-handwrap, .cl-item, .cl-landing { display: flow-root; }
/* and when it does arrive it arrives the way everything on this surface does:
   the close's staged beats and the panorama's hand-over share the one idiom */
.cl-arrive { animation: cl-unfold 520ms var(--ease-brush, ease) both; }

.cl-eyebrow {
    font-size: var(--e3);
    letter-spacing: 0.06em;
    color: var(--cl-quiet);
    margin: 0 0 1.4rem;
}

/* ⭐⭐ THE INK LAW. Japanese set inside a line of teacher's English used to be
   the smallest-feeling thing in the sentence: English is effortless and
   Japanese is work, so at the same measured size the JP reads smaller than the
   words around it — and anything introduced mid-sentence that way inherits
   footnote status however important it is. 出口 and 気をつけて are ENCOUNTERS,
   not citations. In its own sentence, Japanese is the senior ink: a size step
   up, the Klee face, and full sumi even where the sentence around it is quiet.
   ⛔ ONE CLASS, MINTED AT THE SEAM (js: mixed()). The old law was a
   hand-maintained list of two dozen prose selectors, so every renderer added
   since had to remember to join it — and the ones that forgot were exactly the
   lines nobody re-read. mixed() is the only door Japanese uses to get into an
   English sentence, so the class it mints is the only place the law has to be.
   ⛔ AND THE LEADING IS GUARDED. A 1.18em run inside a 1.7 line would push its
   own line box taller than its neighbours and rag the paragraph; line-height:1
   on the span keeps every line of the paragraph on the paragraph's own rhythm. */
#kotobaLesson .cl-jp {
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: 1.18em;
    line-height: 1;
    color: var(--cl-ink);
    /* ⛔ AND IT NEVER BREAKS INSIDE A WORD (2026-09-23, design review L2,
       item 8): a long run breaks at its punctuation (keep-all), and a run of
       eight characters or fewer (js mixed(): one word, one reading) never
       breaks at all, so ふん hardens to ぷ / ん cannot happen in the line that
       teaches it */
    word-break: keep-all;
}
#kotobaLesson .cl-jp--short { white-space: nowrap; }
/* ⛔ AND A NUMBER NEVER PARTS FROM ITS KANJI (batch D1, sitting 2; js mixed()):
   10年 and 8時 broke between the digits and the kanji at a line's end in a §2
   miss note. The digits and the run they lead into share one .cl-nobr: the
   seam between them is the wrapper's, so it never breaks, while a long run
   inside keeps its own keep-all breaks at its punctuation. */
#kotobaLesson .cl-nobr { white-space: nowrap; }
#kotobaLesson .cl-nobr > .cl-jp:not(.cl-jp--short) { white-space: normal; }

/* ── 0 · the wake: two words held, before the walk is picked up ──────────── */
/* One line and two words on an otherwise empty sheet. Nothing is asked and
   nothing is scored here — the whole screen is a hand offered at the top of
   the stairs, so it stays as quiet as the paper it is printed on. */
.cl-wake { padding-top: var(--cl-origin-page); }
.cl-wake-line {
    font-size: var(--e2);
    line-height: 1.75;
    color: var(--cl-ink);
    margin: 0 0 2.4rem;
    max-width: 34em;
}
.cl-wake-words {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem 3rem;
    margin: 0 0 1rem;
    padding: 0;
}
.cl-wk-word {
    border: 0;
    padding: 0.2rem 0.1rem;
    font: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}
.cl-wk-k {
    font-size: var(--k3);
    line-height: 1.15;
    color: var(--color-jp-text, #2A231F);
    transition: color var(--duration-fast, .15s) var(--ease-settle, ease);
}
/* the rest of the veil dress is shared with the meet, above — the only thing
   this hand adds is ink under the cursor, and never a millimetre of movement */
.cl-wk-word:hover .cl-wk-k { color: var(--cl-accent); }
.cl-wk-word:focus-visible { outline: var(--cl-ring); outline-offset: 3px; }

/* ── 1 · the door ────────────────────────────────────────────────────────── */
/* ⭐ THE DOOR IS THE DIARY OPENED AT TODAY. The day's name is printed on the
   PAPER — the reading leaf's own dateline grammar, one step louder — and the
   painting hangs whole beneath it as a mounted plate. Type never stands on
   the paint: the old full-bleed strip washed 46% of the frame to seat a
   caption (contrast measured down to 1.85:1 against the wet window), ran the
   title into the painted phone's own 雨, and cropped away more of the
   commissioned art the bigger the glass got. */
.cl-stage[data-screen="door"] { width: 100%; }
.cl-door { padding-top: var(--cl-origin-page); padding-bottom: 2.5rem; text-align: left; }
.cl-door-head,
.cl-door-body {
    width: var(--cl-col);
    margin: 0 auto;
}
/* ⭐ ONE LEFT EDGE (desktop walk 2026-09-23). The head used to share the
   PLATE's measure — its height-budgeted width, 683px at 1280×900 — while the
   greeting and the foot under it stood on the reading column (765px), so the
   door's type ran down two left edges 41px apart. The head is text, and text
   in this room reads down the column: the series line, the dateline and its
   rule share the greeting's edge and width, and the plate hangs centred
   between them as the one picture on the page. */
.cl-door-top {
    width: var(--cl-col);
    margin: 0 auto;
}
.cl-door-head { margin-bottom: 1.1rem; }
/* the 扉 head: the series line, then the day. The lesson number takes a real
   seat on the leaf (the corner's 11px crumb stands down on this one screen),
   quiet above the dateline the way a book names its series above its title. */
.cl-door-lede {
    font-size: var(--e3);
    letter-spacing: var(--e4-track);
    color: var(--cl-ink);
    margin: 0 0 1.05rem;
}
.cl-door-top { margin-bottom: 1.8rem; }
.cl-door-title {
    margin: 0;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--cl-rule);
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--k3);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.25;
    color: var(--color-jp-text, #2A231F);
}
/* the dateline's full-width gap — the comma's work, done by air (the leaf's
   own head grammar, css .cl-dateline) */
.cl-door-title .cl-dl-wx { margin-left: 1em; }
/* the line the door says to someone it has seen before: ink on the paper,
   one measure, nothing beside it */
.cl-back {
    font-size: var(--e2);
    line-height: 1.7;
    color: var(--cl-ink);
    max-width: 34em;
    margin: 0.6rem 0 0;
}
/* ⛔ THE CROP KEEPS THE SILL IN FRAME. The door's painting was re-cut with a
   written surface on it — the lit phone the day's first word is printed on —
   and the old crop, chosen when the window was all there was to see, put that
   surface a hand's width below the bottom edge on any wide desktop. One number
   holds the frame and the overlay together (the img is placed by it and the
   scene layer is placed by it), so they can never drift apart. */
/* ⭐ ROUND 2 (M5, 2026-09-10): THE DOOR HANGS WHOLE. The plate was a strip
   — a fixed 42vh height over an 1100px width, cover-cropped at 50% 62%:
   62% of the painting at 1920×1080, 58% on a laptop, the night sky, the
   shelf tops and the colleague's head on the cut. The door is the one
   station with no column beside it and its painting is the chapter's
   opening: it takes the street width the panorama already owns, at 3:2,
   HEIGHT-BUDGETED so the greeting stays on the glass by construction —
   972×648 at 1920×1080, 702×468 at 1440×900, 1100×733 at 2560×1440. With
   the plate whole the scene layer IS the frame (no crop number to share),
   and a painted board's sign_text lands exact instead of crop-compensated. */
.cl-door { --cl-door-w: min(1100px, 100% - 3rem, calc((100vh - 27rem) * 1.5)); }
.cl-doorart {
    position: relative;
    width: var(--cl-door-w);
    aspect-ratio: 1.5;
    margin: 0 auto 2rem;
    overflow: hidden;
    border: 1px solid var(--cl-rule);
    container-type: size;                 /* 1cqw / 1cqh = the frame, for the writing on it */
}
.cl-doorart img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cl-doorart:empty { display: none; }   /* the text lane: no painting yet, no empty plate */
/* ⭐ THE DOOR PLATE IN INK (2026-09-24; the concept book §3 and §4 "The door",
   build order item 5, approved by the owner 2026-09-24). OVERRIDES the plate's
   hairline and loading tint above for a v2.2 lesson's door (js: renderDoor):
   the door is ink for what she saw, the town at rest at the day's first hour,
   so it wears the kanji pictures' bare-paper dress (.cl-kpic--ink, which says
   why each step): no border, the paper as its ground, the washi lifted to
   white by index.html's #cl-washi, the drawing multiplied onto the paper, and
   the same feather to nothing at every edge (two 12% ramps, intersected). The
   seat is still held by ratio at 3:2 and by the height budget, so the greeting
   stays on the glass and nothing jumps when the webp lands. A v1 door keeps
   its plate. */
.cl-doorart.cl-doorart--ink { border: 0; background: var(--cl-paper); }
.cl-doorart.cl-doorart--ink img {
    filter: url(#cl-washi);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                        linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-composite: intersect;
}
/* ⭐ AND THE BARE DOOR IS A ONE-THING SCREEN (2026-09-23, design review L2,
   item 13). The head's page origin was composed to stand above a 3:2 plate;
   with the plate dropped, "Lesson 2", the dateline and the greeting hugged the
   top of the glass with 580px of paper under them (owner #77's complaint,
   exactly). With no painting the block takes the ask origin, a quarter down
   like every other one-thing screen, and the moment a plate lands this rule
   stops matching and the door returns to its page origin by itself. */
.cl-door:has(.cl-doorart:empty) { padding-top: var(--cl-origin-ask); }
/* a short laptop keeps the greeting above the fold: the one press that
   opens the day must never need a scroll to be found (the plate's own
   height budget already shrinks it; only the air under it steps) */
@media (max-height: 780px) {
    .cl-doorart { margin-bottom: 1.5rem; }
    .cl-door-top { margin-bottom: 1.3rem; }
}
/* the day's line leads the paper below the plate — the story needs no label
   over it, and --e1 is the step that exists for exactly this line */
.cl-parked {
    font-size: var(--e4);
    letter-spacing: var(--e4-track);
    text-transform: var(--e4-case);
    color: var(--cl-quiet);
    margin: 1.4rem 0 0.35rem;
}
.cl-resume { font-size: var(--e2); color: var(--cl-quiet); margin: 0; }
/* ⭐ THE THREE-MINUTE DOOR stands UNDER the greeting, never beside it: the
   whole lesson is the offer, and this is the one you can afford tonight. It
   is a handle, not a hand — the quietest control on the screen. */
.cl-nightrow { margin-top: 1.2rem; }
.cl-nightdoor { max-width: 34em; text-align: left; }

/* ── 1b · the night paper ────────────────────────────────────────────────── */
/* One expression, its reading, its English, the teacher's note under it, and
   the way back. Nothing is asked, so nothing on it is a hand except the line
   itself, which speaks where the day has a voice for it. */
.cl-night { padding-top: var(--cl-origin-page); }
/* the three-minute paper is the one surface that still sets the phrase as a
   page rather than an island: it IS the page, and an island on an empty sheet
   is a box drawn around the only thing there */
.cl-night .cl-phrase-jp {
    margin: 0;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
    line-height: 1.8;
    color: var(--cl-ink);
}
.cl-night .cl-phrase-r { margin: 0.4rem 0 0; font-size: var(--k6); color: var(--cl-quiet); }
.cl-night .cl-phrase-en { margin: 0.55rem 0 0; font-size: var(--e3); color: var(--cl-quiet); }
.cl-night .cl-phrase-note { margin: 1.3rem 0 0; font-size: var(--e3); line-height: 1.7; color: var(--cl-quiet); max-width: 34em; }
/* the sentence IS the door where a clip says it — the signoff's own dress:
   no pill, an ink underline waking on hover as the only sign it has a voice */
button.cl-night-jp {
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast, .15s) var(--ease-settle, ease);
}
button.cl-night-jp:hover { border-bottom-color: rgba(61, 90, 128, 0.4); }
button.cl-night-jp:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* ⭐ S1: THE GREETING READS AS A DOOR. It stood as printed speech over a
   hairline ("the third breath", 2026-08) — and a Japanese line over a rule
   with an English hint beneath it reads, to a web-literate adult, as a text
   field, not a press; the louder control on that screen was the mute. The
   door is the one page with no page before it, so its press has to be found
   cold: it wears the way-on's own hand (the hairline hand every 次へ wears
   now), one step larger in the Japanese so it still reads as speech. What
   survives from the third breath: the 44px floor, the JP+EN duet, and the
   said state as colour alone — the box the hand is resting on never moves.
   Compound selectors: these override .cl-next, declared further down. */
/* ⭐ one foot (2026-09-29): THE WAY IN IS THE FOOT'S 次へ Next, in the one
   dress and the one right seat; the greeting it used to wear is printed as
   the door's line (.cl-door-greet), in the size and inks the hand gave it,
   unpressed. The said state stays: colour alone. */
.cl-door-greet {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    margin: 0;
}
.cl-door-greet [lang="ja"] { font-size: var(--k5); line-height: 1.3; color: var(--color-jp-text, #2A231F); }
.cl-door-greet i { font-style: normal; font-size: var(--e3); color: var(--cl-quiet); letter-spacing: 0.03em; }
/* answered — the ink settles while the bell rings and the weather comes up.
   Colour alone: the box the hand is still resting on must not move. */
.cl-next.cl-begin--said,
.cl-next.cl-begin--said:hover { border-color: var(--cl-accent); color: var(--cl-accent); }
.cl-next.cl-begin--said span[lang="ja"] { color: var(--cl-accent); }
.cl-next.cl-begin--said i { color: var(--cl-accent); }
/* ── the named door (C1, batch D1 sitting 1, 2026-09-29; js: namedDoorHTML) ──
   ⭐ A COVER, NOT A DIARY PAGE (the owner's row C1: "a lesson name / intro").
   "Lesson 5" in the micro-labels' dress; the chapter's NAME at the door
   title's own step (k3, the step the title word stood at) in the teacher's
   serif, the largest English in the room because it is the page; the title
   word under it as a small kanji mark (the glyph at the asked step, its kana
   at the reading step, its English quiet); the Japanese line at the read
   step; the intro as one line of the teacher's cut; the stations as a quiet
   contents line in the spine's own grammar. No plate and no hairline (the
   picture seat waits for the walls' second round), so the cover takes the ask
   origin, a quarter down, like the bare door (item 13). Nothing on it answers
   or unfolds: every box is the box it mounted in. */
.cl-stage > section.cl-door.cl-door--named { padding-top: var(--cl-origin-ask); }
.cl-door--named .cl-door-top { margin-bottom: var(--cl-air-between); }
.cl-door--named .cl-door-lede {
    font-size: var(--e4);
    letter-spacing: var(--e4-track);
    text-transform: var(--e4-case);
    color: var(--cl-quiet);
    margin: 0 0 var(--cl-air-in);
}
.cl-door-title.cl-door-name {
    padding-bottom: 0;
    border-bottom: 0;
    max-width: 16em;
    font-family: var(--cl-font-tell);
    font-size: var(--k3);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--cl-ink);
    text-wrap: balance;
}
.cl-door-mark {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin: var(--cl-air-in) 0 0;
}
.cl-door-mark-k {
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--k4);
    line-height: 1.1;
    color: var(--color-jp-text, #2A231F);
}
.cl-door-mark-r { font-size: var(--k6); line-height: 1.3; color: var(--color-jp-text, #2A231F); }
.cl-door-mark-en { font-size: var(--e3); color: var(--cl-ink-past); }
.cl-door-namejp {
    margin: var(--cl-air-in) 0 0;
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--k5);
    line-height: 1.4;
    color: var(--color-jp-text, #2A231F);
}
.cl-door-intro {
    margin: var(--cl-air-in) 0 0;
    max-width: 34em;
    font-family: var(--cl-font-tell);
    font-style: normal;
    font-size: var(--e2-tell);
    line-height: 1.65;
    color: var(--cl-ink);
}
.cl-door-contents {
    list-style: none;
    width: var(--cl-col);
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 0.15rem;
    font-size: var(--e3);
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--cl-quiet);
}
.cl-dc { display: inline-flex; align-items: baseline; gap: 0.35em; white-space: nowrap; }
.cl-dc [lang="ja"] { font-family: var(--font-jp, 'Klee One', serif); font-size: 0.9375rem; letter-spacing: 0.06em; }
.cl-dc i { font-style: normal; }
.cl-dc + .cl-dc::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cl-rule);
    margin: 0 0.65rem;
    align-self: center;
}
.cl-door--named .cl-door-body { margin-top: var(--cl-air-in); }

/* ── E3 · THE GATES (item 19, 2026-09-30) ─────────────────────────────────
   A chapter opening at each section's threshold, the same page five times, in
   the notebook's dress (docs/course_v2/reviews/learners_book_2026-09-29/
   notebook/gates.html, the design of record, D26): the section's name at k3 in
   the brush brown with its English at e1, ONE rule (the chapter opening's),
   the one fixed line in the teacher's serif (its Japanese at the read step),
   then the contents from the file. The reading gate is the model: its places
   stand on ruled lines because something is written on each. ⛔ The drill
   halves list their subsection titles as a quiet list, no ruled rows and no
   counts (the owner-persona's send-back 4: "a table with its borders off").
   Every box is laid at mount; nothing answers or unfolds. At 1280x900 the
   tallest gate (the words: two rows of portraits) ends well above the foot. */
.cl-stage > section.cl-gate { padding-top: calc(4 * var(--cl-u)); }
.cl-gate-top { border-bottom: 1px solid var(--cl-rule); padding-bottom: calc(1.3 * var(--cl-u)); }
.cl-gate-name { display: flex; align-items: baseline; gap: calc(1.05 * var(--cl-u)); margin: 0; font-weight: 400; }
.cl-gate-jp {
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--k3);
    line-height: 1;
    color: var(--color-jp-text, #2A231F);
}
.cl-gate-en { font-size: var(--e1); line-height: 1.2; color: var(--cl-ink); }
.cl-gate-line {
    margin: calc(1.2 * var(--cl-u)) 0 0;
    max-width: 34em;
    font-family: var(--cl-font-tell);
    font-size: var(--e2-tell);
    line-height: 1.65;
    color: var(--cl-ink);
}
.cl-gate-linejp {
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--k5);
    color: var(--color-jp-text, #2A231F);
    margin-right: 0.8rem;
}
.cl-gate-body { margin-top: calc(2 * var(--cl-u)); }
.cl-gate-note { margin: 0; font-size: var(--e3); line-height: 1.6; color: var(--cl-quiet); }
/* 復習: the words coming back, bare (no kana: the section will ask them) */
.cl-gate-back { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(1.4 * var(--cl-u)); margin: 0 0 calc(1.1 * var(--cl-u)); }
.cl-gate-bw { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k4); line-height: 1.3; color: var(--cl-ink-past); }
.cl-gate-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--cl-rule); align-self: center; }
/* 言葉: the strip of portraits, the word and its reading under each */
.cl-gate-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.8 * var(--cl-u)) calc(1.05 * var(--cl-u));
}
.cl-gate-cell { width: calc(6.6 * var(--cl-u)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.cl-gate-pic { display: block; width: calc(6.6 * var(--cl-u)); height: calc(6.6 * var(--cl-u)); background: var(--cl-paper); overflow: hidden; }
.cl-gate-pic img, .cl-gate-plate img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: url(#cl-washi);
    mix-blend-mode: multiply;
}
.cl-gate-w { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k6); line-height: 1.35; margin-top: 0.15rem; color: var(--color-jp-text, #2A231F); }
.cl-gate-r { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--e3); line-height: 1.3; color: var(--cl-quiet); }
/* R-038 (fix round, repair round 1): a phrase listed under its word's cell (the pattern by its head),
   one quiet line each, never a cell of its own: one count of the words */
.cl-gate-ph { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--e3); line-height: 1.3; margin-top: 0.1rem; color: var(--cl-ink-past); white-space: nowrap; }
/* 読む, the model: the count, the places on their ruled lines, the plates in the margin */
.cl-gate-read { display: flex; align-items: flex-start; gap: calc(2.4 * var(--cl-u)); margin-top: calc(0.8 * var(--cl-u)); }
.cl-gate-places {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    columns: 2;
    column-gap: calc(2.4 * var(--cl-u));
    font-size: var(--e2);
    line-height: 1.5;
    color: var(--cl-ink);
}
.cl-gate-places li { break-inside: avoid; padding: 0.35rem 0; border-bottom: 1px solid var(--cl-rule); }
.cl-gate-plates { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.6rem; }
.cl-gate-plate { display: block; width: calc(7 * var(--cl-u)); height: calc(4.7 * var(--cl-u)); background: var(--cl-paper); overflow: hidden; }
.cl-gate-plate img { object-fit: cover; }
/* 練習 · 確かめ: the subsection titles and their instructions, a quiet list */
.cl-gate-heads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(1.1 * var(--cl-u)); }
.cl-gate-heads li { display: flex; flex-direction: column; gap: 0.2rem; }
.cl-gate-ht { font-size: var(--e2); line-height: 1.4; color: var(--cl-ink); }
.cl-gate-hi { font-size: var(--e3); line-height: 1.5; color: var(--cl-quiet); }

/* the course's one mute. Both states are INK: the glyph pales by colour
   alpha (never element opacity, which would composite the strike with it)
   and a hairline crosses it out of a seat that is already reserved — nothing
   on this control moves under the pointer.
   ⭐ S1: IT LIVES IN THE CORNER CHROME, top-left beside the title mark, on
   every screen. It used to stand beside the door's greeting ("it belongs to
   the card it mutes") and again on the seam — which made it the loudest
   control on the door and left a lesson under way with no way to quiet the
   room. Chrome is where a room's switches go; the ✕ corner stays free. */
/* ⭐ ROUND 2 (CR-8 / L9): the mute's ONE seat — the right cluster, 音 · the
   promise · ✕, on every screen; it used to trail the mark's width */
.cl-topmark .cl-sound { align-self: center; margin: 0 0.5rem 0 auto; }
.cl-sound {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0.45rem;
    border: 0;
    background: none;
    color: var(--cl-quiet);
    font-size: var(--k6);
    line-height: 1;
    /* the 44px floor: the ink stays a small 音, the hand gets a real seat */
    min-width: 44px;
    min-height: 44px;
    padding: 0.4rem 0.5rem;
    /* card layout 2026-09-28: and the ink stands on the seat's middle, level
       with the spine on the one line of chrome (a wrapping row, so its one
       line can be centred; 音 and SOUND keep their shared baseline) */
    flex-wrap: wrap;
    align-content: center;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: color var(--duration-fast, .15s) var(--ease-settle, ease);
}
.cl-sound-k { position: relative; font-family: var(--font-jp, 'Klee One', serif); }
/* ⛔ THE STRIKE CROSSES THE GLYPH, NOT THE BUTTON. Hung on the button it shared
   its pseudo with the door's printed label, and the override left the door with
   neither: no label anyone could see, and no strike when the sound was off. */
.cl-sound-k::after {
    content: '';
    position: absolute;
    left: -0.16em;
    right: -0.16em;
    top: 50%;
    height: 1px;
    background: currentColor;
    visibility: hidden;
}
.cl-sound-en {
    font-style: normal;
    font-size: var(--e4);
    letter-spacing: var(--e4-track);
    text-transform: var(--e4-case);
    line-height: 1;
}
.cl-sound[data-muted="1"] { color: rgba(105, 98, 90, 0.45); }
.cl-sound[data-muted="1"] .cl-sound-k::after { visibility: visible; }
.cl-sound:hover { color: var(--cl-accent); }
.cl-sound:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }

/* a painting inside the column (the seam) — the seam's is darkened, because
   the day has gone into a packed carriage and the light with it */
/* ⭐ ONE MOUNTING GRAMMAR. The door and the leaf went to print — square
   corners, one hairline, no lift — and the rest of the book's paintings
   still floated as rounded app cards beside them. Every painting in the
   course now hangs as the same plate the door hangs. */
.cl-art {
    position: relative;
    margin: 0 0 1.7rem;
    border: 1px solid var(--cl-rule);
    overflow: hidden;
}
.cl-art img {
    display: block;
    width: 100%;
    height: clamp(210px, 32vh, 320px);
    object-fit: cover;
    object-position: 50% 52%;
}
/* ⭐ ROUND 2 (M8, 2026-09-10): A PAINTING ARRIVES AS INK, never as a pop.
   The lazily loaded webp used to land in one frame whenever the network
   delivered it — the one thing on the page that moved without the page.
   Every plate the course hangs (the word and example vignettes, the seam
   and the close, the door) opens as the sheet's own tone and the paint
   comes up in the long ink beat; the runner adds .is-in when the image has
   decoded (synchronously for a cached one, so it lands inside the page's
   own fade and never double-clocks). Geometry never moves: the ratio box
   holds the seat. The panorama keeps its own arrival (the tour). */
.cl-vig, .cl-art, .cl-doorart, .cl-photo, .cl-kpic { background: rgba(42, 35, 31, 0.03); }   /* the seat before its paint: a breath of sumi on the paper */
.cl-vig img, .cl-art img, .cl-doorart img, .cl-photo img, .cl-kpic img {
    opacity: 0;
    transition: opacity var(--cl-t-ink-long) var(--ease-brush, ease);
}
.cl-vig img.is-in, .cl-art img.is-in, .cl-doorart img.is-in, .cl-photo img.is-in, .cl-kpic img.is-in { opacity: 1; }
/* ⭐ S1: the seam's painting is the PLATE — whole at 3:2 in the ratio box
   the word and example pages hang, never a 32vh strip cut from a picture
   that was painted to be looked at (the pause is the one screen whose whole
   job is the picture) */
.cl-seam .cl-art { width: var(--cl-plate-w); aspect-ratio: 1.5; }
.cl-seam .cl-art img { height: 100%; }
/* ── the writing IN a painting ───────────────────────────────────────────── */
/* ⛔ THE PAINTING'S OWN COORDINATES. Every x/y/w in the lesson file is a
   percentage of the IMAGE, not of the box it is shown in: the phone sits where
   the brush put it, and the box crops. So this layer re-creates the image's own
   rectangle inside the frame — cover-sized from the frame's two axes, placed by
   the very object-position the <img> is placed by — and the words hang off IT.
   Percentages the whole way down: the writing scales with the paint, and there
   is not one pixel in the geometry. The floor (inset: 0) is exactly right
   wherever the frame already matches the painting, which is the panorama. */
.cl-scene {
    --cl-scene-ar: 1.5;                   /* 3:2 — every painting in this course */
    position: absolute;
    inset: 0;
    z-index: 1;                           /* over the paper wash the title stands in */
    pointer-events: none;                 /* only the words themselves take a press */
    container-type: inline-size;          /* 1cqw = 1% of the PAINTING's width */
}
@supports (container-type: size) {
    .cl-scene {
        inset: auto;
        left: 50%;
        top: var(--cl-scene-y, 50%);
        width: max(100cqw, 100cqh * var(--cl-scene-ar));
        height: max(100cqh, 100cqw / var(--cl-scene-ar));
        transform: translate(-50%, calc(-1 * var(--cl-scene-y, 50%)));
    }
}
.cl-scene-w {
    position: absolute;
    left: var(--cl-x, 50%);
    top: var(--cl-y, 50%);
    transform: translate(-50%, -50%) rotate(var(--cl-rot, 0deg));
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);                          /* the floor where cq units are unknown */
    font-size: calc(var(--cl-w, 6) * 1cqw);
    width: calc(var(--cl-w, 6) * 1cqw);
    line-height: 1;
    text-align: center;
    color: var(--cl-ink);
    pointer-events: auto;
    transition: color var(--duration-fast, .15s) var(--ease-settle, ease);
}
button.cl-scene-w { cursor: pointer; }
/* ink under the pointer and nothing else: the word is painted onto a surface
   in the picture, and a surface in a picture does not move when it is looked at */
button.cl-scene-w:hover { color: var(--cl-accent); }
button.cl-scene-w:focus-visible { outline: var(--cl-ring); outline-offset: 3px; }
/* ⛔ NOT YET TAUGHT = NOT YET LEGIBLE. Soft ink, out of reach and out of the
   accessibility tree — writing on a wall in a language you have not learned.
   It pales by COLOUR alpha, never element opacity, and the blur is measured in
   the painting's own width so it stays the same softness at every size. */
.cl-scene-w--asleep {
    color: rgba(var(--cl-ink-rgb), 0.35);
    filter: blur(2.5px);
    filter: blur(0.16cqw);
    pointer-events: none;
}
/* ⭐ AND THE SAME LAW WHERE THE WORD IS IN THE PAINT. A brushed 駅 on a station
   board cannot be paled by colour — there is no DOM ink to pale — so the veil
   does it from above: the painting's own light, blurred and washed back, over
   that word's zone alone. It lifts when the character's card is met, and it
   never takes a press: the invisible door under it was always the way in. */
/* ⛔ AND ITS EDGE IS SOFT. A hard-edged rectangle of blur over a painting is a
   censor bar; the eye reads it as something removed. Feathered, it is what it
   is meant to be — a patch of the picture the eye cannot focus on yet. */
.cl-scene-veil {
    position: absolute;
    pointer-events: none;
    border-radius: 2px;
    background: rgba(252, 250, 242, 0.28);   /* the room's paper (白練) */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
    transition: backdrop-filter 520ms var(--ease-settle, ease),
                -webkit-backdrop-filter 520ms var(--ease-settle, ease),
                background-color 520ms var(--ease-settle, ease);
}
.cl-scene-veil--lifted {
    background: rgba(252, 250, 242, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
}

/* ⛔ A HOVER MUST NOT MOVE THE HOVERED BOX (components.css:383, pinned by
   tests/css/hover_stability_test.js). A 1px lift vacates a 1px band along the
   button's own bottom edge, the pointer resting there is dropped, :hover falls
   and the button springs back onto it — a strobe. Every hover below is colour,
   border or shadow; none is geometry. */
/* ── the feet: 次へ and its quiet siblings ───────────────────────────────── */
.cl-foot { margin-top: 2.4rem; display: flex; align-items: center; gap: 1.4rem; }
/* ⛔ THE FOOT IS NOT A PLACEHOLDER, IT IS THE SEAT OF THE WAY ON. It used to
   reserve 1px and a different top margin, so every settle swapped 1px + 1.6rem
   for a 46px button + 2.4rem — 58px claimed in one frame at the bottom of a
   page that was already folding. The button is now in the DOM from mount under
   [data-veil]; --held only says the page has not offered it yet. */
.cl-foot--held { justify-content: flex-end; }
/* ⛔ one foot (2026-09-29): the read's Back no longer rests while the page
   is asking (.cl-foot--asking): the foot is fixed on the glass floor and does
   not follow the questions down the leaf, so Back stands, and ← with it. */
/* ⭐ THE PAGE TURN HAS ONE SEAT: the bottom-right corner of the column it
   turns. 次へ is the most-pressed control in the lesson and it wandered —
   under a rack on one screen, under a painting on the next, under a settled
   sentence on a third — so the hand had to go looking for it every time.
   ⛔ A WORK button is not a page turn and keeps the left: 答える commits the
   row above it, the door's greeting answers a sentence, the seam's pair is a
   fork read left to right. What earns this class is a foot whose whole job
   is "and now the next page". */
.cl-foot--turn { justify-content: flex-end; }
/* ⛔ AND THE CLOSE'S TWO DOORS WEAR IT TOO. 読む and 聞く were caption-grey
   text: the one control that turns the day's own proof, dressed as a footnote,
   and nobody knew it was pressable. Same dress as 次へ; same labels. */
/* ⭐⭐ S1: HANDS, NOT FORM BUTTONS. 次へ, 答える and 続ける were filled,
   shadowed, sheet-coloured buttons on a page of printed speech. The house
   draws its pressable verbs as HAIRLINE HANDS (the word page's .wp-verb: a
   1.5px rule at 62% ink, no fill, no shadow), and the lesson adopts that:
   the Japanese in the JP brown, the English quiet beside it, and the hover
   answered in ink alone — the rule to full ink, the words to indigo. The
   corner stays the house --radius (the walk's hands wear it too; the 3px
   print corner is the slip's, and the one slip in this room is the kanji
   sheet). Nothing moves under the pointer.
   ⭐ .cl-look-go, the Tell-me hand of the owner's look experiment (2026-09-23),
   wears this dress exactly and joins every rule here rather than copying one:
   it is a way on, to the telling, and must read as one. It is not a .cl-next
   (that class turns the screen). */
.cl-prev, .cl-look-go, .cl-next, .cl-commit, .cl-rbnext {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    border: 1.5px solid rgba(var(--cl-sh), 0.55);
    background: none;
    color: var(--cl-ink);
    border-radius: var(--radius, 8px);
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    font: inherit;
    box-shadow: none;
    transition: border-color var(--duration-fast, .15s) var(--ease-settle, ease),
                color var(--duration-fast, .15s) var(--ease-settle, ease);
}
.cl-look-go [lang="ja"], .cl-next [lang="ja"], .cl-commit [lang="ja"],
.cl-rbnext [lang="ja"], .cl-prev [lang="ja"] { font-size: var(--k6); color: var(--color-jp-text, #2A231F); }
.cl-look-go i, .cl-next i, .cl-commit i, .cl-rbnext i, .cl-prev i {
    font-style: normal; font-size: var(--e3); color: var(--cl-quiet); letter-spacing: 0.03em;
}
.cl-look-go:hover:not(:disabled), .cl-next:hover:not(:disabled), .cl-commit:hover:not(:disabled),
.cl-rbnext:hover, .cl-prev:hover:not(:disabled) {
    border-color: var(--cl-ink);
    background: none;
    color: var(--cl-accent);
    box-shadow: none;
}
.cl-look-go:hover:not(:disabled) [lang="ja"], .cl-next:hover:not(:disabled) [lang="ja"], .cl-commit:hover:not(:disabled) [lang="ja"],
.cl-rbnext:hover [lang="ja"], .cl-prev:hover:not(:disabled) [lang="ja"],
.cl-look-go:hover:not(:disabled) i, .cl-next:hover:not(:disabled) i, .cl-commit:hover:not(:disabled) i,
.cl-rbnext:hover i, .cl-prev:hover:not(:disabled) i { color: var(--cl-accent); }
.cl-look-go:focus-visible, .cl-next:focus-visible, .cl-commit:focus-visible,
.cl-rbnext:focus-visible, .cl-prev:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* S3: PRESSED. The lesson had no :active anywhere — a press with no receipt
   before the 260ms turn makes a beginner press twice. Ink only: the hairline
   takes the indigo the words already wear on hover. Never a border width,
   never a transform. */
.cl-look-go:active, .cl-next:active, .cl-commit:active:not(:disabled),
.cl-rbnext:active, .cl-prev:active { border-color: var(--cl-accent); }
/* not yet answerable: the hand pales by INK (rule and words), never by
   element opacity — a spent row must not ghost through a fade of the whole box */
.cl-commit:disabled, .cl-look-go:disabled, .cl-next:disabled, .cl-prev:disabled { border-color: rgba(var(--cl-sh), 0.2); cursor: default; }
/* ⛔ and a pale hand under the pointer stays flat: components.css's button:hover
   (0-1-1) raises every button it reaches, and the flat hover above leaves a
   disabled hand out on purpose (it must not take the hover's ink) */
#kotobaLesson .cl-next:disabled:hover,
#kotobaLesson .cl-prev:disabled:hover { box-shadow: none; background: none; }
.cl-commit:disabled [lang="ja"], .cl-look-go:disabled [lang="ja"], .cl-next:disabled [lang="ja"], .cl-prev:disabled [lang="ja"] { color: rgba(42, 35, 31, 0.42); }
.cl-commit:disabled i, .cl-look-go:disabled i, .cl-next:disabled i, .cl-prev:disabled i { color: rgba(105, 98, 90, 0.5); }
/* ⭐ one foot (2026-09-29): a held way on (an ask not yet answered, the close
   while its day is read back) and a Back with nowhere to go wear that pale
   dress IN their seats, and a way on offered takes its ink there: the words
   and the rule change on the ink clock, the box never */
.cl-foot .cl-next, .cl-foot .cl-prev { transition: border-color var(--cl-t-ink) var(--ease-settle, ease); }
.cl-foot .cl-next [lang="ja"], .cl-foot .cl-next i,
.cl-foot .cl-prev [lang="ja"], .cl-foot .cl-prev i { transition: color var(--cl-t-ink) var(--ease-settle, ease); }
.cl-quiet {
    border: 0;
    background: none;
    color: var(--cl-quiet);
    font: inherit;
    font-size: var(--k6);
    cursor: pointer;
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}
.cl-quiet i { font-style: normal; font-size: var(--e3); }
.cl-quiet:hover { color: var(--cl-accent); border-bottom-color: rgba(61, 90, 128, 0.4); }
.cl-quiet:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }

/* ── the teacher's cut ──────────────────────────────────────────────────────
   ⭐ ROUND 2 (CT-1): the AUTHORED prose — a lesson-JSON *_en field the
   teacher wrote — wears Literata; nothing that comes from the COPY table
   does, however it enters. The list is the boundary: a rule joins it only
   when its text is the author's. Never italic; the ink is the page's. */
.cl-synth, .cl-twin-shared, .cl-twin-line, .cl-second-why, .cl-honor,
.cl-frame, .cl-back, .cl-wbeat-line, .cl-ss-line, .cl-aside-frame, .cl-moment,
.cl-tonight, .cl-pano-line,
.cl-kh-second, .cl-life-note, .cl-shapestory /* the teacher's cut */ {
    font-family: var(--cl-font-tell);
    font-style: normal;
}
.cl-synth, .cl-twin-shared, .cl-twin-line, .cl-second-why, .cl-honor,
.cl-frame, .cl-back, .cl-wbeat-line, .cl-ss-line, .cl-moment, .cl-tonight,
.cl-pano-line, .cl-kh-second, .cl-life-note, .cl-shapestory /* the teacher's cut, at its size */ {
    font-size: var(--e2-tell);
    line-height: 1.65;
}
/* ⭐ card layout 2026-09-28 (the owner's answer to PLAN.md §7 question 3): the
   shape's story joins the cut. It is the teacher's own paragraph (story_en),
   and the decided type system had never reached it: it stood in Inter at e2
   beside the Literata of every other authored line. The punch above it stays
   Inter, a claim in the name line's voice (.cl-punch). */
/* gap-5: a swap after mount must not move a reserved seat — the fallback is
   metric-matched to Literata's box, so a line measured in it is the line
   Literata sets (the runner re-measures every held note on fonts.ready too) */
@font-face {
    font-family: 'Literata Fallback';
    src: local('Iowan Old Style'), local('Palatino'), local('Georgia');
    size-adjust: 96%;
    ascent-override: 93%;
    descent-override: 26%;
    line-gap-override: 0%;
}

/* ── 2 / 7 · a page ──────────────────────────────────────────────────────── */
/* every page screen is a leaf of the same diary, so all three open where a
   page opens — the warm-up included. It used to begin a fifth of the way down
   with the screens that ASK, back when it was a bare block of Japanese under
   an instruction; it is yesterday's page now, and a page starts at the top. */
.cl-pagescreen, .cl-warm { padding-top: var(--cl-origin-page); }
/* ⭐ THE DATELINE. The day's name, printed on the paper as a diary prints it:
   weekday, a full-width gap, the weather. The gap does the work the file's 、
   does in the data, so no comma is set. ⛔ ONE RULED LINE, and this is it —
   the page carries no other, ever. */
.cl-dateline {
    display: flex;
    align-items: baseline;
    font-size: var(--k4);
    letter-spacing: 0.05em;
    color: var(--color-jp-text, #2A231F);
    border-bottom: 1px solid var(--cl-rule);
    padding-bottom: 0.6rem;
    /* the seal hangs at the top-right corner: the date never runs under it */
    padding-right: 76px;
    margin: 0 0 1.6rem;
}
.cl-dl-wx { margin-left: 1em; }
/* ⭐ ONE LEAF, NOT A CARD. Square corners and no lift: paper laid on the desk
   is not a panel floating over it. The hairline border stays — on a bright
   display the sheet and the room are two shades apart and the edge is the
   only thing that says where the page ends. Print margins, with a heavier
   foot, the way a printed page is set. */
.cl-page {
    position: relative;
    background: var(--cl-sheet);
    border: 1px solid var(--cl-rule);
    border-radius: 0;
    padding: clamp(2rem, 4vw, 2.75rem) clamp(1.4rem, 3vw, 2.4rem) clamp(2.6rem, 5vw, 3.4rem);
    box-shadow: none;
}
/* the house's ONE texture spend, the walk's own washi recipe (study-walk.css:
   static feTurbulence fibre, never a halftone grid). ⛔ Nothing else joins it:
   no gutter, no binding, no spine shadow — border, dateline rule and grain are
   the whole material story. */
.cl-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}
/* the ink sits ON the fibre, not under it */
.cl-page > .cl-photo,
.cl-page > .cl-dateline,
.cl-page > .cl-page-lines { position: relative; z-index: 1; }
/* ⭐ HANA'S PHOTO OF THE DAY (2026-09-22). One SQUARE frame taped in at the
   head of the leaf, above the date: her phone photo of the one thing she saw
   today. It is the only square plate in the course, every painting being 3:2,
   and like every other it is held by RATIO rather than by the file, so the
   page cannot jump when the lazily-loaded webp lands. Modest on purpose: a
   full-column square would be taller than the writing it heads, and the page
   is the diary, not the picture. */
.cl-photo {
    margin: 0 0 1.5rem;
    width: min(100%, 22em);
    aspect-ratio: 1;
    border: 1px solid var(--cl-rule);
    overflow: hidden;
}
.cl-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* on a short glass the photo steps down so the date and the first lines of the
   page are still in the glass with it */
@media (max-height: 740px) {
    .cl-photo { width: min(100%, 16em); margin-bottom: 1.1rem; }
}
/* ⭐⭐ THE PAGE'S MOMENTS (owner ruling 2026-09-23, design review L2, ruling 8,
   locked: three or four ink moment pictures per page; drawn 2026-09-24, stage
   2, as the owner approved them in the e4 mock's 2b, finalist A in ink at 160
   px). A 160px square floated at the start of the line it draws: its top is
   that line's top, it stands on the paper to the RIGHT of the writing inside
   the leaf's column, 1.5em of paper between it and the words, and it is three
   lines tall (a line is 1.95em: the bottom margin gives back the fraction of a
   pixel by which 160px outstands three lines at 1280, so the fourth line runs
   full width; never more than 2px, so a smaller type step lets a fourth line
   wrap rather than run under the picture). No border, no caption, no ground:
   the webp's paper is the sheet's own cream and its edge is feathered.
   mix-blend-mode: multiply, as ruled; ⚠ .cl-page-lines is its own stacking
   context (z-index: 1, above the grain), so the blend is isolated there and
   the matched cream prints as the sheet. Lifting that isolation would multiply
   cream by cream and draw the square this seat exists not to draw.
   ⛔ OVERRIDES THE LEAF'S BYTE-IDENTICAL RULING (margin notes never move the
   leaf) as far as ONE wrapped line per inset: a line longer than the paper
   beside a picture wraps once (lessons 2 and 3 at 1280), and the leaf grows by
   that line. The margin notes still follow their guests (layoutMargin reads
   the base text), the English door still lays its seats under every line,
   and a leaf with no moments is byte-identical (flow-root has nothing to
   hold). */
.cl-page-lines { display: flow-root; }
.cl-inset {
    float: right;
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 0 max(-2px, calc(3 * 1.95em - 160px)) 1.5em;
    text-indent: 0;
    mix-blend-mode: multiply;
}
.cl-inset img {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--cl-t-ink-long) var(--ease-brush, ease);
}
.cl-inset img.is-in { opacity: 1; }
.cl-line {
    margin: 0;
    font-size: var(--k5);
    line-height: 1.95;
    color: var(--cl-ink);
}
/* (2026-09-23, design review L2, item 24) the two scrolls the page's own
   presses make land clear of the chrome and the glass edge: the 英語 door
   brings the first line up UNDER the sticky corner, not behind it, and the
   doors' arrival brings the foot up with the stage's own air under it (the
   readback's 読む keeps the same 2.6rem). Scroll margins place, never lay out:
   the leaf's geometry is byte-identical with them. */
.cl-page .cl-line { scroll-margin-top: calc(var(--cl-chrome-h, 4.6rem) + 1.2rem); }
/* ⭐ one foot (2026-09-29): the doors that ink at the leaf's tail are brought
   onto the glass ABOVE the fixed foot (the runner's scrollIntoView), never
   under it: the hand's height and its air under the glass floor */
.cl-pagescreen > .cl-doors { scroll-margin-bottom: 8rem; }
/* ⭐ THE READ IN SCENES (owner, 2026-09-25; a lesson layout since 2026-09-26:
   passage.layout "scenes", or the desk flag #read=pages; #read=scroll forces
   the scroll leaf. js: readPaged, pagedPassageHTML, wirePager). The day turns one scene at a
   time on the same leaf: the dateline heads the first scene, each scene's
   moment is drawn LARGE at its head (a square held by ratio, as big as the
   column allows and never taller than half the glass, so the first lines are
   in view with it), Hana's photo is taped in where the day ends, and a folio
   with ‹ and › stands at the leaf's foot. ⛔ Nothing here applies to the
   scroll leaf: every rule hangs off a class only the paged leaf prints. */
.cl-page > .cl-pgs,
.cl-page > .cl-pager { position: relative; z-index: 1; }
.cl-page:has(> .cl-pgs) { scroll-margin-top: calc(var(--cl-chrome-h, 4.6rem) + 0.6rem); }
.cl-pg--in { animation: cl-pg-in var(--cl-t-ink-long) var(--ease-brush, ease) both; }
@keyframes cl-pg-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cl-pg--in { animation: none; } }
/* e6 (2026-09-25): a scene's picture shows as painted, the bible's warm cream
   paper and sepia ink, feathered into the sheet by its file; no multiply and no
   washi lift, which whitened the paper and cooled the ink (the owner's "gloomy") */
.cl-scenepic {
    display: block;
    width: min(100%, 32rem, 50vh);
    max-width: 100%;
    aspect-ratio: 1;
    margin: 0 auto 1.8rem;
}
.cl-scenepic img {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--cl-t-ink-long) var(--ease-brush, ease);
}
.cl-scenepic img.is-in { opacity: 1; }
.cl-pg--kept .cl-photo--kept { width: min(100%, 30rem); margin: 0 auto; }
/* ⭐ ON A DESK GLASS EACH SCENE IS ONE SCREEN. The leaf's pages share one
   height, the glass's own less the chrome, the ask above the leaf, its margins
   and the folio, and the picture takes what the lines leave: large beside
   three lines, smaller beside seven, never under 18rem. Past that (the English
   door open under seven lines) the page grows and scrolls, as the leaf always
   did. A phone keeps the stacked page above and scrolls it. */
@media (min-width: 760px) and (min-height: 600px) {
    /* the paged leaf gives back the scroll leaf's print margins (the folio is
       its foot now), so the picture has the room */
    .cl-page:has(> .cl-pgs) { padding-top: clamp(1.4rem, 2.4vw, 1.9rem); padding-bottom: 1rem; }
    .cl-pg .cl-dateline { margin-bottom: 1.1rem; }
    .cl-page > .cl-pager { margin-top: 0.8rem; padding-top: 0; }
    .cl-pg { display: flex; flex-direction: column; min-height: max(24rem, calc(100svh - 17.5rem)); }
    .cl-pg[hidden] { display: none; }
    .cl-pg > .cl-scenepic { flex: 1 1 0; min-height: 18rem; width: 100%; aspect-ratio: auto; margin: 0 0 1.2rem; }
    .cl-pg > .cl-scenepic img { object-fit: contain; }
    .cl-pg > .cl-page-lines { flex: none; }
    .cl-pg--kept { justify-content: center; }
    .cl-pg--kept .cl-photo--kept { width: min(100%, 30rem, calc(100svh - 24rem)); }
}
.cl-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin: 2.4rem 0 0;
    padding-top: 0.9rem;
}
.cl-pager .cl-pg-prev { grid-column: 1; justify-self: start; font-size: var(--k5); line-height: 1; padding: 0.5rem 0.9rem 0.5rem 0; min-height: 44px; }
.cl-pager .cl-pg-folio {
    grid-column: 2;
    font-size: var(--e3);
    letter-spacing: 0.12em;
    color: var(--cl-quiet);
    font-variant-numeric: tabular-nums;
}
.cl-pager .cl-pg-folio b { font-weight: 500; color: var(--cl-ink); }
.cl-pager .cl-pg-next {
    grid-column: 3;
    justify-self: end;
    min-height: 44px;
    align-items: center;
    color: var(--cl-ink);
    font-size: var(--e2);
    letter-spacing: 0.04em;
}
.cl-quiet[hidden], .cl-pg-prev[hidden], .cl-pg-next[hidden] { display: none; }
/* the day's movements, as the author marked them: a paragraph is a run of
   lines, and its first line takes the 字下げ one-character indent */
.cl-para { margin: 0 0 1.4rem; }
.cl-para:last-child { margin-bottom: 0; }
.cl-para .cl-line:first-child { text-indent: 1em; }
/* ⛔ AND THE 字下げ IS THE JAPANESE SENTENCE'S ALONE. text-indent inherits, so
   the paragraph's opening line handed its indent to the English printed under
   it and to any gloss card hanging over it — one English row out of line with
   every other, and a card that stood wider than its own words. (S6: the
   glossed guest's inline-block — which inherited the same indent as a hole
   before the word, 「五時半まで、　会社」 — is gone with the hung gloss.) */
.cl-line-en, .cl-gloss { text-indent: 0; }
/* S3 (2026-09-06): a token is a door and wears the door grammar (see "doors",
   below) — BARE at rest by law: a leaf of a hundred doors would be wallpaper
   with a rule under each, so there the hover alone says it, in the same
   indigo and solid rule every door in the room answers with. ⛔ The kana
   token's quieter stone hover is RETIRED: one hover ink for every inline door.
   A beginner can ask about かばん as freely as about 学校. */
/* ⭐ S6: A WORD NEVER SPLITS ACROSS LINES. The leaf's tokens ARE the words
   (lineHTML), so the token itself is unbreakable and the break falls between
   words, at the <wbr> the leaf lays — 学生 no longer parts into 学 / 生 on a
   leaf whose own eyebrow says a kanji opens a word and the kana close it.
   keep-all (the S5 block below) already forbade a break inside a CJK run;
   nowrap on the token closes the kana-to-kana seam too. The 字下げ stays as
   ruled: a wrapped tail simply begins at the margin. */
.cl-tk { position: relative; cursor: pointer; white-space: nowrap; }
/* ⭐ 12 November 2026 (the laptop census; lesson 5's 週間, 「夏休みは、三週間です。」): A WORD'S OWN BOX ANSWERS FOR THAT
   WORD. A reading wider than its kanji (しゅう over 週) hangs half a kana over the word before it, and Chrome hit-tests
   a ruby over its reading's whole column, the line's full height: the last quarter of 三 opened 週間, at every size.
   The token is positioned (above), so a press on the kanji is the token's own; the ruby takes no press of its own and
   its reading keeps one, so the kana still open their word and the hanging half answers the box it hangs over.
   Nothing is laid or painted differently: pointer-events moves no glyph and no box. */
.cl-tk ruby { pointer-events: none; }
.cl-tk ruby > rt { pointer-events: auto; }
.cl-tk--plain, .cl-punct { cursor: default; }
/* ⭐⭐ S6: THREE INKS ON THE LEAF (owner call 5). A word this chapter taught
   wears the day's dark orange (--cl-hit since the owner's item 5, 18 October
   2026) — the example sentences' own target dress, one step quieter — so a
   reader's eye finds what the chapter bought; an old word is sumi, unmarked; a
   guest is sumi under its ruby. COLOUR ALONE: Klee One ships 400 and 600, so a
   "500" would render as 400, and a semibold diary word is not a diary word.
   Declared BEFORE the pencil mark: a word the reader opened is theirs (stone)
   whichever chapter taught it.
   ⭐ U-044 (the deep review of 25 October 2026, the owner's go of 26 October): "a word this chapter taught" is a CARD of
   the chapter (js tokToday: its pid among the lesson's cards), never a guest or a kana word its file first met: lesson
   1's floor directory wears three orange numerals on a sumi board, lesson 15's cold exchange 顔, 鼻 and 頭. */
.cl-tk--today { color: var(--cl-hit, #9A4A16); }
/* ⭐ the owner's item 4a (18 October 2026): an example sentence's taught word in the house's "known" (--cl-known). Since
   the graded reader (19 October 2026) every word of the line but glue takes the pointer and the doors' hover (below): a
   word with its card opens it, any other pins its slip; only the taught ones wear the tint. Declared BEFORE the pencil
   mark, as the day's brown is. */
.cl-tk--known { color: var(--cl-known); }
/* the pencil mark: a word this reader opened, faint and unlabelled — an INK
   change (the room's quiet stone), never a rule: a dotted rule now means
   "a door" everywhere, and one mark may not mean two things */
.cl-tk--marked { color: var(--cl-quiet); }
/* ⛔ ABOVE the word: a card hung below covers the line the reader has not
   read yet. The first line has no paper above it, so that one alone hangs
   below (.cl-gloss--below).
   ⛔ AND IT FITS THE GAP IT HANGS IN. Stacked, the card stood two lines tall
   and blanked the line above the word on every single tap — the reader lost a
   line of the page to read one word of it. Reading and English on ONE
   baseline-aligned row: a rare long gloss still wraps, and that one is worth
   the line. */
.cl-gloss {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    /* clamped WITHIN the sheet: the runner measures the card against the
       paper and shifts it by this var, so a word at the right edge never
       centres its English past the root's overflow-x */
    transform: translateX(calc(-50% + var(--cl-gshift, 0px)));
    z-index: 4;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    /* an abspos card shrink-wraps against its TOKEN's width — max-content
       keeps it one line wide, the cap wraps only the genuinely long gloss */
    width: max-content;
    max-width: 26em;
    background: var(--cl-sheet);           /* ROUND 2 (CR-5): the sheet, lifted by its shadow */
    border: 1px solid var(--cl-rule);
    border-radius: var(--radius-sm, 4px);
    padding: 0.3rem 0.6rem;
    box-shadow: 0 1px 2px rgba(var(--cl-sh), 0.04);
    cursor: default;
}
.cl-gloss--below { bottom: auto; top: calc(100% + 6px); }
/* S3: the word's own disc rides the card row — the inline chip, seated on the
   row's centre and let overhang the card's padding so the card stays one
   line tall */
.cl-gloss-oto { align-self: center; margin: -0.3rem 0; flex: none; }
/* S3: a RAIL row's card sits BESIDE the row, like a note in the margin — hung
   above, it covered the column's own title; hung below, the next place. The
   runner's clamp still shifts it back inside the glass on a narrow window. */
.cl-rail .cl-gloss {
    left: calc(100% + 0.7rem);
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(var(--cl-gshift, 0px), -50%);
}
/* ⭐ AND IT NEVER COVERS ITS OWN WORD (the owner's look experiment, 2026-09-23;
   the walk at 1280). Where the margin past the rail is narrower than the gloss,
   the clamp above slid it back over the row and hid 78% of the word it named;
   there the runner hangs it on the row's LEFT instead (sideRailGloss), the same
   0.7rem off the row's edge, over the gutter. */
.cl-rail .cl-gloss--left { left: auto; right: calc(100% + 0.7rem); }
/* ⭐ THE RAIL ROW'S HOVER GLOSS (the owner's look experiment, 2026-09-23:
   "show meaning on hover and on tap take me to that page, nothing more"; the
   S3 card and its nav-C5 page line are gone from the rail). The prose card's
   dress minus the extras: the reading and the meaning, no disc, no kanji.
   It is never a press: the pointer passes through it to the row, so the row
   alone decides when it leaves. */
.cl-gloss--hover { pointer-events: none; }
.cl-gloss-r { font-size: var(--k6); color: var(--cl-ink); line-height: 1.2; white-space: nowrap; }
/* ⭐ AND THE CHARACTERS ARE THE LAST THING ON THE CARD. A guest word's press
   opens the WORD — its sound and its meaning — and only then offers the
   kanji it is written with, each its own door onto its home. They keep the
   .cl-kref dress they wear everywhere else so the learner has one shape to
   learn; here they simply sit at the end of the row rather than inside the
   word. ⛔ Row order is the teaching order: word first, characters after. */
.cl-gloss-ks {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;     /* S3: parted, so two doors read as two doors, not the word again */
    margin-left: 0.15rem;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k6);
    color: var(--color-jp-text, #2A231F);
    line-height: 1.2;
    white-space: nowrap;
}
.cl-gloss-en {
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: var(--e3);
    color: var(--cl-quiet);
    line-height: 1.35;
    /* ⛔ ONE cap, and it is the CARD's. A second cap here, set in the small
       English em, was the tighter of the two and wrapped every gloss the row
       could have held on one line. */
}
.cl-line-en {
    display: none;
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: var(--e3);
    color: var(--cl-quiet);
    line-height: 1.5;
    margin-top: 0.15rem;
}
/* ⭐ S9: THE ENGLISH DOOR OPENS LINE BY LINE — 18ms a line down the leaf
   (--li, the line's own index, set on its <p>), never 29 lines in one frame.
   The geometry is the door's own act (display); only the ink is clocked. */
.cl-page--en .cl-line-en {
    display: block;
    animation: cl-unfold 320ms var(--ease-brush, ease) both;
    animation-delay: calc(var(--li, 0) * 18ms);
}
/* a week ago: the same day in the kana it would have needed */
.cl-page--kana .cl-line { color: var(--cl-ink-past); }
/* ⭐ YESTERDAY'S LEAF. The warm-up is a page from the book already written, so
   its paper has settled a shade and its ink has: the same past ink the kana
   view wears, and nothing else changes — a page you are asked to read is not
   a page held at a distance. */
.cl-page--warm { background: #FEFBF3; }   /* settled a shade from the slip (#FFFFFB), still lighter than the page */
.cl-page--warm .cl-line { color: var(--cl-ink-past); }
/* ⭐ warm-up set cover 2026-09-28: the warm-up is no longer yesterday's leaf
   but a few of its lines (js warmupCover), in the reads' dress
   (.cl-page.cl-page--read wins the paper above: no sheet, no border, no
   grain). Lines that stood together on the page stand together; a gap says a
   line was skipped. No paragraph indent: these are sentences, not a page.
   ⛔ Laid at mount with the lines, so nothing moves under the eye. */
.cl-warm-run { margin: 0 0 1.1rem; }
.cl-warm-run:last-child { margin-bottom: 0; }
/* the parting word's seat is held from mount, so the second press of 次へ
   lands exactly where the first did — a reveal changes ink, never geometry */
.cl-warm-foot { font-size: var(--e3); color: var(--cl-quiet); margin: 1.2rem 0 0; min-height: 1.6em; visibility: hidden; }
.cl-warm-foot--said { visibility: visible; }

/* ⭐ S6: THE TWO MERCIES READ AS A PAIR. The kana door stood alone above the
   leaf, at its right edge, in a dress of its own; it is seated beside the
   English door now (.cl-doors), wearing the same .cl-quiet duet, opened by
   the same answered question. What is left above the leaf is the preface
   line and nothing else (.cl-page-preface). On, the door keeps the accent
   the way an open English door keeps its label: a state, said in ink. */
.cl-weekago [lang="ja"] { letter-spacing: 0.06em; }
.cl-weekago--on { color: var(--cl-accent); border-bottom-color: rgba(61, 90, 128, 0.4); }

/* ── 3 / 5 · a meet card ─────────────────────────────────────────────────── */
/* ⛔ ONE COLUMN, ONE THING TO A PAGE. The wide two-track desk — teaching left,
   hand right — was what a card needed while the whole ceremony stood on one
   paper; it read as a mirror hall, and it kept the meaning small to make the
   halves balance. The meeting is three pages now, so each one takes the same
   measure every other station reads on: the door's column. */
.cl-card { padding-top: var(--cl-origin-page); }
/* ⭐ the ASK page (and the settle it becomes) is a one-thing screen and
   seats at the ask origin like every other one-thing screen — top-anchored
   at 2rem it hugged the ceiling of a tall glass while three quarters of the
   room stood empty (owner #77). The guess and word pages keep the page
   origin: they are pages. Ask -> settle shares the class, so answering
   never moves the paper. */
.cl-card--pa { padding-top: var(--cl-origin-ask); }
.cl-card-head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1.6rem; }
.cl-word {
    font-size: clamp(var(--k3), 6vw, var(--k2));
    line-height: 1.1;
    color: var(--color-jp-text, #2A231F);
    /* ⛔ the word keeps its whole line: the meta beside it now carries a
       framing line as well as the reading, and a shrinkable word broke 気持ち
       across two lines to make room for prose about it */
    flex: none;
    white-space: nowrap;
}
.cl-word-meta { display: flex; flex-direction: column; gap: 0.25rem; }
/* ⭐ ROUND 2 (IMM-7): the reading cut as RUBY over its characters on the word
   page — k6 Klee, centred over each group, the two inks kept; the plain
   reading stays in the tree for the ear and the suites, visually hidden.
   ⛔ declared apart from .cl-guest rt: the crutch dress (0.44em) never
   reaches this head. */
/* ⭐ FIX 2 (the owner's review of lesson 9, 19 October 2026: "furigana is not distributed correctly", 両親's head): the
   head is one span holding ONE <ruby> A GROUP (js wordHeadFullHTML), so each reading belongs to its own kanji in every
   engine; the word and its readings set solid (no letter-spacing reaches a base or a reading, so neither drifts off
   the other's centre) and each reading is centred over its own base, at every head size. */
.cl-word--ruby,
.cl-word--ruby ruby { letter-spacing: 0; }
.cl-word--ruby ruby { ruby-position: over; ruby-align: center; }
.cl-word--ruby rt {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k6);
    line-height: 1.1;
    font-weight: 600;   /* ⭐ U-051 (the deep review of 25 October 2026): Klee One 400 under about 20 px prints at half ink */
    letter-spacing: 0;
    text-align: center;
    ruby-align: center;
}
/* ⭐ (the owner's walk of lesson 14, 11 October 2026: 先生's reading sat as one small cluster centred over the word):
   each kanji carries its own sound where the sheet or the card cuts the word (js wordHeadFullHTML: 先 せん · 生 せい);
   where nothing cuts a run of kanji, its reading spreads across the run, never one cluster over two kanji */
.cl-word--ruby rt.cl-rg--spread { ruby-align: space-around; }
.cl-reading--sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-word-meta--ruby .cl-reading-row { align-items: baseline; }
.cl-reading-row { display: inline-flex; align-items: baseline; gap: 0.5rem; }
.cl-reading { font-size: var(--k6); color: var(--cl-ink); }
/* ── the veil: once the ask begins, the reading's INK goes and its SEAT
   stays (visibility, never display — a reveal changes ink, not geometry).
   A pale rest stroke says something waits here; hover or keyboard focus
   peeks; nothing records the peek. The settle removes the class. */
.cl-reading { position: relative; display: inline-block; }
.cl-card--asking .cl-reading { cursor: default; }
/* ⭐ and the peek is PAPER MOVING: a sheet slides (js: CourseFoley.slide) and
   the ink BLOOMS up over 300ms rather than appearing. visibility is what keeps
   the held reading out of the a11y tree and out of a selection — colour alone
   would leave the answer copyable — so visibility flips at once and the colour
   is what takes the time. The rest stroke fades on the same breath. */
/* ⭐ ONE VEIL, TWO SURFACES: the wake screen holds its two readings under the
   same dress the meet uses, so a returning learner meets a hand they already
   know. There it is a PRESS that peels (.cl-wk--woke), not a hover — the base
   rule keeps matching either way, which is what leaves the 300ms bloom on. */
.cl-card--asking .cl-reading .cl-reading-ink,
.cl-wake .cl-reading .cl-reading-ink {
    visibility: hidden;
    color: transparent;
    transition: color 300ms var(--ease-settle, ease);
}
.cl-card--asking .cl-reading::after,
.cl-wake .cl-reading::after {
    content: '';
    transition: background-color 300ms var(--ease-settle, ease);
    position: absolute;
    left: 0.1em; right: 0.1em; bottom: 0.28em;
    height: 1px;
    background: rgba(105, 98, 90, 0.4);
}
/* ⛔ the ask page's hover reveal is GONE (review board 2026-08-29): it was
   an unfindable mercy and a silent answer key at once. The wake screen keeps
   its peel — there it is a deliberate PRESS. */
.cl-wk--woke .cl-reading .cl-reading-ink { visibility: visible; color: inherit; }
.cl-wk--woke .cl-reading::after { background: transparent; }
.cl-reading:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* ⭐⭐ ONE CHIP, EVERYWHERE A THING SPEAKS. The ♪ was an outlined pill — a
   form control wearing a music note, on a page whose whole material is paper —
   and the listen item's disc, the readback's door and the greeting all spoke
   in different shapes, so nothing on the surface taught the learner what "this
   speaks" looks like. ⭐ S1: IT IS THE APP'S OWN DISC, MINUS ITS GOLD. The
   word page's 音 chip (.wp-oto, the brand seal's clothes since 2026-06-11):
   washi paper, a 1.6px brushed sumi ring, the speaker glyph — 44px beside a
   headword, 34px inline. The lesson's ringless white disc was a shape the
   app never uses. ⛔ No gold dot here: gold in this room appears only on a
   miss that came back and was answered, and the seal's dot stays the word
   page's. ⛔ The speaker glyph, never a 音 character: a first-weeks learner
   has not met it, and it would collide with the mute's own 音 in the corner.
   Ink answers the pointer; nothing moves. */
.cl-chip {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1.6px solid rgba(var(--cl-sh), 0.65);
    border-radius: 50%;
    background: var(--cl-sheet);           /* ROUND 2 (CR-5): the object material, not a fourth cream */
    color: var(--cl-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(var(--cl-sh), 0.06);
    transition: color var(--duration-fast, .15s) var(--ease-settle, ease),
                border-color var(--duration-fast, .15s) var(--ease-settle, ease);
}
.cl-chip-i { width: 1.125rem; height: 1.125rem; display: block; }
.cl-chip-i path { fill: currentColor; }
.cl-chip-i .cl-chip-w {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}
.cl-chip:hover { color: var(--color-jp-text, #2A231F); border-color: var(--color-jp-text, #2A231F); }
.cl-chip:focus-visible { outline: var(--cl-ring); outline-offset: 3px; }
/* ⭐ S9: A RECORD ARRIVES IN THREE INKS — its lines one ink step apart (0 /
   120 / 240ms), the way on 520ms after the last (JS counts row + steps·ink,
   the steps read off the record's own lines: recordSteps, 2026-09-23). The
   seat was laid at mount and veiled; the veil lifts and the lines bloom in
   order. Where the word's own clip clocks the record the clip's three beats
   rule instead and this stands down (the .cl-clip-paced rule below). */
.cl-record.cl-settled > * { --d: 0ms; animation: cl-unfold 320ms var(--ease-brush, ease) both; animation-delay: var(--d); }
.cl-record.cl-settled > * + * { --d: var(--cl-ink-step); }
.cl-record.cl-settled > * + * + * { --d: calc(var(--cl-ink-step) * 2); }
.cl-record.cl-settled .cl-sent--settled > .cl-sent-en {
    animation: cl-unfold 320ms var(--ease-brush, ease) both;
    animation-delay: calc(var(--d, 0ms) + var(--cl-ink-step));
}
/* ⛔ THE STAND-DOWN KEYS ON A PERMANENT MARK, OUTSIDE THE cl-settled-- FAMILY.
   It used to key on .cl-settled--clocked — and clockSettle's undress() takes
   every cl-settled--* class off the host 700ms after 'said' (it must: left
   on, the veil rules blank the record, and a second clocked block under the
   same ancestor inherits its --said). The moment that class left, this
   suppressor lifted and cl-unfold ran FOR THE FIRST TIME over ink that had
   already bloomed: the sentence's English went blank for 240ms and ramped
   back — the blink the owner caught on lesson 7 (t≈2.7s, every clocked item
   type). clockSettle now also stamps .cl-clip-paced, which undress() never
   strips, so a record the clip paced never staggers, before or after. */
.cl-clip-paced .cl-record.cl-settled > *,
.cl-clip-paced .cl-record.cl-settled .cl-sent--settled > .cl-sent-en { animation: none; }
/* silent: ink alpha on ring and glyph, never element opacity */
.cl-chip:disabled { color: rgba(var(--cl-ink-rgb), 0.3); border-color: rgba(var(--cl-sh), 0.22); cursor: default; }
/* the inline size: a sentence's voice, a ledger row's — the word page's own
   34px .wp-eaudio */
.cl-chip--inline, .cl-kw-chip, .cl-sent-oto {
    width: 2.125rem;
    height: 2.125rem;
    border-width: 1.4px;
    border-color: rgba(var(--cl-sh), 0.55);
}
.cl-chip--inline .cl-chip-i, .cl-kw-chip .cl-chip-i { width: 0.875rem; height: 0.875rem; }
/* speaking: the glyph fills warm, and the second wave joins it */
.cl-chip--on { color: var(--color-jp-text, #2A231F); }
.cl-chip .cl-chip-w2 { opacity: 0; transition: opacity var(--duration-fast, .15s) var(--ease-settle, ease); }
.cl-chip--on .cl-chip-w2, .cl-chip:hover .cl-chip-w2 { opacity: 1; }
/* the listen item's chip is the loud one on an otherwise empty sheet */
.cl-disc { width: 3.4rem; height: 3.4rem; }
.cl-disc .cl-chip-i { width: 1.5rem; height: 1.5rem; }
.cl-gloss-line { font-size: var(--e3); color: var(--cl-quiet); }
/* ⛔ .cl-tale / .cl-dry / .cl-promise are GONE with their markup (owner ruling
   2026-09-08, the introduction model): the shape story, the closing sentence and
   the promise are retired seats, and a rule kept for markup nobody prints is a
   dead rule living inside a green gate. */
/* ⭐ v2.2 · THE SET NOTE IS PRINTED ON THE FIRST CARD, NOT ON A SCREEN OF ITS
   OWN. One paragraph saying what the whole set has in common, above the first
   glyph, with a hairline under it: the note hands the set over and then gets
   out of the way, so the RULE is what parts it from the character — never a
   panel, never a paper of its own, and never a second screen to walk through.
   ⛔ E2, NEVER E3. mixed() sets a Japanese run at 1.18em of the line it stands
   in, so at --e3 the Japanese inside this note lands on 0.96u — under the --k6
   floor. E2 is the smallest English step whose Japanese clears the floor; the
   note is quiet in COLOUR, not in size. */
.cl-cards-note {
    margin: 0 0 var(--cl-air-between);
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--cl-rule);
    font-size: var(--e2);
    line-height: 1.75;
    color: var(--cl-quiet);
    max-width: 34em;
}
/* ── kanji first: on a word-carried card the GLYPH leads at brush size and
   the word arrives further down as the synthesis of its halves */
.cl-card-head--k { margin-bottom: 1.2rem; }
.cl-kglyph {
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--k2);
    line-height: 1.05;
    color: var(--color-jp-text, #2A231F);
}
/* ⭐ THE SELF-WRITING GLYPH. The Klee ink holds the seat and every fallback
   lands on it — no stroke file, a reader who asked for less motion, a browser
   that never returns the fetch — so the card's geometry is the same box in
   every one of those worlds. The strokes are laid OVER that seat, never
   instead of it, and the ink hands over by visibility. */
.cl-draw {
    position: relative;
    display: inline-block;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    line-height: 1;
    cursor: default;
    vertical-align: baseline;
}
.cl-draw-ink { display: block; }
.cl-draw--live { cursor: pointer; }
/* ⛔ THE SEAT IS EMPTY WHILE THE HAND IS ON ITS WAY (owner 2026-09-11).
   The printed letter is the FLOOR for a character nobody writes — no
   stroke file, a reader who asked for less motion — never a beat of the
   finished character before the brush starts. --hold is laid in the same
   task as the mount, so no paint can carry it; --live keeps it down once
   the strokes have the seat. */
.cl-draw--hold .cl-draw-ink,
.cl-draw--live .cl-draw-ink { visibility: hidden; }
.cl-draw-svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.02em;
    height: 1.02em;
    transform: translate(-50%, -50%);
    overflow: visible;
}
.cl-draw-svg path {
    fill: none;
    stroke: var(--color-jp-text, #2A231F);
    stroke-width: 5.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* the one interactive glyph on the paper says so the way every other control
   does: the ink under the cursor goes to the accent, and nothing moves */
.cl-draw--live:hover .cl-draw-svg path { stroke: var(--cl-accent); }
/* ⛔⛔ THE WRITING STAYS — and the two hands never share the paper (owner
   2026-09-10: "when a kanji is written it blinks and the kanji sort of reloads …
   before last elevation programme issue did not exist", and they were right to
   the commit: round 2's CR-3, b7c4510d83). CR-3 handed the seat back when the
   writing finished — Klee One 600 revealed by VISIBILITY, one frame, at full
   strength, while the written strokes faded out over the long ink beat. So for
   half a second BOTH letterforms stood on the same seat, and they are not the
   same shape: measured on 手, Klee paints 13% wider, 7% shorter and 18% heavier
   than the KanjiVG skeleton and lays its strokes elsewhere. The pair read as one
   character with twice the strokes, which then resolved — the blink.
   ⛔ A CROSS-FADE IS NOT THE FIX: at its midpoint both forms are equally present
   and what stands on the paper is not a character anybody can read (shot before
   deciding, 2026-09-10). Neither is a cut: the character still changes hand
   under the eye that just watched it being written.
   ⭐ So the seat is never handed over: what the brush wrote is what rests. The
   Klee ink keeps its seat for the glyph nobody wrote — no stroke file, or a
   reader who asked for less motion — which is what --live has always governed.
   --rested now means only "the writing is finished" (a press replays it). */
.cl-draw--rested .cl-draw-svg { pointer-events: none; }
.cl-draw:focus-visible {
    outline: var(--cl-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}
/* less motion asked for: no hand, one calm arrival */
.cl-draw--fade { animation: cl-fade 300ms var(--ease-settle, ease) both; }
@keyframes cl-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── the three pages of a meeting ────────────────────────────────────────── */
/* ⭐ THE CHARACTER PAGE IS THE GLYPH. With the word, the sentence and the hand
   moved off it, the shape can be met at the size a hand actually writes it —
   two and a half times the stacked card's, which is what makes the writing
   read as writing. */
/* ⭐ ROUND 2 (L7): the kind caption is a specimen caption UNDER the glyph, at
   its left edge — not a stray label beside it on its baseline */
/* ⛔ OVERRIDDEN (card layout 2026-09-28, the owner: "okay i like it please
   implement"; PLAN.md §2 and §5 item 2): THE HEAD GRID IS GONE, AND THE PAGE
   OPENS ON ONE BAND. Ruling 1 (2026-09-24) stood the name beside the glyph on
   its baseline in a head grid, the kind caption and the card run's count under
   the glyph, and the picture with the parts row one tier lower, the parts 250
   to 400px from the strokes they name. The band is one grid of three cells on
   the page origin:
     1  the glyph at --k1, the kind caption under it (L7, still)
     2  the name (e1, 500) on top and the parts row under it, beside the
        strokes they name (spatial contiguity, Schroeder and Cenkci 2018)
     3  the picture at --cl-kpic
   and while the look stands its question fills cells 2 and 3, the seat its
   answer lands in. Every cell is laid at mount (js veilTelling), so the band
   is one height in both states. A card with no picture drops cell 3 (--nopic)
   and its name and parts take cells 2 and 3. The count is gone (D8: the spine's
   underline and the rail say where the learner is). */
.cl-kband {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) var(--cl-kpic);
    column-gap: calc(2.2 * var(--cl-u));
    align-items: start;
}
.cl-kband--nopic { grid-template-columns: max-content minmax(0, 1fr); }
.cl-kband > .cl-card-head--k { grid-column: 1; grid-row: 1; display: block; margin: 0; }   /* the caption UNDER the glyph (L7), not beside it */
.cl-kband > .cl-guess { grid-column: 2 / -1; grid-row: 1; }
.cl-kband > .cl-kmeta { grid-column: 2; grid-row: 1; }
.cl-kband > .cl-kpic { grid-column: 3; grid-row: 1; }
/* the question and the name open on one line, 0.9 units down the glyph's box,
   so the answer's first word lands where the question's first word stood */
.cl-kband > .cl-guess,
.cl-kband > .cl-kmeta { padding-top: calc(0.9 * var(--cl-u)); min-width: 0; }
.cl-card--pc .cl-kglyph { font-size: var(--k1); }
/* ⭐ AND THE MEANING IS THE SECOND-LOUDEST THING ON IT, standing BESIDE the
   shape it names rather than three blocks below it: the glyph gets named,
   literally. ⛔ It holds its seat from the first breath and arrives in INK —
   visibility keeps it out of the reading and out of a selection while the
   look is still being taken (a meaning that can be copy-pasted before the
   guess is a guess with its answer printed on it), and nothing on the page
   moves when it lands. A card with no guess never wears --looking, so its
   name is simply there.
   ⛔ card layout 2026-09-28: the seat is the band's middle cell, over the
   parts row, and the hold is the telling's own veil (js veilTelling): the
   held twin (.cl-kname--held / --in) and its colour clock are gone, so one
   element prints the name in both states and on both visits. */
.cl-kname {
    margin: 0;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e1);
    font-weight: 500;                      /* ROUND 2 (CT-6): under the glyph's ink, over the prose */
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--cl-ink);
    max-width: 14em;
    text-wrap: balance;
}
/* the middle cell: the name, then the parts row one step under it, in the
   band's own tighter gap so three parts stand beside a 216px picture (万 円
   曜 金 前 後; no caption past two lines and the tag at 1280x900) */
.cl-kmeta { min-width: 0; }
.cl-kmeta > .cl-glyphs { margin-top: var(--cl-air-in); gap: calc(1.4 * var(--cl-u)); }
/* ⭐ THE KANJI PAGE DECLUTTER (2026-10-03, D1): a kanji that is ONE drawing prints no
   parts row (its own glyph again, smaller, beside the brush size, with a tag) but one
   quiet line in the row's seat, in the dress of the caption it replaces */
.cl-kmeta > .cl-partline { margin: var(--cl-air-in) 0 0; max-width: 30em; font-size: var(--e3); line-height: 1.45; color: var(--cl-quiet); text-wrap: pretty; }
/* ⛔ ITEM 23 (the owner's third look, 2026-09-30; Phase 5, P1): THE KIND
   CAPTION UNDER THE GLYPH IS GONE. It repeated what the parts row's tags
   already say ("meaning + sound" over 禾 MEANING and 厶 SOUND), a marker that
   did not earn its place. The glyph stands alone in the band's first cell; the
   sheet keeps the kind (js kindOf, kindCaption) and the page no longer prints
   it, so .cl-kkind, its step under the glyph and its past ink while the brush
   writes (ruling 13) have no rule left. */
/* ⭐ THE RUNNING HEAD'S DRESS (2026-09-24, design review L2, stage 2, ruling
   5): the workbook's .cl-wb-run, the smallest English step, its one tracking,
   the quiet ink, with Japanese in Klee at the size the house law gives it
   inside an English line. Chrome, not a door (js: tapifyDoors).
   ⛔ card layout 2026-09-28: the card run's count ("言葉 · 3 / 8") that minted
   this dress left the character page (the owner's answer to PLAN.md §7
   question 2); a read's tag still wears it (js renderRead). */
.cl-krun {
    margin: 0;
    font-size: var(--e4);
    letter-spacing: var(--e4-track);
    text-transform: var(--e4-case);
    line-height: 1.4;
    color: var(--cl-quiet);
}
.cl-krun [lang="ja"] { font-family: var(--font-jp, 'Klee One', serif); font-size: 1.18em; letter-spacing: 0.06em; }
/* ⭐ S5: the word page's meaning is the SECOND-LOUDEST thing on its paper — the
   character page's own grammar (the name beside the glyph, on its baseline),
   not a whisper under a heavier gloss. The head aligns on its LAST baseline so
   the gloss sits on the word's baseline with the reading above it; the
   reading is never the smallest Japanese on the page (k5, the sentence's
   size), and it is set in per-kanji GROUPS: this card's slice in ink, the rest
   in past ink, okurigana as itself. */
.cl-card--pw .cl-card-head { align-items: last baseline; margin-bottom: 1.2rem; }
.cl-card--pw .cl-gloss-line { font-size: var(--e1); font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; color: var(--cl-ink); }
.cl-card--pw .cl-word-meta { gap: 0.5rem; }
.cl-card--pw .cl-reading { font-size: var(--k5); }
.cl-reading--grouped .cl-reading-ink { display: inline-flex; gap: 0.45em; }
/* ⭐⭐ THE SECOND ENCOUNTER, MARKED (2026-09-08). 人 you know as ひと; in 人生 it
   says じん. The character stands at the parts row's glyph size on the left and
   the line reads beside it, so the moment is a MOMENT and not one more
   paragraph. Its two inks are the reading row's own — past ink for the sound he
   holds, the brush brown for the one this word wants — and there is nothing
   else: no arrow, no box, no third colour. */
.cl-secondseat {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin: 0;
    max-width: 34em;
}
.cl-ss-k {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k3);
    line-height: 1;
    color: var(--color-jp-text, #2A231F);
}
.cl-ss-line { font-size: var(--e2); line-height: 1.7; color: var(--cl-ink); }
/* this card's slice wears the day's dark orange — the same law the sentence runs
   under (.cl-sent-hit: today's word in --cl-hit, the rest in sumi); sumi against
   past ink at k5 was a difference the screen did not deliver */
.cl-rg--now { color: var(--cl-hit, #9A4A16); }
.cl-rg--past { color: var(--cl-ink-past); }
/* the ask page: the word, the veil, the rack. Nothing else needs a margin
   here — the head is the whole of it until the settle answers. */
/* ⭐⭐ THE ASK PAGE IS ONE BLOCK: the word, and the reading it owes (owner
   2026-08-30). The question is lifted out of the hand and set above the word as
   the page's own eyebrow; the word and its empty seats then stand together with
   nothing between them, so the seats read as the word's reading slot rather
   than as a widget further down the page. The rack keeps a clear gap below —
   that is the tools, not the question. */
.cl-ask--brow { margin: 0 0 0.4rem; }
.cl-card--pa .cl-card-head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 0.9rem;
}
.cl-card--pa .cl-built { margin-bottom: 1rem; }
.cl-card--pa .cl-ask { display: none; }          /* the copy in the hand's seat */
.cl-card--pa .cl-ask--brow { display: block; }
.cl-card--pa .cl-rewrite { margin-top: 2.2rem; }
.cl-card--pa .cl-teach { margin-top: 1.6rem; }
/* ⭐ AND WHEN IT ANSWERS, THE HEAD BECOMES THE RECORD. The meaning joins the
   reading in the meta column and the sentence hangs off that column's own left
   edge — the word is not said a second time, because it is still standing at
   the top of the page where it was asked. */
/* ⭐⭐ THE PAYOFF PAGE (owner 2026-08-30). The answer is a RECEIPT LINE — the
   word, the reading in the seats of the learner's own hand — and under it a
   scene they have not seen, with the sentence it paints. ⛔ Never a word card
   here: the display headword, the reading and the dictionary meaning were all
   printed on the word page two turns back and again on the ask, and handing
   them back a third time is what the learner got for doing the work. */
/* the seat the answer's own words grow into, under the row they are about */
.cl-verdictnote { margin: 0; }
.cl-record-body { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1.6rem; }
.cl-record-body .cl-vig { margin-bottom: 0.4rem; }
/* ⛔⛔ THE MEASURE BELONGS TO THE ENGLISH, NOT THE JAPANESE (polish round,
   2026-09-13). This quote used to carry max-width: 26em — an English reading
   measure (~65 Latin characters) — resolved against the inherited 16px base:
   416px flat on every monitor, while the line inside it is --k4 and GROWS
   with the glass. A bigger monitor fitted FEWER characters (12.1 → 10.2), and
   人生の半分は、大阪です。 (12) broke after 大阪 under a painting that had the
   whole column. The Japanese line now has the column the painting has; the
   translation keeps the measure, in its own seat. */
.cl-record-body .cl-sent--settled { margin-top: 1.1rem; margin-bottom: 0; }
/* ⛔ AND THE TRANSLATION'S MEASURE IS THE PROSE MEASURE (2026-09-23, design
   review L2, item 26): 26em of the e3 English is 359px at 1280, and under a
   715px Japanese line it orphaned "yen." (screen 018). The translation takes
   the column's reading measure, 34 units, the story's own. */
.cl-record-body .cl-sent--settled .cl-sent-en { max-width: calc(34 * var(--cl-u)); }
.cl-record-body .cl-sent--settled [lang="ja"] { font-size: var(--k4); line-height: 1.8; }
/* the reading beside a settled word is part of the record, not a footnote —
   ask and settle share --pa, so the veiled seat never moves between them */
.cl-card--pa .cl-reading { font-size: var(--k5); }
/* ⛔⛔ AND NOW THE ROW IS THE ONLY STATEMENT THERE IS. It used to give up its
   ink after the answer because a settled record above it said the same reading
   a second time, louder. Both of those are gone — the head's veiled slot (the
   '__') and the record page's headline — so on the meet's ask the seats ARE
   the reading, and a reading the learner just earned is not printed at 45%. */
/* ⭐ THE ANSWERED PAGE IS ITS OWN PAGE (owner, 2026-08-30). The record carries
   the learner's own row under the word it was reaching for: their seats in the
   hand's dress, one step quieter than the record above them, and — where the
   row was wrong — retyped RIGHT with what they reached for stepped down under
   it. It is evidence, not a second headline, and it never asks to be pressed. */
/* ⛔ THE EXAMPLE IS A PAGE, NOT AN ASK. It carried --pa so that answering never
   moved the paper — true while the settle happened here. The settle is back on
   the ask's own paper, and --pa's 24vh origin pushed a page carrying a painting
   off the bottom of the glass. */
.cl-card--example { padding-top: var(--cl-origin-page); }
.cl-card--example .cl-aside { margin-top: 2.2rem; }
/* ⭐⭐ AND IN A v2.2 LESSON THE EXAMPLE IS NO PAGE AT ALL (2026-09-24, design
   review L2, stage 2, ELEVATE 1 / ruling 2). OVERRIDES the page above for a
   lesson with a workbook: with no painting to hang, the fourth page was one
   sentence on an empty screen, eight times. The sentence lands on the ask's
   settle, under the record: a seat laid at mount (empty, veiled, sized by
   reserveNote), inked as the settle's last tier (js: settleBuild), its English
   one ink step after its line. It keeps the quote's read size (k5: what is
   READ) and the prose measure for its English; its voice mark rides the line. */
.cl-card--pa .cl-exseat { margin: var(--cl-air-in) 0 0; }
.cl-exseat .cl-sent--settled { margin: 0; }
.cl-exseat .cl-sent--settled .cl-sent-en { max-width: calc(34 * var(--cl-u)); }
.cl-exseat--in > .cl-sent { animation: cl-unfold 320ms var(--ease-brush, ease) both; }
.cl-exseat--in > .cl-sent > .cl-sent-en { animation: cl-unfold 320ms var(--ease-brush, ease) both; animation-delay: var(--cl-ink-step); }

/* ⭐ THE WORD'S OWN SCENE — a crop of the day's master painting, in the one 3:2
   dress every painting in this course wears, at the reading measure and never
   full-bleed: the word arrives somewhere. ⛔ The seat is held by RATIO, so a
   lazily-loaded file lands into a box that was already there and the page
   under the eye never jumps. */
/* ⭐ S1: AT PLATE WIDTH. It hung at 34em (544px at 1680) — narrower than the
   column it stands in, a picture that stopped short of the line the page
   reads on. It is the plate now: the column, whole, hairlined (--cl-plate-w).
   ⛔ THE WORD PAGE KEEPS ITS ONE GLANCE: scene, word, reading, meaning and
   the teach sentence in the glass together. A 720×480 plate leaves them
   there on any glass taller than ~860px; below that the page steps the
   plate down to the 34em vignette in one move. The example page and the
   seam, where the scene IS the page, hold the plate down to ~740px. */
.cl-vig {
    margin: 0 0 1.5rem;
    width: var(--cl-plate-w);
    max-width: 100%;
    aspect-ratio: 1.5;
    border: 1px solid var(--cl-rule);
    overflow: hidden;
}
/* ⛔ ROUND 2 (2026-09-09): THE WORD PAGE'S PLATE STEPS DOWN ON EVERY GLASS.
   The 860px step predates the compound line, the second-encounter seat and
   the life note (the introduction model, 09-08): with those seated, a 720×480
   plate overran a 1080 glass by 22-49px on five of nine word pages and the
   hand was cut at the edge. At 34em the whole page — scene, word, reading,
   meaning, its seats and the teach sentence — is one glance again at 1080
   and at 900; the example page and the seam, where the scene IS the page,
   keep the column plate. A glass over 1140px tall gets the plate back. */
.cl-card--pw .cl-vig { width: min(100%, 34em); }
@media (min-height: 1140px) {
    .cl-card--pw .cl-vig { width: var(--cl-plate-w); }
}
/* M6 (round 2): the phrase beat carries its scene at the column plate — the
   line and where it was said — and steps with the example page */
.cl-beat .cl-vig { width: var(--cl-plate-w); }
@media (max-height: 740px) {
    .cl-card--example .cl-vig, .cl-seam .cl-art, .cl-beat .cl-vig { width: min(100%, 34em); }
}
/* ⛔ the ask page stays bare — the second word's scene rides its own ask at
   the column's width, never as a plate: the ask earns its emptiness */
.cl-card--pa .cl-vig { width: 100%; max-width: 34em; }
.cl-vig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cl-synth { margin: 0 0 1.3rem; font-size: var(--e2); line-height: 1.7; max-width: 34em; }
/* ⭐ ROUND 2 (CR-4): THE WORD PAGE ON THE TWO AIRS. Six near-identical gaps
   read as a list; three tiers now — the word and its compound line, the
   plate, what is said about the word — stepping by --cl-air-in inside a
   tier and opening by --cl-air-between between, the sentence last. */
.cl-card--pw .cl-card-head { margin-bottom: var(--cl-air-in); }
.cl-card--pw .cl-synth { margin: 0 0 var(--cl-air-between); }
.cl-card--pw .cl-vig { margin-bottom: var(--cl-air-in); }   /* the plate belongs with what is said about the word: a step, so the page still fits a 1080 glass */
.cl-card--pw .cl-life-note /* CR-4: the note steps inside its tier */ { margin: var(--cl-air-in) 0 0; }
.cl-card--pw .cl-sent--teach { margin-top: var(--cl-air-between); }
.cl-sent--teach { margin-top: 1.4rem; }
/* the derived credit line and a second word's synthesis, above their rack */
.cl-synth--build { margin: 0 0 0.7rem; }
.cl-credit { margin: 0 0 1rem; font-size: var(--e3); line-height: 1.65; color: var(--cl-quiet); max-width: 34em; }
/* ⭐⭐ THE ASIDE: an encounter, staged. A phrase or a sight word used to be a
   prose paragraph under a full-width rule — a divider announcing a block, and
   the Japanese inside it set at the English size, which is how a page prints a
   footnote. It is an ISLAND: slightly warmer paper, generous air, no border
   and no rule anywhere near it, and the Japanese leading at working size with
   its reading, its meaning and the one line the teacher would say.
   ⛔ IT IS NOT THE SENTENCE QUOTE. A quote wears the left spine and belongs to
   the card's own word; this is a thing MET. Two different objects, two
   different shapes, and neither borrows the other's. */
/* ⭐ THE BEAT: one encounter, alone on the paper. It opens where every read
   page opens, and the island loses the top margin it wore when it sat under
   somebody else's sentence — there is nothing above it any more. */
.cl-beat { padding-top: var(--cl-origin-page); }
.cl-beat .cl-aside { margin-top: 0; }
/* ⭐⭐ ONE WORD, ONE SOUND. 出口 is a word whose sound belongs to the word and
   not to either character, and the whole screen is that sentence said once:
   the word at head size, its reading in the seat every card's reading sits in,
   the meaning under it, and one quiet line of the teacher's own prose. Nothing
   is asked here, so nothing wears an ask's dress — no veil, no rack, no rule.
   ⛔ IT BORROWS THE CARD'S HEAD, NOT A NEW ONE. .cl-card-head / .cl-word /
   .cl-reading-row are the same three elements the word page uses, so the word
   the learner has been meeting all night stands in exactly the place they have
   been reading it — a second geometry for the same object would read as a
   different kind of thing. */
/* S1: the MEASURE is 34em; the section is the column, so the way on keeps
   its one seat at the column's edge (it stood at the 34em edge here) */
.cl-wbeat { padding-top: var(--cl-origin-page); }
.cl-wbeat-eyebrow, .cl-wbeat .cl-card-head, .cl-wbeat-line { max-width: 34em; }
/* the eyebrow speaks the rail's dress: the Japanese quiet and small, the
   English a micro-label under it on the one tracking every micro-label here
   shares. It NAMES the moment; it does not explain it. */
.cl-wbeat-eyebrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    line-height: 1.2;
    margin: 0 0 1.6rem;
}
.cl-wbeat-eyebrow [lang="ja"] {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k6);
    color: var(--cl-quiet);
}
.cl-wbeat-eyebrow i {
    font-style: normal;
    font-size: var(--e4);
    letter-spacing: var(--e4-track);
    text-transform: var(--e4-case);
    color: var(--cl-quiet);
}
/* the word page's own weight for the meaning: this screen is a page, not a
   whisper under an ask */
.cl-wbeat .cl-gloss-line { font-size: var(--e2); color: var(--cl-ink); }
.cl-wbeat .cl-word-meta { gap: 0.5rem; }
/* the one line the teacher would actually say — the room's prose measure, and
   the Japanese inside it keeps its face through mixed()'s own ink law */
.cl-wbeat-line {
    margin: 1.6rem 0 0;
    font-size: var(--e2);
    line-height: 1.7;
    color: var(--cl-ink);
    max-width: 32em;
}
/* ⭐ THE SPOKEN MOMENT IS PRINT, NOT A CARD. The beat is the story's own
   voice — the most diary moment in the walk — and it was the one block still
   wearing a rounded tinted app card. It stands now as printed speech on the
   page's paper, on the same left quote-rule every spoken sentence in this
   room already wears, one step larger. */
.cl-aside {
    margin: 2rem 0 0;
    padding: 0.3rem 0 0.3rem clamp(1.2rem, 2.6vw, 1.7rem);
    border-left: 2px solid var(--cl-rule);
    /* the measure in the LESSON's unit, not the browser's: at `34em` this
       block inherited the 16px base (544px flat) while its head is --k4 and
       grows with the glass — the same inversion the payoff sentence had
       (a bigger monitor, fewer characters). 34u keeps the English measure
       and lets the head fit the same count of glyphs on every screen. */
    max-width: calc(34 * var(--cl-u));
}
/* ⛔ THE READING SITS UNDER THE HEADLINE, NOT BESIDE IT. Beside it, a phrase
   long enough to wrap (雨だから、気をつけて。) ran its second line straight into
   the reading's column and the two collided. One rule for long and short
   alike: the word takes the whole measure and its reading hangs under it, so
   nothing depends on how many characters the encounter happens to have. The
   chip keeps its seat with them and spans both lines. */
.cl-aside-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.25rem;
    margin: 0;
}
.cl-aside-head .cl-aside-jp { grid-column: 1; grid-row: 1; }
.cl-aside-head .cl-aside-r  { grid-column: 1; grid-row: 2; }
.cl-aside-head .cl-chip { grid-column: 2; grid-row: 1 / span 2; }
.cl-aside-jp {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
    line-height: 1.35;
    color: var(--cl-ink);
}
.cl-aside-r {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k6);
    color: var(--cl-quiet);
}
/* ⭐ JP LEADS THE INK. The English meaning under a spoken line is a
   TRANSLATION, and a translation reads in the warm secondary: near-black
   Inter above warm Klee made every beat an English page with Japanese
   decoration. An English ASK (the set's cue) keeps the primary ink: a
   question is not a translation. */
.cl-aside-gloss {
    margin: 0.55rem 0 0;
    font-size: var(--e1);
    line-height: 1.35;
    color: var(--cl-ink-past);
}
.cl-aside-note {
    margin: 0.85rem 0 0;
    font-size: var(--e2);
    line-height: 1.7;
    color: var(--cl-quiet);
}
.cl-aside-frame {
    margin: 0 0 0.55rem;
    font-size: var(--e3);
    color: var(--cl-quiet);
}
/* a printed sentence's visible voice: the same disc, at the inline size */
.cl-sent-oto {
    margin-left: 0.6rem;
    vertical-align: middle;
}
.cl-sent-oto .cl-chip-i { width: 0.875rem; height: 0.875rem; }
/* ⭐ inside a printed sentence the voice is PUNCTUATION, not a second button:
   the round chip beside the headword stays the page's one instrument, and the
   sentence's mark is bare ink riding the end of its own line. (The night
   phrase keeps the disc — there the phrase IS the page.) The seam's line is a
   printed sentence too, and since its voice rides the line (2026-09-23, design
   review L2, item 18's walk) it wears this dress, not the 34px disc that stood
   alone under it. */
/* ⚖ 20 October 2026 (the owner's review of lesson 9, item 2: "when we move to an example sentence, all text below
   row 1 jumps up"): THE EAR'S BOX IS ITS OWN, the glyph's size and contained. It was sized by its SVG (auto), an
   atomic inline in its sentence's last line, and its second wave turns on by opacity (playing, and under the pointer),
   which Chrome lays out again: the chip asked its line for a new layout, the pass that dropped the room a reading over
   the first line had (THE FIRST LINE HOLDS ITS READING'S ROOM, at the example page's rules: the root of the jump).
   Fixed at the glyph's size and contained (size, layout), nothing inside it asks its line for layout again. */
.cl-sent .cl-sent-oto,
.cl-seam-line .cl-sent-oto {
    contain: size layout;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: 0.5em;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--cl-quiet);
}
.cl-sent .cl-sent-oto:hover,
.cl-seam-line .cl-sent-oto:hover { background: none; box-shadow: none; color: var(--color-jp-text, #2A231F); }
/* ⭐ the graded reader (19 October 2026): the chip is the sentence's one sound control, in the tab order, its ring the
   house's, hugging the bare glyph */
.cl-sent .cl-sent-oto:focus-visible,
.cl-seam-line .cl-sent-oto:focus-visible { outline: var(--cl-ring); outline-offset: 2px; border-radius: 3px; }
.cl-sent .cl-sent-oto .cl-chip-i,
.cl-seam-line .cl-sent-oto .cl-chip-i { width: 1.05rem; height: 1.05rem; }
/* ⛔ AND IT HANGS, SO IT NEVER TAKES A LINE OF ITS OWN (2026-09-23, design
   review L2, item 18's walk). The word joiner glues the mark to the line in
   the text, but an atomic inline still broke: where the sentence filled the
   column (screen 018, そば700円、ヨガ1,500円、カメラ38,000円。) the mark fell to
   a row of its own under the Japanese, the shelf the rule above forbids. The
   mark now takes no room in the line: a right margin as wide as its own
   margin and glyph gives it a net advance of zero, so it always fits where the
   line ends and hangs past the last glyph, the way a closing stop hangs past
   the measure in a set Japanese line (burasage). It is the last ink of its
   line, so nothing stands where it hangs. */
.cl-sent .cl-sent-oto,
.cl-seam-line .cl-sent-oto { margin-right: calc(-0.5em - 1.05rem); }
/* the night paper shows one phrase and nothing else, so its aside is the page */
.cl-night .cl-aside { margin-top: 0; }
.cl-glyphs {
    list-style: none;
    display: flex;
    gap: clamp(1.5rem, 4vw, 2.8rem);
    margin: 1.6rem 0 0;
    padding: 0;
}
.cl-glyph { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
/* ⛔ BOTH STATES ARE INK, AND COLOUR IS WHAT SAYS "TODAY'S". At 72% stone the
   twins read as dust on the page rather than as characters the learner is
   being asked to tell apart — and telling them apart is the whole lesson. The
   resting twin is sumi; the one this card teaches wears the brush's own brown.
   The distinction survives; the dust does not. */
.cl-glyph-g {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k3);
    line-height: 1;
    color: var(--cl-ink);
}
.cl-glyph--now .cl-glyph-g { color: var(--color-jp-text, #2A231F); }
.cl-glyph-w { font-size: var(--e4); letter-spacing: var(--e4-track); text-transform: var(--e4-case); color: var(--cl-quiet); }
/* the parts of the character being taught are all of them today's, so they all
   wear the brush ink; and what stands under a part is its NAME, not a
   micro-label, so it is set as a name — untracked, at reading-note size */
.cl-glyphs--parts .cl-glyph-g { color: var(--color-jp-text, #2A231F); }
/* ⭐ A WORN PIECE (owner note 9, 2026-09-08): the shape it WAS, in the past ink
   the reading seat uses for the sound you knew; the caption says what it became */
.cl-glyphs--parts .cl-glyph--worn .cl-glyph-g { color: var(--cl-ink-past); }
/* ROUND 2 (CR-4): the parts row takes the twins row's dress — captions never set the glyph spacing */
.cl-glyphs--parts { align-items: flex-start; gap: clamp(1.5rem, 3vw, 2.4rem); }
.cl-glyphs--parts .cl-glyph { max-width: 12em; }
.cl-glyphs--parts .cl-glyph-w { font-size: var(--e3); letter-spacing: 0; text-transform: none; text-align: center; text-wrap: balance; max-width: 12em; }
/* ⭐ ONE CAPTION PER PART still: the part's ROLE is a second line inside the
   part's own caption, not a second caption beside it.
   ⛔ A TAG, NOT A CLAUSE (2026-09-23, design review L2, item 15): on every card
   now, one word (MEANING / SOUND / PICTURE, the sound table's clause folded
   into SOUND) in the house's tag dress, so the row keeps one height and one
   voice from card to card.
   ⭐ THE DECLUTTER (2026-10-03, D3): the same dress, the role in plain words
   (FOR ITS MEANING / FOR ITS SOUND / PART OF THE PICTURE), so no legend. */
.cl-glyph-role {
    display: block;
    margin-top: 0.3rem;
    font-style: normal;
    font-size: var(--e4);
    letter-spacing: var(--e4-track);
    text-transform: var(--e4-case);
    color: var(--cl-quiet);
}
/* ⭐ THE DECLUTTER'S FOLLOW-UP (2026-10-03): on a pair (two parts, a sound tag, no picture tag;
   js partsHTML) each tag holds one line. A flex item never shrinks below its min-content, which
   the unbroken tag now sets, so the part that wears it keeps its width and the neighbour's
   caption takes the wrap (思's 田, 持's 寺). A row of three keeps the wrap: its tags do not fit
   side by side in the band's middle cell */
.cl-glyphs--pair .cl-glyph-role { white-space: nowrap; }
/* ⚖ OVERRIDDEN IN PART (the owner, 20 October 2026: the parts row by meaning and role, "the same everywhere"): the tag is
   the app's chip, kanji and plain tracked caps (意 MEANING · 音 SOUND · 形 FORM · 古 WORN, js roleTagHTML) in the same
   quiet micro-label dress, its kanji untracked; on a one-drawing kanji's line it follows the caption on the line.
   css/course-book.css .cb-tell-part-r is the same dress */
.cl-glyph-role [lang="ja"] { letter-spacing: 0; }
.cl-partline .cl-glyph-role { display: inline; margin: 0 0 0 0.35em; white-space: nowrap; }
/* ⭐ v2.2 · THE CHARACTER'S PICTURE STANDS BESIDE THE PARTS, NOT OVER THEM.
   The kanji plates are drawn square, so this is the second square in a book
   where every painting hangs at 3:2 (.cl-vig) — and like every other plate it
   is held by RATIO, so the page cannot jump when the lazily-loaded webp lands.
   ⛔ IT NEVER TAKES THE COLUMN. The parts row is what the character page
   teaches on, and a full-column square pushes that row under the fold on a
   laptop. A card with no picture prints no plate.
   ⛔ OVERRIDDEN IN PART (card layout 2026-09-28, PLAN.md §2 and §5 items 2 and
   7): THE PICTURE IS THE BAND'S THIRD CELL, at the right, beside the name and
   its parts (.cl-kband). The picture row (.cl-kpicrow: the plate at the left,
   the parts centred on its axis, the lone plate stepped up to 20 units and
   centred) is gone with its markup: in the band a card with no parts prints
   its name alone beside the picture, and a card with no picture drops the cell.
   ⭐ AND THE SEAT STEPS DOWN ON A SHORT GLASS: --cl-kpic, thirteen units or 24%
   of the window's height where that is smaller (216px at 1280x900, 247 at
   1680x1050, 192 at 1280x800), so a short window keeps the page on one screen
   without changing the unit for every station. */
.cl-kpic {
    flex: 0 0 var(--cl-kpic);
    width: var(--cl-kpic);
    max-width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--cl-rule);
    overflow: hidden;
}
.cl-kpic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ⭐ INK ON THE PAGE, NOT A PLATE, WHERE THE GATE SAYS BARE PAPER (2026-09-24,
   design review L2, stage 2, ruling 7 and ELEVATE 3; the stage 2 walk).
   OVERRIDES "the second square in a book where every painting hangs at 3:2
   ... like every other plate" above, for a picture whose look gate says
   bare_paper (js: kpicHTML, the card's picture_bare): the hairline turned the
   story's object into a pasted thumbnail beside a glyph and a parts row that
   are ink on the same paper (S5: no box). Every other picture keeps the plate
   and its hairline until it is re-rolled onto bare paper: dressed as ink, a
   scene's own ground printed as a soft pale square on the cream.
   The dress, in three steps, each walked at 1280x900:
   1. the washi is LIFTED to white (index.html's #cl-washi, a per-channel
      gain of 255 over the painted washi, about 235 225 206, the white balance
      the moments lane bakes into its files), because a multiply of the washi
      itself printed a tan square 16 to 40 points under the page
      (227,216,194 against 243,240,234: the walk);
   2. the drawing is MULTIPLIED onto the paper, so white is the page and the
      ink is ink;
   3. it is FEATHERED to nothing at every edge, 12% of the side, the two ramps
      multiplied so the corners round off. The first cut's radial mask
      (ellipse 82% at #000 60%) left the side edges at 97% and only the corners
      faded.
   ⛔ The seat's ground is the paper, not the plates' 4% loading tint: the told
   tier arrives on an opacity animation, which makes the picture row its own
   compositing group, so the drawing multiplied against the seat's tint and
   never reached the paper. What the plate law was FOR stays: the seat is held
   by ratio at thirteen units (--cl-kpic since card layout 2026-09-28), so
   nothing jumps when the webp lands. */
.cl-kpic.cl-kpic--ink { border: 0; background: var(--cl-paper); }
.cl-kpic.cl-kpic--ink img {
    filter: url(#cl-washi);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                        linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-composite: intersect;
}
/* ⛔ ONE STEP DOWN, BY WIDTH, the way every plate in this sheet steps by
   height: at phone width the picture is 60% of the column and centred, with
   the parts under it — which is what says "this illustrates what follows".
   ⭐ card layout 2026-09-28: and the band stacks there (the phone keeps its
   own column, not the desk's three cells): the glyph and its caption, the
   question and then the name with its parts in one seat, the picture under
   them; the old form leaves the lane the story no longer leaves free. */
@media (max-width: 768px) {
    .cl-kpic { flex-basis: 60%; width: 60%; margin-left: auto; margin-right: auto; }
    .cl-kband, .cl-kband--nopic { grid-template-columns: minmax(0, 1fr); row-gap: var(--cl-air-in); }
    .cl-kband > .cl-guess, .cl-kband > .cl-kmeta { grid-column: 1; grid-row: 2; }
    .cl-kband > .cl-kpic { grid-column: 1; grid-row: 3; }
}
/* ── 似 the pair: the twin seat (S4, 2026-09-06) ───────────────────────── */
/* Two shapes side by side at specimen size: this character LEFT in the brush's
   own brown (the parts row's --now grammar), the twin RIGHT in sumi and a door;
   under each its short name, and under the name the differing part as a small
   mark with its plain name. One shared clause in the quiet ink; on the sheet,
   two per-side lines, each opening with its glyph in that glyph's ink. No left
   rule, no quote dress, no pills inside the lines: the glyphs are the doors.
   The same block seats the card's told section, the sheet's foot and every
   miss on the pair (in the note seat, where the twin keeps the wrong tile's
   wash). A meaning runs longer than a part's name, so a caption wraps into
   its column instead of stretching the row. */
.cl-twin { margin: 1.9rem 0 0; }
.cl-twin .cl-glyphs { margin: 0; gap: clamp(1.6rem, 4vw, 2.6rem); align-items: flex-start; }
.cl-twin .cl-glyph { min-width: 6.5em; gap: 0.3rem; }
.cl-glyphs--twins .cl-glyph-w {
    font-size: var(--e3);
    letter-spacing: 0;
    text-transform: none;
    max-width: 9em;
    text-align: center;
    text-wrap: balance;
}
/* the part's name is a CAPTION like the parts row's, never a micro-label:
   "儿 legs" in sentence case, one step quieter than the name above it */
.cl-glyph-p {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35em;
    max-width: 12em;
    font-size: var(--e4);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
    color: var(--cl-quiet);
    text-align: center;
    text-wrap: balance;
}
.cl-glyph-p [lang="ja"] {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k6);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-jp-text, #2A231F);
}
/* the twin rests in sumi — the one glyph on the seat that is not this page's —
   and, being a door, answers the pointer in the one hover ink */
.cl-glyph--twin .cl-glyph-g { color: var(--cl-ink); }
.cl-glyph--twin .cl-kref:hover { color: var(--cl-accent); }
/* the shape the learner wrote keeps the wrong tile's wash — on the SEAT, so the
   door inside it stays bare ink and the row's geometry does not move */
.cl-glyph--picked {
    background: rgba(216, 210, 200, 0.34);
    border-radius: 6px;
    padding: 0.35rem 0.55rem 0.4rem;
    margin: -0.35rem -0.55rem -0.4rem;
}
.cl-glyph--picked .cl-glyph-g { color: var(--cl-quiet); }
.cl-glyph--picked .cl-kref:hover { color: var(--cl-accent); }
.cl-twin-shared { margin: 1rem 0 0; font-size: var(--e2); line-height: 1.65; color: var(--cl-quiet); max-width: 34em; }
.cl-twin-line { margin: 0.6rem 0 0; font-size: var(--e2); line-height: 1.65; color: var(--cl-ink); max-width: 34em; }
.cl-twin-lg {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k5);
    line-height: 1;
    color: var(--cl-ink);
    margin-right: 0.35em;
}
.cl-twin-lg--now { color: var(--color-jp-text, #2A231F); }
.cl-verdictnote .cl-twin { margin-top: 0; }

/* ── the look before the telling ─────────────────────────────────────────── */
/* ⛔ WHAT IS BEING LOOKED AT IS ALL THAT IS IN INK ON THE PAPER. On the
   character page the telling — the meaning, the parts, the picture, the story,
   the way on — waits, and it arrives the moment the look is answered. A card
   with no guess authored never wears --looking, and its page is open at once.
   ⛔ OVERRIDDEN (card layout 2026-09-28, PLAN.md §3 and §5 item 1): THE
   TELLING WAITS VEILED IN ITS SEATS, NEVER FOLDED. It waited inside .cl-told
   under display: none and opened on Tell me, and the page grew from 900 to
   1,157px under the eye; it is laid at mount now, every block at its true
   height under [data-veil] (js veilTelling: the sheet's own law, laid out
   above), so the press moves nothing. */
/* ⭐ S9: THE TOLD BODY ARRIVES IN TIERS, not as one 520ms fade, one ink step
   apart in the order they are read, and the way on last. Every seat is laid
   before the ink; only ink arrives on the clock.
   ⭐ card layout 2026-09-28 (PLAN.md §5 items 1 and 6; the Addendum): the
   tiers are the band's and the lead's (js TELL_TIERS: the name and the parts
   0, the picture 1 on the long ink, the punch 2, the story 3, the hook and the
   old form 4), and they begin at --cl-t-fade, once the question has
   dissolved, never over it. A card walked back to deals no tiers: it opens
   told, in the page's own arrival. */
.cl-card--told .cl-tier {
    animation: cl-unfold var(--cl-t-ink) var(--ease-brush, ease) both;
    animation-delay: calc(var(--cl-t-fade) + var(--cl-tier, 0) * var(--cl-ink-step));
}
.cl-card--told .cl-kpic.cl-tier { animation-duration: var(--cl-t-ink-long); }
/* ⛔ AN ARRIVING TIER TAKES NO PRESS (PLAN.md §5 item 6): a tier at opacity 0
   still took a click, so a door inside a telling nobody could see yet could
   open under a press; until the way on is offered the telling is glass */
.cl-card--arriving .cl-tier { pointer-events: none; }
/* ⭐⭐ card layout 2026-09-28 (PLAN.md §5 item 4; the owner's answer to §7
   question 1: the corner): ONE SEAT FOR THE HAND. Page (a)'s foot is Back at
   the column's left and, at its right, the corner seat: Tell me and Next in ONE
   grid cell, so they share one x, one height and one box, as wide as the wider
   face. Tell me stands first; on the press it dissolves in the seat while Next
   inks in over it (the Addendum: one seat never swaps its face without a fade).
   The seat is the ask's own: y 809 at 1280x900 on pages (a) and (c) and the
   settle, the word page keeping its tether at the same x. */
.cl-corner { display: grid; justify-items: stretch; align-items: center; }
.cl-corner > * { grid-area: 1 / 1; justify-content: center; }
/* ⭐ NEXT INKS IN OVER TELL ME, AND IS NOT YET A PRESS (PLAN.md §3, the inert
   window; §5 item 6). From --cl-t-fade it arrives in the corner in the house's
   disabled dress (the pale ink an unfinished row's 答える wears: the rule and
   the words, never element opacity), and takes no pointer until the last tier
   plus --cl-t-ink-long; the runner answers a key (wireTurn) and seats the hand
   then. Its words take their full ink on the ink clock. */
.cl-card--arriving .cl-corner > .cl-next {
    animation: cl-unfold var(--cl-t-ink) var(--ease-brush, ease) both;
    animation-delay: var(--cl-t-fade);
}
.cl-next.cl-next--inert { border-color: rgba(var(--cl-sh), 0.2); cursor: default; pointer-events: none; }
.cl-next.cl-next--inert [lang="ja"] { color: rgba(42, 35, 31, 0.42); }
.cl-next.cl-next--inert i { color: rgba(105, 98, 90, 0.5); }
.cl-corner > .cl-next [lang="ja"], .cl-corner > .cl-next i { transition: color var(--cl-t-ink) var(--ease-settle, ease); }
/* ⭐ PAGE (a) FLOORS LIKE AN ASK (PLAN.md §5 item 4). The page is a column on
   the sheet floor (min-height: the glass, the seat rule above). ⛔ one foot
   (2026-09-29): its foot is no longer sticky in its flow; it is the one foot,
   fixed on the glass floor like every screen's (the rule above), at the same
   box it stood in (y 809 at 1280x900). The page keeps the hand's own height as
   paper at its end, where the sticky foot stood, so the lead keeps the least
   air between the reading and the hand: 2.4% of the window's height, never
   under 1rem nor over the seat's own 2.4rem (the recommended layout's foot
   air, the one the 43-card fit was measured with: 22px at 1280x900, 19 at
   1280x800), and a page that runs past the glass (four cards of 43 at
   1280x800) scrolls its paper above the hand, never under it. */
.cl-stage > section.cl-card--pc:not(.cl-door):not(.cl-pano):not(.cl-close):not(.cl-night):not(.cl-fail) {
    display: flex;
    flex-direction: column;
    /* the hand's own height at its end: the room keeps it now (batch D1 s2) */
    padding-bottom: 0;
}
.cl-stage > section.cl-card--pc:not(.cl-door):not(.cl-pano):not(.cl-close):not(.cl-night):not(.cl-fail) > .cl-told { margin-bottom: clamp(1rem, 2.4vh, 2.4rem); }
/* ── S5 · TIER THREE, THE TELLING: the story where the card has one, each
   block a step apart. Only the page's two airs exist on it.
   ⭐ card layout 2026-09-28: the lead under the band — the punch ONE STEP
   under it (--cl-air-in: it is the band's caption), the story hanging under
   the punch, the hook last; the parts row went up into the band. */
.cl-told { margin-top: var(--cl-air-in); }
.cl-told > :first-child { margin-top: 0; }
/* ⭐ card layout 2026-09-28 (PLAN.md §5 item 11): THE OLD FORM IN THE LANE.
   The story keeps a 34-unit measure in a 45-unit column; the idle lane right
   of it takes the old printed form as a small specimen, level with the hook,
   where it adds no height, so 万 and 円 stay inside the screen. Three cards of
   43 carry one (萬, 圓, 來). */
.cl-card--pc .cl-told { position: relative; }
.cl-card--pc .cl-told > .cl-oldform { position: absolute; right: 0; bottom: 0; margin: 0; text-align: center; }
/* a phone's story takes the whole column, so there is no lane: the specimen
   stands under the hook, at the lead's left edge, as it did before */
@media (max-width: 768px) {
    .cl-card--pc .cl-told > .cl-oldform { position: static; margin: var(--cl-air-in) 0 0; text-align: left; }
}
/* ⭐ v2 · THE SHAPE'S STORY AND HOW SOLID IT IS. The teacher's paragraph is
   the told body's own prose — reading size, ink, the one measure every English
   block on this page keeps — and the honesty note under it is the same voice
   one step back: a small heading in the quiet ink, the note at caption size in
   past ink. ⛔ No paper, no rule, no box: it is the end of the same thought,
   not a panel beside it (S5's two airs are the only spacing here). */
/* ⭐ v2 · THE PUNCH LINE sits one line above the story, inside the same block,
   with the story hanging under it so the two still read as one thought.
   ⭐ THE OWNER'S LOOK EXPERIMENT (2026-09-23): at the story's own size and ink it
   read as the story's first sentence, so it is dressed as a CLAIM now, in the
   name line's voice: the UI face, one step up (e1), 500. The sans lines (the
   name, the punch) are the card's claims; the serif (the teacher's cut) is the
   telling. ⛔ Highlighted by type alone: no box, no rule, no colour wash (S5: no
   paper, no panel).
   ⛔ AND IT KEEPS THE STORY'S MEASURE, not its own: 34em at e1 is half as wide
   again as the story's 34em at e2, and the claim ran ~165px past the column it
   heads (the walk at 1280). 34 of the story's em, so the two stand as one block. */
.cl-punch {
    margin: var(--cl-air-in) 0 0;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e1);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--cl-ink);
    max-width: calc(34 * var(--e2));
}
.cl-punch + .cl-shapestory { margin-top: 0.5rem; }
/* ⭐ card layout 2026-09-28 (the owner's answer to PLAN.md §7 question 3; §5
   item 9): THE STORY IS IN LITERATA, the face the type system gives the
   telling (it is the teacher's own paragraph: it joins the teacher's cut, at
   --e2-tell and 1.65), and it keeps the PUNCH'S RIGHT EDGE: 34 of the e2
   unit, 578px at 1280, whatever its own size. */
.cl-shapestory {
    margin: var(--cl-air-in) 0 0;
    color: var(--cl-ink);
    max-width: calc(34 * var(--e2));
}
/* ⭐ THE RECIPE'S PAGE (the owner's ruling of 15 October 2026; js markedMixed, recipeBeatsHTML): where the runner prints a
   recipe card's story itself, its <b> at 600 and its <i> in italics, and the beats behind `続き More`, closed (the micro-
   label's dress: tracked caps, the kanji in the chrome's face), each beat its head in the UI face and its text in the
   story's; the book's aside dresses the same page in css/course-book.css. */
.cl-shapestory b, .cl-beat-text b, .cl-beat-head b { font-weight: 600; }
.cl-shapestory i, .cl-beat-text i { font-style: italic; }
.cl-more { margin: 0.6rem 0 0; max-width: calc(34 * var(--e2)); }
.cl-more-press {
    display: inline-flex;
    align-items: baseline;
    padding: 0.15rem 0;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e4);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--e4-track);
    text-transform: var(--e4-case);
    color: var(--cl-quiet);
    transition: color 160ms ease;
}
.cl-more-press::-webkit-details-marker { display: none; }
.cl-more-press::marker { content: ''; }
.cl-more-press [lang="ja"] { margin-right: 0.45em; font-family: 'Noto Sans JP', var(--font-ui, 'Inter', sans-serif); font-size: var(--e2); font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--color-jp-text, #2A231F); }
.cl-more-press i { display: inline-block; margin-left: 0.4em; font-style: normal; letter-spacing: 0; transition: transform 160ms ease; }
.cl-more-press:hover, .cl-more[open] > .cl-more-press { color: var(--cl-accent); }
.cl-more[open] > .cl-more-press i { transform: rotate(90deg); }
.cl-beats { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.55rem; }
.cl-beat-head { margin: 0 0 0.25rem; font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-size: var(--e3); font-weight: 600; line-height: 1.35; color: var(--cl-ink); }
.cl-beat-text { margin: 0; font-family: var(--cl-font-tell); font-size: var(--e2-tell); line-height: 1.65; color: var(--cl-ink); }
@media (prefers-reduced-motion: reduce) { .cl-more-press i { transition: none; } }
/* ⭐ v2.2 · THE HOOK IS THE LAST LINE ON THE CHARACTER PAGE — the one sentence
   that hands the shape back as something to hold. A THIN RULE, not a size, is
   what says "and finally": the punch and the story are one thought, and the
   hook is the page closing after it.
   ⛔ E2, NEVER E3, for the reason .cl-cards-note gives: a Japanese run set by
   mixed() rides 1.18em of its line, and at --e3 that falls under the --k6
   floor. The hook is quiet in colour and in the hairline, never in size. */
.cl-hook {
    margin: var(--cl-air-in) 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--cl-rule);
    font-size: var(--e2);
    line-height: 1.75;
    color: var(--cl-quiet);
    max-width: 34em;
}
/* ⛔ AN ARRIVAL DOES NOT TRAVEL. The 6px rise meant fresh text moved relative
   to the lines around it for half a second — arriving and being read at the
   same time, which is the one thing this surface may not do. Ink only. */
@keyframes cl-unfold {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* ── spent furniture folds; arrivals grow — two ends of ONE reflow ───────── */
/* ⛔ .remove() closes geometry in one frame. A fold may close geometry, but it
   closes it the way the guess options already did: over the brush ease. JS
   (foldOut / growIn) measures the height and drives max-height inline; these
   classes carry the dress. Reduced motion never reaches them — foldOut removes
   outright and growIn stands down (state, not performance). */
.cl-spent {
    overflow: hidden !important;
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
    transition: max-height var(--cl-fold) var(--cl-ease-move),
                opacity var(--cl-t-ink-quick) var(--ease-settle, ease),
                margin var(--cl-fold) var(--cl-ease-move),
                padding var(--cl-fold) var(--cl-ease-move);
}
.cl-arriving { transition: max-height var(--cl-fold) var(--cl-ease-move); }
/* ⭐ AND THE THIRD STATE: SPENT INK THAT CANNOT LEAVE. Furniture with read
   text below or beside it never folds — it goes quiet where it stands and the
   page clears it at the next turn. The seat is untouched, so nothing moves;
   the box is unpressable and out of the tab order the moment it is spent. */
/* ⭐ ROUND 2 (CR-2): the answered ask stays in its seat and dims to past ink */
.cl-ask--done, .cl-hand--done .cl-ask { color: var(--cl-ink-past); transition: color var(--cl-t-ink) var(--ease-settle, ease); }
.cl-quiet-out {
    color: transparent !important;
    pointer-events: none;
    transition: color var(--cl-t-ink) var(--ease-settle, ease),
                opacity var(--cl-t-ink) var(--ease-settle, ease);
}
.cl-quiet-out * { color: transparent !important; }

/* ── S5 · TIER TWO, THE LOOK: the question beside the written glyph, Tell me
   in the corner seat.
   ⭐ THE GUESS IS GONE (2026-09-24): the owner ruled the look line and Tell me
   the product (2026-09-23) and the guess left the card format (FORMAT_CARDS
   v7), so the option row, the reply, the answer block and the taken state are
   deleted. The option dress they shared with the meaning picks and the second
   readings' ledger lives on under a neutral name (.cl-opt, below).
   ⛔ OVERRIDDEN (card layout 2026-09-28, PLAN.md §5 items 1 and 3; the
   Addendum): THE LOOK NO LONGER FOLDS, AND IT STANDS WHERE THE ANSWER LANDS.
   It stood under the glyph, folded away (display) until the hand finished and
   again on Tell me, with Tell me one step under it. It stands now over the
   band's cells 2 and 3 (.cl-kband > .cl-guess), its seat laid at mount under
   [data-veil]; it inks in as the last stroke begins (--in), and on Tell me it
   DISSOLVES in its seat (.cl-dissolve, below) while the answer inks into the
   seats beside and under it. Tell me left it for the foot's corner seat. */
.cl-guess { margin: 0; }
.cl-guess--in { animation: cl-unfold 460ms var(--ease-brush, ease) both; }
/* Tell me arrives with the question, on the look's own clock */
.cl-ink-in { animation: cl-unfold 460ms var(--ease-brush, ease) both; }
/* ⭐ card layout 2026-09-28 (PLAN.md Addendum, the owner: "can you fix
   blinking: the moment the question disappears and the answer appears"): A
   QUESTION DISSOLVES BEFORE ITS ANSWER INKS IN, AND ONE SEAT NEVER SWAPS ITS
   FACE WITHOUT A FADE. The question and Tell me fade out evenly in their seats
   over --cl-t-dissolve (the runner drops their arrival first, whose fill held
   the ink at 1, and veils them once the fade is done); the told tiers and Next
   begin at --cl-t-fade, when the question is gone. Ink only: the box never
   moves, and it takes no press while it goes. */
.cl-dissolve { opacity: 0; transition: opacity var(--cl-t-dissolve) ease-in-out; pointer-events: none; }
/* ⭐ THE LOOK LINE LEADS ITS PAGE (2026-09-24, design review L2, stage 2,
   ruling 1; visual identity 6): e1, the step that exists for "the one English
   line that leads a page", on a 28em measure, at the punch line's leading (the
   other e1 line of this page). At e2 the one question the page asks read as a
   caption under a 120px glyph. (Card layout 2026-09-28: no hand under it any
   more, so no step under it either.) */
.cl-guess-q {
    margin: 0;
    font-size: var(--e1);
    line-height: 1.5;
    max-width: 28em;
    text-wrap: pretty;
}
/* ── THE OPTION DRESS: a meaning pick (.cl-mean-o) and a second reading's
   option (.cl-lg-o). Renamed from .cl-guess-o / .cl-guess-opts when the guess
   that minted it was deleted (2026-09-24); the rules are the ones it wore. */
.cl-opts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cl-opt {
    border: 1px solid transparent;          /* the elevation's step 1: a slip lighter than the page, no ring (its seat kept) */
    background: var(--cl-sheet);
    border-radius: var(--radius, 8px);
    padding: 0.5rem 0.9rem;
    font-family: inherit;
    font-size: var(--e2);
    line-height: 1.45;
    color: var(--cl-ink);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--cl-slip);
    transition: border-color var(--duration-fast, .15s) var(--ease-settle, ease),
                color var(--duration-fast, .15s) var(--ease-settle, ease);
}
.cl-opt:hover:not(:disabled) { color: var(--cl-accent); box-shadow: var(--cl-slip); }   /* the ink answers the hand, nothing else (no ring to colour; the slip keeps its own shadow, never the app's button lift) */
.cl-opt:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
.cl-opt:disabled,
.cl-opt:disabled:hover { cursor: default; box-shadow: none; }
/* (⭐ U-059, 26 October 2026: on a read, a warm-up step, a pick and the page's questions the ones not chosen now wear the
   one settle class, .cl-untaken, below: quiet ink, readable; .cl-opt--gone is the meaning ask's, R6, and the second
   readings'.)
   ⛔⛔ AND THE ONES NOT CHOSEN GO QUIET — THEY DO NOT LEAVE. They used to fold
   sideways and take the row off the page with them, so the line the learner
   had just started reading rose under their eye (owner, 2026-08-30). A
   wrapping row cannot be animated honestly anyway: a continuous width drives a
   discontinuous re-wrap. So the row keeps its seat for the life of the page,
   the untaken options fade to paper, and THE CHOSEN ONE STAYS as the receipt
   of what was pressed. Nothing moves; the answer arrives in ink. */
.cl-opt--gone {
    border-color: transparent;
    color: transparent;
    background: none;
    box-shadow: none;
    pointer-events: none;
    transition: color var(--cl-t-ink) var(--ease-settle, ease),
                border-color var(--cl-t-ink) var(--ease-settle, ease),
                background-color var(--cl-t-ink) var(--ease-settle, ease);
}
/* the pressed one, left standing in its seat: the words in past ink, the box
   gone — a bordered sheet rectangle is the page's "press me" grammar, and one
   left standing that does nothing spends the learner's attention (S5).
   Padding and size hold, so the row's geometry does not move a pixel. */
.cl-opt--took {
    border-color: transparent;
    background: none;
    color: var(--cl-ink-past);             /* ROUND 2 (CT-6): the spent press wears past ink */
    box-shadow: none;
    pointer-events: none;
    transition: border-color var(--cl-t-ink) var(--ease-settle, ease),
                background-color var(--cl-t-ink) var(--ease-settle, ease),
                color var(--cl-t-ink) var(--ease-settle, ease);
}
/* ⛔ AND THE KANJI IN THEM GO THE SAME WAY (owner, 2026-09-23: 一 and 二 stood
   floating in a row whose English had gone to paper). mixed() sets a Japanese
   run as .cl-jp, and '#kotobaLesson .cl-jp' inks it at ID weight, over the
   option's own transparent; these outrank it, on the same colour clock, and
   take whatever a run carries inside it (a guest's dotted rule, its ruby) with
   it. The pressed option's kanji wear its past ink with its English. */
#kotobaLesson .cl-opt--gone .cl-jp,
#kotobaLesson .cl-opt--gone [lang="ja"],
#kotobaLesson .cl-opt--gone .cl-jp * {
    color: transparent;
    text-decoration-color: transparent;
    transition: color var(--cl-t-ink) var(--ease-settle, ease),
                text-decoration-color var(--cl-t-ink) var(--ease-settle, ease);
}
#kotobaLesson .cl-opt--took .cl-jp {
    color: var(--cl-ink-past);
    transition: color var(--cl-t-ink) var(--ease-settle, ease);
}
/* ⭐⭐ U-059 (the deep review of 25 October 2026, the owner's go of 26 October): ONE SETTLE CLASS FOR WHAT WAS NOT TAKEN.
   An option or a tile not taken (js UNTAKEN, laid by readMarksOf, warmMarksOf, wirePick, restItem, the sentence's meaning
   item and the page's questions) goes QUIET in its seat once its question settles: the quiet ink, no border, no fill,
   still readable, the seat kept (its padding, its border's width and its size hold: nothing moves), on the 320 ms ink
   clock. The chosen one keeps its moss seat or its stone wash, a missed answer its moss; a picture option keeps its half
   ink (.cl-mean-pic.cl-opt--gone, below). Was: an untaken option went to paper (.cl-opt--gone), so a settled Reading piece
   hung its question over a 115 to 130 px hole above one lone tinted option (l15 122, l08 113), while an untaken tile
   stayed boxed as a press (l15 019, 076, 090): two dresses for one meaning, "not this one".
   ⛔ .cl-opt--gone stays where a thing must NOT print twice: a meaning ask's options (the chrome-plain round's R6, the
   owner's picture 3: "after a right answer no option stays on the screen", the answer said once, in the settled row) and
   the second readings' row, whose sound inks where its options stood. */
.cl-opt.cl-untaken,
.cl-tile.cl-untaken {
    border-color: transparent;
    background: none;
    color: var(--cl-quiet);
    box-shadow: none;
    pointer-events: none;
    transition: color var(--cl-t-ink) var(--ease-settle, ease),
                border-color var(--cl-t-ink) var(--ease-settle, ease),
                background-color var(--cl-t-ink) var(--ease-settle, ease),
                box-shadow var(--cl-t-ink) var(--ease-settle, ease);
}
/* (the kanji in an untaken option go quiet with its English: '#kotobaLesson .cl-jp' inks a Japanese run at ID weight) */
#kotobaLesson .cl-untaken .cl-jp,
#kotobaLesson .cl-untaken [lang="ja"],
#kotobaLesson .cl-untaken .cl-jp * {
    color: var(--cl-quiet);
    transition: color var(--cl-t-ink) var(--ease-settle, ease);
}
/* the certainty mark is a caption on the claim above it, never a sentence of its
   own: settled scholarship says nothing at all, and only the two unsettled
   states print (js: certaintyMark) */
.cl-cert {
    margin: 0.3rem 0 0;
    padding-left: 0.9rem;
    font-size: var(--e3);
    line-height: 1.4;
    color: var(--cl-quiet);
}
/* the old printed form: the glyph in the page's own brush ink at reading size,
   its caption under it — a specimen, in the parts row's grammar */
.cl-oldform { margin: var(--cl-air-in) 0 0; padding-left: 0.9rem; }
.cl-oldform-g {
    display: block;
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--k3);                  /* ROUND 2 (CR-4): one specimen size with the parts and the seat */
    line-height: 1.15;
    color: var(--color-jp-text, #2A231F);
}
.cl-oldform-cap { display: block; font-size: var(--e3); line-height: 1.4; color: var(--cl-quiet); }
/* ⭐ THE OWNER'S LOOK EXPERIMENT (2026-09-23; the only look since 2026-09-24):
   the old form is the telling's small print, at its foot on the telling's own
   left edge (the step in was the guess reply's, and there is no reply).
   (Card layout 2026-09-28: on the character page it stands in the lane right
   of the story, level with the hook: .cl-card--pc .cl-told > .cl-oldform.) */
.cl-told > .cl-cert, .cl-told > .cl-oldform { padding-left: 0; }
.cl-told > .cl-cert { margin-top: var(--cl-air-in); }

/* the greeting he has answered for two months, rewriting itself in place.
   One cell, two inks: a cross-fade, which is also what a reader who asked
   for less motion gets (the reduced-motion block keeps opacity). */
.cl-rewrite { display: inline-grid; margin: 1.4rem 0 0; }
.cl-rewrite > span {
    grid-area: 1 / 1;
    font-size: var(--k5);
    line-height: 1.5;
    color: var(--color-jp-text, #2A231F);
    transition: opacity 620ms var(--ease-brush, ease);
}
.cl-rw-after { opacity: 0; }
.cl-card--rewrote .cl-rw-before { opacity: 0; }
.cl-card--rewrote .cl-rw-after { opacity: 1; }

/* ⭐ S5: the teacher's closing sentence is the one line the learner carries out
   of the room, and it was the quietest text on the page — grey under a black
   response, the weight of a caption. It stands in INK now; its position after
   the second air is what says "a last word". The promise beneath it is the one
   quiet prose on the page (it looks forward), on a line of its own — the two
   speech acts rode one grey paragraph. */
/* .cl-frame is the SET ITEM's scene clause (frame_en), dressed by .cl-item .cl-frame
   below. The once-only kind / two-sounds sentences that shared the class were CUT
   (owner 2026-09-09): the kind caption and the reading tag carry it. */
.cl-frame { margin: 0; font-size: var(--e2); line-height: 1.7; color: var(--cl-ink); max-width: 34em; }
/* ⭐ S5: ONE SPINE, ONE MEANING. The left bar belongs to QUOTED JAPANESE (the
   sentence, the aside, the passage); the sight footnote is quiet prose under
   the sentence's English, set in under the quote's own text column. */
.cl-note {
    margin: 1.1rem 0 0;
    padding-left: 1.2rem;
    font-size: var(--e3);
    line-height: 1.65;
    color: var(--cl-quiet);
    max-width: 34em;
}

/* ── the hand ────────────────────────────────────────────────────────────── */
/* ⛔ AIR, NOT A RULE. The line between one hand and the next was the last
   full-width divider on the meet card: a hairline drawn across paper to say
   "a new thing starts here", which the whitespace already says and the
   settled record above it says twice. The gap does the work. */
.cl-hands { margin-top: 2.2rem; }
.cl-handwrap + .cl-handwrap { margin-top: 3.4rem; }
/* (the two-rules-with-nothing-between case is gone with the divider above:
   the following hand no longer draws one, so the settle keeps its own.) */
/* ⭐ ROUND 2 (CT-7): THE QUESTION IS INK, not a caption — it read as the
   station eyebrow's footnote grey; the frame (the chapter continuing) wears
   the teacher's cut, and the eyebrow alone stays quiet */
.cl-ask { font-size: var(--e2); color: var(--cl-ink); margin-bottom: 0.6rem; }
.cl-built { display: flex; gap: 0.4rem; margin-bottom: 0.9rem; }
/* ⭐ S5: the meet's receipt — each kanji under the seats that spell it, this
   card's in the brush brown. One cell per group, as wide as its morae's seats
   plus the row's gaps, laid at mount and veiled until the row's verdict (the
   partition is part of what the build tests). Nothing moves when it lands. */
.cl-built-k {
    display: flex;
    gap: 0.4rem;
    margin: -0.45rem 0 0.9rem;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k6);
    line-height: 1;
    color: var(--cl-ink);
}
.cl-bk {
    display: inline-block;
    flex: none;
    width: calc(var(--n, 1) * max(var(--cl-seat-w, 2.6rem), 2.6rem) + (var(--n, 1) - 1) * 0.4rem);
    text-align: center;
}
.cl-bk--now { color: var(--cl-hit, #9A4A16); }   /* this card's kanji under its seats: today's mark (CT-2) */
/* ⭐⭐ S1: THE SEATS ARE BLANKS ON PAPER, NOT INPUT WELLS. The inlaid well
   (sumi at four percent, 10px corners, a dot in each empty one) put four grey
   rounded rectangles under the word and made a reading ask ten to twelve
   boxes on the paper. A seat is a RULE now — one 1px rule under each seat at
   its final width, never one rule under the whole answer, so the count of
   seats still says how many sounds the reading has. A typed kana sits in ink
   over its rule; the verdict stays ink (moss kana on a moss rule, mend gold on
   a gold rule); the okurigana the sentence already gave stands in quiet with
   NO rule, because it is not asked. Nothing moves at the settle. ⛔ One dress
   for every rack in the lesson — the reading build, the word build, the gap,
   the check. */
.cl-seat {
    /* ⛔ A SEAT IS AS WIDE AS THE WIDEST TILE ON ITS RACK. Fixed at 2.6rem a
       two-mora tile (しゅ, しょ) overflowed the well the moment it was seated.
       wireHand measures the rack once at mount and sets --cl-seat-w on the
       row, so every seat is laid at its final width before a tile lands —
       nothing widens under the hand, and no seat leaks which position holds
       the small kana (all of them share the one width). */
    width: var(--cl-seat-w, auto);
    min-width: 2.6rem;
    /* ⭐ AIR UNDER THE KANA (the owner's look experiment, 2026-09-23: "the
       underline touching the font does not feel nice"). The kana was CENTRED
       in a 3rem box while its type step (--k4) grows with the window, so the
       wider the glass the lower its foot: 6px of air at 1280, none at 1600,
       measured. Now it stands on the FLOOR of its cell (line-height 1, align
       end) with 0.4rem of padding under it, so the air is the same at every
       width (7-8px under a kana, 6px under a kanji). Every seat grows by the
       same 0.4rem (--k too), so the rule stays at one height across the row;
       the width is untouched (--cl-seat-w, measured at mount). */
    height: 3.4rem;
    padding-bottom: 0.4rem;
    line-height: 1;
    white-space: nowrap;
    /* S2: one cell, so an old ink and a new one can stand in the same seat
       while the settle cross-fades between them */
    display: inline-grid;
    place-items: end center;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid rgba(var(--cl-sh), 0.34);
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
    color: var(--cl-ink);
    position: relative;
    /* an EMPTY seat is not a hand: only a seat holding something can be
       pressed, and only that one says so */
    cursor: default;
    /* the verdict lands on the ink clock (320ms), the take-back hover on the quick one */
    transition: border-color var(--cl-t-ink) var(--ease-settle, ease),
                color var(--cl-t-ink) var(--ease-settle, ease);
}
.cl-seat > span { grid-area: 1 / 1; }
/* the cross-fade: the old kana's ink goes as the new one's comes, in place —
   never emptied and faded up from nothing */
.cl-seat-old { transition: color var(--cl-t-ink) var(--ease-settle, ease); }
.cl-seat-new { color: transparent; transition: color var(--cl-t-ink) var(--ease-settle, ease); }
.cl-seat--swap .cl-seat-old { color: transparent; }
.cl-seat--swap .cl-seat-new { color: inherit; }
.cl-seat--k { width: 3rem; height: 3.8rem; font-size: var(--k4); }
/* ⭐ A FILLED SEAT GIVES ITS TILE BACK. The press on the seat is the whole
   affordance — no ⌫ cap, no undo chrome — so it wears the house hand-dress:
   the pointer, and ink under it. Nothing moves. */
.cl-seat--filled { cursor: pointer; }
.cl-seat--filled:hover { border-bottom-color: var(--cl-accent); color: var(--cl-accent); }
.cl-seat--filled:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* ⛔ NO RED AND NO GREEN, anywhere a course marks an answer. A wrong seat
   goes to STONE — the ink drains out of it — and the right answer settles in
   full ink beneath. Nothing is scored, nothing is scolded, and the one warm
   colour in the lesson stays reserved for a miss that came back answered. */
/* the verdict is INK: the kana and the rule under it take the one colour */
/* ⭐⭐ THE ANSWER IS THE COLOUR OF THE ROW (owner 2026-08-30). It used to be
   two greys a shade apart — the learner pressed 答える and nothing on the page
   said yes or no, so the verdict had to be staged as a second beat of folding
   and revealing. A right seat goes MOSS, a wrong one goes GOLD, and the beat
   is not needed: nothing moves, one colour lands. S1: the wash under the seat
   is gone with the well, so the verdict rides the deeper INK triples. */
.cl-seat--good {
    color: rgb(var(--cl-moss-ink));
    border-bottom-color: rgb(var(--cl-moss-ink));
}
/* ⚖ U-064 (the deep review's Round 3; the owner's "ok" of 26 October 2026, R97: terracotta for wrong, "there is no red"):
   a wrong seat takes the course's one wrong ink, the seal's terracotta (--cl-seal-ink), as a wrong mora (.cl-yours-x) and
   a wrong pair (.cl-match-o--miss) do; from 30 August it went GOLD, the mend ink. --cl-gold, the recovered seam and the
   close's moment hairline stay as they are */
.cl-seat--bad {
    color: var(--cl-seal-ink, #A35A4A);
    border-bottom-color: var(--cl-seal-ink, #A35A4A);
}
/* ⭐⭐ S2: THE ANSWER YOU WERE OWED is the Japanese ink on the plain rule —
   the biggest, plainest thing on the page after a miss, and NEVER amber:
   amber means "a mora you got wrong" and lives only in the learner's own row
   beneath. (Named reversal of the 2026-08-30 gold retype, which dressed the
   correction and the failure in one colour.) */
.cl-seat--answer { color: var(--color-jp-text, #2A231F); border-bottom-color: rgba(var(--cl-sh), 0.34); }
/* ⭐⭐ S1: SPENT FURNITURE GOES TO PAPER, NOT TO A GHOST. The rack and 答える
   used to keep a trace of their ink at 22% — and the tiles the learner had
   pressed wore their own 22% on top, so the kana they had just built were the
   faintest things on the page (owner note c: "the options become pale"), and
   the spent 答える composed at nine percent. THE READING HAS ONE PLACE ON THE
   ASK: the seats. So the rack and the row under it keep their SEATS (nothing
   moves) and give up their ink entirely — one breath of fade, then paper.
   visibility, so the spent tiles leave the a11y tree and the tab order too. */
.cl-still {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--cl-t-ink) var(--ease-settle, ease),
                visibility 0s linear var(--cl-t-ink);
}
/* ⛔ GIVEN, NEVER ASKED: the okurigana the sentence already prints. Quiet,
   fixed, no rule under it, no hand on it, and outside every verdict. */
.cl-seat--given { color: var(--cl-quiet); border-bottom-color: transparent; cursor: default; }
/* ⭐ S2: THE LEARNER'S OWN ROW, at reading size, directly under the seats:
   ink for the morae that were right, amber only on the ones that were not.
   No micro-label — the row's ink says whose it is. Its seat is laid at
   mount (the answer's kana, veiled, hold the line's true height), so the
   settle inks and nothing below it moves. */
/* ⭐ ROUND 2 (CT-8): THE LEARNER'S ROW LIES ON THE SEAT GRID. A settled miss
   used to print the built kana as free text under the seats (まち tight under
   も, ち under nothing) — no column to compare. Each mora takes a seat's width
   (--cl-seat-w, stamped by seatWidth with the seats'), so a wrong mora stands
   under the seat it was wrong in; a row of another length stays free-set and
   amber whole, because a grid would claim a positional match that is not there. */
.cl-yours {
    display: flex;
    gap: 0.4rem;
    margin: 0 0 1.3rem;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
    line-height: 1.3;
    min-height: 1.3em;
    color: var(--cl-ink);
    letter-spacing: 0;
}
.cl-yours-m { display: inline-block; width: max(var(--cl-seat-w, 2.6rem), 2.6rem); text-align: center; }
.cl-yours-free { letter-spacing: 0.04em; }
.cl-yours-x { color: var(--cl-seal-ink, #A35A4A); }   /* U-064: a wrong mora in the one wrong ink (was the mend ink's amber) */
/* ⭐ S2: THE TAIL IS ONE CELL. The tools (the rack, 答える) and the note (the
   near-pass line, the honor, the tell) share a grid cell: the tools go to
   paper at the settle and the note inks over where they stood — under the
   learner's row, in a seat that has been there since mount, sized for the
   tallest thing it may have to say (reserveNote). Where the tiles ARE the
   answer's marks (a pick, a gap, a listen, a page question) they stay, and
   the note's cell stands after them. */
.cl-hand-tail { display: grid; }
.cl-hand-tail > .cl-tools, .cl-hand-tail > .cl-verdictnote, .cl-hand-tail > .cl-hand-said { grid-area: 1 / 1; align-self: start; }
/* ROUND 2 (CR-1): the learner's row and the note stack in the tools' cell —
   the cell is max(tools, said) at mount, so nothing moves at the settle */
/* ⛔ 2026-09-09 (owner: "I cannot enter readings"): the said cell is LATER in the
   DOM, so it painted OVER the rack and took every real pointer click while its
   veiled seats were still empty — DOM clicks (every pin) went through, a mouse
   did not. The wrapper is glass; only what is in it may take a hand. */
.cl-hand-tail > .cl-hand-said, .cl-hand-tail > .cl-verdictnote { pointer-events: none; }
.cl-hand-tail > .cl-hand-said > *, .cl-hand-tail > .cl-verdictnote > * { pointer-events: auto; }
.cl-hand-said .cl-yours { margin: 0 0 0.9rem; }
/* a build's sentence record rides the same cell, under the note: it takes no
   top margin of its own there (the row above already keeps the air), and its
   voice chip and word doors stay live through the glass — the `> *` rule above */
.cl-hand-said > .cl-record--sent { margin-top: 0; }
/* ROUND 2 (L5): the word's record follows the note in the same tail, on the next row */
.cl-hand-tail > .cl-record { grid-row: 2; }
/* ⛔ OVERRIDDEN 2026-09-23 (design review L2, item 4): the record inks at +320
   and the tell at +800, so a note seat ABOVE the record inked every miss
   bottom first. Where the tiles stay (a pick, a gap, the match) the record
   takes the tail's first row and the note the row under it, in the order they
   ink; the release on a right answer then collapses the last row, with nothing
   under it to move. The record takes the tail's own air after the rack and no
   margin of its own: that second 1.4rem was the record's air under the note,
   and standing first it only doubled the gap to the tiles (item 10). */
.cl-hand-tail--after > .cl-record { grid-row: 1; margin-top: 0; }
.cl-hand-tail--after > .cl-verdictnote { grid-area: 2 / 1; }
/* the note under the record takes the air the record used to bring (the
   answer's one step, as between the honor and the tell), laid from mount so
   the seat never grows at the settle; on a right answer the released note is
   the last thing in the tail and its air stands under nothing */
.cl-hand-tail--after > .cl-record + .cl-verdictnote,
.cl-hand-said > .cl-record + .cl-verdictnote { margin-top: 0.9rem; }
.cl-hand-tail--after { margin-top: 1.4rem; }
.cl-verdictnote .cl-teach { margin-top: 0; }
.cl-verdictnote .cl-teach + .cl-teach--after { margin-top: 0.9rem; }
.cl-rack { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ── Wave 1 · laws the room already believes in (review board 2026-08-29) ── */
/* the どこ line's seat is held through the tour: the hand-over from watching
   to being asked changes ink, never the painting's place under the eye */
#kotobaLesson .cl-pano-line[hidden] { display: block; visibility: hidden; }
/* while the street still has unfound words, the way out wears the quiet
   dress; it takes the primary dress back the moment the street rests */
.cl-next--soft { border-color: transparent; background: none; box-shadow: none; color: var(--cl-quiet); }
.cl-next--soft:hover { box-shadow: none; background: none; }
/* a clean pass retires the typed receipt — the head is the record now */
/* ⛔ and it never fades out either: the clock that used to hand the reading
   over to a record has no record to hand it to. */
/* the exit breathes out over the hall instead of cutting to it */
#kotobaLesson.cl-room--out { opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-settle, ease); }
/* while a guess is open the chrome must not answer the look: the day's title
   (and its English echo) hold their ink; "Lesson 8" stays. Seat kept.
   ⛔ Since 2026-09-23 (design review L2, item 14) the runner sets the class
   only on a card whose kanji the title names (js: titleNames); on every other
   look screen the title stays, so the chrome's one steady line never blinks. */
#kotobaLesson.cl-looking-room .cl-mark-title,
#kotobaLesson.cl-looking-room .cl-mark-en { visibility: hidden; }
/* the old form stands as a pale ghost above the question that names it */
.cl-guess-old { display: block; font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k3); line-height: 1.2; color: var(--cl-quiet); opacity: 0.5; margin-bottom: 0.5rem; }

/* ── the day's character entry (close + bound into the book) ─────────────
   A dictionary entry on a sheet that will be bound: the character heads one
   shared axis, its returns hang off it — the glyph's position IS the lesson
   (気持ち/気をつけて lead with it; 天気/元気/電気 end with it). Annotations
   right-aligned like a specimen sheet. Receipts only, never seats. */
/* ⭐ ROUND 2 (CR-5): THE ENTRY IS PRINT, NOT PAPER. Three materials in the
   room — the ROOM (--cl-paper), a SHEET laid on the desk (--cl-sheet: the
   leaf, the tanzaku), an OBJECT pressed (sheet + hairline + the shadow: a
   tile, a chip, an option) — and a bordered second sheet beside the one
   textured leaf was a fourth. The entry keeps its grid and the foot's one
   hairline; air sets it off. */
.cl-family {
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 1.9rem;
    max-width: 36em;
}
.cl-fam-grid {
    display: grid;
    grid-template-columns: max-content max-content max-content 1fr;
    column-gap: 0;
    row-gap: 0.55rem;
    align-items: baseline;
}
.cl-fam-glyph {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k3);
    line-height: 1.15;
    color: var(--color-jp-text, #2A231F);
    justify-self: center;
    padding-bottom: 0.3rem;
}
.cl-fam-headmeta { padding-left: 0.7rem; padding-bottom: 0.3rem; }
.cl-fam-headmeta [lang="ja"] { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k6); color: var(--cl-quiet); }
.cl-fam-headmeta i { font-style: normal; font-size: var(--e3); color: var(--cl-quiet); margin-left: 0.6em; }
.cl-fam-row { display: contents; cursor: pointer; }
.cl-fam-row:focus-visible .cl-fam-k { outline: var(--cl-ring); outline-offset: 2px; }
.cl-fam-pre, .cl-fam-k, .cl-fam-rest [lang="ja"]:first-child {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
    line-height: 1.3;
    color: var(--cl-ink);
}
.cl-fam-pre { text-align: right; }
.cl-fam-k { justify-self: center; color: var(--color-jp-text, #2A231F); }
.cl-fam-rest { padding-left: 0; }
.cl-fam-r { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k6); color: var(--cl-quiet); margin-left: 0.7em; }
/* ⭐ batch D1 fix round 2 (item 3): a two-line note wraps in two even lines,
   never "...the end of two lines / to read" (text-wrap: balance) */
.cl-fam-when { font-style: normal; font-size: var(--e3); color: var(--cl-quiet); justify-self: end; text-align: right; padding-left: 1.2rem; text-wrap: balance; }
/* a slipped word keeps its seat in the family, in the day-lived ink */
.cl-fam-row--slip .cl-fam-pre, .cl-fam-row--slip .cl-fam-k,
.cl-fam-row--slip .cl-fam-rest [lang="ja"] { color: var(--cl-ink-past); }
.cl-fam-row:hover .cl-fam-k { color: var(--cl-accent); }
.cl-fam-foot {
    margin: 1rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--cl-rule);
    font-size: var(--e2);
    color: var(--cl-quiet);
}
/* the book binds the entry at the leaf's measure */
/* in the BOOK the entry is bound inside the leaf: one hairline parts it from the day's prose */
.cl-reread .cl-page .cl-family { position: relative; z-index: 1; margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--cl-rule); }
.cl-tile {
    min-width: 2.9rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid transparent;          /* the elevation's step 1: a slip lighter than the page, no ring (its seat kept) */
    background: var(--cl-sheet);
    border-radius: var(--radius, 8px);
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
    color: var(--color-jp-text, #2A231F);   /* a tile is a Japanese answer: the sumi (the elevation's step 2, the review round) */
    cursor: pointer;
    box-shadow: var(--cl-slip);
    transition: border-color var(--duration-fast, .15s) var(--ease-settle, ease),
                background-color var(--duration-fast, .15s) var(--ease-settle, ease),
                color var(--duration-fast, .15s) var(--ease-settle, ease),
                box-shadow var(--duration-fast, .15s) var(--ease-settle, ease);
}
.cl-tile--kanji { font-size: var(--k4); min-width: 3.4rem; padding: 0.6rem 0.8rem; }
/* ⭐ U-059 (the deep review of 25 October 2026): HOVER IS COLOUR ALONE (R98): the border and the ink go indigo, as an
   option's do; the shadow that deepened under the pointer (0 2px 7px) is gone, so a tile under the hand never lifts.
   (The review round of the elevation, 1 November 2026: the app's global `button:hover` drop shadow, css/components.css,
   outranked the slip's own and swapped it for a cold grey lift under the pointer; the slip keeps its own shadow.) */
.cl-tile:hover:not(:disabled) {
    color: var(--cl-accent);                /* the elevation: the slip has no ring, so the ink alone answers the hand */
    box-shadow: var(--cl-slip);
}
.cl-tile:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* ⭐ S1: a tile the learner has seated has MOVED — what stays on the rack is
   its quiet ink with no box, never a 22% ghost of the button (which then
   multiplied with the spent rack's own fade into a five-percent smear) */
/* ROUND 2 (CR-2): a lifted tile leaves a SOCKET — the hairline stays, the ink goes — not a ghost of the kana */
.cl-tile--used { border-color: var(--cl-rule); background: none; box-shadow: none; color: transparent; pointer-events: none; }
.cl-tile:disabled { cursor: default; }
/* ⭐⭐ S2: ONE MARK GRAMMAR, LESSON-WIDE, three dresses and no fourth.
   Pressed-and-right = the MOSS SEAT (a moss fill, moss ink, no border).
   Wrong press = the quiet border with the stone wash. The answer you missed
   = the same moss seat, no underline — underline means one thing only, the
   word being asked (.cl-target). Two objects, one meaning: a reading seat is
   a rule on paper, so moss there is ink and rule colour; a tile is a box, so
   moss is a filled seat. Meaning lines, page-question tiles,
   rack tiles and a workbook match cell all take these three. (A right meaning
   pick also wears the option dress's neutral receipt, .cl-opt--took, under its
   moss seat; the meet's look has no options since 2026-09-24.) */
.cl-match-o--paired,
.cl-tile--picked,
.cl-tile--answer {
    border-color: transparent;
    background: rgba(var(--cl-moss), 0.16);
    color: rgb(var(--cl-moss-ink));
    box-shadow: none;
}
/* ROUND 2 (CR-2): the wrong tile wears no frame — the answer is the heaviest
   thing on the row, the miss a stone wash */
.cl-match-o--wrong,
.cl-tile--wrong {
    border-color: transparent;
    background: rgba(216, 210, 200, 0.34);
    color: var(--cl-quiet);              /* the elevation: opaque, readable on its wash (was a fade at 2.23:1) */
    box-shadow: none;
}
.cl-commitrow { margin-top: 1.4rem; }

/* ── the scene that asks the item ────────────────────────────────────────── */
/* One clause of the day's own story above the line, in the chrome face and
   the quiet ink: it places the sentence somewhere without competing with it.
   Not italic — an italic clause reads as an aside about the exercise, and
   this is the story still going on.
   ⛔ Scoped to the item it dresses: the teaching FRAMES (the character page's
   kind sentence, the word page's two-sounds sentence) wear the same class and
   their own rule above; an unscoped rule here, later in the file, was quietly
   re-dressing them in the scene's quiet ink. */
.cl-item .cl-frame { margin: 0 0 1.1rem; max-width: 34em; }

/* what the miss says: the pick honored, then the tell, word for word, once */
.cl-teach { margin-top: 1.5rem; }
/* the honoring is the teacher answering THIS learner: running prose, no quote
   rule — the rule belongs to the registry tell below it, which is the same
   eight words every miss on that pair gets */
.cl-honor {
    margin: 0 0 0.8rem;
    font-size: var(--e2);
    line-height: 1.7;
    color: var(--cl-ink);
    max-width: 34em;
}
/* ⛔ CT-1 OVERRIDDEN ON THE ITEMS, 2026-09-23 (design review L2, item 7): ONE
   FACE PER MISS NOTE. On a set, check or workbook miss the tapped option's note
   printed in Literata (.cl-honor is on the teacher's cut) and the item's note
   under it in Inter (.cl-tellline is not): two faces for two authored facts of
   one shape (FORMAT_EXERCISES.md: an option note is "a fact about that option,
   in the same shape as note_en"). These are facts, not the teacher's telling,
   so on an item the honor takes the tell's face and size. */
.cl-set .cl-honor { font-family: inherit; font-size: var(--e2); line-height: 1.7; }
/* a READING tell on a miss is a line of prose in ink — no quote bar: since S4
   the shape tell is the twin seat everywhere it prints, and since S5 the left
   bar belongs to quoted Japanese alone (the "same sentence, same dress" law
   this bar once served now lives inside the seat) */
.cl-tellline {
    display: inline-block;
    font-size: var(--e2);
    line-height: 1.65;
    color: var(--cl-ink);
}
.cl-rule { font-size: var(--e2); color: var(--cl-quiet); }
.cl-rule [lang="ja"] { color: var(--cl-ink); font-size: var(--k6); }

/* the answer settles — ONE contract on every desk: lean before the answer;
   everything after. ⭐ S2: THE ASK IS THE RECORD. A gap, a read and a build
   keep the sentence they asked with (the blank fills in place, the target
   takes ink) and take the English — with the target's meaning and the
   sentence's own voice — in a held seat under the original line; nothing is
   quoted twice and no headword repeats what the seats already spell. A pick
   and a listen have no seats, so they keep the word row and the reveal. */
.cl-record--line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.9rem;
    margin: 0 0 1.5rem;
    font-size: var(--e3);
    line-height: 1.6;
    max-width: 34em;
}
.cl-record-g { color: var(--cl-ink); }
.cl-record-en { color: var(--cl-quiet); }
.cl-record-oto { margin-left: 0.1rem; }
/* beside the kanji seats: the reading and the meaning the seats do not spell
   (directly under the seats — the learner's row no longer sits between) */
.cl-record--beside {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin: 0 0 1.4rem;
}
.cl-record--word { margin-top: 1.4rem; }
/* (THE MATCH'S REVEAL TOOK THE BOARD'S OWN SHAPE, two columns of bare pairs under the board, until the owner's pick of
   24 October 2026: the tiles carry the reveal and the record prints nothing, standing in the board's left margin as the
   reveal's beat and the seam's seat: the picks' block at the end of this sheet.) */
.cl-record--sent { margin-top: 1.2rem; }
/* the hairline under a record: only where a sentence was printed, and never
   on a miss (the mark must not say "right" on the item just missed).
   ⛔ Its seat is laid at mount — padding and a transparent rule from the
   first frame — so the settle inks the rule and grows nothing (+9px measured
   when the padding arrived with the class). */
.cl-record--sent {
    padding-bottom: 0.55rem;
    border-bottom: 1px solid transparent;
    transition: border-color var(--cl-t-ink) var(--ease-settle, ease);
}
.cl-record--sent.cl-settled:not(.cl-settled--miss) { border-bottom-color: var(--cl-rule); }
.cl-settled-row { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.cl-settled-g { font-size: var(--e3); color: var(--cl-quiet); }
.cl-sent--settled { margin-top: 1rem; margin-bottom: 0.6rem; }
/* after a miss the answer settles WITHOUT the hairline a right answer gets:
   the mark under the sentence must never say "right" on the item just missed
   (S2: the rule stays transparent — .cl-record--sent.cl-settled:not(--miss) —
   and the seat's padding was laid at mount, so a miss removes nothing) */
/* ⭐ KINTSUGI GOLD IS FOR RECOVERY AND NOTHING ELSE. Here that is a miss that
   came back and was answered; the close's .cl-moment--back hairline is the
   same law told once more, over the same repair, at the end of the night. Two
   sites, one meaning — never a third, and never a decoration. */
/* ⭐ GOLD IS THE REPAIR, AND IT IS A LEFT HAIRLINE. A word that slipped and
   came back clean wears the kintsugi seam the close's own moment line wears —
   one grammar for gold in this course, on the one axis it lives on. It blooms
   in over a breath and then simply stays; there is no label, because the
   learner knows exactly what just happened. ⛔ Nowhere else in the walk. */
.cl-record { position: relative; }
.cl-settled--recovered { border-bottom-color: var(--cl-rule); }
/* S2: the seam stands in the MARGIN, off the text — a left border with its
   padding moved the whole record 15px right at the settle.
   ⭐ batch D1 fix round 2 (item 2): AND IT IS AS TALL AS WHAT IT REPAIRS. On
   Read the word the record is the gloss alone ("name" under 名前), and the
   seam at its height was a 2x16px gold tick at x 240, y 318 (1280) that read
   as a stray mark. js seamReach sets the record's offsets to the top of its
   word and the foot of its seats (名前 / name / なまえ), so the seam runs that
   block's height; every other record leaves them unset (0: its own height,
   the full word row on Build the word). */
.cl-settled--recovered::before {
    content: '';
    position: absolute;
    left: -0.85rem;
    top: var(--cl-seam-top, 0);
    bottom: var(--cl-seam-bottom, 0);
    width: 2px;
    background: var(--cl-gold);
    animation: cl-gold-in 600ms var(--ease-settle, ease) both;
}
@keyframes cl-gold-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* the standing title's one visible beat, the night 火曜日、あめ becomes
   火曜日、雨. Ink blooming and nothing else — no glow, no scale, no sound. */
.cl-settled-w { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k4); color: var(--color-jp-text, #2A231F); }
.cl-settled-r { font-size: var(--k6); color: var(--cl-quiet); }
/* ⭐ A CHECK SLIP'S ANSWER LINE WEARS THE RECEIPT'S DRESS (2026-09-24, design
   review L2, stage 2, ELEVATE 2b). The close's receipt row prints a word that
   went soft a shade paler with its kana under it (.cl-rcw--slip, .cl-rcw-r), a
   code no screen had taught: the check's reveal printed the slipped word in
   full ink. The missed check item's answer line now wears that dress, so the
   code is seen where it is earned: the word pale, its reading hung under it at
   the word's left edge, the meaning beside. The class lands on the frame the
   record unveils (runner, inkSettle), and the reading hangs OUT of the flow,
   from the foot of the word's ink (1.25 k4 under the row's top), into the air
   the record already holds: above a sentence record's sentence (section 5)
   the gap is the kana's own; above a note (sections 4, 6 and 7) the check's
   word row holds 0.75rem more paper FROM MOUNT, right answer or wrong, so the
   kana never sits on the note's first line and the verdict changes ink,
   never height. ⛔ Nothing grows at the verdict: the check's items sit one
   seat from the glass floor, and a row that grew 23px there pushed lesson 3's
   longest "Write it back" past the glass and its foot 145px down (walked,
   1280x900). */
.cl-settled--slip .cl-settled-row { position: relative; }
.cl-set--wb.cl-check .cl-record--word:not(.cl-record--sent):not(.cl-record--pairs) > .cl-settled-row:has(> .cl-settled-r) { padding-bottom: 0.75rem; }
.cl-settled--slip .cl-settled-row > .cl-settled-w { color: var(--cl-quiet); }
.cl-settled--slip .cl-settled-row > .cl-settled-r {
    position: absolute;
    left: 0;
    top: calc(1.25 * var(--k4));
    white-space: nowrap;
    line-height: 1.2;
}
/* ⭐ THE SETTLE CLOCKED TO THE CLIP (runner: clockSettle, and only where the
   corpus has a clip and full motion is wanted). Three stamps on one block:
   voiced = the headword takes its ink as the sound starts, over the clip's own
   length; named = the reading and the meaning at the word's middle; said = the
   sentence on the last breath. INK ONLY — every line already holds its seat,
   so nothing moves while the word is spoken, and the colour carries the fade
   rather than opacity, which would composite the whole block. */
.cl-settled--clocked .cl-settled-w {
    color: rgba(42, 35, 31, 0.28);
    transition: color var(--cl-say, 700ms) var(--ease-settle, ease);
}
.cl-settled--clocked.cl-settled--voiced .cl-settled-w { color: var(--color-jp-text, #2A231F); }
/* ⛔ AND THE CLOCK KNOWS BOTH RECORD SHAPES. On the meet the record composes
   in the card's HEAD (the word was already standing there, so it never fades
   — only the reading coming out from under its veil and the meaning joining
   it are new); on the set and the check it composes in the settled block. Same
   three stamps, same one clock, two shapes of paper. */
.cl-settled--clocked .cl-settled-r,
.cl-settled--clocked .cl-settled-g,
.cl-settled--clocked .cl-record-g,
.cl-settled--clocked .cl-reading-ink,
.cl-settled--clocked .cl-gloss-line {
    color: transparent;
    transition: color 320ms var(--ease-settle, ease);
}
.cl-settled--clocked.cl-settled--named .cl-settled-r,
.cl-settled--clocked.cl-settled--named .cl-settled-g,
.cl-settled--clocked.cl-settled--named .cl-reading-ink,
.cl-settled--clocked.cl-settled--named .cl-gloss-line { color: var(--cl-quiet); }
.cl-settled--clocked.cl-settled--named .cl-record-g { color: var(--cl-ink); }
/* the record line's English lands on the last breath, with the sentence */
.cl-settled--clocked .cl-record-en { color: transparent; transition: color 420ms var(--ease-settle, ease); }
.cl-settled--clocked.cl-settled--said .cl-record-en { color: var(--cl-quiet); }
.cl-settled--clocked .cl-record-oto { opacity: 0; transition: none; }
.cl-settled--clocked.cl-settled--said .cl-record-oto { opacity: 1; transition: opacity 420ms var(--ease-settle, ease); }
.cl-settled--clocked .cl-sent--settled {
    border-left-color: transparent;
    transition: border-color 420ms var(--ease-settle, ease);
}
.cl-settled--clocked .cl-sent--settled .cl-sent-en {
    color: transparent;
    transition: color 420ms var(--ease-settle, ease);
}
/* the sentence's own JP line is veiled by the clock too — its two rules stand
   AFTER the base ink under "every sentence has a voice" (they must: see there) */
.cl-settled--clocked.cl-settled--said .cl-sent--settled { border-left-color: var(--cl-rule); }
.cl-settled--clocked.cl-settled--said .cl-sent--settled .cl-sent-en { color: var(--cl-quiet); }
/* the target word keeps the block's clock too — its own ink would otherwise
   stand alone in a still-transparent sentence */
.cl-settled--clocked .cl-sent--settled .cl-sent-hit {
    color: transparent;
    transition: color 420ms var(--ease-settle, ease);
}
.cl-settled--clocked.cl-settled--said .cl-sent--settled .cl-sent-hit { color: var(--cl-hit, #9A4A16); }
/* and a guest word keeps the clock WHOLE: its reading colours itself
   (.cl-guest rt, (0,1,1)) and its door rule paints a RULE, which no colour
   veil reaches — so on a veiled line the small reading floated over blank
   paper and a faint underline still marked where 宿題 was about to appear.
   Both take the block's clock; both come back at 'said' in their own inks. */
.cl-settled--clocked .cl-sent--settled .cl-guest rt { color: transparent; transition: color 420ms var(--ease-settle, ease); }
.cl-settled--clocked .cl-sent--settled .cl-guest[role="button"] { text-decoration-color: transparent; transition: text-decoration-color 420ms var(--ease-settle, ease); }
.cl-settled--clocked.cl-settled--said .cl-sent--settled .cl-guest rt { color: var(--cl-ink-past); }
.cl-settled--clocked.cl-settled--said .cl-sent--settled .cl-guest[role="button"] { text-decoration-color: rgba(105, 98, 90, 0.35); }
/* ⛔ THE CHIPS KEEP THE RECORD'S CLOCK — AND THE HIDE IS INSTANT. The head
   chip un-hides the moment the asking class drops and the clock veils it the
   same tick; with the transition declared on the HIDING rule the chip FADED
   out in full view — the flash the owner caught (2026-08-30). Opacity 0 lands
   with no transition; only the arrival breathes, each chip on its own line:
   the head's with the reading, the sentence's with the sentence. */
.cl-settled--clocked .cl-oto,
.cl-settled--clocked .cl-sent-oto { opacity: 0; transition: none; }
.cl-settled--clocked.cl-settled--named .cl-oto,
.cl-settled--clocked.cl-settled--said .cl-sent-oto {
    opacity: 1;
    transition: opacity 420ms var(--ease-settle, ease);
}

/* ── every sentence has a voice ──────────────────────────────────────────── */
/* ⭐ THE SENTENCE IS THE CONTROL. A ♪ beside every line would be a column of
   buttons down a page whose whole claim is that it reads like a book. So the
   line takes the press itself and says so the way every readable thing here
   says it: ink under the pointer, and not one pixel of movement. ⛔ The class
   is added ONLY where the manifest has a clip — a dead affordance on a page
   about reading teaches distrust of the paper.
   ⭐⭐ SINCE THE GRADED READER (19 October 2026) THIS IS THE READING LEAF'S LINE
   ALONE (js voiceLines): a card's sentence, a phrase's and the seam's line are
   print whose words answer for themselves, and their speaker chip
   (.cl-sent-oto, in the tab order now) is their one sound. */
.cl-say {
    cursor: pointer;
    transition: color var(--duration-fast, .15s) var(--ease-settle, ease);
}
.cl-say:hover { color: var(--cl-accent); }
.cl-say:focus-visible { outline: var(--cl-ring); outline-offset: 3px; }
/* and while it is speaking it holds that ink, so the eye knows which line the
   voice belongs to on a page carrying several */
.cl-said--on,
.cl-said--on:hover { color: var(--cl-accent); }
/* IMM-3: the 聞く door while the teacher is reading — the same said ink */
.cl-door--on, .cl-door--on:hover { color: var(--cl-accent); }
.cl-sent {
    margin: 1.6rem 0 0;
    padding-left: 1.2rem;
    border-left: 1px solid var(--cl-rule);
}
/* the JP line is INLINE so its voice mark rides the end of the line itself —
   as a block it pushed the mark onto a row of its own between the sentence
   and its English, a shelf holding one small button */
.cl-sent [lang="ja"] { display: inline; font-size: var(--k5); line-height: 1.9; }
/* ⭐ a two-person card sentence, one turn a line (batch D1 fix round 1, item 3;
   js sentLineHTML): the second speaker set in by 2em (the exchange's own until
   D65 gave a piece's speakers their letters), as one box so a turn that wraps
   keeps the indent */
.cl-sent-turn--b { display: inline-block; box-sizing: border-box; max-width: 100%; padding-left: 2em; }
/* ⭐ S5: SENTENCES NEVER BREAK INSIDE A WORD. Every course sentence span is set
   keep-all / strict: a line breaks only after punctuation, at the <wbr> laid
   between two tokens of the leaf, and — the last resort, a clause wider than
   its column — anywhere. 書き|ます and いま|す no longer happen. */
.cl-sent [lang="ja"], .cl-line, .cl-aside-jp, .cl-meanline, .cl-q-ask, .cl-rb-jp, .cl-seam-jp, .cl-phrase-jp {
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: anywhere;
}
/* ⭐ U-052 (the deep review of 25 October 2026): A READING LINE SET CLAUSE BY CLAUSE (js clausesHTML, lineHTML): where a line
   holds more than one clause each is one box, so a line that must wrap takes its 。 or its 、 first; a clause wider than the
   line breaks inside itself at its words (js breakOK), never past the line. The box takes no indent of its own (the 字下げ
   is the line's). And the lines' rag evened (text-wrap: pretty), so no line ends on one short word. */
#kotobaLesson .cl-clause { display: inline-block; max-width: 100%; text-indent: 0; }
#kotobaLesson .cl-read-line, #kotobaLesson .cl-line { text-wrap: pretty; }
/* ⭐ Repair round 1 (E1-01, J-02, 26 October 2026): THE PAIR THE LAW HOLDS IS ONE BOX (js .cl-hold: sentLineHTML, lineHTML).
   keep-all closes the seam between two letters, never the edge of a ruby or of a no-wrap run, and there the browser opened a
   break no <wbr> stood for (このへやは六畳 / です。, これは家族の写真 / です。, 犬と散歩 / に行きます。); the tokens no <wbr>
   may part print in one no-wrap box, so a line breaks at a <wbr> or after a mark and nowhere else. */
#kotobaLesson .cl-hold { white-space: nowrap; }
/* ⛔ 12 November 2026 (the deep review's Safari pass): IN WEBKIT THE WORD BEFORE THE SPEAKER'S BOX PRINTS TWICE. On the
   "Which word do you hear?" line the speaker rides inside the line's last no-wrap box (js layTokens' `end`: .cl-hear-chip).
   Where that box goes to a second line, WebKit lays the text just before the break on BOTH lines: lesson 20 at 1536x735
   printed もっと＿店を / を知っています。, and lesson 29 on master 日本のチームはとても / とても＿です。 (one text node, two
   boxes, every run). With the speaker's box an inline-block the engine lays it as one piece and the text prints once; the
   line breaks where it broke and its block does not move. The fault is WebKit's, so the rule hangs on the root that does
   NOT carry the Chromium mark (js chromiumEngine sets data-cl-engine="chromium" at mount): in Chrome this selector matches
   nothing and no computed style changes. (An empty box at each hold's end mended the first line and not the second.) */
#kotobaLesson:not([data-cl-engine="chromium"]) .cl-hold:has(> .cl-hear-chip) { display: inline-block; text-indent: 0; }
/* ⭐ 6 November 2026 (lesson 28's いい店を紹介してください。, its 。 alone at the head of the next line on its example page at
   1280x900 and 1680x1050): A HELD UNIT WIDER THAN ITS LINE PARTS AT ITS SEAM, AND NOWHERE ELSE (js teSeamHTML: sentLineHTML,
   layTokens). Inside the unit's no-break box (.cl-hold--seam) the one join it may part at, a te form and its auxiliary
   (紹介して / ください。), is an empty box that wraps and holds a word joiner of its own. The joiner forbids a break there
   while the unit fits its line (UAX #14: no break before or after U+2060), so the unit moves whole to the next line as
   before; once the unit alone is wider than its line, the line's last resort (overflow-wrap: anywhere) finds the seam, the
   one place the box leaves open, and the 。 rides inside the box with its word. The joiner is the sheet's, never the text's. */
#kotobaLesson .cl-te-seam { white-space: normal; }
#kotobaLesson .cl-te-seam::before { content: '\2060'; }
/* ⛔ THE BASE INK IS IN :where(), SO A HOVER CAN WIN. .cl-say:hover and this
   rule tied at (0,2,0) and source order handed the tie to the base colour:
   no sentence on the page ever answered the pointer (S0, 2026-09-06). The
   settle clock's JP-line colours are :where()'d for the same reason — and
   BECAUSE they are, they tie with this rule at (0,0,0), so they must come
   AFTER it. Written before it (the clock block above), they lost the tie and
   the JP line never veiled: the learner saw the sentence with a hole where
   the answer word was (.cl-sent-hit is a real class and veiled), then the
   word, then the English — the wrong-way-round reveal the owner caught on
   lesson 7 (since S0). No @layer in this sheet: source order is the law. */
:where(.cl-sent [lang="ja"]) { color: var(--cl-ink); }
:where(.cl-settled--clocked .cl-sent--settled [lang="ja"]) {
    color: transparent;
    transition: color 420ms var(--ease-settle, ease);
}
:where(.cl-settled--clocked.cl-settled--said .cl-sent--settled [lang="ja"]) { color: var(--cl-ink); }
/* …and its LIFT takes the clock's 420ms. The colour stays in :where() so the
   hover can win it, but `transition` is a separate property and .cl-say
   (0,1,0 — stamped on this very span by voiceSentences at the record's row
   beat, before 'said') out-ranks the :where() pair on it (a rule in :where()
   contributes ZERO, whatever is inside it): the JP line would ink in
   150ms while the target word and the English take 420 — a short copy of the
   hole. A real-class selector (0,3,0) carries the transit alone. */
.cl-settled--clocked .cl-sent--settled > [lang="ja"] { transition: color 420ms var(--ease-settle, ease); }
.cl-sent-en { display: block; font-size: var(--e3); color: var(--cl-quiet); margin-top: 0.45rem; }
/* today's word inside its own example: the day's dark orange (--cl-hit, the
   owner's item 5, 18 October 2026: the brush brown it wore read as the line's
   sumi), and WEIGHT with it. ⛔ Colour alone could not carry this at reading
   size, and the word the sentence exists to show read as unmarked. Weight is
   the mark; the colour says which mark it is. Still no box and no pill: the
   door pills stay doors. ⛔ The clock stages COLOUR only, so the weight never
   changes mid-settle. */
.cl-sent-hit { color: var(--cl-hit, #9A4A16); font-weight: 600; }

/* ── 4 · the seam ────────────────────────────────────────────────────────── */
.cl-seam { padding-top: var(--cl-origin-page); }
/* ⭐ ROUND 2 (CT-2), AMENDED BY THE OWNER'S ITEM 5 (18 October 2026): DARK
   ORANGE MEANS ONE THING, the word this lesson teaches today (--cl-hit): the
   word in its own example (.cl-sent-hit), this card's slice of a reading and
   its kanji under the seats (.cl-rg--now, .cl-bk--now), and the chapter's cards
   on the leaf (.cl-tk--today; its cards alone since U-044, 26 October 2026), on
   the seam line, the readback, the beat line and the night paper (.cl-chap).
   Those lines read in the reading ink and the runner marks the chapter's
   words. The headwords, the titles and the chrome keep the brush brown. */
.cl-seam-line { font-size: var(--k4); margin: 1.8rem 0 0; }
.cl-seam-jp { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k4); color: var(--cl-ink); }
.cl-chap { color: var(--cl-hit, #9A4A16); }
/* the line's own quiet English, directly beneath it — the one sentence on
   the stop-or-go screen must be readable (a teacher's ASIDE was cut from
   this seat: an explainer is not what the line means) */
.cl-seam-en {
    margin: 0.5rem 0 0;
    font-size: var(--e3);
    line-height: 1.6;
    color: var(--cl-quiet);
    max-width: 34em;
}

/* ── 5b · second sounds ──────────────────────────────────────────────────── */
/* ⛔ it had no origin at all, so it began at the stage's own top edge — the
   eyebrow landing under the standing mark, the one station in the lesson
   that opened crushed against the chrome */
/* ROUND 2: the second-readings screen is a four-thing page that scrolls on
   every glass; it opens where a page opens, not a quarter down like a
   one-thing ask (at 1080 that alone cost 200px of scrolling) */
.cl-second-screen { padding-top: var(--cl-origin-page); }
/* ⛔ ONE LEFT EDGE (2026-09-23, design review L2, item 26): the glyph and its
   ledger are the row; the why-line, its response and the sentence hang under
   it from the column's edge, where every other screen in the lesson reads. */
.cl-secondrow { margin-bottom: 2.2rem; }
.cl-second-head { display: flex; gap: 1.4rem; }
.cl-second-k { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k3); line-height: 1; color: var(--color-jp-text, #2A231F); }
.cl-second-body { flex: 1 1 auto; min-width: 0; }
.cl-secondrow > p { margin: 0; font-size: var(--e2); line-height: 1.7; }
/* ⭐ S10: THE LEDGER. glyph · the word it was met in (the sound the learner
   has) · the word it wears the new sound in. The seat under the new word is
   ONE grid cell holding both the two kana tiles and the reading, laid at
   mount: the press swaps ink and never geometry. The response seat below the
   why-line is held for its one line from the start (measured: every response
   the copy can make fits one line at 34em). */
.cl-second-screen .cl-second-ask-line { margin: 0 0 1.8rem; font-size: var(--e2); color: var(--cl-ink); }
.cl-ledger { display: flex; flex-wrap: wrap; gap: 0.6rem 2.6rem; align-items: flex-start; margin: 0 0 0.9rem; }
.cl-lg { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.cl-lg-w { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k4); line-height: 1.2; color: var(--cl-ink); }
.cl-lg-k { color: var(--color-jp-text, #2A231F); }
.cl-lg-r { font-style: normal; font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k6); line-height: 1.2; color: var(--cl-quiet); }
.cl-lg-seat { display: grid; align-items: center; justify-items: start; min-height: 2.3rem; }
.cl-lg-seat > * { grid-area: 1 / 1; }
.cl-lg-seat--asked .cl-lg-r--new { visibility: hidden; }
.cl-lg-seat:not(.cl-lg-seat--asked) .cl-lg-r--new { animation: cl-unfold var(--cl-t-ink) var(--ease-settle, ease) both; }
.cl-lg-opts { display: inline-flex; gap: 0.45rem; }
.cl-lg-o { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k5); padding: 0.3rem 0.7rem; min-height: 2.3rem; line-height: 1.2; }
.cl-secondrow > .cl-second-why { margin: 0 0 0.6rem; max-width: 34em; }
.cl-secondrow > .cl-second-r { margin: 0 0 0.9rem; min-height: 1.75em; line-height: 1.75; max-width: 34em; color: var(--cl-ink); }
.cl-secondrow--form > .cl-second-head { margin-bottom: 0.6rem; }
.cl-second-r:not([data-veil]) { animation: cl-unfold var(--cl-t-ink) var(--ease-settle, ease) both; }
.cl-secondrow--form { margin-top: 0.4rem; }

/* ── 6 / 8 · the set and the check: bare paper ───────────────────────────── */
/* One item on an empty sheet, composed rather than dropped in the corner:
   it begins a fifth of the way down, which is where the eye lands first, and
   the sentence is the first thing there. Nothing counts it. */
/* ⛔ ONE LEFT EDGE. The item was auto-CENTRED on its 34em measure inside a
   680px stage while the station's own opening line stood at the stage's edge
   — two left edges 68px apart on the same screen, and neither of them the
   line every other station reads on. The measure is right and the centring
   was what made it a second spine: the item keeps 34em and hangs, with the
   line above it and the foot below it, off the one edge. */
.cl-set { padding-top: var(--cl-origin-ask); }
/* ⛔ A SENTENCE ITEM IS SEATED FOR ITS REVEAL (2026-09-23, design review L2,
   item 9). The check's sentence sections (4 Read the sentence, 5 Write it back)
   are the workbook's tallest items: the sentence, its English seat, the rack,
   the record (section 5 rewrites the sentence in it) and a note seat sized for
   the option's note, the item's note and the comeback line. Measured at
   1280x900 with the header's box held (item 3), the tallest (5.4, a two-line
   sentence) is 631px, 42.2 units with its 5.4rem seat (42.5 leaves a hair),
   and eleven of the thirteen ran 15-114px past the glass with the way on under
   the fold. The
   review asked for --cl-origin-ask to be re-measured against it; moved for
   every ask, that would lift the card's ask page and the rail by ~115px at 900
   (the top-hugging block of #77), so it is re-measured HERE: the ask origin,
   lowered only as far as the tallest sentence item needs, never above the page
   origin. Every item of these two sections holds one sentence line, so the
   seat stays one through the section (item 3); a chant (.cl-gapline--run) is
   section 7's and keeps the ask origin.
   ⛔ OVERRIDDEN 2026-09-23 (design review L2, item 9's walk): ONE SEAT FOR THE
   WHOLE CHECK. Seated for the sentence sections alone, sections 4 and 5 stood
   115px higher than 6 and 7 at 1280x900 (head at 136 against 251), so the ask
   and the hand jumped at 5 → 6 inside the one station, and again from the page
   into section 4: a third origin inside one room. The check is one station
   and takes one seat, the one its tallest item needs, for every section in
   it, 4 to 7 (the page it follows opens at the page origin, a line above).
   The practice before the page (sections 1 to 3, .cl-set without .cl-check)
   keeps the ask origin: a quarter down, one seat for its own three sections.
   ⛔ OVERRIDDEN 2026-09-24 (design review L2, walk 3): ONE SEAT FOR THE WHOLE
   WORKBOOK. Held at the ask origin, sections 1 to 3 stood 115px lower than 4
   to 7 at 1280x900 (head at 251 against 136): the workbook jumped between
   section 3 and section 4 with the page between them, and the check sat higher
   than every other station. The workbook is one book of items; all of them,
   sections 1 to 7 (.cl-set--wb, the runner's renderWorkbookItem), take the seat
   the tallest sentence item needs, so head and cue stand at one height on
   every item. The card's own ask page keeps the ask origin (#77, the
   top-hugging block), and so do the repair and a v1 set (.cl-set alone); a v1
   check (.cl-set.cl-check) keeps the check's seat. */
.cl-set.cl-check,
.cl-set.cl-set--wb {
    padding-top: max(var(--cl-origin-page), min(var(--cl-origin-ask), calc(var(--cl-glass) - 42.5 * var(--cl-u))));
}
/* IMM-6 (round 2): a place's plate above the first item of that place, at the
   reading measure, and the ask keeps its own seat beneath it.
   ⛔ THE MEASURE IS THE LESSON'S UNIT, and the plate and the item take it
   TOGETHER so their edges cannot drift: `.cl-gapline` inside the item is --k4
   and grew with the glass while a 34em cap stayed at 544px, so the practice
   line fitted 16.6 glyphs on a small screen and 13.9 on a big one — the same
   inversion the payoff sentence had (polish round, 2026-09-13). */
.cl-set .cl-vig { width: min(100%, calc(34 * var(--cl-u))); margin-bottom: 1.6rem; }
/* a scene plate IS the item's opening: the ask sits under it at the page origin, not a quarter down, so the record and the way on still fit a 1080 glass */
.cl-set:has(> .cl-vig) { padding-top: var(--cl-origin-page); }
.cl-set .cl-station-line,
.cl-set .cl-item { max-width: calc(34 * var(--cl-u)); margin-left: 0; margin-right: auto; }
.cl-gapline {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
    line-height: 2;
    margin-bottom: 0.6rem;
    color: var(--cl-ink);
}
/* a line whose record seat is empty (no English authored) keeps its old air */
.cl-gapline + .cl-hand { margin-top: 1.2rem; }
/* ⭐ A CHANT IS A RUN, NOT A PARAGRAPH. 一　二　＿　四 … 十 is nineteen
   full-width cells at --k4; on the 34-unit reading measure it broke after 八
   and orphaned 九 十 on a second line — the one thing an item about reading
   一〜十 as ONE run must not do. The item that holds a run takes the COLUMN
   instead of the prose measure; the measure is for prose, and this is not
   prose. (The run still breaks on a phone, where nothing else would fit.) */
.cl-set .cl-item:has(> .cl-gapline--run) { max-width: 100%; }
/* ⛔ A SENTENCE NEVER BREAKS INSIDE A WORD, IN THE WORKBOOK TOO (2026-09-23,
   design review L2, item 8). The leaf's law (S5) never reached the workbook:
   at the 34-unit measure 「三万八千円です。」 broke as 三万八千円で / す, and three
   kana readings sat 2 + 1, the third looking like another kind of thing. The
   Japanese line breaks only where the runner lays a break (after 、 。 」, js
   markedHTML), and an item that holds a sentence or a kana rack takes the
   column (46 units, capped by it) the way the chant already does. The MEASURE
   STILL BELONGS TO THE ENGLISH: every English line inside an item keeps the
   prose measure, whatever width the Japanese line was given. */
.cl-set .cl-gapline,
.cl-set .cl-cue[lang="ja"] { max-width: none; word-break: keep-all; overflow-wrap: anywhere; }
.cl-set .cl-item:has(> .cl-gapline),
.cl-set .cl-item:has(.cl-rack--kana) { max-width: min(100%, calc(46 * var(--cl-u))); }
.cl-set .cl-item .cl-verdictnote,
.cl-set .cl-item .cl-sent-en { max-width: calc(34 * var(--cl-u)); }
/* ⛔ AND THE RULE UNDER A RIGHT ANSWER ENDS WITH ITS SENTENCE (2026-09-24,
   design review L2, walk 3). The record's hairline (.cl-record--sent's
   border-bottom) is drawn by the record's box, and the box took the item's
   width: once item 8 gave a sentence item the 46-unit column, a right answer
   in "Write it back" drew its rule from x 254 to 1019 under a sentence about
   420px wide. The record shrinks to its own content, the sentence and its
   English (still on the 34-unit prose measure), never past the item, so the
   rule ends where the sentence ends and nothing inside it wraps anew. */
.cl-set .cl-item .cl-record--sent { width: fit-content; max-width: 100%; }
/* the gap in a printed sentence is the same well, set inline in the line.
   ⭐ It wears a WRITING LINE: the wash alone was near-invisible on stone
   paper, and a gap the eye cannot find is a question the sentence never
   quite asks. The underline stays under the landed answer — the seat that
   was filled, not erased. */
.cl-blank {
    display: inline-block;
    min-width: 1.9rem;
    padding: 0 0.15em;
    border-radius: 8px 8px 0 0;
    background: rgba(var(--cl-sh), 0.045);
    border-bottom: 2px solid rgba(42, 35, 31, 0.4);
    text-align: center;
}
/* S2: the landed answer keeps its writing line and drops the wash — geometry
   unchanged, only the ink; the reading rides as ruby when the record inks */
.cl-blank--filled { background: none; }
/* ⛔ the ruby must not grow the line: a ruby annotation box adds its own
   height to a line box (+5px measured, and every seat below moved), so the
   reading floats over the blank, out of the flow, in the room the k4 line's
   double leading already leaves above the glyph */
.cl-blank { position: relative; }
/* ⛔ AND THE READING OVER A BLANK IS ONE WORD (2026-09-23, design review L2,
   item 8): held between the blank's two edges (min-width 1.9rem) a three-mora
   ひゃく wrapped at 0.42em into ひゃ / く. It stands on one line, centred on the
   blank, however wide it is. */
.cl-blank-r {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    white-space: nowrap;
    top: -0.02em;
    text-align: center;
    font-size: 0.42em;
    font-weight: 600;   /* (U-051: the readings' one cut) */
    line-height: 1;
    color: var(--cl-quiet);
    letter-spacing: 0.04em;
    pointer-events: none;
}
/* ⭐ THE COVER LAW'S TWO FINDS (the cover census of 9 November 2026, every screen of lessons 1 to 30 at 1280x900, 1680x1050
   and 2000x1150, the same before and after the door's fix): two marks that are never pressed stood over a press, unseen.
   (1) AN EMPTY WELL TAKES NO PRESS. The well holds its answer's width in full-width spaces (the listen item's, a gap's);
   the spaces at the end of its line hang, so the centred well laid them from its middle rightward, 64 px past its own
   edge on lesson 30's 信号が青に＿＿。, over the 。 and the left half of the speaker chip (Hear it) after it; the whole
   chip on lesson 16's line, the word door 店 after the well on lesson 20's. The answer fills it (cl-blank--filled), and
   only then does it print anything a learner could point at.
   (2) THE OPTIONAL PREFIX TAKES NO PRESS (js optHTML: "never a door"). At the portrait head's size the (お) of (お)薬,
   (お)昼, (お)肉, (お)魚, (お)店 and (お)花 laid a line box 250 px tall, its own layer (its opacity) over the eyebrow's
   名詞, whose 名 is a kanji door: two of that door's five points answered to the (お) (lessons 17 to 20 and 23).
   Neither rule moves a box: the screens print as before, and the press under each mark is whole. */
#kotobaLesson .cl-blank:not(.cl-blank--filled),
#kotobaLesson .opt-mark { pointer-events: none; }
/* the asked word is marked in the brush ink the gap blank already uses —
   indigo stays reserved for things that answer the pointer */
/* ⭐ v2.2 · AND THE MARKED WORD IS AN ASKED WORD. A workbook sentence marks
   one word with 【 】; the runner strips the brackets and wraps what was inside
   in <em class="cl-marked">. It takes THIS mark and no other — an underline
   means one thing in this book, the word being asked, and a second dress for
   the same meaning is a second grammar to learn.
   ⛔ NEVER BOLD AND NEVER ITALIC. <em>'s own dress would set the Japanese in a
   synthesised oblique, which Klee has no cut for, and weight on a Japanese run
   is a shape change, not an emphasis. */
.cl-target,
.cl-marked { text-decoration: none; border-bottom: 2px solid rgba(42, 35, 31, 0.4); padding-bottom: 1px; }
.cl-marked { font-style: normal; font-weight: inherit; }
/* ⭐⭐ U-038 (the deep review of 25 October 2026, the owner's go of 26 October): ON "Which kanji?" THE ANSWER INKS INTO ITS
   LINE. The marked kana keep their seat and its writing line; over them, laid at mount and veiled, the kanji with its
   reading floated over it as the listen item fills its blank (.cl-blank-r), centred on the kana's own box and set on the
   line's own leading so its glyph sits on the kana's baseline; at the record's beat it inks (js inkWithRecord: the held
   seat's bloom) and the kana's ink goes, so the sentence stands filled where it was read and nothing in the line moves.
   Inked, the kanji is the line's word for the asked token: the sentence's one path lays its door there (js laySentWords
   at openNow), so a press on it opens its card as any taught word's does. js gapMarkedHTML. */
.cl-marked--gap { position: relative; white-space: nowrap; }
.cl-marked--gap > .cl-marked-k {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    line-height: 2;
    text-align: center;
    white-space: nowrap;
}
.cl-marked--gap:has(> .cl-marked-k:not([data-veil])) > .cl-marked-kana { visibility: hidden; }
/* ⭐ U-038 (b): THE LOOK-ALIKE PAIR ON A "Which kanji?" MISS, in the aside's 似ている dress (css/course-book.css .cb-alike):
   the two glyphs side by side at k3, the answer first in moss, the twin the learner pressed in the quiet ink, each with its
   one line under it in the teacher's face; the comeback line under the pair. It replaces the option's paragraph and inks
   in the note seat, which was sized for it at mount (js reserveNote over gapMissNotes), so nothing moves. js gapPairTell. */
.cl-gpair { display: flex; align-items: flex-start; gap: calc(1.6 * var(--cl-u)); max-width: calc(34 * var(--cl-u)); margin: 0; }
.cl-gpair-c { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.cl-gpair-k { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k3); line-height: 1; color: var(--cl-quiet); }
.cl-gpair-c--answer > .cl-gpair-k { color: rgb(var(--cl-moss-ink)); }
.cl-gpair-l { margin: 0.4rem 0 0; font-family: var(--cl-font-tell); font-size: var(--e3); line-height: 1.5; color: var(--cl-ink); text-wrap: pretty; }
.cl-gpair + .cl-comeback { margin-top: 0.6rem; }
/* ⭐ T3 revised (3 November 2026): a table look-alike the box never named is told bare, the two glyphs side by side with no
   line under them (gapPairTell): each cell as wide as its glyph, so the two stand together */
.cl-gpair--bare .cl-gpair-c { flex: 0 0 auto; }
/* ⭐ J-04 (the deep review's repair round 1, 26 October 2026): THE PAIR'S TIGHT DRESS. Where the pair and its promise cannot
   clear the foot by the page's inner air even with the station's top air given (js yieldAir, tightPair), the note seat is
   measured again in this dress and the settle inks into it: the two glyphs side by side as ever, and beside them, in one
   band, the answer's line alone, then the promise under the band; the twin's line goes, its glyph stays, so the pair is
   still seen (lesson 14's 友達 / 後 ran 72 px past the glass at 1280x900 with both lines under the glyphs). */
.cl-verdictnote--tight .cl-gpair { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 0 calc(1.6 * var(--cl-u)); align-items: center; }
.cl-verdictnote--tight .cl-gpair-c { display: contents; }
.cl-verdictnote--tight .cl-gpair-c--answer > .cl-gpair-k { grid-row: 1; grid-column: 1; }
.cl-verdictnote--tight .cl-gpair-c--chosen > .cl-gpair-k { grid-row: 1; grid-column: 2; }
.cl-verdictnote--tight .cl-gpair-c--answer > .cl-gpair-l { grid-row: 1; grid-column: 3; margin: 0; }
.cl-verdictnote--tight .cl-gpair-c--chosen > .cl-gpair-l { display: none; }
/* the English cue that leads an item — the one English step that leads a page.
   v2.2's workbook cue is the same line under its own name, so the two can
   never drift apart. */
.cl-cue,
.cl-wb-cue {
    /* ⭐ U-055 (the deep review of 25 October 2026; the type rule of 10 October): the cue is the teacher's English, so it
       is set in the teacher's face, as every other sentence's English is */
    font-family: var(--cl-font-tell);
    font-size: var(--e1);
    margin-bottom: 1.6rem;
    color: var(--cl-ink);
}
.cl-cue[lang="ja"] { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k4); }
.cl-built--k { margin-bottom: 0.9rem; }
.cl-yours--k { font-size: var(--k4); }

.cl-listen { margin-bottom: 1.8rem; }

/* ── the workbook: seven sections, one item to a screen (v2.2) ───────────── */
/* ⭐ THE SECTION SPEAKS ONCE. Its number, its title and its one instruction
   print above the FIRST item; every item after that carries a running head
   instead, which says which section the hand is in and how far. ⛔ And nothing
   else grows above an item: a workbook lesson has no frame_en, because the
   header IS the frame, and two lines of standing prose over a four-word ask is
   the exercise book this course was written to replace. */
.cl-wb-head {
    margin: 0 0 1.6rem;                    /* the station line's own air */
    max-width: calc(34 * var(--cl-u));     /* and the item's one measure */
}
/* ⭐ THE SECTION'S NUMBER IN THE COURSE'S HAND (2026-09-24, design review L2,
   stage 2, ruling 12). OVERRIDES the chrome-face law for this one mark: the e4
   arabic "1" above the title read as a footnote sign, on 59 screens that had
   nothing of the course's hand until the reveal. 一 to 七 in Klee at k4, in the
   brush brown, on the title's line before it; line-height 1 so the title's
   line box stays inside the header's 5.2-unit seat (items 1 and 2 of a section
   keep one seat). The running head keeps its arabic count. */
.cl-wb-num {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
    font-weight: 400;
    line-height: 1;
    margin-right: 0.45em;
    color: var(--color-jp-text, #2A231F);
}
.cl-wb-title {
    margin: 0;
    font-size: var(--e1);
    font-weight: 600;
    line-height: 1.3;
    color: var(--cl-ink);
}
/* ⛔ THE INSTRUCTION IS NOT THE TEACHER'S PROSE. It names an action for the
   hand ("Choose the kanji for the marked word.") the way every ask in this
   room does, so it stays in the chrome face — it is deliberately NOT in the
   teacher's cut — and steps back into the quiet ink under the title it
   belongs to. */
.cl-wb-instr {
    margin: 0.35rem 0 0;
    font-size: var(--e2);
    line-height: 1.7;
    color: var(--cl-quiet);
}
/* items 2..n: one micro-label saying where the hand is, at the smallest
   English step and in the one tracking every micro-label in this sheet takes.
   It stands in the header's seat, so the item under it never moves. */
.cl-wb-run {
    margin: 0 0 1.6rem;
    max-width: calc(34 * var(--cl-u));
    font-size: var(--e4);
    letter-spacing: var(--e4-track);
    text-transform: var(--e4-case);
    color: var(--cl-quiet);
}
/* ⭐ ONE HEAD BOX FOR THE WHOLE SECTION (2026-09-23, design review L2, item 3).
   The sentence above claimed the run "stands in the header's seat", but the
   header is three lines (87px at 1280) and the run one (14px), and the block
   hangs from the ask origin: the cue and the rack rose 74px between item 1 and
   item 2 of every section, seven times a lesson, the one place the ask's seat
   was not kept. Both heads now take the header's box, the run seated at its
   floor, so the cue and the hand hold one seat through the section (5.2 units
   = the header's measured height at 1280 plus a hair; an instruction that
   wraps to a second line grows the header past it, and the box follows). */
.cl-wb-head, .cl-wb-run {
    min-height: calc(5.2 * var(--cl-u));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* ⭐ A BARE WORD IS A SPECIMEN, NOT AN ASK LINE. Section 2 prints the word
   alone and asks for the sound of it, so it takes the glyph rows' size — one
   step over the tiles that answer it, or the ask would be no larger than its
   own answer — and the ink every Japanese line inside an item reads in (the
   brush brown means one thing in this book, and it is "today's"). */
.cl-wb-word {
    margin: 0 0 0.3rem;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k3);
    line-height: 1.25;
    color: var(--cl-ink);
}
/* ⭐ THE WORD STANDS BARE AND ITS GLOSS INKS AT THE VERDICT (2026-09-23, design
   review L2, items 6 and 10). The gloss printed under the word answered the
   reading test; the record under the hand repeated the word, the reading and
   the gloss 180px below the seats. The gloss now keeps its seat under the word
   as the item's one record, veiled at mount at the line's own height (the seats
   do not move), and inks there on the record's clock. */
.cl-wb-word + .cl-record--gloss { margin: 0 0 1.6rem; }
.cl-record--gloss > .cl-gloss-line { display: block; }
/* ⭐ A KANA RACK KEEPS THE KANA HAND'S METRICS. Section 4's options are whole
   readings, dealt through the kanji rack's helper — so the modifier puts the
   tile back on the reading build's seat: a kana tile is narrower than a kanji
   tile, and a rack that says "kana" has to look like one before it is read. */
.cl-rack--kana .cl-tile {
    min-width: 2.9rem;
    padding: 0.55rem 0.7rem;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
}
/* ⭐ FOUR OPTIONS ARE THE ASK, so they are laid as a square and not as a row
   that happens to wrap — the odd one out is found by comparing four things at
   once, and a wrapped row hides that there are exactly four.
   ⛔ TWO COLUMNS AT EVERY WIDTH: minmax(0, 1fr) is what stops a tile's own
   min-width from collapsing the grid to one column on a 360px phone, and the
   cap stops the square stretching to the measure on a large glass. */
.cl-rack--four {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: min(100%, calc(20 * var(--cl-u)));
}
.cl-rack--four .cl-tile { min-width: 0; }
/* ⭐ MATCHING IS TWO COLUMNS AND THE HOUSE'S THREE MARKS. A cell IS a tile —
   same box, same hand, same verdicts — so the only things this block owns are
   the geometry and the ONE state a tile has never had: chosen, and waiting for
   its partner. A locked pair takes the moss seat and a wrong pair the stone
   wash, from the one mark grammar above; neither is redeclared here.
   ⛔ Two columns at every width. A row that wrapped would stand a left beside
   a right and say, in geometry, that they were already a pair. */
.cl-match {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem clamp(0.8rem, 3vw, 1.6rem);
    align-items: start;
    width: min(100%, calc(26 * var(--cl-u)));
}
.cl-match-col { display: flex; flex-direction: column; gap: 0.5rem; }
.cl-match .cl-tile,
.cl-match-o { width: 100%; min-width: 0; text-align: center; }
/* chosen, and nothing has answered it yet: the accent this room gives the
   thing under the hand, held — never a fourth verdict colour */
/* a tile held (the board's first pick, before its pair): the slip it was, its edge and its ink in the accent. A ring for a
   STATE, never at rest: the seat's own 1 px transparent border takes the colour, so nothing moves. (The elevation's step 1
   first gave it a breath of the accent instead, and the review round of 1 November 2026 measured that wash 1.06:1 from a
   locked pair's moss: the pick read as a third finished tile.) */
.cl-match-o--sel,
.cl-tile--sel { border-color: var(--cl-accent); background: var(--cl-sheet); color: var(--cl-accent); }
/* a locked pair is spent furniture: it keeps its moss seat and gives up its hand */
.cl-match-o--paired { pointer-events: none; }
/* ⭐ A SEAT ROW THAT BREAKS. Section 7 seats a whole set — seven days, or the
   ten numbers — and a kanji seat is 3rem, so seven of them run 23.4rem and ten
   run 33.6rem: past a phone's column either way. The row breaks rather than
   scrolls, and gains the one air a broken line needs. ⛔ Nothing else changes:
   a seat is the same rule on paper on the second line as on the first. */
.cl-seats--wrap { flex-wrap: wrap; row-gap: 0.6rem; }

/* ── 7 · the question and its doors ──────────────────────────────────────── */
.cl-q { margin-top: 2.6rem; }
.cl-q-ask { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k4); margin-bottom: 1.3rem; }
.cl-doors { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1.8rem; }
/* born hidden on the first read (the doors open on the answered question):
   an author display needs its own [hidden] reset (the house's hidden law) */
.cl-doors[hidden] { display: none; }

/* ── 8b · the way home: the find-everything painting ─────────────────────── */
/* The painting runs wide, like the door's, and everything else on the page
   keeps the reading column. ⛔ The zones over it are INVISIBLE: a picture with
   boxes drawn on it is a diagram, and the page's whole claim is that the town
   reads as a town. The cursor is the only tell, and it tells the truth. */
.cl-stage[data-screen="pano"] { width: 100%; }
/* ⛔ AND IT STILL STARTS ON THE SPINE. Centred on its own width the street
   began 180px left of every other station — the widest page in the lesson
   was also the only one that moved the margin the eye had been reading down
   all evening. It hangs off the column's left edge and runs RIGHT from there;
   the line, the row of found words and the way on hang off the same edge.
   ⛔ The width is capped in vw, never in %: .cl-pano-art's height is a calc
   off this number, and a percentage inside a height resolves against a
   height. 340px is the column's own half — the same constant the rail
   hangs on, and the two must agree or the street and the column part. */
.cl-pano {
    --cl-spine: max(0px, calc((100% - var(--cl-col)) / 2));
    --cl-pano-w: min(980px, 50vw + 340px - 1.5rem, 92vh);
    padding-top: var(--cl-origin-page);
}
.cl-pano-line,
.cl-pano-found {
    width: var(--cl-pano-w);
    margin-left: var(--cl-spine);
    margin-right: auto;
}
.cl-pano-line {
    font-size: var(--e2);
    line-height: 1.7;
    color: var(--cl-ink);
    margin-top: 0;
    margin-bottom: 1.4rem;
}
/* sized from ONE number so the box keeps the painting's ratio exactly — the
   scene layer's coordinates are the image's own, and a box a few percent off
   the ratio puts the station board off the station */
.cl-pano-art {
    position: relative;
    width: var(--cl-pano-w);
    height: calc(var(--cl-pano-w) / 1.5);
    margin: 0 auto 1.3rem var(--cl-spine);
    border: 1px solid var(--cl-rule);
    overflow: hidden;
    container-type: size;
}
.cl-pano-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ⛔ ONE CURSOR, EVERYWHERE ON THE PAINTING. Eight invisible hotspots each
   flipping the pointer drew the answers in the cursor: a learner could sweep
   the street and read the map off their own mouse without looking at the
   picture once. The whole painting takes the press, the hit test is geometry,
   and what tells you anything is ink. */
.cl-pano-art { cursor: pointer; }
.cl-pano-art:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
.cl-pano-marks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* ⛔ WHAT LIVES IN THE PAINTING SITS ABOVE THE PAINT — the veil over a painted
   word has to be over it to soften it, and a typeset board takes its own press.
   Neither swallows the painting's press: the veil takes none at all. */
.cl-pano-art .cl-scene { z-index: 3; }
/* the word standing BESIDE what it names: a chip of washi with the word in ink
   and its sound small underneath, the tanzaku's own paper so it reads over
   rain, with a hairline run back to the thing itself. ⛔ It never sits ON its
   referent — a tag laid over a silhouette hides the one thing it points at,
   and over the painted board it would print 駅 twice. It arrives in INK ALONE. */
.cl-pano-blooms { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* the leaders live in the painting's own 100×100 space, so an endpoint lands
   on its referent at every size while the stroke stays a hairline */
.cl-pano-leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cl-pano-leads line {
    stroke: rgba(88, 76, 60, 0.6);
    stroke-width: 1.5;
    opacity: 0;
    transition: opacity 420ms var(--ease-brush, ease);
}
.cl-pano-leads line.cl-pano-lead--in { opacity: 1; }
/* ⛔ AND THE LEADER LANDS ON A POINT, NOT IN THE AIR. A line that simply stops
   somewhere over a car reads as a line that missed; a dot ON the thing is what
   makes the tag point. It is DOM rather than svg because the leaders' viewBox
   is stretched to the painting's shape, and a circle drawn in there comes out
   an ellipse. */
.cl-pano-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    border-radius: 50%;
    background: rgba(88, 76, 60, 0.75);
    opacity: 0;
    transition: opacity 420ms var(--ease-brush, ease);
}
.cl-pano-dot--in { opacity: 1; }
/* ⭐ THE BOARD THAT NEEDS NO TAG. 駅 is painted onto the station in the brush's
   own hand, so a washi chip beside it would print the word twice. What it wears
   is the light a thing wears while it is being said — the picture's own lamp
   coming up on it, and gone again when the word is done. */
.cl-pano-glow {
    position: absolute;
    border-radius: 4px;
    border: 1px solid rgba(88, 76, 60, 0.5);   /* gap-3: an edge a still and a reduced-motion reader can see */
    background: radial-gradient(closest-side, rgba(255, 244, 214, 0.55), rgba(255, 244, 214, 0));
    opacity: 0;
    transition: opacity 520ms var(--ease-brush, ease);
}
.cl-pano-glow--in { opacity: 1; }
/* ⛔ A MISS IS INK AND NOTHING ELSE — it makes no sound, it leaves no mark, and
   nothing anywhere counts it. The ripple says "not there" where the hand
   landed; the second miss in a row makes the PLACE breathe, which is the only
   teaching a learner who cannot find something actually needs. */
.cl-pano-ripple {
    position: absolute;
    width: 2.4rem;
    height: 2.4rem;
    margin: -1.2rem 0 0 -1.2rem;
    border-radius: 50%;
    border: 1px solid rgba(88, 76, 60, 0.55);
    opacity: 0;
    animation: cl-pano-ripple 600ms var(--ease-brush, ease) both;
}
@keyframes cl-pano-ripple {
    0%   { opacity: 0.75; transform: scale(0.35); }
    100% { opacity: 0; transform: scale(1); }
}
/* ⛔ AND IT HAS AN EDGE. A wash alone is invisible on the half of a painting
   that is already pale — 雨's own place is the SKY, so a soft light over it
   said nothing at exactly the moment the learner needed telling. The mark is
   a ring with the light inside it: legible over rain, road or lit window, and
   the same mark a reader who asked for less motion gets standing still. */
.cl-pano-breathe {
    position: absolute;
    border-radius: 8px;
    border: 1px solid rgba(88, 76, 60, 0.5);
    background: radial-gradient(closest-side, rgba(255, 255, 251, 0.42), rgba(255, 255, 251, 0));
    opacity: 0;
    animation: cl-pano-breathe 900ms var(--ease-settle, ease) both;
}
@keyframes cl-pano-breathe {
    0%, 100% { opacity: 0; }
    45%      { opacity: 1; }
}
/* the same two meanings, standing still, for a reader who asked for less
   motion: at the press for "not there", over the place for "here" */
.cl-pano-hint {
    position: absolute;
    min-width: 2.4rem;
    min-height: 2.4rem;
    border-radius: 8px;
    border: 1px solid rgba(88, 76, 60, 0.55);
    background: radial-gradient(closest-side, rgba(255, 255, 251, 0.42), rgba(255, 255, 251, 0));
    opacity: 0;
    transition: opacity 160ms var(--ease-settle, ease);
}
.cl-pano-hint.cl-mark--in { opacity: 1; }
.cl-pano-bloom {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    padding: 0.2rem 0.5rem 0.25rem;
    background: rgba(255, 255, 251, 0.9);
    border: 1px solid rgba(88, 76, 60, 0.22);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(var(--cl-sh), 0.14);
    opacity: 0;
    transition: opacity 420ms var(--ease-brush, ease);
}
.cl-pano-bloom--in { opacity: 1; }
.cl-pano-bloom b {
    font-family: var(--font-jp, 'Klee One', serif);
    font-weight: 400;
    font-size: var(--k5);
    line-height: 1.2;
    color: var(--color-jp-text, #2A231F);
}
.cl-pano-bloom i {
    font-style: normal;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k6);
    line-height: 1.2;
    color: var(--cl-quiet);
}
/* ⛔ SLOTS, NEVER A SCORE. The row is seated EMPTY from the hand-over, one
   frame per word in the day's own order — the receipt of what the street
   holds. It never says how many are left, it never re-sorts under the hand,
   and its whole height is there from the start so nothing jumps as words land. */
.cl-pano-found {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.9rem;
    /* the row's whole height is there from the first breath — the ask is the
       tallest thing that will ever stand in it, so nothing jumps when a word
       lands or when the last ask leaves */
    min-height: 4.4rem;
    /* ⛔ margin-top/bottom ONLY: the row hangs off the painting's own left edge
       by the auto margins three rules up, and a flat `margin: 0` here silently
       un-centred the whole strip out past the page's left edge */
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}
/* ⛔ AND THE STREET'S ROW IS PAPER TOO. Eight underlined blanks along the foot
   of a painting is the same worksheet the racks were wearing, in the same
   lesson. A place not yet found is a DOT (the rail's own mark for exactly this
   meaning); the one being asked sits in the seat inlay, because that is what a
   place waiting to be filled looks like everywhere else on this surface; a
   word found needs no furniture at all, because the word is the mark. */
.cl-pano-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.1rem;
    min-height: 2rem;
    padding: 0 0.3rem;
    border-radius: 10px;
}
/* ⭐ S10: the waiting seat wears EXACTLY the rail's unmet dot (one token, one
   device — SCHEMA v3.3's "slots, never a score" stands, and so does the rail's
   own law that an unmet word is a dot) and takes only the width the dot
   needs, so a row of them reads as the rail's column turned on its side and
   not as a row of slots. One seat per spot; the frame's height stays reserved. */
.cl-pano-frame:empty { min-width: 0; width: 1.15em; padding: 0; }
.cl-pano-frame:empty::after {
    content: '';
    width: var(--cl-dot);
    height: var(--cl-dot);
    border-radius: 50%;
    background: var(--cl-dot-ink);
}
.cl-pano-frame--in { animation: cl-fade 460ms var(--ease-settle, ease) both; }
/* ⭐ THE ASK STANDS IN THE ROW, IN KANJI, AND IT IS THE LOUDEST THING THERE.
   No reading under it and no voice on it: those two are what finding it buys,
   and printing either here would answer the question it is asking. */
.cl-pano-frame--ask {
    background: rgba(var(--cl-sh), 0.045);
    padding: 0.1rem 0.5rem 0.15rem;
}
.cl-pano-frame--ask span {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k3);
    line-height: 1.15;
    color: var(--color-jp-text, #2A231F);
}
/* and a word already found rests with the reading it earned under it, on
   nothing: what it stands on is the page */
.cl-pano-frame--found { background: none; }
/* a found frame SPEAKS (it already prints the reading): ink under the
   pointer and no rule — the "sounds" half of the door grammar */
.cl-pfw {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    line-height: 1.15;
    border: 0;
    background: none;
    padding: 0.1rem 0.05rem;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
    color: var(--color-jp-text, #2A231F);
    cursor: pointer;
    transition: color var(--duration-fast, .15s) var(--ease-settle, ease);
}
.cl-pfw:hover { color: var(--cl-accent); }
.cl-pfw:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
.cl-pfw b { font-weight: 400; }
.cl-pfw i {
    font-style: normal;
    font-size: var(--k6);
    line-height: 1.2;
    color: var(--cl-quiet);
}
/* the street's one line: どこ？ while it is asking, in the duet every control
   in the room wears; the day's own closing sentence once it has been walked */
.cl-pano-line--ask {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}
.cl-pano-line--ask [lang="ja"] {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
    color: var(--color-jp-text, #2A231F);
}
.cl-pano-line--ask i {
    font-style: normal;
    font-size: var(--e3);
    color: var(--cl-quiet);
}

/* ── 9 · the close ───────────────────────────────────────────────────────── */
.cl-close { padding-top: var(--cl-origin-page); }
/* ⭐ THREE MOVEMENTS, AND THE WHITESPACE IS WHAT SAYS SO. The close read as a
   dozen peer blocks at near-equal gaps — a list of things that happened rather
   than an evening with a shape. Inside a chapter the blocks breathe on one
   short measure; between chapters the paper opens. ⛔ NO NEW RULES. A divider
   between chapters would say the same thing the air already says, and this
   room has spent four waves taking lines like that out. */
.cl-close-ch + .cl-close-ch { margin-top: 2.6rem; }
.cl-close .cl-close-ch > * { margin-top: 0; margin-bottom: 1.4rem; }
.cl-close .cl-close-ch > *:last-child { margin-bottom: 0; }
/* ⭐ THE CLOSE FITS THE GLASS (batch A fix round 1, item 4). Lesson 5's close
   ran 1009px on a 900px window (1076 on 1050) once a word came back next
   lesson: はじめから Start again stood under the fold on arrival and a scrollbar
   showed. The paper between chapters was 4.5rem (72px), twice; the chapters
   still part at 2.6rem, near twice the 1.4rem inside one, and the last quiet
   line (the horizon, Start again alone since the door out went to the foot)
   stands 1.8rem under the goodbye. The sign-off reads on one line, the
   Japanese then its English (the house duet, .cl-pano-line--ask), and the
   close ends on 4.4rem of paper (the section rule below), not 5.4. */
.cl-close-ch + .cl-close-ch--horizon { margin-top: 1.8rem; }
.cl-cert .cl-cert-voice > .cl-proof { margin-bottom: 1rem; }
/* the day's other bookend: the door's window at night, quieter than the door.
   ⭐ ROUND 2 (M5): WHOLE, at the column plate — 720×480, the seam's own
   dress — never the 28vh strip that cut 42% of the night away. The seed
   glyph is anchored in the PAINTING's own fractions (close.seed.at, percent
   of the image, centre-anchored like the panorama's zones), so it sits in
   the night glass on every screen. */
.cl-art--close { margin-bottom: 0.9rem; width: var(--cl-plate-w); aspect-ratio: 1.5; }
.cl-art--close img { height: 100%; }
/* ⭐ THE SEED: one kanji from tomorrow, in the night glass. Pale warm ink on
   the dark window — no blur, no glow, nothing that reads as an effect: it is
   a character seen through a window, and it is not the learner's yet. It
   carries no reading, no meaning and no press (the runner keeps it out of the
   kanji-home pass), so the only thing it can do is be noticed. */
.cl-seed-k {
    position: absolute;
    top: 13%;
    right: 24%;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k3);
    line-height: 1;
    color: rgba(216, 203, 176, 0.55);
    pointer-events: none;
}
/* anchored in the painting: the runner writes left/top from close.seed.at */
.cl-seed-k--at { right: auto; transform: translate(-50%, -50%); }
/* ⭐ THE TANZAKU: the day's last sentence set vertically, a narrow washi strip
   hung at the right edge of the window — the first vertical Japanese the
   learner reads, and it asks nothing. It arrives when the readback is done. */
.cl-tanzaku {
    position: absolute;
    top: 0.6rem;
    right: 3.5%;
    margin: 0;
    padding: 0.55rem 0.3rem;
    max-height: calc(100% - 1.2rem);
    /* lesson 8's signoff sets to 204px inside the 280px of glass, so the strip
       is comfortably within its window; a longer signoff owes a resize of the
       strip, never a column of kana running out of the painting's bottom edge */
    overflow: hidden;
    writing-mode: vertical-rl;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k6);
    line-height: 1.5;
    color: var(--color-jp-text, #2A231F);
    background: rgba(255, 255, 251, 0.9);
    border: 1px solid rgba(88, 76, 60, 0.22);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(var(--cl-sh), 0.14);
    opacity: 0;
    transition: opacity 700ms var(--ease-brush, ease);
    pointer-events: none;
}
.cl-tanzaku--in { opacity: 1; }
/* the RECEIPT: the day's words resting in one ink row, day order. A slip
   rests a shade paler — named nowhere, counted nowhere. A press speaks. */
.cl-receipt {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    /* ⛔ ONE GAP, WHATEVER HANGS UNDER A WORD (2026-09-23, design review L2,
       item 22). The kana under a slipped word (にじゅっぷん under 20分) is
       wider than the word and used to widen its box, so the row's gaps ran
       from 20px to 70px and the day's eight words lost their rhythm. The
       reading now hangs OUT of the flow (.cl-rcw-r), and the receipt holds
       its line for it: one k6 line under the last row, and the same line
       inside the row gap, so a wrapped row's readings never touch the words
       of the row below. (2026-09-24, design review L2, stage 2, the close:
       the reading is back in its cell's flow, in a 0-tall row, so the cell
       takes its width and the held line stays as it is; .cl-rcw-r.) */
    gap: calc(0.6rem + 0.15rem + 1.2 * var(--k6)) 1.4rem;
    margin: 0 0 1.7rem;
    padding: 0 0 calc(0.15rem + 1.2 * var(--k6));
}
/* S3: each word is a WORD DOOR (the card: reading, meaning, the disc, its
   kanji one step in) — a receipt that only made a sound was the one place
   the day's words could not be asked about. A row of nothing but doors rests
   bare; the hover wears the door grammar (below). */
.cl-rcw {
    position: relative;
    display: inline-block;
    padding: 0.1rem 0.05rem;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
    color: var(--color-jp-text, #2A231F);
    cursor: pointer;
}
.cl-rcw--slip { color: var(--cl-quiet); }
/* (THE MENDED WORD WORE ONE GOLD HAIRLINE from 24 September 2026, the concept
   book §4 "The close": a word the previous lesson's close promised back that
   held tonight. ⚖ 20 October 2026, the owner's "drop it": the kintsugi under a
   word that slipped and later held leaves every course surface, so the receipt
   prints the word bare; js/course-lesson.js still marks it, .cl-rcw--mend, the
   record's fact, and draws nothing with it.) */
/* S10: the reading the learner did not have, under the word that slipped.
   ⭐ A PALE WORD'S CELL IS AS WIDE AS THE WIDER OF ITS WORD AND ITS READING
   (2026-09-24, design review L2, stage 2, the close). OVERRIDES item 22's
   "the reading now hangs OUT of the flow" (the .cl-receipt note above): hung
   from the word's left edge, にじゅっぷん ran 37px past 20分 and ひゃくえん 24px
   past 百円, and where neighbours were pale their readings ran into each other
   and overprinted (the last walk, 1280x900), the risk item 22's own note named.
   The reading is back IN the cell's flow, as the second row of a grid whose
   second row is 0 tall: the cell is the word's height (the row's line, and the
   line the receipt holds under it and in its row gap, are item 22's, unchanged),
   the wider of the two in width, and the row's one 1.4rem gap stands between
   cells whatever hangs under them. The reading overflows its 0 row downward,
   from the spot it hung at before: the cell's 0.1rem padding + 0.15rem.
   Its inner span is one atomic inline, so the door's hover rule, which a grid
   hands down to its in-flow rows, stays under the word and never under the kana. */
/* ⛔⛔ ONE GAP AGAIN: THE READING HANGS, THE SLOT IS THE WORD'S (batch D1 fix
   round 1, item 9). OVERRIDES the grid above ("a pale word's cell is as wide
   as the wider of its word and its reading"): on lesson 5 at 1280 the pale
   words 心 こころ, 私 わたし and 10年 じゅうねん took wider slots, the row's gaps
   ran uneven, and it ran to x 982 while everything under it ended at x 830.
   The cell is the word's box again and the row's one 1.4rem gap stands between
   every two words; the reading hangs under the word from its left edge, out of
   the flow (position: absolute on the cell, which is position: relative), at
   the spot it stood before (the cell's 0.1rem padding + 0.15rem), and runs
   into the gap to its right where it is wider than the word. A decoration
   never reaches an absolutely placed box, so the door's hover rule stays under
   the word. ⛔ The residual risk item 22 named stands: two pale neighbours
   whose first reading runs more than the gap past its word would touch (none
   on lesson 5: じゅうねん runs 12px past 10年 into a 22px gap). */
.cl-rcw-r {
    position: absolute;
    left: 0.05rem;
    top: 100%;
    margin-top: 0.15rem;
    white-space: nowrap;
    font-style: normal;
    font-size: var(--k6);
    line-height: 1.2;
    color: var(--cl-quiet);
    pointer-events: none;
}
.cl-rcw-r > span { display: inline-block; }
/* ⛔ A ONE-LETTER GLOSS IN THE SERIF (batch D1 fix round 1, item 8; js
   glossInk): 私's "I" in Inter is a lone vertical bar (the told card's keyword,
   the gloss under 私 in Read the word, the record "私 I"). Set in the teacher's
   serif its I carries its serifs and reads as a letter. Size and ink stay the
   line's own. */
.cl-gl1 { font-family: var(--cl-font-tell, 'Literata', Georgia, serif); font-style: normal; }

/* ── the readback: the day, read back one line at a time ─────────────────── */
/* ⛔ NOTHING IS GRADED HERE and nothing is veiled but the English. The lines
   land on the learner's own press, in the reading face at reading size; the
   English sits under each one behind the readback's 英語 door (.cl-rb--en, the
   leaf's own door grammar), because the sentence that has to be read is the
   Japanese one and help is on the ask.
   ⭐ THE ENGLISH HAS A SEAT ONLY WHILE ITS DOOR IS OPEN (2026-09-24, design
   review L2, stage 2, ruling 14). OVERRIDES "veiled by ink AND visibility,
   never display: the seat holds": a seat held under every line with the door
   closed stood the reading double spaced, eight lines of Japanese with an
   empty English line under each. The door's toggle is now the one act
   allowed to move the page, as it is on the leaf (.cl-page--en): closed, the
   English takes no room; open, its seats are laid and the English inks in
   (cl-unfold), and a line that lands with the door open still takes its
   English a breath after it (--in). */
.cl-readback { margin: 0 0 2rem; }
.cl-rb-lines { display: block; }
.cl-rb-line {
    margin: 0 0 1.15rem;
    opacity: 0;
    transition: opacity 420ms var(--ease-brush, ease);
}
.cl-rb-line--in { opacity: 1; }
/* ⭐ THE READBACK IN TWO INKS (2026-09-24; the concept book §4, "The questions
   and the readback", build order item 2, approved by the owner 2026-09-24).
   OVERRIDES CT-2's "the readback reads in ink" (round 2): the day is re-told in
   the brush brown, Hana's own hand, and the day's words (the rail's, found in
   the line by the runner: readbackInk) stand in FULL INK, so the harvest is
   shown by ink alone. No weight, no rule, no box: sumi against brown is the
   whole mark. The English door, 読む and every seat are as they were. */
.cl-rb-jp {
    display: block;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k5);
    line-height: 1.85;
    color: var(--color-jp-text, #2A231F);
}
.cl-rb-day { color: var(--cl-ink); }
.cl-rb-en {
    display: none;
    font-size: var(--e3);
    line-height: 1.6;
    color: var(--cl-quiet);
    margin-top: 0.2rem;
    opacity: 0;
    transition: opacity 520ms var(--ease-brush, ease);
}
/* the door open: the seat is laid and the English inks in; a line's English
   still arrives a breath after the line (--in), so a door left open reads the
   same rhythm */
.cl-rb--en .cl-rb-en { display: block; }
.cl-rb--en .cl-rb-en--in { opacity: 1; animation: cl-unfold 320ms var(--ease-brush, ease) both; }
/* ⭐⭐ batch A fix round 2 (item 1): THE READING'S HEAD, AND NO ROW UNDER IT.
   読む stood in a row of its own under the lines with the 英語 door (.cl-rb-foot),
   over the one foot: two stacked rows of hands on every close, and on lesson 3
   (a page past the glass) a row under the fixed foot, whose 2.6rem scroll
   margin left 読む under it. 読む is the one foot's right seat now (js
   readOnHTML) and hands it to おわる at the last line; the 英語 door stays on
   the page, quiet, at the right of the reading's head, and the 聞く row inks in
   at its left once the reading is done, its seat laid at mount (veiled), so the
   head is one height from the first breath. Nothing stands under the lines: a
   line lands at the end of the flow, and one under the foot is scrolled above
   it, measured off the foot (js bringAboveFoot). */
.cl-rb-head { margin: 0 0 1.1rem; display: flex; align-items: baseline; gap: 1.2rem; }
.cl-rb-head .cl-rb-door-en { margin-left: auto; }
/* おわる inks in over the dissolving 読む once it has gone (the Tell-me
   choreography: one seat never swaps its face without a fade) */
.cl-corner > .cl-close-door.cl-ink-in { animation-delay: var(--cl-t-fade); }
/* the day heard: 聞く at the reading's head once the reading is done — the
   chip every voice in the lesson wears, its named door beside it. The ROW
   fades in on its own beat once the last line has stood alone for one, so the
   close arrives rather than appearing (the class rides the row, so the ink
   rule rides the row too). */
.cl-rb-hearrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    opacity: 0;
    transition: opacity 520ms var(--ease-brush, ease);
}
.cl-rb-hear--in { opacity: 1; }
.cl-rb-hearname { display: inline-flex; align-items: baseline; gap: 0.5rem; color: var(--cl-quiet); }
.cl-rb-hearname [lang="ja"] { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k6); }
.cl-rb-hearname i { font-style: normal; font-size: var(--e3); }   /* the English half of a duet, never italic */
/* (fix round 2, item 1: 読む stands in the one foot now and wears its faces'
   own type, 戻る's and おわる's; its Klee One face, a row of its own's, is gone) */


/* ── the receipt of moments, and the seal over it ────────────────────────── */
/* Three lines at most, in the teacher's voice, about tonight alone. A slip
   that came back wears a kintsugi hairline, because gold in this course marks
   a repair and nothing else — the same law the set's .cl-settled--recovered
   settle keeps in the moment the miss actually came back. */
.cl-moment {
    font-size: var(--e2);
    line-height: 1.75;
    margin: 1.2rem 0 0;
    max-width: 34em;
}
.cl-moment--back {
    border-left: 1px solid var(--cl-gold);
    padding-left: 0.85rem;
}
/* ⛔ THE VISIT STAMP IS A COLOPHON, NEVER A GRADE — the 駅スタンプ pressed into
   a book at the end of a day out. Vermilion is the hanko's own ink and lives
   nowhere else in the course; it never appears on an answer surface. */
/* ⭐ THE CERTIFICATE. The one vermilion mark in the lesson used to float in
   the middle of the pile, a paragraph among paragraphs. Here it is what it has
   always been: a seal pressed on clear paper beside the sentences that earned
   it. The voice on the left keeps the reading measure; the colophon holds its
   own column, so the stamp can never come down on top of a word. ⛔ The seal's
   seat is reserved from the first breath, width AND height (the seal's own
   92px, .cl-seal) — it is stamped LAST, three beats after the chapter arrives
   and after the goodbye and the door out have landed under it, and a seat
   that grew when the press came would move the lines already read. */
.cl-cert {
    display: flex;
    align-items: flex-start;
    gap: clamp(1.5rem, 4vw, 3rem);
}
.cl-cert-voice { flex: 1 1 auto; min-width: 0; max-width: 34em; }
.cl-cert .cl-cert-voice > * { margin-top: 0; margin-bottom: 1.4rem; }
.cl-cert .cl-cert-voice > *:last-child { margin-bottom: 0; }
.cl-cert .cl-cert-voice .cl-proof:empty { margin-bottom: 0; }
.cl-cert .cl-cert-voice .cl-moment { margin: 0; }
/* ⭐ THE PROMISE KEPT (2026-09-24, design review L2, stage 2, ELEVATE 2a /
   ruling 4): "千円, 三万 and 20分 come back next lesson." stands under the
   repair that landed, in the same teacher's voice and with no hairline (gold
   is the repair alone), one breath of paper between the two */
.cl-cert .cl-cert-voice .cl-moment + .cl-moment { margin-top: 0.7rem; }
.cl-cert-seal { flex: 0 0 11rem; min-height: 92px; }
/* the pressed stamp is EXACTLY the seat: an inline svg in a block keeps a
   descender gap under it (96px, measured) and the seat grew 4px at the press
   — the one thing the seat exists to prevent. A block svg is 92. */
.cl-cert-seal .cl-seal { display: block; }
.cl-stamp {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin: 2.2rem 0 0;
}
/* in the certificate the colophon stacks under its own seal — the row belongs
   to the page now, not to the stamp */
.cl-cert-seal .cl-stamp {
    display: block;
    margin: 0;
}
.cl-seal {
    flex: none;
    width: 92px;
    height: 92px;
    transform: rotate(-4deg);
    animation: cl-press 260ms var(--ease-settle, ease) both;
}
/* a re-opened close finds the seal resting: the press already happened */
.cl-stamp--rest .cl-seal { animation: none; }
/* ⭐ AND THE BOOK KEEPS IT — the same seal, smaller, pressed ON the leaf a
   finished lesson reopens on. It never presses here: a stamp performed again
   every time the book is opened is a stamp that stops meaning a day.
   ⛔ ABSOLUTE, and sitting slightly over the dateline's rule: a hanko is put
   down on the paper, not ruled around, and out of flow a stamped book and an
   unstamped one seat their dateline on exactly the same line. */
.cl-bookseal {
    position: absolute;
    /* both offsets TRACK THE LEAF'S OWN PADDING, so the seal keeps the same
       bite out of the rule and the same edge as the text at every width */
    top: calc(clamp(2rem, 4vw, 2.75rem) + 4px);
    right: clamp(1.4rem, 3vw, 2.4rem);
    z-index: 2;
    line-height: 0;
}
.cl-seal--sm { width: 56px; height: 56px; animation: none; }
/* ⭐ YESTERDAY'S SEAL AT THE WARM-UP'S FOOT (2026-09-24; the concept book §4
   "The warm-up", build order item 2): last time's leaf comes back with the
   hanko it earned pressed small at its foot, at the right, where a seal is put
   down on a finished page: the same seal (kanji, rim, tilt, ink) at 72px, its
   date ring kept (9.4px numerals, the colophon still legible; the 56px book
   seal drops it). ⛔ Static and quiet: already pressed, so no press animation,
   and it sits on the fibre like the leaf's other ink. Laid at mount with the
   leaf, so nothing moves under the reading eye. */
.cl-warmseal {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    margin: 1.6rem 0 0;
    line-height: 0;
}
.cl-seal--foot { width: 72px; height: 72px; animation: none; }
@keyframes cl-press {
    from { opacity: 0; transform: rotate(-4deg) scale(1.06); }
    to   { opacity: 1; transform: rotate(-4deg) scale(1); }
}
.cl-seal-rim { fill: none; stroke: rgba(var(--cl-hanko), 0.85); stroke-width: 2.6; }
.cl-seal-k {
    font-family: var(--font-jp, 'Klee One', serif);
    font-weight: 700;
    font-size: 40px;
    fill: rgba(var(--cl-hanko), 0.85);
}
/* ⛔ THE DATE RING IS A COLOPHON'S NUMERALS, NOT A LINE OF JAPANESE. It used
   to print 9がつ 23にち at 10.5px — 65px of kana across a 52px chord, so the
   first and last glyph sat on the rim and read as clipped, at a third of the
   —k6 floor every other Japanese step on this sheet is held to. A hanko stamps
   a date; numerals are what fits on a 92px ring and what a date ring prints. */
.cl-seal-d {
    font-size: 12px;
    letter-spacing: 0.06em;
    fill: rgba(var(--cl-hanko), 0.72);
}
/* on the book's 56px seal the ring would be 7px: the small seal is a mark, and
   a mark carries no date */
.cl-seal--sm .cl-seal-d { display: none; }
/* ⭐ batch D1 fix round 2 (item 3): no last line of one short phrase ("in it."
   alone on the third line at 1280 and 1680): text-wrap: pretty evens the rag */
.cl-tonight { font-size: var(--e2); line-height: 1.7; margin: 1.6rem 0 0; text-wrap: pretty; }
.cl-signoff { margin: 2.2rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.55rem; }
.cl-signoff-jp {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k4);
    color: var(--color-jp-text, #2A231F);
    border-bottom: 1px solid transparent;
    cursor: default;
}
/* with a clip authored the line is a BUTTON — press it and the sentence is
   spoken. S3: a thing that SPEAKS answers the pointer in ink and wears no
   rule — a rule under a thing means it opens (the door grammar) */
button.cl-signoff-jp {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    transition: color var(--duration-fast, .15s) var(--ease-settle, ease);
}
button.cl-signoff-jp:hover { color: var(--cl-accent); }
button.cl-signoff-jp:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* ⛔ the signoff's English prints PLAINLY (the schema's own law): the close
   assigns this line as the evening's homework, and a meaning behind a hover
   is a gesture nobody can find at the moment it matters most. Beside its
   Japanese on the line's baseline since fix round 1 (item 4), still plain. */
.cl-signoff-en {
    display: block;
    font-size: var(--e3);
    color: var(--cl-quiet);
    margin-top: 0;
}

/* the quiet door out — one named day, then the room closes. ⛔ It keeps no
   top margin of its own: inside a chapter the rhythm belongs to the chapter,
   and a foot that set its own gap was the last block still arguing with it. */

/* ── the re-dress column at the page's edge ──────────────────────────────── */
/* ⛔ IT HANGS OFF THE COLUMN, NOT OFF THE GLASS, AND IT DOES NOT DRIFT.
   Pinned to the window's right edge and centred on the viewport, the column
   sat a different distance from the page on every window and slid UP the
   screen as the day's words were added — the one thing in the lesson that is
   supposed to be a fixed place to look kept moving. Its head now stands at
   the asking origin all lesson and the words append DOWN from it, and its
   left edge is the column's right edge plus ONE gutter. ⛔ It is computed
   from --cl-col itself: a hand-copied "340px = half the column" was 20px
   wrong (the column is 720), and the rail hung 15-24px inside the leaf's
   own edge at 1680 (S0, 2026-09-06). The min keeps it inside the glass on
   any window the breakpoint below still shows it on.
   ⛔ OVERRIDDEN IN PART (2026-09-23, design review L2, item 26): NOT THE ASKING
   ORIGIN, ONE STEP UNDER THE CHROME. The asking origin is read off the glass,
   and the glass grows when the chrome shrinks: on the page (no title line, the
   chrome 77px against the cards' 96) the column's head dropped 19px LOWER, so
   the place-keeper read a different number on the one station where the
   chrome had just got shorter.
   ⛔ AND NOT OFF THE CHROME EITHER (2026-09-23, design review L2, item 26's
   walk). Hung a fixed step under the chrome, it read 154 on the cards and 135
   on the page: the same 19px, the other way. The column reads no chrome now.
   Its top is the cards' seat written as a number, the two-line chrome (6rem,
   96px at 1280) and 3.4 units under it (58px: 154 at 1280x900), so the label
   stands at one height on every station, whatever the chrome over it holds.
   ⭐ REWRITTEN WITH THE CHROME (card layout 2026-09-28, PLAN.md §4 and §5 item
   12): the chrome is one line of --cl-chrome-line (3.75rem) on every station
   now, so the number is that line and the page origin under it: the title
   stands on the band's top line, level with the glyph's box (94px at
   1280x900, 98 at 1680x1050). Still a constant, never the measured chrome. */
.cl-rail {
    position: fixed;
    left: min(calc(50% + var(--cl-col) / 2 + var(--cl-gutter)), calc(100% - 8rem));
    top: calc(var(--cl-chrome-line) + var(--cl-origin-page));
    transform: none;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    text-align: left;
    pointer-events: none;
}
/* the column says what it is, once, in Japanese alone (S8, owner call 13:
   the English duet dropped). Out of the a11y tree: the list's own label
   already says it. */
.cl-rd-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    margin-bottom: 0.55rem;
    line-height: 1.2;
}
.cl-rd-title [lang="ja"] {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k6);
    color: var(--cl-quiet);
}
/* ⛔ A MET WORD IS FULL INK. At 55% the words the learner had actually
   earned read as the faintest thing on the screen — quieter than the frames
   standing for the ones they had not met yet. The unmet state carries the
   whole distinction, so the ink does not have to. */
/* ⛔ AND IT IS READ, NOT LABELLED. At the scale's floor the day's own words sat
   at chrome size in the margin — the one column of Japanese the learner has
   actually earned, set smaller than the English beside it. It reads at reading
   size. The title above stays at the floor: it names the column, it is not the
   column. Every mark hung on a row (the stone dot, the moss dot, the min-height
   that keeps met and unmet rows the same height) is set in em, so all of it
   follows the type up without a second number to keep in step. */
.cl-rd {
    position: relative;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k5);
    /* one line-height for EVERY row state — an inked row on `normal` stood
       6px taller than a stone, so the list shifted under the eye each time a
       word was met, exactly what the stone's same-height law forbids */
    line-height: 1.15;
    color: var(--cl-ink);
    transition: color var(--duration, .25s) var(--ease-brush, ease);
}
.cl-rd--on { color: var(--color-jp-text, #2A231F); }
/* ⭐ S9: a met word's ink blooms ONCE, where its row stands — the row is
   re-dressed in place now, so this fires on the re-dress and never again */
.cl-rd--on .cl-rd-ink { animation: cl-unfold var(--cl-t-ink) var(--ease-settle, ease) both; }
/* ⛔ AN UNMET WORD IS A STONE, NOT A WHISPER. Its reading is not faint here,
   it is ABSENT — the row is a place in the day and nothing more, so the column
   can never hand over a reading before the card that teaches it. Same height
   as an inked row, so the walk's own list never shifts under the eye. */
.cl-rd--stone {
    min-height: 1.15em;
}
/* ⛔⛔ A DOT, NEVER A BOX. Wave E gave these places hairline squares to stop
   them reading as dust; eleven empty squares stacked down the page turned out
   to read as something far worse — a checklist, a form with unticked rows,
   which is the one thing this column has never been allowed to be. The place
   is a DOT: the day's extent is visible and nothing else is said about it.
   ⛔ And a met word needs no mark at all, because the word IS the mark. */
.cl-rd--stone::after,
.cl-rd--veiled::after {
    content: '';
    display: inline-block;
    width: var(--cl-dot);
    height: var(--cl-dot);
    border-radius: 50%;
    background: var(--cl-dot-ink);
    vertical-align: 0.32em;
    transition: background-color 300ms var(--ease-settle, ease),
                transform 300ms var(--ease-settle, ease);
}
/* where the walk is standing right now: the place's OWN dot takes today's
   warm ink and swells a breath. One mark, one column — the brush dash that
   used to sit in the margin was a second glyph saying the same thing beside
   the first, and two marks on one row read as furniture. */
.cl-rd--now.cl-rd--stone::after,
.cl-rd--now.cl-rd--veiled::after {
    background: var(--color-jp-text, #2A231F);
    transform: scale(1.6);
}
/* S1: no dot on a met row — the sheet already says the word IS the mark
   (above), and a moss dot beside an inked word was the mark saying it twice */
/* ⛔ the ACTIVE build's row is an EMPTY SEAT — the rail otherwise prints the
   ask's answer in kana at the page's edge while the hand asks for it. Same
   law as the head veil: ink out via visibility (the seat keeps its width), the
   waiting frame holds the place, hover or focus peeks, nothing records it. */
.cl-rd--veiled { position: relative; pointer-events: auto; }
/* the same bloom the head veil lifts with — two veils on one screen must not
   answer the same gesture two different ways. No sound out here: the column
   sits at the page's edge and a pointer crosses it on its way somewhere. */
.cl-rd--veiled .cl-rd-ink {
    visibility: hidden;
    color: transparent;
    transition: color 300ms var(--ease-brush, ease);
}
/* the same waiting frame an unmet row wears (declared with it, above) — two
   placeholders on one column would be two grammars, and both of these mean
   "not yours to read right now". Laid over the held seat, never beside it. */
.cl-rd--veiled::after {
    position: absolute;
    left: 0;
    top: 0.18em;
}
.cl-rd--veiled:hover .cl-rd-ink,
.cl-rd--veiled:focus-visible .cl-rd-ink { visibility: visible; color: inherit; }
.cl-rd--veiled:hover::after,
.cl-rd--veiled:focus-visible::after { content: none; }
.cl-rd--veiled:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* an INK row is a WORD door (S3). Since the owner's look experiment
   (2026-09-23) its hover shows the meaning beside it and its press opens the
   word's page; no card opens on the row. A column of nothing but doors rests
   bare; the hover wears the door grammar (below) */
.cl-rd--door { pointer-events: auto; cursor: pointer; }
/* ⛔ [hidden] is only a UA `display:none` — an author display wins. The column
   is hidden by the attribute, so it must be answered here or it rides every
   screen (it rode the page and the close). */
.cl-rail[hidden] { display: none; }
/* below 1320px the meet grid's work column runs under the fixed rail
   (stage 1060px + the rail's seat), and kana sat over the rack's rightmost
   tiles — the rail stands down rather than overlap the desk */
/* ROUND 2 (L9): the rail stands down only where the margin folds (below 1180px) —
   the 1364 floor served a desk that no longer exists */
@media (max-width: 1179px) { .cl-rail { display: none; } }

/* ── a lesson that could not load: one line on paper, the ways out work ──── */
.cl-fail { padding-top: var(--cl-origin-ask); }
.cl-fail-line { font-size: var(--e2); color: var(--cl-quiet); margin: 0; }

/* ── the aria-live region: mirrored settles and tells, visually silent ───── */
.cl-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── the kanji home: a place you visit, never a step ─────────────────────── */
/* ── doors: what is pressable, and how it says so (S3, 2026-09-06) ────────
   ⭐⭐ REST = INK AND A HAIRLINE. A door in prose or a sentence — a WORD
   (.cl-wref, the unit) or a lone taught character (.cl-kref) — prints in the
   book's Japanese ink with a 1px DOTTED rule under it, drawn by
   text-decoration: never a border or padding, so a wrapped run keeps one
   continuous rule and nothing reflows, and the rule sits under the whole word.
   HOVER: ink and rule to indigo, the one interactive colour, the rule going
   solid. PRESSED (:active): the rule thickens — ink, never geometry. FOCUS:
   one ring. ⛔ The wash pill is GONE, with its per-run group (owner note f,
   2026-09-05, overturning his own earlier pill-over-underline pick that stood
   here): a grey slab behind running text is a highlighter, inside a run it
   barely answered the pointer, and 六時二十五分 came out as one six-character
   wash. ⛔ ONE meaning for the dotted rule — "a door" — so the reader's
   pencil mark for an opened token became an ink change (.cl-tk--marked).
   ⛔ A LIST OF NOTHING BUT DOORS rests bare (the leaf's tokens, the rail's
   met rows, the receipt): a mark on every item marks nothing, so there the
   hover alone says it — and it says it in exactly the same dress.
   OPENS VERSUS SPEAKS: a rule under a thing means it opens (a card, a sheet);
   ink alone under the pointer means it sounds (.cl-say, the pano's found
   strip, the signoff, a family row). Never both on one act. */
.cl-wref, .cl-kref, .cl-guest[role="button"], .cl-tk, .cl-rd--door, .cl-rcw {
    text-decoration-line: none;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    text-decoration-skip-ink: none;
    transition: color var(--duration-fast, .15s) var(--ease-settle, ease),
                text-decoration-color var(--duration-fast, .15s) var(--ease-settle, ease);
}
.cl-wref, .cl-kref {
    position: relative;
    cursor: pointer;
    color: var(--color-jp-text, #2A231F);
    text-decoration-line: underline;
    text-decoration-color: rgba(42, 35, 31, 0.5);
}
/* a guest wears the same grammar one shade quieter: the rest rule in stone
   (a meet-later word beside a taught word's brown), the hover the same
   indigo as every door that opens a card — the rest tier says "stranger",
   the hover says "opens" */
.cl-guest[role="button"] {
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-color: rgba(105, 98, 90, 0.35);
}
.cl-wref:hover, .cl-kref:hover, .cl-guest[role="button"]:hover,
.cl-tk:not(.cl-tk--plain):hover, .cl-rd--door:hover, .cl-rcw:hover, .cl-dr:hover {
    color: var(--cl-accent);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--cl-accent);
}
.cl-wref:active, .cl-kref:active, .cl-guest[role="button"]:active,
.cl-tk:not(.cl-tk--plain):active, .cl-rd--door:active, .cl-rcw:active, .cl-dr:active {
    text-decoration-thickness: 2px;
}
.cl-wref:focus-visible, .cl-kref:focus-visible, .cl-guest[role="button"]:focus-visible,
.cl-tk:focus-visible, .cl-rd--door:focus-visible, .cl-rcw:focus-visible, .cl-dr:focus-visible {
    outline: var(--cl-ring);
    outline-offset: 1px;
}
/* ⛔ except where the glyph IS the specimen: a part standing at k3 in its own
   column is already a thing to look at, and a rule under it is furniture.
   There the pointer's ink is the whole cue, as it was. */
.cl-glyphs .cl-kref { text-decoration-line: none; }
.cl-glyphs .cl-kref:hover { text-decoration-line: none; color: var(--cl-accent); }
/* ⭐⭐ S7: THE SHEET IS THE APP'S RIGHT DRAWER (owner call 7). It was a centred
   modal that dimmed the very text it was opened from and stood 80px inside
   the spine; the app's grammar for a supporting glance from inside a page is
   the right-anchored drawer (the kanji drawer, the word panel), and the page
   keeps its place beside it — 先 and 生 side by side is the whole point of a
   pair. The field outside the drawer is the ROOM, undimmed: a press on it
   puts the sheet down, the way the app's scrim does, and nothing else
   happens (the drawer law: one press closes, the next press is the page's). */
.cl-khome {
    position: fixed;
    inset: 0;
    z-index: 10;                              /* over the topmark (3) and glosses (4) */
    background: transparent;
}
/* the panel: full height, on the glass's right edge, as wide as the free
   paper to the right of the spine (the leaf's margin law, mirrored) — never
   under 340px, never over 480 — so at 1440 and up the spine stands clear and
   below that the drawer takes only the column's right edge. Its edge is a
   hairline cast as SHADOW, never a border-left: in this room a left bar
   means "quoted Japanese" (charpage_test), and one mark may not mean two
   things. One soft shadow under the design system's 0.06 ceiling (the old
   slip cast 0.14).
   ⛔ A DRAWER SCROLLS — its body does; the ✕ stays pinned — which re-bases the
   old "the sheet does not scroll" law: the spine is short by construction
   (the parts row and the story left it), and a long ledger folds at six. */
.cl-kh-sheet {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(340px, calc(50% - var(--cl-col) / 2 - var(--cl-gutter)), 480px);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cl-sheet);
    box-shadow: -4px 0 18px rgba(var(--cl-sh), 0.06);   /* the elevation: the drawer's slip, one soft shadow, its edge hairline gone */
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .2s var(--ease-settle, ease), transform .24s var(--ease-settle, ease);
}
.cl-khome--in .cl-kh-sheet { opacity: 1; transform: none; }
.cl-kh-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: clamp(2.4rem, 4vh, 3.2rem) clamp(1.4rem, 2.4vw, 2rem) 2rem;
}
.cl-kh-back {
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    z-index: 2;                               /* over the scrolling body */
    border: 0;
    background: none;
    color: var(--cl-quiet);
    font-size: var(--e2);
    line-height: 1;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    transition: color var(--duration-fast, .15s) var(--ease-settle, ease);
}
.cl-kh-back:hover { color: var(--cl-accent); }
.cl-kh-back:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* ⭐ THE HEAD IS THE CHARACTER AND WHAT IT MEANS. The glyph stands alone; under
   it the one senior English line of the page; under that the picture it was
   taught by, quiet. No reading floats here — a character does not have one. */
.cl-kh-head { display: block; }
.cl-kh-glyph {
    display: block;
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--k2);
    line-height: 1.05;
    color: var(--color-jp-text, #2A231F);
}
/* ⭐ S7: the glyph is the lesson's own BRUSH (the card's .cl-draw at k2):
   written once when the sheet opens, written again on a press; the Klee ink
   holds the seat until the strokes land and is the floor with no data */
.cl-kh-glyph .cl-draw { display: block; }
.cl-kh-mean { margin: 0.7rem 0 0; font-size: var(--e1); line-height: 1.3; color: var(--cl-ink); }
.cl-kh-shape { margin: 0.5rem 0 0; font-size: var(--e3); line-height: 1.5; color: var(--cl-quiet); }
.cl-kh-second { margin: 1.4rem 0 0; font-size: var(--e2); line-height: 1.55; color: var(--cl-ink); }
.cl-kh-tell { margin-top: 1.5rem; }
.cl-kh-tell .cl-twin { margin-top: 0; }

/* ── the ledger: every word this character lives in ──────────────────────── */
/* ⭐ THREE COLUMNS THAT HOLD ACROSS THE WHOLE PAGE — the word, the reading,
   the English — because the reading column is where the lesson is: the kana
   this character contributes stands in full sumi and the rest of the word
   stays quiet, so にち, ようび and に sort themselves down the page without a
   heading, a label or a caption saying so. Subgrid, so the groups can be
   parted by air and still line up. */
.cl-kw-list {
    list-style: none;
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr) 2.125rem;
    column-gap: 1.1rem;
    row-gap: 0.34rem;
    margin: 1.5rem 0 0;
    padding: 0;
}
/* ⭐ S7: THE DRAWER LAYS THE MEANING UNDER THE WORD. A drawer is 340 to 480px
   wide, and on one line the fourth column left the English ~25px at the
   floor (a 1280 glass) with the words overrunning the disc. One layout for
   one housing, at every width: the word and its reading keep their two
   ALIGNED columns (the ink column is the lesson), the meaning takes the row's
   second line at full width, and the disc spans both. */
.cl-kw-list { row-gap: 0.1rem; }
.cl-kw { grid-row: span 2; grid-template-rows: subgrid; }
.cl-kw-w, .cl-kw-r { grid-row: 1; }
.cl-kw-en { grid-column: 1 / 4; grid-row: 2; margin-bottom: 0.55rem; }
.cl-kw-oto { grid-row: 1 / 3; }
.cl-kw-air, .cl-kw-more { grid-row: span 1; }
.cl-kw {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
}
/* ⛔ the author display above would otherwise beat [hidden] and the fold
   would hide nothing */
.cl-kw-list [hidden] { display: none; }
.cl-kw-w { font-size: var(--k5); line-height: 1.35; color: var(--color-jp-text, #2A231F); }
.cl-kw-r { font-size: var(--k6); line-height: 1.35; }
.cl-kw-on { color: var(--cl-ink); }
.cl-kw-off { color: var(--cl-quiet); }
.cl-kw-en { font-size: var(--e3); line-height: 1.45; color: var(--cl-quiet); }
/* the seat is always here; only the ink comes and goes */
.cl-kw-oto { justify-self: end; align-self: center; }
/* ⭐ S7: ROWS SPEAK. The disc STANDS on every row that has a clip — a chip the
   pointer had to find (opacity 0 at rest) was a promise the eye could not
   see. At rest it is quiet ink (ink alpha on ring and glyph, never element
   opacity); under the pointer, the row's, it is full sumi; on the chip itself,
   the press promise every disc in the room makes. A row with no clip keeps
   the seat and carries no chip: no dead disc on a ledger. */
.cl-kw-chip {
    color: rgba(var(--cl-ink-rgb), 0.5);
    border-color: rgba(var(--cl-sh), 0.3);
    box-shadow: none;
}
.cl-kw:hover .cl-kw-chip,
.cl-kw:focus-within .cl-kw-chip,
.cl-kw-chip:focus-visible { color: var(--cl-ink); border-color: rgba(var(--cl-sh), 0.72); }
.cl-kw:hover .cl-kw-chip:hover,
.cl-kw-chip.cl-chip--on { color: var(--color-jp-text, #2A231F); border-color: var(--color-jp-text, #2A231F); }
.cl-kw-air { grid-column: 1 / -1; height: 0.5rem; }
/* the word under your finger, seated first: the same row, read a size larger,
   with its own air beneath so the ledger below reads as the ledger */
.cl-kw--lead { padding-bottom: 0.45rem; }
.cl-kw--lead .cl-kw-w { font-size: var(--k4); }
.cl-kw-more { grid-column: 1 / -1; margin-top: 0.5rem; }
.cl-kh-more {
    border: 0;
    background: none;
    padding: 0.2rem 0;
    font-size: var(--e3);
    color: var(--cl-quiet);
    cursor: pointer;
}
.cl-kh-more:hover { color: var(--cl-accent); }
.cl-kh-more:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
.cl-kh-sheet:focus { outline: none; }
/* ⭐ S7: the drawer ARRIVES the way the app's does — opacity and a short slide
   in from the right edge (the motion doctrine: entry = opacity + a short
   translateX). ⛔ Reduced motion keeps the fade and drops the travel. */
@media (prefers-reduced-motion: reduce) {
    .cl-kh-sheet { transform: none; transition: opacity .16s linear; }
    .cl-khome--in .cl-kh-sheet { transform: none; }
}

/* the reread's doors rest under the page, before the one turn forward */
.cl-reread .cl-doors { margin-top: 1.6rem; }

/* ── the hall's own quiet door keeps the hall's dress; nothing here ──────── */

/* ── reduced motion: a cross-fade and nothing else ───────────────────────── */
/* A CROSS-FADE and nothing else: every transform is cut, animations stop, and
   what survives is the ink changing — opacity and colour. Killing the
   transition wholesale would have made the screen SWAP, which is not what a
   reader who asked for less motion asked for. */
@media (prefers-reduced-motion: reduce) {
    #kotobaLesson *,
    #kotobaLesson *::before,
    #kotobaLesson *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;          /* S9: no stagger — a record, a told body, the English land whole */
        animation-iteration-count: 1 !important;
        transition-property: opacity, color, background-color, border-color !important;
        transition-duration: 160ms !important;
    }
    #kotobaLesson .cl-stage,
    #kotobaLesson .cl-stage.cl-in { transform: none !important; }
    /* the one thing a reader who asked for less motion still gets: the glyph
       the hand would have written, arriving as a calm fade instead */
    #kotobaLesson .cl-draw--fade { animation-duration: 300ms !important; }
    /* the veil over a painted word is a STATE, not a performance: it is
       already lifted or already down, with nothing in between */
    #kotobaLesson .cl-scene-veil { transition: none !important; }
    /* ⛔ the title's beat is MOTION, and a reader who asked for less of it gets
       none: the JS never adds the class, and this is the belt under that brace.
       The recovery's gold is not motion — it is a mark, so it simply stands. */
    #kotobaLesson .cl-settled--recovered {
        animation: none !important;
        border-left-color: var(--cl-gold) !important;
    }
}

/* ── Wave A · say it once, plainly (review round 2026-08-28) ─────────────── */
/* the door title's English pair — printed once, small, under the kana title */
/* the reading's own note (S5: the four L7 reading notes moved here off the
   shape page) — under the head that prints the reading, at reading size in
   past ink: a rule the ask will test in a moment is not a whisper */
.cl-life-note {
    display: block;
    margin: 0;
    font-size: var(--e2);
    line-height: 1.7;
    color: var(--cl-ink-past);
    max-width: 34em;
}
/* one authored line above a station's first paper */
.cl-station-line {
    font-size: var(--e3);
    color: var(--cl-quiet);
    margin: 0 0 1.6rem;
}
/* the registry tell now speaks AFTER the plain disclosure */
.cl-teach--after { margin-top: 1rem; }
/* S10: the check's one promise, after the tell: quiet, and said once.
   ⭐ J-04 (the deep review's repair round 1, 26 October 2026): AND HELD WHOLE, on its own line or run on after a one-
   sentence note (js missSeatHTML): "五 comes / back next lesson." parted inside itself and read as a glitch. Where the
   tell's last line has no room for it, it takes the next line whole (the space before it is the one break). */
.cl-comeback { margin: 0.7rem 0 0; font-size: var(--e3); line-height: 1.6; color: var(--cl-quiet); white-space: nowrap; }
/* the second build's one payoff note, under its settled sentence */
.cl-build-note {
    font-size: var(--e3);
    line-height: 1.7;
    color: var(--cl-quiet);
    margin: 0.9rem 0 0;
    max-width: 34em;
}
/* the no-spaces line, visible on the first read of the page */
.cl-page-preface {
    font-size: var(--e3);
    color: var(--cl-quiet);
    margin: 0.4rem 0 1.2rem;
}
/* while the reading is veiled, its speaker holds its seat in silence —
   a ♪ that says あめ during the ask hands over the answer */
.cl-card--asking .cl-oto { visibility: hidden; }

/* ── guest words: the real spelling, the ruby only where it is owed ────────
   ⭐⭐ A GUEST is a word the course PRINTS but does not teach (会社, 電車,
   一人): its kanji stand, and the reading sits over exactly the characters
   the reader has not been given yet. Programme §1b, 2026-08-31.
   ⛔ IT NEVER WEARS AN ASK'S DRESS. A page token underlines on hover because
   it opens; a guest is print, and print that lights up like a control teaches
   the learner to press the wrong things. Its own press (where it has one) is
   the same quiet stone the kana tokens use, and nothing about it moves. */
.cl-guest { position: relative; white-space: nowrap; }
.cl-guest ruby { ruby-position: over; ruby-align: center; }
.cl-guest rt {
    /* the reading is the crutch, not the word: past ink, half the size, and
       it never sets the line's own colour. ⭐ U-051 (the deep review of 25 October 2026; the owner's "readings are a
       readable line, never a tiny ruby"): half the line (0.5em, was 0.44) in Klee One's 600 cut, which fills the pixel
       where the 400 printed a grey hairline (よる over 夜 at 1.9:1); the ink unchanged */
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: 0.5em;
    line-height: 1.1;
    color: var(--cl-ink-past);
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* ⛔ AND A GUEST'S RUBY IS NOT THE PAGE'S FURIGANA. Where the reader's own
   token wraps it, the token keeps its dotted pencil mark and its hover; the
   guest inside adds no second underline of its own. */
.cl-guest,
.cl-tk .cl-guest { border-bottom: 0; }
/* ⭐⭐ THE WHOLE WORD LIGHTS, BECAUSE THE WHOLE WORD IS THE DOOR (owner,
   2026-08-31). 会社 used to wash character by character — the taught kanji
   inside it each wore their own .cl-kref pill — so the pointer said "two
   things here" about a word that is one thing, and pressing either half never
   reached the word's own meaning. The per-character doors are gone from inside
   a guest (js: tapifyDoors), and the characters wait one step in, in the card
   the press opens. S3: the guest's dress is declared with the doors (the
   "doors" block): the same grammar one shade quieter, and no wash. */
/* ⭐⭐ S6: NO GLOSS IN THE LINE, ANYWHERE. The first appearance used to hang
   its meaning under the word in 0.4em print (9.6px at k5 — not print, a
   smudge), out of flow, "in the leading that is already there": it was
   there only on the bare leaf. With the English on, on the example page, on
   the beat, the leading was spent and the gloss printed over the next line
   ("homework" across "In my hand, the homework."). And its inline-block
   inherited the 字下げ as a hole before the word, and stood wider than the
   word so the hover rule ran past the glyphs. A guest's meaning has two
   seats now: the leaf's MARGIN NOTE and the word card a press opens.
   ⛔ THE RUBY NEVER CHANGES INK UNDER A POINTER. The token's hover takes the
   door's indigo (S3: one hover ink for every inline door); the reading
   above the word is the crutch, not the door, and it stays in past ink —
   and the door's rule hugs the word now that no box widens it. */
.cl-tk:not(.cl-tk--plain):hover .cl-guest rt,
.cl-guest[role="button"]:hover .cl-guest rt,
.cl-guest[role="button"]:hover rt,
.cl-guest--lit rt { color: var(--cl-ink-past); }
/* a note lights every occurrence of its guest on the leaf: the door's own
   hover ink, because each occurrence IS that door */
.cl-guest--lit {
    color: var(--cl-accent);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--cl-accent);
}
/* ⭐ THE WORD PEEK (the owner, 1 November 2026: "yes it is a good idea", to: "on a computer, resting the pointer on a word
   could show its kana for a moment, the way the course page's word wall already does; pressing it would still open the
   full card"; js peekOf, peekLay; docs/course_v2/reviews/word_peek_2026-11-01/PEEK.md). A word that is a door shows its kana
   over its kanji under a resting pointer, in a layer of its own over the room: fixed, out of the stage and out of the flow,
   no pointer, no selection, hidden from the screen reader (the js's aria-hidden), so every line, word and card keeps its
   box to the pixel at rest and under the pointer, and nothing stands there at rest. Each run is a ruby laid with its base
   on the run's own glyphs, the base transparent (the word's own ink, lit under the pointer, shows through), so the browser
   puts the kana where a guest's stand, the guests' ruby to the letter (.cl-guest rt: half the line, Klee One's 600 cut,
   their spacing and their leading), in the readings' one quiet ink (the graded reader's: the example page's and the
   Reading's rubies, #kotobaLesson .cl-read-line ruby rt). It lands in the course's hover time, and at once under reduced
   motion. */
#kotobaLesson .cl-peek { position: fixed; inset: 0; z-index: 5; pointer-events: none; user-select: none; -webkit-user-select: none; }
#kotobaLesson .cl-peek-w {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    line-height: normal;
    color: transparent;
    text-decoration: none;
    animation: cl-peek-in var(--duration-fast, .15s) var(--ease-settle, ease) both;
}
#kotobaLesson .cl-peek-w ruby { ruby-position: over; ruby-align: center; }
#kotobaLesson .cl-peek-w rt {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: 0.5em;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cl-quiet);
}
@keyframes cl-peek-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    #kotobaLesson .cl-peek-w { animation: none; }
}

/* ── S6 · the margin notes ────────────────────────────────────────────────
   ⭐⭐ THE PAPER TO THE LEAF'S LEFT IS THE READER'S MARGIN (owner call 5).
   One note per guest per leaf — the word, its reading, its meaning — on the
   first line the guest stands in, right-aligned to the leaf's edge, where a
   reader pencils a meaning beside a diary line. The width is the free paper
   (the glass's left edge to the leaf), measured by layoutMargin, so a note
   never runs off the glass; each note's `top` is its guest's own line, and
   a note that would overlap the one above drops below it. Three things in
   three inks — the word in the reading's Klee at the floor size, the reading
   in past ink, the meaning in the quiet English — none louder than the leaf.
   ⛔ Positioned out of the leaf, never in its flow: the leaf's geometry is
   byte-identical with the notes and without them. */
.cl-page > .cl-margin {
    position: absolute;
    top: 0;
    right: 100%;
    z-index: 1;
    box-sizing: border-box;
    padding-right: 1.5rem;
    pointer-events: none;
}
.cl-mnote {
    position: absolute;
    right: 1.5rem;
    max-width: calc(100% - 1.5rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    text-align: right;
    /* the leaf's own line box, so a note sits ON its line (named, so a meaning that breaks keeps it for its first line) */
    --cl-mn-line: calc(var(--k5) * 1.95);
    line-height: var(--cl-mn-line);
    font-size: var(--k6);
    pointer-events: auto;
    cursor: default;
}
.cl-mnote > * { white-space: nowrap; }
.cl-mnote[hidden] { display: none; }   /* a note whose guest the leaf no longer shows */
.cl-mn-w { font-family: var(--font-jp, 'Klee One', serif); color: var(--cl-ink); transition: color var(--duration-fast, .15s) var(--ease-settle, ease); }
.cl-mn-r { font-family: var(--font-jp, 'Klee One', serif); color: var(--cl-ink-past); }
.cl-mn-en { font-style: normal; font-family: var(--font-ui, 'Inter', sans-serif); font-size: var(--e3); color: var(--cl-quiet); letter-spacing: 0.01em; }
/* ⭐ A MEANING WIDER THAN ITS NOTE BREAKS INSIDE IT (9 November 2026, lesson 30's story: ラジオ体操, "the radio exercises: a
   few minutes of stretches done together to the radio each morning", and お兄さん). Held on one line, a meaning wider than
   the note (the free paper: 231 px on a story's page at 1280x900, 385 at 1680x1050) stood flush against the leaf and ran
   its start off the glass's left edge, so the learner read "…together to the radio each morning" and never its head. It
   breaks at its spaces inside the note's own measure, right-aligned, its lines about the LATER sentence's leading (one
   meaning, one block of English). A meaning that fits keeps its one line where it stood: the padding gives that line
   back the note's line box (--cl-mn-line) in whole pixels, so the browser's whole-pixel half-leading lands its baseline
   where it stood (a padding of 16.5 px moved it half a pixel). Its lines are balanced, so no word of it hangs alone on a
   last line ("young man, what a stranger calls / one" at 1280x900). The word and its reading never break
   (.cl-mnote > *): a note still parts between its pieces, and only a meaning wider than the whole note breaks inside
   itself. */
.cl-mnote > .cl-mn-en {
    white-space: normal;
    text-wrap: balance;
    --cl-mn-give: round(down, calc((var(--cl-mn-line) - 1.45em) / 2), 1px);
    line-height: calc(var(--cl-mn-line) - 2 * var(--cl-mn-give));
    padding-block: var(--cl-mn-give);
}
/* the dots TRAIL: a note that wraps in a narrow margin (280px at 1280) then
   ends its first line on "かいしゃ ·" and opens the next on the meaning, never
   on a stray dot */
.cl-mnote > :not(:last-child)::after { content: '·'; margin: 0 0.5em; color: rgba(105, 98, 90, 0.6); }
/* a guest under the pointer lights its note; a note under the pointer is
   lit with the occurrences it lights — the word's ink only */
.cl-mnote--lit .cl-mn-w { color: var(--cl-accent); }
/* ⭐ ROUND 2 (L8): a PRESSED word's note in the margin — lit, pressable (its
   disc, its character doors), on the token's line; the leaf never moves */
.cl-mnote--pressed { pointer-events: auto; }
.cl-mnote--pressed .cl-mn-w { color: var(--cl-accent); }
.cl-mnote--pressed .cl-chip--inline { vertical-align: middle; margin: 0 0.15em; }
.cl-mnote--pressed .cl-kref { font-family: var(--font-jp, 'Klee One', serif); }
/* ⭐ AND IT STACKS BESIDE THE LEAF, NEVER AGAINST THE WINDOW (2026-09-23, design
   review L2, item 23). At 1280 the pressed 8時 ran "8時。 · はちじ · 8 o'clock ·"
   the whole width of the free paper, from x=5 at the window's edge, and its
   character door fell to a second line by accident, reading as another item.
   The pressed note is a small card now: a measure short of the paper so it
   keeps air on both sides, its lines at a note's own leading (the runner seats
   the FIRST line on the token's line off this very line-height, marginNote),
   stacked right-aligned to the leaf's edge, reading over meaning, and the
   characters on their own line by design. (The review wrote this rule for
   .cl-rail .cl-gloss--left; the card on screen 073 is this one.) */
.cl-mnote--pressed {
    max-width: min(calc(100% - 3rem), calc(var(--cl-gutter) + 9em));
    line-height: 1.5;
}
/* ⛔ TWO ROWS BY DESIGN, NEVER A WRAP (2026-09-23, design review L2, item 23's
   walk). One wrapping row broke where the margin ran out: "8時 · はちじ ·" /
   "8 o'clock · (the disc)" / "時", the dots dangling at the line ends, a dot
   inside the disc (the trailing-dot rule reached the button), the character
   door alone on a third line. The runner lays two rows (pressedNoteHTML):
   the word, its reading and its voice; then its meaning and its characters.
   Each row is right-aligned to the leaf's edge, and a dot parts two words of
   one row and never ends one. */
.cl-mnote.cl-mnote--pressed { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; }
.cl-mnote.cl-mnote--pressed > .cl-mn-row::after { content: none; }
.cl-mn-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; }
.cl-mn-row > * { white-space: nowrap; }
.cl-mn-row > :not(:last-child):not(:has(+ .cl-chip))::after { content: '·'; margin: 0 0.5em; color: rgba(105, 98, 90, 0.6); }
.cl-mn-row > .cl-chip { align-self: center; margin: 0 0 0 0.5em; }
/* ⭐ 21 October 2026 (the warm-up exercise's walk): a small word's job is a sentence, not a gloss (の: "of, 's: joins an
   owner to a thing, うちのいす"), and held on one line it ran out of the margin and off the glass at 1280. The pressed
   note's meaning breaks inside the note's own measure, right-aligned; the two rows stay two. */
.cl-mnote.cl-mnote--pressed .cl-mn-en { white-space: normal; }
/* below 1180px the free paper is under 230px: the notes fold into ONE ROW
   inside the leaf's foot, in flow, still one per guest. (The rail already
   stands down below 1364px, so the leaf's own left space is the only
   question here.) Relative + z-index so the fibre never paints over them. */
@media (max-width: 1179px) {
    .cl-page > .cl-margin {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        padding: 0;
        margin-top: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.2rem 1.4rem;
        pointer-events: auto;
    }
    .cl-mnote { position: static; max-width: none; line-height: 1.5; justify-content: flex-start; text-align: left; }
    /* folded, a note keeps its one leading: a long meaning breaks inside the foot's row at it */
    .cl-mnote > .cl-mn-en { line-height: inherit; padding-block: 0; }
}

/* ── the meaning item: the one ask about what the Japanese SAYS ───────────
   The sentence at reading size, the three readings of it under it in the
   look's own dress — a pressed line, a fading pair, and the answer named on
   a miss. Nothing here is self-graded and nothing keeps score. */
.cl-meanline {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k5);
    line-height: 1.9;
    color: var(--cl-ink);
    margin-bottom: 1.4rem;
}
.cl-mean .cl-ask { margin-bottom: 0.9rem; }
.cl-mean-opts { flex-direction: column; align-items: stretch; }
.cl-mean-o { max-width: 40em; }
/* the pressed-and-wrong line keeps its seat: the quiet border, the stone wash */
.cl-mean-o--wrong {
    border-color: transparent;
    background: rgba(216, 210, 200, 0.34);
    color: var(--cl-quiet);              /* the elevation: opaque on its wash */
    box-shadow: none;
}
/* and the true reading is named, because a miss is owed the answer — S2: in
   the moss seat every right thing wears, never indigo (indigo is for things
   that answer the pointer, and an answer is not a control) */
.cl-mean-o--answer,
.cl-mean-o--right {
    border-color: transparent;
    background: rgba(var(--cl-moss), 0.16);
    color: rgb(var(--cl-moss-ink));
    box-shadow: none;
}

/* ── the reads (D22 reads, 2026-09-27; READS_CONTRACT.md §7, js: renderRead) ──
   ⭐ One piece on its own paper where the page stood, in the workbook's one
   seat (.cl-set--wb) with its one foot. The lines wear the leaf's own line
   dress (.cl-line) and its margin (.cl-page > .cl-margin), without the leaf's
   paper: a piece is a few lines in the workbook, not a page, so the border,
   the print margins and the grain stand down. The check below wears the
   meaning item's options (.cl-mean-o) or the rack's tiles (.cl-tile).
   ⛔ NOTHING MOVES UNDER THE EYE: the English under each line and a reply's
   second line are laid at mount and wait veiled ([data-veil]); arrival is ink. */
.cl-page.cl-page--read { border: 0; padding: 0; background: none; margin: 0 0 1.8rem; }
.cl-page--read::before { content: none; }
.cl-read-tag { margin: 0 0 1rem; }
.cl-read-en {
    display: block;
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: var(--e3);
    line-height: 1.5;
    color: var(--cl-quiet);
    margin: 0.1rem 0 0.5rem;
}
.cl-read-en .cl-record-oto { margin-left: 0.4rem; vertical-align: middle; }
/* ⭐ D65 (the owner, 23 October 2026, on lesson 12's warm-up: "Layout for a dialogue in any exercise should be person A:
   ... (row 1), person B: ... (row 2), not a text blob"; js speakersOf, turnHTML): AN EXCHANGE PRINTS A ROW A SPEAKER,
   every row aligned left, the speaker's letter before its line in a narrow column of its own, on the line's first
   baseline, so a turn that wraps keeps its edge and the English under the line keeps the line's. The letter is the
   chrome's micro-label in the quiet ink, outside the line's box: never a press, never voiced, and it stands while a
   reply's line waits veiled in its seat. (Was, since 27 September 2026: the second speaker indented 2em under the
   first, with no letter, .cl-read-line--b.) */
.cl-read-turn { display: flex; align-items: baseline; }
.cl-read-turn > .cl-read-line { flex: 1 1 auto; min-width: 0; }
.cl-spk {
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: var(--e4);
    font-weight: 500;
    letter-spacing: var(--e4-track);
    text-transform: var(--e4-case);
    line-height: 1;
    color: var(--cl-quiet);
    -webkit-user-select: none;
    user-select: none;
}
.cl-read-turn > .cl-spk { flex: 0 0 calc(1.1 * var(--k5)); }
/* a folded exchange's one caption: each line's English after its speaker's letter, ONE SPEAKER A LINE, every part on the same
   left edge and wrapping inside itself (the owner's report of 2 November 2026: where the two parts wrapped onto two lines, B
   stood 11 px right of A, the second part's 0.6em run-on margin; the side column had it first, and now every screen does: a
   phone's, a plated piece's, a sign beside its check) */
.cl-cap-part { display: block; white-space: normal; }
.cl-cap-part > .cl-spk { margin-right: 0.45em; }
/* a sign: the D17 plain frame round its labels and nothing more. ⭐ The design elevation (the review round, 1 November
   2026): the frame is a slip of the page's paper, lighter than the page and told by its shadow, its hairline ring gone (the
   last outline in the Reading); the border stays, transparent, so nothing moves */
.cl-page-lines.cl-read-sign {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    background: var(--cl-sheet);
    box-shadow: var(--cl-slip);
    padding: 0.9rem 1.5rem 0.4rem;
}
.cl-read-sign .cl-line { color: var(--cl-ink); }
/* 9 October 2026 (lesson 5's walk): a sign's lines are its labels, set close: three short labels ran 89 px each on the
   homework's first page, which scrolled at 1280 by 900 */
.cl-page-lines.cl-read-sign .cl-line { padding-top: 0.15em; padding-bottom: 0.15em; margin: 0; line-height: 1.55; min-height: 0; }
/* a reply is a whole line: three sentence tiles in one column, read left to right */
.cl-read-replies { flex-direction: column; align-items: flex-start; }
/* ⛔ AND A REPLY NEVER BREAKS INSIDE A WORD (batch D1 fix round 1, item 5; the
   S5 law every course sentence keeps). Beside p07's phone the options' column
   is 489px at 1280 (547 at 1680), and 私は、コーヒーがまだあると思います。 broke
   with す。 alone on its second line. keep-all / strict: a reply breaks only
   after its punctuation (here after 私は、), and anywhere only as the last
   resort of a clause wider than its column. */
.cl-read-reply {
    text-align: left;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: anywhere;
}
/* the house's [hidden] reset law: an author display owes its own */
.cl-read-en[hidden], .cl-page-lines.cl-read-sign[hidden] { display: none; }

/* ── section 2's media (MEDIA_CONTRACT.md §6, D24, 2026-09-28; js: plateHTML,
   cornerSeatHTML, renderPlusOne, layMissStrip) ─────────────────────────────
   ⭐ Three registers, one seat each, one picture a screen (P6), every seat laid
   at mount so the answer is ink alone (the held-seat law): a PLATE where the
   piece is written (above the check, 3:2, 520x347 at 1280x900; or beside it, a
   2:3 phone, 240x360, the check from x 530), square INK at the corner seat (a
   tile at y 136, a cue or a confirm at y 250, the word page's picture at y 94:
   x 803, the card picture's --cl-kpic; the +1 item's picture too, since batch
   A fix round 2, item 5).
   ⛔ The live text is the house's own ink on a painted blank surface (P7):
   gothic on print and screens, the teacher's hand on a note, no ruby on a
   plate (a guest's reading goes to the margin), sizes in the painting's own
   percentages (sceneHTML's cqw), so the writing scales with the paint. */

/* the plate: the painting whole at its format, no hairline, its own paper as
   the ground (the zone's contrast was measured on these very pixels) */
.cl-page.cl-read--plate {
    --cl-plate-w: min(calc(30.6 * var(--cl-u)), 57.8vh);
    border: 0;
    padding: 0;
    background: none;
    /* the budget's page-to-ask air (28px) less a hair, so the check's last
       seat ends at or above the foot's top (y 809 at 1280x900) with the
       caption line under the plate: 347 + 33 is the 380 the piece has */
    margin: 0 0 1.6rem;
}
.cl-read--plate::before { content: none; }
.cl-art.cl-read-plate {
    width: var(--cl-plate-w);
    max-width: 100%;
    aspect-ratio: var(--cl-plate-ar, 1.5);
    margin: 0;
    border: 0;
    container-type: size;                  /* the writing layer reads the plate's own box */
}
.cl-read--beside > .cl-art.cl-read-plate { width: var(--cl-phone-w); }
.cl-art.cl-read-plate img { height: 100%; object-fit: cover; object-position: 50% 50%; }
.cl-read-plate > .cl-scene { --cl-scene-ar: var(--cl-plate-ar, 1.5); }
/* a row is a line in a lane: centred on its x/y, as wide as its words up to
   its lane (mw), wrapping only where the runner lays a break (between tokens,
   after 、。), at its type size w, one ink for the whole surface */
.cl-read-plate .cl-scene-line {
    position: absolute;
    left: var(--cl-x, 50%);
    top: var(--cl-y, 50%);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: max-content;
    max-width: calc(var(--cl-mw, 100) * 1cqw);
    margin: 0;
    font-size: calc(var(--cl-w, 6) * 1cqw);
    line-height: 1.3;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: normal;
    color: inherit;
    pointer-events: auto;
}
.cl-read-plate--gothic .cl-scene-line { font-family: 'Noto Sans JP', var(--font-jp, 'Klee One'), sans-serif; }
.cl-read-plate--hand .cl-scene-line { font-family: var(--font-jp, 'Klee One', serif); }
/* ⛔ AND THE FACE REACHES THE TOKENS (fix round 1, P7, 2026-09-28). Every token
   carries lang="ja", and the house rule #kotobaLesson [lang="ja"] (1-1-0) sets
   Hana's hand on each of them directly, so the two rules above only reached the
   tokens by inheritance and lost: every plate printed in Klee One. Said again at
   1-3-0 on the row and on its tokens. Noto's CJK is 1em wide too, so the rows'
   wraps (1em a full-width character) hold. */
#kotobaLesson .cl-read-plate--gothic .cl-scene-line,
#kotobaLesson .cl-read-plate--gothic .cl-scene-line [lang="ja"] { font-family: 'Noto Sans JP', sans-serif; }
#kotobaLesson .cl-read-plate--hand .cl-scene-line,
#kotobaLesson .cl-read-plate--hand .cl-scene-line [lang="ja"] { font-family: var(--font-jp, 'Klee One', serif); }
.cl-read-plate--dark { color: var(--cl-ink); }
.cl-read-plate--light { color: var(--cl-sheet); }
.cl-read-plate--note .cl-scene-line { text-align: left; }
.cl-read-plate .cl-scene-line .cl-tk,
.cl-read-plate .cl-scene-line .cl-punct { color: inherit; }
.cl-read-plate rt { display: none; }
/* an asleep row: the door's own soft ink (.cl-scene-w--asleep), for a line */
.cl-read-plate .cl-scene-line.cl-scene-w--asleep { color: rgba(var(--cl-ink-rgb), 0.35); pointer-events: none; }
/* ⭐⭐ a chat is a THREAD (fix round 1, P8, 2026-09-28; js chatLayerHTML): one
   top-anchored column the size of the plate's zone (its top stepped down 6%),
   the bubbles in flow with 0.6em between them, so bubble 2 (the reply, a held
   blank seat until the answer lands in it) always follows bubble 1's real
   height. It stood at a fixed y, and a question wrapped to five lines ran 27px
   into it. The lane is the zone's whole width; bubble 1 at its left, bubble 2
   at its right. The column's own type size is the bubbles' (the gap's em). */
.cl-read-plate .cl-chat {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.6em;
    margin: 0;
    font-size: calc(var(--cl-w, 6) * 1cqw);
    pointer-events: none;
}
.cl-read-plate .cl-chat > .cl-scene-line--chat {
    position: static;
    transform: none;
    display: flex;
    flex: none;
    width: 100%;
    max-width: none;
    text-align: left;
}
.cl-scene-line--chat.cl-scene-line--in { justify-content: flex-start; }
.cl-scene-line--chat.cl-scene-line--out { justify-content: flex-end; }
/* the bubble: side padding 0.2em, so the zone's 5.7em lane holds a line of five
   and more characters; the phone's own gothic set proportional (palt), so a
   sentence-final particle rides its verb (行きますか。 on one line, never か。
   alone) and a short reply stays whole (木曜日です。) */
.cl-bubble {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0.28em 0.2em;
    border-radius: 0.5em;
    background: rgba(88, 76, 60, 0.09);
    font-feature-settings: "palt";
}
.cl-scene-line--out .cl-bubble { background: none; box-shadow: inset 0 0 0 1px rgba(var(--cl-ink-rgb), 0.3); }
/* the caption seat: one 33px line under a plate above the check (the lines'
   English joined), a line per piece line under a phone; veiled at mount */
.cl-read-caps { margin: 0; }
.cl-read-en.cl-read-cap {
    box-sizing: border-box;
    min-height: calc(1.94 * var(--cl-u));
    margin: 0;
    padding-top: 0.4rem;
    line-height: 1.4;
}
.cl-read--beside .cl-read-en.cl-read-cap { max-width: var(--cl-phone-w); }
/* ⭐⭐ THE SHORT WINDOW'S FRAME (fix round 2, P8, 2026-09-28; js frameFoldsAt,
   renderRead). Under 840px tall every piece reads in its frame, and the frame
   as a tall window lays it ran past the glass: the sign 1000px tall at
   1280x800 and 928 at 1680x800, the phone's exchange 931, the way on under
   the fold. Folded, the lines' English is ONE caption line under the frame
   (the plate's own seat, .cl-read-cap above), the lines stand at a reading
   pitch of 1.5 in place of the leaf's 1.95, the sign's hairline hugs its
   labels evenly, and the page keeps a shorter step to its ask. A piece hung
   with a plate folds its frame on any window (js frameFolds: its seat was the
   plate's). The type is the frame's own 27.2px: never smaller type (P8). */
.cl-page.cl-page--read.cl-read--fold { margin-bottom: 1.2rem; }
.cl-read--fold .cl-read-line { line-height: 1.5; }
.cl-read--fold > .cl-page-lines.cl-read-sign { padding: 0.6rem 1.5rem; }
/* beside: the phone and its captions at the left, the check from x 530 */
.cl-stage > .cl-read--seat-beside > .cl-item { max-width: 100%; }
.cl-read-beside {
    display: grid;
    grid-template-columns: var(--cl-phone-w) minmax(0, 1fr);
    column-gap: calc(2.14 * var(--cl-u));   /* 36px: the check from x 530 at 1280x900 */
    align-items: start;
}
.cl-read-beside > .cl-page.cl-read--plate { margin: 0; }
.cl-read-check > .cl-ask { margin-top: 0; }
/* and the miss seat stands a step nearer its options on a plate screen, so
   the check's last seat ends above the foot (the budget above) */
.cl-read--plated .cl-hand-tail--after { margin-top: 0.8rem; }
/* ⭐ THE PLATE ABOVE THE CHECK SEATS AT ITS FULL 520 x 347 ON 1280 x 900 (batch
   D1, sitting 2). p06 (a notice plate above three options) laid its plate at
   520 x 347 with the page 27px past the glass, so fitPlate drew it at 449 x 299
   to keep its note's held seat 24px over the foot: the plate the contract
   seats was the one thing on the screen that gave. The air around the plate
   and inside the check was the slack: the tag's step to the plate 1rem, the
   blank caption seat's top 0.4rem and its step to the ask 1.6rem, the ask's
   step to the options 0.9rem, the options 0.6rem apart, the note's seat 0.8rem
   under them. On a plate above the check they are 0.5, 0.2, 0.6, 0.5, 0.3 and
   0.3rem: 51px back at 1280 x 900, so the note's seat stands 28px over the
   foot with the plate at 520 x 347 (p06; s01 the same seat), fitPlate draws
   nothing narrower, and the page does not scroll. Every seat is still laid at
   mount (the held-seat law); a plate beside the check (a phone) is untouched. */
.cl-read--seat-above .cl-read-tag { margin-bottom: 0.5rem; }
.cl-read--seat-above .cl-page.cl-read--plate { margin-bottom: 0.6rem; }
.cl-read--seat-above .cl-read-en.cl-read-cap { padding-top: 0.2rem; }
.cl-read--seat-above .cl-mean .cl-ask { margin-bottom: 0.5rem; }
.cl-read--seat-above .cl-mean-opts { gap: 0.3rem; }
.cl-read--seat-above .cl-hand-tail--after { margin-top: 0.3rem; }
/* ⭐ THE WARM-UP STEP'S LAST GIVE IS ITS AIR (25 October 2026). The re-read heads
   with its place line since the owner's ask of 24 October ("add back context
   in warm-up readings"), and lesson 15's flyer, folded, its list under the
   painting, its top air given, ran exactly that line's 23px past the glass
   after a miss at 1280 x 900: the station had cut the miss line's seat to
   keep its question on the glass. Where a folded step still runs past, or
   its seat is still cut, with every give above spent (js fitHomeworkList
   'seat'), it takes the plate screen's air: the place line's step 0.5rem,
   the folded frame's 0.6rem, the ask's 0.5rem, the options 0.3rem apart,
   the note's seat 0.8rem under them: about 44px back on the flyer. Every
   seat is still laid at mount (the held-seat law); no type shrinks (P8). */
.cl-warm--tight .cl-read-tag { margin-bottom: 0.5rem; }
.cl-warm--tight .cl-page.cl-page--read.cl-read--fold { margin-bottom: 0.6rem; }
.cl-warm--tight .cl-mean .cl-ask { margin-bottom: 0.5rem; }
.cl-warm--tight .cl-mean-opts { gap: 0.3rem; }
.cl-warm--tight .cl-hand-tail--after { margin-top: 0.8rem; }
/* (E2-02, the deep review's repair round 2: on a Reading piece that takes this give, js fitHomeworkList, its veiled
   English seats stand a half step nearer their lines too, 0.25rem for 0.5rem: 24 px back on lesson 14's tenth piece,
   three turns over four lines; a warm-up step's dress is as it was) */
#kotobaLesson .cl-hw.cl-warm--tight .cl-read-en { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.cl-read-check .cl-read-reply { font-size: var(--k5); }

/* the corner seat: square ink hung from a zero-height anchor where the thing it
   stands beside begins; the column narrows to x 787 (at 1280) and keeps the
   width with no seat (js: no file, no seat). A marked word never breaks. */
.cl-stage > .cl-set.cl-set--corner > .cl-item { max-width: calc(100% - var(--cl-kpic) - 1rem); }
.cl-corner-seat { position: relative; height: 0; }
.cl-corner-seat > .cl-kpic { position: absolute; top: 0; left: calc(100% + 1rem); margin: 0; }
/* ⭐ U-065 (the deep review of 25 October 2026, the owner's go of 26 October; R50: a reading piece's painting is 3:2, R55:
   painted writing is there to be read): A MOMENT SITS WHOLE. A moment (MEDIA_CONTRACT §11: a reading piece's, a warm-up
   step's, a build page's) is a 3:2 painting, so its seat is 3:2 at the seat's own width (216 x 144 at 1280x900, 247 x 165
   at 1680x1050) and the painting is contained, never cropped to the square, and it takes no feather: the ink dress's 12%
   edge mask was made for a bare-paper kanji drawing and faded a painting's writing at its edges. Was: the square crop
   dropped a sixth of the painting at each side (lesson 12's bath board read 人 五百円 for 大人 五百円; lesson 8's fridge
   note lost です。 and 中。). A place's tile (1:1) keeps the square. */
.cl-corner-seat--moment > .cl-kpic { aspect-ratio: 3 / 2; }
.cl-corner-seat--moment > .cl-kpic img { object-fit: contain; }
.cl-corner-seat--moment > .cl-kpic.cl-kpic--ink img { -webkit-mask-image: none; mask-image: none; }
.cl-set--corner .cl-marked { white-space: nowrap; }
/* the cue's English seat held empty where the picture cues alone (+1) */
.cl-wb-cue.cl-wb-cue--held { visibility: hidden; }
/* the column folds to its dot while the corner seat is taken (js renderRail):
   its title and the one dot the first told card shows */
.cl-rail.cl-rail--folded > .cl-rd { display: none; }
.cl-rail.cl-rail--folded::after {
    content: '';
    display: block;
    width: var(--cl-dot);
    height: var(--cl-dot);
    margin-top: calc(0.575 * var(--k5) - var(--cl-dot) / 2);
    border-radius: 50%;
    background: var(--cl-dot-ink);
}
/* the word page: its picture floated at the corner, the lines beside it wrap */
.cl-card--pw > .cl-wordpic { float: right; margin: 0 0 1rem 1rem; }
/* ── the lesson's word pages (C3, batch D1 sitting 1, 2026-09-29; js:
   renderWordPage) ────────────────────────────────────────────────────────────
   ⭐ The card's word-page paper (.cl-card--pw: head, picture at the corner,
   the example) and ONE difference, under the head where a card's word line
   stands: a small tag in the reading tags' chip dress (the flashcard app's
   訓 / 音: a 4px chip, a pale wash of its ink, the ink itself, bold and small)
   and the whispered note beside it, small and in quiet ink. The tag is a press
   onto the kanji panel; its box is its box, pressed or not. */
/* ⛔ THE NOTE STANDS BESIDE ITS TAG, EVERY TIME (batch D1 fix round 1, item
   4). With flex-wrap: wrap the note fell under the tag whenever it was wider
   than the room left beside it: 今日's note under READ AS ONE at both sizes,
   その時's beside RETURNING KANJI at 1280 and under it at 1680. The row never
   wraps now: the tag keeps its own width (flex: none) and the note takes the
   rest and wraps under itself (flex: 1 1 0, min-width: 0), its first line on
   the tag's baseline. Its measure is the room's unit (34 --cl-u, was 34em of a
   16px face that does not scale), so the row stands beside the picture at the
   same share of the paper at 1280 and 1680 and the note wraps at the same
   word at both sizes (その時's broke "…Here it is / とき." at 1680 alone). */
.cl-wp-side {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.35rem 0.8rem;
    margin: 0;
    max-width: calc(34 * var(--cl-u));
}
.cl-wp-tag {
    flex: none;
    font-family: inherit;
    font-size: var(--e4);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--e4-track);
    text-transform: var(--e4-case);
    padding: 0.15em 0.6em 0.2em;
    border: 0;
    border-radius: 4px;
    color: var(--cl-accent);
    background: rgba(61, 90, 128, 0.09);
    box-shadow: none;   /* flat, as the 訓 / 音 chips are: never the global button's raised shadow */
    transition: background-color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
button.cl-wp-tag { cursor: pointer; }
button.cl-wp-tag:hover { background: rgba(61, 90, 128, 0.16); box-shadow: none; }
button.cl-wp-tag:focus-visible { outline: var(--cl-ring); outline-offset: var(--cl-ring-off); }
.cl-wp-note { flex: 1 1 0; min-width: 0; font-size: var(--e3); line-height: 1.6; color: var(--cl-quiet); }
/* ── the moment seats (MEDIA_CONTRACT §11, batch A sitting 3, 2026-09-29; js:
   readCornerOf, buildMomentOf, cornerSeatHTML) ──────────────────────────────
   ⭐ A moment is the sentence's own thing in its place, square ink at the
   corner seat. On a read it takes the tile's seat (x 803, y 136 at 1280x900),
   and the rules above hold it (.cl-set--corner). On the card's build page it
   hangs from a zero-height anchor on the brow's line (x 803, y 250), the page's
   column narrowed to x 787 like a workbook item's; the foot keeps its own box.
   Laid veiled at mount, it inks with the example on the settle, opacity only:
   nothing moves. */
.cl-card--pa.cl-card--corner > :not(.cl-foot) { max-width: calc(100% - var(--cl-kpic) - 1rem); }
.cl-corner-seat--moment.cl-corner-seat--in > .cl-kpic { animation: cl-unfold 320ms var(--ease-brush, ease) both; }
/* ── a card sentence's words (batch A sitting 3; the owner's walk, item 1; js:
   sentLineHTML, wireSentTaps) ─────────────────────────────────────────────
   ⭐ The example sentences on the word page and the build page take the
   reading pieces' press: a word opens its kana reading and its meaning as a
   note in the margin to the column's left, on the word's own line (the reads'
   .cl-page > .cl-margin, same note), and a second press puts it down. The
   margin is laid empty at the wiring, OUT OF FLOW: the sentence's box is
   identical with a note open and without one. Under 1180px there is no margin
   and the word card hangs above the word instead (js: marginNote falls back). */
.cl-sent.cl-sent--tap { position: relative; }
.cl-sent--tap > .cl-margin {
    position: absolute;
    top: 0;
    right: 100%;
    z-index: 1;
    box-sizing: border-box;
    padding-right: 1.5rem;
    pointer-events: none;
}
/* the note keeps its own sizes: the sentence's [lang] rules are the line's, not the margin's */
.cl-sent--tap > .cl-margin [lang="ja"] { font-size: inherit; line-height: inherit; }
@media (max-width: 1179px) {
    .cl-sent--tap > .cl-margin { position: static; display: none; }
}
/* the +1 item (batch A sitting 2, 2026-09-29; the owner's walk, item 2): the
   meaning asked ("Which kanji means 'see'?"), three kanji tiles, and the card
   picture laid VEILED at mount (js renderPlusOne: data-reveal data-veil). The
   picture inks into its seat at the answer as the reveal, opacity only, on the
   record's own ink (320ms, the brush ease): nothing moves.
   ⭐ batch A fix round 2 (item 5): ITS SEAT IS THE CORNER SEAT (.cl-corner-seat,
   --cl-kpic, x 803 at 1280x900, the rules above), hung from the question's
   line, where section 2's confirm pictures ink on the answer. It stood at 340
   BETWEEN the question and the tiles, and the veiled seat was a 360px blank
   band (410 at 1680) that read as a picture that failed to load: the tiles
   now sit right under the question. --cl-plus1-pic (340) is retired with it. */
.cl-plus1-ask { margin: 0 0 1.2rem; }
.cl-plus1-pic[data-reveal]:not([data-veil]) > .cl-kpic { animation: cl-unfold 320ms var(--ease-brush, ease) both; }
/* ⭐ batch A fix round 2 (item 3): AN ANSWERED QUESTION, WALKED BACK TO, ARRIVES
   WHOLE (js restItem, .cl-set--rest). Its record and its picture inked on the
   answer; the page that stands them again fades in as every page does, and
   nothing on it blooms a second time. */
.cl-set--rest .cl-record.cl-settled > *,
.cl-set--rest .cl-record.cl-settled .cl-sent--settled > .cl-sent-en,
.cl-set--rest .cl-plus1-pic[data-reveal] > .cl-kpic { animation: none; }
.cl-record .cl-settled-row > .cl-plus1-oto { align-self: center; }
/* the miss strip: the card picture at 120 beside the note, the row as tall as
   the picture from mount (a right answer keeps it: nothing moves) */
.cl-missrow {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-height: var(--cl-miss-pic);
}
.cl-missrow > .cl-misspic { flex: none; width: var(--cl-miss-pic); }
.cl-missrow > .cl-misspic > .cl-kpic { width: 100%; flex: none; }
.cl-missrow > .cl-verdictnote { flex: 1 1 auto; min-width: 0; }

/* the warm-up's repair asks wear the set's own dress; only the station line
   above the first one says what they are */
.cl-repair .cl-station-line { color: var(--cl-quiet); }

/* ── the pair, on its own paper (owner note 2, 2026-09-08) ────────────────── */
/* ⭐⭐ "THESE TWO ARE EASY TO MIX UP" IS A PAGE, not the last block at the foot
   of a page about one character. The seat is the SHEET's full one — both glyphs,
   the shared clause, a line each — because this screen is where the learner comes
   to compare, and there is nothing else on the paper to compare it against. */
/* ⛔ ROUND 2: the page begins where a page begins and the SECTION keeps the
   column. It carried 2.8rem of margin on a section already sized to the
   glass (a 45px phantom scroll on every glass, 次へ cut at the bottom edge)
   and shrank the section itself to 34em, so its absolute foot spanned 544px
   and Next stood 176px inside the column's edge — the one station that
   escaped S1's x law. The prose keeps its 34em measure on its own blocks. */
.cl-twinpage { padding-top: var(--cl-origin-page); }
.cl-twinpage > .cl-twin, .cl-twinpage > p { max-width: 34em; }
.cl-twinpage > .cl-twin { margin-top: 0; }

/* ⭐ ROUND 2 (CR-7): KEYCAPS FOR THE KEYBOARD HAND. The 1-9 digits answered a
   guess, a pick, a meaning line and a page question and nothing said so.
   While the room is driven by keys (.cl-by-key) each option a digit reaches
   wears its numeral in the corner, quiet ink, seat reserved by the option's
   own padding; the pointer hand never sees it; a spent hand loses it.
   ⛔ Never on a build rack: those tiles are placed and taken back, and a
   numeral there would name a key that does nothing. */
#kotobaLesson.cl-by-key .cl-opt[data-key], #kotobaLesson.cl-by-key .cl-tile--kanji[data-key] { position: relative; }
#kotobaLesson.cl-by-key .cl-opt[data-key]::before, #kotobaLesson.cl-by-key .cl-tile--kanji[data-key]::before {
    content: attr(data-key);
    position: absolute;
    top: 3px;
    left: 6px;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e4);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: var(--cl-quiet);
    pointer-events: none;
}
#kotobaLesson.cl-by-key .cl-hand--done .cl-tile--kanji[data-key]::before,
#kotobaLesson.cl-by-key .cl-hand--done .cl-opt[data-key]::before { content: none; }
/* ⭐ v2.2 · AND THE WORKBOOK'S NEW SEATS KEEP THEIR NUMERALS. A kana option and
   a match cell are pressed by a digit like every other option, so they wear the
   same corner numeral in the same quiet ink. ⛔ They join as a SECOND rule, not
   as a longer selector: the list above is read word for word by craft_test.js,
   and a pin that names a rule is part of the rule. */
#kotobaLesson.cl-by-key .cl-rack--kana .cl-tile[data-key],
#kotobaLesson.cl-by-key .cl-match-o[data-key] { position: relative; }
#kotobaLesson.cl-by-key .cl-rack--kana .cl-tile[data-key]::before,
#kotobaLesson.cl-by-key .cl-match-o[data-key]::before {
    content: attr(data-key);
    position: absolute;
    top: 3px;
    left: 6px;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e4);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: var(--cl-quiet);
    pointer-events: none;
}
#kotobaLesson.cl-by-key .cl-hand--done .cl-rack--kana .cl-tile[data-key]::before,
#kotobaLesson.cl-by-key .cl-hand--done .cl-match-o[data-key]::before { content: none; }

/* ── the word is the unit (E1.8, 2026-09-29; item 16 and D25; js: portraitPage,
   examplesPage, cardPages, the door's foot) ───────────────────────────────────
   ⭐ THE DOOR HAS NO BACK (item 18). Its foot keeps one seat, 始める Begin, at
   the column's right edge where every Next stands; the foot's space-between
   would otherwise carry the lone seat to the left edge. */
#kotobaLesson .cl-stage .cl-foot.cl-foot--door { justify-content: flex-end; }
/* ⭐⭐ THE PORTRAIT PAGE: the word alone. Two columns: the head, the whisper and
   the tag at the left; the portrait LARGE at the right, its right edge the
   column's (the Next seat's own edge). No portrait: the seat stays empty and
   the text keeps its measure (D25: no example's picture ever sits there).
   ⭐⭐ ITEM 22 (the owner's third look, 2026-09-30: "word page, most of the
   space is empty ... why would not we make image larger and make word appear
   less of a second citizen? ... same applies with the examples ... currently
   top 1/3 screen is occupied, lower 2/3 is empty"). OVERRIDES the portrait's
   seventeen units / 32vh (288px at 1280x900, 323 at 1680x1050, hung under the
   head at the top of the glass) and the example's corner seat (--cl-kpic,
   216 / 247): ONE BLOCK, CENTRED ON THE GLASS, inside the card's own column
   (765px at 1280, 855 from 1600), so the spine, the foot's two seats and the
   rail stand where every other page has them.
   · THE WORD'S SEAT (.cl-wseat, --cl-portrait): what the column leaves after
     the text (16 units) and the gap (2.2 units, the character band's own),
     capped at 56% of the window's height (a short glass keeps the seat and
     the sentence row above the foot) and at 44vw and 680px: 456px at
     1280x900, 482 at 1440x900, 509 at 1680x1050 (1.6x the old portrait, 2.1x
     the corner seat).
   · FOUR ROWS, [1fr | the seat | the sentence row | 1fr]: the seat's row is
     the seat, the sentence row is at least --cl-wsent (one line of the
     examples' large hand and its English) and at least --cl-wsent-held (js
     holdSeat: what the OTHER page of the pair needs of it, the portrait's
     text running past the seat or the example's sentence, measured from a
     veiled copy at mount), and the two flexible rows share what the glass
     has left, so the block is centred on the glass. The seat and the head
     both stand at the top of the seat's row on the portrait AND on the
     examples page, and the row under them is one height on both: THE PAGE
     TURN MOVES NEITHER THE PICTURE NOR THE WORD (item 22's held seat,
     measured on all twelve cards of lesson 5 at 1280x900 and 1680x1050: the
     same x, y, width and height on both pages). The portrait's text column
     runs down into the sentence row, which the examples page fills.
   · THE WORD IS AS LARGE AS ITS COLUMN ALLOWS, up to the character page's
     glyph (--k1, 189px at 900): the head is a size container and the word's
     size is its width over the word's length in characters (--cl-wn, js
     wordHeadFullHTML big), so 心 stands at the glyph's own 189px, 思う at 136,
     思い出 at 91 (the old head: 75 for every word). The reading stands over it
     at the read size (k5), the meaning (e1) and the ear on one line under it. */
.cl-card--portrait,
.cl-card--examples {
    --cl-portrait-text: calc(16 * var(--cl-u));
    --cl-portrait-gap: calc(2.2 * var(--cl-u));
    --cl-portrait: min(56vh, 44vw, 680px, calc(var(--cl-col-max) - var(--cl-portrait-text) - var(--cl-portrait-gap)));
    --cl-wsent: calc(6.2 * var(--cl-u));
    --cl-wseat-half: calc((var(--cl-portrait) - var(--cl-portrait-gap)) / 2);
}
.cl-card--portrait,
.cl-card--examples-one {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cl-portrait);
    grid-template-rows: minmax(0, 1fr) var(--cl-portrait) minmax(max(var(--cl-wsent), var(--cl-wsent-held, 0px)), auto) minmax(0, 1fr);
    column-gap: var(--cl-portrait-gap);
    align-items: start;
}
.cl-card--portrait.cl-card--noportrait,
.cl-card--examples-one.cl-card--nopic { grid-template-columns: minmax(0, 1fr); }
.cl-card--portrait > .cl-portrait-text,
.cl-card--examples-one > .cl-wprobe--text { grid-column: 1; grid-row: 2 / 4; }
.cl-card--portrait > .cl-portrait,
.cl-exrow--seat > .cl-expic { grid-column: 2; grid-row: 2; }
/* holdSeat's veiled copy: laid in its cell for one measure, never seen, never
   pressed, out of the reading (aria-hidden), gone before the first paint */
.cl-wprobe { visibility: hidden; pointer-events: none; }
.cl-portrait-text { min-width: 0; }
.cl-portrait-text > .cl-wp-side { margin-top: var(--cl-air-between); }
.cl-portrait-text > :last-child { margin-bottom: 0; }
/* the text column beside the seat is 16 units (272px at 1280): the whisper
   keeps a narrow column's leading (1.6 against the page's 1.7) and the tag
   stands one step under the line above it (air-in, the tier's own step), so
   時's head, whisper, collocation and tag with its note (700px at the page's
   own airs) stand inside the 678px glass at 1280x900 */
.cl-portrait-text > .cl-synth { line-height: 1.6; }
.cl-portrait-text > .cl-wp-side { margin-top: var(--cl-air-in); }
.cl-portrait > .cl-kpic { width: var(--cl-portrait); flex: none; margin: 0; }
.cl-wseat > .cl-kpic { width: var(--cl-portrait); flex: none; margin: 0; }
.cl-wseat.cl-wseat--half > .cl-kpic { width: var(--cl-wseat-half); }
/* the word's head, the portrait's (and in holdSeat's veiled copy; item 22a:
   the example page prints none): a column at the text column's left edge, the
   reading over the word, the meaning and the ear under it */
.cl-card--pw .cl-portrait-text > .cl-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(0.6 * var(--cl-u));
    margin-bottom: var(--cl-air-in);
    container-type: inline-size;
}
/* ⭐ U-054 (the deep review of 25 October 2026): the hero's size is a token of its own (--cl-hero), so its reading can be
   seated by it (below), and the hero sets solid (line-height 1, was 1.05) */
.cl-card-head > .cl-word.cl-word--big {
    --cl-hero: min(var(--k1), calc(100cqi / var(--cl-wn, 2)));
    font-size: var(--cl-hero);
    line-height: 1;
}
/* ⭐ 14 October 2026 (lesson 5's walk: 日曜日 and 週間 at 1280x900 ran to 924 and 956 px of 900 with the seat held
   at its 60% floor): THE SECOND GIVE (js holdSeat). A word page whose text column still runs past the room once
   the seat is at its floor tightens: the two airs a step closer and the head a size down, nothing cut, nothing
   moved; the class is lifted again on a wider glass. */
.cl-card--portrait.cl-card--tight {
    --cl-air-in: calc(0.8 * var(--cl-u));
    --cl-air-between: calc(1.8 * var(--cl-u));
}
.cl-card--portrait.cl-card--tight .cl-card-head > .cl-word.cl-word--big {
    --cl-hero: min(calc(0.78 * var(--k1)), calc(78cqi / var(--cl-wn, 2)));
    font-size: var(--cl-hero);
}
/* (14 October 2026, lesson 6's finish: 三日's page, a set's short card with two story blocks, the set line, the links
   line and a four-row ways table, stood 33 px past its room with the seat at its floor and the card tight) the story
   and its notes take a closer leading too, the page's 1.7 and the note's 1.6 a step down */
.cl-card--portrait.cl-card--tight .cl-portrait-text > .cl-wstory-lead,
.cl-card--portrait.cl-card--tight .cl-portrait-text > .cl-wstory-note { line-height: 1.5; }
.cl-card--portrait.cl-card--tight .cl-wp-note { line-height: 1.45; }
/* ⭐ 11 November 2026 (the laptop census: at 1536x735 lesson 18's 働く and lesson 25's 乗る, 21 and 15 px past the room
   with the seat at its floor and the card tight): THE LAST GIVE (js holdSeat). The station's own air over the hand
   (the rule of .cl-stage > section: 5.4rem less the foot) comes down by what is still over, never under half a unit:
   the text keeps its place over the foot and the page no longer scrolls. No page that fits carries the class. */
#kotobaLesson .cl-stage > section.cl-card--portrait.cl-card--give {
    padding-bottom: max(calc(0.5 * var(--cl-u)), calc(5.4rem - var(--cl-foot-h) - var(--cl-card-give, 0px)));
}
/* ⭐ 12 November 2026 (fault B of the laptop's last faults: lesson 10's counter 〜本, its short card and the question laid
   on it, 41 px past the room at 1536x735 with the card tight, where the air over the hand has 30 to give): what that air
   cannot give, the page's top air gives next (js holdSeat: --cl-card-lift, what is still over): the page starts a little
   higher, never under one unit. Only a page that still runs past its room with the give spent carries the class. */
#kotobaLesson .cl-stage > section.cl-card--portrait.cl-card--give.cl-card--lift {
    padding-top: max(var(--cl-u), calc(var(--cl-origin-page) - var(--cl-card-lift, 0px)));
}
/* (14 October 2026, lesson 6's finish: 三日's page, a set's short card with a four-row ways table under its story,
   stood 3 px past the foot with the seat at its floor and the card tight) the ways rows step closer too */
.cl-card--portrait.cl-card--tight .cb-ways { margin-top: 0.6rem; }
.cl-card--portrait.cl-card--tight .cb-ways-line { margin-bottom: 0.25rem; }
.cl-card--portrait.cl-card--tight .cb-way-l { line-height: 1.3; }
.cl-card--portrait.cl-card--tight .cb-way-k,
.cl-card--portrait.cl-card--tight .cb-way-w { line-height: 1.2; }
/* (U-051 leaves the hero's reading as it was: k5, Klee One 400, already a readable line at about 27 px)
   ⭐ U-054 (the deep review of 25 October 2026: め over 目 floated about 40 px over the glyph's ink): THE READING SEATED
   OVER THE CHARACTER'S FACE. The engine sets the reading over the glyph's em box, and a brush glyph's ink stands well inside
   it (目 0.13 em down), so the reading row comes down by one fixed share of the hero (0.08 em: 15 px at 189), the same for
   every word, never by a glyph's own ink: the tallest faces of the course (九 六 鼻, their ink 0.03 em under the box)
   keep a hair of paper (about 0.1 em of the reading) under it. Nothing else moves: an offset in place, the line's room as
   it was */
.cl-card-head > .cl-word--big rt { font-size: var(--k5); line-height: 1.2; font-weight: 400; position: relative; top: calc(0.08 * var(--cl-hero, 0px)); }
.cl-card-head > .cl-word--big + .cl-word-meta--ruby .cl-reading-row { align-items: center; gap: 0.7rem; }
/* E3-5 (11 October 2026): the meaning's chip follows the gloss's last word; a gloss that wraps (持つ at 1280) no
   longer leaves the chip standing apart at the column's edge */
.cl-card-head > .cl-word--big + .cl-word-meta--ruby .cl-reading-row { display: inline; }
.cl-card-head > .cl-word--big + .cl-word-meta--ruby .cl-reading-row > .cl-gloss-line { display: inline; }
.cl-card-head > .cl-word--big + .cl-word-meta--ruby .cl-reading-row > .cl-oto { display: inline-flex; vertical-align: middle; margin-left: 0.7rem; }
/* ⭐ THE WORD'S TYPE, AN EYEBROW OVER THE BIG WORD (the owner's pick B, 24 October 2026: "as for parts of speech tag I agree
   with your recommendation B", of the demo's three seats on lesson 13's 黄色 page and the 茶色 card, wt/pos-demo): "名詞
   NOUN" the first line of the portrait's head and of the short card's (js posTagHTML; wordHeadFullHTML's `pos`), in the
   frame's micro-label voice (.cl-tag's: Inter 600 at --e4, tracked caps; the kanji in the chrome face, a size up and
   untracked, D33: never kana over it), the quiet ink for both, nothing coloured, no new face. The head's column gap is
   given back under it, so the word, the meaning and the story move down by the tag's line and no more (15.7 px at
   1280x900, 11.1 px at 1680x1050: the demo's measure). The ask's compact head prints none. An asked screen keeps it
   with the sound chip until Check (D64: .cl-card--asking); the ask laid on its card inks it in with the meaning (js
   unfoldRun). The word card's lede and the guest's line wear the same pair (css/course-book.css .cb-pos). */
#kotobaLesson .cl-pos {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
    margin: 0 0 calc(-0.6 * var(--cl-u));
    white-space: nowrap;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e4);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--e4-track);
    text-transform: uppercase;
    color: var(--cl-quiet);
}
#kotobaLesson .cl-pos .cl-pos-en { font-style: normal; }
#kotobaLesson .cl-pos .cl-pos-k {
    font-family: var(--cl-font-chrome-jp);
    font-size: var(--e3);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--cl-quiet);
}
#kotobaLesson .cl-card--asking .cl-pos { visibility: hidden; }
/* ⭐ THE EXAMPLES PAGE: each example a row, the sentence at the left and its
   illustration at the corner seat's column (--cl-kpic, square ink, the right
   edge the column's); under 'A' two rows, one breath apart. The word stands
   above them in the ask's compact head.
   ⛔ ITEM 22a (Phase 5, P1) OVERRIDES THE HEAD BELOW: the example page prints
   no head; the lone example's words stand in the text column beside the seat
   where a clause allows (the block "Phase 5 · P1" at the end of this sheet).
   ⭐⭐ ITEM 22: ONE EXAMPLE ('B', and a card with one sentence under 'A')
   STANDS IN THE PORTRAIT'S GEOMETRY: the portrait's own head in the seat's
   row at the left, the illustration in the word's seat at the right, and the
   sentence UNDER THEM IN THE SENTENCE ROW, ACROSS THE WHOLE COLUMN, in the
   large hand (k4: 35px at 1280, 39 at 1680; the read size k5 before) with
   its English at the body size (e2). ⛔ Across, not beside: a card sentence
   breaks only between its clauses (keep-all, S5), and the text column beside
   the seat holds seven characters of the large hand, so 思う's いいと思います。
   left its 。 alone on a line and 持つ's seventeen-character clause broke
   inside its words; the column's full measure holds every sentence of lesson
   5 on one line. The row is `display: contents`, so its two children are the
   grid's own and the row keeps its markup, its tap-gloss (the margin note
   stands left of the sentence, where it always stood) and its voice.
   TWO EXAMPLES ('A') keep their rows, each illustration HALF THE SEAT
   (--cl-wseat-half, 209px at 1280x900), its right edge the seat's, the block
   centred on the glass. */
.cl-card--examples .cl-card-head { margin-bottom: var(--cl-air-in); }
.cl-exrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cl-kpic);
    column-gap: 1rem;
    align-items: start;
}
.cl-exrow.cl-exrow--nopic { grid-template-columns: minmax(0, 1fr); }
.cl-exrow + .cl-exrow { margin-top: var(--cl-air-between); }
.cl-card--pw .cl-exrow > .cl-sent--teach { margin-top: 0; }
.cl-expic > .cl-kpic { margin: 0; }
.cl-exrow.cl-exrow--seat { display: contents; }
.cl-card--pw .cl-exrow--seat > .cl-sent { grid-column: 1 / -1; grid-row: 3; min-width: 0; margin-top: var(--cl-air-in); }
.cl-exrow--seat > .cl-sent > [lang="ja"],
.cl-exrow--seat > .cl-sent > [lang="ja"] [lang="ja"] { font-size: var(--k4); line-height: 1.5; }
.cl-exrow--seat > .cl-sent > .cl-sent-en { font-size: var(--e2); line-height: 1.5; margin-top: 0.3rem; }
.cl-card--examples:not(.cl-card--examples-one):not(.cl-card--phrase) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cl-card--examples:not(.cl-card--examples-one):not(.cl-card--phrase) > .cl-exrow {
    grid-template-columns: minmax(0, 1fr) var(--cl-wseat-half);
    column-gap: var(--cl-portrait-gap);
    align-items: center;
}
.cl-card--examples:not(.cl-card--examples-one):not(.cl-card--phrase) > .cl-exrow.cl-exrow--nopic { grid-template-columns: minmax(0, 1fr); }
.cl-card--examples:not(.cl-card--examples-one):not(.cl-card--phrase) > .cl-exrow + .cl-exrow { margin-top: var(--cl-portrait-gap); }
/* ⛔ AT PHONE WIDTH THE SEAT STACKS (the character band's own step, above):
   the text first, the picture under it at 60% of the column and centred, the
   rows back in their block. Out of the desktop scope, kept sane. */
@media (max-width: 768px) {
    .cl-card--portrait,
    .cl-card--examples-one,
    .cl-card--examples:not(.cl-card--examples-one):not(.cl-card--phrase) { display: block; }
    .cl-exrow.cl-exrow--seat { display: block; }
    .cl-card--examples:not(.cl-card--examples-one):not(.cl-card--phrase) > .cl-exrow { grid-template-columns: minmax(0, 1fr); row-gap: var(--cl-air-in); }
    .cl-wseat { margin-top: var(--cl-air-in); }
    .cl-wseat > .cl-kpic,
    .cl-wseat.cl-wseat--half > .cl-kpic { width: 60%; margin-left: auto; margin-right: auto; }
}

/* ── the phrase (P2, 2026-09-29; item 17 / 17b; INTEGRATION_17B §1 and §3; js:
   phrasePage, portraitPage's collocation line, the rail's phrase row, the
   build's chunk seats, the situation pick) ─────────────────────────────────────
   ⭐⭐ THE PHRASE PAGE wears the examples' dress (.cl-card--examples): the tag
   first, quiet, saying what the page is (set phrase · with 持つ); the phrase at
   the EXAMPLE's size (k5, the read size), never the word's head size, since a
   ten-character phrase at the head's size runs past the measure; its reading
   (k6) with the sound chip beside it and its meaning under; the note on the
   measure; the one example in the example row with its illustration at the
   corner seat's column. Everything is laid at mount: nothing moves on arrival. */
.cl-card--phrase .cl-ph-kind { margin: 0 0 var(--cl-air-in); }
/* the head is a column, all at the column's left edge: the phrase, then its
   reading with the chip beside it, then its meaning (the word page's head
   stands the word beside its meta; a phrase runs too long for that row) */
.cl-card--phrase .cl-ph-head { display: block; margin-bottom: 0; }
.cl-ph-jp {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k5);
    line-height: 1.3;
    color: var(--color-jp-text, #2A231F);
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.cl-card--phrase .cl-ph-meta { margin-top: 0.45rem; gap: 0.3rem; }
.cl-card--phrase .cl-ph-meta .cl-reading { font-size: var(--k6); color: var(--cl-quiet); }
.cl-card--phrase .cl-ph-meta .cl-gloss-line { font-size: var(--e2); line-height: 1.4; }
.cl-card--phrase .cl-ph-meta .cl-reading-row { display: inline-flex; align-items: center; gap: 0.5rem; }
.cl-ph-note {
    margin: var(--cl-air-in) 0 var(--cl-air-between);
    max-width: calc(34 * var(--cl-u));
    font-size: var(--e3);
    line-height: 1.65;
    color: var(--cl-quiet);
}
/* ⭐ THE COLLOCATION WHISPER: one quiet line under the portrait's whisper, a
   step smaller and paler than it; words in a row, never a unit. */
.cl-portrait-text > .cl-colloc {
    margin: calc(-0.5 * var(--cl-air-in)) 0 0;
    max-width: calc(34 * var(--cl-u));
    font-size: var(--e3);
    line-height: 1.6;
    color: var(--cl-quiet);
}
/* ⭐ THE RAIL'S PHRASE ROW sits under its anchor's row in the word's dress, a
   step smaller (a phrase runs longer than a word, and the column's measure is
   the word's), one indent in so it reads as the word's own. */
.cl-rd.cl-rd--phrase { font-size: var(--k6); padding-left: 0.6em; white-space: nowrap; }
/* ⭐ A PHRASE'S CHUNK SEATS (build the phrase from 持って・きます・いきます):
   every seat at the rack's widest chunk from mount (--cl-chunk, in characters,
   laid by the dealer), so a three-kana chunk never overflows a seat cut for
   one kanji and no seat is wider than its neighbours. */
.cl-seat--k.cl-seat--chunk { width: calc(var(--cl-chunk, 3) * 1em + 0.8rem); }
/* ⭐ THE SITUATION PICK: three whole phrases on one row, at the read size. */
.cl-rack--phrase .cl-tile { font-size: var(--k5); min-width: 0; }

/* ── v5 · THE LESSON FILE OF PHASE 2 (A1, 2026-10-01; LOCKED_PLAN §1.3) ──────
   The door, the gates' kana and second line, the plain meaning ask, the close.
   js: doorV5HTML, gateHTML, dealMeaningAsk, renderCloseV5. Every box is laid
   at mount; nothing here answers or unfolds but the meaning ask's options. */

/* THE DOOR: the name, the mark and the intro beside the mark word's portrait;
   under them the model sentence with its label, the four parts, the fixed line.
   ⛔ No minutes, no counts. It fits the glass at 1280x900 and 1680x1050 (the
   walker's one-screen law for the door): the page origin, not the ask origin. */
.cl-stage > section.cl-door.cl-door--v5 { padding-top: var(--cl-origin-page); }
.cl-door-top.cl-door-top--v5 { display: flex; align-items: flex-start; gap: calc(2 * var(--cl-u)); margin-bottom: 0; }
.cl-door-top--v5 .cl-door-text { flex: 1 1 auto; min-width: 0; }
.cl-door--v5 .cl-door-mark { margin-top: calc(0.6 * var(--cl-u)); }
.cl-door--v5 .cl-door-intro { margin-top: calc(0.8 * var(--cl-u)); }
.cl-door-portrait {
    flex: 0 0 auto;
    /* Phase 5 repair round 1 (M2, design; verify_owner M1): the portrait at the seat the
       owner borrowed, sunlit's door as shot (learners_book_2026-09-29/sunlit/shots/
       walls_door.png: the mug at 391 px filling the right half; judge_owner.md send-back 2).
       23u = 391 px at 1280, 437 at 1680; the name wraps to two lines beside it, as sunlit's
       did. Capped by the glass less the door's other furniture (the origin, the model between
       its rules, the parts, the stop line, the foot: about 21u) so the door stays one screen
       on a shorter glass; at 1280x900 and 1680x1050 the cap never bites. */
    width: min(calc(23 * var(--cl-u)), calc(var(--cl-glass) - 21 * var(--cl-u)));
    height: min(calc(23 * var(--cl-u)), calc(var(--cl-glass) - 21 * var(--cl-u)));
    margin: 0;
    background: var(--cl-paper);
    overflow: hidden;
}
.cl-door-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; filter: url(#cl-washi); mix-blend-mode: multiply; }
/* mobile deferred (owner 2026-09-27): no phone design here. This only keeps the door readable
   on a phone now that the seat is big: the portrait drops under the text instead of squeezing
   the text column to nothing, and never runs wider than the column. */
@media (max-width: 768px) {
    .cl-door-top.cl-door-top--v5 { flex-wrap: wrap; }
    .cl-door-portrait { max-width: 100%; }
}
/* the model sentence: the promise, labelled, between two rules (the door's one
   framed thing: the line the close reads back) */
.cl-door-model {
    width: var(--cl-col);
    margin: calc(1.4 * var(--cl-u)) auto 0;
    padding: calc(0.9 * var(--cl-u)) 0;
    border-top: 1px solid var(--cl-rule);
    border-bottom: 1px solid var(--cl-rule);
}
.cl-door-model-label { margin: 0 0 0.35rem; font-size: var(--e3); letter-spacing: 0.01em; color: var(--cl-quiet); }
.cl-door-model-jp { margin: 0; font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif); font-size: var(--k4); line-height: 1.35; color: var(--color-jp-text, #2A231F); }
.cl-door-model-en { margin: 0.3rem 0 0; font-size: var(--e2); line-height: 1.5; color: var(--cl-ink); }
.cl-door--v5 .cl-door-parts { margin-top: calc(1.1 * var(--cl-u)); }
.cl-door-stop { width: var(--cl-col); margin: calc(0.6 * var(--cl-u)) auto 0; font-size: var(--e3); line-height: 1.5; color: var(--cl-quiet); }
.cl-door--v5 .cl-door-body { margin-top: calc(0.4 * var(--cl-u)); }
/* the gate's second line: what is inside (inside_en), quiet under the gate line */
.cl-gate-inside { margin: calc(0.6 * var(--cl-u)) 0 0; max-width: 34em; font-size: var(--e3); line-height: 1.6; color: var(--cl-quiet); }
/* THE MEANING ASK, PLAIN: the word, then its meanings as options (A2 dresses it) */
.cl-mean-word {
    margin: calc(1.1 * var(--cl-u)) 0 calc(0.9 * var(--cl-u));
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--k3);
    line-height: 1.2;
    color: var(--color-jp-text, #2A231F);
}
.cl-mean5-opts { max-width: 30em; }
/* THE CLOSE: three lines and the seal. The read-back with the seal beside it,
   tonight's words in one list (the phrases under their word, never counted),
   the line in words on what comes back, the next line, the goodbye. It fits the
   glass at 1280x900. ⛔ Every rule wears .cl-close.cl-close--v5: the old close's
   chapter rule (.cl-close .cl-close-ch > *, 1.4rem under every block) stands
   for the old close alone. */
.cl-close.cl-close--v5 .cl-close-ch > * { margin-top: 0; margin-bottom: 0; }
.cl-close.cl-close--v5 .cl-close5-top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(2 * var(--cl-u)); }
.cl-close.cl-close--v5 .cl-close5-read { flex: 1 1 auto; min-width: 0; }
.cl-close.cl-close--v5 .cl-close5-seal { flex: 0 0 auto; margin-top: 0.2rem; }
.cl-close.cl-close--v5 .cl-close5-seal .cl-stamp { margin: 0; }
.cl-close.cl-close--v5 .cl-close5-label { margin: 0 0 0.3rem; font-size: var(--e3); color: var(--cl-quiet); }
.cl-close.cl-close--v5 .cl-close5-line { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.cl-close.cl-close--v5 .cl-close5-jp { font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif); font-size: var(--k4); line-height: 1.3; color: var(--color-jp-text, #2A231F); }
.cl-close.cl-close--v5 .cl-close5-en { margin: 0.15rem 0 0; font-size: var(--e2); line-height: 1.45; color: var(--cl-ink); }
.cl-close.cl-close--v5 .cl-close5-cue { margin: 0.3rem 0 0; font-size: var(--e3); color: var(--cl-quiet); }
.cl-close.cl-close--v5 .cl-close5-words { margin-top: calc(1.3 * var(--cl-u)); }
.cl-close.cl-close--v5 .cl-close5-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(0.6 * var(--cl-u)) calc(1.2 * var(--cl-u));
}
.cl-close.cl-close--v5 .cl-close5-w { display: flex; flex-direction: column; min-width: 0; }
.cl-close.cl-close--v5 .cl-close5-w > .cl-rcw { font-size: var(--k5); line-height: 1.2; align-self: flex-start; padding: 0; }
.cl-close.cl-close--v5 .cl-close5-r { font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif); font-size: var(--e3); line-height: 1.3; color: var(--cl-quiet); }
.cl-close.cl-close--v5 .cl-close5-g { font-size: var(--e3); line-height: 1.3; color: var(--cl-ink); }
/* the phrases under their word: one indent, no bar (the left bar is quoted Japanese's alone) */
.cl-close.cl-close--v5 .cl-close5-ph { list-style: none; margin: 0.15rem 0 0; padding: 0 0 0 0.7rem; }
.cl-close.cl-close--v5 .cl-close5-ph li { font-size: var(--e3); line-height: 1.3; color: var(--cl-quiet); }
.cl-close.cl-close--v5 .cl-close5-ph [lang="ja"] { font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif); color: var(--color-jp-text, #2A231F); }
.cl-close.cl-close--v5 .cl-close5-back { margin: calc(0.8 * var(--cl-u)) 0 0; font-size: var(--e2); line-height: 1.45; color: var(--cl-ink); }
.cl-close.cl-close--v5 .cl-close5-end { margin-top: calc(0.7 * var(--cl-u)); }
.cl-close.cl-close--v5 .cl-close5-next { margin: 0; font-size: var(--e2); line-height: 1.45; color: var(--cl-ink); }
.cl-close.cl-close--v5 .cl-close5-bye { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: calc(0.5 * var(--cl-u)); }
.cl-close.cl-close--v5 .cl-signoff { margin: 0; }
.cl-close.cl-close--v5 .cl-againrow { margin: 0; }

/* ── v5 · THE SCREENS OF PHASE 2 (A2, 2026-10-01; LOCKED_PLAN §1.5, §1.7, §1.10) ─
   The word page's new lines, the example's reading over its word, the help on a
   press, the meaning ask's portraits, hear and pick, the pattern page, the
   feedback lines. js: politeLineHTML, counterExamplesHTML, relationLineHTML,
   alsoReadHTML, returningSideHTML, glossUnderHTML, exampleRubyOf,
   tokenHelp, dealMeaningAsk, the listen branch of dealWorkbookItem, patternPage.
   Every box is laid at mount; only the answer's ink arrives. */

/* THE WORD PAGE'S LINES: quiet, one step under the whisper, in the text column
   beside the portrait (16 units: 272px at 1280) */
.cl-portrait-text > .cl-polite,
.cl-portrait-text > .cl-spelling,
.cl-portrait-text > .cl-cx,
.cl-portrait-text > .cl-rel,
.cl-portrait-text > .cl-also,
.cl-portrait-text > .cl-sayaloud {
    margin: 0 0 calc(0.3 * var(--cl-air-in));
    max-width: calc(34 * var(--cl-u));
    font-size: var(--e3);
    line-height: 1.4;
    color: var(--cl-quiet);
}
.cl-portrait-text > .cl-polite { margin-top: calc(-0.3 * var(--cl-air-in)); }
/* ⭐ THE HONEST NOTE (the owner, 27 October 2026; printed since 29 October 2026, js spellingNoteHTML): "usually written
   わかる", one quiet line under the word's head, never a badge, never bold; its kana is the line's Japanese run (mixed():
   the senior ink, as in "You can also read"). It belongs to the head: it stands a short step under the meaning (the head's
   air three quarters closed) and the story keeps a step of its own under it, its one line set close (1.25), so the line
   costs the column less than a line of the page's own airs: 分かる's short card at 1280x900, its seat at the floor and the
   card tight, stood 2 px past the glass with the note set as the polite line (the walk of 29 October 2026) */
.cl-portrait-text > .cl-spelling { margin: calc(-0.75 * var(--cl-air-in)) 0 calc(0.4 * var(--cl-air-in)); line-height: 1.25; }
.cl-polite-note { display: block; margin-top: 0.15rem; color: var(--cl-ink); }
.cl-polite-l, .cl-also-l { color: var(--cl-quiet); }
.cl-polite-w, .cl-cx-w, .cl-also-w, .cl-gu-w {
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--k6);
    color: var(--color-jp-text, #2A231F);
}
.cl-polite-r, .cl-cx-r, .cl-also-r, .cl-gu-r {
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--e3);
    color: var(--cl-ink-past, var(--cl-quiet));
}
.cl-cx-en, .cl-also-en, .cl-gu-en { color: var(--cl-quiet); }
.cl-cx-one { display: block; }
.cl-portrait-text > .cl-cx > .cl-cx-sep { display: none; }
.cl-also-one, .cl-gu { white-space: normal; }
/* a counter head's 〜 is a mark, half the word's size, quiet (counterHeadGroups) */
.cl-word--big .cl-word-mark { font-size: 0.5em; color: var(--cl-quiet); }
.cl-cx-sep, .cl-also-sep, .cl-gu-sep { color: rgba(105, 98, 90, 0.6); }
/* (the closed set's line, .cl-showwith and its .cl-sw- members, retired by the owner on 19 October 2026) */
.cl-portrait-text > .cl-sayaloud { margin: calc(0.6 * var(--cl-air-in)) 0 0; color: var(--cl-ink); }
/* the returning kanji's block: the tag, then the rule, then the two kinds, each
   under the one before (the column is too narrow for a note beside the tag) */
.cl-wp-side.cl-wp-side--v5 { flex-direction: column; align-items: flex-start; gap: 0.3rem; flex-wrap: nowrap; }
.cl-wp-side--v5 > .cl-wp-note { flex: none; margin: 0; }
.cl-wp-side--v5 > .cl-wp-kinds { color: var(--cl-quiet); }

/* THE EXAMPLE'S BODY: the line with what is printed under it (gloss_under, the
   one definition of the two kinds of sound), one box in the sentence row */
.cl-exrow-body { min-width: 0; display: flow-root; }
.cl-card--pw .cl-exrow--seat > .cl-exrow-body { grid-column: 1 / -1; grid-row: 3; }
.cl-card--pw .cl-exrow--seat > .cl-exrow-body > .cl-sent { margin-top: var(--cl-air-in); }
.cl-exrow--seat > .cl-exrow-body > .cl-sent > [lang="ja"],
.cl-exrow--seat > .cl-exrow-body > .cl-sent > [lang="ja"] [lang="ja"] { font-size: var(--k4); line-height: 1.5; }
.cl-exrow--seat > .cl-exrow-body > .cl-sent > .cl-sent-en { font-size: var(--e2); line-height: 1.5; margin-top: 0.3rem; }
.cl-card--pw .cl-exrow:not(.cl-exrow--seat) > .cl-exrow-body > .cl-sent--teach { margin-top: 0; }
.cl-gloss-under { margin: 0.35rem 0 0 calc(1.2rem + 1px); font-size: var(--e3); line-height: 1.5; color: var(--cl-quiet); }
.cl-soundkinds { margin: 0.45rem 0 0 calc(1.2rem + 1px); max-width: calc(44 * var(--cl-u)); font-size: var(--e3); line-height: 1.5; color: var(--cl-quiet); }
/* ⭐ repair round 2 (2 October 2026; SCHEMA v5 §5; LOCKED_PLAN §1.5 (a), §1.12): the lines code prints.
   The polite form's standing sentence stands under example 1 of the first verb, as the two kinds of sound
   stand under 時's: the word page's 272px column has no room for two sentences at 1280x900 */
.cl-politenote { margin: 0.45rem 0 0 calc(1.2rem + 1px); max-width: calc(44 * var(--cl-u)); font-size: var(--e3); line-height: 1.5; color: var(--cl-ink); }
/* the standing sentence under the word line (私), in the column's ink, one step under the whisper */
.cl-portrait-text > .cl-standing { margin: 0 0 calc(0.3 * var(--cl-air-in)); max-width: calc(34 * var(--cl-u)); font-size: var(--e3); line-height: 1.4; color: var(--cl-ink); }
/* ⭐ B3 (the simpler pipeline, 6 October 2026; CONTRACT §6.2): THE WORD STORY in the seat of the text under
   the word (js: wordStoryHTML), the dress ported from docs/course_v2/reviews/word_page_2026-10-04/mock/mock.css
   (its second round): the lead is the word text's own Literata paragraph (.cl-synth) with one row of air
   under it, the page's own step; a mark stands on its own line, the kanji in the word's warm ink then the
   English in the small capitals of the micro-labels, no box (a tinted box means "press me"); a note is the
   sans of the standing sentence above, same size, same ink; no Japanese word is broken across two lines */
.cl-portrait-text > .cl-synth.cl-wstory-lead { margin: 0 0 var(--cl-air-in); }
.cl-portrait-text > .cl-wstory-mark {
    display: flex;
    align-items: baseline;
    gap: 0 0.55em;
    margin: 0 0 calc(0.25 * var(--cl-air-in));
    line-height: 1.3;
}
.cl-wstory-mark-k {
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--e2);
    font-weight: 600;
    color: var(--color-jp-text, #2A231F);
}
.cl-wstory-mark-en {
    font-size: var(--e4);
    font-weight: 600;
    letter-spacing: var(--e4-track);
    text-transform: var(--e4-case);
    color: var(--cl-quiet);
}
.cl-portrait-text > .cl-wstory-note {
    margin: 0 0 var(--cl-air-in);
    max-width: calc(34 * var(--cl-u));
    font-size: var(--e3);
    line-height: 1.4;
    color: var(--cl-ink);
}
.cl-wstory-lead .cl-jp, .cl-wstory-note .cl-jp { white-space: nowrap; }
/* a code line right under the story keeps its own quiet step: the air the story leaves is its row */
.cl-portrait-text > .cl-wstory-note + .cl-also,
.cl-portrait-text > .cl-wstory-note + .cl-rel,
.cl-portrait-text > .cl-wstory-lead + .cl-also,
.cl-portrait-text > .cl-wstory-lead + .cl-rel { margin-top: 0; }
/* THE PRESS (活用 Forms, 数 Counting; js: pressSideHTML): the returning tag's own dress, one row of air
   under a note or the lead (the air they leave), a clear row under a code line; pressed open, a shade
   darker while its panel stands (css/course-book.css .cb-press) */
.cl-portrait-text > .cl-wstory-note + .cl-wp-side--press,
.cl-portrait-text > .cl-wstory-lead + .cl-wp-side--press { margin-top: 0; }
.cl-portrait-text > .cl-also + .cl-wp-side--press,
.cl-portrait-text > .cl-rel + .cl-wp-side--press,
.cl-portrait-text > .cl-wp-side + .cl-wp-side--press { margin-top: var(--cl-air-in); }
.cl-wp-tag--press [lang="ja"] { font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif); font-weight: 600; letter-spacing: 0.08em; }
.cl-wp-tag.cl-wp-tag--open, button.cl-wp-tag.cl-wp-tag--open:hover { background: rgba(61, 90, 128, 0.16); }
/* ⭐ B3d (the course reshaped, 7 October 2026; CONTRACT 14.3, 14.5 row B3; the mock-ups under
   docs/course_v2/reviews/experience_2026-10-07/mock/, their ex-code, ex-remind, ex-q, ex-ex, ex-why rules ported
   under cl- names): THE LINES BY CODE. The links line and the SAID AS ONE line stand in
   the quiet sans one step under the story (the look-alike reminder between them retired with T3, 3 November 2026), the same measure as the code lines above them; the character page's
   line is a tier of the telling in the band's middle cell; the ask's reminder and question stand between the word
   and its seats; the short card's one example sits under the story at the example's own size, no spine (the
   column is the page, not a quote); the Why two ways? press is a quiet underlined line, never a box; the front
   page's Tomorrow line sits under the three parts. */
.cl-portrait-text > .cl-links,
.cl-portrait-text > .cl-wp-side--one {
    margin: var(--cl-air-in) 0 0;
    max-width: calc(34 * var(--cl-u));
    font-size: var(--e3);
    line-height: 1.6;
    color: var(--cl-quiet);
}
.cl-portrait-text > .cl-wstory-note + .cl-links,
.cl-portrait-text > .cl-wstory-lead + .cl-links { margin-top: 0; }
.cl-portrait-text > .cl-links + .cl-wp-side { margin-top: var(--cl-air-in); }
.cl-wp-side--one { flex-wrap: wrap; }
.cl-wp-side--one > .cl-wp-note { flex: 1 1 100%; margin: 0.35rem 0 0; }
.cl-wp-one .cl-jp, .cl-links .cl-jp, .cl-kline .cl-jp { white-space: nowrap; }
.cl-kmeta > .cl-kline { margin: calc(0.75 * var(--cl-u)) 0 0; max-width: 22em; font-size: var(--e3); line-height: 1.6; color: var(--cl-quiet); }
.cl-card--pa .cl-credit.cl-remind { margin: 0 0 0.6rem; color: var(--cl-quiet); }
.cl-remind-br { display: block; }
.cl-card--pa .cl-askq { margin: calc(-0.35 * var(--cl-u)) 0 calc(1.1 * var(--cl-u)); font-size: var(--e2); line-height: 1.4; color: var(--cl-ink); }
.cl-card--pm .cl-mean-opts { margin-top: calc(0.4 * var(--cl-u)); }
.cl-card--pm .cl-mean5-opts { max-width: calc(34 * var(--cl-u)); }
.cl-portrait-text > .cl-exrow--short { margin: var(--cl-air-in) 0 0; max-width: calc(34 * var(--cl-u)); display: block; }
.cl-exrow--short > .cl-sent--short { margin: 0; padding-left: 0; border-left: 0; }
.cl-exrow--short > .cl-sent--short > [lang="ja"] { font-size: calc(1.125 * var(--cl-u)); line-height: 1.55; }
.cl-exrow--short > .cl-sent--short > .cl-sent-en { font-size: var(--e3); line-height: 1.5; margin-top: 0.15rem; color: var(--cl-quiet); }
/* (the `Why two ways?` press and its dress, .cl-why and .cl-wp-why, retired with the owner's ruling of 11 October 2026) */
/* (the door's `Tomorrow: homework` line and its dress left with the owner's evening of 11 October 2026) */
/* ⭐ B9 (the course reshaped, 7 October 2026; CONTRACT 14.3, 14.5 row B9; the mock-ups e5, e6 and e7 under
   docs/course_v2/reviews/experience_2026-10-07/mock/, their ex-g*, ex-hw-* and ex-place rules ported under cl- names):
   THE GROUPS on the New words gate and the close (one renderer: a column a kanji, the kanji with its kana over its
   flagship's portrait, the follow-ups beneath; a set's column under its first and last word; FROM EARLIER LESSONS
   last), the close's count and tomorrow lines with the quiet press 宿題 Homework, the front page's waiting line, and
   the homework's screens: the place in the top line, the lead on the first screen, the last screen. */
.cl-groups { margin: 0; }
.cl-gr { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: calc(1.25 * var(--cl-u)); row-gap: calc(1.0 * var(--cl-u)); }
.cl-gcol { display: flex; flex-direction: column; min-width: 0; }
.cl-gcol-head {
    margin: 0 0 calc(0.45 * var(--cl-u));
    padding: 0 0 calc(0.2 * var(--cl-u));
    min-height: calc(1.55 * var(--cl-u));
    display: flex; align-items: baseline; gap: 0.35em;
    white-space: nowrap;
    border-bottom: 1px solid var(--cl-rule);
}
.cl-gcol-head--none { border-bottom-color: transparent; }
.cl-gk { font-family: var(--font-jp, 'Klee One', serif); font-size: calc(1.1 * var(--cl-u)); line-height: 1.3; color: var(--color-jp-text, #2A231F); }
.cl-gs { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--e3); color: var(--cl-quiet); }
.cl-gto { font-size: var(--e3); color: var(--cl-quiet); }
.cl-gcap { font-size: var(--e4); letter-spacing: var(--e4-track); text-transform: var(--e4-case); line-height: 1.3; color: var(--cl-quiet); align-self: flex-end; }
.cl-gwords { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; column-gap: calc(0.35 * var(--cl-u)); }
.cl-gw { width: calc(4.3 * var(--cl-u)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.cl-gw-pic { display: block; width: calc(3.2 * var(--cl-u)); height: calc(3.2 * var(--cl-u)); overflow: hidden; }
.cl-gw-pic img { display: block; width: 100%; height: 100%; object-fit: contain; filter: url(#cl-washi); mix-blend-mode: multiply; }
.cl-gw-pic--gap { box-sizing: border-box; border: 1px dashed var(--cl-rule); border-radius: 3px; }
.cl-gw-w { margin-top: 0.3rem; font-family: var(--font-jp, 'Klee One', serif); font-size: calc(1.1 * var(--cl-u)); line-height: 1.25; color: var(--color-jp-text, #2A231F); white-space: nowrap; }
.cl-gw-r { margin-top: 0.1rem; font-family: var(--font-jp, 'Klee One', serif); font-size: var(--e4); line-height: 1.3; color: var(--cl-quiet); white-space: nowrap; }
/* a bare word (asked before it is shown, on the gate): the word alone, no seat, no kana */
.cl-gw--bare { width: auto; min-width: calc(2.6 * var(--cl-u)); padding: 0 0.2em; }
.cl-gw--bare .cl-gw-w { margin-top: 0; }
/* a word that slipped in Practice (the close): the slip's ink under it */
.cl-gw--slipped .cl-gw-r { color: rgb(var(--cl-moss-ink)); }
/* a set's column: its words as text, wrapped, under its first and last word */
.cl-gcol--set .cl-gwords--set { flex-wrap: wrap; width: calc(7.2 * var(--cl-u)); column-gap: 0.7em; row-gap: 0.15rem; }
.cl-gsetw { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--e2); line-height: 1.5; color: var(--color-jp-text, #2A231F); }
/* the last column: the older kanji's words, grouped under their kanji */
.cl-gsubs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: calc(0.85 * var(--cl-u)); row-gap: 0.4rem; }
.cl-gsub { display: flex; flex-direction: column; align-items: center; }
.cl-gsub-k { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--e3); line-height: 1.3; margin-bottom: 0.15rem; color: var(--cl-quiet); }
.cl-gate--words .cl-gate-body > .cl-groups { margin-top: 0; }
/* the close: the groups a little closer, then the count line, the slipped line and the tomorrow line */
.cl-close.cl-close--v5 .cl-close5-words > .cl-groups--close + .cl-close5-back { margin-top: calc(1 * var(--cl-u)); }
.cl-close.cl-close--v5 .cl-close5-count + .cl-close5-back { margin-top: 0.35rem; }
.cl-close.cl-close--v5 .cl-close5-back + .cl-close5-tomorrow { margin-top: 0.35rem; }
.cl-close5-tomorrow .cl-hwpress { margin-left: 0.7em; }
/* the front page: one quiet line while an earlier lesson's homework waits in the hall */
.cl-door-hwline { width: var(--cl-col); margin: 0.25rem auto 0; font-size: var(--e3); line-height: 1.5; color: var(--cl-quiet); }
/* the homework: 宿題 Homework · Lesson 5 in the top line, the place at the right of the mark; no parts index */
#kotobaLesson .cl-topmark .cl-hw-place { margin-left: auto; font-size: var(--e3); color: var(--cl-quiet); white-space: nowrap; font-variant-numeric: tabular-nums; }
#kotobaLesson .cl-topmark .cl-hw-place + .cl-sound { margin-left: calc(1.6 * var(--cl-u)); }
#kotobaLesson.cl-room--hw .cl-mark-n [lang="ja"] { font-family: var(--font-jp, 'Klee One', serif); font-size: 1.18em; letter-spacing: 0.06em; text-transform: none; }
#kotobaLesson.cl-room--hw .cl-spine { display: none; }
/* the first screen's lead, above the piece */
.cl-hw .cl-hw-lead { margin: 0 0 var(--cl-air-between); font-size: var(--e2); line-height: 1.5; color: var(--cl-ink); max-width: 34em; }
/* the last screen: no number anywhere (B4, Round B: it stands on the homework pieces' own seat, and the box adds no
   air of its own, so the column of what was read fits the glass; the section's seat at the file's end) */
.cl-hw--end .cl-hw-endbox { padding-top: 0; }
.cl-hw-end1 { margin: 0 0 var(--cl-air-in); font-size: var(--e1); font-weight: 500; line-height: 1.3; color: var(--cl-ink); }
.cl-hw-end2 { margin: 0 0 0.3rem; font-size: var(--e2); line-height: 1.5; color: var(--cl-ink); }
.cl-hw-end3 { margin: 0; font-size: var(--e2); line-height: 1.5; color: var(--cl-quiet); }
.cl-hw-back { margin: var(--cl-air-between) 0 0; }
/* the SOUND tag's line under the parts row, in the band's middle cell (decision 54): each line names its
   own part first (the declutter, 2026-10-03, D2: the line that named no sound, led by its part's glyph,
   is retired, and the legend that stood in the lane right of the story went with it) */
.cl-kmeta > .cl-soundlines { margin-top: calc(0.6 * var(--cl-air-in)); max-width: 30em; }
.cl-soundline { margin: 0; font-size: var(--e3); line-height: 1.45; color: var(--cl-quiet); text-wrap: pretty; }
.cl-soundline + .cl-soundline { margin-top: 0.3rem; }
/* the reading printed once over the taught word on example 1 (R-040): small
   kana over its kanji, quiet ink, inside the word's warm ink */
.cl-sent ruby.cl-ex-rb { ruby-position: over; ruby-align: center; }
.cl-sent ruby.cl-ex-rb rt { font-size: 0.5em; font-weight: 600; letter-spacing: 0.02em; color: var(--cl-quiet); }

/* THE HELP ON A PRESS: a small word opens too, in the quietest door dress; the
   note's further rows (said わ, the polite form of 思う) stand under its gloss */
.cl-tk.cl-tk--glue:not(.cl-tk--plain) { cursor: pointer; }
.cl-mn-row.cl-mn-how { font-family: var(--font-ui, 'Inter', sans-serif); font-size: var(--e3); color: var(--cl-quiet); white-space: normal; }
.cl-mn-row.cl-mn-how > * { white-space: normal; }
.cl-gloss-how { display: block; font-size: var(--e3); line-height: 1.4; color: var(--cl-quiet); }
/* the one sentence at the first guest (decision 68), under its note */
.cl-mnote > .cl-mn-guest1 { flex-basis: 100%; white-space: normal; font-family: var(--font-ui, 'Inter', sans-serif); font-size: var(--e3); line-height: 1.45; color: var(--cl-quiet); }
.cl-mnote > .cl-mn-guest1::after, .cl-mnote > :has(+ .cl-mn-guest1)::after { content: none; }

/* THE SENTENCE PUT IN ORDER (the order drill fed from the file): its pieces are
   words, so every seat is laid at the widest piece in the read size, one width
   for all, and the learner's own row prints each piece whole */
.cl-built--order .cl-seat--k.cl-seat--chunk { font-size: var(--k5); height: 3rem; }
/* ⭐ U-061 (the deep review of 25 October 2026, the owner's go of 26 October): THE PLACED SEATS ARE THE LEARNER'S ROW. A
   sentence put in order is never retyped at a miss: each seat keeps the piece the learner placed, a right one in moss and
   a wrong-placed one in the course's wrong ink, terracotta (R97: there is no red); the record's sentence under them is the
   one answer line, and the item lays no .cl-yours row (js dealWorkbookItem's order, inkSettle's hand.keep). (Its own rule,
   .cl-built--order .cl-seat--bad, retired 28 October 2026: since U-064 every wrong seat wears the same terracotta.) */

/* THE ASK BEFORE THE PAGE (R-033): the hint over the rack */
.cl-credit.cl-credit--first { color: var(--cl-quiet); }

/* THE MEANING ASK BY PORTRAITS (decision 33): three square portraits in one
   row, each a press; its meaning waits veiled under it and inks at the answer */
.cl-mean-pics { display: flex; flex-wrap: nowrap; gap: calc(1.2 * var(--cl-u)); margin-top: calc(0.4 * var(--cl-u)); }
.cl-opt.cl-mean-pic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: calc(10 * var(--cl-u));
    padding: 0.5rem;
    text-align: center;
}
.cl-mean-pic > .cl-kpic { width: 100%; margin: 0; }
.cl-mean-pic-en { font-size: var(--e3); line-height: 1.35; color: var(--cl-ink); min-height: 2.7em; }
.cl-opt.cl-mean-pic.cl-opt--gone { opacity: 0.5; border-color: transparent; background: none; color: var(--cl-ink); }
.cl-opt.cl-mean-pic.cl-opt--gone .cl-mean-pic-en { color: var(--cl-quiet); }

/* HEAR AND PICK (R-064): the press that plays the sentence, then the sentence
   with its marked word held blank, then the three kanji forms */
.cl-hear { margin: calc(0.6 * var(--cl-u)) 0 calc(0.4 * var(--cl-u)); }
.cl-hear-go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--cl-rule);
    border-radius: var(--radius, 8px);
    background: var(--cl-sheet);
    font-family: inherit;
    font-size: var(--e2);
    color: var(--cl-ink);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(var(--cl-sh), 0.04);
}
.cl-hear-go:hover { border-color: var(--cl-accent); color: var(--cl-accent); }
.cl-hear-go:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
.cl-hear-go .cl-chip-i { width: 1.2em; height: 1.2em; fill: currentColor; }
.cl-hear-go .cl-chip-w { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cl-hear-go.cl-disc--on { color: var(--cl-accent); border-color: var(--cl-accent); }

/* THE PATTERN PAGE (R-032): the head that translates and the picture beside it,
   then the pairs (the line before → the line with the pattern), then one line */
.cl-pat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(2 * var(--cl-u)); }
.cl-pat-headcol { flex: 1 1 auto; min-width: 0; }
.cl-pat-pic { flex: 0 0 auto; width: var(--cl-kpic); }
.cl-pat-pic > .cl-kpic { width: 100%; margin: 0; }
.cl-pat-jp { font-size: var(--k4); }
.cl-pat-pairs { list-style: none; margin: calc(0.8 * var(--cl-u)) 0 0; padding: 0; }
.cl-pat-pair + .cl-pat-pair { margin-top: calc(0.7 * var(--cl-u)); }
.cl-pat-row { position: relative; margin: 0; font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif); font-size: var(--k6); line-height: 1.7; word-break: keep-all; line-break: strict; overflow-wrap: anywhere; }
.cl-pat-before { color: var(--cl-ink-past, var(--cl-quiet)); }
.cl-pat-arrow { margin: 0 0.6em; font-family: var(--font-ui, 'Inter', sans-serif); color: rgba(105, 98, 90, 0.6); }
.cl-pat-after { color: var(--cl-ink); }
.cl-pat-en { margin: 0.1rem 0 0; font-size: var(--e3); line-height: 1.45; color: var(--cl-quiet); }
.cl-pat-line { margin: calc(0.9 * var(--cl-u)) 0 0; max-width: calc(40 * var(--cl-u)); font-size: var(--e3); line-height: 1.6; color: var(--cl-ink); }
/* ⭐ Phase 3 fix round, A1 (js patternSentHTML, patternPage): the pattern's own sentence under its
   picture, as the figure's line, at the picture's width; with no picture, under the head */
.cl-pat-piccol { flex: 0 0 auto; width: var(--cl-kpic); min-width: 0; }
.cl-pat-piccol > .cl-pat-pic { width: 100%; }
.cl-pat-sent { margin: calc(0.5 * var(--cl-u)) 0 0; }
.cl-pat-sent > .cl-sent.cl-pat-sent-q { margin: 0; font-size: var(--k6); line-height: 1.6; word-break: keep-all; line-break: strict; overflow-wrap: anywhere; }
.cl-pat-sent > .cl-sent.cl-pat-sent-q .cl-sent-en { display: block; margin-top: 0.15rem; font-size: var(--e3); line-height: 1.45; }
.cl-pat-sent > .cl-gloss-under { margin-top: 0.3rem; }
/* the integrator (fix round walk, 1280x900): at the quoted sentence's --k5 the figure's line ran three
   lines at the picture's width and the page six px past the glass; at the pairs' own size it stands in two */
.cl-pat-sent > .cl-sent.cl-pat-sent-q [lang="ja"] { font-size: var(--k6); line-height: 1.7; }
@media (max-width: 768px) {
    .cl-pat-top { flex-wrap: wrap; }
    .cl-pat-piccol { width: 100%; }
}
/* the set phrase's family, once its other phrases are met */
.cl-ph-family { margin: calc(-0.5 * var(--cl-air-between)) 0 var(--cl-air-between); font-size: var(--e3); line-height: 1.5; color: var(--cl-quiet); }

/* THE FEEDBACK: the contrast note after a right answer (R-107) in the note's
   quiet ink */
.cl-teach--contrast .cl-tellline { color: var(--cl-quiet); }
/* "思う comes back next lesson." run on at the end of the miss note's line (R-110) */
.cl-tellline > .cl-comeback--run { margin: 0; font-size: var(--e3); color: var(--cl-quiet); }
/* ⭐ Phase 3 fix round, A4 (js wbPlateHTML): a Practice item's plate is drawn as a reading plate
   above its question, its figures written in its zone (the caption under a corner picture is gone);
   it fits over the foot as a reading plate does (fitPlate) */
.cl-set--wb .cl-page.cl-read--plate.cl-wb-plate { margin: 0.2rem 0 0.8rem; }
/* the walks, screen 159: a wrong pair on the match keeps the plain wrong dress until the next press,
   the learner's own miss in the wrong ink with its rule under it, as a wrong mora in the learner's
   row (.cl-yours-x, .cl-seat--bad); js wireMatch. ⚖ U-064 (27 October 2026): the wrong ink is the seal's terracotta
   (--cl-seal-ink), its rule at the same 70 per cent the mend ink's stood at */
.cl-match-o.cl-match-o--miss { color: var(--cl-seal-ink, #A35A4A); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--cl-seal-ink, #A35A4A) 70%, transparent); }
/* reading N5: a sign with no plate stands at the left, its check beside it, so the answer is above
   the fold; one column under 768px */
.cl-read-beside.cl-read-beside--sign { grid-template-columns: max-content minmax(0, 1fr); }
.cl-read-beside--sign > .cl-page.cl-page--read { margin: 0; }
/* 9 October 2026 (lesson 5's walk): a sign's three short lines sat a paragraph apart on a leaf padded like a diary page,
   and the homework's first page ran 969 px at 1280 by 900; on the homework's written pieces the lines sit close and the
   leaf is trim (a sign with no plate, .cl-read-beside--sign, likewise) */
.cl-read-beside--sign > .cl-page.cl-page--read,
.cl-hw .cl-read-beside > .cl-page.cl-page--read { padding: 1.3rem 1.6rem 1.5rem; }
.cl-read-beside--sign > .cl-page.cl-page--read .cl-para,
.cl-hw .cl-read-beside > .cl-page.cl-page--read .cl-para { margin-bottom: 0.5rem; }
@media (max-width: 768px) {
    .cl-read-beside.cl-read-beside--sign { grid-template-columns: minmax(0, 1fr); row-gap: 1.2rem; }
}
.cl-record-woto { margin-left: 0.3rem; vertical-align: middle; }

/* ── Phase 5 · P1 (2 October 2026): THE EXAMPLE PAGE WITHOUT THE CARD'S HEAD
   (item 22a), THE SET PHRASE PAGE IN THE WORD'S SEAT. js: exampleRowHTML,
   fitSent, fitPhraseEx, phraseTextHTML, phraseRowHTML, holdSeat, examplesPage,
   phrasePage. The kind caption (item 23) left with its rules, above. ──────── */

/* ⭐⭐ ITEM 22a (the owner on item 22: "i love it except in the example page no
   need to repeat the card"): THE EXAMPLE PAGE PRINTS NO HEAD. The lone
   example's words (.cl-exbody: the line, its English, what code prints under
   example 1) stand in the text column beside the seat, where the head stands
   on the word page, at the size fitSent found (--cl-exsent: the large hand k4
   down to the read size k5, the largest at which every clause stands whole on
   a line of the column). Where a clause is too long for the column at the read
   size they stand under the seat across the column, as item 22 laid them (the
   rules of the item 22 block). */
.cl-card--pw .cl-exrow--seat > .cl-exrow-body.cl-exbody--col { grid-column: 1; grid-row: 2 / 4; align-self: start; min-width: 0; }
.cl-card--pw .cl-exrow--seat > .cl-exbody--col > .cl-sent { margin-top: 0; }
.cl-exrow--seat > .cl-exbody--col > .cl-sent > [lang="ja"],
.cl-exrow--seat > .cl-exbody--col > .cl-sent > [lang="ja"] [lang="ja"] { font-size: var(--cl-exsent, var(--k4)); line-height: 1.45; }
/* one clause to a line: the fit lays a break after each clause's mark
   (js clauseBreaks) and the line itself never wraps; where no size allows it,
   the breaks go and a line may break between two words (S5), never inside one */
.cl-exbody--clauses .cl-sent > [lang="ja"] { white-space: nowrap; }
/* a lone example with no illustration has no seat to hold: its words stand
   alone, centred on the glass, in the large hand */
.cl-card--pw.cl-card--examples-one.cl-card--nopic { display: flex; flex-direction: column; justify-content: center; }

/* ⭐⭐ THE SET PHRASE PAGE IN THE WORD'S SEAT (item 22a; the phrase page wears
   the examples' dress, and that dress is the held seat since item 22): the
   text column at the left (.cl-ph-text: the tag, the phrase, its reading and
   meaning, the note, the family line, then the one example at its foot, where
   its clauses stand whole in the column), the illustration in the word's seat
   at the right, the very box the card's portrait and example hold (holdSeat
   counts this page among them), so the turn from the example moves no
   picture. A clause too long for the column sends the example under the seat
   across the column (js fitPhraseEx). The v5 pattern page (.cl-card--pattern)
   and a phrase with no illustration keep the page they always printed. */
.cl-card--phrase.cl-card--phrase-seat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cl-portrait);
    grid-template-rows: minmax(0, 1fr) var(--cl-portrait) minmax(max(var(--cl-wsent), var(--cl-wsent-held, 0px)), auto) minmax(0, 1fr);
    column-gap: var(--cl-portrait-gap);
    align-items: start;
}
/* the text column, and holdSeat's veiled copies of another page's column, in
   the column's own cells (the example page's copy: the item 22 block) */
.cl-card--phrase-seat > .cl-ph-text,
.cl-card--phrase-seat > .cl-wprobe--text,
.cl-card--portrait > .cl-wprobe--text { grid-column: 1; grid-row: 2 / 4; min-width: 0; }
.cl-ph-text > :last-child { margin-bottom: 0; }
.cl-ph-text > .cl-exbody { margin-top: var(--cl-air-between); }
.cl-ph-text > .cl-exbody > .cl-sent { margin-top: 0; }
/* the phrase leads its page at the read size (k5), so its example keeps the
   read size and its English the note's size wherever it stands (the large
   hand is the example page's alone). ⛔ Dressed by the column and the row's
   own classes, never the page's: holdSeat lays veiled copies of this page's
   column and row on the card's other seated pages, and a copy dressed by
   another page measures another height (the seat moved 6px under 持つ's
   phrase at 1280x900 until the copies wore this page's dress) */
.cl-exrow--phrase > .cl-exrow-body > .cl-sent > [lang="ja"],
.cl-exrow--phrase > .cl-exrow-body > .cl-sent > [lang="ja"] [lang="ja"] { font-size: var(--k5); line-height: 1.9; }
.cl-exrow--phrase > .cl-exrow-body > .cl-sent > .cl-sent-en { font-size: var(--e3); line-height: inherit; margin-top: 0.45rem; }
.cl-ph-text > .cl-ph-kind { margin: 0 0 var(--cl-air-in); }
.cl-ph-text > .cl-ph-head { display: block; margin-bottom: 0; }
.cl-ph-text .cl-ph-meta { margin-top: 0.45rem; gap: 0.3rem; }
.cl-ph-text .cl-ph-meta .cl-reading { font-size: var(--k6); color: var(--cl-quiet); }
.cl-ph-text .cl-ph-meta .cl-gloss-line { font-size: var(--e2); line-height: 1.4; }
.cl-ph-text .cl-ph-meta .cl-reading-row { display: inline-flex; align-items: center; gap: 0.5rem; }
/* ⛔ at phone width the seat stacks, as the item 22 block's pages do */
@media (max-width: 768px) {
    .cl-card--phrase.cl-card--phrase-seat { display: block; }
}

/* ══ Phase 5 · P2 · THE CHROME (item 27, 2026-10-02): RETIRED by the frame (elevate C, 10 October 2026;
   the block at the end of this file). The index in the left margin, its fold into the top line and its yield
   to a note are gone; lessons 1 to 4 never wore them. */

/* ══ Phase 5 · P3 · THE GATE PICTURES (item 26, 2026-10-02) ════════════════
   As the gallery recommended and the owner approved (docs/course_v2/reviews/
   gates_art_2026-09-30/gallery.html; the record row 26 and the ruling (2) of
   2026-09-30, "approved as shown"), on a v5 file only (js gateModel; the E3
   file and lessons 1 to 4 keep their gates): content first, a drawing only
   where the content cannot be shown. The three rules are the runner's (no
   picture that is a cue or an answer of its section, none twice on a page, a
   picture over a text only where it shows that text); this sheet seats them.
   1 · 復習 REVIEW: last lesson's words over their portraits, in the words
       gate's strip: the word in the past ink, no kana (the section asks it). A
       word with no portrait on file, or whose ask shows a picture as its cue or
       answer, keeps its place with nothing over it; with no portrait at all
       the gate keeps its row of words (the E3 rules above). A breath, not a
       dot, after tonight's comeback words.
   2 · 新しい言葉 NEW WORDS: as built (the strip above).
   3 · 練習 PRACTICE: one drawing painted once for the course (designer c's
       seat, a's subject: blank tiles, one about to go in): a square whose
       right edge is the column's and whose top is level with the titles,
       min(21u, 40vh), 360px at 1280x900; the titles stop short of it; the ink
       finish every picture gets. Until its registry row is ready, the titles
       alone, as before.
   4 · 読む READING: each piece over its own picture (designer b's grid, c's
       rule), five a row; past ten pieces six a row, smaller. A piece with no
       picture keeps its place with nothing over it; the plates column goes. */
.cl-gate-strip--back .cl-gate-pic:empty,
.cl-gate-piece .cl-gate-pic:empty { background: transparent; }
.cl-gate-strip--back { margin-bottom: calc(1.1 * var(--cl-u)); }   /* the row's own air before the from line */
/* ⭐ 14 October 2026 (lesson 5's Review gate at 1280x900: lesson 4's twelve words, three slips first): the strip lays
   six tracks, so the breath after the slips moves a cell within its track and never a cell onto the next row (the
   flex row wrapped at the breath, five then six then one, 953 px of 900); the pitch is the flex row's */
.cl-gate-strip--back { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); justify-items: start; }
.cl-gate-strip--back .cl-gate-w { color: var(--cl-ink-past); }
.cl-gate-strip--back .cl-gate-cell--next { margin-left: calc(0.75 * var(--cl-u)); }
/* ⭐ U-093 (the deep review, 26 October 2026): past twelve cells (last lesson's words and the comebacks, which are older
   words now, never one of them asked twice) eight tracks and smaller portraits, two rows where six a row made three
   (975 px of 900 at 1280x900, lesson 15's twelve words and three comebacks); the Reading gate's own give past ten */
.cl-gate-strip--back.cl-gate-strip--many { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cl-gate-strip--many .cl-gate-cell { width: calc(4.6 * var(--cl-u)); }
.cl-gate-strip--many .cl-gate-pic { width: calc(4.6 * var(--cl-u)); height: calc(4.6 * var(--cl-u)); }
.cl-gate-pieces {
    list-style: none;
    margin: calc(0.4 * var(--cl-u)) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: calc(0.9 * var(--cl-u)) calc(1.05 * var(--cl-u));
}
.cl-gate-pieces--many { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cl-gate-piece { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.cl-gate-piece .cl-gate-pic { max-width: 100%; }
.cl-gate-pieces--many .cl-gate-pic { width: calc(5.6 * var(--cl-u)); height: calc(5.6 * var(--cl-u)); }
.cl-gate-pt { margin-top: 0.35rem; font-size: var(--e3); line-height: 1.35; color: var(--cl-ink); }
.cl-gate-withart { display: flex; align-items: flex-start; gap: calc(2.4 * var(--cl-u)); }
.cl-gate-withart > .cl-gate-heads { flex: 1 1 auto; min-width: 0; }
.cl-gate-art { flex: 0 0 auto; width: min(calc(21 * var(--cl-u)), 40vh); aspect-ratio: 1 / 1; margin: 0; }
.cl-gate-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: url(#cl-washi);
    mix-blend-mode: multiply;
}
/* ⛔ mobile is deferred; at phone width the grid takes three a row and the drawing
   stands under the titles, so nothing runs past the window */
@media (max-width: 768px) {
    .cl-gate-pieces, .cl-gate-pieces--many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cl-gate-withart { display: block; }
    .cl-gate-art { width: min(calc(21 * var(--cl-u)), 40vh, 100%); margin-top: calc(1.2 * var(--cl-u)); }
}

/* ══ Phase 5 · P5 · PRACTISE AGAIN AND THE THUMBNAIL FLOOR (decisions 65 and 72, 2026-10-02) ══
   1 · もういちど PRACTISE AGAIN (decision 65, R-119): the v5 close's quiet row holds it before
       はじめから Start again, in the same dress, one breath between the two (js closeRowHTML).
   2 · THE THUMBNAIL FLOOR (decision 72, R-102): a portrait whose ink fills less than the floor of
       its seat at the size it is printed (js THUMB, fitThumb) is printed at the next size up INSIDE
       the seat: the seat's box is unchanged and clips (.cl-gate-pic and .cl-kpic both hide their
       overflow), only paper is trimmed, the ink kept clear of the edge by the script's shift.
   3 · A MEANING ASK'S PORTRAIT IS SQUARE, as painted: in its press (a column) the seat's flex basis
       (--cl-kpic) became its HEIGHT, so each portrait stood 152 by 216 at 1280x900 and object-fit cut
       its sides (the calendar of 今日, the photo of 思い出). It takes its height from its width now,
       like the miss strip's seat; the portrait whole, and measurable for the floor. */
#kotobaLesson .cl-close--v5 .cl-againrow { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.6rem; }
#kotobaLesson .cl-mean-pic > .cl-kpic { flex: none; height: auto; aspect-ratio: 1 / 1; }
#kotobaLesson img.cl-thumb--up {
    transform: translate(var(--cl-tx, 0%), var(--cl-ty, 0%)) scale(var(--cl-tz, 1));
    transform-origin: 50% 50%;
}

/* ══ Phase 5 · I · THE BOOK'S HOOKS (the integrator, 2026-10-02) ══
   THE EDGE FORK on a v5 word page (P4 ASK 6; judge_owner.md: "the fork beside the returning tag"):
   the book's figure (.cb-fork, css/course-book.css) stands in the sentence row under the seat
   (column 2, row 3), empty on the word page, since the text column beside the seat is full on 時
   at 1280x900. The cell adds no height (its figure is laid absolutely), so the held seat never
   moves; the script (seatFork) sets the figure's top level with the tag, and stands it down where
   the row cannot hold it. Desktop only: mobile is deferred and the phone stack has one column. */
@media (min-width: 769px) {
    #kotobaLesson .cl-card--portrait > .cl-wfork { grid-column: 2; grid-row: 3; align-self: stretch; position: relative; min-width: 0; min-height: 0; }
    #kotobaLesson .cl-card--portrait > .cl-wfork > .cb-fork { position: absolute; left: 0; top: 0; }
    #kotobaLesson .cl-card--portrait > .cl-wfork > .cb-fork[hidden] { display: none; }
}
@media (max-width: 768px) {
    #kotobaLesson .cl-wfork { display: none; }
}

/* ══ ELEVATE · C · THE FRAME (round A, 10 October 2026) ═══════════════════
   REPORT §5.1, §5.5 and §5.6 (docs/course_v2/reviews/elevate_2026-10-09/), CONTRACT §14.11 ¶8 and ¶11:
   the owner marked the chrome 1 of 5; fewer things, each finished. The runner sets #kotobaLesson.cl-framed on a
   file with sections[] (js indexChrome) and every rule here is scoped to it, so lessons 1 to 4 keep their
   chrome byte for byte. The item-27 chrome (the index in the left margin, its fold into the top line, its
   yield) and the rail 今日の言葉 are gone from this frame: the frame mounts neither.
   1 · THE HEAD, one line of 60px, built once and never yielding (bug B4): the mark word's portrait at 44px
       on bare paper, LESSON n in tracked caps over the mark kanji (Noto Sans JP 500 at 1.3u, Japanese brown:
       never the brush face below 1.6u, the scrawl of bug B3) and the name in Literata 1u; at the right
       閉じる Close and one door, ⋮ (Round D, 12 October 2026: 音 SOUND, the promise and ✕ retire from the frame;
       Round E, 13 October 2026: the portal's pill beside ⋮), 40px from the glass's edges.
   2 · THE INDEX on the foot's hairline between Back and the one seat, in TWO TIERS (the owner, 12 October
       2026): the hairline at the hands' middle, each part's kanji above it (the chrome face, 500, 0.8125u)
       and its English below it (Inter, 0.6875u), the line inked in Japanese brown to the furthest page
       reached, a 7px ink dot in a ring of paper at the page you stand on, moving 260ms along the line with
       every turn; three inks for here, walked and ahead. Fixed on the foot's own box, so it never moves with
       a page.
   3 · THE ONE SEAT: a held seat keeps its outline at 60 per cent, its label in quiet ink; the ask's 答える
       under the tiles leaves the page (the foot's seat wears it: js goOn, syncGoOn).
   4 · THE MENU (Round D): the card under ⋮, two switches, one note, a hairline and 最初から From the start (Round E).
   5 · THE TYPE RULE: Klee One for the Japanese a learner reads; Noto Sans JP for every Japanese string in
       the chrome; Literata for the English read as content; Inter for the app's voice. TAGS are kanji and
       plain tracked caps with no fill (.cl-tag; the pills 活用 FORMS and 数 COUNTING become it); the dotted
       underline under kanji words goes and a pressable kanji shows a hairline on hover. */
#kotobaLesson.cl-framed .cl-topmark { gap: 0.9rem; padding: 0 40px; }
#kotobaLesson.cl-framed .cl-head-pic { flex: none; width: 44px; height: 44px; display: block; line-height: 0; }
#kotobaLesson.cl-framed .cl-head-pic img { width: 44px; height: 44px; object-fit: cover; display: block; filter: url(#cl-washi); mix-blend-mode: multiply; }
#kotobaLesson.cl-framed .cl-head-pic--gap { visibility: hidden; }
#kotobaLesson.cl-framed .cl-mark { display: block; flex: none; min-width: 0; line-height: 1.2; }
#kotobaLesson.cl-framed .cl-mark-line { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex-wrap: nowrap; }
#kotobaLesson.cl-framed .cl-mark-n {
    display: block;
    visibility: visible;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e4);
    font-weight: 400;
    letter-spacing: var(--e4-track);
    text-transform: uppercase;
    color: var(--cl-quiet);
    line-height: 1.2;
    white-space: nowrap;
}
#kotobaLesson.cl-framed .cl-head-t { display: flex; align-items: baseline; gap: 0.5em; white-space: nowrap; }
#kotobaLesson.cl-framed .cl-mark-title {
    display: inline;
    visibility: visible;
    font-family: var(--cl-font-chrome-jp);
    font-weight: 500;
    font-size: calc(1.3 * var(--cl-u));
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-jp-text, #2A231F);
}
#kotobaLesson.cl-framed .cl-mark-line .cl-mark-en { display: inline; visibility: visible; margin: 0; font-family: var(--cl-font-tell); font-size: var(--e2); color: var(--cl-ink); }
/* ⭐ I17 (言わぬが花, the owner's yes of 1 November 2026): ON THE DOOR THE HEAD BAR READS "LESSON 7" ALONE. The door prints the
   lesson's mark and title at full size on its own page, so the bar's mark and title wait there as blank ink: visibility,
   never display, so their seat is held and nothing in the bar moves; from the first gate on the bar is whole again. */
#kotobaLesson.cl-framed[data-screen="door"] .cl-mark-title,
#kotobaLesson.cl-framed[data-screen="door"] .cl-mark-line .cl-mark-en { visibility: hidden; }
/* ⭐ ROUND D (the owner's walk of 12 October 2026, items 1 and 2; ROUND_D_MENU.md §1): THE CORNER IS ONE ⋮, the
   app's own door (css/home-hall.css .gb-settings) in the frame's tokens: a 34px seat, the glyph at 18px in quiet
   ink; hover and open print it in ink on a 5 per cent wash, the warm ink's (the hall washes in its neutral sumi,
   which the warm page never prints: type_ink_test CT-4). Nothing else stands at the head's right, and the muted
   state is not shown on it. The wrap holds the door and its card (section 4). */
#kotobaLesson.cl-framed .cl-menu-wrap { position: relative; flex: none; margin-left: auto; display: flex; align-items: center; gap: 12px; }
#kotobaLesson.cl-framed .cl-menu {
    appearance: none;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: 18px;
    line-height: 1;
    color: var(--cl-quiet);
    cursor: pointer;
    transition: color var(--cl-t-ink-quick) var(--ease-settle, ease), background-color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
#kotobaLesson.cl-framed .cl-menu:hover,
#kotobaLesson.cl-framed .cl-menu.cl-menu--open,
#kotobaLesson.cl-framed .cl-menu[aria-expanded="true"] { color: var(--cl-ink); background: rgba(var(--cl-ink-rgb), 0.05); box-shadow: none; }
#kotobaLesson.cl-framed .cl-menu:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* ⭐ ROUND E (the owner's pick of 13 October 2026, option A; ROUND_E_CLOSE.md): 閉じる CLOSE, the portal's pill
   (css/course-home.css .ch-close) in the lesson's own tokens, 12 px left of ⋮ (the wrap's gap): inline-flex, gap 8px,
   e3, the stone ink (--cl-ink-past, #57534E, the portal's --ch-stone), padding 7px 14px, radius 999px, a 1px rule
   border; ✕ a plain glyph, the kanji in the chrome face in Japanese brown. Hover inks it; focus wears the ring. No
   fill and no shadow: the app's global button is a raised white box (components.css), answered here. Its note,
   "Your place is kept.", hangs under it right-aligned in the quiet ink, asleep at rest; it wakes on hover, on
   focus-visible and when Escape puts the hand on the pill (js wakePill: .cl-pill-wrap--awake), by the quick ink
   clock's fade alone: nothing moves, and nothing in the line makes room for it. */
#kotobaLesson.cl-framed .cl-pill-wrap { position: relative; flex: none; display: flex; align-items: center; }
#kotobaLesson.cl-framed .cl-pill {
    appearance: none;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--cl-rule);
    border-radius: 999px;
    background: none;
    box-shadow: none;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e3);
    font-weight: 400;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--cl-ink-past);
    cursor: pointer;
    transition: color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
#kotobaLesson.cl-framed .cl-pill [lang="ja"] { font-size: var(--e3); font-weight: 500; letter-spacing: 0.04em; color: var(--color-jp-text, #2A231F); }
#kotobaLesson.cl-framed .cl-pill i { font-style: normal; }
#kotobaLesson.cl-framed .cl-pill:hover,
#kotobaLesson.cl-framed .cl-pill-wrap--awake .cl-pill { color: var(--cl-ink); background: none; box-shadow: none; }
#kotobaLesson.cl-framed .cl-pill:focus-visible { color: var(--cl-ink); outline: var(--cl-ring); outline-offset: 2px; }
#kotobaLesson.cl-framed .cl-pill-note {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e3);
    line-height: 1.3;
    color: var(--cl-quiet);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--cl-t-ink-quick) var(--ease-settle, ease), visibility 0s linear var(--cl-t-ink-quick);
}
#kotobaLesson.cl-framed .cl-pill:hover + .cl-pill-note,
#kotobaLesson.cl-framed .cl-pill:focus-visible + .cl-pill-note,
#kotobaLesson.cl-framed .cl-pill-wrap--awake .cl-pill-note { opacity: 1; visibility: visible; transition: opacity var(--cl-t-ink-quick) var(--ease-settle, ease), visibility 0s; }
/* the card standing under ⋮ covers the pill's corner: the note sleeps while it stands */
#kotobaLesson.cl-framed .cl-menu-wrap:has(> .cl-menu-card:not([hidden])) .cl-pill-note { opacity: 0; visibility: hidden; }
/* the phone (Round E: the pill made the head wider than a phone): the side gutter narrows to 16px, the name gives way
   with an ellipsis, and under 480px the portrait folds, so the head never runs off the glass. Desktop is untouched. */
@media (max-width: 768px) {
    #kotobaLesson.cl-framed .cl-topmark { padding: 0 16px; }
    #kotobaLesson.cl-framed .cl-mark { flex: 0 1 auto; min-width: 0; }
    #kotobaLesson.cl-framed .cl-mark-line { min-width: 0; max-width: 100%; }
    #kotobaLesson.cl-framed .cl-head-t { min-width: 0; max-width: 100%; }
    #kotobaLesson.cl-framed .cl-mark-line .cl-mark-en { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 480px) {
    #kotobaLesson.cl-framed .cl-head-pic { display: none; }
    #kotobaLesson.cl-framed .cl-pill { padding: 7px 12px; }
}
/* the homework's head: 宿題 HOMEWORK · LESSON n over the name, its place at the head's right */
#kotobaLesson.cl-framed .cl-topmark .cl-hw-place { margin-left: calc(2 * var(--cl-u)); align-self: flex-end; padding-bottom: 0.55rem; }
#kotobaLesson.cl-framed .cl-topmark .cl-hw-place + .cl-menu-wrap { margin-left: auto; }
/* the faces first: the head and the index wait, unseen, until the three faces have landed (js facesReady) */
#kotobaLesson.cl-framed.cl-wait .cl-topmark,
#kotobaLesson.cl-framed.cl-wait .cl-ix { visibility: hidden; }

/* ── 2 · the index between the hands: THE QUIET ROW (the owner's pick of 24 October 2026, "as for navigation i agree
   pick 3 looks best", of the nav demo's three restyles on the real pages: docs/course_v2/reviews/nav_demo_2026-10-24/
   REPORT.md, variant 3) ── The two tiers stay and everything drawn goes: no hairline, no ink run, no dot. Each part
   is its kanji over its English, the tiers closed up now that no line parts them (2 px over the band's middle, 3 px
   under it), the parts gathered at the band's centre with wide air between them (2.3 units) rather than spread one a
   column over the span: 復習 Review · 新しい言葉 New words · 練習 Drills · 読む Reading (lesson 1, with nothing to review,
   the last three). TWO INKS: the part stood in, in ink, its kanji in the Japanese brown and a 2 px mark of the same
   brown under its English; every other part, walked or ahead, in the quiet ink. A reached label is a press to its
   gate; hover inks both tiers indigo, together. ⚖ THE OWNER'S AMENDMENT TO THE PICK (24 October 2026, by the lead):
   "keep the buttons as they are": 戻る Back, 次へ Next and 答える Check stay exactly as they print, their boxes, rules,
   type and seats untouched; the restyle is the station bar's alone (the demo's variant 3 also made them words with a
   chevron, which this build does not carry). The band and the index's box keep their sizes to the pixel (the demo
   measured the glass equal across its variants on every screen at 1280 and 1680), so nothing on any page moves. The runner keeps how far and where as data on the nav (data-ink, data-dot), for the walker and the pins;
   nothing draws them. (Was, from the owner's pick of 12 October 2026 to this one, TWO TIERS ON A HAIRLINE: the kanji
   6 px above a 1 px line at the hands' middle, the English 5 px below it, a 2 px ink run of Japanese brown for how far,
   a 7 px dot in a ring of paper for where, three inks: here, walked, ahead.) ── */
#kotobaLesson.cl-framed .cl-ix {
    position: fixed;
    z-index: 4;                                   /* over the foot's paper (3), under every layer */
    left: 0;
    right: var(--cl-sbw, 0px);
    bottom: max(2.6rem, calc(100vh - var(--cl-chrome-h, 4.6rem) - var(--cl-glass)));
    width: var(--cl-col);
    height: var(--cl-foot-h);
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 calc(var(--cl-foot-seat-w) + 1.2rem);
    display: grid;
    grid-template: 100% / 100%;                   /* one cell: the labels fill it */
    pointer-events: none;                         /* the seats under its padding keep their presses */
}
#kotobaLesson.cl-framed .cl-ix[hidden] { display: none; }
.cl-ix-labels { grid-area: 1 / 1; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: calc(2.3 * var(--cl-u)); }
.cl-ix-l {
    display: flex;
    justify-content: center;
    white-space: nowrap;
    font-size: var(--e3);
    line-height: 1;
    color: var(--cl-ink-past);                    /* a part walked: the stone, a press back to its gate */
}
/* ⭐ U-062 (the deep review's Round 3; the owner's YES of 26 October 2026: "the stations ahead a shade lighter") AS THE
   ELEVATION READS IT (the owner's call 10, 1 November 2026: the stations ahead in quiet ink at AA, no transparency as
   hierarchy). A part not reached yet prints in the quiet ink, opaque (5.75:1 on the paper; at 58 per cent of it, U-062's
   first cut, it printed 2.25:1), so the walked parts, each a press back to its gate, still read a shade darker at rest:
   they took the stone (8.3:1). A part ahead is told apart by its lighter ink and by having no mark; the part stood in
   keeps its ink, its sumi kanji and its mark (the rule after this one wins where a part is both). */
.cl-ix-l--ahead { color: var(--cl-quiet); }
.cl-ix-l--here { color: var(--cl-ink); }          /* the part stood in */
.cl-ix-l--here [lang="ja"] { color: var(--color-jp-text, #2A231F); }
.cl-ix-go, .cl-ix-t {
    position: relative;                           /* the mark's box */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    padding: 0 0.15rem;
    font: inherit;
    color: inherit;
}
.cl-ix-l [lang="ja"], .cl-ix-l i { display: flex; box-sizing: border-box; height: 50%; }
.cl-ix-l [lang="ja"] { align-items: flex-end; padding-bottom: 2px; font-weight: 500; letter-spacing: 0.04em; transition: color var(--cl-t-ink-quick) var(--ease-settle, ease); }   /* the kanji, over the band's middle, inking with the English */
.cl-ix-l i { align-items: flex-start; padding-top: 3px; font-size: var(--e4); font-style: normal; letter-spacing: 0.02em; }   /* the English, under it */
/* the mark: 2 px of the Japanese ink (the sumi since the elevation) under the English of the part stood in, as wide as its press */
.cl-ix-l--here .cl-ix-go::after,
.cl-ix-l--here .cl-ix-t::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    height: 2px;
    border-radius: 1px;
    background: var(--color-jp-text, #2A231F);
}
#kotobaLesson .cl-ix-go,
#kotobaLesson .cl-ix-go:hover { border: 0; background: none; box-shadow: none; }
.cl-ix-go { pointer-events: auto; cursor: pointer; border-radius: var(--radius-sm, 4px); transition: color var(--cl-t-ink-quick) var(--ease-settle, ease); }
.cl-ix-go:hover:not(:disabled), .cl-ix-go:hover:not(:disabled) [lang="ja"] { color: var(--cl-accent); }
.cl-ix-go:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
.cl-ix-go:disabled { cursor: default; }

/* ── 3 · the one seat: the held dress, the go-on face, no 答える under the tiles ── */
#kotobaLesson.cl-framed .cl-foot .cl-next:disabled,
#kotobaLesson.cl-framed .cl-foot .cl-goon:disabled,
#kotobaLesson.cl-framed .cl-foot .cl-prev:disabled { border-color: rgba(var(--cl-sh), 0.33); }
#kotobaLesson.cl-framed .cl-foot .cl-next:disabled [lang="ja"], #kotobaLesson.cl-framed .cl-foot .cl-next:disabled i,
#kotobaLesson.cl-framed .cl-foot .cl-goon:disabled [lang="ja"], #kotobaLesson.cl-framed .cl-foot .cl-goon:disabled i,
#kotobaLesson.cl-framed .cl-foot .cl-prev:disabled [lang="ja"], #kotobaLesson.cl-framed .cl-foot .cl-prev:disabled i { color: var(--cl-quiet); }
#kotobaLesson.cl-framed .cl-foot .cl-next, #kotobaLesson.cl-framed .cl-foot .cl-goon, #kotobaLesson.cl-framed .cl-foot .cl-prev {
    transition: border-color var(--cl-held-live) var(--ease-settle, ease);
}
.cl-goon {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem;
    border: 1.5px solid rgba(var(--cl-sh), 0.55);
    background: none;
    color: var(--cl-ink);
    border-radius: var(--radius, 8px);
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    font: inherit;
    box-shadow: none;
}
.cl-goon [lang="ja"] { font-size: var(--k6); color: var(--color-jp-text, #2A231F); }
.cl-goon i { font-style: normal; font-size: var(--e3); color: var(--cl-quiet); letter-spacing: 0.03em; }
#kotobaLesson .cl-goon:hover:not(:disabled) { border-color: var(--cl-ink); background: none; box-shadow: none; }
#kotobaLesson .cl-goon:disabled:hover { background: none; box-shadow: none; }
.cl-goon:hover:not(:disabled) [lang="ja"], .cl-goon:hover:not(:disabled) i { color: var(--cl-accent); }
.cl-goon:active:not(:disabled) { border-color: var(--cl-accent); }
.cl-goon:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
.cl-goon:disabled { cursor: default; }
.cl-corner.cl-corner--goon > :not(.cl-goon) { visibility: hidden; }
#kotobaLesson.cl-framed .cl-commitrow { display: none; }

/* ── 4 · THE MENU'S CARD under the door, its right edge on the door's (Round D: the Round A sound card grown, the
   same sheet, hairline, shadow and width): 音 SOUND and 読む READ ALOUD with their switches, the note, a hairline,
   and one row that is a press, in the rows' key dress (no icon, no arrow): 最初から From the start since Round E (13
   October 2026; it was 保存して終了 Save and exit, and leaving is 閉じる Close's now). Its press turns the row, in
   place, into the question on its own line over はい yes and いいえ no, in the same key dress, いいえ in hand.
   desktop polish round 2 (13 October 2026), finding 12: this card is the REFERENCE for the ONE MENU CARD dress, and
   the hall's ⋯ card, the account menu and the search palette now wear it too: one hairline, the 8px radius and a
   two-layer resting shadow (a 2px contact shade under the 8px one). It keeps its room's own warm paper and rule
   (--cl-sheet, --cl-rule) and casts in the room's sumi-brown (--cl-sh), never the hall's neutral sumi.
   ⭐ U-116 (the deep review, the owner's go of 26 October 2026): THE ROWS IN SENTENCE CASE, Japanese first, in the dress
   of 閉じる Close beside the door (e3, the UI weight, no tracking): 音 Sound, 読む Read aloud, もう一度 Practise again,
   最初から From the start, and its question's はい Yes / いいえ No. The sheet's tracked capitals (e4 600, --e4-track,
   uppercase) left the rows; the strings carry their own capital (COPY). Eyebrows and tracked labels elsewhere keep theirs. ── */
#kotobaLesson.cl-framed .cl-menu-card {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 6;
    width: calc(15.5 * var(--cl-u));
    padding: 0.9rem 1rem 0.8rem;
    background: var(--cl-sheet);
    border: 1px solid transparent;          /* the elevation's step 1: the slip, told by its shadow, no ring */
    border-radius: var(--radius, 8px);
    box-shadow: var(--cl-slip-rest);
}
#kotobaLesson.cl-framed .cl-menu-card[hidden] { display: none; }
.cl-snd-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; }
.cl-snd-k { display: inline-flex; align-items: baseline; gap: 0.4em; font-size: var(--e3); font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--cl-ink); }
.cl-snd-k [lang="ja"] { font-size: var(--e3); font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--color-jp-text, #2A231F); }
.cl-snd-k i { font-style: normal; }
.cl-snd-note { margin: 0.45rem 0 0; font-size: var(--e4); line-height: 1.4; color: var(--cl-quiet); }
#kotobaLesson.cl-framed .cl-menu-end { margin-top: 0.6rem; padding-top: 0.4rem; border-top: 1px solid var(--cl-rule); }
#kotobaLesson.cl-framed .cl-menu-start,
#kotobaLesson.cl-framed .cl-menu-practise,
#kotobaLesson.cl-framed .cl-menu-skip {
    appearance: none;
    display: block;
    /* the card's full width, its words on the rows' left edge; the half-unit either side is the ring's air */
    width: calc(100% + 1rem);
    min-height: 36px;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: var(--radius-sm, 4px);
    background: none;
    box-shadow: none;
    text-align: left;
    font-family: inherit;
    font-size: var(--e3);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.2;
    color: var(--cl-ink);
    cursor: pointer;
    transition: color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
#kotobaLesson.cl-framed .cl-menu-start [lang="ja"],
#kotobaLesson.cl-framed .cl-menu-practise [lang="ja"],
#kotobaLesson.cl-framed .cl-menu-skip [lang="ja"] {
    font-size: var(--e3);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--color-jp-text, #2A231F);
    transition: color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
#kotobaLesson.cl-framed .cl-menu-start i,
#kotobaLesson.cl-framed .cl-menu-practise i,
#kotobaLesson.cl-framed .cl-menu-skip i { font-style: normal; margin-left: 0.4em; }
#kotobaLesson.cl-framed .cl-menu-start:hover,
#kotobaLesson.cl-framed .cl-menu-start:focus-visible,
#kotobaLesson.cl-framed .cl-menu-start:hover [lang="ja"],
#kotobaLesson.cl-framed .cl-menu-start:focus-visible [lang="ja"],
#kotobaLesson.cl-framed .cl-menu-practise:hover,
#kotobaLesson.cl-framed .cl-menu-practise:focus-visible,
#kotobaLesson.cl-framed .cl-menu-practise:hover [lang="ja"],
#kotobaLesson.cl-framed .cl-menu-practise:focus-visible [lang="ja"],
#kotobaLesson.cl-framed .cl-menu-skip:hover,
#kotobaLesson.cl-framed .cl-menu-skip:focus-visible,
#kotobaLesson.cl-framed .cl-menu-skip:hover [lang="ja"],
#kotobaLesson.cl-framed .cl-menu-skip:focus-visible [lang="ja"] { color: var(--cl-accent); background: none; box-shadow: none; }
#kotobaLesson.cl-framed .cl-menu-start:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
#kotobaLesson.cl-framed .cl-menu-practise:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
#kotobaLesson.cl-framed .cl-menu-skip:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
#kotobaLesson.cl-framed .cl-menu-practise[hidden],
#kotobaLesson.cl-framed .cl-menu-skip[hidden],
#kotobaLesson.cl-framed .cl-menu-start[hidden],
#kotobaLesson.cl-framed .cl-menu-end[hidden] { display: none; }
/* the card's question (js askAgain, Round E): the line in ink at e3, then はい and いいえ side by side in the row's key
   dress, the kanji in the JP brown; the accent on hover and focus, the ring on focus */
#kotobaLesson.cl-framed .cl-menu-card .cl-again-ask--card { display: block; }
#kotobaLesson.cl-framed .cl-menu-card .cl-again-q { display: block; margin: 0.5rem 0 0.15rem; font-size: var(--e3); line-height: 1.4; color: var(--cl-ink); }
#kotobaLesson.cl-framed .cl-menu-card .cl-again-yn { display: flex; align-items: center; gap: 1.4rem; }
#kotobaLesson.cl-framed .cl-menu-card .cl-again-yn .cl-quiet {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 4px);
    font-family: inherit;
    font-size: var(--e3);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.2;
    color: var(--cl-ink);
    transition: color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
#kotobaLesson.cl-framed .cl-menu-card .cl-again-yn .cl-quiet [lang="ja"] { font-size: var(--e3); font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--color-jp-text, #2A231F); }
#kotobaLesson.cl-framed .cl-menu-card .cl-again-yn .cl-quiet i { font-size: inherit; font-style: normal; }
#kotobaLesson.cl-framed .cl-menu-card .cl-again-yn .cl-quiet:hover,
#kotobaLesson.cl-framed .cl-menu-card .cl-again-yn .cl-quiet:focus-visible,
#kotobaLesson.cl-framed .cl-menu-card .cl-again-yn .cl-quiet:hover [lang="ja"],
#kotobaLesson.cl-framed .cl-menu-card .cl-again-yn .cl-quiet:focus-visible [lang="ja"] { color: var(--cl-accent); background: none; box-shadow: none; }
#kotobaLesson.cl-framed .cl-menu-card .cl-again-yn .cl-quiet:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
.cl-switch {
    flex: none;
    position: relative;
    width: 30px;
    height: 17px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: var(--cl-rule);
    cursor: pointer;
    transition: background-color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
.cl-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--cl-sheet);
    transition: left var(--cl-t-ink-quick) var(--cl-ease-move);
}
#kotobaLesson .cl-switch[aria-checked="true"],
#kotobaLesson .cl-switch[aria-checked="true"]:hover { background: var(--cl-accent); box-shadow: none; }
#kotobaLesson .cl-switch[aria-checked="false"]:hover { background: var(--cl-rule); box-shadow: none; }
.cl-switch[aria-checked="true"]::after { left: 15px; }
.cl-switch:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }

/* ── 5 · the type rule and the tags ── */
#kotobaLesson.cl-framed .cl-topmark [lang="ja"],
#kotobaLesson.cl-framed .cl-ix [lang="ja"],
#kotobaLesson.cl-framed .cl-foot [lang="ja"],
#kotobaLesson.cl-framed .cl-tag [lang="ja"],
#kotobaLesson.cl-framed .cl-quiet [lang="ja"],
#kotobaLesson.cl-framed .cl-gate-jp { font-family: var(--cl-font-chrome-jp); }
#kotobaLesson.cl-framed .cl-gloss-line,
#kotobaLesson.cl-framed .cl-sent-en { font-family: var(--cl-font-tell); }
#kotobaLesson.cl-framed .cl-tag,
#kotobaLesson.cl-framed button.cl-tag,
#kotobaLesson.cl-framed button.cl-tag:hover {
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e4);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--e4-track);
    text-transform: uppercase;
    color: var(--cl-quiet);
}
#kotobaLesson.cl-framed .cl-tag i { font-style: normal; }
#kotobaLesson.cl-framed .cl-tag [lang="ja"] {
    font-size: var(--e2);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--color-jp-text, #2A231F);
    margin-right: 0.15em;
}
/* 注意 WATCH OUT, the story's own mark, is the dress the tags take: its kanji in the chrome face too */
#kotobaLesson.cl-framed .cl-wstory-mark-k { font-family: var(--cl-font-chrome-jp); font-weight: 500; }
#kotobaLesson.cl-framed button.cl-tag { cursor: pointer; transition: color var(--cl-t-ink-quick) var(--ease-settle, ease); }
#kotobaLesson.cl-framed button.cl-tag:hover,
#kotobaLesson.cl-framed button.cl-tag:hover [lang="ja"],
#kotobaLesson.cl-framed .cl-tag.cl-wp-tag--open,
#kotobaLesson.cl-framed .cl-tag.cl-wp-tag--open [lang="ja"] { color: var(--cl-accent); background: none; }
#kotobaLesson.cl-framed .cl-wref,
#kotobaLesson.cl-framed .cl-kref { text-decoration-line: none; }
#kotobaLesson.cl-framed .cl-wref:hover,
#kotobaLesson.cl-framed .cl-kref:hover {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(42, 35, 31, 0.45);
    text-underline-offset: 0.18em;
}

/* reduced motion: cuts everywhere */
@media (prefers-reduced-motion: reduce) {
    #kotobaLesson .cl-switch, #kotobaLesson .cl-switch::after { transition: none; }
    #kotobaLesson.cl-framed .cl-menu, #kotobaLesson.cl-framed .cl-menu-start, #kotobaLesson.cl-framed .cl-menu-start [lang="ja"] { transition: none; }
    #kotobaLesson.cl-framed .cl-menu-skip, #kotobaLesson.cl-framed .cl-menu-skip [lang="ja"] { transition: none; }
    #kotobaLesson.cl-framed .cl-pill, #kotobaLesson.cl-framed .cl-pill-note, #kotobaLesson.cl-framed .cl-menu-card .cl-again-yn .cl-quiet { transition: none; }
}

/* ══ ELEVATE · W1 · THE WORD'S PAGES (round A, 10 October 2026) ══════════
   REPORT §5.2 (1), (3), (4) and §5.3; CONTRACT §14.11 ¶1, ¶2, ¶4; owner items 1, 2, 4 and 9; bug B11.
   A pipeline-3 card (js .cl-card--p3, .cl-card--expage): fixed seats, one size each: the portrait 1:1 at
   17.5 units (297 px at 1280, 332 at 1680; never growing to 430), the painting 3:2 at 24 units (408 x 272 at
   1280, 456 x 304 at 1680). */

/* ── 1 · the portrait's one size (the word page and the follow-up's card) ── */
#kotobaLesson .cl-card--portrait.cl-card--p3 { --cl-portrait: calc(17.5 * var(--cl-u)); }

/* ── 1b · ⭐ THE RELATIONS STRIP ON THE WORD PAGE (the strip's second round; the owner, 21 October 2026: the chips on the
   lesson's own word page too; js layWordStrip): the book's one strip (css/course-book.css, no head) under the page's block,
   across the card's whole column, in its cell (.cl-stripcell, the grid's row under the seat and the sentence row). IT NEVER
   MOVES WHAT IS PAINTED. Laid inside the turn that lays the page (.cl-card--strip), the cell is a row of the page's own,
   [1fr | the seat | the sentence row | the strip | 1fr], the block and the strip centred together on the glass with all its
   room; landing later, the cell has no height in the band under the block (its top the block's foot) and the strip hangs
   from it, so the block stands where it was painted and the word's seat holds one box across the ask and its card. The page's
   hold (js holdSeat) never counts it; js fitWordStrip lets its last rows go where it would run past the foot (.cl-strip-cut),
   and a page with no room prints none. ── */
#kotobaLesson .cl-card--portrait > .cl-stripcell { grid-column: 1 / -1; grid-row: 4; align-self: start; position: relative; height: 0; min-width: 0; }
#kotobaLesson .cl-stripcell > .cb-strip--lesson { position: absolute; left: 0; right: 0; top: 0; margin-top: var(--cl-air-in); }
#kotobaLesson .cl-card--portrait.cl-card--strip {
    grid-template-rows: minmax(0, 1fr) var(--cl-portrait) minmax(max(var(--cl-wsent), var(--cl-wsent-held, 0px)), auto) auto minmax(0, 1fr);
}
#kotobaLesson .cl-card--portrait.cl-card--strip > .cl-stripcell { height: auto; }
#kotobaLesson .cl-card--portrait.cl-card--strip > .cl-stripcell > .cb-strip--lesson { position: static; }
#kotobaLesson .cl-stripcell > .cb-strip--lesson[hidden],
#kotobaLesson .cb-strip--lesson .cb-strip-row.cl-strip-cut { display: none; }
/* (at phone width the page stacks, out of the desktop scope: the strip flows under it) */
@media (max-width: 768px) {
    #kotobaLesson .cl-card--portrait > .cl-stripcell { position: static; height: auto; }
    #kotobaLesson .cl-stripcell > .cb-strip--lesson { position: static; }
}

/* ── 2 · the corner seat under the portrait: ONE PRESS, the seat itself (the owner, 11 October 2026, evening: "maybe we
   can remove 'tell me' button and make tap opportunity more intuitive"; the lead's design): a button whose whole box is
   the hit area, the kanji quiet at its top left in Klee (which character the drawing is), the drawing, the punch line
   beside it (the owner, 17 October 2026: one row a seat); 友達 two stacked. 教えて Tell me is gone.
   ⭐ U-028 (the deep review of 25 October 2026; the owner's law of 11 October, "a door must look like a door at rest"): THE
   SEAT READS AS A DOOR AT REST. The drawing whole at 3:2 (45% of the seat's column: 134x89 at 1280, 150x100 at 1680; it was
   a 96 px square crop that cut 鼻 and 体), feathered to nothing at every edge as the character's page prints it (U-067:
   .cl-kpic--ink's mask, ruling 7); the kanji at k5 in the brush brown beside it; the punch line in the teacher's face
   (Literata) at e3 in FULL ink, ending in a quiet " ›", the side panel's own door mark (CSS: no markup, no label). A
   hover or a focus changes ink alone, the line and its mark indigo: the 1 px lift is gone (the motion table, C8). No slip
   surface in this slice. ⚖ The share is measured: at the contract's 49% (146x97) the line's column beside it was 101 px
   and 20 of the 97 punch lines of lessons 1 to 15 ran to six or seven lines (lesson 1's 五 and 八 among them); at 45%,
   with the seat's gaps a step closer (0.55 units, was 0.7), the column is 118 px and no line runs past five (13 three,
   60 four, 24 five), never much taller than its drawing. ── */
#kotobaLesson .cl-card--portrait > .cl-kseats {
    grid-column: 2; grid-row: 3;
    display: flex; flex-direction: column; gap: var(--cl-air-in);
    margin-top: var(--cl-air-in);
    min-width: 0;
}
#kotobaLesson .cl-card--portrait.cl-card--noportrait > .cl-kseats { grid-column: 1; grid-row: auto; margin-top: var(--cl-air-between); }
/* M1 (repair round 1; E1-3, O-1): A LINE IS NEVER CUT. The seat's line (the story's punch line since the owner's walk of
   11 October 2026, item 3; a recipe page's first opener sentence and its "…" since the owner's decision A of 17 October
   2026) prints whole: no line cap, no clamp, no text-overflow, never a scroll. The "…" is the owner's teaser after a whole
   sentence, in the place of its full stop, never a cut.
   ⭐ 17 October 2026 (the owner on 家族's word page, through the lead: "the caption goes to the right of the thumbnail";
   pages_diag CONTRACT §4.1, issue 1b): ONE ROW A SEAT, the kanji quiet at its top left, its drawing, and BESIDE the
   drawing its line, wrapping in what the seat column leaves (about 156 px at 1280, 186 at 1680), `From lesson n.` under
   the line on that side. Two stacked seats no longer set one drawing's caption over the next kanji, and the column is a
   third shorter. A long line (万's first sentence, 222 characters) wraps beside its drawing and the seat grows; an old
   card's punch line stands in the same place. The drawing spans both rows, so the lesson line sits right under the line
   (the flexible second row takes what the drawing leaves). */
#kotobaLesson .cl-kseat {
    display: grid;
    grid-template-columns: auto minmax(0, 45%) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: calc(0.55 * var(--cl-u));
    row-gap: 0;
    align-items: start;
    width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
    appearance: none; background: none; box-shadow: none;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
#kotobaLesson .cl-kseat:hover { background: none; box-shadow: none; }
#kotobaLesson .cl-kseat:focus-visible { outline: var(--cl-ring); outline-offset: var(--cl-ring-off); }
#kotobaLesson .cl-kseat-k {
    grid-column: 1; grid-row: 1 / span 2;
    font-family: 'Klee One', var(--cl-font-chrome-jp, sans-serif); font-size: var(--k5); line-height: 1;
    color: var(--color-jp-text, #2A231F);
}
#kotobaLesson .cl-kseat-pic {
    grid-column: 2; grid-row: 1 / span 2;
    width: 100%; aspect-ratio: 3 / 2;
    background: var(--cl-paper);
    display: block; line-height: 0; overflow: hidden;
}
#kotobaLesson .cl-kseat-pic img {
    width: 100%; height: 100%; display: block; object-fit: contain;
    filter: url(#cl-washi); mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                        linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-composite: intersect;
}
#kotobaLesson .cl-kseat-glyph {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    font-family: 'Klee One', var(--cl-font-chrome-jp, sans-serif); font-size: calc(4.7 * var(--cl-u)); line-height: 1;
    color: rgba(42, 35, 31, 0.82);
}
/* 17 October 2026 (the Evaluator's problem 2): in the seat's narrow column (156 px at 1280, 186 at 1680) 28 and 19 of the
   68 lines ended on one word ("it…" under a full line on 家族's own seats); balanced, every line evens out, the lines and
   the seat's height unchanged (measured in the live page at both sizes) */
#kotobaLesson .cl-kseat-punch {
    grid-column: 3; grid-row: 1;
    text-wrap: balance;
    display: block; margin: 0;
    font-family: var(--cl-font-tell);
    font-size: var(--e3); line-height: 1.45;
    color: var(--cl-ink);
    transition: color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
/* ⭐ U-028: the door's mark, the side panel's ` ›` (its `目 eye ›`), held to the line's last word by a no-break space, in the
   quiet ink at rest */
#kotobaLesson .cl-kseat-punch::after {
    content: '\00a0\203A';
    color: var(--cl-quiet);
    transition: color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
#kotobaLesson .cl-kseat-punch [lang="ja"] { font-size: 1.05em; }
/* ⭐ (the owner, 21 October 2026, reviewing lesson 11: 部 SECTION · 屋 SHOP) a word of two kanji or more captions each seat
   with its kanji's meaning (js seatCaptionOf), in the app's word page's dress for a kanji's meaning: tracked caps in the ink */
#kotobaLesson .cl-kseat-punch.cl-kseat-punch--mean {
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.35;
    color: var(--cl-ink);
}
#kotobaLesson .cl-kseat:hover .cl-kseat-punch,
#kotobaLesson .cl-kseat[aria-expanded="true"] .cl-kseat-punch { color: var(--cl-accent); }
/* (U-028: a focus inks it as a hover does, the ring round it; the mark goes indigo with its line) */
#kotobaLesson .cl-kseat:focus-visible .cl-kseat-punch { color: var(--cl-accent); }
#kotobaLesson .cl-kseat:hover .cl-kseat-punch::after,
#kotobaLesson .cl-kseat:focus-visible .cl-kseat-punch::after,
#kotobaLesson .cl-kseat[aria-expanded="true"] .cl-kseat-punch::after { color: var(--cl-accent); }
/* 17 October 2026 (the owner's report on lessons 7 and 8, item 2; pages_diag CONTRACT §4.2): a seat for each kanji of the
   word, in its order, stacked as 友達's are. A kanji an earlier lesson taught says where it is from in one quiet line under
   its own line, beside the drawing (`From lesson 7`, the book's words with no stop, in the drawer's lesson-label dress: e4 tracked
   caps, the quiet ink). Where the right column (the portrait, the air, the seats) runs past the room, the portrait gives
   first, never under the receipt's floor, then such a seat lets its line go (js holdSeat: .cl-kseats--bare), its kanji,
   its drawing and its lesson kept; a new kanji's line never goes and nothing is cut. */
#kotobaLesson .cl-kseat-from {
    grid-column: 3; grid-row: 2; align-self: start;
    display: block; margin: 0.3rem 0 0;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e4); line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cl-quiet);
}
#kotobaLesson .cl-kseats--bare .cl-kseat--guest .cl-kseat-punch { display: none; }
#kotobaLesson .cl-kseats--bare .cl-kseat--guest .cl-kseat-from { margin-top: 0; }

/* ── 3 · the rows on the card, and the one line of a word said as one ── */
#kotobaLesson .cl-portrait-text > .cl-ways-card { margin-top: var(--cl-air-in); }
/* a card of five ways (日: ひ · か · び · にち · に) keeps the glass at 1280 by 900 with half the air above its rows (the owner's walk of
   11 October 2026, item 13: the groups' gap put it 7 px past the foot) */
#kotobaLesson .cl-portrait-text > .cl-ways-card:has(.cb-ways--kinds) { margin-top: calc(0.5 * var(--cl-air-in)); }
#kotobaLesson .cl-ways-card > .cb-ways { margin: 0; }
#kotobaLesson .cl-ways-card--rule > .cl-wp-note { margin: 0; }
#kotobaLesson .cl-oneline {
    margin: var(--cl-air-in) 0 0;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e3); line-height: 1.5;
    color: var(--cl-quiet);
}
#kotobaLesson .cl-oneline [lang="ja"] { font-size: 1.1em; color: var(--color-jp-text, #2A231F); }

/* ── 4 · the example page: one sentence on the book spread ──
   The text at the left, the painting at the right, side by side at both widths (bug B11). The spread stands at
   one height on every example page (--cl-expage-top: the seat centred a little above the page's middle), so
   the sentence's first line is on a fixed line whatever its length; the English under it runs down past the
   seat's foot where it must. A sentence not painted yet keeps its seat as quiet paper, no caption.
   ⭐ 11 November 2026 (the laptop census): a page still past the glass after its list's other gives starts a little
   higher, by --cl-expage-give (js fitWordList's last give, expageTopGive), never under the row's own floor of
   1.5rem. No page that fits carries it, so the fixed line holds wherever the page fits. */
#kotobaLesson .cl-card--expage {
    --cl-exseat-w: calc(24 * var(--cl-u));
    --cl-exseat-h: calc(16 * var(--cl-u));
    --cl-expage-gap: calc(2.2 * var(--cl-u));
    --cl-expage-top: max(1.5rem, calc((var(--cl-glass) - var(--cl-foot-h, 0px) - var(--cl-exseat-h)) / 2 - 2.5 * var(--cl-u)));
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cl-exseat-w);
    grid-template-rows: max(1.5rem, calc(var(--cl-expage-top) - var(--cl-expage-give, 0px))) var(--cl-exseat-h) auto;
    column-gap: var(--cl-expage-gap);
    align-items: start;
    padding-top: 0;
}
#kotobaLesson .cl-card--expage > .cl-expage-text { grid-column: 1; grid-row: 2 / 4; min-width: 0; padding-top: calc(2.4 * var(--cl-u)); }
#kotobaLesson .cl-card--expage > .cl-expage-seat { grid-column: 2; grid-row: 2; width: var(--cl-exseat-w); height: var(--cl-exseat-h); }
#kotobaLesson .cl-expage-seat > .cl-kpic { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; flex: none; margin: 0; }
#kotobaLesson .cl-expage-seat > .cl-kpic img { object-fit: contain; }
/* M1 (repair round 1; O-2): a page with no painting paints NOTHING in the seat (no fill, no outline): a pale empty
   box read as a broken picture. The seat keeps its box, so the sentence keeps its anchor and its column. */
#kotobaLesson .cl-expage-seat.cl-expage-seat--bare { background: transparent; border: 0; box-shadow: none; outline: 0; }
#kotobaLesson .cl-card--expage .cl-sent.cl-sent--page { margin: 0; padding-left: 0; border-left: 0; }
#kotobaLesson .cl-card--expage .cl-sent--page > [lang="ja"],
#kotobaLesson .cl-card--expage .cl-sent--page > [lang="ja"] [lang="ja"] { font-size: var(--cl-exsent, var(--k4)); line-height: 1.9; }
/* ⚖ 20 October 2026 (the owner's review of lesson 9, item 2: "when we move to an example sentence, all text below row 1
   jumps up"): THE FIRST LINE HOLDS ITS READING'S ROOM. A reading over a word of the first line (the day's reading over
   母, a guest's) rises above the line's half-leading, and Chrome lays that overflow two ways: a whole layout gives the
   first line the room (the lines 1.9 apart, the first one lower), but a later pass that lays the line again around a
   box in it (the speaker, when it plays or is hovered: measured at 1440x900 370 → 364, 438 → 433, the English 507 →
   501; any change to the speaker's own box did it, no change to the text did) keeps the first line and drops the room,
   so every line under it rose 5.8 px and stayed. An empty box at the head of the sentence, as tall over the baseline as
   the reading's top (the ideographic top, 0.88 em, and the reading's own box at 0.44 em), makes that room part of the
   first line itself, so no reading ever overflows it and every pass lays it the same: the first layout is the settled
   one, whatever the trigger. A first line with a reading stands where it stood; one with none stands as low, so every
   example's first line is on one line (measured on lesson 9 at 1280, 1440 and 1680: 0 to 1 px, and 5 to 7 px lower on
   the four with no reading in their first line). The speaker's own box is fixed and contained too (THE EAR'S BOX IS
   ITS OWN, above). */
/* (⭐ U-051, the deep review of 25 October 2026: the reading now half the line, its top 1.66 em over the baseline (measured at
   1280 and 1680), so the box stands 1.7 em, still over every reading: was 1.55 em over a 0.44 em reading) */
#kotobaLesson .cl-card--expage .cl-sent--page > [lang="ja"]::before { content: ''; display: inline-block; width: 0; height: 1.7em; vertical-align: baseline; }
/* ⚖ 12 November 2026 (the twelfth fault's root, under every trigger: the lines under the first 9.8 px lower at 1280x900, on a
   voiced arrival's end and once in about ten walker readings): A READING OVER LINE 2 AND UP STANDS INSIDE ITS OWN LINE. A
   reading's box reached 9.1 px over its line's box (lesson 15's あ over 開: its top 363.2, the line's 372.3), and Chrome lays
   that overflow two ways: a whole layout lends it the air under the line before (the lines 64.6 apart), a later pass that
   lays the lines again around the speaker, at a page-wide restyle, gives it room of its own (74.4 apart), and the lines
   dropped and stayed. A reading stands on its word from its foot, so a negative margin over its head takes its room out
   of the line's sums and moves nothing: the glyph, its box and its word stand where they stood (the overflow is 0.54 of
   the reading's em at every size; 0.75 em leaves it inside its line with room to spare), no line ever needs room for it,
   and both passes lay the lines the same. Nothing a learner sees moves (the census of lessons 5, 9, 15 and 26 at three
   sizes, both examples of every word: every word, reading, English line, speaker and list in place, and the sentence's
   pixels unchanged). The first line keeps its strut above. (Tried and left: text-box-trim to the x-height held the lines
   too, but Chrome paints a trimmed reading from its new top snapped to the pixel: half the readings stood 1 px higher.)
   ⛔ CHROMIUM ONLY (js chromiumEngine, the root's data-cl-engine): the fault is Chromium's. WebKit already gives a reading
   its own room (the 口 page's lines 74.85 apart), and there this rule set あ under 小 of the line before. */
#kotobaLesson[data-cl-engine="chromium"] .cl-card--expage .cl-sent--page rt { margin-block-start: -0.75em; }
#kotobaLesson .cl-card--expage .cl-sent--page > .cl-sent-en {
    display: block; margin-top: 0.5rem;
    font-family: var(--cl-font-tell); font-size: var(--e2-tell); line-height: 1.55;
    color: var(--cl-quiet);
}
/* ⭐⭐ THE GRADED READER'S LOOK (the owner's choice of the blend of design seats A and B, 19 October 2026; the seats'
   pages design2/A/DESIGN_A.md and design2/B/DESIGN_B.md). The sentence: one ruby dress, the day's reading and a guest's at
   one size in the one quiet ink (they were two sizes and two inks); its English half a rem under it (was 0.7rem); the
   speaker's glyph a step larger, still hanging past the line's last glyph. */
#kotobaLesson .cl-card--expage .cl-sent--page .cl-guest rt,
#kotobaLesson .cl-card--expage .cl-sent--page ruby.cl-ex-rb rt { font-size: 0.5em; font-weight: 600; color: var(--cl-quiet); letter-spacing: 0.02em; }
#kotobaLesson .cl-card--expage .cl-sent--page .cl-sent-oto .cl-chip-i { width: 1.2rem; height: 1.2rem; }
#kotobaLesson .cl-card--expage .cl-sent--page .cl-sent-oto { width: 1.2rem; height: 1.2rem; margin-right: calc(-0.5em - 1.2rem); }
/* a word under the pointer or lit from its row (js wireSentence; a press held it too until D65's bake of 24 October 2026,
   below: the highlight is the pointer's alone): ink alone, the house accent, no rule; the solid
   rule under the pointer only on a word that opens its card (a rule under a word keeps meaning "a door").
   ⭐⭐ NO RULE AT ALL (the owner, 20 October 2026: "when i hover over the target word there is a underline i'd like to
   remove it and maybe we can make colour of the target word highlight effect change on hover but no underline please"):
   on this page the ink alone answers the hand, on every word, a door or not; the list under the sentence says what each
   word is. Today's word keeps its dark orange at rest (.cl-sent-hit, inside its token) and takes the accent under the
   pointer as every other word does, so the hand sees a change where the rule used to be. */
#kotobaLesson .cl-card--expage .cl-tk[role="button"]:hover,
#kotobaLesson .cl-card--expage .cl-tk--lit { color: var(--cl-accent); text-decoration-line: none; }
#kotobaLesson .cl-card--expage .cl-tk[role="button"]:hover .cl-sent-hit,
#kotobaLesson .cl-card--expage .cl-tk--lit .cl-sent-hit { color: var(--cl-accent); }
/* ⭐⭐ D57 (the owner, 22 October 2026, of lesson 8's Practice: "There is no need to open a panel for guest words"; "Let us
   make sure sentences are aligned 100% anywhere"): EVERY SENTENCE PRINTED WITH ITS LIST TAKES THE EXAMPLE PAGE'S HAND (js
   wireSentence): a Practice sentence, a Review ask's line, a homework piece and the warm-up's lines as the example page. A
   word under the pointer or lit from its row takes the house accent, ink alone, no rule, whether it opens its card
   or nothing (held too until D65's bake of 24 October 2026); a guest keeps its ruby, the mark of a word not taught yet,
   and wears no dotted rule, which was its press's (js wireGuests stands down inside a sentence); a small word is print;
   a row of the list takes the house ring on focus. */
#kotobaLesson .cl-tk[data-cl-sent]:hover, #kotobaLesson .cl-dr[data-cl-sent]:hover,
#kotobaLesson .cl-tk[data-cl-sent].cl-tk--lit, #kotobaLesson .cl-dr[data-cl-sent].cl-tk--lit { color: var(--cl-accent); text-decoration-line: none; }
#kotobaLesson .cl-wl-row[data-cl-sent]:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* (D65, 23 October 2026: a row is as wide as its words, so the pointer lights only the row it rests on) */
#kotobaLesson .cl-wl-row { width: fit-content; max-width: 100%; }
/* ⭐ THE OWNER'S ITEM 4a (18 October 2026): THE SENTENCE'S WORDS, UNDER IT (js sentWordsHTML). ⭐⭐ ONE LIST, NO FOLD (the
   graded reader, 19 October 2026): kanji words and kana words alike, the page's own word out. ⭐⭐ THE LIST IS THE GLOSS
   (the graded reader's look, the owner's choice of the blend, 19 October 2026): no plank on this page. The list stands
   one air lower, under a 3 rem footnote hairline and no heading; a row a word on one line, flex on the baseline at 1.5
   leading: the headword (an inflected word's dictionary form, js headOf) in Klee at k6 with its reading over its kanji at
   the furigana floor, flush left (a kana word an empty annotation, so every row stands as tall), its one meaning in
   Literata at e3, quiet (an inflected word's dictionary meaning), and in the micro-label, quiet and at rest, the lesson
   that teaches a word still to come. A taught word's headword wears the moss it wears in the sentence, a later word's the
   sumi. Resting on a word lights its row and resting on a row its word (js wireWordList): the headword in the house
   accent, the meaning in full ink; a held row kept the light with a hairline beside it (the owner, 20 October 2026: the
   2 px tick at 1.05 em was "too thick, not that elegant" and "short"; that afternoon, "quieter, and dynamic length": the
   word's height, its reading included, below), which a lit row wears since D65's bake (24 October 2026), nothing held.
   No kana column, no dictionary tail, no dot, no box, no badge (B's block, A's Literata meaning and lesson tag). */
/* ⚖ 24 October 2026, 03:50 (D65; the owner, on the review desk: "look at what we do with example sentences including
   different highlights; analyse all rules and apply them to exercises and homework"): THE EXAMPLE PAGE'S LIST DRESS ON EVERY
   LIST. The list under a Practice sentence, a Review ask's line, a homework piece and the warm-up's lines takes the example
   page's seat: one air (1.4 units) under the sentence and the 3 rem footnote hairline over its first row. A list moved under
   the corner seat's painting (the homework's give, below) keeps that seat's own top, with no hairline. (Was: the example
   page alone.) */
#kotobaLesson .cl-wl { margin: calc(1.4 * var(--cl-u)) 0 0; min-width: 0; }
#kotobaLesson .cl-wl-list::before { content: ''; display: block; width: 3rem; border-top: 1px solid var(--cl-rule); margin-bottom: 0.5rem; }
/* ⭐ U-038 (c) (the deep review of 25 October 2026; l08 089: a lone hairline over an empty band before the tiles): while
   every row of a list waits veiled (D64), its hairline waits with them, its seat held (visibility, never display), and it
   inks with the first row that inks */
#kotobaLesson .cl-wl-list:not(:has(> .cl-wl-row:not([data-veil])))::before { visibility: hidden; }
#kotobaLesson .cl-corner-seat > .cl-wl .cl-wl-list::before { display: none; }   /* (a list under the corner seat's painting keeps its own seat) */
/* the give (js fitWordList): under the painting, in the seat's column, where the text column would run past the glass */
#kotobaLesson .cl-card--expage > .cl-wl { grid-column: 2; grid-row: 3; }
/* the third give's last step (js fitWordList, the lead's ruling of 19 October 2026): the rows tighter, only where the page's
   bottom air at its floor (half the sheet's) has not cleared the glass */
#kotobaLesson .cl-card--wl-tight .cl-wl-row { line-height: 1.3; }
/* ⭐ THE HOMEWORK LIST'S GIVE (js fitHomeworkList, 22 October 2026, the refresh lane: the fit law on D51's list): where a
   homework piece runs past the glass, its list stands under the corner seat's square painting, in the seat's column;
   where it still runs past, the rows tighten */
#kotobaLesson .cl-corner-seat > .cl-wl { position: absolute; top: calc(var(--cl-kpic) + var(--cl-air-in)); left: calc(100% + 1rem); width: var(--cl-kpic); margin: 0; }
/* (U-065, 26 October 2026: under a moment's 3:2 painting the list stands under the painting's own height) */
#kotobaLesson .cl-corner-seat--moment > .cl-wl { top: calc(var(--cl-kpic) * 2 / 3 + var(--cl-air-in)); }
/* ⭐ D64 (rule 37, the owner, 23 October 2026): on a piece still asked the painting waits veiled in its seat until the
   answer, and a list standing under it stays to be read (its guests' rows; its taught rows keep their own veil) */
#kotobaLesson .cl-corner-seat[data-veil] > .cl-wl { visibility: visible; }
/* ⭐ ON A PHONE THE TEXT TAKES THE WIDTH (the owner's phone 。, 3 November 2026). Under 600 px the corner seat's painting and its
   word list stood beside the text and left a Reading line 116 px wide, three and a half characters at the reading size: a word
   wider than its line overflowed it, and the browser's last resort sent the 、 or 。 after it to a line of its own (働いています / 。,
   今日は / 、). There the seat flows with the item instead: the painting over the text at its own size, the list after everything
   the item asks, and the text the item's whole width. A tablet's glass and every desktop's keep the seat beside. */
@media (max-width: 600px) {
    .cl-stage > .cl-set.cl-set--corner > .cl-item { max-width: none; display: flex; flex-direction: column; }
    .cl-stage > .cl-set.cl-set--corner > .cl-item > * { order: 1; }
    .cl-stage > .cl-set.cl-set--corner .cl-corner-seat { display: contents; }
    #kotobaLesson .cl-stage > .cl-set.cl-set--corner .cl-corner-seat > * { order: 0; position: static; margin: 0 0 1rem; }
    #kotobaLesson .cl-stage > .cl-set.cl-set--corner .cl-corner-seat > .cl-kpic { width: var(--cl-kpic); }
    #kotobaLesson .cl-stage > .cl-set.cl-set--corner .cl-corner-seat > .cl-wl { order: 2; width: auto; margin: 1.2rem 0 0; }
    /* and a Reading line never breaks before its mark as a last resort: a unit wider than the line shows its overflow, and the
       line's type steps down until it fits (js fitLongUnits) */
    #kotobaLesson .cl-read-line { overflow-wrap: normal; }
}
#kotobaLesson .cl-hw--wl-tight .cl-wl-row { line-height: 1.3; }
/* ⭐ THE WARM-UP TAKES THE PRACTICE PAGE'S TREATMENT (the owner, 22 October 2026; js renderWarmStep, wireWarmWords): the
   same list under the piece's lines, the same rows; where the step runs past the glass the rows tighten as a homework
   piece's do (the same class), and never move under the corner seat, whose painting is the reveal's. The one sentence at
   the first guest under a list (decision 68, js guestOnceHTML: a homework piece's, a warm-up step's) wears the margin
   note's own dress, which carried it before the list: the UI face, the quiet ink, one step smaller (it inherited the
   leaf's Klee at the leaf's size) */
#kotobaLesson .cl-wl-guest1 { margin: 0.75rem 0 0; max-width: 34em; font-family: var(--font-ui, 'Inter', sans-serif); font-size: var(--e3); line-height: 1.45; color: var(--cl-quiet); }
/* the warm-up list's last give (js fitHomeworkList, stay): where the step still runs past the glass with its rows tightened,
   they flow in two columns, the same rows half as tall, none split across the two */
#kotobaLesson .cl-warm--wl-two .cl-wl-list { columns: 2; column-gap: 2rem; }
#kotobaLesson .cl-warm--wl-two .cl-wl-row { break-inside: avoid; }
#kotobaLesson .cl-wl-list { margin: 0; padding: 0; list-style: none; }
#kotobaLesson .cl-wl-row { position: relative; display: flex; align-items: baseline; column-gap: 0.75em; margin: 0; padding: 0; line-height: 1.5; white-space: nowrap; cursor: pointer; }
#kotobaLesson .cl-wl-w { margin: 0; font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k6); color: var(--color-jp-text, #2A231F); transition: color var(--duration-fast, .15s) var(--ease-settle, ease); }   /* a word: the sumi (the elevation, the review round) */
#kotobaLesson .cl-wl-row--known .cl-wl-w { color: var(--cl-known); }
#kotobaLesson .cl-wl-w ruby { ruby-position: over; ruby-align: start; }
#kotobaLesson .cl-wl-w rt { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--e3); font-weight: 600; line-height: 1; letter-spacing: 0.02em; color: var(--cl-quiet); }
#kotobaLesson .cl-wl-en { min-width: 0; font-family: var(--cl-font-tell); font-size: var(--e3); color: var(--cl-quiet); white-space: normal; transition: color var(--duration-fast, .15s) var(--ease-settle, ease); }
#kotobaLesson .cl-wl-n { margin: 0; font-size: var(--e4); letter-spacing: var(--e4-track); text-transform: var(--e4-case); color: var(--cl-quiet); white-space: nowrap; }
/* ⭐ Repair round 1 (E1-03, J-05, 26 October 2026): THE MEANING AND ITS LESSON'S SEAT ARE ONE BOX (js sentWordsHTML,
   .cl-wl-g), the row's second cell. Where the row stands whole it prints as it did, the seat one gap after the meaning;
   where the list is too narrow for the row (the Reading's 216 px corner list: 水曜日 under its e3 reading すいようび, then
   Wednesday, then LESSON 5) the seat wraps under the meaning, flush with it, and never runs into it (it overprinted
   "Wednesday" on lesson 8's hostel desk). A meaning longer than its cell still wraps inside itself. */
#kotobaLesson .cl-wl-g { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75em; min-width: 0; }
/* (a seat with no lesson in it, a word taught by tonight or one the ladder has no night for, takes no room) */
#kotobaLesson .cl-wl-n:empty { display: none; }
#kotobaLesson .cl-wl-row:hover .cl-wl-w, #kotobaLesson .cl-wl-row--lit .cl-wl-w { color: var(--cl-accent); }
#kotobaLesson .cl-wl-row:hover .cl-wl-en, #kotobaLesson .cl-wl-row--lit .cl-wl-en { color: var(--cl-ink); }
/* ⚖ 20 October 2026 (the owner's review of lesson 9, item 3: the held row's hairline "quieter, and dynamic length: longer
   with furigana, shorter without"): the tick hangs on the headword, not the row (a meaning wrapped to a second line never
   stretches it), in the accent at 55% (the house's ink, quieter), as long as the word: from the reading's top to the
   glyphs' foot beside a word printed with its reading (cl-wl-row--ruby, js sentWordsHTML), the glyphs' height alone beside
   a kana word, whose row stands as tall under its empty annotation (measured at 1440x900 in the headword's em: the
   reading's ink from 0.25 em, the glyphs' from 0.95 em to 0.28 em above the row's foot; the left edge where it stood,
   13.6 px before the word) */
#kotobaLesson .cl-wl-w { position: relative; }
/* ⚖ 24 October 2026, 05:15 (D65, the bake; the owner, of the footer highlights laid side by side on the review desk: "ok i
   love it let us implement then! and use tick style."; at 03:20: "make highlight work only on hover"): THE TICK ON A LIT
   ROW, HOVER ONLY. A lit row (the pointer on its word or on the row, or the keys' focus: cl-wl-row--lit, js wireSentence)
   prints its headword in the accent and its meaning in full ink (above), and wears the thin hairline beside its headword:
   1 px, the accent at 55%, as long as the word, from the reading's top on a row printed with its reading. A sentence's
   word takes the accent's ink alone. No background, no strip, no box, no underline, and nothing is held: a press on a word
   that opens nothing leaves no light, and leaving puts the light out. The lineage: the example page's hand of 20 October
   2026 (the accent, the full ink, this hairline on a held row); D57's wash of 22 October (--cl-lit, the accent at 14%
   behind a lit or held word and its row), ruled "terrible" and removed on 23 October; the slip's paper strip under a lit
   or held row, tried that night and set aside for this. */
#kotobaLesson .cl-wl-row:hover .cl-wl-w::before, #kotobaLesson .cl-wl-row--lit .cl-wl-w::before { content: ''; position: absolute; left: -0.672em; top: 0.95em; bottom: 0.28em; width: 1px; background: color-mix(in srgb, var(--cl-accent) 55%, transparent); }
#kotobaLesson .cl-wl-row--ruby:hover .cl-wl-w::before, #kotobaLesson .cl-wl-row--ruby.cl-wl-row--lit .cl-wl-w::before { top: 0.25em; }
@media (max-width: 768px) {
    #kotobaLesson .cl-card--expage { display: block; }
    #kotobaLesson .cl-card--expage > .cl-expage-seat { width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: var(--cl-air-in); }
}

/* ══ ELEVATE · W2 · THE UNFOLD AND THE ASKS' ONE DRESS (round A, 11 October 2026) ══════════════════════════════
   REPORT §5.2 "The follow-up's journey", "The asks' one dress" and the ask's wireframe; §5.5's unfold row;
   CONTRACT §14.11 ¶2 and ¶10; PLAN rows A5 and A9; owner item 3; mock m4_ask_unfolds. */

/* ── 1 · the ask laid on its card (js unfoldAskPage): the card's own grid, every tier veiled, the word where the
   card's word stands; the tag in the kana's band; the ask hung under the word. Opacity only, nothing moves. ── */
#kotobaLesson .cl-card--unfold { position: relative; }
#kotobaLesson .cl-card--unfold .cl-portrait-text > .cl-card-head { position: relative; }
#kotobaLesson .cl-card--unfold .cl-uf {
    opacity: 0; visibility: hidden;
    transition: opacity var(--cl-t-ink) var(--ease-settle, ease), visibility 0s linear var(--cl-t-ink);
}
#kotobaLesson .cl-card--unfold .cl-uf.cl-uf--in {
    opacity: 1; visibility: visible;
    transition: opacity var(--cl-t-ink) var(--ease-settle, ease), visibility 0s;
}
/* the tag stands in the band the kana will ink into, its foot on the kana's line */
#kotobaLesson .cl-uf-tag {
    position: absolute; left: 0; top: 0; z-index: 1;
    height: calc(1.2 * var(--k5));
    margin: 0;
    display: flex; align-items: flex-end;
    pointer-events: none;
    transition: opacity var(--cl-t-dissolve) var(--ease-settle, ease);
}
/* the ask's block, from the word's foot (js placeUnfoldAsk measures it) across the card */
#kotobaLesson .cl-unfold-ask {
    position: absolute; left: 0; right: 0; z-index: 1;
    top: calc(var(--cl-uf-top, 34%) + var(--cl-air-in));
    margin: 0;
    transition: opacity var(--cl-t-dissolve) var(--ease-settle, ease);
}
#kotobaLesson .cl-card--unfold .cl-uf-gone,
#kotobaLesson .cl-unfold-ask .cl-uf-gone { opacity: 0; pointer-events: none; }
#kotobaLesson .cl-unfold-ask .cl-credit.cl-remind { margin: 0 0 0.5rem; max-width: calc(34 * var(--cl-u)); font-size: var(--e3); line-height: 1.6; color: var(--cl-quiet); }
#kotobaLesson .cl-unfold-ask .cl-askq { margin: 0 0 calc(1.6 * var(--cl-u)); font-size: var(--e2); line-height: 1.4; color: var(--cl-ink); }
#kotobaLesson .cl-unfold-ask .cl-built { margin-bottom: calc(1.2 * var(--cl-u)); }
/* the hand's own question is the old ask page's: the question stands above. (The learner's row, .cl-yours, used to be
   hidden here too, a miss retyping the answer into the seats; since the marks of 5 November 2026 a row built wrong keeps
   its pieces and the answer prints once under it in that row, with the 〇: it shows.) */
#kotobaLesson .cl-unfold-ask .cl-hand > .cl-ask { display: none; }
#kotobaLesson .cl-unfold-ask .cl-teach { margin-top: calc(0.9 * var(--cl-u)); }
#kotobaLesson .cl-unfold-ask .cl-hand-tail--after { margin-top: calc(0.9 * var(--cl-u)); }
@media (prefers-reduced-motion: reduce) {
    #kotobaLesson .cl-card--unfold .cl-uf,
    #kotobaLesson .cl-card--unfold .cl-uf.cl-uf--in,
    #kotobaLesson .cl-uf-tag,
    #kotobaLesson .cl-unfold-ask { transition: none; }
}

/* ── 2 · the asks' one dress (the Review, the comebacks, every Practice item; js oneDressHeadHTML): the question
   line in quiet Inter 1u, a comeback or an again copy tagged もう一度 ONCE MORE over it; one box on every item, so
   the sentence or word under it stands at one anchor, a little above a third of the glass ── */
#kotobaLesson .cl-wb-head.cl-wb-one {
    min-height: calc(3.6 * var(--cl-u));
    margin: 0 0 calc(1.3 * var(--cl-u));
    justify-content: flex-end;
}
#kotobaLesson .cl-wb-one .cl-wb-once { margin: 0 0 0.55rem; line-height: 1; }
#kotobaLesson .cl-wb-one .cl-wb-q {
    margin: 0;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e2); font-weight: 400; line-height: 1.45;
    color: var(--cl-quiet);
}
/* the anchor: the head's box ends where the large line begins, at about 0.28 of the page's height */
#kotobaLesson.cl-framed .cl-set.cl-set--wb:has(.cl-wb-one) {
    padding-top: max(var(--cl-origin-page), calc(0.28 * var(--cl-glass) - 4.9 * var(--cl-u)));
}
#kotobaLesson.cl-framed .cl-set.cl-set--wb.cl-set--plate:has(.cl-wb-one),
#kotobaLesson.cl-framed .cl-set.cl-set--wb:has(> .cl-vig) { padding-top: var(--cl-origin-page); }
/* M1 (repair round 1; E1-1, O-3): THE PRACTICE ITEM NEVER SCROLLS. The station's bottom padding (5.4rem less the
   foot's share) reserved the old in-flow foot's seat; under the frame the foot is fixed on the glass floor and the
   station's min-height already ends at its top, so that padding only pushed the four "Which kanji?" items whose
   reserved note holds a two-sentence look-alike tell (思/心, 私/木, 行/後, 持/時) 2 to 31 px past the glass at 1280 x
   900, and a scrollbar painted. The item may now use that air; it still never reaches the foot (min-height). */
#kotobaLesson.cl-framed .cl-stage > section.cl-set.cl-set--wb:has(.cl-wb-one) { padding-bottom: 0; }
/* a word asked alone stands at the asking size (Klee 2.05u), as a sentence does */
#kotobaLesson.cl-framed .cl-set--wb .cl-mean-word { margin: 0 0 calc(1.1 * var(--cl-u)); font-size: var(--k4); line-height: 1.3; }
/* meaning options are tiles (never 650 px boxes): one row, each at most 20 units, the gloss in the book's face */
#kotobaLesson.cl-framed .cl-mean5-opts {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, calc(20 * var(--cl-u)));
    justify-content: start; align-items: stretch;
    gap: 0.6rem; max-width: none;
}
#kotobaLesson.cl-framed .cl-mean5-opts > .cl-mean-o {
    max-width: none; min-height: calc(3.6 * var(--cl-u));
    padding: 0.7rem 1rem;
    font-family: var(--cl-font-tell); font-size: var(--e2-tell); line-height: 1.4;
    text-align: center;
}
/* the listen item's press is the course's round speaker chip, at the end of the line it plays */
/* (2 November 2026: on a line laid by its words the chip rides inside its last word's no-break box, js layTokens' end) */
#kotobaLesson .cl-hearline .cl-hear-chip { margin-left: 0.5em; vertical-align: middle; }

/* ══ ELEVATE · G · THE GATE, THE CLOSE AND THE DOOR (round A, 11 October 2026) ══════════════════════════════════════
   REPORT §5.4 and §5.5; CONTRACT §14.11 ¶6, ¶7, ¶9, ¶14; owner item 8; mock m5_gate_tiles, m6_close_two_beats. Every
   rule here is a pipeline-3 file's (the classes below are written only for one); lessons 1 to 4 and the older v5
   files keep their own gate, close and door. */
#kotobaLesson { --cl-seal-ink: #A35A4A; }      /* the seal's terracotta, the brand's one stamp moment (there is no red) */

/* the tiles: one renderer for the New words gate and the close (wordTiles, tilesHTML) */
.cl-wtiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--cl-tile-cols, 4), minmax(0, 1fr));
    column-gap: calc(1 * var(--cl-u));
    row-gap: calc(1.5 * var(--cl-u));
}
.cl-wt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cl-wt-pic { display: block; width: 96px; height: 96px; margin-bottom: 0.55rem; line-height: 0; }
.cl-wt-pic img { display: block; width: 100%; height: 100%; object-fit: contain; filter: url(#cl-washi); mix-blend-mode: multiply; }
.cl-wt-pic--gap { box-sizing: border-box; border: 1px dashed var(--cl-rule); border-radius: 3px; }
.cl-wt-w { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k5); line-height: 1.3; color: var(--color-jp-text, #2A231F); white-space: nowrap; }
.cl-wt-w i { font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-style: normal; font-size: var(--e3); color: var(--cl-quiet); margin: 0 0.25em; }
.cl-wt--set .cl-wt-w { font-size: calc(1.3 * var(--cl-u)); }
/* (the optional prefix, the owner's review of lesson 9, 19 October 2026: (お)父さん to (お)母さん outgrew a tile on one
   line and ran over its neighbour) a set tile's line parts between its two words, each word held whole */
.cl-wt--set .cl-wt-w { white-space: normal; }
.cl-wt-one { white-space: nowrap; }
.cl-wt-en { margin-top: 0.15rem; font-family: var(--cl-font-tell); font-size: calc(0.9 * var(--cl-u)); line-height: 1.35; color: var(--cl-quiet); }

/* the New words gate: the title and its hairline, the tiles, one quiet row for the asked words under a hairline */
.cl-gate--words .cl-gate-body { margin-top: calc(2.2 * var(--cl-u)); }
.cl-gate-asked {
    margin: calc(1.5 * var(--cl-u)) 0 0;
    padding-top: calc(0.9 * var(--cl-u));
    border-top: 1px solid var(--cl-rule);
    font-size: var(--e3);
    line-height: 1.6;
    color: var(--cl-quiet);
}
.cl-gate-asked-l { margin-right: 0.9em; }
.cl-gate-asked-w { font-family: var(--font-jp, 'Klee One', serif); font-size: calc(1.15 * var(--cl-u)); color: var(--color-jp-text, #2A231F); }
.cl-gate-asked-dot { margin: 0 0.45em; color: var(--cl-quiet); }

/* the Practice gate: one count line in the app's voice; the course's drawing keeps its seat at the column's right */
.cl-gate-count { margin: calc(0.7 * var(--cl-u)) 0 0; font-size: var(--e2); line-height: 1.5; color: var(--cl-ink-past); }
.cl-gate-artrow { display: flex; justify-content: flex-end; }

/* the close in two beats: every tier laid at mount and veiled, so nothing moves when beat 2 inks in, 120 ms apart */
.cl-close--beats .cl-b2 {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--cl-turn) var(--cl-ease-move), visibility 0s linear var(--cl-turn);
}
.cl-close--beats.cl-close--b2 .cl-b2 {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--cl-turn) var(--cl-ease-move) calc(var(--cl-tier, 0) * var(--cl-ink-step)),
                visibility 0s linear calc(var(--cl-tier, 0) * var(--cl-ink-step));
}
.cl-close.cl-close--p3 .cl-close5-en { font-family: var(--cl-font-tell); margin-top: 0.35rem; }
.cl-close.cl-close--p3 .cl-close5-words { margin-top: calc(1.2 * var(--cl-u)); }
/* (the owner's evening of 11 October 2026: the count line left the close; the held line prints only when a word
   slipped, standing where the count stood, the tomorrow line under it or under the tiles) */
.cl-close.cl-close--p3 .cl-close5-held { margin-top: calc(1 * var(--cl-u)); }
.cl-close.cl-close--p3 .cl-close5-tomorrow { margin-top: calc(0.7 * var(--cl-u)); }
.cl-close.cl-close--p3 .cl-close5-held + .cl-close5-tomorrow { margin-top: 0.35rem; }
.cl-close.cl-close--p3 .cl-close5-end { margin-top: calc(0.7 * var(--cl-u)); }
.cl-close.cl-close--p3 .cl-close5-bye { margin-top: calc(0.7 * var(--cl-u)); }
/* the close's tiles: the same tile, smaller, eight a row (mock m6: two rows hold lesson 5's fifteen) */
.cl-wtiles--close { column-gap: calc(0.7 * var(--cl-u)); row-gap: calc(0.9 * var(--cl-u)); }
.cl-wtiles--close .cl-wt-pic { width: calc(3.6 * var(--cl-u)); height: calc(3.6 * var(--cl-u)); margin-bottom: 0.3rem; }
.cl-wtiles--close .cl-wt-w { font-size: calc(1.15 * var(--cl-u)); }
.cl-wtiles--close .cl-wt--set .cl-wt-w { font-size: calc(0.95 * var(--cl-u)); }
.cl-wtiles--close .cl-wt-en { font-size: calc(0.75 * var(--cl-u)); line-height: 1.3; }
/* もう一度 Practise again, quiet, beside じゃ、また。 (初めから Start again left with the owner's evening of 11 October 2026;
   the dot stands between two presses, should a close carry two) */
#kotobaLesson .cl-close--p3 .cl-againrow { gap: 0; }
#kotobaLesson .cl-close--p3 .cl-againrow > * + *::before { content: '·'; margin: 0 0.75em; color: var(--cl-quiet); }
/* the seal: the mark in a terracotta ring with paper grain (the svg's own filter), settling 1.04 → 1.0 in 320 ms */
#kotobaLesson .cl-seal.cl-seal--p3 { transform: none; animation: cl-seal-settle var(--cl-t-ink) var(--cl-ease-move) both; }
#kotobaLesson .cl-stamp--rest .cl-seal.cl-seal--p3 { animation: none; }
.cl-seal--p3 .cl-seal-rim { stroke: var(--cl-seal-ink); stroke-width: 2.8; }
.cl-seal--p3 .cl-seal-k { fill: var(--cl-seal-ink); font-weight: 400; }
@keyframes cl-seal-settle {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}

/* the door: the night's painting (else the mark word's portrait) under the name and the mark since D58 (it stood beside
   them, where the mug stood); ⚖ its 3:2 seat left with D62 (the owner, 22 October 2026): the painting rests low left, a
   27-unit square on the strip's foot (the D58 block, below) */
.cl-door--v5 .cl-door-top--p3 .cl-door-mark { margin-top: calc(0.5 * var(--cl-u)); }
/* (the door's one line of parts and `Tomorrow: homework` left with the owner's evening of 11 October 2026) */

/* ══ D58 · THE VERSE: THE DOOR AND THE CLOSE (the owner, 22 October 2026) ══════════════════════════════════════════
   "I love your recommendation, except one minor detail: the stamps on each page should not be on the Japanese text;
   otherwise it feels perfect to me." (js doorP3HTML, renderCloseP3, verseStripHTML; CONTRACT §14.11 ¶7 and ¶9 as
   rewritten.) ONE GRID ON BOTH PAGES: the text at the left, the strip at the right, so the strip stands in the same
   place on the door and the close (the same origin, the same column, the same paper). THE STRIP: the verse written
   downward, right to left, each column a character lower, on a narrow sheet of the room's cream (one quiet surface,
   a hairline of sumi and a resting shadow, no texture), in Klee One, whose vertical forms carry 、。, the small kana and
   ー (its vert feature); its type steps down only where a long line (a model sentence standing in) would leave the
   paper. The door's ink is lighter (unread); the close inks it full as it arrives. THE SEAL is pressed under the
   English, at the foot of the text column, never on the strip.
   ⭐⭐ D62 · THE LAYOUT, ROUND TWO (the owner, 22 October 2026: "As for the door and close redraw, I love the proposal,
   let us implement."; the designer's round-two page; CONTRACT §14.11, the dated paragraph after ¶9). The same
   pieces, re-weighted on one grid with scale as its means: THE STRIP runs from the page's origin to one unit above the
   foot, 15 units wide, and the verse is written on it as on a tanzaku, each column beginning beside the last character
   of the one before (js verseStarts, --cl-vstart), at the glyph-row size (k3), stepping down only where its extent (the
   last column's start plus its length, --cl-verse-em) would leave the paper. On the door the name and the mark (at the
   word-head size, k2) hold the top left and THE PAINTING rests low left, a 27-unit square on the strip's foot, with no
   seat drawn round it; 始める Begin hangs under the strip in the foot as built. On the close THE GLOSS faces the strip in
   Literata at k5, each line at the height where its column begins, the replay chip and THE SEAL (5.4 units) under the
   last line, never on the Japanese, and 次 Next ends that column at its built height (the strip owns the right edge
   down to the foot now). The chrome stands as built; nothing runs past the glass at 1280x900 or 1680x1050. */
#kotobaLesson {
    --cl-strip-w: calc(15 * var(--cl-u));                      /* 255 px at 1280, 285 from 1600 */
    /* the page's origin to one unit above the foot: the glass less the foot, the origin and the seam (the foot's top is
       the chrome plus the glass less the foot on every glass, short or capped): 698 px at 1280x900, 839 at 1680x1050 */
    --cl-strip-h: calc(var(--cl-glass) - var(--cl-foot-h) - var(--cl-origin-page) - var(--cl-u));
    --cl-strip-pad: calc(1.6 * var(--cl-u));
    --cl-strip-gap: calc(2.4 * var(--cl-u));
    /* the verse unread: 薄墨 (usuzumi, "thin ink"), the quiet ink and opaque (the owner's call 10 of the design elevation,
       1 November 2026, over D58: at 42 per cent of the brown it printed 2.17:1, under the 3:1 a 52 px line needs; the
       quiet ink is 5.99:1 on the slip); the close inks it into the sumi (cl-verse-ink, below) */
    --cl-verse-door-ink: var(--cl-quiet);
}
.cl-stage > section.cl-close.cl-close--verse { padding-top: var(--cl-origin-page); }
/* (the strip ends one unit above the foot, so the two pages keep no paper under it: the stage's 2.6rem and the room's
   foot are the floor, and 5.4rem would scroll the door 20 px at 1280x900) */
.cl-stage > section.cl-door:has(> .cl-verse-page),
.cl-stage > section.cl-close.cl-close--verse { padding-bottom: 0; }
#kotobaLesson .cl-verse-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cl-strip-w);
    column-gap: var(--cl-strip-gap);
    align-items: start;
}
#kotobaLesson .cl-door-top--p3.cl-verse-page > .cl-door-text {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: var(--cl-strip-h);                                 /* the strip's own length: the painting stands on its foot */
}
.cl-door--v5 .cl-door-top--p3 .cl-door-mark-k { font-size: var(--k2); }   /* the word-head size: 75 px at 1280, 84 at 1680 */
.cl-door--v5 .cl-door-top--p3 .cl-door-mark { margin-bottom: var(--cl-air-in); }
/* the painting: a 27-unit square (459 px at 1280, 513 at 1680), contained, left and bottom, resting on the strip's foot;
   it gives way only where a long name would reach it (the text column's flex), never past the name and the mark */
#kotobaLesson .cl-door-top--p3 .cl-door-portrait.cl-door-seat {
    flex: 0 1 auto;
    width: min(calc(27 * var(--cl-u)), 100%);
    height: calc(27 * var(--cl-u));
    min-height: 0;
    margin-top: auto;
}
#kotobaLesson .cl-door-top--p3 .cl-door-seat img { object-position: left bottom; }
.cl-verse-strip {
    grid-column: 2;
    grid-row: 1;
    box-sizing: border-box;
    width: var(--cl-strip-w);
    height: var(--cl-strip-h);
    padding: var(--cl-strip-pad) 0;
    display: flex;
    justify-content: center;
    background: var(--cl-sheet);
    border-radius: 2px;
    box-shadow: var(--cl-slip-rest);   /* the elevation: a slip lighter than the page, told by its shadow; its ring went */
}
/* the verse's size: the glyph-row size (k3: 49 px at 1280, 55 at 1680), or the strip's inner length over its extent where
   that is smaller (lesson 1's count, 39.7 px at 1280; a model sentence of sixteen standing in, 37.2), declared where the
   extent is written (the strip; on the close the page too, whose English stands at the columns' heights) */
#kotobaLesson .cl-verse-page,
#kotobaLesson .cl-verse-strip {
    --cl-verse-fs: min(var(--k3), calc((var(--cl-strip-h) - 2 * var(--cl-strip-pad)) / (1.08 * var(--cl-verse-em, 6))));
}
.cl-verse {
    margin: 0;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: var(--cl-verse-fs);
    line-height: 1.3;
    letter-spacing: 0.06em;
    color: var(--color-jp-text, #2A231F);
}
/* each column begins beside the last character of the one before (--cl-vstart, in characters: 0, 3, 7 for lesson 11) */
.cl-verse-col { margin: 0; padding-top: calc(var(--cl-vstart, 0) * 1.06em); }
.cl-verse-col + .cl-verse-col { margin-right: 0.32em; }        /* the column before stands at the right */
.cl-verse-strip--door .cl-verse { color: var(--cl-verse-door-ink); }
.cl-verse-strip--close .cl-verse { animation: cl-verse-ink var(--cl-t-ink-long) var(--cl-ease-move) both; }
@keyframes cl-verse-ink {
    from { color: var(--cl-verse-door-ink); }
    to   { color: var(--color-jp-text, #2A231F); }
}
/* the close's text column: the English beside the strip, the replay chip, the seal at its foot, flush to the strip's side */
.cl-verse-side {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    text-align: right;
}
/* the English faces the strip: every line in the one cell, each pushed to the height where its column begins and centred
   on that column's first character (y 128, 285, 494 at 1280), so the cell ends with the lowest line, wrapped or not, and
   the chip and the seal follow it */
.cl-verse-gloss { display: grid; justify-items: end; }
.cl-verse-en {
    grid-area: 1 / 1;
    align-self: start;
    margin: calc(var(--cl-strip-pad) + var(--cl-vstart, 0) * 1.06 * var(--cl-verse-fs) + (1.06 * var(--cl-verse-fs) - 1.4 * var(--k5)) / 2) 0 0;
    max-width: 100%;
    font-family: var(--cl-font-tell);
    font-size: var(--k5);                                      /* Literata 27 px at 1280, 30 at 1680 */
    line-height: 1.4;
    color: var(--cl-ink-past);
    text-wrap: balance;
}
.cl-verse-hear { margin-top: calc(0.8 * var(--cl-u)); line-height: 0; }
/* (at the close's own weight: the v5 close's seal rule, .cl-close--v5 .cl-close5-seal, held it 0.2rem under the chip) */
.cl-close.cl-close--verse .cl-verse-seal { margin-top: calc(1.4 * var(--cl-u)); line-height: 0; }
#kotobaLesson .cl-verse-seal .cl-stamp { margin: 0; }
#kotobaLesson .cl-verse-seal .cl-seal.cl-seal--p3 { width: calc(5.4 * var(--cl-u)); height: calc(5.4 * var(--cl-u)); }   /* 92 px at 1280, 103 at 1680 */
/* the seal presses with beat 2, on its own tier (it waited, veiled, through beat 1); a seal pressed before rests */
#kotobaLesson .cl-close--beats .cl-verse-seal .cl-seal.cl-seal--p3 { animation: none; }
#kotobaLesson .cl-close--beats.cl-close--b2 .cl-verse-seal .cl-seal.cl-seal--p3 {
    animation: cl-seal-settle var(--cl-t-ink) var(--cl-ease-move) calc(var(--cl-tier, 0) * var(--cl-ink-step)) both;
}
#kotobaLesson .cl-close--beats.cl-close--b2 .cl-verse-seal .cl-stamp--rest .cl-seal.cl-seal--p3 { animation: none; }
/* 次 Next · the next lesson's title: one quiet line standing on the foot, at its built height (y 774 at 1280, 919 at
   1680); since D62 it ends the text column, under the seal (the strip owns the right edge down to the foot) */
#kotobaLesson .cl-stage .cl-verse-next {
    position: fixed;
    z-index: 3;
    left: 0;
    right: var(--cl-sbw, 0px);
    bottom: calc(max(2.6rem, calc(100vh - var(--cl-chrome-h, 4.6rem) - var(--cl-glass))) + var(--cl-foot-h) + 0.9rem);
    box-sizing: border-box;
    width: var(--cl-col);
    margin: 0 auto;
    padding-right: calc(var(--cl-strip-w) + var(--cl-strip-gap));
    text-align: right;
    font-size: var(--e3);
    line-height: 1.4;
    color: var(--cl-quiet);
    pointer-events: none;
}
.cl-verse-next [lang="ja"] { font-family: var(--cl-font-chrome-jp); color: var(--color-jp-text, #2A231F); }
.cl-verse-next i { font-style: normal; margin-left: 0.4em; }
.cl-verse-next-dot { margin: 0 0.55em; }
.cl-verse-next-t { font-family: var(--cl-font-tell); color: var(--cl-ink-past); }
@media (max-width: 768px) {
    #kotobaLesson { --cl-strip-h: min(calc(27 * var(--cl-u)), calc(var(--cl-glass) - 14 * var(--cl-u))); }
    #kotobaLesson .cl-verse-page { grid-template-columns: minmax(0, 1fr); row-gap: var(--cl-air-in); }
    .cl-verse-strip { grid-column: 1; grid-row: 1; justify-self: center; }
    #kotobaLesson .cl-door-top--p3.cl-verse-page > .cl-door-text, .cl-verse-side { grid-column: 1; grid-row: 2; justify-self: stretch; align-items: center; text-align: center; }
    #kotobaLesson .cl-door-top--p3.cl-verse-page > .cl-door-text { height: auto; }
    #kotobaLesson .cl-door-top--p3 .cl-door-portrait.cl-door-seat { margin-top: 0; }
    .cl-verse-gloss { justify-items: center; }
    #kotobaLesson .cl-stage .cl-verse-next { padding-right: 0; }
}

/* the type rule on the chrome these pages carry (C's ASK 4): the door's parts line and the close's quiet presses */
#kotobaLesson.cl-framed .cl-dc [lang="ja"],
#kotobaLesson.cl-framed .cl-practise [lang="ja"],
#kotobaLesson.cl-framed .cl-again [lang="ja"],
#kotobaLesson.cl-framed .cl-hwpress [lang="ja"] { font-family: var(--cl-font-chrome-jp); }

@media (prefers-reduced-motion: reduce) {
    .cl-close--beats .cl-b2, .cl-close--beats.cl-close--b2 .cl-b2 { transition: none; }
    #kotobaLesson .cl-seal.cl-seal--p3 { animation: none; }
    #kotobaLesson .cl-close--beats.cl-close--b2 .cl-verse-seal .cl-seal.cl-seal--p3, .cl-verse-strip--close .cl-verse { animation: none; }
}

/* ══ ROUND B · B4 · THE HOMEWORK'S END AS A KEEPSAKE (11 October 2026) ═══════════════════════════════════════════
   REPORT §5.4 "The homework's end"; PLAN §2 row B4; CONTRACT §14.11 ¶8 (js renderHomeworkEnd). What was read stands
   as a quiet column, one place tag a piece in the content's face; a piece to look at again is a press in the accent,
   a hairline on hover (colour only, no lift); `Lesson 15 waits in the hall.` in the app's voice before the way out.
   The screen starts on the seat the homework pieces stand on (the workbook's seat), so twelve tags (ten pieces and
   two re-reads), the lines and 戻る Back to the hall stand on one glass at 1280 x 900 and at 1680 x 1050. */
#kotobaLesson .cl-stage > section.cl-set.cl-hw--end {
    padding-top: max(var(--cl-origin-page), min(var(--cl-origin-ask), calc(var(--cl-glass) - 42.5 * var(--cl-u))));
}
.cl-hw-read { list-style: none; margin: 0 0 var(--cl-air-in); padding: 0; }
.cl-hw-readtag { margin: 0; font-family: var(--cl-font-tell); font-size: var(--e3); line-height: 1.7; color: var(--cl-quiet); }
/* (the app's global button is a raised white box with a shadow; this press is a word in its sentence) */
#kotobaLesson .cl-hw-again {
    appearance: none;
    display: inline;
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: var(--cl-accent);
    cursor: pointer;
    text-decoration: underline 1px transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
#kotobaLesson .cl-hw-again:hover { background: none; box-shadow: none; text-decoration-color: currentColor; }
#kotobaLesson .cl-hw-again:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
.cl-hw-next { margin: var(--cl-air-in) 0 0; font-size: var(--e2); line-height: 1.5; color: var(--cl-ink); }
/* the one-screen law when most pieces slipped (js fitHomeworkEnd): the column and the lines close up and the way out
   stands nearer, never a scroll */
.cl-hw--tight .cl-hw-end1 { margin-bottom: calc(0.6 * var(--cl-u)); }
.cl-hw--tight .cl-hw-read { margin-bottom: calc(0.6 * var(--cl-u)); }
.cl-hw--tight .cl-hw-readtag { line-height: 1.4; }
.cl-hw--tight .cl-hw-end2 { line-height: 1.35; }
.cl-hw--tight .cl-hw-back { margin-top: var(--cl-air-in); }

/* ══ ROUND B · B5 · PRACTICE'S RHYTHM (11 October 2026) ═══════════════════════════════════════════════════════════
   PLAN §2 row B5; REPORT §5.5; CONTRACT §14.11 ¶10 (js oneDressHeadHTML, startBreath). The part's one line, in the
   tags' dress, stands in the slot the ONCE MORE tag takes on a comeback, inside the head's 3.6 units, so the anchor
   under it holds. The breath between two parts (MOTION.breath, 600 ms): the next part's first item is laid in its
   seats and held invisible while the frame and its foot stand, a pause and no motion; then it arrives on the turn's
   own clock. Reduced motion keeps the pause (the clock is the runner's) and arrives on the house's cross-fade. */
#kotobaLesson .cl-wb-one .cl-wb-part { margin: 0 0 0.55rem; line-height: 1; }
#kotobaLesson .cl-stage > section.cl-set--wb.cl-set--breath > .cl-item { visibility: hidden; opacity: 0; }
#kotobaLesson .cl-stage > section.cl-set--wb.cl-set--breathed > .cl-item { transition: opacity var(--cl-turn) var(--ease-brush, ease); }

/* ══ ROUND C · ONE DRAWER FOR ANY WORD OR KANJI (the owner's items 11 and 12, 11 October 2026) ═══════════════
   docs/course_v2/reviews/elevate_2026-10-09/ROUND_C_DRAWER.md §2 and §4. Every word and kanji the course has shown
   opens its card in the one side panel (js/course-book.js), hover opening it, a press pinning it. A word laid as a
   door INTO a printed line (.cl-dr: a settled item's sentence, the close's model sentence) wears the token's grammar,
   the hover and press rules above: no rule at rest, the indigo rule under the pointer, and nothing that takes a box
   (no padding, no border, no nowrap: the line breaks where it broke before it opened). A word printed bare that opens
   (data-cl-door: a record's word, a build's word, a meaning ask's word, an order's piece, a board's word, a margin
   note's word, a close's tile, a glyph in the character's aside) takes the pointer and the indigo ink under it, ink
   alone; a disabled tile or option (a board's matched pair, a look-back's options) opens by hover and keeps its own
   dress and cursor. No new colour, no new copy. */
.cl-dr {
    cursor: pointer;
    text-decoration-line: none;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    text-decoration-skip-ink: none;
    transition: color var(--duration-fast, .15s) var(--ease-settle, ease),
                text-decoration-color var(--duration-fast, .15s) var(--ease-settle, ease);
}
.cl-settled-w[data-cl-door], .cl-settled-r[data-cl-door], .cl-wb-word[data-cl-door], .cl-mean-word[data-cl-door],
.cl-seat[data-cl-door], .cl-mn-w[data-cl-door], .cl-wt[data-cl-door],
.cb-tell-part-g[data-cl-door], .cb-alike-k[data-cl-door] {
    cursor: pointer;   /* (no transition of its own: a record still inking keeps the one it has) */
}
.cl-settled-w[data-cl-door]:hover, .cl-settled-r[data-cl-door]:hover, .cl-wb-word[data-cl-door]:hover,
.cl-mean-word[data-cl-door]:hover, .cl-seat[data-cl-door]:hover, .cl-mn-w[data-cl-door]:hover,
.cl-wt[data-cl-door]:hover .cl-wt-w {
    color: var(--cl-accent);
}
/* (the aside lives on <body>, outside the room: the book's own token, css/course-book.css --cb-accent) */
.cb-tell-part-g[data-cl-door]:hover, .cb-alike-k[data-cl-door]:hover {
    color: var(--cb-accent, #3D5A80);
}
.cl-wt[data-cl-door]:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }

/* ⚖ 24 October 2026, 04:40 (D65; the owner, of the warm-up beside an example page: "how about we align font size and style;
   make as aligned as possible with the example sentences"): EVERY SENTENCE A LEARNER READS IN THE EXAMPLE SENTENCE'S DRESS.
   A homework piece's and the warm-up's lines take the example page's size and leading (k4 at 1.9, not the leaf's k5 at
   1.95), a reading over a word its one quiet ink at 0.44 em, the English under a line the example's Literata at its size,
   1.55 leading, half a rem under the line, and a Practice or Review sentence settled in its record the same leading. No new
   ink for a kana word (the owner, 05:12). (Was: the leaf's line, k5 at 1.95, its English in the UI face at e3.) The fit
   law's gives stand under it, restated at its weight, since a rule under the lesson's id outranks the gives' classes: a
   folded frame's lines at a pitch of 1.5 (P8, fix round 2, 28 September 2026: the fold is how a sign, a short window and
   a warm-up step that ran past the glass fit), a sign's labels set close at 1.55 (lesson 5's walk, 9 October 2026), and a
   folded frame's one caption in its own seat, no margin, at 1.4 (the caption seat of section 2's media, 28 September
   2026). */
#kotobaLesson .cl-read-line, #kotobaLesson .cl-page--warm .cl-line, #kotobaLesson .cl-warm .cl-line { font-size: var(--k4); line-height: 1.9; }
#kotobaLesson .cl-read-line .cl-guest rt, #kotobaLesson .cl-read-line ruby rt { font-size: 0.5em; font-weight: 600; color: var(--cl-quiet); letter-spacing: 0.02em; }
#kotobaLesson .cl-read-en { font-family: var(--cl-font-tell); font-size: var(--e2-tell); line-height: 1.55; color: var(--cl-quiet); margin: 0.5rem 0 0.5rem; }
#kotobaLesson .cl-record-body .cl-sent--settled [lang="ja"] { line-height: 1.9; }
#kotobaLesson .cl-read--fold .cl-read-line { line-height: 1.5; }
#kotobaLesson .cl-page-lines.cl-read-sign .cl-line { line-height: 1.55; }
#kotobaLesson .cl-read-en.cl-read-cap { margin: 0; line-height: 1.4; }

/* ⚖ 24 October 2026, 04:55 and 05:05 (D65; the owner, of the warm-up's exchange: "make A and B same style too and align them
   accordingly"; then "they still seem to be small and not aligned with the text to the right"): THE SPEAKER'S LETTER IN THE
   LINE'S OWN FACE AND SIZE. A and B print in Klee One at k4 on the line's leading, a plain capital in the quiet ink, so the
   letter stands level with the line's kana and stays second to its words, in a column 1.3 × k4 wide before the line, on its
   first baseline; no colon after it (the owner, 05:10). On a folded frame the letter keeps the folded line's pitch, so its
   row is no taller than the line, and the folded caption's own letters stay the micro-label beside its English. (Was, since
   23 October 2026: the chrome's micro-label, Inter at e4, tracked, in a column 1.1 × k5: .cl-spk above.) */
#kotobaLesson .cl-read-turn > .cl-spk { flex-basis: calc(1.3 * var(--k4)); font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k4); font-weight: 400; letter-spacing: 0; text-transform: uppercase; line-height: 1.9; color: var(--cl-quiet); }
#kotobaLesson .cl-read--fold .cl-read-turn > .cl-spk { line-height: 1.5; }

/* ⭐⭐ THE PRACTICE ITEM AFTER CHECK (the owner, 24 October 2026, on the Practice demo, docs/course_v2/reviews/
   practice_demo_2026-10-24/REPORT.md: "All the other proposals I agree too!"; js: the dealer's picks above dealWorkbookItem).
   Every seat below is laid at mount and veiled where it waits ([data-veil], D64), so nothing moves at the answer. */
/* THE ONE RULE FOR THE SOUND BUTTON: the speaker belongs to the Japanese it voices. The sentence's speaker rides the end of
   its own line (js lineOtoHTML) in the example page's dress: the bare glyph in the quiet ink, the house gap before it (half
   the line's em), hung past the last glyph by a right margin as wide as its gap and glyph, so it never takes a line of its
   own and never stands beside the English; its box fixed and contained (the ear's box is its own, 20 October 2026). It
   waits veiled where the sound is the answer, and blooms with the record (js inkWithRecord). */
#kotobaLesson .cl-gapline > .cl-line-oto {
    contain: size layout;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    margin: 0 calc(-0.5em - 1.2rem) 0 0.5em;
    vertical-align: middle;
    border: 0;
    border-radius: 3px;
    background: none;
    box-shadow: none;
    color: var(--cl-quiet);
}
#kotobaLesson .cl-gapline > .cl-line-oto .cl-chip-i { width: 1.2rem; height: 1.2rem; }
#kotobaLesson .cl-gapline > .cl-line-oto:hover,
#kotobaLesson .cl-gapline > .cl-line-oto.cl-chip--on,
#kotobaLesson .cl-gapline > .cl-line-oto.cl-disc--on { color: var(--color-jp-text, #2A231F); background: none; box-shadow: none; border: 0; }
#kotobaLesson .cl-gapline > .cl-line-oto:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* the word's speaker beside the big word ("How do you say this word?", arrangement 1): the inline disc the word page sets
   beside its headword, a gap of 0.75 rem, held until the answer; the gloss stands alone under the word */
#kotobaLesson .cl-wb-word { white-space: nowrap; }
#kotobaLesson .cl-wb-word > .cl-wb-oto { display: inline-flex; vertical-align: middle; margin-left: 0.75rem; }
/* a seat laid away from its record blooms with it, as the record's own lines do */
#kotobaLesson [data-with-record]:not([data-veil]) { animation: cl-unfold 320ms var(--ease-brush, ease) both; }
/* THE ANSWER ROW (the marked word, arrangement 2): the word's portrait at the row's left at the frame head's size, multiplied
   onto the paper as every small portrait of the room is, its seat's ground the paper (the record's lines arrive on an
   opacity animation, which makes the row its own compositing group: multiplied against nothing, the portrait printed a
   white square, the kanji pictures' lesson of 24 September 2026); the sentence's English under the row in the list's
   Literata, quiet, on the prose measure. A check slip's reading, hung under its word, steps past the portrait. */
#kotobaLesson .cl-settled-row > .cl-settled-pic { display: block; flex: none; align-self: center; width: 2.75rem; height: 2.75rem; line-height: 0; background: var(--cl-paper); }
#kotobaLesson .cl-settled-pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: url(#cl-washi); mix-blend-mode: multiply; }
#kotobaLesson .cl-settled--slip .cl-settled-row:has(> .cl-settled-pic) > .cl-settled-r { left: calc(2.75rem + 0.9rem); }
#kotobaLesson .cl-record > .cl-settled-en {
    margin: 0.5rem 0 0;
    max-width: calc(34 * var(--cl-u));
    font-family: var(--cl-font-tell);
    font-size: var(--e3);
    line-height: 1.5;
    color: var(--cl-quiet);
}
/* the list under a Practice sentence is followed by the tiles, which take the air the English line used to bring them
   (the owner: "[the] english gloss row is almost touching [the] footer"; "Which kanji?"'s last row touched its tiles) */
#kotobaLesson .cl-set--wb .cl-item > .cl-wl + .cl-hand { margin-top: 1.5rem; }
/* THE OPPOSITES MATCH (arrangement 1): THE TILES CARRY THE REVEAL. Each tile its word, then its reading and its meaning in a
   lighter ink of the tile's own, their room held from mount and veiled until the last pair is made; the pair's two tiles
   face each other across the board; nothing prints below the board but a miss's why. The record that rings the reveal's
   beat stands in the board's left margin, empty and as tall as the board: a match that came back and was answered wears its
   gold seam beside the whole board (.cl-settled--recovered::before). */
#kotobaLesson .cl-match { position: relative; }
#kotobaLesson .cl-match > .cl-record--pairs { position: absolute; left: 0; top: 0; bottom: 0; width: 0; margin: 0; padding: 0; display: block; }
#kotobaLesson .cl-match-w, #kotobaLesson .cl-match-rv, #kotobaLesson .cl-match-r, #kotobaLesson .cl-match-g { display: block; }
#kotobaLesson .cl-match-r { margin-top: 0.2rem; font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k6); line-height: 1.2; font-weight: 400; opacity: 0.78; }
#kotobaLesson .cl-match-g { font-family: var(--cl-font-tell); font-size: var(--e3); line-height: 1.3; font-weight: 400; white-space: normal; opacity: 0.72; }
/* THE ORDER ITEM'S LIST stands last in the item, under the hand (js layOrderWords), so it keeps one unit of air above the
   fixed foot inside its own box, which the station's give measures (fitHomeworkList, yieldAir): its last row never sits on
   the foot (the owner: "[the] english gloss row is almost touching [the] footer") */
#kotobaLesson .cl-set--wb .cl-item--order > .cl-wl { padding-bottom: var(--cl-u); }
/* THE ORDER ITEM: a guest's reading floats over its untaught run, on its tile and on the seat that holds it (js rubyOn: the
   gap's own trick, never <ruby>, which would grow the box and move the seats); every tile of a rack that carries one takes
   the reading's room above its glyphs, so the row keeps one height; a seated tile leaves its socket, its reading with it */
#kotobaLesson .cl-rack--ruby .cl-tile { padding-top: calc(0.6rem + 0.55em); }
#kotobaLesson :is(.cl-tile, .cl-seat)[data-rt] { position: relative; }
#kotobaLesson .cl-tile[data-rt] { --cl-rt-g: var(--k4); }
#kotobaLesson .cl-seat[data-rt] { --cl-rt-g: var(--k4); }
#kotobaLesson .cl-built--order .cl-seat[data-rt] { --cl-rt-g: var(--k5); }
#kotobaLesson :is(.cl-tile, .cl-seat)[data-rt]::before {
    content: attr(data-rt);
    position: absolute;
    left: 50%;
    top: 0.3rem;
    width: calc(var(--cl-rt-n, 1) * var(--cl-rt-g));
    margin-left: calc((var(--cl-rt-at, 0) - var(--cl-rt-len, 1) / 2) * var(--cl-rt-g));
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: calc(0.42 * var(--cl-rt-g));
    line-height: 1;
    font-weight: 600;   /* (U-051: the readings' one cut) */
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    color: var(--cl-quiet);
    pointer-events: none;
}
#kotobaLesson .cl-seat[data-rt]::before { top: 0; }
#kotobaLesson .cl-tile--used[data-rt]::before { visibility: hidden; }

/* ══ THE DEEP REVIEW, ROUND 2 ON THE RUNNER (seat R5, 26 October 2026; build/CONTRACT.md §5) ═════════════════════════
   ⭐⭐ U-085: A REVIEW'S MEANING ASK IS A PAGE OF THE BOOK (the owner's item 22 of 30 September, "most of the space is
   empty ... why would not we make image larger and make word appear less of a second citizen", carried to the one screen
   it never reached, dealt up to twelve times at the top of every lesson; js dealMeaningAsk, askBookHTML). The ask stands
   on the example page's grid (.cl-card--expage): the text column at the left, the portrait's seat at the right, its right
   edge the column's, one gap between them (2.2 units, the page's own), the block a little above the glass's middle as the
   example page's is. The question is the word's eyebrow, quiet (the asks' one dress); the word at the word page's head
   size (k2: 75 px at 1280, 84 at 1680) at the top of the text column; the answer row's seat right under it (the reading,
   the meaning, the speaker: veiled until the answer); the three options stacked in the column as the Reading check
   stacks its own; the miss line's seat under them. The seat is the word page's portrait (.cl-card--p3: 17.5 units, 297 px
   at 1280, 332 at 1680), 1:1, EMPTY at rest (rule 37: nothing answers before the attempt), the confirm portrait inking
   into it with the record, its top the word's; an ask with no portrait (its one more go) keeps the seat as quiet paper.
   Nothing moves on the settle: every seat is laid at mount and held, and the options' ink goes with their seats kept
   (R6, .cl-opt--gone). A pick ask, a comeback and the card's own asks keep their page (the second slice). ── */
#kotobaLesson .cl-stage > section.cl-set.cl-ask5--book,
#kotobaLesson.cl-framed .cl-stage > section.cl-set.cl-set--wb.cl-ask5--book { padding-top: 0; }
#kotobaLesson .cl-ask5--book {
    --cl-askseat: calc(17.5 * var(--cl-u));
    --cl-askbook-gap: calc(2.2 * var(--cl-u));
    /* the seat's top where the example page's painting stands (--cl-expage-top's law, for a seat this tall) */
    --cl-askbook-top: max(1.5rem, calc((var(--cl-glass) - var(--cl-foot-h, 0px) - var(--cl-askseat)) / 2 - 2.5 * var(--cl-u) - var(--cl-askbook-give, 0px)));
}
#kotobaLesson .cl-stage > section.cl-ask5--book > .cl-item.cl-askbook {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cl-askseat);
    grid-template-rows: minmax(var(--cl-askbook-top), auto) var(--cl-askseat) auto;
    column-gap: var(--cl-askbook-gap);
    align-items: start;
}
#kotobaLesson .cl-askbook > .cl-askbook-head { grid-column: 1; grid-row: 1; align-self: end; min-width: 0; }
#kotobaLesson .cl-askbook > .cl-askbook-text { grid-column: 1; grid-row: 2 / 4; min-width: 0; }
#kotobaLesson .cl-askbook > .cl-askseat { grid-column: 2; grid-row: 2; width: var(--cl-askseat); height: var(--cl-askseat); }
/* the eyebrow: the one-dress question (quiet Inter, 1 unit) a step over the word, with no box of its own to fill */
#kotobaLesson .cl-askbook .cl-wb-head.cl-wb-one { min-height: 0; margin: 0 0 calc(0.6 * var(--cl-u)); }
/* the word at the word page's head size, its box's top the seat's */
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-mean-word { margin: 0; font-size: var(--k2); line-height: 1.15; }
/* the answer row right under the word, its seat held from the first frame; on one line where it can be: a long meaning
   wraps in its own column and the speaker stays at the line's end (so its held seat at rest is one line, not two) */
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-record--word { margin-top: calc(0.4 * var(--cl-u)); }
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-record--word > .cl-settled-row { flex-wrap: nowrap; }
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-record--word > .cl-settled-row > * { flex: none; }
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-record--word > .cl-settled-row > .cl-settled-g { flex: 0 1 auto; min-width: 0; }
/* the miss line's promise ("学生 comes back next lesson.") runs on after the tell as everywhere, but never parts inside itself
   in the column's narrower measure: where the tell's last line has no room for it, it takes the next line whole */
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-verdictnote .cl-comeback--run { white-space: nowrap; }
/* the options stacked in the text column, as the Reading check stacks its own: one width, the meaning in the book's face */
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-mean5-opts {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0.5rem; max-width: none;
    margin-top: calc(1.4 * var(--cl-u));
}
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-mean5-opts > .cl-mean-o {
    max-width: none; min-height: 0;
    padding: 0.5rem 0.9rem;
    text-align: left;
}
/* the seat: the portrait whole, in the word page's ink dress (.cl-kpic--ink), inking in as a painting does */
#kotobaLesson .cl-askseat > .cl-kpic { width: 100%; height: 100%; max-width: none; flex: none; margin: 0; }
#kotobaLesson .cl-askseat:not([data-veil]) > .cl-kpic { animation: cl-unfold var(--cl-t-ink-long) var(--ease-brush, ease) both; }
/* (at phone width the page stacks, out of the desktop scope: the seat under the column) */
@media (max-width: 768px) {
    #kotobaLesson .cl-stage > section.cl-ask5--book > .cl-item.cl-askbook { display: block; }
    #kotobaLesson .cl-askbook > .cl-askseat { width: min(100%, 60vw); height: auto; aspect-ratio: 1; margin-top: var(--cl-air-in); }
    #kotobaLesson .cl-askbook > .cl-askseat.cl-askseat--bare { display: none; }
}

/* ══ THE DEEP REVIEW, ROUND 3, BUILD A (seat R1, 27 October 2026; build/ROUND3_CONTRACT.md §1) ═════════════════════════
   ⭐⭐ U-004: THE REVIEW ASKS ITS WORD TWICE ON ONE PAGE, its sound and then its meaning (the owner's "yes i agree" of 26
   October; js dealMeaningAsk, soundPickOf, soundSettle). On the book page of a Review meaning ask (U-085) the eyebrow asks
   "How do you say this word?"; under the answer row stands the SOUND beat, the word's reading and two readings of other
   words of its source lesson as the Drills' kana tiles (.cl-rack--kana), one row; under it the MEANING beat, its question in
   the asks' one dress (quiet Inter, e2) over the three options stacked as before, laid at mount and veiled (its seat held),
   inked as the sound settles. The sound's kana lose their ink as it settles, their seats kept (R6's law: the reading said
   once, in the row), a wrong pick standing in the stone wash; the row inks its reading then, its meaning and its speaker
   with the meaning beat. Nothing moves; reduced motion lands every state at once (the stylesheet's own rule). ── */
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-askbeat--s { margin-top: calc(1.4 * var(--cl-u)); }
/* the kana a size under the Drills' own (k5, what is read), the tile's box and its marks as theirs, so three readings stand
   in one row in the book page's column (430 px at 1280, 480 at 1680; at k4 three readings of four kana ran 505 px and the
   third wrapped); a rack of five kana or more a size further (k6, cl-askbeat--long) */
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-askbeat--s .cl-tile { font-size: var(--k5); }
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-askbeat--s.cl-askbeat--long .cl-tile { font-size: var(--k6); }
#kotobaLesson .cl-askbeat--s .cl-tile.cl-opt--gone {
    border-color: transparent;
    background: none;
    color: transparent;
    box-shadow: none;
    pointer-events: none;
    transition: color var(--cl-t-ink) var(--ease-settle, ease),
                border-color var(--cl-t-ink) var(--ease-settle, ease),
                background-color var(--cl-t-ink) var(--ease-settle, ease);
}
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-askbeat--m { margin-top: calc(1.2 * var(--cl-u)); }
#kotobaLesson .cl-askbeat--m > .cl-askbeat-q {
    margin: 0;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e2);
    font-weight: 400;
    line-height: 1.45;
    color: var(--cl-ink-past);              /* the stone, a step over the quiet ink it settles to (J2-02, below) */
}
#kotobaLesson .cl-stage > section.cl-ask5--book .cl-askbeat--m > .cl-mean5-opts { margin-top: calc(0.6 * var(--cl-u)); }
/* ⭐ 28 October 2026 (the lead's ruling on E1-05 and J2-02, to the letter of §1): the meaning beat's question stands inked from
   the start and its OPTIONS alone wait veiled (their seat held), inking as the sound settles; once the meaning is answered the
   question stays in its seat and dims as every answered ask does (askDone, CR-2), one step under the asks' quiet ink (the
   alpha of the stations ahead, U-062: no third hue), so after both beats it reads as answered, not as a question over three
   empty seats. Ink, never geometry. ⭐ The design elevation (1 November 2026, the owner's call 10): the stations ahead left
   their alpha for the quiet ink at AA, and this dim, which borrowed it, follows: an answered question stands in the quiet
   ink, opaque (at 58 per cent it printed 2.5:1). ⭐ The review round (the same day): the step stays without a fade, one
   ink down the ladder: the question rests in the stone (8.3:1) and settles to the quiet ink (5.75:1) once answered, the
   way every answered ask steps down (askDone: the ink to the stone), so it still reads as answered.
   ⭐ I18 (言わぬが花, the owner's yes of 1 November 2026): ONE QUESTION AT A TIME. The question no longer stands from the start:
   it waits veiled in its own seat with its options and inks in with them as the sound settles (js dealMeaningAsk). */
#kotobaLesson .cl-askbeat--m > .cl-askbeat-q:not([data-veil]),
#kotobaLesson .cl-askbeat--m > .cl-mean5-opts:not([data-veil]) { animation: cl-unfold var(--cl-t-ink) var(--ease-settle, ease) both; }
#kotobaLesson .cl-askbeat--m > .cl-askbeat-q.cl-ask--done { color: var(--cl-quiet); }
/* ⭐ SAID ONCE (the owner, 6 November 2026, of lesson 26's Review: "'what does it mean' shall it be removed after correct
   answer?"): once none of its options is left standing (a right answer: the row under the word prints the meaning), the
   meaning question's ink goes with theirs, on their clock (.cl-opt--gone's), its seat kept: ink, never geometry. A miss whose
   pick stands crossed keeps its question, dimmed, above it (js markMeanOpts). */
#kotobaLesson .cl-askbeat--m > .cl-askbeat-q.cl-askbeat-q--gone {
    color: transparent;
    transition: color var(--cl-t-ink) var(--ease-settle, ease);
}

/* ══ THE DEEP REVIEW, ROUND 3, BUILD A (seat R2, 27 October 2026; build/ROUND3_CONTRACT.md §1) ═════════════════════════
   ⭐⭐ U-022: ONE BARE SPEAKER GLYPH AT THE END OF THE JAPANESE IT VOICES, the same size in the same seat on every screen
   that voices Japanese (the owner's "YES, the one pass" of 26 October; R65: "the speaker belongs to the Japanese it voices,
   at that line's end, never beside the English"; js otoTailHTML, lineOtoHTML, signOtoHTML): the speaker cut in the quiet
   ink, no ring and no paper, its box fixed at 1.2 rem and contained (the ear's box is its own, 20 October 2026), in the
   house gap after the line's last glyph and hung past it (a right margin as wide as its gap and glyph: it never takes a
   line of its own); a hover, or its own voice, inks it in the brush brown, a focus rings it. The Reading's pieces and the
   warm-up's steps hold its seat at each line's end, so a line that fills its column never hangs it over the painting at
   the corner; a sign takes ONE at its frame's corner for the whole sign (one speaker, one take: R66); a record row (the
   Review's, the Drills') sets it after its Japanese in the row's own gap; the word page's hero line after its last glyph,
   at a reading line's gap. The ringed chip after the English is retired from every one of them. The close keeps its chip
   in the English column (R75); ?close=foot lays the variant at the foot of the verse strip, for the owner's pick. ── */
#kotobaLesson .cl-oto-bare {
    contain: size layout;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    margin: 0 calc(-0.5em - 1.2rem) 0 0.5em;
    vertical-align: middle;
    border: 0;
    border-radius: 3px;
    background: none;
    box-shadow: none;
    color: var(--cl-quiet);
}
#kotobaLesson .cl-oto-bare .cl-chip-i { width: 1.2rem; height: 1.2rem; }
#kotobaLesson .cl-oto-bare:hover,
#kotobaLesson .cl-oto-bare.cl-chip--on,
#kotobaLesson .cl-oto-bare.cl-disc--on { color: var(--color-jp-text, #2A231F); background: none; box-shadow: none; border: 0; }
#kotobaLesson .cl-oto-bare:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* a piece's line holds the glyph's seat at its end (its gap and its glyph) only where its hung glyph would stand on the
   corner seat, within a quarter rem of its painting, the caption under it or a list moved under it (js holdOtoSeats,
   cl-read-line--held, measured at mount and wherever the list's give moves): that line wraps a glyph's width sooner and its
   glyph stands inside the column; every other line keeps the column's whole measure, its glyph hung past its last glyph.
   (⭐ E1-02, build A's repair round 1, 27 October 2026: the seat held on every voiced line wrapped lines that fit before,
   and pieces ran further past the glass after a miss at 1280x900; was: every voiced line, .cl-read-line:has(> .cl-oto-bare).
   Lesson 11's tenth piece still holds its first line's, whose glyph would stand 9 px on the painting: it breaks after 昔、) */
#kotobaLesson .cl-read-line.cl-read-line--held:has(> .cl-oto-bare) { padding-right: calc(0.5em + 1.2rem); }
/* a sign's one glyph: at its frame's foot corner, on its last label's middle, its seat held in the frame's right padding
   (1.5 rem and the glyph's 1.2 and a hair, laid at mount: the house gap from the widest label), so it never stands on a
   label and never leaves the hairline */
#kotobaLesson .cl-page-lines.cl-read-sign { position: relative; }
#kotobaLesson .cl-page-lines.cl-read-sign:has(> .cl-sign-oto) { padding-right: 3rem; }
#kotobaLesson .cl-read-sign > .cl-sign-oto {
    position: absolute;
    right: 0.9rem;
    bottom: calc(0.4rem + 0.925 * var(--k4) - 0.6rem);
    margin: 0;
}
#kotobaLesson .cl-read--fold > .cl-page-lines.cl-read-sign > .cl-sign-oto { bottom: calc(0.6rem + 0.925 * var(--k4) - 0.6rem); }
/* a plate's lines are written on its painting, so its one glyph stands in the painting's foot corner */
#kotobaLesson .cl-read-plate > .cl-sign-oto { position: absolute; right: 0.5rem; bottom: 0.5rem; margin: 0; z-index: 1; }
/* a record row's voice after its Japanese, in the row's flex: the house gap after the reading (half a reading's em, k6),
   the row's own gap before its English; never hung (a hung glyph would stand under the English) */
#kotobaLesson .cl-settled-row > .cl-oto-bare { align-self: center; margin: 0 0 0 calc(0.5 * var(--k6) - 0.9rem); }
/* the hero's voice after its last glyph, at a reading line's gap (half of k4: the hero's own half em is 95 px at 189) */
#kotobaLesson .cl-word--big > .cl-oto-bare { margin: 0 calc(-0.5 * var(--k4) - 1.2rem) 0 calc(0.5 * var(--k4)); }
/* the close's variant, ?close=foot (js closeFootOf): the one glyph at the foot of the verse strip, centred in the strip's
   foot paper (its padding, 1.6 units), inking with beat 2 as the chip it stands in for (.cl-b2) */
#kotobaLesson .cl-verse-strip { position: relative; }
#kotobaLesson .cl-verse-strip > .cl-verse-foot {
    position: absolute;
    left: calc(50% - 0.6rem);
    bottom: calc((var(--cl-strip-pad) - 1.2rem) / 2);
    line-height: 0;
}
#kotobaLesson .cl-verse-foot > .cl-oto-bare { margin: 0; }

/* ⭐⭐ U-019: A REAL-WORLD PIECE'S PAINTING IS A DOOR AT REST once the piece is answered (the owner's "a good idea" of 26
   October; js liveViewDoor, the seat and its caption laid at mount and veiled with the painting, so nothing moves when they
   ink): a hairline frame round the painting (a line drawn by its shadow: no geometry) and the quiet caption 拡大 Larger
   under it in the chrome's two voices; a hover inks the frame and the caption in the indigo of what can be pressed, a
   focus rings the painting, a press opens the view. A list moved under the painting stands under its caption too. */
/* (⭐ the design elevation, the review round of 1 November 2026: at rest the painting is a print laid on the page, the slip's
   own shadow, its hairline ring gone; under the hand its edge inks in the accent over that shadow) */
#kotobaLesson .cl-corner-seat--door > .cl-kpic {
    cursor: pointer;
    box-shadow: var(--cl-slip);
    transition: box-shadow var(--cl-t-ink-quick) var(--ease-settle, ease);
}
#kotobaLesson .cl-corner-seat--door > .cl-viewcap {
    position: absolute;
    top: calc(var(--cl-kpic) * 2 / 3 + 0.45rem);
    left: calc(100% + 1rem);
    width: var(--cl-kpic);
    display: flex;
    align-items: baseline;
    gap: 0.45em;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e3);
    line-height: 1.5;
    color: var(--cl-quiet);
    cursor: pointer;
    transition: color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
#kotobaLesson .cl-corner-seat--door > .cl-viewcap [lang="ja"] { font-family: var(--cl-font-chrome-jp); color: inherit; }
#kotobaLesson .cl-corner-seat--door > .cl-viewcap i { font-style: normal; }
#kotobaLesson .cl-corner-seat--door:not([data-veil]):hover > .cl-kpic { box-shadow: 0 0 0 1px var(--cl-accent), var(--cl-slip); }
#kotobaLesson .cl-corner-seat--door:not([data-veil]):hover > .cl-viewcap { color: var(--cl-accent); }
#kotobaLesson .cl-corner-seat--door > .cl-kpic:focus-visible { outline: var(--cl-ring); outline-offset: var(--cl-ring-off); }
#kotobaLesson .cl-corner-seat--moment.cl-corner-seat--in > .cl-viewcap { animation: cl-unfold 320ms var(--ease-brush, ease) both; }
#kotobaLesson .cl-corner-seat--moment.cl-corner-seat--door > .cl-wl { top: calc(var(--cl-kpic) * 2 / 3 + 0.45rem + 1.5 * var(--e3) + var(--cl-air-in)); }
/* the view (js openView): the room's own paper over the lesson, the painting whole at the largest the glass gives it, the
   piece's text under it as the real thing sets it, 閉じる Close at the top right in the frame's pill dress; it inks in on
   the ink clock (opacity alone), and less motion lands it at once (the stylesheet's own rule) */
#kotobaLesson .cl-view {
    position: fixed;
    inset: 0;
    z-index: 11;                                   /* over the kanji home (10), the topmark (3) and the glosses (4) */
    display: flex;
    justify-content: center;
    background: var(--cl-paper);                   /* the room's own paper, whole: nothing of the page shows through */
    animation: cl-unfold var(--cl-t-ink) var(--ease-settle, ease) both;
}
#kotobaLesson .cl-view-sheet {
    box-sizing: border-box;
    width: min(100%, calc(64 * var(--cl-u)));
    height: 100%;
    padding: calc(1.1 * var(--cl-u)) calc(1.6 * var(--cl-u)) calc(1.8 * var(--cl-u));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: center;
    row-gap: var(--cl-air-in);
}
#kotobaLesson .cl-view-x {
    justify-self: end;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--cl-rule);
    border-radius: 999px;
    background: none;
    box-shadow: none;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e3);
    font-weight: 400;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--cl-ink-past);
    cursor: pointer;
    transition: color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
#kotobaLesson .cl-view-x [lang="ja"] { font-family: var(--cl-font-chrome-jp); font-size: var(--e3); font-weight: 500; letter-spacing: 0.04em; color: var(--color-jp-text, #2A231F); }
#kotobaLesson .cl-view-x i { font-style: normal; }
#kotobaLesson .cl-view-x:hover { color: var(--cl-ink); background: none; box-shadow: none; }
#kotobaLesson .cl-view-x:focus-visible { color: var(--cl-ink); outline: var(--cl-ring); outline-offset: 2px; }
#kotobaLesson .cl-view-fig {
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#kotobaLesson .cl-view-fig img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 0 1px var(--cl-rule);
}
/* ⭐ 拡大 before the answer (5 November 2026): while the piece is asked the view is the painting alone (js openView bare), no
   typed word under it, so it takes the sheet's whole height: about 1,034 px wide at 1280x900 */
#kotobaLesson .cl-view--bare .cl-view-sheet { grid-template-rows: auto minmax(0, 1fr); }
/* the piece's text, as the real thing sets it (js realViewHTML): three faces, the lines as written, no ruby, no press */
#kotobaLesson .cl-view-real { box-sizing: border-box; max-width: 100%; margin: 0; color: var(--cl-ink); }
#kotobaLesson .cl-view-real p { margin: 0; }
/* a phone's screen: lit, its corners round, its messages as bubbles in the system's own sans (the face a phone sets),
   the other's at the left, the holder's at the right in the house's indigo tint */
#kotobaLesson .cl-view-real--screen {
    width: min(100%, calc(21 * var(--cl-u)));
    padding: calc(0.9 * var(--cl-u));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 1.4rem;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px var(--cl-rule), 0 1px 3px rgba(var(--cl-sh), 0.05);
    font-family: system-ui, -apple-system, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
    font-size: var(--k6);
    line-height: 1.5;
}
#kotobaLesson .cl-view-bubble { align-self: flex-start; max-width: 85%; padding: 0.45em 0.85em; border-radius: 1.05em; background: #ECEAE6; }
#kotobaLesson .cl-view-bubble--out { align-self: flex-end; background: rgba(61, 90, 128, 0.13); }
#kotobaLesson .cl-view-real--screen > .cl-view-row { padding: 0 0.2em; }
/* a printed thing (a notice, a ticket, a board, a sign): its lines centred on its card in a printed face, the system's
   Mincho (Hiragino Mincho ProN on the Mac: nothing loaded; the loaded Noto Serif JP elsewhere) */
#kotobaLesson .cl-view-real--print {
    min-width: calc(14 * var(--cl-u));
    padding: calc(1 * var(--cl-u)) calc(1.8 * var(--cl-u));
    text-align: center;
    background: var(--cl-sheet);
    box-shadow: 0 0 0 1px var(--cl-rule), 0 1px 3px rgba(var(--cl-sh), 0.05);
    font-family: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', YuMincho, 'Noto Serif JP', serif;
    font-size: var(--k5);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.06em;
}
/* a hand-written note: Klee One on a note card, leaning one degree, as a note left by hand */
#kotobaLesson .cl-view-real--hand {
    min-width: calc(14 * var(--cl-u));
    padding: calc(1 * var(--cl-u)) calc(1.6 * var(--cl-u));
    text-align: left;
    background: #F8F0D8;
    box-shadow: 0 1px 3px rgba(var(--cl-sh), 0.06);
    transform: rotate(-1deg);
    font-family: 'Klee One', var(--font-jp, serif);
    font-size: var(--k5);
    line-height: 1.7;
}
/* (U-022's walk, 27 October 2026: with its caption the English alone, lesson 6's second warm-up step runs a line shorter,
   keeps its list in the column and flows it in two columns, where 週間's meaning wraps its LESSON 5 seat under it; in a
   tightened list (line-height 1.3) the two inks met by two pixels. A seat that wraps under its meaning takes a hair of
   air there, in the tightened lists alone; a row that stands whole is untouched. ⭐ E1-01, build A's repair round 1, 27
   October 2026: in the column alone, where it was measured; a list moved under the corner seat's painting keeps its rows as
   they were, since there it stands out of the page's flow and the gap ran it into the foot where the glass cannot see:
   lesson 15's sixth warm-up step and lesson 14's tenth piece set their last row, 友達 friend · LESSON 14, under 次へ Next at
   1280x900) */
#kotobaLesson .cl-hw--wl-tight .cl-wl:not(.cl-corner-seat > .cl-wl) .cl-wl-g,
#kotobaLesson .cl-card--wl-tight .cl-wl-g { row-gap: 0.25em; }
/* ⭐ E1-01: a list under the painting that still runs into the unit of air over the foot, every give above spent, stands
   nearer its painting, half the air under it (js fitHomeworkList, cl-hw--wl-near; lesson 14's gossip at 1280x900) */
#kotobaLesson .cl-hw--wl-near .cl-corner-seat > .cl-wl { top: calc(var(--cl-kpic) + 0.5 * var(--cl-air-in)); }
#kotobaLesson .cl-hw--wl-near .cl-corner-seat--moment > .cl-wl { top: calc(var(--cl-kpic) * 2 / 3 + 0.5 * var(--cl-air-in)); }
#kotobaLesson .cl-hw--wl-near .cl-corner-seat--moment.cl-corner-seat--door > .cl-wl { top: calc(var(--cl-kpic) * 2 / 3 + 0.45rem + 1.5 * var(--e3) + 0.5 * var(--cl-air-in)); }

/* ══ THE DEEP REVIEW, ROUND 3, BUILD A (seat R3, 27 October 2026; build/ROUND3_CONTRACT.md §1) ═════════════════════════
   U-011, the English after the clip: on a told example page whose sentence is said on arrival (js bookExamplePage), the
   English line is laid at mount and waits veiled ([data-veil], its seat held: nothing moves); at the clip's end it inks in,
   the opacity ink alone, as every arrival on this surface does (less motion: it lands whole, the room's own rule). A
   silent page, and a page under the mute, never take the class: their English prints at once. (U-064 and U-062 are edited
   where their rules stand: .cl-seat--bad, .cl-yours-x, .cl-match-o--miss; .cl-ix-l--ahead.) */
#kotobaLesson .cl-card--expage .cl-sent-en--after:not([data-veil]) { animation: cl-unfold var(--cl-t-ink) var(--ease-settle, ease) both; }
/* ⚖ 12 November 2026 (the course review's twelfth fault, its second face: lesson 9's 会う and lesson 15's 口 at 1280x900,
   the lines under the first 9.8 px lower, once in twelve walks): THIS VEIL IS INK, NEVER VISIBILITY. At the clip's end two
   changes land in one frame: the speaker leaves its playing dress (a change Chrome lays its line out again for) and the
   English's veil lifts. A lifted `visibility` asks the sentence's block for layout too, and that pass lays the lines
   around the speaker anew and gives a reading over the second line (あ over 開) 9.8 px of room the whole layout never gave
   it: the lines under the first dropped and stayed (a fresh layout puts them back). Either change alone moves nothing.
   Veiled by opacity, the lift is paint alone and the lines stand (probe: scratchpad review/next/jump/p2.py, 0 drops where
   every voiced arrival dropped). While it waits it is inert (js bookExamplePage): no pointer, no selection, no reader. */
#kotobaLesson .cl-card--expage .cl-sent-en--after[data-veil] { visibility: visible; opacity: 0; }

/* ══ THE DESIGN ELEVATION, STEPS 3 AND 4, AND THE FOOT OF A LESSON SCREEN AS ONE PIECE (2 November 2026; the direction of
   record: docs/course_v2/reviews/design_elevation_2026-10-31/SYNTHESIS.md §3 and §4, §7 rows 3 and 4; this demo's record:
   docs/course_v2/reviews/elevate_step34_2026-11-02/DESIGN.md). A demo in real code, for the owner's walk; the pins
   follow his yes (its RED.md names what goes red and why). ═══════════════════════════════════════════════════════════ */

/* ── 3a · THE ONE VERMILION AND THE WASH (the palette of record): 朱 (shu) #B63D1B, 紅樺 (benikaba), hue 13°, paper type
   on it 5.70:1; pressed harder #993317; the type cut into it paper-white (白文 hakubun); a held hand a wash of sumi at
   5.5 per cent, quiet type on it (5.3:1). The law of scarcity: vermilion is pressed, never painted: ONE field a screen,
   the step forward; never on a miss, a reading, a link, a hover, a ground, a border, a headline, or on or under a
   painting. */
#kotobaLesson {
    --cl-shu: #B63D1B;
    --cl-shu-deep: #993317;
    --cl-shu-on: #FFFFFB;
    --cl-held: rgba(42, 35, 31, 0.055);
    --cl-wash-hi: rgba(42, 35, 31, 0.08);
}

/* ── 3b · THE HANDS WITHOUT BONES. A control is a vermilion field, a paper slip, or bare type; no outline anywhere. The
   base: a slip lighter than the page on the slip's own shadow (sleek is value, not an outline), the Japanese in sumi, the
   English quiet; under the pointer the shadow deepens and the type goes to the house accent; held (not yet open) a wash,
   quiet type, nothing else; the box, the type and the seat as they stand (the owner, 24 October 2026: "keep the buttons
   as they are"); the corner squared a little, as a seal is (4 px: the record's). Ink and shadow move on the clocks the
   foot already keeps; nothing moves. */
#kotobaLesson .cl-prev, #kotobaLesson .cl-look-go, #kotobaLesson .cl-next, #kotobaLesson .cl-commit, #kotobaLesson .cl-rbnext,
#kotobaLesson .cl-goon {
    border-color: transparent;
    background: var(--cl-sheet);
    box-shadow: var(--cl-slip);
    border-radius: 4px;
}
#kotobaLesson .cl-prev:hover:not(:disabled), #kotobaLesson .cl-look-go:hover:not(:disabled), #kotobaLesson .cl-next:hover:not(:disabled),
#kotobaLesson .cl-commit:hover:not(:disabled), #kotobaLesson .cl-rbnext:hover, #kotobaLesson .cl-goon:hover:not(:disabled) {
    border-color: transparent;
    background: var(--cl-sheet);
    box-shadow: var(--cl-slip-hi);
}
#kotobaLesson .cl-prev:active, #kotobaLesson .cl-look-go:active, #kotobaLesson .cl-next:active, #kotobaLesson .cl-commit:active:not(:disabled),
#kotobaLesson .cl-rbnext:active, #kotobaLesson .cl-goon:active:not(:disabled) { border-color: transparent; }
/* held: a seat of tone, quiet type (a bare word would be a silent door; a ring would be an outline) */
#kotobaLesson .cl-commit:disabled, #kotobaLesson .cl-look-go:disabled, #kotobaLesson .cl-next:disabled, #kotobaLesson .cl-prev:disabled,
#kotobaLesson .cl-goon:disabled,
#kotobaLesson.cl-framed .cl-foot .cl-next:disabled, #kotobaLesson.cl-framed .cl-foot .cl-goon:disabled, #kotobaLesson.cl-framed .cl-foot .cl-prev:disabled,
#kotobaLesson .cl-next:disabled:hover, #kotobaLesson .cl-prev:disabled:hover, #kotobaLesson .cl-goon:disabled:hover,
#kotobaLesson.cl-framed .cl-foot .cl-next:disabled:hover, #kotobaLesson.cl-framed .cl-foot .cl-goon:disabled:hover, #kotobaLesson.cl-framed .cl-foot .cl-prev:disabled:hover,
#kotobaLesson .cl-foot .cl-next.cl-next--inert {
    border-color: transparent;
    background: var(--cl-held);
    box-shadow: none;
}
#kotobaLesson .cl-commit:disabled [lang="ja"], #kotobaLesson .cl-look-go:disabled [lang="ja"], #kotobaLesson .cl-next:disabled [lang="ja"],
#kotobaLesson .cl-prev:disabled [lang="ja"], #kotobaLesson .cl-goon:disabled [lang="ja"], #kotobaLesson .cl-foot .cl-next.cl-next--inert [lang="ja"],
#kotobaLesson .cl-commit:disabled i, #kotobaLesson .cl-look-go:disabled i, #kotobaLesson .cl-next:disabled i,
#kotobaLesson .cl-prev:disabled i, #kotobaLesson .cl-goon:disabled i, #kotobaLesson .cl-foot .cl-next.cl-next--inert i { color: var(--cl-quiet); }
/* a quiet way out while a street still has words unfound keeps its bare type */
#kotobaLesson .cl-next.cl-next--soft, #kotobaLesson .cl-next.cl-next--soft:hover { border-color: transparent; background: none; box-shadow: none; }
#kotobaLesson.cl-framed .cl-foot .cl-next, #kotobaLesson.cl-framed .cl-foot .cl-goon, #kotobaLesson.cl-framed .cl-foot .cl-prev,
#kotobaLesson .cl-foot .cl-next, #kotobaLesson .cl-foot .cl-prev {
    transition: background-color var(--cl-t-ink) var(--ease-settle, ease),
                box-shadow var(--cl-t-ink) var(--ease-settle, ease),
                border-color var(--cl-t-ink) var(--ease-settle, ease);
}
/* ── 3c · THE STEP FORWARD: the one vermilion field of a screen, a seal pressed where the learner goes on: 次へ Next once
   offered, 答える Check once the seats are filled, 始める Begin at the door, 続きから Resume on the landing (css/course-landing.css).
   Flat, no gradient, no glow; it deepens under the pointer and the press; the paper type stays paper. The red door stands
   on about seventy screens a lesson: it is the owner's eye that settles it (SYNTHESIS.md §7). */
#kotobaLesson .cl-foot .cl-next:not(:disabled):not(.cl-next--inert):not(.cl-next--soft):not(.cl-close-door),
#kotobaLesson .cl-foot .cl-goon:not(:disabled) {
    background: var(--cl-shu);
    border-color: var(--cl-shu);
    box-shadow: none;
}
#kotobaLesson .cl-foot .cl-next:not(:disabled):not(.cl-next--inert):not(.cl-next--soft):not(.cl-close-door) [lang="ja"],
#kotobaLesson .cl-foot .cl-next:not(:disabled):not(.cl-next--inert):not(.cl-next--soft):not(.cl-close-door) i,
#kotobaLesson .cl-foot .cl-goon:not(:disabled) [lang="ja"],
#kotobaLesson .cl-foot .cl-goon:not(:disabled) i { color: var(--cl-shu-on); }
#kotobaLesson .cl-foot .cl-next:not(:disabled):not(.cl-next--inert):not(.cl-next--soft):not(.cl-close-door):hover,
#kotobaLesson .cl-foot .cl-next:not(:disabled):not(.cl-next--inert):not(.cl-next--soft):not(.cl-close-door):active,
#kotobaLesson .cl-foot .cl-next:not(:disabled):not(.cl-next--inert):not(.cl-next--soft):not(.cl-close-door):focus-visible,
#kotobaLesson .cl-foot .cl-next.cl-begin--said, #kotobaLesson .cl-foot .cl-next.cl-begin--said:hover,
#kotobaLesson .cl-foot .cl-goon:not(:disabled):hover,
#kotobaLesson .cl-foot .cl-goon:not(:disabled):active,
#kotobaLesson .cl-foot .cl-goon:not(:disabled):focus-visible { background: var(--cl-shu-deep); border-color: var(--cl-shu-deep); box-shadow: none; }
#kotobaLesson .cl-foot .cl-next:not(:disabled):not(.cl-next--inert):not(.cl-next--soft):not(.cl-close-door):hover [lang="ja"],
#kotobaLesson .cl-foot .cl-next:not(:disabled):not(.cl-next--inert):not(.cl-next--soft):not(.cl-close-door):hover i,
#kotobaLesson .cl-foot .cl-next.cl-begin--said [lang="ja"], #kotobaLesson .cl-foot .cl-next.cl-begin--said i,
#kotobaLesson .cl-foot .cl-goon:not(:disabled):hover [lang="ja"],
#kotobaLesson .cl-foot .cl-goon:not(:disabled):hover i { color: var(--cl-shu-on); }
/* the close's door, おわる Finish, is a sumi field (the record's goshuin page: where the lesson's seal is pressed, step 6, the
   seal is the screen's vermilion; the door goes to ink so the page keeps one red) */
#kotobaLesson .cl-foot .cl-next.cl-close-door:not(:disabled) { background: var(--color-jp-text, #2A231F); border-color: var(--color-jp-text, #2A231F); box-shadow: none; }
#kotobaLesson .cl-foot .cl-next.cl-close-door:not(:disabled) [lang="ja"], #kotobaLesson .cl-foot .cl-next.cl-close-door:not(:disabled) i { color: var(--cl-shu-on); }
#kotobaLesson .cl-foot .cl-next.cl-close-door:not(:disabled):hover, #kotobaLesson .cl-foot .cl-next.cl-close-door:not(:disabled):active { background: #15110F; border-color: #15110F; }
#kotobaLesson .cl-foot .cl-next.cl-close-door:not(:disabled):hover [lang="ja"], #kotobaLesson .cl-foot .cl-next.cl-close-door:not(:disabled):hover i { color: var(--cl-shu-on); }
/* ── 3d · the chrome's pill (✕ 閉じる Close): a slip, no ring; the sound discs keep their ring, which is their shape ── */
#kotobaLesson.cl-framed .cl-pill { border-color: transparent; background: var(--cl-sheet); box-shadow: var(--cl-slip); color: var(--cl-ink-past); }
#kotobaLesson.cl-framed .cl-pill:hover, #kotobaLesson.cl-framed .cl-pill-wrap--awake .cl-pill { color: var(--cl-ink); background: var(--cl-sheet); box-shadow: var(--cl-slip-hi); }
/* ── 3e · the gate's chrome title a step down (52 → 42 px at 1440): the ten words under it lead ── */
#kotobaLesson .cl-gate-jp { font-size: calc(2.35 * var(--cl-u)); }
#kotobaLesson .cl-gate-en { font-size: calc(1.3 * var(--cl-u)); }

/* ── 4a · THE DOOR: THE KANJI IS THE HERO, THE ENGLISH ITS CAPTION. A chapter opens on its character: the mark first, at
   165 px (9.2 units at 1440), the title under it at 1.75 units in the teacher's face, then the painting resting on the
   strip's foot as D62 laid it. The text column's own flex order does the turning; nothing else on the door moves. */
#kotobaLesson .cl-door--v5 .cl-door-top--p3 .cl-door-mark { order: 0; margin-top: 0; margin-bottom: 0; }
#kotobaLesson .cl-door--v5 .cl-door-top--p3 .cl-door-mark-k { font-size: calc(9.2 * var(--cl-u)); line-height: 1; }
#kotobaLesson .cl-door-top--p3 .cl-door-title.cl-door-name { order: 1; margin-top: calc(0.3 * var(--cl-u)); font-size: calc(1.75 * var(--cl-u)); line-height: 1.25; letter-spacing: 0; }
#kotobaLesson .cl-door-top--p3 .cl-door-portrait.cl-door-seat { order: 2; }
/* ── 4b · THE GATE'S PORTRAITS A SIZE UP (96 → 118 px at 1440, 6.6 units, the older gates' own seat); the close's tiles keep
   their smaller seat ── */
#kotobaLesson .cl-wt-pic { width: calc(6.6 * var(--cl-u)); height: calc(6.6 * var(--cl-u)); }
#kotobaLesson .cl-wtiles--close .cl-wt-pic { width: calc(3.6 * var(--cl-u)); height: calc(3.6 * var(--cl-u)); }

/* ── 4c · THE FOOT OF A LESSON SCREEN, ONE GRID (the owner, 1 November 2026: "the footer needs to be looked at more
   holistically"; js laySide). Every screen that prints a sentence to read and asks under it (a Reading piece, a warm-up
   re-read, a drill with a line: pick, gap, listen, order; a drill or an ask with a word's portrait) is TWO COLUMNS on the
   lesson's column: the TEXT column at the left (the scene line, the sentence with its English's seat, the question, its
   answers, the note's seat) and the SIDE column at the right, 16 units wide (288 px at 1440; 30 per cent of the glass
   where that is less), which holds two things and nothing else: THE WORD LIST from the top, level with the text, and THE
   PAINTING at the foot, one unit above the hands.
   THE LIST: the words a learner has asked for. A guest's row (a word not taught yet, printed with its kana) stands from
   the start; a taught word's row waits with no seat and, on a press, lands at the foot of the list, in the order asked;
   nothing above it moves, and the column holds no empty band. At the answer every row still waiting lands under them,
   in the sentence's order. The list never moves between screens: it is in the side column on every one of them, and the
   text column never holds it. Where the whole list would reach the painting (or the hands, where no painting comes), its
   rows tighten (the one give kept of the old ladder).
   THE PAINTING: the piece's moment (3:2) or the word's portrait (square), at the side's full width (the record's "about
   288"), laid veiled in its seat at mount and inked at the answer, so nothing moves when it arrives; one seat on every
   screen: the lower right corner of the column, above 次へ Next.
   What stayed from today: the sentence, its English's seat, the question and its slips, the note after a miss, the
   order drill's rack and its sockets, the match board, the fixed foot with the four parts between the hands, the example
   page (its list under its sentence, the owner's graded-reader look of 19 October 2026). */
#kotobaLesson { --cl-side: min(calc(16 * var(--cl-u)), 30vh); }
#kotobaLesson .cl-stage > section.cl-set--side { --cl-kpic: var(--cl-side); }
#kotobaLesson .cl-stage > section.cl-set--side > .cl-item { max-width: calc(100% - var(--cl-side) - 1rem); }
/* the seat is no anchor now: the section is (its padding box ends at the foot's top), so the side's two things hang from
   the column's right edge, the list at the item's top (js), the painting at the foot */
#kotobaLesson .cl-set--side .cl-corner-seat { position: static; height: 0; }
#kotobaLesson .cl-set--side .cl-corner-seat > .cl-kpic { position: absolute; top: auto; left: auto; right: 0; bottom: var(--cl-u); margin: 0; width: min(var(--cl-side), calc(var(--cl-side-h, 100vh) * var(--cl-pic-ar, 1))); max-width: none; }
#kotobaLesson .cl-set--side .cl-corner-seat--moment > .cl-kpic, #kotobaLesson .cl-set--side .cl-corner-seat > .cl-misspic { --cl-pic-ar: 1.5; }
/* the painting yields to a list that would still reach it with its rows tight (js laySide): the height left on its own foot, and under five units
   it stands down on this screen */
#kotobaLesson .cl-set--side-nopic .cl-corner-seat > .cl-kpic, #kotobaLesson .cl-set--side-nopic .cl-corner-seat > .cl-viewcap { display: none; }
#kotobaLesson .cl-set--side .cl-corner-seat > .cl-wl { position: absolute; top: 0; left: auto; right: 0; width: var(--cl-side); margin: 0; }
#kotobaLesson .cl-set--side .cl-corner-seat > .cl-wl .cl-wl-list::before { display: none; }
/* a row waiting for its press takes no seat; the fit measures the list whole for a breath (js) */
#kotobaLesson .cl-set--side .cl-corner-seat > .cl-wl .cl-wl-row[data-veil] { display: none; }
#kotobaLesson .cl-set--side .cl-corner-seat > .cl-wl.cl-wl--measure .cl-wl-row[data-veil] { display: flex; visibility: hidden; }
#kotobaLesson .cl-set--side .cl-corner-seat > .cl-wl .cl-wl-guest1 { margin-top: 0.9rem; }
/* a drill's pictures take the seat (js sidePicsHTML): the word's portrait, and on an item with a miss strip the kanji's card
   picture over it, both on the same foot; a right answer inks the first, a miss the second (js unveilSide). The card picture is
   a 3:2 drawing (144 of the sheet's 147): whole, as on its own card (.cl-kseat-pic), never cropped to the square, which at this
   size lost 九's hand from its arm */
#kotobaLesson .cl-set--side .cl-corner-seat > .cl-misspic { aspect-ratio: 3 / 2; }
#kotobaLesson .cl-set--side .cl-corner-seat > .cl-misspic img { object-fit: contain; }
#kotobaLesson .cl-corner-seat--side.cl-corner-seat--in > .cl-kpic { animation: cl-unfold 320ms var(--ease-brush, ease) both; }
.cl-set--rest .cl-corner-seat--side > .cl-kpic { animation: none; }
/* the side column's rows: a meaning longer than the column wraps under its word's own line */
#kotobaLesson .cl-set--side .cl-corner-seat > .cl-wl .cl-wl-row { white-space: normal; }
#kotobaLesson .cl-set--side .cl-corner-seat > .cl-wl .cl-wl-w { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    #kotobaLesson .cl-corner-seat--side.cl-corner-seat--in > .cl-kpic { animation: none; }
}
/* a real-world piece's painting is a door once answered (U-019): in the side column its caption 拡大 Larger stands under
   it at the foot, the painting one line higher */
#kotobaLesson .cl-set--side .cl-corner-seat--door > .cl-kpic { bottom: calc(var(--cl-u) + 1.5 * var(--e3) + 0.3rem); }
#kotobaLesson .cl-set--side .cl-corner-seat--door > .cl-viewcap { top: auto; left: auto; right: 0; bottom: var(--cl-u); width: min(var(--cl-side), calc(var(--cl-side-h, 100vh) * 1.5)); }
/* (an exchange's folded caption: one speaker a line on every screen since 2 November 2026, .cl-cap-part above; it was the side
   column's own rule first) */
/* the text column's last give, where the page still runs past the glass with the side laid (js laySide: cl-warm--tight,
   E2-02's air): a sign's slip closes up too */
#kotobaLesson .cl-set--side.cl-warm--tight .cl-page-lines.cl-read-sign { padding: 0.8rem 1.3rem 0.9rem; }
#kotobaLesson .cl-set--side.cl-warm--tight .cl-page-lines.cl-read-sign .cl-line { line-height: 1.3; }
#kotobaLesson .cl-set--side.cl-warm--tight .cl-page.cl-page--read { margin-bottom: 1rem; }
/* and the column's second give (js laySide, cl-set--side-snug), where it still runs past, or its miss line's seat is still cut, in that dress
   (the densest pieces at 1280x800, lesson 14's exchange 59 px short of its note's seat): the leading and the slips' padding, never a line, never
   the type */
#kotobaLesson .cl-set--side-snug .cl-read-line { line-height: 1.3; }
#kotobaLesson .cl-set--side-snug .cl-read-turn > .cl-spk { line-height: 1.3; }
#kotobaLesson .cl-set--side-snug .cl-read-en.cl-read-cap { line-height: 1.3; }
#kotobaLesson .cl-set--side.cl-set--side-snug .cl-page-lines.cl-read-sign { padding: 0.5rem 1.3rem 0.5rem; }
#kotobaLesson .cl-set--side.cl-set--side-snug .cl-page-lines.cl-read-sign .cl-line { line-height: 1.2; }
#kotobaLesson .cl-set--side.cl-set--side-snug .cl-page.cl-page--read { margin-bottom: 0.5rem; }
#kotobaLesson .cl-set--side-snug .cl-read-tag, #kotobaLesson .cl-set--side-snug .cl-mean .cl-ask { margin-bottom: 0.3rem; }
#kotobaLesson .cl-set--side-snug .cl-mean-o, #kotobaLesson .cl-set--side-snug .cl-read-reply { padding-top: 0.3rem; padding-bottom: 0.3rem; }
#kotobaLesson .cl-set--side-snug .cl-mean-opts { gap: 0.2rem; }
#kotobaLesson .cl-set--side-snug .cl-hand-tail--after { margin-top: 0.5rem; }
/* the gate on a short glass: its top air and its portraits step down with the window's height, so the tenth word and the
   line under the tiles stay above the hands (lesson 18 at 1280x800 ran 15 px past) */
#kotobaLesson .cl-stage > section.cl-gate { padding-top: min(calc(4 * var(--cl-u)), 7vh); }
#kotobaLesson .cl-wt-pic { width: min(calc(6.6 * var(--cl-u)), 13.5vh); height: min(calc(6.6 * var(--cl-u)), 13.5vh); }
#kotobaLesson .cl-wtiles--close .cl-wt-pic { width: calc(3.6 * var(--cl-u)); height: calc(3.6 * var(--cl-u)); }
/* a reply piece's three sentence slips stand one width, the text column's, in every state, as the plain answer slips do
   (they stood as wide as their words: on one screen 512, 524 and 483 px, the green band of the answer only as wide as its
   words). They print at the read size (k5, as beside a phone plate), and where the rack's longest reply (js replyEm) would
   miss one line by a hair at that size all three tighten together, to at most 10 per cent under it: lesson 18's 18-character
   reply at 26.9 px at 1280, 27.8 at 1440, 28.4 at 2000. Past that floor a reply wraps at its sentence's end (.cl-read-reply's
   line-break: strict). */
#kotobaLesson .cl-set--side .cl-read-replies { flex-wrap: nowrap; align-items: stretch; container-type: inline-size; }
#kotobaLesson .cl-set--side .cl-read-reply {
    width: 100%;
    font-size: clamp(calc(0.9 * var(--k5)), calc((100cqi - 1.4rem - 2px) / var(--cl-reply-em, 1)), var(--k5));
}

/* ══ THE DESIGN ELEVATION, STEPS 5 AND 6: THE TEACHER'S 〇 ON AN ANSWER, AND THE CLOSE AS A 御朱印 PAGE (2 November 2026; the
   direction of record: docs/course_v2/reviews/design_elevation_2026-10-31/SYNTHESIS.md §3 and §4, §6 calls 1, 6 and 8, §7
   rows 5 and 6; the record: docs/course_v2/reviews/elevate_step56_2026-11-02/DESIGN.md). The owner walked the demo and
   said yes, 3 November 2026 ("good i like it let us implement"): his six calls stand as built. The laws are pinned in
   tests/course/elevation_step56_test.js; the brush paths below are generated (scripts/course/maru_paths.js), never traced. */

/* ── 5a · THE TEACHER'S MARKS, 〇 AND ✕ (maru and batsu; the owner's yes of 5 November 2026 on the "Maru and batsu" page,
   "i like the concept feel free to implement"; the record: docs/course_v2/reviews/answer_marks_build_2026-11-05/DESIGN.md;
   the census it answers: answer_marks_2026-11-04/census/CENSUS.md). 朱を入れる, "to put in vermilion", is how a Japanese
   teacher marks a page: a brushed 〇 round the answer. ONE GRAMMAR ON EVERY SCREEN: the answer is circled in vermilion
   where it is printed (a tile, the record word under a built row, the row itself where it is the one place the answer
   stands, the board's word); a whole sentence and a line of English take the same brush's UNDERLINE instead of a loop; a
   miss takes ONE ✕ in sumi, at the top-right corner of the option pressed or at the head of a row built wrong, never one
   for every piece. ONE INK LADDER: the answer in ink, the pick a step lighter (quiet), the rest lightest (faint); no wash,
   no dotted line, no hue for wrong. The marks are SVGs js/course-marks.js draws into one overlay a screen (div.cl-marks),
   measured from the ink of the glyphs they land on, so no mark touches text, ruby, an underline or the speaker (the rings
   of 2 to 4 November were a seat's ::after guessing the glyph from the seat's box; the census measured the guesses: a loop
   on the seats' rule, a loop cutting a two-line answer, a reply's ring broken, one answer two marks by glass). The 〇 draws
   itself once, a brush going round (460 ms), the underline runs (380 ms), the ✕ appears a breath after (240 ms); all land
   whole under Reduce Motion and on a page at rest (.cl-mk--still). Colour is never the only carrier: right is a shape and
   prose ("Right." in the live region, js settleSay), wrong a shape (the ✕) and the ladder. The paths are the generator's
   (js/course-marks.js: the round brush is the record skin's hand, the long loop the demo's of 2 November, the ✕ and the
   underline the page's of 5 November); scripts/course/maru_paths.js prints them, tests/course/answer_marks_test.js pins them. */
#kotobaLesson { --cl-faint: #9A918A; }   /* the lightest step of the ladder: the options not taken (3.1:1 on the paper; a seat, never a line to read) */
/* the overlay is a 0 x 0 box at the top-left of whatever block positions its host's ancestors (never the host itself: a host
   made position: relative stole the side column's containing block); every mark is placed against the overlay's own rect */
#kotobaLesson .cl-marks { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 2; }
/* the record word a built row's 〇 goes round keeps air for the loop's caps: the loop never meets the reading beside it */
#kotobaLesson .cl-record--maru .cl-settled-w { margin-inline: 0.45em 0.55em; }
#kotobaLesson .cl-mk { position: absolute; overflow: visible; pointer-events: none; display: block; }
#kotobaLesson .cl-mk--maru, #kotobaLesson .cl-mk--under { color: var(--cl-shu); }
#kotobaLesson .cl-mk--batsu { color: var(--color-jp-text, #2A231F); }
#kotobaLesson .cl-mk path { fill: currentColor; }
#kotobaLesson .cl-mk path.cl-mk-block { fill: none; stroke: currentColor; stroke-width: 3px; stroke-linejoin: round; }
@property --cl-mk-sweep { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@property --cl-mk-run { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@keyframes cl-mk-sweep { from { --cl-mk-sweep: 0deg; } to { --cl-mk-sweep: 360deg; } }
@keyframes cl-mk-run { from { --cl-mk-run: 0%; } to { --cl-mk-run: 100%; } }
@keyframes cl-mk-appear { from { opacity: 0; } to { opacity: 1; } }
#kotobaLesson .cl-mk--maru {
    --cl-mk-sweep: 360deg;
    -webkit-mask-image: conic-gradient(from 40deg, transparent calc(360deg - var(--cl-mk-sweep)), #000 0);
    mask-image: conic-gradient(from 40deg, transparent calc(360deg - var(--cl-mk-sweep)), #000 0);
    animation: cl-mk-sweep 460ms cubic-bezier(0.3, 0.6, 0.2, 1) both;
}
#kotobaLesson .cl-mk--under {
    --cl-mk-run: 100%;
    -webkit-mask-image: linear-gradient(90deg, #000 var(--cl-mk-run), transparent 0);
    mask-image: linear-gradient(90deg, #000 var(--cl-mk-run), transparent 0);
    animation: cl-mk-run 380ms cubic-bezier(0.3, 0.6, 0.2, 1) both;
}
#kotobaLesson .cl-mk--batsu { animation: cl-mk-appear 240ms ease-out 120ms both; }
#kotobaLesson .cl-mk--still, #kotobaLesson .cl-set--rest .cl-mk { animation: none; -webkit-mask-image: none; mask-image: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { #kotobaLesson .cl-mk { animation: none; -webkit-mask-image: none; mask-image: none; opacity: 1; } }
/* THE LADDER. A circled thing drops its slip: the mark is the mark, the words stand on the paper in their own ink (sumi for
   Japanese, the English ink for a meaning). The pick that missed: no wash, no frame, a step lighter (quiet). The rest: lightest. */
#kotobaLesson .cl-tile--picked, #kotobaLesson .cl-tile--answer, #kotobaLesson .cl-match-o--paired {
    border-color: transparent; background: transparent; box-shadow: none; color: var(--color-jp-text, #2A231F);
}
#kotobaLesson .cl-mean-o--right, #kotobaLesson .cl-mean-o--answer, #kotobaLesson .cl-opt--took.cl-mean-o--right {
    border-color: transparent; background: transparent; box-shadow: none; color: var(--cl-ink);
}
#kotobaLesson .cl-mean-o--right .cl-jp, #kotobaLesson .cl-mean-o--answer .cl-jp, #kotobaLesson .cl-opt--took.cl-mean-o--right .cl-jp { color: var(--color-jp-text, #2A231F); }
#kotobaLesson .cl-tile--wrong, #kotobaLesson .cl-match-o--wrong, #kotobaLesson .cl-mean-o--wrong, #kotobaLesson .cl-match-o.cl-tile--wrong {
    border-color: transparent; background: transparent; box-shadow: none; color: var(--cl-quiet);
}
#kotobaLesson .cl-opt.cl-untaken, #kotobaLesson .cl-tile.cl-untaken { color: var(--cl-faint); }
/* the seats of a settled build: their rule stands down (the 〇 and the ✕ have the row; the census's collision 1 was a loop on
   the rule), a right row in sumi, a row built wrong one quiet row, no piece dotted (the ✕ at its head says it: js markSeats,
   .cl-built--missed); the answer printed once under it in the row seat, in ink (.cl-yours) */
#kotobaLesson .cl-hand--done .cl-built .cl-seat, #kotobaLesson .cl-seat--good, #kotobaLesson .cl-seat--bad, #kotobaLesson .cl-seat--answer { border-bottom-color: transparent; }
#kotobaLesson .cl-seat--good, #kotobaLesson .cl-seat--answer { color: var(--color-jp-text, #2A231F); }
#kotobaLesson .cl-seat--bad, #kotobaLesson .cl-built--missed .cl-seat { color: var(--cl-quiet); border-bottom-style: solid; }
#kotobaLesson .cl-yours { color: var(--color-jp-text, #2A231F); }
#kotobaLesson .cl-yours-x { color: inherit; text-decoration: none; }
/* the board at its end reads as ROWS (js layMatchRows): the columns dissolve into the one grid, every cell on its row's line;
   a wrong row's right partner stands bare in a third column (no reading, no meaning: the row's chosen word carries those), a
   right row's third cell a ghost holding the line */
#kotobaLesson .cl-match--rows { align-items: start; }
/* the third column stands beyond the board's two (each keeps its half of the board's width, so no word wraps at the answer):
   the board grows to the right into the column's air */
#kotobaLesson .cl-match--rows:has(.cl-match-col--a) { width: auto; max-width: none; grid-template-columns: repeat(2, minmax(0, calc(13 * var(--cl-u)))) max-content; }
#kotobaLesson .cl-match--rows .cl-match-col { display: contents; }
#kotobaLesson .cl-match-o--bare { pointer-events: none; width: auto; min-width: 0; padding-inline: 0.6em; }
#kotobaLesson .cl-match-o--ghost { visibility: hidden; }
#kotobaLesson .cl-match-o.cl-match-o--miss { color: var(--cl-quiet); box-shadow: none; text-decoration: none; }
#kotobaLesson .cl-match-w { width: fit-content; max-width: 100%; margin-inline: auto; }
/* a paired word's reading inks in a touch lower, so the loop's band round the word lies on paper, never on the reading (the
   reading appears at the pair's lock, with its air: nothing moves) */
#kotobaLesson .cl-match-o--paired .cl-match-r { margin-top: 0.7em; }
#kotobaLesson .cl-built { width: fit-content; max-width: 100%; }
/* the order's record wears the underline, not the rule a right record draws under itself (one mark, said once) */
#kotobaLesson .cl-item--order .cl-record--sent.cl-settled { border-bottom-color: transparent; }

/* ── 5b · A MEANING ASK'S MARK IS ON ITS ROW. A meaning ask (the Review's book page, a comeback's) prints its answer once, in
   the row under the word (R6): its options leave their ink at the answer, so no option is there to mark. The answer is
   printed there, the meaning in the row, and the underline goes under it where it is printed (js planMarks on cl-ask--right /
   cl-ask--miss, dealMeaningAsk, restItem); your pick stands a step lighter above it with its ✕. The two-beat ask's sound has
   no 〇: its reading inks into the row said once, and a slipped sound wears its ✕ on the kana pressed. */
#kotobaLesson .cl-record--word .cl-settled-g { position: relative; }

/* ── 6 · THE CLOSE AS A 御朱印 (goshuin) PAGE: the verse inks in sumi on its slip (D58, as it was); the lesson's seal is a
   朱印 (shuin), the square a shrine presses, the kanji standing paper-white in the red (白文 hakubun), its edge hand-cut and
   its field a little worn where the paper's grain refused the paste (js sealP3HTML: the worn square, its grain filter on the
   field), tilted the way a hand presses, in the slip's free lower corner: ONE SEAT on every lesson at every glass, under the
   first column's end, never on a character (measured on every verse, the record §7). The door's painting comes back at the
   page's upper left, 17 units (306 px at 1440), hung 5.8 units into the page's margin the way a goshuin page keeps the
   place you visited beside its seal (js renderCloseP3 prints the lesson's own door painting; where a long English line
   would reach it, fitCloseArt slides it further into the margin, as far as one unit from the window's edge, and only then
   narrows it). Both arrive with beat 2, with the English. Where the seal is pressed, おわる Finish is
   a sumi field (step 3): the page keeps one vermilion, and it is the seal. The owner's calls 1 and 8. */
#kotobaLesson .cl-close--verse .cl-verse-page { position: relative; }
@media (min-width: 769px) {
    #kotobaLesson .cl-close--verse .cl-verse-seal { position: absolute; right: calc(1.2 * var(--cl-u)); bottom: calc(0.9 * var(--cl-u)); margin: 0; z-index: 2; }
    #kotobaLesson .cl-close--verse .cl-close-art {
        position: absolute; left: var(--cl-close-art-x, calc(-5.8 * var(--cl-u))); top: calc(0.2 * var(--cl-u)); margin: 0; pointer-events: none;
        width: var(--cl-close-art, calc(17 * var(--cl-u))); height: calc(17 * var(--cl-u));
    }
}
@media (max-width: 768px) { #kotobaLesson .cl-close--verse .cl-close-art { display: none; } }   /* a phone keeps master's close */
#kotobaLesson .cl-close--verse .cl-close-art.cl-close-art--down { display: none; }   /* under five units of room it stands down (js fitCloseArt) */
#kotobaLesson .cl-close-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; filter: url(#cl-washi); mix-blend-mode: multiply; }
#kotobaLesson .cl-verse-seal .cl-seal.cl-seal--p3 { rotate: -3.5deg; }
@media (min-width: 769px) { #kotobaLesson .cl-verse-seal .cl-seal.cl-seal--p3 { width: calc(6.6 * var(--cl-u)); height: calc(6.6 * var(--cl-u)); } }   /* 112 px at 1280, 119 at 1440; a phone keeps the 5.4-unit seal in its flow */
.cl-seal--p3 .cl-seal-field { fill: var(--cl-shu); }
.cl-seal--p3 .cl-seal-k { fill: var(--cl-shu-on); font-weight: 600; font-size: 58px; }

/* ══ THE REAL-WORLD READ (the owner, 5 November 2026: "where text box is should be image maybe larger a bit - this is a
   whole point - asking user read japanese in real settings"; and that afternoon, "there should be no text boxes at all just
   images with text"; js pictureFirstOf, realPicHTML, fitRealPic; docs/course_v2/reviews/real_world_read_2026-11-05/CENSUS.md).
   A real-world piece whose painting carries its lines IS ITS PAINTING, asked and answered: the painting stands in the text
   column where its lines stood, the column's width (479 px at 1280x900), whole at 3:2 in the moment's ink dress, never
   feathered; it narrows only where the page would run past the glass (js fitRealPic, --cl-real-w). No typed copy of its lines
   is printed anywhere; under the painting one row holds the lines' English at its left and the piece's voice at the
   English's end, both veiled until the answer, and the door's caption 拡大 Larger at its right; nothing sits on the
   painting (the owner's ruling of 5 November 2026). The list stands in the side column as on every screen.
   Every other piece is untouched. (Was, the morning's build: the typed lines and their English waited veiled in the side
   column's foot, a size down, and came in with the answer as the record.) ══ */
#kotobaLesson .cl-read-real { position: relative; width: 100%; margin: 0 0 1.1rem; }
/* the painting at the column's width, or fitRealPic's --cl-real-w; the row under it keeps the column's whole width */
#kotobaLesson .cl-read-real-frame { position: relative; width: var(--cl-real-w, 100%); max-width: 100%; }
#kotobaLesson .cl-read-real-frame > .cl-read-real-pic { display: block; flex: none; width: 100%; max-width: none; aspect-ratio: 3 / 2; margin: 0; }
#kotobaLesson .cl-read-real-frame > .cl-read-real-pic img { object-fit: contain; -webkit-mask-image: none; mask-image: none; }
/* its lines, for a screen reader alone: the piece IS the painting */
#kotobaLesson .cl-read-real-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: pre;
}
/* the row under the painting: the door's caption floated under the painting's right edge (its right margin the column's
   width less the painting's), and the lines' English flowing round it (the reading's caption dress, laid at mount and
   veiled, inked with the record: its seat holds its height, so nothing moves when it inks), its first line beside the
   caption and every line after at the column's whole width, so a four-part notice takes two lines, not four, and a painting
   narrowed to fit the glass never narrows its English (lesson 14's flyer: four lines beside the caption, its painting
   narrowed to 364 px; lesson 5's rubbish notice, its English narrowing with its painting, to 322 px) */
#kotobaLesson .cl-read-real-cap { margin-top: 0.4rem; min-height: calc(1.5 * var(--e3)); }
#kotobaLesson .cl-read-real-cap::after { content: ''; display: block; clear: both; }
#kotobaLesson .cl-read-real-cap > .cl-read-en.cl-read-cap { min-height: 0; padding-top: 0; }
/* the piece's one voice (js signOtoHTML: its lines said in order) at the end of the lines' English, in the row under the
   painting and never on it (⭐ the owner's ruling of 5 November 2026: after the answer the English line and the sound
   control sit under the painting; the morning's build laid it on the painting's foot corner, a plate's seat, where a dark
   painting all but hid it: lesson 14's flyer, lesson 25's phone, lesson 26's forecast). It takes its own seat, the house
   gap after the English's last glyph, and is never hung past it (.cl-oto-bare's hang), so it never stands under the door's
   caption beside the English's first line; it is laid at mount and veiled with the English, so nothing moves when it inks */
#kotobaLesson .cl-read-real-cap .cl-sign-oto { margin: 0 0 0 0.5em; }
/* the door it is from the start (⭐ 拡大 before the answer, the owner's go of 5 November 2026: its view the painting alone,
   js openView bare, before the answer and after): its caption under it, a print laid on the page (the slip's shadow); a
   hover on the painting or on its caption inks its edge and the caption, never the voice; a focus rings it. ⭐ CR-02 (the
   deep review, 12 November 2026): the caption stands over the settled English (position: relative + z-index: 1), which is
   itself position: relative and painted later, so after the answer it took the caption's press; nothing moves */
#kotobaLesson .cl-read-real-cap > .cl-viewcap {
    display: flex; align-items: baseline; gap: 0.45em; float: right; position: relative; z-index: 1;
    margin: 0.2rem calc(100% - var(--cl-real-w, 100%)) 0 1rem;   /* (its baseline on the English's first; under the painting's edge) */
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-size: var(--e3); line-height: 1.5;
    color: var(--cl-quiet); cursor: pointer;
    transition: color var(--cl-t-ink-quick) var(--ease-settle, ease);
}
#kotobaLesson .cl-read-real-cap > .cl-viewcap [lang="ja"] { font-family: var(--cl-font-chrome-jp); color: inherit; }
#kotobaLesson .cl-read-real-cap > .cl-viewcap i { font-style: normal; }
#kotobaLesson .cl-read-real--door .cl-read-real-frame > .cl-read-real-pic {
    cursor: pointer; box-shadow: var(--cl-slip);
    transition: box-shadow var(--cl-t-ink-quick) var(--ease-settle, ease);
}
#kotobaLesson .cl-read-real--door:has(.cl-read-real-pic:hover, .cl-viewcap:hover) .cl-read-real-frame > .cl-read-real-pic { box-shadow: 0 0 0 1px var(--cl-accent), var(--cl-slip); }
#kotobaLesson .cl-read-real--door:has(.cl-read-real-pic:hover, .cl-viewcap:hover) .cl-read-real-cap > .cl-viewcap { color: var(--cl-accent); }
#kotobaLesson .cl-read-real--door .cl-read-real-frame > .cl-read-real-pic:focus-visible { outline: var(--cl-ring); outline-offset: var(--cl-ring-off); }

/* ── ⭐⭐ THE READING AS A PICTURE STORY (the story pilot; the owner's go of 8 November 2026; js: renderStoryCover,
   renderStoryPage, renderStoryEnd, renderStoryAsk, renderStoryListen) ────────────────────────────────────────────────
   A book on the glass: the painting over its lines, one page a screen, nothing else on the paper. The painting is drawn
   at the column's width capped by the glass (--cl-tale-w's default: the glass less the room the lines, the doors and the
   foot take, times 3/2), and narrows only where the page still runs past (fitStory). Every seat is laid at mount: the
   English waits veiled under each line, so 英語 English is ink alone. The one orange belongs to the paintings; the chrome
   stays in the quiet ink and the accent answers only the hand. */
#kotobaLesson .cl-tale { padding-top: var(--cl-origin-page); }
#kotobaLesson .cl-tale > .cl-item.cl-tale-item { max-width: 100%; margin: 0; }
#kotobaLesson .cl-tale-pic {
    display: block;
    width: var(--cl-tale-w, min(100%, calc((var(--cl-glass) - 21 * var(--cl-u)) * 1.5)));
    max-width: 100%;
    aspect-ratio: 3 / 2;
    margin: 0 auto;
    border: 0;
    background: var(--cl-paper);
    flex: none;
}
#kotobaLesson .cl-tale-pic img { object-fit: contain; }
#kotobaLesson .cl-tale-pic.cl-kpic--ink img { -webkit-mask-image: none; mask-image: none; }   /* a painting with its own paper edge: no feather */
#kotobaLesson .cl-tale-pic--none { background: var(--cl-sheet); box-shadow: var(--cl-slip); }
/* the lines under the painting: the leaf's own dress (.cl-line at --k5), the margin note on a press at the left, as the
   leaf has always read; a real-world page's lines in the sign's slip under the painting that carries them */
#kotobaLesson .cl-tale .cl-page.cl-page--read { margin: calc(1.2 * var(--cl-u)) 0 0; position: relative; }
/* the lines set closer than the leaf's (1.7 against 1.95): a page of four lines, the band's, stands with its painting at
   1280x900, and a page of seven (lessons 101 to 150) with a painting that has given way to the lines (fitStory) */
#kotobaLesson .cl-tale .cl-tale-line { margin: 0; line-height: var(--cl-tale-lh, 1.7); }
#kotobaLesson .cl-tale .cl-tale-leaf > .cl-read-cap { margin: 0.5rem 0 0; }
/* a real-world page is its painting (the owner, 5 November 2026; #1631): today's real-world read's frame, its caption and
   拡大 under it, the page's word list under that, every row open */
#kotobaLesson .cl-tale--real .cl-read-real { margin-bottom: 0.4rem; }
#kotobaLesson .cl-tale--real .cl-wl { margin-top: calc(0.8 * var(--cl-u)); }
/* the page's one door: 英語 English, the quiet hand under the lines; on a second press the English goes back under its veil */
#kotobaLesson .cl-tale-doors { margin: 0.6rem 0 0; display: flex; justify-content: flex-end; }
/* the cover: the painting over the title, as a picture book's cover, the title then its English, then who is in the story */
#kotobaLesson .cl-tale-book > .cl-tale-pic { width: var(--cl-tale-w, min(100%, calc((var(--cl-glass) - 17 * var(--cl-u)) * 1.5))); }
#kotobaLesson .cl-tale-title { margin: calc(1.2 * var(--cl-u)) auto 0; width: var(--cl-tale-w, min(100%, calc((var(--cl-glass) - 17 * var(--cl-u)) * 1.5))); max-width: 100%; }
#kotobaLesson .cl-tale-t {
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: var(--k2);
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
    color: var(--cl-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
#kotobaLesson .cl-tale-ten { font-family: var(--font-ui, 'Inter', sans-serif); font-size: var(--e1); line-height: 1.3; color: var(--cl-quiet); margin: 0.6rem 0 0; }
#kotobaLesson .cl-tale-cast { list-style: none; margin: calc(1.1 * var(--cl-u)) 0 0; padding: calc(0.7 * var(--cl-u)) 0 0; border-top: 1px solid var(--cl-rule); display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; }
#kotobaLesson .cl-tale-cast li { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k6); line-height: 1.5; color: var(--cl-ink-past); }
#kotobaLesson .cl-tale-cast i { font-style: normal; font-family: var(--font-ui, 'Inter', sans-serif); font-size: var(--e3); color: var(--cl-quiet); margin-left: 0.45em; }
/* おわり: alone, a little above the glass's middle, its English once under it */
#kotobaLesson .cl-tale-owari { min-height: calc(var(--cl-glass) - 12 * var(--cl-u)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
#kotobaLesson .cl-tale-owari-jp { font-family: var(--font-jp, 'Klee One', serif); font-size: var(--k2); line-height: 1.2; letter-spacing: 0.12em; margin: 0; color: var(--cl-ink); }
#kotobaLesson .cl-tale-owari-en { font-family: var(--font-ui, 'Inter', sans-serif); font-size: var(--e2); color: var(--cl-quiet); margin: 0.8rem 0 0; }
/* a question after the end: today's read screen, its painting open from the start (renderRead: sc.story); nothing else moves */
#kotobaLesson .cl-read--story .cl-corner-seat--moment > .cl-kpic { animation: none; }
/* the house's [hidden] reset law */
#kotobaLesson .cl-tale-en[hidden], #kotobaLesson .cl-tale-cast[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE COURSE REVIEW OF 10 NOVEMBER 2026 (docs/course_v2/reviews/course_review_2026-11-10/REVIEW.md)

   ⭐ THE SHORT GLASS. A laptop's window is shorter than any the walk measures (1280x900, 1680x1050, 2000x1150): a 1080p
   screen at Windows' 125 per cent is 1536x735 in a browser, the commonest laptop there is; a 1366x768 one is 1366x657; a
   13-inch MacBook 1440x790. Measured there with the walk's own laws (lesson 28 at 1536x735: 123 screens, 6 past the
   glass): the three gates ran 19 to 135 px past it, their second row of pictures cut by the hands, on the first screen of
   every part of every lesson; and on the close the seal stood over the verse's last characters on 10 of the 30 lessons
   (lesson 21 by 28 px). Under 900 px of height the gates draw in (less air over the name, a smaller name, smaller
   pictures, tighter rows) and the seal steps down with the window. From 900 px up nothing in this block applies, so every
   window the walk measures stands to the pixel as it stood.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-height: 899px) {
    /* each measure runs on a line from its own value at 900 px of height down to a laptop's at 650 (a vh term and a px
       term), under the value it has today as its cap: nothing jumps as the window crosses 900 */
    #kotobaLesson .cl-stage > section.cl-gate {
        padding-top: max(0.8rem, min(calc(4 * var(--cl-u)), 7vh, calc(22vh - 135px)));
        /* (the air over the hands: 2.4rem at 900 px of height, 1rem on a laptop's glass) */
        padding-bottom: max(0px, calc(min(5.4rem, 9vh - 1.6rem) - var(--cl-foot-h)));
    }
    #kotobaLesson .cl-gate-top { padding-bottom: min(calc(1.3 * var(--cl-u)), calc(4.4vh - 16.6px)); }
    #kotobaLesson .cl-gate-jp { font-size: min(calc(2.35 * var(--cl-u)), calc(2.4vh + 20.4px)); }
    #kotobaLesson .cl-gate-en { font-size: min(calc(1.3 * var(--cl-u)), calc(1.4vh + 11px)); }
    #kotobaLesson .cl-gate-line { margin-top: min(calc(1.2 * var(--cl-u)), calc(4.8vh - 21.2px)); }
    #kotobaLesson .cl-gate-body { margin-top: min(calc(2 * var(--cl-u)), calc(9vh - 42px)); }
    #kotobaLesson .cl-gate--words .cl-gate-body { margin-top: min(calc(2.2 * var(--cl-u)), calc(9vh - 42px)); }
    /* the pictures step down with the window (6.6 units is 123 px at 1536 wide: 92 px at 735 of height, 79 at 657) */
    #kotobaLesson .cl-gate-strip { row-gap: min(calc(0.8 * var(--cl-u)), calc(3.8vh - 19.7px)); }
    #kotobaLesson .cl-gate-strip--back { margin-bottom: min(calc(1.1 * var(--cl-u)), calc(4vh - 16px)); }
    #kotobaLesson .cl-gate-cell { width: min(calc(6.6 * var(--cl-u)), calc(16vh - 26px)); }
    #kotobaLesson .cl-gate-pic { width: min(calc(6.6 * var(--cl-u)), calc(16vh - 26px)); height: min(calc(6.6 * var(--cl-u)), calc(16vh - 26px)); }
    #kotobaLesson .cl-gate-strip--many .cl-gate-cell { width: min(calc(4.6 * var(--cl-u)), calc(16vh - 26px)); }
    #kotobaLesson .cl-gate-strip--many .cl-gate-pic { width: min(calc(4.6 * var(--cl-u)), calc(16vh - 26px)); height: min(calc(4.6 * var(--cl-u)), calc(16vh - 26px)); }
    #kotobaLesson .cl-gate-pieces--many .cl-gate-pic { width: min(calc(5.6 * var(--cl-u)), calc(16vh - 26px)); height: min(calc(5.6 * var(--cl-u)), calc(16vh - 26px)); }
    #kotobaLesson .cl-wtiles--gate { row-gap: min(calc(1.5 * var(--cl-u)), calc(6.4vh - 30.6px)); }
    #kotobaLesson .cl-wtiles--gate .cl-wt-pic {
        width: min(calc(6.6 * var(--cl-u)), 13.5vh, calc(24vh - 98px));
        height: min(calc(6.6 * var(--cl-u)), 13.5vh, calc(24vh - 98px));
        margin-bottom: min(0.55rem, calc(1.9vh - 8.4px));
    }
    #kotobaLesson .cl-wtiles--gate .cl-wt-en { line-height: 1.25; }
    #kotobaLesson .cl-gate-asked { margin-top: min(calc(1.5 * var(--cl-u)), calc(7vh - 36px)); padding-top: min(calc(0.9 * var(--cl-u)), calc(2.8vh - 9.2px)); }
    #kotobaLesson .cl-gate-art { width: min(calc(21 * var(--cl-u)), 40vh, calc(56vh - 144px)); }
    /* a story's cover: its title is never broken inside a word to fit a painting drawn narrow (lesson 29 at 1536x735 read
       日曜日 / のカレ / ー, the long mark alone on a line, and the cover ran 181 px past the glass: the title's box was the
       painting's own width, so a painting narrowed to fit made the title taller, and the page fit worse). The box of the
       cover's words is the painting's width at the least and its longest line's at the most, never past the column. */
    #kotobaLesson .cl-tale--cover .cl-tale-title {
        width: fit-content;
        min-width: min(100%, var(--cl-tale-w, min(100%, calc((var(--cl-glass) - 17 * var(--cl-u)) * 1.5))));
        max-width: 100%;
    }
    /* the close: the seal steps down with the window, so it clears the verse it signs (119 px at 900, 81 at 735) */
    #kotobaLesson .cl-verse-seal .cl-seal.cl-seal--p3 { width: min(calc(6.6 * var(--cl-u)), calc(23vh - 88px)); height: min(calc(6.6 * var(--cl-u)), calc(23vh - 88px)); }
}

/* ⭐ MORE BELOW. A page taller than the glass scrolls under the fixed foot, and until now it met the foot's paper at a
   hard edge: a row of words cut in half with nothing to say there was more (a gate on a laptop's window; a long page
   anywhere). While more of the page stands under the foot (js syncMoreBelow: .cl-more-below on the room) the paper over
   the foot fades in over two units, the oldest sign there is that a page goes on; at the page's end it goes. A page
   that fits never wears it, so on every window the walk measures nothing shows. The fade takes no press (the cover law). */
#kotobaLesson .cl-stage .cl-foot::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(2 * var(--cl-u));
    background: linear-gradient(to bottom, rgba(252, 250, 242, 0), var(--cl-paper));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cl-t-ink, 200ms) var(--ease-settle, ease);
}
#kotobaLesson.cl-more-below .cl-stage .cl-foot::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #kotobaLesson .cl-stage .cl-foot::before { transition: none; } }

/* ⭐ THE SPEAKER TAKES A FINGER'S WIDTH. U-022's bare speaker is 1.2 rem square, 19 px: the glyph the owner chose, and a
   target under every guideline for a pointer (24 px at the least), on the control a language course is pressed most by.
   The glyph stands as it stood; its press reaches 8 px past it above, below and to its right, and 4 px toward the
   Japanese it voices (never onto the line's last word, which is a door of its own). */
#kotobaLesson .cl-oto-bare::after { content: ''; position: absolute; top: -8px; bottom: -8px; left: -4px; right: -8px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE REVIEW'S SECOND ROUND (the owner, 10 November 2026: "i have looked at the report and I like it. i also agree with
   polish ane elevation odeas.feel free to implement"; RULINGS.md beside the review). Each block names its call.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ⭐ CALL 12 · THE HEAD KEEPS TO THE COLUMN. Elevate C (10 October 2026) stood the head 40 px from the glass's edges, and on
   a window of 1280 that is near the page; on the owner's 2000 the lesson's name stood 529 px left of the column it names
   and 閉じる Close 482 px right of it, two corners of the window with the page between them. The head's WORDS now
   stand on the column's own edges, where the foot's hands already stand: the name begins where the page's text begins,
   Close ends where 次へ Next ends; the two small ornaments (the mark's portrait, the ⋮ door) hang outside those edges, as
   a margin's marks do. The bar itself still runs the room's width (its paper covers what scrolls under it). Under 1000 px
   of width the side air is too thin to hang anything in, and the head stands as Elevate C drew it. */
@media (min-width: 1000px) {
    #kotobaLesson.cl-framed .cl-topmark { padding: 0 max(40px, calc((100% - var(--cl-col)) / 2)); }
    #kotobaLesson.cl-framed .cl-topmark > .cl-head-pic { margin-left: calc(-44px - 0.9rem); }
    #kotobaLesson.cl-framed .cl-topmark > .cl-menu-wrap { margin-right: calc(-34px - 12px); }
}

/* ⭐ CALL 10 · A MEANING QUESTION IN A NARROW COLUMN IS LAID IN ROWS. W2 (11 October 2026) made the meanings tiles, one row
   of three, "never 650 px boxes", and across the page's whole measure that is right (a new word's own question: three
   tiles of 15 units). The Drills ask beside the side column, in a measure of 28 units, where three tiles are 9 units
   each: "to forget; to leave (something) behind" broke over four centred lines, beside two one-word tiles. The Review's
   book already lays the same question in that same measure as three rows, each meaning on one line from one left edge
   (U-085, 26 October 2026). The Drills take the Review's rows; the tiles stay wherever the question has the page's width. */
#kotobaLesson.cl-framed .cl-stage > section.cl-set--wb.cl-set--side .cl-mean5-opts {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0.5rem;
}
#kotobaLesson.cl-framed .cl-stage > section.cl-set--wb.cl-set--side .cl-mean5-opts > .cl-mean-o {
    min-height: 0;
    padding: 0.5rem 0.9rem;
    text-align: left;
}
/* (the snug side column's gives, css 4c, hold on the rows as they held on the tiles) */
#kotobaLesson.cl-framed .cl-stage > section.cl-set--wb.cl-set--side.cl-set--side-snug .cl-mean5-opts { gap: 0.2rem; }
#kotobaLesson.cl-framed .cl-stage > section.cl-set--wb.cl-set--side.cl-set--side-snug .cl-mean5-opts > .cl-mean-o { padding-top: 0.3rem; padding-bottom: 0.3rem; }

/* ⭐ CALL 11 · THE HERO'S SPEAKER STANDS AT THE END OF ITS READING (js heroOtoSeat). U-022 hung the one bare glyph after the
   hero's last character at the word's middle height: 19 px of speaker beside 240 px of kanji, level with nothing. The
   reading over the word is the sound it plays, so the glyph stands on the reading's row, a reading's gap after its last
   kana. It is an offset in place (the box keeps its hung seat at the line's end, so nothing is laid differently):
   · up: with vertical-align top the box hangs from the hero's own line top; the reading's row stands 1.2 k5 above that
     line less the hero's half-leading (0.05 em of a face 1.1 em tall set solid), then comes down U-054's 0.08 em; its
     middle is therefore 0.13 em of the hero less 0.6 k5 from that top, and the glyph's own half (0.6 rem) comes off;
     a tenth of k5 more lifts it from the row's middle to the kana's own (kana stand high in their box: measured);
   · back: from a reading line's gap after the word (0.5 k4) to a reading's gap after the kana (0.45 k5), across the
     characters after the last reading (--cl-tk hero ems) and that reading's free half (its kanji less its kana, halved
     where it is centred, by its kana where it is spread).
   A hero with no reading over it (a kana word) carries no data-rd and keeps U-022's seat. */
#kotobaLesson .cl-card-head > .cl-word--big > .cl-hero-oto[data-rd] {
    vertical-align: top;
    position: relative;
    top: calc(0.13 * var(--cl-hero, 0px) - 0.7 * var(--k5) - 0.6rem);
    transform: translateX(calc(0.45 * var(--k5) - 0.5 * var(--k4) - var(--cl-tk, 0) * var(--cl-hero, 0px)
        - max(0px, var(--cl-bn, 1) * var(--cl-hero, 0px) - var(--cl-rn, 1) * var(--k5)) / (2 * var(--cl-rd, 1))));
}

/* ⭐ CALL 14 · THE KEYS, SHOWN (js keysHTML, the ? key in onKey). CR-7 gave each answer its numeral while a hand is on the
   keys; the same hand had no way to learn that Enter turns the page, that the left arrow goes back, that E turns a story
   page's English. In CR-7's own manner each control now wears its key in its corner, in its own ink at 70 per cent, only
   while the keys are in use (.cl-by-key) and only where the key acts (a held 答える Check wears none: Enter does nothing
   there, and a key that does nothing is never named). ⋮ wears ?, which opens its card; the card ends on the whole list,
   for the keys no control can wear. A pointer sees none of it. */
#kotobaLesson.cl-by-key .cl-foot .cl-prev:not(:disabled),
#kotobaLesson.cl-by-key .cl-foot .cl-next:not(:disabled):not([data-veil]):not(.cl-next--inert),
#kotobaLesson.cl-by-key .cl-foot .cl-goon:not(:disabled),
#kotobaLesson.cl-by-key .cl-foot .cl-rbnext:not(:disabled),
#kotobaLesson.cl-by-key .cl-tale-doors > .cl-tale-eng,
#kotobaLesson.cl-by-key .cl-tale-doors > .cl-tale-play,
#kotobaLesson.cl-by-key .cl-wp-tag[data-press],
#kotobaLesson.cl-by-key.cl-framed .cl-menu { position: relative; }
#kotobaLesson.cl-by-key .cl-foot .cl-prev:not(:disabled)::before,
#kotobaLesson.cl-by-key .cl-foot .cl-next:not(:disabled):not([data-veil]):not(.cl-next--inert)::before,
#kotobaLesson.cl-by-key .cl-foot .cl-goon:not(:disabled)::before,
#kotobaLesson.cl-by-key .cl-foot .cl-rbnext:not(:disabled)::before,
#kotobaLesson.cl-by-key .cl-tale-doors > .cl-tale-eng::before,
#kotobaLesson.cl-by-key .cl-tale-doors > .cl-tale-play::before,
#kotobaLesson.cl-by-key .cl-wp-tag[data-press]::before,
#kotobaLesson.cl-by-key.cl-framed .cl-menu::before {
    content: '\21B5';
    position: absolute;
    top: 3px;
    left: 6px;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--e4);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: currentColor;
    opacity: 0.7;
}
/* (a key mark never takes the press of the control that wears it; said of the pseudo-elements themselves, apart from the
   rule above, whose selectors name the veil: craft_test reads any rule that names [data-veil] and lifts the pointer as
   one that glasses a veiled seat over) */
#kotobaLesson.cl-by-key .cl-foot button::before,
#kotobaLesson.cl-by-key .cl-tale-doors > button::before,
#kotobaLesson.cl-by-key .cl-wp-tag::before,
#kotobaLesson.cl-by-key.cl-framed .cl-menu::before { pointer-events: none; }
#kotobaLesson.cl-by-key .cl-foot .cl-prev:not(:disabled)::before { content: '\2190'; }
/* (on a filled field, the vermilion step forward and the close's sumi door, the mark is the field's paper type, as its
   words are: the button's own ink is the dark ink still, and a dark mark on vermilion read at 1.7 to 1) */
#kotobaLesson.cl-by-key .cl-foot .cl-next:not(:disabled):not([data-veil]):not(.cl-next--inert):not(.cl-next--soft)::before,
#kotobaLesson.cl-by-key .cl-foot .cl-goon:not(:disabled)::before { color: var(--cl-shu-on); }
#kotobaLesson.cl-by-key .cl-tale-doors > .cl-tale-eng::before { content: 'E'; }
#kotobaLesson.cl-by-key .cl-tale-doors > .cl-tale-play::before { content: 'space'; }
#kotobaLesson.cl-by-key .cl-wp-tag[data-press]::before { content: 'F'; }
#kotobaLesson.cl-by-key.cl-framed .cl-menu::before { content: '?'; top: 2px; left: 4px; }
/* a door that is words alone (no box, no padding) has no corner to wear a key in: its key stands beside it, on the side
   the page leaves free (a story's doors end the column: before them; the word page's press begins it: after it) */
#kotobaLesson.cl-by-key .cl-tale-doors > .cl-tale-eng::before,
#kotobaLesson.cl-by-key .cl-tale-doors > .cl-tale-play::before { top: 50%; left: auto; right: calc(100% + 0.55em); transform: translateY(-50%); }
#kotobaLesson.cl-by-key .cl-wp-tag[data-press]::before { top: 58%; left: calc(100% + 0.6em); transform: translateY(-50%); }
/* the card's last block: the whole list, while the keys are in use */
#kotobaLesson.cl-framed .cl-menu-keys { display: none; margin: 0.6rem 0 0; padding-top: 0.55rem; border-top: 1px solid var(--cl-rule); }
#kotobaLesson.cl-framed.cl-by-key .cl-menu-keys { display: grid; gap: 0.3rem; }
#kotobaLesson.cl-framed .cl-key-row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: baseline; column-gap: 0.6rem; font-size: var(--e4); line-height: 1.4; }
#kotobaLesson.cl-framed .cl-key-row > dt { display: flex; gap: 0.5em; margin: 0; }
#kotobaLesson.cl-framed .cl-key-row > dd { margin: 0; color: var(--cl-ink); }
#kotobaLesson.cl-framed .cl-key-row kbd {
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-size: 1em; font-weight: 500; line-height: 1.4;
    color: var(--cl-quiet); background: none; border: 0; padding: 0; box-shadow: none;
}
#kotobaLesson.cl-framed:not([data-screen="story"]) .cl-key-row[data-on="story"] { display: none; }

/* ⭐⭐ THE STORY LIES OPEN AS A BOOK, AND SAYS WHO SPEAKS (the owner, 11 November 2026: "yes please i love it please
   build"; docs/course_v2/reviews/reading_book_2026-11-11/CONTRACT.md, the mock-up's measures in mock/page.tpl.css). It
   replaces CALL 13's rule of 10 November (a book on a short laptop glass alone).

   WHO SPEAKS, ONE SPEECH ONE BLOCK (2.2, 2.3; at every width). Each line of a story page is a block: its mark in a gutter
   at its head (the line's ear: the speaker's face, a round token over a hairline ring, the hand over it rings it in the
   accent, while the line is said in the ink; the narrator's, a stranger's and a person with no face the small speaker
   glyph in the quiet ink), its rows, its own English under it, veiled until 英語 English. While 聞く Listen says the page
   the other lines rest. The right page ends on its foot row: the page's number at the left, the doors at the right. */
#kotobaLesson .cl-tale {
    --cl-who: calc(3 * var(--cl-u));
    --cl-who-gap: calc(0.9 * var(--cl-u));
    --cl-face: calc(2.8 * var(--cl-u));
}
#kotobaLesson .cl-tale-say {
    display: grid;
    grid-template-columns: var(--cl-who) minmax(0, 1fr);
    column-gap: var(--cl-who-gap);
    align-items: start;
    transition: opacity 160ms ease;
}
#kotobaLesson .cl-tale-say > .cl-tale-line { grid-column: 2; grid-row: 1; min-width: 0; }
#kotobaLesson .cl-tale-say > .cl-tale-en { grid-column: 2; grid-row: 2; margin: 0; padding-top: 0; padding-bottom: calc(0.45 * var(--cl-u)); min-height: 0; line-height: 1.4; }
#kotobaLesson .cl-tale-saying > .cl-tale-say:not(.cl-tale-say--on) { opacity: 0.4; }
#kotobaLesson .cl-tale-who {
    grid-column: 1; grid-row: 1;
    width: var(--cl-who);
    height: calc(var(--cl-tale-lh, 1.7) * var(--cl-tale-k, var(--k4)));   /* the first row's own height: the mark stands on the line's first row */
    margin: 0; padding: 0; border: 0; background: none;
    display: grid; place-items: center;
    color: var(--cl-quiet);
    border-radius: 50%;
}
#kotobaLesson .cl-stage .cl-tale button.cl-tale-who { cursor: pointer; box-shadow: none; background: none; min-width: 0; min-height: 0; }
#kotobaLesson .cl-tale-who .cl-tale-glyph { width: calc(1.05 * var(--cl-u)); height: calc(1.05 * var(--cl-u)); display: block; fill: currentColor; }
#kotobaLesson .cl-tale-who .cl-tale-glyph .cl-chip-w { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
#kotobaLesson .cl-tale-face {
    width: var(--cl-face); height: var(--cl-face);
    border-radius: 50%; object-fit: cover; display: block;
    background: var(--cl-rule);
    box-shadow: 0 0 0 1px var(--cl-rule);
    transition: box-shadow 160ms ease;
}
#kotobaLesson button.cl-tale-who:hover { color: var(--cl-ink); }
#kotobaLesson button.cl-tale-who:hover .cl-tale-face { box-shadow: 0 0 0 2px var(--cl-accent); }
#kotobaLesson .cl-tale-say--on > .cl-tale-who { color: var(--cl-ink); }
#kotobaLesson .cl-tale-say--on > .cl-tale-who .cl-tale-face { box-shadow: 0 0 0 2px var(--cl-ink); }
#kotobaLesson .cl-tale-who:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
/* ⭐ item 7 (12 November 2026): a line whose first row carries a reading over a kanji (js storyRubyRows: --cl-tale-ruby,
   that reading's room) has its mark lowered by it, so the mark stands centred on the row's base text; in the book a page's
   FIRST line is lifted by it, so its base text stands where every page's first line does, the reading in the air above */
#kotobaLesson .cl-tale-say > .cl-tale-who { margin-top: var(--cl-tale-ruby, 0px); }
#kotobaLesson .cl-tale--book.cl-tale--page .cl-page-lines > .cl-tale-say:first-child,
#kotobaLesson .cl-tale--book.cl-tale--listen .cl-page-lines > .cl-tale-say:first-child { margin-top: calc(-1 * var(--cl-tale-ruby, 0px)); }
/* the foot row of the right page: the page's number (quiet, tabular), the doors at the right */
#kotobaLesson .cl-tale-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: calc(2.4 * var(--cl-u));
    margin-top: calc(0.4 * var(--cl-u));
    padding-left: calc(var(--cl-who) + var(--cl-who-gap));
}
#kotobaLesson .cl-tale-folio { font-family: var(--font-ui, 'Inter', sans-serif); font-size: var(--e3); letter-spacing: 0.06em; color: var(--cl-quiet); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ⭐ THE DOORS ARE KEYS (the owner at the book's preview, 12 November 2026: "i do not like the way we style listen and
   english buttons ... maybe we can think of something sleeker"; three dresses tried on the real page, his pick: "i like
   A"). Was the lesson's quiet hand (.cl-quiet): words over a bottom rule, and the rule wore the 12px corner every
   <button> inherits, so under the hand and when pressed it curled up at both ends, in the accent. Now each door is a low
   key drawn with ONE hairline on the bare paper, the lesson's own 4px corner: quiet at rest; the line and the words in
   the ink under the hand; a breath of ink held while it is on (英語 English shown, 聞く Listen reading). 聞く is a
   player, so it wears a play triangle that is a stop square while it reads (on the word's own ::before: the button's
   ::before is its key, .cl-by-key). A hover changes ink alone. The row keeps the height the old hands gave it at every
   unit, to the fraction, so no page's fit moves: a strut the row cannot see (::after) wears the old hand's own box, a
   row of the chrome's Japanese at --k6 with 0.4rem over and under and its 1px rule (a sum in calc() cannot: the row's
   height is the face's ascent and descent each rounded to a pixel). The keys are set apart by a margin, never a gap:
   the strut is an item of the row too. Every other quiet hand of the lesson keeps its dress.
   ⭐ THE STRUT STANDS ONLY WHERE A DOOR STANDS (13 November 2026, the lead's census of the merged tree at five windows).
   A question's foot lays this box empty, and no hand ever stood there: its row is the page number's own height. Laid in
   every box, the strut gave that row the old hands' height too, every question's right page grew about 26px, and at
   2000x1150 lesson 30's second question ran 16px past its page with its number 28px under the nav row. So: never in an
   :empty box (storyFootHTML lays the box with its doors and nothing else, no space either). */
#kotobaLesson .cl-tale-foot > .cl-tale-doors { margin: 0; display: inline-flex; align-items: center; }
#kotobaLesson .cl-tale-foot > .cl-tale-doors:not(:empty)::after {
    content: '聞';
    flex: none;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    font-size: var(--k6);
    line-height: normal;
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
}
#kotobaLesson.cl-framed .cl-tale-foot > .cl-tale-doors:not(:empty)::after { font-family: var(--cl-font-chrome-jp); }
#kotobaLesson .cl-tale-doors > button.cl-quiet + button.cl-quiet { margin-left: calc(1.3 * var(--cl-u)); }
#kotobaLesson .cl-tale-doors > button.cl-quiet {
    box-sizing: border-box;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.2em 0.8em 0.22em;
    border: 1px solid rgba(105, 98, 90, 0.26);
    border-radius: 4px;
    background: none;
    box-shadow: none;
    color: var(--cl-quiet);
    font-size: calc(0.95 * var(--cl-u));
    line-height: 1.45;
    transition: border-color var(--cl-t-ink) var(--ease-settle, ease), background-color var(--cl-t-ink) var(--ease-settle, ease), color var(--cl-t-ink) var(--ease-settle, ease);
}
#kotobaLesson .cl-tale-doors > button.cl-quiet > i { font-size: calc(0.76 * var(--cl-u)); letter-spacing: 0.03em; }
#kotobaLesson .cl-tale-doors > button.cl-quiet:hover { color: var(--cl-ink); border-color: rgba(56, 50, 45, 0.5); background: none; box-shadow: none; }
#kotobaLesson .cl-tale-doors > button.cl-quiet.cl-tale-eng--on,
#kotobaLesson .cl-tale-doors > button.cl-quiet.cl-tale-play--on { color: var(--cl-ink); border-color: rgba(56, 50, 45, 0.5); background: rgba(56, 50, 45, 0.06); }
#kotobaLesson .cl-tale-doors > button.cl-quiet:focus-visible { outline: var(--cl-ring); outline-offset: 2px; }
#kotobaLesson .cl-tale-doors > .cl-tale-hear > [lang="ja"]::before,
#kotobaLesson .cl-tale-doors > .cl-tale-play > [lang="ja"]::before {
    content: '';
    display: inline-block;
    width: 0.44em;
    height: 0.52em;
    margin-right: 0.5em;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    vertical-align: 0.03em;
}
#kotobaLesson .cl-tale-doors > .cl-tale-play--on > [lang="ja"]::before { height: 0.44em; clip-path: none; vertical-align: 0.07em; }
@media (prefers-reduced-motion: reduce) {
    #kotobaLesson .cl-tale-doors > button.cl-quiet { transition: none; }
}
/* a real-world page's right page: what the piece is, over its word list */
#kotobaLesson .cl-tale-tag { margin: 0 0 var(--cl-u); font-family: var(--font-ui, 'Inter', sans-serif); font-size: var(--e4); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cl-quiet); }
#kotobaLesson .cl-tale-right--real { padding-left: calc(var(--cl-who) + var(--cl-who-gap)); }
#kotobaLesson .cl-tale-right--real > .cl-tale-foot { padding-left: 0; }
#kotobaLesson .cl-tale-right--real .cl-wl { margin-top: 0; }
/* under 1200 px (no book): the painting over its lines; the English takes its room when asked (no seat laid for it) */
@media (max-width: 1199px) {
    #kotobaLesson .cl-tale-say > .cl-tale-en[data-veil] { display: none; }
    #kotobaLesson .cl-tale--real .cl-read-real-cap > .cl-tale-en[data-veil] { visibility: hidden; }
}
#kotobaLesson.cl-by-key .cl-tale-doors > .cl-tale-hear { position: relative; }
#kotobaLesson.cl-by-key .cl-tale-doors > .cl-tale-hear::before {
    content: 'space'; position: absolute; top: 50%; right: calc(100% + 0.55em); transform: translateY(-50%);
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-size: var(--e4); font-weight: 500; line-height: 1;
    letter-spacing: 0; text-transform: none; color: currentColor; opacity: 0.7; pointer-events: none;
}

/* THE BOOK (2.1; js bookGlass: a window at least 1200 px wide). Every screen of a story but おわり lies as two pages: the
   painting the left page, the words the right page; its geometry is the WINDOW's, never a page's, so every page of a
   story wears one painting seat and its lines begin at one edge. The runner adds the class and, where a page's right page
   runs past the glass, the give alone (js layBook: data-give).
     the book       the window less three units a side, 90 units at the most
     the right page 44 per cent of the book, never under 31 units nor over 34.4 (about fourteen characters a row)
     the gutter     three and a half units
     the painting   what is left, 3:2, never taller than the glass leaves over the foot with the page's airs, 52 units at
                    the most: 988 px at 2000x1150, 846 at 1680x1050, 683 at 1440x900, 592 at 1280x900, 733 at 1536x735
   Where the right page is shorter than the painting its lines begin at the painting's top edge and its foot row stands
   on the painting's bottom edge; where it is taller the painting is centred on it. The book is centred on the glass. */
/* ⭐ F5 (the lead's review of 11 November 2026): the book is wider than the nav row, so what scrolls under the row would
   show beside and below its buttons; in the book the row's paper (and its fade over a page with more below) runs the
   whole room's width, and where a page must scroll its painting stands from the page's top, whole above the row */
#kotobaLesson .cl-stage > section.cl-tale--book > .cl-foot::after {
    content: ''; position: absolute; z-index: -1; top: 0; bottom: -100vh; left: -100vw; right: -100vw;
    background: var(--cl-paper); pointer-events: none;
}
#kotobaLesson .cl-stage > section.cl-tale--book > .cl-foot::before { left: -100vw; right: -100vw; }
#kotobaLesson .cl-tale--book[data-give$="scrolls"] .cl-tale-item > .cl-tale-pic,
#kotobaLesson .cl-tale--book[data-give$="scrolls"] .cl-tale-item > .cl-read-real { align-self: start; }
#kotobaLesson .cl-stage > section.cl-tale--book {
    --cl-book-w: min(calc(100vw - var(--cl-sbw, 0px) - 6 * var(--cl-u)), calc(90 * var(--cl-u)));
    --cl-book-gut: calc(3.5 * var(--cl-u));
    --cl-leaf-w: clamp(calc(31 * var(--cl-u)), calc(0.44 * var(--cl-book-w)), calc(34.4 * var(--cl-u)));
    --cl-pic-w: min(calc((var(--cl-glass) - var(--cl-foot-h) - 4 * var(--cl-u)) * 1.5),
                    calc(var(--cl-book-w) - var(--cl-book-gut) - var(--cl-leaf-w)), calc(52 * var(--cl-u)));
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: var(--cl-book-w);
    max-width: none;
    margin-left: calc((100% - var(--cl-book-w)) / 2);
    padding-top: calc(2 * var(--cl-u));
    padding-bottom: calc(2 * var(--cl-u));
}
#kotobaLesson .cl-tale--book > .cl-item.cl-tale-item {
    display: grid;
    grid-template-columns: var(--cl-tale-w, var(--cl-pic-w)) var(--cl-tale-leaf, var(--cl-leaf-w));
    grid-template-rows: auto;
    column-gap: var(--cl-book-gut);
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
}
#kotobaLesson.cl-framed .cl-stage > section.cl-tale--book > .cl-item { max-width: none; margin: 0; }
#kotobaLesson .cl-tale--book .cl-tale-item > .cl-tale-pic,
#kotobaLesson .cl-tale--book .cl-tale-item > .cl-read-real {
    grid-column: 1; grid-row: 1; align-self: center; width: 100%; max-width: none; margin: 0;
}
#kotobaLesson .cl-tale--book .cl-tale-item > .cl-tale-right,
#kotobaLesson .cl-tale--book .cl-tale-item > .cl-tale-title {
    grid-column: 2; grid-row: 1; min-width: 0;
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
}
#kotobaLesson .cl-tale--book .cl-tale-right > .cl-page.cl-page--read { margin: 0; align-self: start; padding-top: calc(0.3 * var(--cl-u)); }
#kotobaLesson .cl-tale--book .cl-tale-right > .cl-tale-foot { align-self: end; }
/* a guest's note has no margin to hang in (the painting stands there): the notes fold under the lines, in the text's line */
#kotobaLesson .cl-tale--book .cl-page > .cl-margin {
    position: relative; top: auto; right: auto; left: auto; width: auto;
    padding: 0 0 0 calc(var(--cl-who) + var(--cl-who-gap)); margin-top: calc(0.9 * var(--cl-u));
    display: grid; gap: 0.2rem;
    pointer-events: auto;
}
#kotobaLesson .cl-tale--book .cl-mnote { position: static; max-width: none; line-height: 1.5; justify-content: flex-start; text-align: left; }
#kotobaLesson .cl-tale--book .cl-mnote > .cl-mn-en { line-height: inherit; padding-block: 0; }
/* the real-world page: its painting at the book's size, its caption under it; the right page what it is over its list */
#kotobaLesson .cl-tale--book .cl-tale-item > .cl-read-real { position: relative; }
#kotobaLesson .cl-tale--book .cl-read-real .cl-read-real-frame,
#kotobaLesson .cl-tale--book .cl-read-real .cl-read-real-pic { width: 100%; max-width: none; margin: 0; }
#kotobaLesson .cl-tale--book .cl-read-real .cl-read-real-cap { position: absolute; left: 0; right: 0; top: calc(100% + 0.5 * var(--cl-u)); }
/* ⭐ story-10 (the deep review, 12 November 2026): in the book a real-world painting lies BARE, as every page's painting
   does and as the mock-up the owner approved shows it (mock/shots/page3_sign_english_2000x1150.jpg): no slip's edge and
   shadow, the paper behind it; it fills the pages' one seat. 拡大 Larger stays its door (the hand over it still inks its
   edge) and its caption stays under it. Lessons 1 to 28 and a story's page under 1200 px keep the real-world read's card. */
#kotobaLesson .cl-tale--book .cl-read-real .cl-read-real-frame > .cl-read-real-pic { box-shadow: none; background: var(--cl-paper); }
/* (the review of 11 November 2026, F2: the caption row runs the painting's whole width, 拡大 Larger at its end, before the
   answer and after; the real-world read's own float margin, --cl-real-w, is the side column's and squeezed the English) */
#kotobaLesson .cl-tale--book .cl-read-real-cap > .cl-viewcap { margin-right: 0; }
/* (F4: a real-world question's tag starts at its question's edge, past the marks' gutter) */
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-tale-right > .cl-read-tag { margin-left: calc(var(--cl-who) + var(--cl-who-gap)); }
#kotobaLesson .cl-tale--book .cl-tale-item > .cl-tale-right--real { display: flex; flex-direction: column; }
#kotobaLesson .cl-tale--book .cl-tale-right--real > .cl-tale-foot { margin-top: auto; padding-top: calc(0.4 * var(--cl-u)); align-self: stretch; }
/* the cover: the title, then who is in the story, by face */
#kotobaLesson .cl-tale--book.cl-tale--cover .cl-tale-title { margin: 0; width: auto; min-width: 0; max-width: none; align-self: center; display: block; padding-left: calc(0.4 * var(--cl-u)); }
#kotobaLesson .cl-tale--book .cl-tale-cast { margin-top: calc(1.6 * var(--cl-u)); padding-top: calc(1.3 * var(--cl-u)); gap: calc(1.1 * var(--cl-u)) calc(1.7 * var(--cl-u)); }
#kotobaLesson .cl-tale-cast li { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; line-height: 1.3; }
#kotobaLesson .cl-tale-cast .cl-tale-face { width: calc(4.2 * var(--cl-u)); height: calc(4.2 * var(--cl-u)); }
#kotobaLesson .cl-tale-cast li > i { margin-left: 0; line-height: 1.1; }
/* a question after the end: its page stays open beside it (2.6): the lines a step smaller than a page's, their marks
   with them, the question and its answers, the list folded under them, the page's number */
#kotobaLesson .cl-tale--book.cl-tale--ask { --cl-face: calc(2.3 * var(--cl-u)); --cl-tale-k: var(--k5); }
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-tale-right { display: block; }
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-tale-right > .cl-tale-foot { margin-top: var(--cl-u); }
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-tale-say + .cl-tale-say { margin-top: calc(0.25 * var(--cl-u)); }
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-tale-right > .cl-wl { margin-top: var(--cl-u); padding-left: calc(var(--cl-who) + var(--cl-who-gap)); }
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-tale-right > .cl-mean,
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-tale-right > .cl-hand-tail { margin-left: calc(var(--cl-who) + var(--cl-who-gap)); }
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-corner-seat { display: none; }
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-page > .cl-read-cap { margin-left: calc(var(--cl-who) + var(--cl-who-gap)); }
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-tale-line { font-size: var(--k5); }
/* the list folded: its rows run on as the book's guest notes do, word and meaning side by side, wrapping between rows */
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-tale-right > .cl-wl .cl-wl-list { display: flex; flex-wrap: wrap; gap: 0.1rem 1.4rem; }
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-tale-right > .cl-wl .cl-wl-row { line-height: 1.4; }
#kotobaLesson .cl-tale--book.cl-tale--ask .cl-tale-right > .cl-wl .cl-wl-list::before { flex: 0 0 100%; }
/* ⭐ A QUESTION SETTLES CALM (the lead's F7, 12 November 2026): a taught word's row prints nothing until the answer (D64),
   but its SEAT stands from the mount (the room's veil: visibility), so the answer inks it and nothing moves. (Was: the row
   unlaid, display none, and the book fitted again at the answer: the answers jumped up to 45 px under the hand.) */
/* the book's list give (js layBook, data-give 'fold'): a real-world page's list on a short glass folds as a question's does */
#kotobaLesson .cl-tale--book.cl-tale--fold .cl-tale-right > .cl-wl .cl-wl-list { display: flex; flex-wrap: wrap; gap: 0.1rem 1.4rem; }
#kotobaLesson .cl-tale--book.cl-tale--fold .cl-tale-right > .cl-wl .cl-wl-list::before { flex: 0 0 100%; }
/* (and a page's guest notes run on in one line of their own, the first guest's sentence under them whole) */
#kotobaLesson .cl-tale--book.cl-tale--fold .cl-page > .cl-margin { display: flex; flex-wrap: wrap; gap: 0.1rem 1.4rem; }
#kotobaLesson .cl-tale--book.cl-tale--fold .cl-page > .cl-margin .cl-mn-guest1 { flex: 0 0 100%; }
/* the book's last air (data-give 'tight'): the page's airs and the space between its speeches gone, never the type */
#kotobaLesson .cl-stage > section.cl-tale--book.cl-tale--tight { padding-top: calc(0.5 * var(--cl-u)); padding-bottom: calc(0.5 * var(--cl-u)); }
#kotobaLesson .cl-stage > section.cl-tale--snug.cl-tale--tight { --cl-tale-lh: 1.35; }
#kotobaLesson .cl-tale--tight .cl-tale-say + .cl-tale-say { margin-top: 0; }
#kotobaLesson .cl-tale--book.cl-tale--ask.cl-tale--tight .cl-tale-right > .cl-wl { margin-top: calc(0.3 * var(--cl-u)); }
#kotobaLesson .cl-tale--book.cl-tale--ask.cl-tale--tight .cl-tale-right > .cl-wl .cl-wl-list::before { display: none; }
#kotobaLesson .cl-tale--book.cl-tale--ask.cl-tale--tight .cl-hand-tail { margin-top: calc(0.4 * var(--cl-u)); }
#kotobaLesson .cl-tale--tight .cl-tale-say > .cl-tale-en { padding-bottom: 0; line-height: 1.3; }
#kotobaLesson .cl-tale--tight .cl-page > .cl-margin { margin-top: 0.2rem; }
#kotobaLesson .cl-tale--tight .cl-tale-foot { min-height: calc(2 * var(--cl-u)); margin-top: 0; }
#kotobaLesson .cl-stage > section.cl-tale--tight:not(.cl-tale--book) { padding-top: calc(0.5 * var(--cl-u)); }
#kotobaLesson .cl-tale--tight:not(.cl-tale--book) .cl-page.cl-page--read { margin-top: calc(0.3 * var(--cl-u)); }
/* 聞く Listen: the right page holds the page standing, its lines as print */
#kotobaLesson .cl-tale--book.cl-tale--listen .cl-tale-right > .cl-page.cl-page--read { align-self: start; }
/* a short glass (a laptop's): the right page a step closer, never the type; the English takes its room only when asked */
@media (max-height: 800px) {
    #kotobaLesson .cl-tale--book .cl-tale-say > .cl-tale-en[data-veil] { display: none; }
    #kotobaLesson .cl-tale--book .cl-tale-say > .cl-tale-en { padding-bottom: calc(0.3 * var(--cl-u)); }
    #kotobaLesson .cl-tale--book .cl-tale-say + .cl-tale-say { margin-top: calc(0.5 * var(--cl-u)); }
    #kotobaLesson .cl-stage > section.cl-tale--book { --cl-tale-lh: 1.5; }
    #kotobaLesson .cl-tale--book .cl-read-real .cl-read-real-cap > .cl-tale-en[data-veil] { display: none; }
    /* (F1: on a short glass the caption row stands in the flow under the painting, so the book counts it and gives for it
       when the English is asked; hung free under the painting it ran into the nav row with nothing to scroll) */
    #kotobaLesson .cl-tale--book .cl-read-real .cl-read-real-cap { position: static; margin-top: calc(0.4 * var(--cl-u)); }
    /* (F7, 12 November 2026: a question's English keeps its seat from the mount on a laptop's glass too, so the record inks
       it and nothing moves; where the whole does not fit, the book's gives, then the page scrolls. Was: folded until the
       record, and the book fitted again then, the painting growing 637 to 728 px under the answers) */
}
/* the book's give (js layBook, data-give): the right page's airs and its leading a step closer, never the type */
#kotobaLesson .cl-stage > section.cl-tale--book.cl-tale--snug { padding-top: var(--cl-u); padding-bottom: var(--cl-u); }
#kotobaLesson .cl-stage > section.cl-tale--snug { --cl-tale-lh: 1.5; }
#kotobaLesson .cl-tale--snug .cl-tale-say > .cl-tale-en { padding-bottom: calc(0.2 * var(--cl-u)); }
#kotobaLesson .cl-tale--snug .cl-page > .cl-margin { margin-top: 0.4rem; }
#kotobaLesson .cl-tale--snug .cl-tale-foot { margin-top: 0.2rem; }
#kotobaLesson .cl-stage > section.cl-tale--snug:not(.cl-tale--book) { padding-top: var(--cl-u); }
#kotobaLesson .cl-tale--snug:not(.cl-tale--book) .cl-page.cl-page--read { margin-top: calc(0.6 * var(--cl-u)); }
/* (and a question's: its answers a step closer, its list's rows too, the hairline over the list nearer) */
#kotobaLesson.cl-framed .cl-tale--book.cl-tale--ask.cl-tale--snug .cl-mean-opts { gap: 0.3rem; }
#kotobaLesson.cl-framed .cl-tale--book.cl-tale--ask.cl-tale--snug .cl-mean-opts > .cl-mean-o { padding-top: 0.35rem; padding-bottom: 0.35rem; }
#kotobaLesson .cl-tale--book.cl-tale--ask.cl-tale--snug .cl-tale-right > .cl-wl { margin-top: calc(0.5 * var(--cl-u)); }
#kotobaLesson .cl-tale--book.cl-tale--ask.cl-tale--snug .cl-tale-right > .cl-wl .cl-wl-row { line-height: 1.25; }
#kotobaLesson .cl-tale--book.cl-tale--ask.cl-tale--snug .cl-tale-right > .cl-tale-foot { min-height: 0; margin-top: calc(0.5 * var(--cl-u)); }
@media (prefers-reduced-motion: reduce) {
    #kotobaLesson .cl-tale-say, #kotobaLesson .cl-tale-face { transition: none; }
}

/* ⭐ CALL 15 · 句帳 THE VERSE SLIPS, KEPT (js/course-verses.js; its page is the runner's slipPageHTML: the close's own, at
   rest). The room wears this sheet by taking the lesson room's id, and stands one step over the course page it opens
   from (the landing's room is 9500; the rung is on the registry, tests/voice/zindex_ladder_test.js). Its head says 句帳 VERSES · LESSON n in the homework head's manner; it has no ⋮ to hang past
   the column, so 閉じる Close ends on the column's edge; and a slip turned to is a page already written: beat 2 with no
   inking (the close's tiers ink in 120 ms apart on the day the verse is first read; here nothing waits). */
#kotobaLesson.cl-verses { z-index: 9510; }
#kotobaLesson.cl-verses .cl-mark-n [lang="ja"] { font-family: var(--font-jp, 'Klee One', serif); font-size: 1.18em; letter-spacing: 0.06em; text-transform: none; }
#kotobaLesson.cl-verses .cl-close--beats .cl-b2 { opacity: 1; visibility: visible; transition: none; }
@media (min-width: 1000px) {
    #kotobaLesson.cl-verses.cl-framed .cl-topmark > .cl-menu-wrap { margin-right: 0; }
}