/* Screens of the typing course (P2-125). Shares base.css with Notella's look; blocks marked "from Notella" are P2-122's.
   Geist Mono by Vercel (SIL OFL 1.1, licences/GeistMono-OFL.txt) sets the text to type: every letter the same width,
   so the cursor never jumps. Latin only, like the typing texts. */
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* One colour per finger, as on the keyboard guide; always with a label or a shape too, never colour alone. */
  --f-pinky: #D9CCFF; --f-ring: #A8E0CB; --f-middle: #FEE79E; --f-index: #FDB3B4; --f-thumb: #E2E2EA;
  --leaf: #A8E0CB; --leaf-edge: #1C7547; --sky: #EAF6F0;
  --heat-0: #BFFFE6; --heat-1: #E6F5C8; --heat-2: #FEE79E; --heat-3: #FDC2A6; --heat-4: #FB8F8C;
  --chart-line: #6A4FD0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --f-pinky: #4B3F80; --f-ring: #2C5C4C; --f-middle: #6B5A22; --f-index: #74343A; --f-thumb: #3A3A5E;
    --leaf: #2C5C4C; --leaf-edge: #63CF95; --sky: #182A3A;
    --heat-0: #173A30; --heat-1: #2F4421; --heat-2: #6B5A22; --heat-3: #7A3E2A; --heat-4: #8E2E30;
    --chart-line: #8C76EE;
  }
}
:root[data-theme="dark"] {
  --f-pinky: #4B3F80; --f-ring: #2C5C4C; --f-middle: #6B5A22; --f-index: #74343A; --f-thumb: #3A3A5E;
  --leaf: #2C5C4C; --leaf-edge: #63CF95; --sky: #182A3A;
  --heat-0: #173A30; --heat-1: #2F4421; --heat-2: #6B5A22; --heat-3: #7A3E2A; --heat-4: #8E2E30;
  --chart-line: #8C76EE;
}

/* Text size from Settings, on top of the reader's own browser size. */
:root[data-text-size="small"] { font-size: 93.75%; }
:root[data-text-size="large"] { font-size: 112.5%; }
:root[data-text-size="huge"] { font-size: 125%; }

/* ---- Home (from Notella) */
.home-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.hello { color: var(--ink-soft); margin-bottom: -.75rem; }
.continue { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.continue-text { flex: 1 1 15rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.continue-text .btn { margin-top: .5rem; }
.continue-art { flex: 1 1 12rem; max-width: 18rem; }
.continue-keys { display: flex; gap: .4rem; flex-wrap: wrap; }
.continue-keys span { min-width: 2.6rem; height: 2.6rem; padding: 0 .5rem; display: grid; place-items: center; border: var(--edge); border-radius: 10px;
  font: 700 1.15rem var(--mono); background: var(--card-2); box-shadow: 0 3px 0 var(--lift-c); }
.week { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.week-days { list-style: none; padding: 0; display: flex; gap: .4rem; }
.week-days li { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.wd-dot { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; background: var(--card); }
.wd-dot .icon { width: 1.1rem; height: 1.1rem; }
.week-days li.met .wd-dot { background: var(--good); border-color: var(--good); color: var(--card); }
.week-days li.today .wd-dot { border-color: var(--ink); }
.wd-letter { font-size: .8rem; color: var(--ink-soft); font-weight: 650; }
.week-text { display: flex; gap: .4rem; align-items: center; color: var(--ink-soft); font-weight: 600; }
.path { display: flex; flex-direction: column; gap: 1.75rem; margin-top: .5rem; }
.unit { display: flex; flex-direction: column; gap: .6rem; }
.unit-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.unit-head h3 { font: 700 1.1rem var(--display); color: var(--heading); }
.unit-meta, .unit-blurb { color: var(--ink-soft); font-size: .95rem; }
.unit.locked .unit-head h3 { color: var(--ink-soft); }
.nodes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; position: relative; }
.node { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 4.25rem; }
.node-btn { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-decoration: none; }
.node-btn b { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; font: 700 1rem/1.05 var(--mono); text-align: center;
  background: var(--card); border: var(--edge); box-shadow: var(--lift); transition: transform var(--fade), box-shadow var(--fade); overflow: hidden; padding: .2rem; }
.node-btn b .icon { width: 1.5rem; height: 1.5rem; }
.node-btn b.long { font-size: .78rem; }
a.node-btn:active b { transform: translate(3px, 3px); box-shadow: var(--lift-down); }
.node.done b { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.node.open b { background: var(--accent); border-color: var(--accent); color: var(--on-ink); box-shadow: var(--lift), 0 0 0 6px var(--accent-bg); }
.node.locked b { border: 2px dashed var(--ink-soft); color: var(--ink-soft); background: transparent; box-shadow: none; }
.node.test b { border-radius: 14px; }
.node-stars { font-style: normal; font-size: .8rem; letter-spacing: .04em; color: var(--gold); min-height: 1.2em; white-space: nowrap; }
.node.open .node-stars { color: var(--accent); font-weight: 700; letter-spacing: 0; }
.node-name { font-size: .78rem; line-height: 1.15; text-align: center; color: var(--ink-soft); max-width: 5rem; }
.skip-btn { align-self: flex-start; }

/* ---- Lesson (from Notella, plus the typing parts below) */
.lesson { max-width: 60rem; margin: 0 auto; display: flex; flex-direction: column; gap: var(--fit-gap);
  min-height: calc(100dvh - max(.75rem, env(safe-area-inset-top)) - .75rem - env(safe-area-inset-bottom)); }
.no-tabs .main { padding-top: max(.75rem, env(safe-area-inset-top)); padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
.lesson-top { display: flex; align-items: center; gap: .75rem; }
.lesson-top > .btn { flex: none; }
/* On phones Stop and Pause keep only their icon (the word stays for screen readers), so the clock and the language pill fit beside them. */
@media (max-width: 599px) {
  .lesson-top > .btn.small { padding-inline: .7rem; }
  .lesson-top > .btn.small .btn-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.lesson-bar-gap { flex: 1; }
.lesson-bar { flex: 1; height: .9rem; border-radius: 99px; background: var(--card-2); border: var(--edge); overflow: hidden; }
.lesson-bar span { display: block; height: 100%; width: 0; background: var(--good); border-radius: 99px; transition: width var(--move) ease; }
.combo { min-width: 0; font-weight: 700; color: var(--accent); opacity: 0; transition: opacity var(--fade); white-space: nowrap; font-size: .95rem; }
.combo.show { opacity: 1; }
.stage { display: flex; flex-direction: column; gap: 1rem; animation: enter var(--move) ease both; }
.lesson > .stage { flex: 1 1 auto; gap: var(--fit-gap); }
.lesson-head { display: flex; flex-direction: column; gap: .35rem; }
.lesson-head h1 { font-size: clamp(1.2rem, min(1rem + 1vw, 3.4dvh), 1.7rem); }
.hint-line { display: flex; gap: .5rem; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; }
.hint-line .icon { color: var(--accent); margin-top: .1em; }
.timer { height: .45rem; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.timer span { display: block; height: 100%; width: 100%; background: var(--ink-soft); transform-origin: left; }
.timer.run span { animation: drain linear forwards; }
.feedback { min-height: 0; display: flex; flex-direction: column; gap: .35rem; border-radius: var(--r); }
.feedback:empty { display: none; }
.feedback.good, .feedback.bad { padding: 1rem 1.25rem; animation: rise var(--move) ease both; }
.feedback.good { background: var(--good-bg); color: var(--good); border-top: 3px solid var(--good); }
.feedback.bad { background: var(--bad-bg); border-top: 3px solid var(--bad); }
.feedback.bad .fb-title { color: var(--bad); }
.fb-title { display: flex; align-items: center; gap: .5rem; font: 600 1.3rem/1.25 var(--serif); }
.fb-detail { color: var(--ink); }
.feedback.good .fb-detail { color: var(--good); }
.fb-note { font-weight: 600; color: var(--ink); }
.summary { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding-top: 1rem; animation: enter var(--move) ease both; }
.summary h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); outline: none; }
.stars { display: flex; gap: .4rem; }
.star { width: 3.25rem; height: 3.25rem; color: var(--line); }
.star .icon { width: 100%; height: 100%; }
.star.on { color: var(--gold); animation: pop 420ms cubic-bezier(.2, 1.4, .4, 1) both; }
.star.on:nth-child(2) { animation-delay: 140ms; }
.star.on:nth-child(3) { animation-delay: 280ms; }
.star.on:nth-child(4) { animation-delay: 420ms; }
.star.on:nth-child(5) { animation-delay: 560ms; }
.summary-stats { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
.summary-stats div { background: var(--card); border: var(--edge); border-radius: var(--r-small); padding: .6rem 1rem; min-width: 7rem; }
.summary-stats dt { font-size: .85rem; color: var(--ink-soft); }
.summary-stats dd { font: 600 1.35rem var(--serif); }
.summary-note { max-width: 34rem; display: flex; gap: .4rem; align-items: center; justify-content: center; }
.summary-note.strong { font-weight: 700; }
.summary-keys { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; }
.summary-keys .k { min-width: 2.2rem; height: 2.2rem; padding: 0 .4rem; display: grid; place-items: center; border: 2px solid var(--bad); border-radius: 8px;
  font: 700 1rem var(--mono); color: var(--bad); background: var(--bad-bg); }
.badge-row { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.badge-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; background: var(--accent-bg); color: var(--ink); font-weight: 650; }
.badge-chip .icon { color: var(--gold); }
.key-hint { font-size: .9rem; color: var(--ink-soft); }
kbd { font: 700 .9em var(--mono); padding: .05em .4em; border: 2px solid var(--edge-c); border-radius: 6px; background: var(--card-2); white-space: nowrap; }

/* Russian and Georgian words run long: a word wider than its button breaks instead of spilling over (from Notella). */
html:not([lang^="en"]) :is(button, .btn, .chip, .choice, label, h1, h2, h3) { overflow-wrap: anywhere; }
html:not([lang^="en"]) .tabs a[data-tab] { font-size: .74rem; }
html[lang="ru"] :is(button, .btn, .choice, .chip) { hyphens: auto; -webkit-hyphens: auto; }

/* ---- The text to type. Words never break inside; the box shows three lines and moves on line by line.
   Colour marks state, always with a second cue: the current letter has a bar under it, a wrong first try a wavy line. */
.typer { position: relative; background: var(--card); border: var(--edge); border-radius: var(--r); box-shadow: var(--lift-card);
  padding: clamp(.5rem, 1.6dvh, 1rem) clamp(.9rem, 2vw, 1.5rem); cursor: text; }
.typer.focused { outline: 3px solid var(--accent); outline-offset: 3px; }
.typer-view { --type-size: clamp(1.1rem, min(1rem + 1.8vw, 4.2dvh), 2.1rem); font: 500 var(--type-size)/1.6 var(--mono); height: calc(3 * 1.6em);
  overflow: hidden; position: relative; }
.typer.short .typer-view { height: auto; max-height: calc(3 * 1.6em); }
.typer-text { transition: transform var(--move) ease; }
.typer .w { display: inline-block; white-space: pre; }
.typer .c { border-radius: 4px; transition: background-color 80ms; }
.typer .c.done { color: var(--good); }
.typer .c.missed { color: var(--bad); text-decoration: underline wavy var(--bad) 2px; text-underline-offset: .22em; }
.typer .c.sp.missed { box-shadow: inset 0 -3px 0 var(--bad); }
.typer .c.cur { background: var(--accent-bg); box-shadow: inset 0 -.18em 0 var(--current); color: var(--ink); }
.typer .c.err { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 -.18em 0 var(--bad); }
.typer .c.sp.cur::before, .typer .c.sp.err::before { content: "\2423"; position: absolute; opacity: .55; }   /* i18n-ignore: the open-box space sign */
.typer .c.sp { position: relative; }
.typer-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; resize: none; font-size: 16px;
  background: transparent; color: transparent; caret-color: transparent; cursor: text; }
.typer-start { position: static; margin-top: .25rem; color: var(--ink-soft); font-size: .95rem; display: flex; gap: .5rem; align-items: center; }
.typer.focused .typer-start { display: none; }
.typer-notes { display: flex; flex-direction: column; gap: .4rem; }
.typer-notes:empty { display: none; }
.typer-note { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem .9rem; border-radius: var(--r-small); background: var(--accent-bg);
  color: var(--ink); font-weight: 600; border-left: 4px solid var(--accent); animation: rise var(--move) ease both; }
.typer-note.bad { background: var(--bad-bg); border-left-color: var(--bad); }
.typer-note .icon { margin-top: .15em; }
.live-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; color: var(--ink-soft); font-weight: 650; font-size: .95rem; }
.live-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- On-screen keyboard: 15 key units wide, drawn in container units so it scales with its box. Keys are coloured by
   finger; the next key has a thick ink frame (and the Shift to hold, too); keys not yet taught are faded. */
.kbd { container-type: inline-size; display: flex; flex-direction: column; background: var(--card);
  border: var(--edge); border-radius: var(--r-small); user-select: none; -webkit-user-select: none; }
.kbd-row { display: grid; grid-template-columns: repeat(60, 1fr); margin: .7cqw 1.2cqw 0; }
.kbd-row:first-child { margin-top: 1.2cqw; } .kbd-row:last-child { margin-bottom: 1.2cqw; }
.key { grid-column: span 4; margin-inline: .35cqw; height: 5.7cqw; border-radius: 1cqw; display: flex; flex-direction: column; align-items: center;
  justify-content: center; font: 650 2.4cqw/1 var(--sans); color: var(--ink); background: var(--f-thumb); border: max(1px, .2cqw) solid var(--edge-c); box-shadow: 0 max(2px, .3cqw) 0 var(--edge-c);
  position: relative; transition: background-color 90ms, opacity var(--fade); }
.key small { font-size: 1.7cqw; opacity: .75; line-height: 1; margin-bottom: .3cqw; }
.key.wide-6 { grid-column: span 6; } .key.wide-7 { grid-column: span 7; } .key.wide-8 { grid-column: span 8; }
.key.wide-9 { grid-column: span 9; } .key.wide-11 { grid-column: span 11; } .key.wide-18 { grid-column: span 18; } .key.wide-24 { grid-column: span 24; }
.key.mod { font-size: 1.8cqw; background: var(--card-2); color: var(--ink-soft); }
.key.f-pinky { background: var(--f-pinky); } .key.f-ring { background: var(--f-ring); }
.key.f-middle { background: var(--f-middle); } .key.f-index { background: var(--f-index); } .key.f-thumb { background: var(--f-thumb); }
.key.off { opacity: .38; }
.key.bump::after { content: ""; position: absolute; bottom: 16%; width: 24%; height: max(2px, .3cqw); border-radius: 2px; background: currentColor; opacity: .7; }
.key.next { border-color: var(--ink); box-shadow: 0 0 0 max(2px, .35cqw) var(--ink); opacity: 1; z-index: 1; font-weight: 800; }
.key.hit { filter: brightness(.85); }
.key.wrong { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.kbd-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .85rem; color: var(--ink-soft); }
.kbd-legend li { display: flex; align-items: center; gap: .35rem; }
.kbd-legend i { width: 1rem; height: 1rem; border-radius: 4px; border: 1px solid var(--line); }
.kbd-legend .f-pinky { background: var(--f-pinky); } .kbd-legend .f-ring { background: var(--f-ring); } .kbd-legend .f-middle { background: var(--f-middle); }
.kbd-legend .f-index { background: var(--f-index); } .kbd-legend .f-thumb { background: var(--f-thumb); }

/* New keys card at the top of a "Meet" lesson: big keycaps in finger colours with the finger's name. */
.new-keys { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .6rem 1rem; background: var(--card); border: var(--edge); border-radius: var(--r); }
.new-key { display: flex; align-items: center; gap: .75rem; }
.key-cap { min-width: 2.6rem; height: 2.6rem; padding: 0 .5rem; display: grid; place-items: center; border-radius: 12px; border: var(--edge);
  font: 700 1.3rem/1 var(--mono); color: var(--ink); background: var(--f-thumb); box-shadow: 0 3px 0 var(--edge-c); }
.key-cap.f-pinky { background: var(--f-pinky); } .key-cap.f-ring { background: var(--f-ring); } .key-cap.f-middle { background: var(--f-middle); }
.key-cap.f-index { background: var(--f-index); } .key-cap.f-thumb { background: var(--f-thumb); }
.key-cap.wide { font: 650 1rem/1 var(--sans); }
.key-cap.bump { text-decoration: underline 3px; text-underline-offset: .3em; }
.new-key > span:last-child { font-weight: 650; max-width: 13rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.lock-note { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; padding: 1.25rem; background: var(--card); border: var(--edge); border-radius: var(--r); }
/* Heat map on Progress: green = rarely missed, red = often missed; each key also shows its accuracy in per cent. */
.kbd.heat .key { background: var(--card-2); }
.kbd.heat .key small { opacity: 1; font-weight: 700; }
.kbd.heat .key.h0 { background: var(--heat-0); } .kbd.heat .key.h1 { background: var(--heat-1); } .kbd.heat .key.h2 { background: var(--heat-2); }
.kbd.heat .key.h3 { background: var(--heat-3); } .kbd.heat .key.h4 { background: var(--heat-4); }

/* ---- Hands: which finger presses the next key */
.guide-row { display: flex; align-items: center; justify-content: center; gap: 1rem 2rem; flex-wrap: wrap; }
.hands { display: flex; gap: 1.5rem; justify-content: center; }
.hand { width: 7.5rem; height: auto; }
.hand .palm, .hand .finger { fill: var(--card); stroke: var(--edge-c); stroke-width: 2; }
.hand .finger.on { stroke: var(--ink); stroke-width: 4; }
.hand .finger.on.f-pinky { fill: var(--f-pinky); } .hand .finger.on.f-ring { fill: var(--f-ring); } .hand .finger.on.f-middle { fill: var(--f-middle); }
.hand .finger.on.f-index { fill: var(--f-index); } .hand .finger.on.f-thumb { fill: var(--f-thumb); }
.hand .dot { fill: var(--ink); }
.next-line { font-weight: 650; min-height: 1.5em; text-align: center; }
.next-line kbd { font-size: 1em; }
@media (max-width: 34rem) { .hands { display: none; } }

/* ---- One screen, no scrolling (P2-130). On the typing screens the board takes the room left under the text: the keyboard
   is as wide as that height allows (its height is about 0.337 of its width, plus the 4px edge), with a hand on each side. */
:root { --fit-gap: clamp(.5rem, 1.5dvh, 1rem); }
.lesson-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fit-gap) 1.5rem; }
.lesson-intro .lesson-head { flex: 1 1 24rem; }
.board { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: .5rem; }
.board-main { --hand-w: clamp(4.5rem, 60cqh, 8rem); flex: 1 1 0; min-height: 8rem; container-type: size; display: flex; align-items: center;
  justify-content: center; gap: 1rem; }
.board-main .hand { flex: none; width: var(--hand-w); }
.board-main .kbd { flex: none; width: min(100cqw - 2 * (var(--hand-w) + 1rem), (100cqh - 6px) * 2.96); }
.board.no-hands .kbd { width: min(100cqw, (100cqh - 6px) * 2.96); }
.board.no-kbd .board-main .hand { width: min(11rem, 90cqh); }
.board.no-kbd.no-hands .board-main { display: none; }
.board-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .4rem 1rem; }
.board-foot .next-line { min-height: 1.5em; }
.board-left { justify-self: start; } .board-right { justify-self: end; }
.board-foot .live-stats { flex-wrap: nowrap; }
.game > .kbd { flex: none; align-self: center; width: min(100%, (24dvh - 6px) * 2.96); }
@media (max-width: 50rem) {
  .board-foot { display: flex; flex-wrap: wrap; justify-content: center; }
  .board-foot .next-line { flex-basis: 100%; order: -1; }
  .board-left:empty, .board-right:empty { display: none; }
}
/* From 1100px the side bar shows the name, so the trail does not repeat it. */
/* From 1100px the header shows the name, so the hub pages do not repeat it; their star and language pill sit at the
   header's right end, on its spacer, while the page scrolls under it. */
@media (min-width: 1100px) {
  .home-top > .brand-lockup { display: none; }
  body:not(.no-tabs) .home-top { position: fixed; z-index: 6; top: 0; right: max(1.5rem, env(safe-area-inset-right)); height: var(--head-h); }
}
/* Phones: a tighter lesson head, the new keys side by side, and the keyboard as wide as the screen. */
@media (max-width: 34rem) {
  .board { flex: 1 0 auto; justify-content: flex-end; }
  .board-main { flex: none; min-height: 0; container-type: inline-size; }
  .board-main .hand { display: none; }
  .board-main .kbd, .board.no-hands .kbd { width: 100%; }
  .board.no-kbd .board-main { display: none; }
  .hint-line { font-size: .88rem; }
  .lesson-intro .new-keys { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem .75rem; padding: .5rem .75rem; }
  .lesson-intro .new-keys { padding: .5rem .6rem; gap: .5rem; }
  .new-key { gap: .4rem; }
  .new-key .key-cap { min-width: 2.1rem; height: 2.1rem; font-size: 1.1rem; flex: none; }
  /* Long finger names (указательный, საჩვენებელი) break inside the card rather than run over its edge. */
  .new-key > span:last-child { min-width: 0; font-size: .8rem; line-height: 1.2; hyphens: auto; overflow-wrap: break-word; }
  .next-line { font-size: .9rem; }
  /* The new-keys card names each finger and the keys carry the colours, so the colour key under the board goes. */
  .board .kbd-legend { display: none; }
  .typer-view { --type-size: clamp(1.05rem, 5.5vw, 1.4rem); }
  .typer-start { font-size: .85rem; }
  /* Results: the three numbers in one row, so the buttons stay on the screen. */
  .summary { gap: .75rem; padding-top: .25rem; }
  .summary-stats { flex-wrap: nowrap; gap: .5rem; width: 100%; }
  .summary-stats div { flex: 1 1 0; min-width: 0; padding: .5rem .4rem; }
  .summary-stats dd { font-size: 1.1rem; }
  /* Georgian words are long and its letters wide, so its lesson text is set a step smaller to keep one screen. */
  :lang(ka) .lesson-head h1 { font-size: 1.1rem; }
  :lang(ka) .hint-line { font-size: .8rem; }
  :lang(ka) .typer-start { font-size: .78rem; }
  :lang(ka) .next-line { font-size: .82rem; }
}

/* ---- Games */
.game { width: 100%; max-width: 50rem; margin: 0 auto; display: flex; flex-direction: column; gap: var(--fit-gap); }
.game-hud { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1.25rem; flex-wrap: wrap; font-weight: 700; }
.game-hud span { display: inline-flex; gap: .35rem; align-items: center; font-variant-numeric: tabular-nums; }
.lives { display: inline-flex; gap: .15rem; color: var(--bad); }
.lives .icon.lost { color: var(--line); }
.game-field { position: relative; flex: 1 1 0; min-height: 12rem; overflow: hidden; border: var(--edge); border-radius: var(--r);
  background: linear-gradient(var(--sky), var(--card) 85%); box-shadow: var(--lift-card); }
.game-field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .6rem; background: var(--mint); border-top: var(--edge); }
.leaf { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; gap: .2rem; padding: .3rem .85rem .35rem;
  border-radius: 1.4rem .3rem 1.4rem .3rem; background: var(--leaf); border: 2px solid var(--leaf-edge); color: var(--ink);
  font: 600 clamp(1.05rem, .9rem + .6vw, 1.35rem)/1.2 var(--mono); white-space: pre; will-change: transform; }
.leaf b { color: var(--good); text-decoration: underline 2px; text-underline-offset: .15em; }
.leaf.target { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-bg), 3px 3px 0 var(--lift-c); z-index: 2; }
.leaf.caught { animation: leafOut var(--move) ease forwards; }
.leaf.lost { animation: fadeOut var(--move) ease forwards; background: var(--bad-bg); border-color: var(--bad); }
.leaf-time { display: none; height: .25rem; border-radius: 99px; background: var(--leaf-edge); transform-origin: left; }
.game-field.still .leaf-time { display: block; animation: drain linear forwards; }
.game-field.still .leaf { animation: fade var(--fade) ease both; }
.game-field.still .leaf.caught, .game-field.still .leaf.lost { animation: fadeOut var(--move) ease forwards; }
.game-field.paused .leaf, .game-field.paused .leaf-time { animation-play-state: paused; }
.game-field.paused .leaf { opacity: .55; }
.game-field .typer-input { z-index: 3; }
.game-echo { min-height: 2.75rem; display: flex; align-items: center; justify-content: center; gap: .5rem; font: 600 1.3rem var(--mono); }
.game-echo .typed { min-width: 6ch; text-align: center; border-bottom: 3px solid var(--current); padding: 0 .3rem; }
.game-echo .typed:empty { border-bottom-color: transparent; }
.game-echo .typed.bad { border-color: var(--bad); color: var(--bad); }
.game-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.game-pick .card { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.game-pick .card p { color: var(--ink-soft); }
.game-pick .card h2 { margin: 0; font-size: 1.3rem; }
a.card { color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--accent); }
.game-pick .best { font-weight: 700; color: var(--ink); display: flex; gap: .35rem; align-items: center; }
.game-pick .best .icon { color: var(--gold); }
/* Key rush: one big key at a time */
.rush { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fit-gap); padding-block: .5rem; }
.rush.paused .rush-key { opacity: .55; }
.rush-key { width: clamp(6rem, min(22vw, 22dvh), 10rem); aspect-ratio: 1; display: grid; place-items: center; border: var(--edge); border-radius: 1.4rem;
  font: 700 clamp(2.6rem, min(2rem + 4vw, 10dvh), 5rem)/1 var(--mono); background: var(--card); box-shadow: 0 8px 0 var(--lift-c); }
.rush-key.f-pinky { background: var(--f-pinky); } .rush-key.f-ring { background: var(--f-ring); } .rush-key.f-middle { background: var(--f-middle); }
.rush-key.f-index { background: var(--f-index); } .rush-key.f-thumb { background: var(--f-thumb); }
.rush-key.in { animation: pop var(--fade) ease both; }
.rush-key.bad { border-color: var(--bad); box-shadow: 0 8px 0 var(--bad); }
.rush-queue { display: flex; gap: .5rem; color: var(--ink-soft); font: 600 1.4rem var(--mono); min-height: 2rem; }
.big-num { font: 700 clamp(2rem, 1.6rem + 2vw, 3rem)/1 var(--display); color: var(--heading); font-variant-numeric: tabular-nums; }
.test-clock { display: flex; align-items: center; gap: 1rem; }
.test-clock .timer { flex: 1; }
.lesson-top .test-clock { flex: 1; }
.test-clock b { font: 700 1.15rem var(--mono); color: var(--heading); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

/* ---- Progress */
.card.muted { opacity: .6; display: flex; align-items: center; gap: 1rem; }
.stat-card { display: flex; flex-direction: column; gap: .75rem; }
.stat-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.stat-row > div { display: flex; flex-direction: column; }
.stat-row dt, .stat-label { font-size: .9rem; color: var(--ink-soft); }
.stat-big { font: 600 1.6rem/1.2 var(--serif); font-variant-numeric: tabular-nums; }
.xp-bar { height: .75rem; border-radius: 99px; background: var(--card-2); border: var(--edge); overflow: hidden; }
.xp-bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.unit-bars { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.unit-bars li { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr auto; gap: .75rem; align-items: center; }
.unit-bars .xp-bar span { background: var(--good); }
.unit-bars em { font-style: normal; font-size: .9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }
@media (max-width: 30rem) { .unit-bars li { grid-template-columns: 1fr auto; } .unit-bars .xp-bar { grid-column: 1 / -1; grid-row: 2; } }
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: 13rem; overflow: visible; touch-action: pan-y; border-radius: var(--r-small); }
.chart svg:focus-visible { outline: 3px solid var(--current); outline-offset: 4px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--ink-soft); font: 500 .75rem var(--sans); font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--chart-line); stroke: var(--card); stroke-width: 2; }
.chart .end-label { fill: var(--ink); font: 700 .8rem var(--sans); font-variant-numeric: tabular-nums; }
.chart .cross { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-tip { position: absolute; top: 0; pointer-events: none; background: var(--card); border: var(--edge); border-radius: 10px; padding: .35rem .6rem;
  font-size: .85rem; line-height: 1.3; max-width: 13rem; box-shadow: var(--lift); }
.chart-tip b { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; }
.chart-tip span { color: var(--ink-soft); }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; }
.chart-head h3 { margin: 0; font-size: 1.05rem; }
.chart-head p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
details.more { border-top: 1px solid var(--line); padding-top: .25rem; }
details.more summary { cursor: pointer; font-weight: 650; padding: .6rem 0; }
details.more[open] summary { margin-bottom: .5rem; }
.weak-keys { display: flex; flex-wrap: wrap; gap: .5rem; }
.weak-keys span { display: inline-flex; flex-direction: column; align-items: center; min-width: 3.25rem; padding: .35rem .5rem; border: var(--edge);
  border-radius: 10px; background: var(--card-2); }
.weak-keys b { font: 700 1.3rem var(--mono); }
.weak-keys small { font-size: .78rem; color: var(--ink-soft); }
.map-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .9rem; color: var(--ink-soft); }
.map-legend li { padding-left: 1.4rem; position: relative; }
.map-legend li::before { content: ""; position: absolute; left: 0; top: .2em; width: .95rem; height: .95rem; border-radius: 4px; border: 1px solid var(--line); }
.map-legend .l0::before { background: var(--heat-0); } .map-legend .l2::before { background: var(--heat-2); }
.map-legend .l4::before { background: var(--heat-4); } .map-legend .ln::before { background: var(--card-2); }

/* ---- Forms (Settings, from Notella) */
.form { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field > label, .field > .label { font-weight: 650; }
.field.toggle { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; align-items: center; }
.field.toggle input { width: 1.4rem; height: 1.4rem; accent-color: var(--navy); margin: 0; }
.field.toggle .hint { grid-column: 2; }
.field select { min-height: 2.75rem; padding: .4rem .75rem; border: var(--edge); border-radius: var(--r-small); background: var(--card); }
.seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.seg button { min-height: 2.75rem; padding: .4rem 1rem; border: var(--edge); border-radius: 999px; background: var(--card); cursor: pointer; font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-ink); }
.file-btn { position: relative; }
.file-btn:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.actions.start { justify-content: flex-start; }
.field textarea { width: 100%; padding: .5rem .75rem; border: var(--edge); border-radius: var(--r-small); background: var(--card); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; resize: vertical; }
.row-link { display: flex; align-items: center; gap: .75rem; min-height: 3rem; padding: .5rem 1rem; text-decoration: none; background: var(--card); border: var(--edge); border-radius: var(--r-small); }
.row-link .icon.end { margin-left: auto; }
.plain-list { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.error-page { max-width: 30rem; margin: 3rem auto; text-align: center; }
.noscript { padding: 2rem; text-align: center; }
.confirm-box { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; border: 2px solid var(--bad); border-radius: var(--r-small); background: var(--bad-bg); }
.form-msg { font-weight: 650; }
.form-msg.good { color: var(--good); }
.form-msg.bad { color: var(--bad); }

/* ---- Welcome and Guide */
.welcome { max-width: 42rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1rem; }
.welcome-top { display: flex; align-items: center; gap: 1rem; }
.dots { display: flex; gap: .4rem; }
.dots span { width: 2rem; height: .4rem; border-radius: 99px; background: var(--line); }
.dots span.on { background: var(--ink); }
.welcome-step { display: flex; flex-direction: column; gap: 1.25rem; animation: enter var(--move) ease both; }
.welcome-hero { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 0 .5rem; }
.welcome-hero h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); }
.welcome-hero + .btn { align-self: flex-start; }
.trail-art { width: 100%; max-width: 30rem; height: auto; }
.trail-art .k { fill: var(--card); stroke: var(--edge-c); stroke-width: 2; }
.trail-art .k.on { fill: var(--accent-bg); }
.trail-art text { font: 700 15px var(--mono); fill: var(--ink); }
.trail-art .path-line { fill: none; stroke: var(--good); stroke-width: 3; stroke-dasharray: 4 6; stroke-linecap: round; }
.steps { list-style: none; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: .9rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; align-items: start; }
.steps li::before { content: counter(s); width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: var(--accent-bg); border: var(--edge); }
.steps li strong { display: block; color: var(--heading); }
.steps li span { color: var(--ink-soft); }
.course-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.course-table th, .course-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.course-table td:first-child { font: 700 1rem var(--mono); white-space: nowrap; }
.table-wrap { overflow-x: auto; }

/* Language menu on every screen (from Notella P2-122). */
.lang-bar { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.lang-menu { position: relative; flex: none; }
.lang-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .8rem 0 .9rem; border: var(--edge);
  border-radius: 999px; background: var(--card); color: var(--ink); box-shadow: var(--lift); font: 700 .8rem/1 var(--sans);
  letter-spacing: .04em; cursor: pointer; }
.lang-btn::after { content: ""; width: .4rem; height: .4rem; margin-top: -.2rem; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform var(--fade) ease; }
.lang-btn[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: .2rem; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { background: var(--accent-bg); }
.lang-btn:active { transform: translate(3px, 3px); box-shadow: var(--lift-down); }
.lang-list { position: absolute; top: calc(100% + .6rem); right: 0; z-index: 30; min-width: 13rem; padding: .4rem; display: flex;
  flex-direction: column; gap: .15rem; border: var(--edge); border-radius: var(--r-small); background: var(--card); box-shadow: var(--lift);
  animation: fade var(--fade) ease both; }
.lang-list button { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 2.75rem; padding: .5rem .65rem; border: 0;
  border-radius: 10px; background: none; color: var(--ink); font: 500 1rem/1.2 var(--sans); text-align: left; cursor: pointer; }
.lang-list button b { min-width: 1.8rem; font-size: .75rem; letter-spacing: .04em; color: var(--ink-soft); }
.lang-list button:hover { background: var(--card-2); }
.lang-list button[aria-current] { font-weight: 700; }
.lang-list button[aria-current]::after { content: "✓"; margin-left: auto; font-weight: 700; }   /* i18n-ignore */
.lesson-top .lang-btn { box-shadow: none; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }
.choice-list { display: flex; flex-direction: column; gap: .6rem; }
.choice { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-height: 3.5rem; padding: .8rem 1rem; text-align: left;
  border: var(--edge); border-radius: var(--r-small); background: var(--card); cursor: pointer; box-shadow: var(--lift); color: var(--ink); text-decoration: none; }
.choice:active { transform: translate(3px, 3px); box-shadow: var(--lift-down); }
.choice-label { font-weight: 700; font-size: 1.05rem; }
.choice-sub { color: var(--ink-soft); font-size: .92rem; }

/* ---- Typy-Type (#/typy, P2-134): a parent types a line until it is known by heart. The line wraps freely (no fixed
   three-line window), hidden letters keep their width as a line under the gap, and the side list shows each line's levels. */
.page.typy { max-width: 60rem; }
.typy-body { display: flex; flex-direction: column; gap: 1.25rem; }
.typy-hero { display: flex; flex-direction: column; gap: .6rem; }
.typy-facts { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.typy-facts li { padding: .2rem .75rem; border: var(--edge); border-radius: 999px; background: var(--card-2); font-weight: 600; font-size: .9rem; }
.typy-pick { display: flex; flex-direction: column; gap: .5rem; }
.typy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: 1.5rem; align-items: start; }
@media (max-width: 52rem) {
  .typy-grid { grid-template-columns: minmax(0, 1fr); }
  /* Phones: the language and deck choices are one row each that scrolls sideways (the cut-off last button shows
     there is more), and the levels sit two a row, so the line to type comes up the screen. */
  .typy-pick .seg { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-block: .1rem .35rem; }
  .typy-pick .seg button { flex: none; max-width: min(17rem, 85%); line-height: 1.2; }   /* a long name wraps inside its button */
  .typy-levels button { flex: 1 1 40%; padding-inline: .6rem; line-height: 1.25; }   /* two a row; a long word (Georgian) widens its button or takes a row */
  .typy-body { gap: 1rem; }
  .typy-hero .lead { font-size: 1rem; }
  .typy-facts li { font-size: .85rem; }
}
.typy-play { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.typy-head { display: flex; flex-direction: column; gap: .2rem; }
.typy-title { font-size: 1.3rem; }
.typy-view { font: 500 clamp(1.1rem, 1rem + .8vw, 1.45rem)/1.75 var(--sans); overflow-wrap: anywhere; }
.typy-view .c.hide { color: transparent; box-shadow: inset 0 -2px 0 var(--ghost); }
.typy-view .c.hide.cur { color: transparent; background: var(--accent-bg); box-shadow: inset 0 -.18em 0 var(--current); }
.typy-box.done { cursor: default; }
.typy-live span { font-variant-numeric: tabular-nums; }
.typy-result:empty { display: none; }
.typy-done { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.1rem; border-radius: var(--r-small); border-left: 4px solid var(--good);
  background: var(--good-bg); color: var(--ink); animation: rise var(--move) ease both; }
.typy-done.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.typy-done-head { display: flex; gap: .5rem; align-items: center; font-weight: 700; font-size: 1.1rem; }
.typy-done-stats { font-weight: 600; font-variant-numeric: tabular-nums; }
.typy-note { line-height: 1.5; }
.typy-done .fine { color: var(--ink); opacity: .8; }
@media (hover: none) and (pointer: coarse) { .typy-keys { display: none; } }
.typy-side { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.typy-side-title { font-size: 1.05rem; }
.typy-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.typy-line { width: 100%; min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem .8rem;
  border: var(--edge); border-radius: var(--r-small); background: var(--card); color: var(--ink); text-align: start; cursor: pointer; font: inherit; }
.typy-line[aria-pressed="true"] { background: var(--accent-bg); font-weight: 650; }
.typy-line-name { min-width: 0; overflow-wrap: anywhere; }
.typy-dots { display: inline-flex; gap: 4px; flex: none; }
.typy-dot { width: .6rem; height: .6rem; border-radius: 50%; border: 2px solid var(--edge-c); background: transparent; }
.typy-dot.on { background: var(--good); border-color: var(--good); }
.typy-tonight { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; }
.typy-tonight h3 { font-size: 1rem; }
.typy-tonight .btn { align-self: flex-start; }
.typy-how { display: flex; flex-direction: column; gap: .6rem; }
.typy-how ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }

/* ---- Motion: gentle entrances; with Reduce Motion the same timings become plain fades */
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes leafOut { from { opacity: 1; } to { opacity: 0; transform: var(--at, none) scale(1.25); } }
@keyframes lineFade { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .stage, .summary, .welcome-step, .feedback.good, .feedback.bad, .star.on, .typer-note, .rush-key.in, .typy-done { animation-name: fade; }
  .leaf.caught { animation-name: fadeOut; }
  .btn:active:not(:disabled), a.node-btn:active b, .choice:active, a.card:active, .lang-btn:active, .btn:hover:not(:disabled) { transform: none; }
  .lang-btn::after { transition-property: none; }   /* the list itself fades in both modes */
  .lesson-bar span { transition-property: none; }
  /* The text does not slide up a line: it fades into its new place in the same time. */
  .typer-text { transition-property: none; }
  .typer-text.moved { animation: lineFade var(--move) ease both; }
}