:root {
  --bg: #faf7f2;
  --panel: #ffffff;
  --ink: #2b2622;
  --muted: #7a716a;
  --line: #e6dfd6;
  --accent: #d2483f;
  --accent-soft: #fbe6e3;
  --good: #2f8f5b;
  --good-soft: #e1f3e8;
  --bad: #c0392b;
  --bad-soft: #fbe3e0;
  --jp: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1917; --panel: #25221f; --ink: #eee8e1; --muted: #a39a91; --line: #3a3530;
    --accent: #ef6a5f; --accent-soft: #3d2522; --good: #5cc48a; --good-soft: #1f3529;
    --bad: #f07a6c; --bad-soft: #3e2421; --shadow: none;
  }
}
body.mincho { --jp: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS Mincho", "Noto Serif JP", serif; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--accent); }
.jp, .kana { font-family: var(--jp); }

.top {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1.2rem; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.1rem; }
.brand-kana { font-family: var(--jp); background: var(--accent); color: #fff; border-radius: 8px; padding: 0 .35rem; }
nav { display: flex; gap: .2rem; flex-wrap: wrap; flex: 1; }
nav a { text-decoration: none; color: var(--muted); padding: .35rem .7rem; border-radius: 999px; }
nav a:hover { color: var(--ink); }
nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }
footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 1rem; }

h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
.lead { color: var(--muted); margin: 0 0 1.2rem; max-width: 46rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

button, .btn {
  font: inherit; cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: #fff;
  padding: .55rem 1.1rem; border-radius: 10px; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { filter: brightness(1.07); }
button:disabled { opacity: .45; cursor: default; filter: none; }
button.ghost, .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button.good { background: var(--good); border-color: var(--good); }
button.bad { background: var(--bad); border-color: var(--bad); }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); }
.grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Lesson list */
.lesson-card { text-decoration: none; color: inherit; display: block; position: relative; }
.lesson-card:hover { border-color: var(--accent); }
.lesson-card .step { color: var(--accent); font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
.lesson-card .title { font-family: var(--jp); font-size: 1.5rem; margin: .2rem 0; }
.bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: .6rem; }
.bar > span { display: block; height: 100%; background: var(--good); }

/* Lesson page kana cards */
.kana-list { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kana-card { display: flex; gap: 1rem; align-items: flex-start; }
.kana-card .big { font-family: var(--jp); font-size: 3.6rem; line-height: 1; min-width: 4.2rem; text-align: center; }
.kana-card .rom { font-weight: 700; font-size: 1.2rem; }
.kana-card .look { color: var(--muted); font-size: .85rem; margin-top: .3rem; }
.kana-rows { display: grid; gap: 1.2rem; }
.kana-row .row-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .35rem; }
.kana-row .kana-card { flex-direction: column; align-items: center; text-align: center; gap: .4rem; padding: .8rem .5rem; font-size: .85rem; }
.kana-row .kana-card .big { font-size: 3rem; min-width: 0; }
.kana-row .kana-card .rom { font-size: 1.1rem; }
.task { display: flex; gap: .8rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.task:first-child { border-top: 0; }
.task .text { flex: 1; min-width: 14rem; }
.pairs { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pair { font-family: var(--jp); font-size: 1.6rem; display: flex; justify-content: space-between; align-items: baseline; }
.pair small { font-family: system-ui, sans-serif; font-size: .9rem; color: var(--muted); display: block; }

/* Group picker */
.picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  border: 1px solid var(--line); border-radius: 999px; padding: .3rem .75rem; cursor: pointer; user-select: none;
  background: var(--panel); font-family: var(--jp); display: inline-flex; gap: .35rem; align-items: center;
}
.chip input { display: none; }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.picker-head { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .4rem; flex-wrap: wrap; }
.picker-head strong { margin-right: .3rem; }
.linkish { background: none; border: 0; color: var(--accent); padding: 0 .2rem; cursor: pointer; font-size: .85rem; }

/* Flashcard */
.stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1rem; }
.flash { width: min(420px, 100%); aspect-ratio: 4 / 3; perspective: 1200px; cursor: pointer; }
.flash-inner { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.flash.flipped .flash-inner { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 20px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 1.2rem; text-align: center;
}
.face.back { transform: rotateY(180deg); }
.face .kana { font-size: 7rem; line-height: 1.1; }
.face .rom { font-size: 3rem; font-weight: 700; }
.face .mn { color: var(--muted); margin-top: .6rem; max-width: 22rem; }
.face .hint { position: absolute; bottom: .7rem; font-size: .8rem; color: var(--muted); }
.progress-line { color: var(--muted); font-size: .9rem; }
.kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 .35rem; font-size: .8rem; }

/* Quiz */
.quiz-kana { font-family: var(--jp); font-size: 8rem; line-height: 1.1; text-align: center; }
.quiz-input {
  font: inherit; font-size: 1.8rem; text-align: center; width: min(320px, 100%); padding: .5rem;
  border: 2px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); outline: none;
}
.quiz-input:focus { border-color: var(--accent); }
.quiz-input.right { border-color: var(--good); background: var(--good-soft); }
.quiz-input.wrong { border-color: var(--bad); background: var(--bad-soft); }
.feedback { min-height: 3.2rem; text-align: center; }
.feedback .ans { font-size: 1.4rem; font-weight: 700; color: var(--bad); }
.stats { display: flex; gap: 1.5rem; justify-content: center; color: var(--muted); }
.stats b { color: var(--ink); }
.miss-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.miss { font-family: var(--jp); background: var(--bad-soft); border-radius: 8px; padding: .2rem .55rem; }
.miss small { font-family: system-ui; color: var(--muted); margin-left: .25rem; }
.big-number { font-size: 2.4rem; font-weight: 700; }

/* Worksheet */
.sheet-grid { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.sheet-grid.wide { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.cell { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: .3rem; text-align: center; }
.cell .kana { font-size: 1.9rem; line-height: 1.25; }
.cell input {
  width: 100%; font: inherit; text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: .2rem;
  background: var(--bg); color: var(--ink); outline: none;
}
.cell input:focus { border-color: var(--accent); }
.cell.right { background: var(--good-soft); border-color: var(--good); }
.cell.wrong { background: var(--bad-soft); border-color: var(--bad); }
.cell .fix { color: var(--bad); font-size: .8rem; font-weight: 700; min-height: 1.1em; }
.break-timer { font-size: 3.5rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.sticky-actions { position: sticky; bottom: 0; background: var(--bg); padding: .8rem 0; margin-top: 1rem; border-top: 1px solid var(--line); }

/* Reading */
.sentence { font-family: var(--jp); font-size: 2rem; line-height: 2.6; word-break: break-all; }
.tok { cursor: pointer; border-radius: 6px; position: relative; display: inline-block; line-height: 1.6; padding: 0 1px; }
.tok:hover { background: var(--accent-soft); }
/* Typed letters sit above each kana and its romaji below [ta typed over た, ta shown under it]. */
.tok .tt, .tok.peek::after, .show-all .tok[data-r]::after {
  position: absolute; left: 50%; transform: translateX(-50%);
  font: 600 .85rem system-ui, sans-serif; white-space: nowrap; line-height: 1;
}
.tok .tt { top: -.6em; color: var(--ink); }
.typing.right .tt { color: var(--good); }
.tok.peek::after, .show-all .tok[data-r]::after { content: attr(data-r); bottom: -.6em; color: var(--accent); }
.dots { display: flex; gap: .3rem; flex-wrap: wrap; }
.dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); font-size: .75rem; cursor: pointer; padding: 0; color: var(--muted); }
.dot.done { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.dot.here { border-color: var(--accent); border-width: 2px; color: var(--accent); }
.romaji-line { color: var(--muted); font-size: 1.1rem; margin-top: .5rem; }
.tok.off { background: var(--bad-soft); box-shadow: inset 0 -3px 0 var(--bad); }
/* The box the sentence is typed into, kept unseen over it [16px so iOS doesn't zoom on focus]. */
.typing { position: relative; border-radius: 10px; padding: 0 .4rem; cursor: text; border: 2px solid transparent; }
.typing:focus-within { border-color: var(--accent); }
.typing.right { border-color: var(--good); background: var(--good-soft); }
.sentence-input { position: absolute; top: 0; left: 0; width: 100%; height: 1px; font-size: 16px; opacity: 0; pointer-events: none; border: 0; padding: 0; caret-color: transparent; }
.caret { display: none; width: 2px; height: 1em; margin: 0 -1px; vertical-align: -.1em; background: var(--accent); animation: blink 1s steps(1) infinite; }
.typing:focus-within .caret { display: inline-block; }
@keyframes blink { 50% { opacity: 0; } }

/* Chart */
.chart { border-collapse: separate; border-spacing: .35rem; margin: 0 auto; }
.chart td { width: 4.2rem; height: 4.2rem; text-align: center; border-radius: 10px; cursor: pointer; background: var(--panel); border: 1px solid var(--line); }
.chart td.empty { background: transparent; border: 0; cursor: default; }
.chart td .kana { font-size: 1.8rem; line-height: 1.1; display: block; }
.chart td small { color: var(--muted); }
.chart-wrap { overflow-x: auto; }
.box-0 { }
.box-1 { background: #fdf0d8 !important; }
.box-2 { background: #f4f0cf !important; }
.box-3 { background: #e3f1d6 !important; }
.box-4 { background: #cfead9 !important; }
.box-5 { background: #b5e0c6 !important; }
@media (prefers-color-scheme: dark) {
  .box-1 { background: #3d3220 !important; } .box-2 { background: #39391f !important; }
  .box-3 { background: #2b3a24 !important; } .box-4 { background: #213a2c !important; } .box-5 { background: #1d4430 !important; }
}
.legend { display: flex; gap: .4rem; align-items: center; justify-content: center; flex-wrap: wrap; margin: .8rem 0; font-size: .85rem; }
.legend span { width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 1px solid var(--line); display: inline-block; }

/* Modal */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.modal { max-width: 380px; width: 100%; text-align: center; max-height: calc(100dvh - 2rem); overflow-y: auto; }
.modal .kana { font-size: 6rem; line-height: 1.1; }
/* A zero-height sticky row, so the × stays in the corner while a long popup scrolls and takes no line of its own [学's popup at 360 px]. */
.modal-top { position: sticky; top: -.6rem; height: 0; text-align: right; z-index: 1; }
.modal-x { margin: -.6rem -.6rem 0 0; background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 99px; width: 2rem; height: 2rem; padding: 0; font-size: 1.2rem; line-height: 1; }

.speak { background: transparent; border: 1px solid var(--line); color: var(--ink); padding: .2rem .55rem; border-radius: 8px; font-size: .9rem; }
.badge { display: inline-block; font-size: .75rem; padding: .05rem .5rem; border-radius: 99px; background: var(--good-soft); color: var(--good); font-weight: 600; }

@media (max-width: 600px) {
  .top { gap: .4rem .6rem; padding: .5rem .8rem; }
  .top nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .brand { flex: 1; }
  #font-toggle { padding: .3rem .7rem; font-size: .85rem; }
  .face .kana { font-size: 5.5rem; }
  .quiz-kana { font-size: 6rem; }
  .sentence { font-size: 1.6rem; }
  .chart td { width: 3.3rem; height: 3.6rem; }
  .chart td .kana { font-size: 1.4rem; }
}
.speak { display: none; }
body.has-voice .speak, body.has-media .speak.clip, .speak.rec { display: inline-block; }
nav .short, .touch-only { display: none; }
button, .btn, .chip, .flash, .tok, .cell, .dot, td[data-kana] { touch-action: manipulation; }
select { font: inherit; padding: .3rem; border-radius: 8px; }
.romaji-line { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .top { position: static; }
  nav { justify-content: space-between; }
  nav { gap: 0; }
  nav a { padding: .35rem .45rem; font-size: .92rem; }
  .sticky-actions button { padding: .5rem .85rem; }
  nav .long { display: none; }
  nav .short { display: inline; }
  .quiz-kana { font-size: 5rem; }
  .stage { gap: .7rem; margin-top: .5rem; }
}
/* Touch screens have no keys to hint at and need bigger targets [a 26px dot is a missed tap]. */
@media (hover: none) and (pointer: coarse) {
  .kbd, .key-only { display: none; }
  .touch-only { display: inline; }
  .speak { min-width: 2.75rem; min-height: 2.5rem; }
  .dot { width: 2.25rem; height: 2.25rem; font-size: .85rem; }
  .linkish { padding: .5rem .6rem; }
  input[type="checkbox"] { width: 1.3rem; height: 1.3rem; }
}

/* Sign-in and no-access screens */
body.gated nav, body.gated #font-toggle, body.gated #account { display: none; }
.gate { max-width: 400px; margin: 3rem auto; text-align: center; }
.gate-logo { font-family: var(--jp); font-size: 3rem; width: 5rem; height: 5rem; line-height: 5rem; margin: 0 auto .5rem; border-radius: 18px; background: var(--accent); color: #fff; }
.gate-error { background: var(--bad-soft); color: var(--bad); border-radius: 10px; padding: .5rem .8rem; }
#account { margin-bottom: .3rem; }

/* Mnemonic illustrations, revealed on request */
.art-slot { display: none; margin-top: .6rem; }
body.has-media .art-slot { display: block; }
.art-toggle { font-size: .85rem; padding: .3rem .75rem; }
.art { display: block; width: 100%; max-width: 480px; height: auto; margin: .5rem auto 0; border-radius: 10px; border: 1px solid var(--line); }
.kana-card { flex-wrap: wrap; }
.kana-card .art-slot { flex-basis: 100%; }
/* The drawing gives the answer away, so on a flashcard it waits for the flip [あ's drawing shows a capital A]. */
.stage .card-art { visibility: hidden; width: min(420px, 100%); text-align: center; }
.stage.flipped .card-art { visibility: visible; }

/* Stroke order, drawn one stroke after another [each 0.5s, 0.6s apart, so あ takes 1.7s].
   The gap is twice the path so a waiting stroke shows nothing [dasharray 1 left a round-cap dot at the end of あ's 3rd stroke]. */
.stroke-slot { margin-top: .6rem; }
.kana-card .stroke-slot { flex-basis: 100%; margin-top: -.4rem; }
.stroke-toggle { font-size: .85rem; padding: .3rem .75rem; }
.strokes { display: flex; gap: .5rem; justify-content: center; margin-top: .5rem; cursor: pointer; }
.strokes svg { width: 120px; max-width: 100%; height: auto; aspect-ratio: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
/* A combination card is a narrow column, so its slot stays in the flow and its boxes stack [102 px wide at 360]. */
.kana-row .kana-card .stroke-slot { flex-basis: auto; margin-top: 0; width: 100%; }
.kana-row .stroke-toggle { max-width: 100%; padding: .3rem .5rem; }
.kana-row .strokes { flex-direction: column; align-items: center; }
.strokes path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* Strokes drawn in one after another, here and in the writing quiz's Self answer [stroke 3 starts 1.2 s in]. */
.strokes path, .pad .hint .answer { stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: stroke-draw .5s ease-out forwards; animation-delay: calc(var(--i) * .6s); }
.strokes text, .pad .hint text { font-size: 8px; fill: var(--accent); opacity: 0; animation: stroke-num .1s forwards; animation-delay: calc(var(--i) * .6s); }
@keyframes stroke-draw { to { stroke-dashoffset: 0; } }
@keyframes stroke-num { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .strokes path, .strokes text, .pad .hint .answer, .pad .hint text { animation: none; stroke-dashoffset: 0; opacity: 1; }
}
.picker-script { display: flex; align-items: center; gap: .5rem; margin: 1.4rem 0 0; flex-wrap: wrap; }
.picker-script h3 { margin: 0 .3rem 0 0; font-size: 1.05rem; color: var(--accent); }
.picker-script:first-child { margin-top: 0; }
/* Author display rules beat the browser's own [hidden] rule, so restate it [the long-vowel Show button stayed visible]. */
[hidden] { display: none !important; }

/* Kana or Japanese: the nav shows the section's own tabs [#words hides the six kana tabs]. */
.sections { display: flex; gap: .2rem; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .15rem; }
.sections a { text-decoration: none; color: var(--muted); padding: .2rem .7rem; border-radius: 999px; font-size: .9rem; white-space: nowrap; }
body[data-section="kana"] .sections [data-section-link="kana"], body[data-section="japanese"] .sections [data-section-link="japanese"] {
  background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
body:not([data-section="japanese"]) nav a[data-section="japanese"], body[data-section="japanese"] nav a[data-section="kana"] { display: none; }
body.gated .sections { display: none; }
footer .credits-ja { display: none; margin-top: .3rem; }
body[data-section="japanese"] footer div.credits-ja { display: block; }
body[data-section="japanese"] footer summary .credits-ja { display: inline; }
footer .credits summary { cursor: pointer; margin-top: .3rem; }
footer .credits[open] summary { margin-bottom: .3rem; }
/* A phone keeps the logo and the short labels so the header stays one row [ひ, かな | 日本語, Font at 360 px]. */
@media (max-width: 600px) {
  .sections .long, .brand .long { display: none; }
}

/* Vocabulary cards open the answer under the question instead of flipping [a meaning and two sentences overflow a 4:3 card]. */
.vcard { width: min(560px, 100%); cursor: pointer; }
.vcard .face { position: static; transform: none; backface-visibility: visible; min-height: 11rem; }
.vcard .face.back { margin-top: .6rem; min-height: 0; cursor: default; }
.vcard .face .hint { position: static; margin-top: 1rem; }
.vcard .word { font-family: var(--jp); font-size: 3rem; line-height: 1.7; }
.vcard .face.back .word { font-size: 2.2rem; }
.vcard rt { font-size: .38em; color: var(--muted); }
/* Furigana over kanji at the word's level stay hidden until the card turns, holding their space [会う shows 会 alone; 写真 keeps しゃしん]. */
.vcard:not(.flipped) rt.ask { visibility: hidden; }
.vcard .meaning { font-size: 1.4rem; font-weight: 600; }
.examples { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .6rem; display: grid; gap: .5rem; text-align: left; width: 100%; }
.ex .jp { font-size: 1.1rem; }
/* An affix's words and a compound verb's root under the answer, one per row [お茶 (green) tea]. */
.built { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .6rem; display: grid; gap: .3rem; text-align: left; width: 100%; }
.built .jp { font-size: 1.1rem; }
.vcard .built rt, .vcard .alt rt { font-size: .55em; }
/* A word's kanji under its answer, each kanji a button to its popup [学 study, learning · also in 大学, 学校]. */
.kanji-note { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .6rem; display: grid; gap: .3rem; text-align: left; width: 100%; }
.kn-k { font-family: var(--jp); font-size: 1.3rem; padding: .1rem .45rem; min-width: 2.4rem; background: transparent; color: var(--accent); border: 1px solid var(--line); border-radius: 8px; }
/* What a word's kanji are built from, last on the back [Parts 子 child; Radicals ⺍ three strokes · 冖 crown, cover]. */
.pieces { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .6rem; display: grid; gap: .3rem; text-align: left; width: 100%; }
.pieces .jp { font-size: 1.1rem; }
/* A kanji's readings under it, a reading not met yet muted [四, then シ, よっ.つ, よん, よ]. */
.kanji-reading { font-size: 1.3rem; margin-bottom: .4rem; }
.kanji-reading span, .kr-used span { white-space: nowrap; }
.kr-row, .ku-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .7rem; }
/* Each reading's words under the history note [ガク 学校 · 大学生 · 学生]. */
.kr-used { margin-top: .5rem; display: grid; gap: .15rem; }
.ku { font-size: 1.15rem; }
.kr-words { font-size: 1.05rem; }
.kr-words .unmet, .kr-row.unmet .kr, .ku-row.unmet .ku { color: var(--muted); }
.kanji-family { margin-top: .3rem; }
.kanji-family a { margin-right: .25rem; }
.kanji-big { font-family: var(--jp); font-size: 5rem; line-height: 1.1; }
.kanji-kw { font-size: 1.3rem; font-weight: 600; }
.kanji-words { margin-top: .8rem; display: grid; gap: .35rem; text-align: left; }
.kw-row .jp { font-size: 1.4rem; }
.kw-row.unmet { color: var(--muted); }
.kw-row rt { font-size: .7em; color: inherit; }
/* Koohii stories under the stroke order, each author above its text [the Koohii account's story, then three by stars]. */
.stories { margin-top: .8rem; display: grid; gap: .6rem; text-align: left; }
.stories:empty { display: none; }
.story { border-left: 3px solid var(--accent-soft); padding-left: .6rem; }
.story-text strong { color: var(--accent); }
.kanji-comps { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem .8rem; justify-content: center; }
.kanji-comps .jp { font-size: 1.15rem; }
.kanji-why, .kanji-forms { margin-top: .3rem; }
.kanji-story { margin: .4rem 0 0; text-align: left; }
.kanji-forms a { margin-right: .25rem; }
.kanji-page { max-width: 560px; margin: 1rem auto; text-align: center; }
/* Every deck kanji on the hub, coloured by its state [学 learned, 生 studying, today's new ones dashed, the rest muted]. */
.kgrid { display: flex; flex-wrap: wrap; gap: .3rem; }
.kgrid a { font-size: 1.3rem; width: 2.3rem; line-height: 2.3rem; text-align: center; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--panel); }
.kgrid a.later { color: var(--muted); opacity: .45; background: transparent; }
.kgrid a.next { border: 1px dashed var(--accent); }
.kgrid a.studying { border-color: var(--accent); }
.kgrid a.learned { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.kanji-prompt { font-size: 1.8rem; font-weight: 600; }
/* Draw mode's pad under the keyword, nothing judged [touch-action off so a stroke doesn't scroll the page]. */
.kpad { margin-top: .8rem; display: grid; justify-items: center; gap: .4rem; cursor: default; }
.kpad svg { width: min(240px, 70vw); aspect-ratio: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; touch-action: none; }
.kpad path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.smart { margin-top: .4rem; color: var(--good); font-weight: 600; }
.grades { justify-content: center; }
.grades button { min-width: 5rem; }
.grades small { opacity: .8; font-size: .75rem; }
a.btn.disabled { opacity: .45; pointer-events: none; }

/* A switch in the look of the Kana / Japanese one [Read or Write; Learn, Self, Per stroke or Whole kana]. */
.seg { display: inline-flex; gap: .2rem; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .15rem; }
.seg button { background: none; border: 0; color: var(--muted); padding: .25rem .8rem; border-radius: 999px; font-size: .9rem; }
.seg button.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

/* Writing pad, in KanjiVG's 109-unit box per character [きゃ is two cells side by side]. */
.write-prompt { text-align: center; font-size: 2.2rem; line-height: 1.2; }
.pad { width: min(300px, 100%); height: auto; touch-action: none; user-select: none; -webkit-user-select: none;
  background: var(--panel); border-radius: 12px; cursor: crosshair; }
.pad.wide { width: min(520px, 100%); }
.pad .guide rect { fill: none; stroke: var(--line); stroke-width: .6; }
.pad .guide path { fill: none; stroke: var(--line); stroke-width: .5; stroke-dasharray: 2 2; }
.pad .hint path { fill: none; stroke: var(--accent); stroke-opacity: .35; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.pad .ink *, .pad .live { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pad .ink .bad { stroke: var(--bad); }
.pad.right .ink * { stroke: var(--good); }
/* Learn's stroke draws in strong and fades to a trail to trace [gone faint by 1.3 s]. */
.pad .hint .demo { stroke-opacity: .9; stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: stroke-draw .6s ease-in-out forwards, demo-fade .4s .9s forwards; }
.pad .ink text { font-size: 7px; fill: var(--muted); stroke: none; }
@keyframes demo-fade { to { stroke-opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .pad .hint .demo { animation: none; stroke-dashoffset: 0; stroke-opacity: .35; }
}

/* Verb drill: the word with its reading, then the form asked [食べる · ichidan verb · polite past]. */
.verb-q { text-align: center; }
.verb-q .word { font-size: 2.6rem; line-height: 1.7; }
.verb-q rt { font-size: .38em; color: var(--muted); }
.verb-q .form { font-size: 1.3rem; font-weight: 700; color: var(--accent); margin-top: .3rem; }
.verb-misses { display: grid; gap: .3rem; text-align: left; max-width: 26rem; margin: 0 auto; }
.verb-misses rt { font-size: .5em; color: var(--muted); }
/* Particle gaps: the sentence over its English, the gap a box the answer drops into [私＿学生です → 私は学生です]. */
.gap-q { text-align: center; }
.gap-q .sentence-jp { font-size: 1.9rem; line-height: 2.2; }
.gap-q rt, .verb-misses .gap-q rt { font-size: .45em; color: var(--muted); }
.gap { display: inline-block; min-width: 1.4em; padding: 0 .2em; margin: 0 .1em; border-bottom: 3px solid var(--accent); color: var(--muted); line-height: 1.3; }
.gap.filled { color: var(--good); border-color: var(--good); font-weight: 700; }
.gap-opts { justify-content: center; margin-top: 1rem; }
.gap-opt { font-size: 1.4rem; min-width: 5rem; }
.gap-opt.right { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.gap-opt.wrong { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
/* Listening: a big speaker, the word under it once answered, English choices two by two [花 over はな, then flower]. */
.listen-q { text-align: center; }
.listen-play { font-size: 2.4rem; padding: .6rem 1.4rem; border-radius: 16px; }
.listen-q .word { font-size: 2.6rem; line-height: 1.7; margin-top: .4rem; }
.listen-q rt { font-size: .38em; color: var(--muted); }
.listen-q ~ .gap-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; max-width: 34rem; margin: 1rem auto 0; }
.listen-q ~ .gap-opts .gap-opt { font-size: 1.05rem; min-width: 0; }
/* Grammar: the gap holds a whole form, so it stretches and keeps its readings [話してください over はな]. */
.gr-q { text-align: center; max-width: 40rem; }
.gr-q .sentence-jp { font-size: 1.7rem; line-height: 2.4; }
.gr-q rt, .gr-ex rt, .verb-misses rt { font-size: .45em; color: var(--muted); }
.gr-q .gap { min-width: 3em; }
.gr-q:not(.answered) rt.ask { visibility: hidden; }
.gr-q #hint { font-size: 1.2rem; margin-top: .4rem; }
.gr-q #hint rt { font-size: .5em; }
.gr-ex { font-size: 1.15rem; line-height: 2.1; }
.gr-group h2 { margin-top: 1.6rem; }
.gr-list { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gr-point { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem; }
.gr-point:hover { border-color: var(--accent); }
.gr-point .jp { font-size: 1.2rem; }
.gr-attach { margin: 0 0 .4rem; }
.gr-explain { max-width: 46rem; }