/* ========================================================================== * 稽古 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 , which the sheet must not touch under the app), so the lesson declares its own unit — 16px up to 1600 wide, ~17 at 1920, 19 at 2500 and beyond — 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. */ --cl-u: clamp(16px, 10.67px + 0.333vw, 19px); /* the lesson's own light — the room paper, one shade warmer than the wall */ --cl-paper: #F3F0EA; --cl-sheet: #FBF8F2; /* ⭐ 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 — 10.5:1 on paper, 11.3:1 on the sheet. The triple beside it is for a dimmed word (a paler ink, never a browner one). */ --cl-ink: var(--slip-ink, #3A3633); --cl-ink-rgb: 58, 54, 51; /* 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. */ --cl-ink-past: #57534E; /* ⭐ 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)); --cl-quiet: var(--color-faint-warm, #6E6860); /* ⭐ 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: var(--color-divider, #D8D2C8); --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; --cl-mend-ink: 143, 101, 18; /* 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: 67, 50, 30; /* every shadow cast in sumi-brown */ /* ⭐ 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(110, 104, 96, 0.3); --cl-col-max: calc(45 * var(--cl-u)); /* 720 at ≤1600, 768 at 1920, 855 at 2560 */ --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. */ --k1: clamp(9rem, 16vh, 13rem); /* 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 */ /* ── 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); /* the slack a told page's hand may hang under its last line before the floor takes over: 2.4rem of foot air + this. On a short page (a pair, a beat, a bare example) the hand rests ~14rem under the reading instead of on the glass floor 600px away — the owner's "buttons too low". */ --cl-tether: 11.6rem; 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; 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; } /* ⛔ components.css:378 gives EVERY