/* ==========================================================================
 * 玄関 THE COURSE'S LANDING: the public course home's dress (js/course-landing.js; BUILD_CONTRACT.md §1.2 of
 * docs/course_v2/reviews/landing_2026-10-27/). Lifted from the mock of record, mocks/final/final.css and round4.css (the
 * last two blocks of round4.css are the product beam), the .ld-* names kept. The tokens are the portal's (.ch-room,
 * css/course-home.css: the unit, the type steps, the inks); dresses come by value from css/course-lesson.css as the
 * mock took them (the door's press, the ink plate; the guest ruby left with the sentence read, 31 October 2026) and the
 * beam's from css/home-hall.css
 * (.genkan-beam, .gb-signin, .gb-account, .hall-pop), which is desktop-gated and scoped to the hall. No new colour but
 * the one the next level adds (below).
 *
 * THE NEXT LEVEL (31 October 2026: docs/course_v2/reviews/landing_review_2026-10-30/BUILD_SPEC.md §1, the mocks of record
 * mocks/opus/first.html, returning.html and next.css, whose pixels win): one fold in both states, a wall of word
 * portraits at the left (the first-time page's ten words from ten lessons, or the lesson up next's New words gate) and
 * the band at the right (the stranger's headline, what the course is, the lesson up next and its two facts;
 * the returning page's lesson up next); then 課程 THE COURSE, its tiles in one dress in both states; the end line once.
 * The beam's 単語帳 My words pill replaces the small-caps numbers and the quiet Flashcards press. One new ink: the first-time
 * wall's reading (--ld-reading), the hit's dark orange a step lighter, the mock's.
 *
 * STEP 2 (31 October 2026: BUILD_SPEC.md §2, the mock's demo/reveal.css): on the stranger's page a tile's press opens a
 * row under its own row (.ld-reveal, a full-width item of the tiles' grid): the lesson's title and promise, its New words
 * as presses in the wall's own dress (the reading in a kept seat, a press says the word), 始める Begin lesson n; under the
 * pointer the tile's title takes the accent and 見る Look stands in the verb's kept seat; the open tile keeps both.
 *
 * What changed from the mocks, and why (each a seat the static page did not have):
 *   · the room stands as a fixed layer at the hall's seat (z 9500) with its own scroller, so the sticky beam rides it;
 *     the mock was a static page in the document's flow;
 *   · the mock's body classes became the room's own (.is-first, .is-returning) and the fold's (.ld-fold--hello);
 *   · the band stands before the wall in the markup (Tab: the pill, Begin, then the wall and the tiles) and the fold's grid
 *     seats the wall at the left again, so no pixel moves;
 *   · under 1100 px (a narrow desktop glass, an iPad on its side) the fold stacks, the band over the wall, so the headline
 *     never squeezes into a column too narrow for it;
 *   · 始める Begin keeps the door's seat as its minimum width, so 続きから Resume lesson and もう一度 Open again fit;
 *   · the app's own sheets load around this one (base.css sets ruby rt at 0.55 opacity, components.css shadows a bare
 *     button and base.css rings its focus): the rules below say the mock's value back wherever those would move a pixel;
 *   · the states the mock did not draw: a tile in progress (the portal's inked copy over its wash, the 12 % feather
 *     kept), the account circle and its card (the hall's), the pill while sync signs in, the page that could not load.
 * Hover and focus change ink only; nothing moves.
 * ========================================================================== */

/* ── the room: the portal's tokens, standing at the hall's seat with its own scroller ── */
.ch-room.ld-room {
    z-index: 9500;                                /* the hall's seat (css/home-hall.css .home-hall-root): the public root has no hall */
    --e2-tell: calc(1.0625 * var(--ch-u));        /* the teacher's prose step (course-lesson.css): 18.1 at 1280, 20.2 from 1600 */
    --ld-origin: calc(2 * var(--ch-u));           /* the tiles' gutter (course-lesson.css --cl-origin-page) */
    --ld-face: 680px;                             /* the fold's left column: the wall */
    --ld-tier: calc(3.2 * var(--ch-u));           /* the air between the fold and the course */
    --ld-hair: rgba(42, 35, 31, 0.08);            /* the start's hairline, the beam's lintel: in sumi (the elevation) */
    /* the first-time wall's reading: a READING, so the quiet ink, opaque (the design elevation's step 1, 1 November 2026:
       the terracotta #B0653A, the hit a step lighter, printed 3.87:1 on the paper, under AA at 14 px; the quiet ink is
       5.75:1, 5.99:1 on the opened row's slip) */
    --ld-reading: var(--ch-quiet);
    --ld-door-rule: rgba(42, 35, 31, 0.55);       /* the door's press rule (course-lesson.css .cl-next), in the room's sumi */
    --ld-press-deep: #2E4766;                     /* a quiet press under the pointer (course-home.css .ch-cover:hover .ch-cover-press) */
    --ld-t: 160ms ease;                           /* the course's hover: colour only */
}
/* (the ?landing=1 dev hook takes no rung of its own: over the local hall, at the hall's own 9500, it stands by the body's
   order, re-appended when the hall rises: js/course-landing.js guardDev) */
/* leaving: the hall's 180 ms dissolve over whatever stands beneath, the pointer fenced; a held paint takes every press on
   the room itself while a lesson deals its door (js/home-hall.js U-057) */
.ch-room.ld-room.is-leaving { opacity: 0; pointer-events: none; transition: opacity 180ms var(--ch-ease-settle); }
.ch-room.ld-room.is-leaving *, .ch-room.ld-room.is-holding * { pointer-events: none; }
/* ⭐ (the shelf finish's review round) leaving for the flashcards (js/course-landing.js openBook), the page takes its beam off
   the glass at once and only the page beneath it dissolves: the flashcards' beam already stands under it, whole from the
   first frame. The two beams land on each other but for what stands left of the pill (‹ 課程 Course and ⋮, the local ✕ 閉じる
   Close), and a fading copy of one over the other read as a ghost */
.ch-room.ld-room.is-leaving.is-to-shelf { clip-path: inset(72px 0 0 0); }
.ld-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── 0 · the boot's face under 'course' (seat E's defect 2, 28 October 2026): index.html's @public-root stamps
   html.kotoba-course before the body exists, and this sheet, in the head and so painted with the first frame, dresses the
   app's #loading seal (the hall's boot: a seal, KOTOBA and three dots, centred) as this page's beam on the room's paper
   (the band 72 with its lintel, the seal 40, KOTOBA 16, no dots), so the first frame a stranger sees is the course's own
   face and the room takes over without a pixel moving (js/course-landing.js reveal paints the beam first). js/app.js hides
   #loading after the word bundle, beneath the room by then. On the phone the seal stands centred without its dots, as the
   phone screen's does. ── */
html.kotoba-course #loading { background: #FCFAF2; justify-content: flex-start; align-items: stretch; }   /* 白練, the room's paper */
html.kotoba-course #loading .loading-dots { display: none; }
@media (min-width: 769px) {
    html.kotoba-course #loading .loading-content {
        flex-direction: row; align-items: center; justify-content: center; gap: 0;
        height: 72px; box-sizing: border-box;
        background: #FCFAF2; border-bottom: 1px solid rgba(42, 35, 31, 0.08);   /* the beam on the page's own paper, its lintel in sumi */
    }
    /* ⭐ (the course review's second round, call 16, 10 November 2026) THE FIRST FRAME'S BEAM STANDS ON THE ROOM'S OWN COLUMN.
       It kept the fixed 1280 column of 28 October while the room took the breathing column on 2 November (steps 3 and 4,
       below), so on every load the seal and KOTOBA slid sideways as the room took over: 121 px at 2000 px of width, 24 px
       at 1536, 29 px the other way at 1280. The column is the room's formula said again (--ch-col: 1200/18 of the unit)
       and the box keeps the scroll gutter the room keeps (scrollbar-gutter), so nothing moves at the handover. */
    html.kotoba-course #loading { overflow-y: auto; scrollbar-gutter: stable; }
    html.kotoba-course #loading .loading-brand {
        flex-direction: row; align-items: center; gap: 10px;
        width: 100%; max-width: calc(1200 / 18 * clamp(16px, 9px + 0.625vw, 22px) + 80px); padding: 0 40px; box-sizing: border-box;
    }
    html.kotoba-course #loading .loading-seal { width: 40px; height: 40px; box-shadow: none; }
    html.kotoba-course #loading .kotoba-wordmark--bar { font-size: 16px; letter-spacing: 0.22em; }
}
@media (max-width: 768px) {
    html.kotoba-course #loading { justify-content: center; align-items: center; }
}

/* ── 0b · the first frame has words (the course review's second round, call 16, 10 November 2026): index.html carries the
   page's first screen as a true stranger reads it, as the room itself (#courseLanding.ld-pre, written by
   scripts/course/prerender_landing.js: the brand and the fold, words only). Laid away everywhere (the local product, a
   returning learner, a phone, a lesson's address); shown to a stranger on a computer once the head's script has seen
   one and the faces have landed. The room adopts it as it stands (js/course-landing.js ensureEl; reveal takes ld-pre
   off), so from then on it is the page and these two rules say nothing. ── */
#courseLanding.ld-pre { display: none; }   /* (this sheet is in the head, so the block is never painted before the rule is in) */
@media (min-width: 769px) {
    html.kotoba-course.kotoba-first.kotoba-faces #courseLanding.ld-pre { display: block; }
}

/* ── 1 · the beam: the hall beam's dress (css/home-hall.css .genkan-beam), on the course's 1200 column ── */
/* ⭐ THE BEAM STANDS ON THE PAGE'S OWN PAPER (the design elevation's step 1, 1 November 2026: the 72 px band a shade
   darker than the room, #F0EDE8 on #F3F0EA, was one of the two greys a stranger met first); the lintel alone parts it */
.ch-room .ld-beam {
    position: sticky; top: 0; z-index: 100; height: 72px;
    background: var(--ch-paper); border-bottom: 1px solid var(--ld-hair);
}
.ld-beam-in { display: flex; align-items: center; height: 100%; max-width: calc(var(--ch-col) + 80px); margin: 0 auto; padding: 0 40px; }
.ch-room .ld-brand { display: flex; align-items: center; gap: 10px; margin: 0; font: inherit; user-select: none; }   /* the hall's .gb-brand: not a press, this is home */
.ch-room .ld-seal { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }               /* rung 40, round, no shadow */
/* ⭐ THE BRAND'S SEAL SIGNS IN INK ON THE NEW PAPER (the review round of the design elevation, 1 November 2026; the record's
   V1): on 白練 the seal's cream coin (#EEE6D8) stood as a beige disc, its step from the ground doubled (4.1 → 8.5 L* on the
   beam). Only the coin is lifted into the paper (index.html #cl-seal-lift, slopes cut to its cream) and multiplied, the
   way a painting's own paper melts; the hand-inked strokes and the gold dot stay as drawn. The four seats the course prints
   it in: the beam, the sign-off, the phone screen, the boot face. The hall's own seals keep their coin. */
.ch-room .ld-seal,
.ch-room .ld-signoff .ks-seal img,
.ch-room .ld-phone-seal,
html.kotoba-course #loading .loading-seal { filter: url(#cl-seal-lift); mix-blend-mode: multiply; box-shadow: none; }
/* the course's one search (returning page): the portal's glass (course-home.css .ch-glass) with its key in a quiet frame.
   ⭐ THE SHELF TOP (the owner's pick of 6 November 2026, docs/course_v2/reviews/shelf_elevation_2026-11-05/round2/): the glass stands
   in the beam's right end, on both beams, first of the end. ⭐ THE KEY STAYS (the owner, 8 November 2026: "keep shortcut cmd K near
   magnifying glass icon for search exactly like we do now"): the ⌘K hint beside the glass in the quiet frame it wore before, the
   press's 8 px of air at its ends (.ch-glass), no margin of its own; the glass is on both beams, so the pill's seat is one on both */
.ch-room .ld-beam-r .ld-glass { margin: 0; color: var(--ch-stone); }
.ch-room .ld-glass:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; border-radius: 4px; box-shadow: none; }
.ch-room .ld-kbd { font-family: var(--ch-uif); font-size: 10.5px; font-weight: 500; line-height: 1; letter-spacing: 0.04em; color: var(--ch-quiet); border: 1px solid rgba(44, 44, 44, 0.14); border-radius: 4px; padding: 3px 5px; }
/* the beam's right end: in the local product ✕ 閉じる Close first (one course page, 31 October 2026), then the glass, then the My
   words pill (once the shelf holds a word), then 入る Sign in or the account circle, the same on the course page and over the
   flashcards, so the pill holds one seat (⭐ the bar stands still, 2 November 2026); over the flashcards ⋮ ends the beam after
   the account (⭐ the shelf top, 6 November 2026) */
.ld-beam-r { display: flex; align-items: center; gap: 16px; margin-left: auto; }
/* ⭐ THE HELD SEAT (the shelf top): the course page has no menu, so its right end holds ⋮'s seat EMPTY, ⋮'s 24 px (.ld-more)
   and the row's 16 px gap, and the glass, the pill and the account sit at one x on both beams (js/course-landing.js beamHTML:
   the class is the course page's, never the shelf's) */
.ch-room .ld-beam-r.ld-seat-held { padding-right: 40px; }
/* 入る Sign in and 単語帳 My words: the hall's ghost pill (css/home-hall.css .gb-signin), the duet inside it; the pill's
   kanji in the course's sumi */
.ch-room .ld-signin, .ch-room .ld-pill {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px;
    border: 1px solid rgba(44, 44, 44, 0.14); border-radius: 8px; background: transparent;
    font-family: var(--ch-uif); font-size: 13px; font-weight: 600; line-height: 1; color: var(--ch-stone); white-space: nowrap;
    transition: color var(--ld-t), border-color var(--ld-t);
}
.ch-room .ld-signin [lang="ja"] { font-family: var(--ch-chrome-jp); font-weight: 500; }
.ch-room .ld-pill [lang="ja"] { font-family: var(--ch-chrome-jp); font-weight: 500; color: var(--ch-jp); }
.ch-room .ld-signin:hover, .ch-room .ld-pill:hover { color: var(--ch-ink); border-color: rgba(44, 44, 44, 0.28); box-shadow: none; }
.ch-room .ld-signin:focus-visible, .ch-room .ld-pill:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; box-shadow: none; }
.ch-room .ld-signin[disabled] { cursor: default; color: var(--ch-quiet); }
/* ✕ 閉じる Close (the local product's way back to the hall): the old portal's own press (course-home.css .ch-close), a round
   ghost pill, the ✕ a step lighter; hover is ink. ⭐ Over the flashcards the same seat and the same dress hold the beam's
   one way out, ‹ 課程 Course, back to the course page, in both products (the shelf finish, 1 November 2026: the owner's
   "close and back to course is a duplication"; from the flashcards Course, then Close, reaches the hall) */
.ch-room .ld-close, .ch-room .ld-back {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px 7px 12px;
    border: 1px solid rgba(44, 44, 44, 0.14); border-radius: 999px; background: transparent;
    font-family: var(--ch-uif); font-size: 13px; font-weight: 500; line-height: 1; color: var(--ch-stone); white-space: nowrap;
    transition: color var(--ld-t), border-color var(--ld-t);
}
.ch-room .ld-close [lang="ja"], .ch-room .ld-back [lang="ja"] { font-family: var(--ch-chrome-jp); font-weight: 500; }
.ch-room .ld-close-x { font-size: 12px; color: var(--ch-quiet); }
.ch-room .ld-close:hover, .ch-room .ld-back:hover { color: var(--ch-ink); border-color: rgba(44, 44, 44, 0.28); box-shadow: none; background: transparent; }
.ch-room .ld-close:focus-visible, .ch-room .ld-back:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; box-shadow: none; }
/* ⭐ THE SHELF TOP (6 November 2026): over the flashcards the way back stands at the LEFT beside the brand, a quiet word with no
   border, where a way back stands (iOS, every reader); the right end is then two marks and two pills, not four presses. The
   seat the shared block gives it (its height, its gap, its type) stays; only the frame and the place differ */
.ch-room .ld-back { margin-left: 28px; padding: 7px 0; border-color: transparent; border-radius: 0; color: var(--ch-quiet); }
.ch-room .ld-back:hover { border-color: transparent; }
/* ⭐ ⋮ the settings rail's door over the flashcards (the shelf finish: "setting dots should be moved to top"), beside the
   account: three dots in the beam's stone ink (an SVG, never a system symbol face), ink under the hand and while the rail
   it opened stands; the account circle's height, so the row keeps one line */
.ch-room .ld-more {
    display: flex; align-items: center; justify-content: center; width: 24px; height: 34px; color: var(--ch-stone);
    transition: color var(--ld-t);
}
.ch-room .ld-more svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.ch-room .ld-more:hover, .ch-room .ld-more:active { color: var(--ch-ink); background: transparent; box-shadow: none; transform: none; }
.ch-room .ld-more[aria-expanded="true"] { color: var(--ch-ink); }
.ch-room .ld-more:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; border-radius: 4px; box-shadow: none; }
/* signed in: the hall's account circle (css/home-hall.css .gb-account), the initial in the accent */
.ch-room .ld-account { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; }
.ch-room .ld-account-circle {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    background: color-mix(in srgb, var(--ch-accent) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--ch-accent) 26%, transparent);
    font-family: var(--ch-uif); font-size: 12px; font-weight: 600; line-height: 1; color: var(--ch-accent);
    transition: border-color 0.25s ease, background 0.25s ease;
}
.ch-room .ld-account:hover .ld-account-circle, .ch-room .ld-account[aria-expanded="true"] .ld-account-circle {
    background: color-mix(in srgb, var(--ch-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--ch-accent) 42%, transparent);
}
.ch-room .ld-account:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; box-shadow: none; }

/* ── ⭐ 1b · the beam over the flashcards (BUILD_SPEC.md §3, the landing's step 3, 31 October 2026: "the shelf under the
   landing's own beam (one product)"): js/course-landing.js shelfBeam draws this beam in a slim seat of its own
   (#ldShelfBeam) over the course shelf, at the app beam's rung (z 100, css/ink-wash-tabs.css .ink-wash-nav): the word page
   (9000), the sheets, the palette and the hall stand over it, the side panels (90) beneath it. The room's tokens, none of its seat; never on a phone. ── */
/* ⭐ THE BAR STANDS STILL (2 November 2026): css/base.css gives every scroller an 8 px scrollbar that takes layout, so the course
   page's beam, inside its scroller, was 8 px narrower than this seat over the whole glass: under real scrollbars the seal and the glass
   moved 4 px at a press and the pill would have moved 4 to 8 (a Chrome that hides its scrollbars cannot see it). This seat reserves the same
   gutter (no scrollbar drawn: overflow hidden; .ld-pop is fixed, so it is not clipped) and the course page always reserves its own
   (below), so the two beams land on each other; and the wall under this beam reserves its own (css/course-shelf.css), so KOTOBA,
   the head row and the first card keep one left edge. The band's hairline hangs from the seat, so it still reaches the glass's
   edge across the gutter */
.ch-room.ld-room.ld-sbeam {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    overflow: hidden; scrollbar-gutter: stable; background: transparent; border-bottom: 1px solid var(--ld-hair);
}
/* over the flashcards the beam stands on the shelf's own paper (css/course-shelf.css --cs-paper), so no band parts it
   from the wall whatever paper the shelf lays */
.ch-room.ld-room.ld-sbeam .ld-beam { position: relative; height: 71px; border-bottom: 0; background: var(--cs-paper, var(--ch-paper)); }
@media (max-width: 768px) { .ch-room.ld-room.ld-sbeam { display: none; } }
@media (min-width: 769px) { .ch-room.ld-room:not(.ld-sbeam) { scrollbar-gutter: stable; } }
/* ⭐ (the bar stands still) it stands for the side panels too: they open beneath it (css/course-shelf.css). The rail used to push this
   row 184 px at a press of ⋮, which slid 入る Sign in under the pointer: a second press on ⋮ opened Google's card. Now ⋮ stays under the
   pointer and a second press shuts its rail; a panel left open when the learner goes to the course page and back moves nothing either.
   The one narrow rule: on a narrow glass the ⌘K hint steps out, of both beams, and the glass keeps its width across the two pages */
@media (max-width: 900px) {
    .ch-room.ld-room .ld-beam .ld-kbd { display: none; }
}
/* over the flashcards the brand is a press back to the course (the owner, 20 October 2026): the seal and KOTOBA as they
   stand, the wordmark's ink deepening under the pointer, never its place */
.ch-room .ld-home { padding: 0; color: inherit; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; }
.ch-room .ld-home:hover, .ch-room .ld-home:active { background: none; box-shadow: none; transform: none; }
.ch-room .ld-home .kotoba-wordmark { transition: color var(--ld-t); }
.ch-room .ld-home:hover .kotoba-wordmark { color: var(--ch-accent); }
.ch-room .ld-home:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 4px; border-radius: 6px; }
/* the pill lit as the place (JUDGE.md §4 item 8: "a place must read at rest"): ⭐ (the shelf finish, 1 November 2026, the
   designer's B12) pressed into the page, a wash of the room's own ink with its rule gone, as the shelf marks whatever is
   held (an indigo ring at rest read as a control, not a place); the duet in ink, the numbers a step darker; the seat,
   padding and border width as they stand, so the beam still lands on the course page's */
.ch-room .ld-pill[aria-current="page"] {
    color: var(--ch-ink);
    background: color-mix(in srgb, var(--ch-ink) 5.5%, transparent);
    border-color: transparent;
}
.ch-room .ld-pill[aria-current="page"]:hover { color: var(--ch-ink); background: color-mix(in srgb, var(--ch-ink) 8%, transparent); border-color: transparent; }

/* the account card: the hall's one menu card (css/home-hall.css .hall-pop), by value: who is signed in, the sync line,
   出る Sign out */
.ch-room .ld-pop {
    position: fixed; z-index: 120; width: 296px; padding: 8px;
    background: var(--ch-sheet); border: 1px solid transparent; border-radius: 8px;   /* the elevation: a slip, no ring */
    box-shadow: var(--ch-slip-rest);
}
.ch-room .ld-pop[hidden] { display: none; }
.ch-room .ld-pop-head { padding: 9px 10px 7px; font-family: var(--ch-uif); font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ch-ink); }
.ch-room .ld-pop-sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--ch-quiet); }
.ch-room .ld-pop-sync { display: flex; align-items: center; gap: 7px; padding: 0 6px 10px; font-family: var(--ch-uif); font-size: 11.5px; color: var(--ch-stone); }
.ch-room .ld-pop-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary, #8C8578); }
.ch-room .ld-pop-dot--synced { background: var(--color-moss, #6B7F5C); }
.ch-room .ld-pop-dot--syncing { background: var(--color-amber-deep, #8A6E35); }
.ch-room .ld-pop-dot--stuck { background: var(--color-terracotta, #A35A4A); }
.ch-room .ld-pop-row { display: block; width: 100%; padding: 8px 10px 9px; border-radius: 7px; text-align: left; font-family: var(--ch-uif); transition: background-color 0.15s ease; }
.ch-room .ld-pop-row b { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--ch-ink); }
.ch-room .ld-pop-row b [lang="ja"] { font-family: var(--ch-chrome-jp); font-weight: 500; color: var(--ch-jp); }
.ch-room .ld-pop-row > span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--ch-quiet); }
.ch-room .ld-pop-row:hover { background: var(--ch-wash); box-shadow: none; }
.ch-room .ld-pop-row:focus { outline: none; }
.ch-room .ld-pop-row:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: -2px; box-shadow: none; }
/* ⭐ the card's second press and its one question (11 November 2026; the About page's Privacy promises it): 消す Delete my
   account stands apart under a hairline, quiet until it is asked; asked, its own press wears the miss's terracotta */
.ch-room .ld-pop-row--apart { margin-top: 6px; border-radius: 0 0 7px 7px; box-shadow: inset 0 1px 0 var(--ch-rule); }
.ch-room .ld-pop-row--apart:hover { box-shadow: inset 0 1px 0 var(--ch-rule); }
.ch-room .ld-pop-row--apart b { font-weight: 400; color: var(--ch-stone); }
.ch-room .ld-pop-row--apart b [lang="ja"] { color: inherit; }
.ch-room .ld-pop-say { margin: 0; padding: 0 10px 9px; font-family: var(--ch-uif); font-size: 12px; line-height: 1.5; color: var(--ch-stone); }
.ch-room .ld-pop-row--del b, .ch-room .ld-pop-row--del b [lang="ja"] { color: var(--color-terracotta, #A35A4A); }

/* ── the column: 1200 px (x 40 to 1240 at 1280), centred on a wider glass; 48 px under the beam ── */
.ld-col { max-width: calc(var(--ch-col) + 80px); margin: 0 auto; padding: 48px 40px 0; }

/* ── 2 · the fold: the wall at the left, the band at the right, one order in both states (next.css .nx-fold). The band
   stands first in the markup (the keyboard meets Begin before the wall); the grid seats the wall in the first column. ── */
.ld-fold { display: grid; grid-template-columns: minmax(0, var(--ld-face)) minmax(380px, 1fr); column-gap: calc(2.4 * var(--ch-u)); align-items: start; }
.ld-fold > .ld-wall { grid-column: 1; grid-row: 1; }
.ld-fold > .ld-band { grid-column: 2; grid-row: 1; }
/* the stranger's band stands level with the middle of its wall */
.ld-fold.ld-fold--hello { align-items: center; }
/* a page whose wall could not be read (landing.json missing): the band takes the fold alone */
.ld-fold.ld-fold--bare { grid-template-columns: minmax(0, 1fr); }
.ld-fold.ld-fold--bare > .ld-band { grid-column: 1; }
/* a narrow desktop glass: the band over the wall, so the headline never squeezes */
@media (max-width: 1100px) {
    .ld-fold, .ld-fold.ld-fold--hello { grid-template-columns: minmax(0, 1fr); row-gap: var(--ch-air-between); }
    .ld-fold > .ld-band { grid-column: 1; grid-row: 1; }
    .ld-fold > .ld-wall { grid-column: 1; grid-row: 2; justify-self: center; width: min(100%, var(--ld-face)); }
}

/* ── the wall: five portraits a row at 120 px, spread across the face's column (next.css .nx-gate) ── */
.ld-wall { display: grid; grid-template-columns: repeat(5, 120px); justify-content: space-between; row-gap: 18px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ch-room .ld-cell { display: flex; flex-direction: column; align-items: center; width: 120px; min-width: 0; margin: 0; text-align: center; }
/* every portrait wears the lesson's portrait dress (course-lesson.css .cl-door-portrait img: the washi lifted to white and
   multiplied) and the plate's feather (next.css, the craft director's F4), so a paper a tone off the page's loses its
   square edge and the wall reads as one dress. The lift is the first-time wall's, a step stronger than the plate's
   (js/course-landing.js DEFS #ld-washi-lift; 中's goldfish the test), on every wall since step 2: the returning wall's 女
   (lesson 9) showed its paper square under the plate's */
.ld-seat {
    display: block; width: 120px; height: 120px; object-fit: contain; filter: url(#ld-washi-lift); mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
                        linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
                linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
    mask-composite: intersect;
}
/* (THE STRIP'S RULE, 8 November 2026: a word and its English stand inside their own seat) the caption takes its seat's width,
   so the English wraps inside it rather than as wide as a long word above it (lesson 28's (ご)紹介する spread its English
   into 置く's); a word of the English too long for a line breaks rather than leave the seat */
.ld-cap { display: flex; flex-direction: column; align-items: center; align-self: stretch; text-align: center; }
.ch-room .ld-k { display: block; margin-top: 4px; font-size: var(--k5); line-height: 1.3; color: var(--ch-jp); white-space: nowrap; }
.ld-en { display: block; margin-top: 1px; font-family: var(--ch-tell); font-size: calc(0.9 * var(--ch-u)); line-height: 1.4; color: var(--ch-quiet); overflow-wrap: anywhere; }
/* a set tile, as the gate prints it (course-lesson.css .cl-wt--set .cl-wt-w): its first and last word with `to` between in
   the app's quiet voice, a step smaller, the line parting between the two words and never inside one (a long set, (お)父さん
   to (お)母さん, takes two lines inside its 120 px; one line, nowrap, stood 100 px over its neighbours) */
.ch-room .ld-cell--set .ld-k { font-size: calc(1.3 * var(--ch-u)); line-height: calc(1.3 * var(--k5)); white-space: normal; }   /* the row's line box kept: the English lines stand level */
/* a set's reading, `ひとつ to やっつ`: one line a step smaller in its kept seat, centred over the cell (a long one runs into
   the air between the cells, never onto a neighbour: the row's cells stand 1fr apart) */
.ch-room .ld-cell--set .ld-r { font-size: 12px; white-space: nowrap; }
.ch-room .ld-k i { font-family: var(--ch-uif); font-style: normal; font-size: var(--e3); line-height: 1; color: var(--ch-quiet); margin: 0 0.25em; }   /* line-height 1: the Latin word never grows the line */
.ld-one { white-space: nowrap; }
/* the first-time wall's word is a press that says it (next.css .nx-cellbtn): the reading wakes in its kept seat over the
   word under the pointer, the focus or while it speaks (visibility only: the seat is held at rest, nothing moves), and
   the word takes the accent */
.ch-room .ld-say {
    display: flex; flex-direction: column; align-items: center; width: 120px; padding: 0; border: 0; border-radius: 10px;
    background: none; color: inherit; font: inherit; cursor: pointer;
}
.ch-room .ld-say:hover, .ch-room .ld-say:active { background: none; box-shadow: none; }
.ch-room .ld-say:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 4px; box-shadow: none; }
.ch-room .ld-r { display: block; height: 18px; margin-top: 4px; font-family: var(--ch-jpf); font-size: 14px; font-weight: 600; line-height: 18px; letter-spacing: 0.06em; color: var(--ld-reading); visibility: hidden; }
/* (the review round of the design elevation, 1 November 2026: Klee One at 400 and 12 to 14 px never draws a pixel as dark as
   its ink on a 1x screen, so the quiet ink's 5.75:1 printed 3.4 to 3.9:1 on the glass; at 600, the weight every small
   reading of the lesson and the card already wears, the strokes reach the ink) */
.ch-room .ld-say:hover .ld-r, .ch-room .ld-say:focus-visible .ld-r, .ch-room .ld-say.is-on .ld-r { visibility: visible; }
.ch-room .ld-say .ld-k { margin-top: 0; transition: color var(--ld-t); }
.ch-room .ld-say:hover .ld-k, .ch-room .ld-say:focus-visible .ld-k, .ch-room .ld-say.is-on .ld-k { color: var(--ch-accent); }

/* ── 3 · the band ── */
.ld-band { min-width: 0; padding-top: 2px; }
/* the lede: the stranger's `LESSON 1`, or the state word in the same quiet caps (the portal's eyebrow, its weight the
   lede's, so a look never changes the line's dress) */
.ch-room .ld-lede { font-family: var(--ch-uif); font-size: var(--e4); font-weight: 400; line-height: 1.45; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ch-quiet); }
.ch-room .ld-lede .ch-eyebrow { font-weight: 400; letter-spacing: 0.12em; line-height: 1.45; }
.ch-room .ld-title { display: flex; align-items: baseline; gap: calc(0.6 * var(--ch-u)); margin-top: 6px; font-size: var(--k4); font-weight: 400; line-height: 1.15; }
.ch-room .ld-mark { font-family: var(--ch-jpf); font-size: var(--k4); color: var(--ch-jp); }
.ld-name { font-family: var(--ch-tell); font-size: var(--k4); letter-spacing: -0.01em; color: var(--ch-ink); }
.ch-room .ld-promise { margin-top: 12px; max-width: 52ch; font-family: var(--ch-tell); font-size: var(--e2-tell); line-height: 1.5; color: var(--ch-stone); text-wrap: pretty; }
/* 始める Begin: the door's own press (course-lesson.css .cl-next), by value; hover is ink */
.ch-room .ld-begin {
    box-sizing: border-box; display: inline-flex; align-items: baseline; justify-content: center; gap: 0.55rem;
    min-width: calc(6.2 * var(--ch-u) + 3rem); margin-top: calc(1.3 * var(--ch-u)); padding: 0.6rem 1.1rem; white-space: nowrap;
    border: 1.5px solid var(--ld-door-rule); border-radius: 8px; color: var(--ch-ink);
    transition: border-color var(--ld-t);
}
.ch-room .ld-begin [lang="ja"] { font-family: var(--ch-chrome-jp); font-size: var(--k6); font-weight: 400; line-height: 1.45; color: var(--ch-jp); transition: color var(--ld-t); }
.ch-room .ld-begin i { font-family: var(--ch-uif); font-style: normal; font-size: var(--e3); line-height: 1.45; letter-spacing: 0.03em; color: var(--ch-quiet); transition: color var(--ld-t); }
.ch-room .ld-begin:hover { border-color: var(--ch-ink); }
.ch-room .ld-begin:hover [lang="ja"], .ch-room .ld-begin:hover i { color: var(--ch-accent); }
.ch-room .ld-begin:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; }
/* the stranger's band (next.css round 2): the headline, broken after its comma; what the course is (the topics line under
   it left on 31 October 2026, the owner's word); under a hairline the lesson up next, its press and the two facts */
.ch-room .ld-hero { margin: 0; font-family: var(--ch-tell); font-weight: 500; font-size: clamp(34px, 1.4vw + 18px, 46px); line-height: 1.12; letter-spacing: -0.015em; color: var(--ch-ink); text-wrap: balance; }
.ld-hero-a, .ld-hero-b { display: block; }
.ch-room .ld-sub { margin-top: 14px; max-width: 36ch; font-family: var(--ch-tell); font-size: var(--e2-tell); line-height: 1.5; color: var(--ch-stone); text-wrap: pretty; }
.ch-room .ld-start { margin-top: calc(1.4 * var(--ch-u)); padding-top: calc(1.1 * var(--ch-u)); border-top: 1px solid var(--ld-hair); }
.ch-room .ld-title--start, .ch-room .ld-title--start .ld-mark, .ch-room .ld-title--start .ld-name { font-size: var(--k5); }
.ch-room .ld-start .ld-begin { margin-top: 12px; }
.ch-room .ld-facts { margin-top: 12px; font-family: var(--ch-uif); font-size: var(--e3); font-weight: 400; line-height: 1.5; color: var(--ch-stone); }
.ld-facts span { display: block; }
/* F4 (the course review of 10 November 2026): the browser keeps no record. The band's last thing, in the page's quiet
   small ink (.ld-end's, .ld-facts'), each line on its own row and balanced (no word alone on a last row), the band's own
   inner air above; never bold, never red. In the flow in both states (the lead's call, 12 November 2026): the stranger's
   band grows inside its taller wall and re-centres; where the band is the taller side (a returning learner on a one-row
   lesson) the course below steps down by the lines' height. Never hung out of the flow, where it could reach the course. */
.ch-room .ld-unsaved { margin-top: 12px; font-family: var(--ch-uif); font-size: var(--e3); font-weight: 400; line-height: 1.45; color: var(--ch-stone); }
.ld-unsaved span { display: block; text-wrap: balance; }
/* ⭐ [CHOICE] RT-06 (the owner's wording C; the deep review's mends of 12 November 2026, mend 4; js storyHTML): THE NEXT
   LESSON NAMES ITS STORY. One quiet line under the promise of a returning band whose lesson holds a picture story: the
   part's ruled name in the lede's eyebrow dress (読む READING), a middle dot, the story's title in Klee One at the
   promise's size, then its English in the promise's own type. Not a press: no hover, nothing moves. A guest's kana as the
   lesson prints it (css/course-lesson.css .cl-guest rt, opaque in the room's past ink). */
.ch-room .ld-story { margin-top: 10px; max-width: 52ch; font-family: var(--ch-tell); font-size: var(--e2-tell); line-height: 1.4; color: var(--ch-stone); }
.ch-room .ld-story .ch-eyebrow { font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }
.ch-room .ld-story-dot { color: var(--ch-quiet); }
.ch-room .ld-story-t { font-family: var(--ch-jpf); font-size: var(--e2-tell); color: var(--ch-jp); }
.ch-room .ld-story rt { opacity: 1; color: #514A44; }

/* the ink plate (course-lesson.css .cl-doorart--ink img): the washi lifted to white, multiplied, feathered 12 % on four sides.
   ⭐ THE WHOLE PAINTING (the owner, 12 November 2026; the deep review's VO-01): the seat is 5:4 and the picture's box is
   the painting's own shape, centred in it (auto size held to the seat), as the lesson's door shows it. Never object-fit:
   cover crops a square painting's heads, and contain letterboxes it inside the img's box, where the mask would feather
   empty paper and print the painting's own top and foot as a hard line. The wash and the inked copy of a lesson in
   progress take this same box, so the sweep runs across the picture. */
.ld-pic img {
    display: block; position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%;
    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;
}
.ld-pic { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; }

/* the reading's optional prefix, (お)とうさん: the main app's quiet mark (base.css .opt-mark), its parens small */
.ch-room .ld-r .opt-mark, .ch-room .ld-k .opt-mark { font-family: inherit; opacity: 1; color: var(--ch-quiet); }   /* opaque, the shelf's own (0.58 printed 3.89:1) */
.ch-room .ld-r i { font-family: var(--ch-uif); font-style: normal; font-size: 11px; color: var(--ch-quiet); margin: 0 0.3em; }

/* ── 4 · the course: 課程 THE COURSE (· 16 lessons on the returning page), the open lessons as painted tiles, five across,
   one dress in both states (next.css .nx-tiles): the number above the painting, the title and the kanji under it ── */
.ld-course { margin-top: var(--ld-tier); }
.ch-room .ld-h2 { display: flex; align-items: baseline; gap: calc(0.6 * var(--ch-u)); margin: 0 0 var(--ch-air-in); font-size: calc(1.5 * var(--e3)); font-weight: 400; line-height: 1.3; }
.ch-room .ld-h2 [lang="ja"] { font-family: var(--ch-jpf); font-size: var(--k5); color: var(--ch-jp); }
/* each tile is one press spanning four shared rows (subgrid), so the titles and the kanji stand on one line across a row */
.ld-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--ld-origin); }
.ch-room .ld-tile { position: relative; grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; min-width: 0; outline: 0; }
.ch-room .ld-tile:nth-child(n + 6) { margin-top: var(--ch-air-between); }
/* the folio: untracked, tabular (the craft director's F6) */
.ld-num { margin-bottom: 6px; font-family: var(--ch-uif); font-size: var(--e4); line-height: 1.45; letter-spacing: 0.04em; color: var(--ch-stone); font-variant-numeric: tabular-nums; }
/* two title lines reserved, so every row's titles and kanji share a line */
.ld-tile-title { margin-top: 8px; min-height: 2.7em; font-family: var(--ch-tell); font-size: var(--e2); line-height: 1.35; color: var(--ch-ink); transition: color var(--ld-t); }
.ch-room .ld-tile-k { margin-top: 3px; font-size: calc(0.95 * var(--ch-u)); line-height: 1.4; letter-spacing: 0.08em; color: var(--ch-jp); }
/* RT-04 (shown to the owner as a choice beside D63, 12 November 2026): on the returning page the kanji a learner can read
   darken lesson by lesson. A lesson not finished prints its kanji in the quiet ink (#69625A, 5.75:1 on the paper; never
   opacity); a finished one (walked, or marked finished by hand: the record's 済) keeps the sumi. The stranger's page, hover
   and focus are as they were. */
.ch-room.ld-room.is-returning .ld-tile:not(.is-done) .ld-tile-k { color: var(--ch-quiet); }
.ch-room .ld-tile:hover .ld-tile-title, .ch-room .ld-tile:focus-visible .ld-tile-title { color: var(--ch-accent); }
.ch-room .ld-tile:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 4px; border-radius: 4px; }
/* THE PAINTING CARRIES THE STATE (D63, the returning page): the portal's wash (course-home.css .ch-seat--wash img) on the
   tile's dress, the washi lift first, still multiplied and feathered; a lesson in progress lays its inked copy over its
   wash, masked to --ink with the portal's dry-brush edge and the four-side feather; a finished lesson whole. The
   stranger's tiles are whole: nothing is begun. ⭐ A LESSON AHEAD WAITS UNDER PAPER, IT IS NOT DRAINED (the owner's call 9
   of the design elevation, 1 November 2026, over D63's grayscale): the lift alone, the painting at 40 per cent on the
   paper, its persimmon kept as an ember. */
.ld-pic.ch-seat--wash img, .ld-pic.ch-seat--part .ch-seat-wash { opacity: 0.4; filter: url(#cl-washi); }
/* ⭐ RT-01 (the owner's yes of 12 November 2026): back from a sitting that sealed this lesson, its painting stands as it was
   at the open with the whole copy laid over it, clear (js inkSealed); .is-sealing inks the copy in and lets the layers
   under it go, on the pictures' own 360 ms opacity transition below (reduced motion: never laid, whole at once).
   Opacity only: nothing moves. */
.ch-room .ld-pic img.ld-seal-ink { opacity: 0; }
.ch-room .ld-pic.is-sealing img.ld-seal-ink { opacity: 1; }
.ch-room .ld-pic.is-sealing img:not(.ld-seal-ink) { opacity: 0; }
.ld-pic.ch-seat--part .ch-seat-ink {
    -webkit-mask-image: linear-gradient(90deg, #000 clamp(0%, calc(var(--ink) - 30%), 100%), transparent clamp(0%, calc(var(--ink) + 12%), 100%)),
                        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(90deg, #000 clamp(0%, calc(var(--ink) - 30%), 100%), transparent clamp(0%, calc(var(--ink) + 12%), 100%)),
                linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-composite: intersect;
}
/* the one verb under the pointer (開く Open, 続き Resume): the portal's .ch-verb, seated at the right end of the number's
   line; its seat is held at rest (absolute, transparent), so nothing moves when it shows */
.ch-room .ld-tile .ch-verb { position: absolute; top: -1px; right: 0; max-width: none; margin: 0; }
.ch-room .ld-tile:hover .ch-verb, .ch-room .ld-tile:focus-visible .ch-verb { opacity: 1; transition: opacity 160ms ease calc(var(--ch-intent) + 40ms); }
/* ── 4b · THE ROW A STRANGER'S TILE OPENS (BUILD_SPEC.md §2; the mock's demo/reveal.css): a full-width item of the tiles'
   grid after the pressed tile's row (js/course-landing.js placeReveal), on the course's sheet (a card resting, not
   floating): the lesson's caps, mark and title with 閉じる Close at the right, its promise, its New words five a row in the
   wall's own dress (the reading in a kept seat, the stronger washi lift), 始める Begin lesson n in its head (PB-08). The open tile
   keeps its title and its folio in the accent and 見る Look in the verb's seat. ── */
.ch-room .ld-reveal {
    grid-column: 1 / -1; margin-top: calc(1.2 * var(--ch-u)); padding: 20px 28px 22px;
    background: var(--ch-sheet); border: 1px solid transparent; border-radius: 14px;   /* the elevation: a slip, no ring */
    box-shadow: var(--ch-slip-rest);
}
.ch-room .ld-reveal[hidden] { display: none; }
.ch-room .ld-rv-head { display: flex; align-items: flex-start; gap: 16px; }
.ch-room .ld-rv-lede { min-width: 0; }
.ch-room .ld-title--rv, .ch-room .ld-title--rv .ld-mark, .ch-room .ld-title--rv .ld-name { font-size: var(--k5); }
.ch-room .ld-title--rv { margin-top: 2px; }
/* 閉じる Close: the hall's ghost pill, quiet; hover is ink */
.ch-room .ld-rv-close {
    margin-left: auto; flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px;
    border: 1px solid rgba(44, 44, 44, 0.14); border-radius: 999px; background: none;
    font-family: var(--ch-uif); font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--ch-stone);
    transition: color var(--ld-t), border-color var(--ld-t);
}
.ch-room .ld-rv-close [lang="ja"] { font-family: var(--ch-chrome-jp); font-size: 13px; }
.ch-room .ld-rv-close:hover { color: var(--ch-ink); border-color: rgba(44, 44, 44, 0.28); box-shadow: none; background: none; }
.ch-room .ld-rv-close:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; box-shadow: none; }
.ch-room .ld-rv-promise { margin-top: 10px; max-width: 62ch; }
.ch-room .ld-rv-words { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; row-gap: 18px; column-gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
/* ⭐ PB-08 (the deep review of 11 November 2026, as checked): 始める Begin lesson n in the head, right-aligned, left of
   閉じる Close, its top on the line of `Lesson n` (at the row's foot it stood below the window after a tile press); Close
   centred on it. The foot is gone; one Begin in the row, but not one a screen: lesson 1's row stands open at rest under
   the first row of tiles, so it wears the ghost dress while the band's Begin shows (section 3, .is-band-begin) */
.ch-room .ld-rv-acts { margin-left: auto; flex: none; display: flex; align-items: center; gap: 16px; }
.ch-room .ld-rv-acts .ld-rv-begin { margin: 0; }
.ch-room .ld-rv-acts .ld-rv-close { margin-left: 0; }
/* the open tile: its folio and title in the accent, 見る Look standing (ink only: the verb's seat is held at rest) */
.ch-room .ld-tile[aria-expanded="true"] .ld-tile-title, .ch-room .ld-tile[aria-expanded="true"] .ld-num { color: var(--ch-accent); }
.ch-room .ld-tile[aria-expanded="true"] .ch-verb { opacity: 1; }

/* the honest line, once, at the end */
.ch-room .ld-end { margin-top: var(--ch-air-between); text-align: center; font-family: var(--ch-uif); font-size: var(--e3); line-height: 1.45; color: var(--ch-stone); }
/* the local product's door to the ladder page, under the end line: a quiet link, the duet, the plan's count after a dot */
.ch-room .ld-plan-row { margin-top: 10px; text-align: center; }
.ch-room .ld-plan { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--ch-uif); font-size: var(--e3); line-height: 1.45; color: var(--ch-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ch-accent) 30%, transparent); transition: border-color var(--ld-t); }
.ch-room .ld-plan [lang="ja"] { font-family: var(--ch-chrome-jp); font-weight: 500; }
.ch-room .ld-plan-n { color: var(--ch-quiet); }
.ch-room .ld-plan:hover { border-bottom-color: var(--ch-accent); }
.ch-room .ld-plan:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 3px; border-radius: 2px; }
/* THE FAILURE FACE (the lead's ask of 27 October 2026): the page's data could not be read, so the open gallery never shows
   at the root: the beam holds the seal and KOTOBA alone, and on bare paper the phone screen's two lines in their dress, the
   second asking to try again; nothing pressable, no sign-off (the beam already signs) */
.ld-fail { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 120px); padding: 0 16px 10vh; text-align: center; }
.ch-room .ld-fail .ld-phone-line { margin-top: 0; max-width: 34em; }   /* the two lines stand as two on a desktop glass */
.ch-room.ld-room.is-failed .ld-signoff { display: none; }
/* the sign-off waits for the page's files (seat E's defect 3, 28 October 2026: the room stood with its beam and, under an
   empty column, the sign-off's seal, which read as a second loading seal) */
.ch-room.ld-room:not([data-ready]) .ld-signoff { display: none; }

/* ── 5 · the sign-off: brand.css .kotoba-signoff without its gold dot and its motto; it stands still ── */
.ch-room .ld-signoff { margin-top: var(--ch-air-between); padding-bottom: var(--ch-air-between); animation: none; }
/* its rule and its seal's disc on the room's paper and slip (the design elevation's step 1: the app's #D8D2C8 and #FAFAF7
   read a shade grey on 白練); the seal itself is the brand's, untouched */
.ch-room .ld-signoff .ks-rule { background: var(--ch-rule); }
.ch-room .ld-signoff .ks-seal { background: var(--ch-sheet); }
.ld-signoff .kotoba-wordmark { margin-right: -0.2em; }   /* standing centred alone: the trailing tracking cancelled */
/* ⭐ the page's foot (the owner, 11 November 2026): one quiet line under the seal, the three parts of the About page
   (/about/). Quiet ink; under the pointer a word takes the page's ink and its rule; nothing moves */
.ch-room .ld-doors { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin-top: 26px; }
.ch-room .ld-door { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--ch-uif); font-size: var(--e3); line-height: 1.45; color: var(--ch-quiet); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--ld-t), border-color var(--ld-t); }
.ch-room .ld-door [lang="ja"] { font-family: var(--ch-chrome-jp); font-weight: 500; color: inherit; }
.ch-room .ld-door:hover { color: var(--ch-ink); border-bottom-color: var(--ch-rule); }
.ch-room .ld-door:focus-visible { color: var(--ch-ink); outline: 2px solid var(--ch-accent); outline-offset: 3px; border-radius: 2px; }

/* ── the phone (768 px and under): one screen, one press (the design elevation's step 7, 4 November 2026: the apple of 赤い
   at 220 px in place of the grey cake, and 送る Send the link, the phone's one way to carry the course to a computer; the
   course itself is never served on a phone) ── */
.ld-phone { display: none; box-sizing: border-box; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px 10vh; text-align: center; }
@media (max-width: 768px) {
    .ch-room.ld-room .ld-beam, .ch-room.ld-room .ld-col, .ch-room.ld-room .ld-signoff, .ch-room.ld-room .ld-pop { display: none; }
    .ch-room.ld-room .ld-phone { display: flex; }
}
.ld-phone .ld-phone-seal { width: 48px; height: 48px; }
.ld-phone .kotoba-wordmark { margin: 14px -0.2em 0 0; }
.ld-phone-pic { display: block; width: 220px; height: 220px; margin-top: var(--ch-air-in); object-fit: contain; filter: url(#cl-washi); mix-blend-mode: multiply; }
.ch-room .ld-phone-line { margin-top: var(--ch-air-in); max-width: 20em; font-family: var(--ch-tell); font-size: var(--e2-tell); line-height: 1.5; color: var(--ch-ink); text-wrap: balance; }
.ld-phone-line span { display: block; }
/* the press: the beam's ghost pill (.ld-pill) at a thumb's size, 44 px tall, the kanji in sumi; Copied. swaps the English
   in the same box, nothing moves; no hover (a phone has no pointer), the press itself a shade of ink */
.ch-room .ld-send {
    display: inline-flex; align-items: baseline; gap: 8px; margin-top: var(--ch-air-in); padding: 12px 20px; min-height: 44px; box-sizing: border-box;
    border: 1px solid rgba(44, 44, 44, 0.14); border-radius: 999px; background: transparent; cursor: pointer;
    font-family: var(--ch-uif); font-size: 15px; font-weight: 600; line-height: 1; color: var(--ch-stone); white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.ch-room .ld-send [lang="ja"] { font-family: var(--ch-chrome-jp); font-weight: 500; font-size: 17px; color: var(--ch-jp); }
.ch-room .ld-send:active { color: var(--ch-ink); border-color: rgba(44, 44, 44, 0.28); }
.ch-room .ld-send:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; }
.ch-room .ld-send[data-sent] .ld-send-en { color: var(--ch-ink); }
/* the phone's one quiet link under its press (11 November 2026): 概要 About, the foot's first door (.ld-door: quiet ink,
   no underline), at a finger's size: 44 px tall with its own air */
.ch-room .ld-phone .ld-phone-door { margin-top: 10px; min-height: 44px; box-sizing: border-box; align-items: center; padding: 0 14px; font-size: 14px; border-bottom: 0; }
.ch-room .ld-phone .ld-phone-door:active { color: var(--ch-ink); }
/* a computer's window drawn narrow has no press (call 7): the link then stands under the two lines with the press's air */
.ch-room .ld-phone .ld-phone-line + .ld-phone-door { margin-top: var(--ch-air-in); }

@media (prefers-reduced-motion: reduce) {
    .ch-room.ld-room.is-leaving { transition: none; }
    .ch-room .ld-signin, .ch-room .ld-pill, .ch-room .ld-begin, .ch-room .ld-begin [lang="ja"], .ch-room .ld-begin i, .ld-tile-title,
    .ch-room .ld-say .ld-k, .ch-room .ld-account-circle, .ch-room .ld-pop-row, .ch-room .ld-rv-close, .ch-room .ld-close, .ch-room .ld-plan, .ch-room .ld-door { transition: none; }
    .ch-room .ld-tile .ch-verb { transition: none !important; }
}

/* ══ THE DESIGN ELEVATION, STEPS 3 AND 4 (2 November 2026; SYNTHESIS.md §4 "Landing", §7 rows 3 and 4; the demo's record:
   docs/course_v2/reviews/elevate_step34_2026-11-02/DESIGN.md) ═══════════════════════════════════════════════════════════ */
/* 4 · THE ROOM BREATHES WITH THE WINDOW: one unit drives the column, the wall and the type, so a 2000 px glass shows the
   1440 page a size larger instead of the same page with bare sides (the unit stops at 22 instead of 19). The wall's
   paintings a size up everywhere: 140 px at 1440 (was 120), 167 at 2000; the wall's column 760 (was 680); the words 33 px.
   The beam's pills are the shelf lane's (wt/shelf-finish) and stand as they are. */
.ch-room.ld-room {
    --ch-u: var(--cl-u, clamp(16px, 9px + 0.625vw, 22px));   /* 18 at 1440, 21.5 at 2000 */
    --ch-col: calc(1200 / 18 * var(--ch-u));                 /* 1200 at 1440, 1433 at 2000 */
    --ld-face: calc(760 / 18 * var(--ch-u));                 /* the wall's column */
    --ld-seat: calc(140 / 18 * var(--ch-u));                 /* a portrait */
}
.ch-room.ld-room .ld-col { padding-top: calc(1.8 * var(--ch-u)); }
.ch-room.ld-room .ld-wall { grid-template-columns: repeat(5, var(--ld-seat)); }
.ch-room.ld-room .ld-cell, .ch-room.ld-room .ld-say { width: var(--ld-seat); }
.ch-room.ld-room .ld-seat { width: var(--ld-seat); height: var(--ld-seat); }
/* a word stands whole on one line and never past its column (THE STRIP'S RULE, 8 November 2026): at 1.85 units, on the wall's
   line box whatever its size, so a row's English lines stand level */
.ch-room.ld-room .ld-k { font-size: calc(1.85 * var(--ch-u)); line-height: calc(1.85 * var(--ch-u) * 1.3); }
/* the optional prefix's small raised brackets keep a line of their own size: inheriting that line box as a length, they took
   the whole of it and pushed a (お) word's line a pixel deeper, its English a pixel under its neighbours' (a set keeps its own) */
.ch-room.ld-room .ld-cell:not(.ld-cell--set) .ld-k .opt-mark .p { line-height: 1; }
/* on a wall (the lesson up next's words, the first-time wall) the column is the seat, which holds 4.2 of a word's ems: a word
   longer than that steps down to fit it, by the printed length its markup carries (--ld-em, js/course-landing.js emsOf:
   (ご)紹介する 5.5, 24 px at 1280) */
.ch-room.ld-room .ld-wall .ld-cell:not(.ld-cell--set) .ld-k { font-size: min(calc(1.85 * var(--ch-u)), calc(var(--ld-seat) / var(--ld-em, 1))); }
/* the row a stranger's tile opens has columns wider than a seat, so there a word keeps its full size wherever its column holds
   it ((ご)紹介する at 1280 and 1680) and steps down to the column only where it does not: the cell is its column, a container,
   and the press inside it stays its seat, centred */
.ch-room.ld-room .ld-rv-words > .ld-cell { width: auto; justify-self: stretch; container-type: inline-size; }
.ch-room.ld-room .ld-rv-words > .ld-cell:not(.ld-cell--set) .ld-k { font-size: min(calc(1.85 * var(--ch-u)), calc(100cqi / var(--ld-em, 1))); }
.ch-room.ld-room .ld-cell--set .ld-k { font-size: calc(1.4 * var(--ch-u)); line-height: calc(1.85 * var(--ch-u) * 1.3); }
/* the band: the headline grows by size, not weight (44 px at 1440, 53 at 2000); the lesson up next's mark is its emblem,
   70 px on the returning page; the stranger's 一 (ichi, "one") keeps a character's size, since one stroke at emblem size
   reads as a dash */
.ch-room.ld-room .ld-hero { font-size: calc(2.45 * var(--ch-u)); letter-spacing: -0.012em; }
.ch-room.ld-room .ld-title .ld-mark { font-size: 1.9em; line-height: 0.9; margin-right: 0.12em; }
.ch-room.ld-room .ld-hello .ld-title .ld-mark, .ch-room.ld-room #ld-reveal[data-n="1"] .ld-title .ld-mark { font-size: 1.3em; line-height: 1; }
/* 3 · THE STEP FORWARD: 始める Begin, 続きから Resume, the one vermilion field of the page (the lesson's own dress,
   css/course-lesson.css 3c): 朱 #B63D1B, paper type cut into it, deeper under the pointer; the corner a seal's 4 px */
.ch-room.ld-room .ld-begin { background: #B63D1B; border-color: #B63D1B; border-radius: 4px; color: #FFFFFB; transition: background-color var(--ld-t), border-color var(--ld-t); }
.ch-room.ld-room .ld-begin [lang="ja"], .ch-room.ld-room .ld-begin i { color: #FFFFFB; }
.ch-room.ld-room .ld-begin:hover, .ch-room.ld-room .ld-begin:active, .ch-room.ld-room .ld-begin:focus-visible { background: #993317; border-color: #993317; }
.ch-room.ld-room .ld-begin:hover [lang="ja"], .ch-room.ld-room .ld-begin:hover i,
.ch-room.ld-room .ld-begin:focus-visible [lang="ja"], .ch-room.ld-room .ld-begin:focus-visible i { color: #FFFFFB; }
/* ⭐ ONE FIELD A SCREEN ON A STRANGER'S PAGE TOO (the deep review's mends of 12 November 2026, mend 1; js quietRow): while
   any of the band's Begin shows on the glass, the row a tile opened keeps its 始める Begin (or 続きから Resume) in the door's
   ghost dress, the press's own dress under the vermilion (section 3: the door's rule, the kanji in sumi, the English quiet;
   under the pointer the rule in ink and the words in the accent), and takes the vermilion back once the band's has left
   the glass. At once, never a fade, so two fields never share a frame; colour only, the box never moves. */
.ch-room.ld-room.is-band-begin .ld-rv-begin { background: transparent; border-color: var(--ld-door-rule); transition: none; }
.ch-room.ld-room.is-band-begin .ld-rv-begin [lang="ja"] { color: var(--ch-jp); transition: none; }
.ch-room.ld-room.is-band-begin .ld-rv-begin i { color: var(--ch-quiet); transition: none; }
.ch-room.ld-room.is-band-begin .ld-rv-begin:hover, .ch-room.ld-room.is-band-begin .ld-rv-begin:active,
.ch-room.ld-room.is-band-begin .ld-rv-begin:focus-visible { background: transparent; border-color: var(--ch-ink); }
.ch-room.ld-room.is-band-begin .ld-rv-begin:hover [lang="ja"], .ch-room.ld-room.is-band-begin .ld-rv-begin:hover i,
.ch-room.ld-room.is-band-begin .ld-rv-begin:focus-visible [lang="ja"], .ch-room.ld-room.is-band-begin .ld-rv-begin:focus-visible i { color: var(--ch-accent); }

/* ═══ THE COURSE REVIEW OF 10 NOVEMBER 2026 ═══════════════════════════════════════════════════════════════════════════
   ⭐ A TITLE NEVER ENDS ON ONE WORD. The lesson tiles broke "The mountains and the / sea", "The seasons and the /
   weather", "Who teaches, who / learns", and the returning learner's band "Next stop, turn / left": a last line of one
   word under a full one. The two lines are evened (text-wrap: balance, as the lesson's own titles are), so the same
   titles read "The mountains / and the sea". Nothing else of the tile moves: its title seat is two lines high already. */
.ld-tile-title, .ch-room .ld-title .ld-name { text-wrap: balance; }
/* ⭐ THE PICTURES INK IN AS THEY LAND (js inkPictures): on the page's first paint a painting still on its way waits clear
   and takes its ink over a breath, where it used to snap onto the paper whole. */
.ch-room .ld-seat, .ch-room .ld-pic img { transition: opacity 360ms var(--ease-settle, ease); }
.ch-room .ld-seat.ld-wait, .ch-room .ld-pic img.ld-wait, .ch-room .ld-pic.ch-seat--wash img.ld-wait { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ch-room .ld-seat, .ch-room .ld-pic img { transition: none; } }

/* ═══ ⭐ RT-03 · 句帳 MY VERSES OPENS LAID FLAT (the deep review of 11 November 2026, as checked; the shape the owner said
   yes to on 10 November, "one page of the slips in order, in the manner of a 御朱印帳"; js/course-verses.js) ═══════════════
   The verses' room wears the lesson room's id and dress (css/course-lesson.css); what is the room's own is dressed here, under
   .cv- names alone: a rule naming #kotobaLesson or a .cl- class would walk every lesson (tests/desktop/walk_plan.py css_one).
   THE BOOK: every kept slip, small, ten a row, lesson 1 at the right and reading leftwards (row-reverse: the markup keeps the
   lessons' order, so Tab and a reader follow it). The book's column is ten slips wide and the room reads it as its own column
   (js dress sets --cl-col to --cv-col), so the head's 句帳 and 閉じる Close stand on the book's edges as on a page's.
   THE SMALL SLIP: the close slip's paper and shadow tokens exactly (--cl-sheet, --cl-slip-rest: the slip's ruled dress), its
   verse down the paper in the close's hand (each column beside the last character of the one before, 1.06 em a character,
   the columns 0.32 em apart), the type the room's unit (19 px at 2000x1150, 16 at 1536x735) stepped down as the close's
   strip steps it, by the verse's extent over the paper's length (--cv-em; 100cqh: the slip is a size container) and never
   past its width. NO SEAL: vermilion is pressed, never painted, one field a screen; the seal stays on the slip's page.
   Hover and focus change the ink alone (the verse in indigo; a key's focus also takes the room's ring): no shadow step,
   nothing moves. */
.cv-flat {
    --cv-f: var(--cl-u, 16px);
    --cv-w: calc(5.6 * var(--cv-f));                 /* a slip's width: three columns and a guest's kana (106 px at 2000x1150) */
    --cv-gap: calc(1.2 * var(--cv-f));
    --cv-col: min(calc(10 * var(--cv-w) + 9 * var(--cv-gap)), 100% - 3rem);   /* ten a row (1269 px at 2000x1150, 1069 at 1536x735) */
}
.cv-book {
    display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-start;
    gap: calc(1.6 * var(--cv-f)) var(--cv-gap);
    padding-top: var(--cl-origin-page, calc(2 * var(--cv-f)));
}
.cv-slip {
    --cv-f: var(--cl-u, 16px);
    --cv-pad: calc(0.9 * var(--cv-f));
    box-sizing: border-box; flex: none; display: flex; justify-content: center; align-items: stretch;
    /* the verse's own length is 13 em of paper (the critic's 13 em, which held the seal too; the seal is not here), the
       paper 0.9 em over and under it: twelve characters stand at the full size, lesson 1's fifteen step down */
    width: calc(5.6 * var(--cv-f)); height: calc(13 * var(--cv-f) + 2 * var(--cv-pad)); margin: 0; padding: var(--cv-pad) 0;
    container-type: size;
    background: var(--cl-sheet, var(--ch-sheet, #FFFFFB)); border: 0; border-radius: 2px;
    box-shadow: var(--cl-slip-rest, var(--ch-slip-rest));
    color: var(--ch-jp, var(--color-jp-text, #2A231F)); cursor: pointer;
    scroll-margin: calc(var(--cl-chrome-h, 4.6rem) + var(--cv-f)) 0 calc(2 * var(--cv-f));
}
.cv-verse {
    display: block; writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; text-align: start;   /* (a button centres its lines) */
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: min(var(--cv-f), calc(100cqh / (1.08 * var(--cv-em, 6))), calc(100cqw / 5.1));
    line-height: 1.3; letter-spacing: 0.06em; color: inherit;
    transition: color 160ms ease;
}
.cv-col { display: block; padding-top: calc(var(--cv-vstart, 0) * 1.06em); }
.cv-col + .cv-col { margin-right: 0.32em; }
.cv-slip:hover, .cv-slip:active, .cv-slip:focus-visible {
    background: var(--cl-sheet, var(--ch-sheet, #FFFFFB)); box-shadow: var(--cl-slip-rest, var(--ch-slip-rest)); transform: none;
}
.cv-slip:hover .cv-verse, .cv-slip:focus-visible .cv-verse { color: var(--cl-accent, var(--ch-accent, #3D5A80)); }
.cv-slip:focus-visible { outline: 2px solid var(--cl-accent, var(--ch-accent, #3D5A80)); outline-offset: 3px; }
/* a slip's page: the head's 句帳 VERSES · LESSON n is the press back to the book, in the head's own dress (the lesson's
   .cl-mark-n, on the button) with nothing of a button's; under the pointer or a key its words take the indigo */
.cv-up { margin: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; box-shadow: none; text-align: left; cursor: pointer; }
.cv-up:hover, .cv-up:active { background: transparent; box-shadow: none; transform: none; }
.cv-up-t { transition: color 160ms ease; }
.cv-up:hover .cv-up-t, .cv-up:focus-visible .cv-up-t { color: var(--cl-accent, #3D5A80); }
.cv-up:focus-visible { outline: 2px solid var(--cl-accent, #3D5A80); outline-offset: 3px; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .cv-verse, .cv-up-t { transition: none; } }

/* ═══ ⭐ RT-02 · THE NEWEST KEPT VERSE BESIDE BEGIN (the deep review of 11 November 2026, as checked; js/course-landing.js
   keptHTML): on the returning learner's band the first thing read on coming back is Japanese they can read. The small slip
   of 句帳 (the dress above), at the band's right end: its top level with Begin's top (the row .ld-go stands where Begin
   stood, Begin's own air above it), its foot level with the wall's foot (the band stands the fold's height and the row
   takes what is left of it); Begin and F4's two lines to its left. NO SEAL (Begin is the page's one vermilion), no
   caption. The page's button reset (css/course-home.css .ch-room button) would strip the slip, so its paper, shadow and
   seat are said again here. Its type the page's unit (21.5 px at 2000, 18.6 at 1536), stepped down by the verse's extent
   over the seat's length and never past the slip's width, and never under three quarters of the unit (16 px at 2000, 14
   at 1536: a verse too long for its seat at that size, lesson 1's fifteen characters beside a one-row wall, makes the slip
   taller than the seat rather than its type too small to read; the fold then grows by the difference). Hover and focus:
   the ink alone. */
.ch-room .ld-fold > .ld-band.ld-band--kept { align-self: stretch; display: flex; flex-direction: column; }
.ch-room .ld-band--kept .ld-go { flex: 1 0 auto; display: flex; align-items: stretch; column-gap: calc(1.2 * var(--ch-u)); }
.ch-room .ld-band--kept .ld-go-l { flex: 1 1 auto; min-width: 0; }
.ch-room .ld-kept {
    --cv-f: var(--ch-u);
    --cv-pad: calc(0.6 * var(--cv-f));
    --cv-min: calc(0.75 * var(--cv-f));
    flex: none; align-self: stretch; width: calc(4.6 * var(--cv-f)); height: auto;
    min-height: calc(var(--cv-em, 6) * 1.08 * var(--cv-min) + 2 * var(--cv-pad));   /* the verse at the floor's size */
    margin: calc(1.3 * var(--ch-u)) 0 0; padding: var(--cv-pad) 0;   /* (Begin's own margin: the two tops stand level) */
    background: var(--ch-sheet); border-radius: 2px; box-shadow: var(--ch-slip-rest); color: var(--ch-jp);
}
.ch-room .ld-kept:hover, .ch-room .ld-kept:active, .ch-room .ld-kept:focus-visible { background: var(--ch-sheet); box-shadow: var(--ch-slip-rest); }
/* ⭐ (the deep review's mends of 12 November 2026, mend 3; js fitKept) the slip stands only where it moves nothing: the
   course list's top is the same with it and without it. Where it is not shown it takes no seat, and the band wears no kept
   dress: it is the band with no verse */
.ch-room .ld-kept[hidden] { display: none; }
.ch-room .ld-kept:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 3px; }
/* a guest's kana as the lesson prints it (css/course-lesson.css .cl-guest rt, in the room's past ink #514A44, opaque: the
   app's base.css sets every rt at 0.55) */
.ch-room .ld-kept rt { opacity: 1; color: #514A44; }