@charset "UTF-8";
/* The hiragana character guides (hiragana_character.py, hiragana-character.js), 5 October 2026. Built from the そ
   pilot's stylesheet (hiragana-so.css, audited twice: labs/hiragana-so/evidence/; archived in labs/hiragana-so/retired-2026-10-06/),
   then revised after seven reviews
   (labs/hiragana-character/evidence/panel-triage.md): the chart panel's stroke language (the stroke being written in
   rust, earlier strokes in ink, the rest faint; a white box with bold haloed numbers), one meaning per colour (rust for
   what you look at and for the one mistake; green only for a pressed study-set button and right answers), the stepper
   beside the model on phones, centre lines at 3:1, and contrast-theme rules for every drawing. Only .kg- classes and
   the site's tokens; the routes on this template load only this stylesheet with styles.css (build.py). */
.kg-page { --kg-guide: color-mix(in srgb, var(--line-strong), var(--muted)); max-width:1020px; margin-inline:auto; }

/* Controls only scripts can use. The page's first script marks <html> before the first paint, so they are in place from
   the first frame and nothing below them moves when hiragana-character.js starts (as on the pilot, SOP-L-11). */
.kg-page [data-kg-stepper], .kg-page [data-kg-status], .kg-page [data-kg-legend], .kg-page [data-kg-check], .kg-page [data-kg-print-row], .kg-page [data-kg-set], .kg-page [data-kg-typefaces] { display:none; }
html.kg-js .kg-page [data-kg-stepper] { display:grid; }
html.kg-js .kg-page [data-kg-status], html.kg-js .kg-page [data-kg-legend], html.kg-js .kg-page [data-kg-print-row], html.kg-js .kg-page [data-kg-check], html.kg-js .kg-page [data-kg-typefaces] { display:block; }
html.kg-js .kg-page [data-kg-set] { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:.75rem; }
html.kg-js .kg-page [data-kg-legend][hidden] { display:none; }

/* The breadcrumb every character page has (nav() in hiragana_pages.py), first at every size; 26px targets. */
.kg-page > .universe-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:0 .45rem; margin:0 0 .45rem; color:var(--ink-soft); font-size:.8rem; line-height:1.35; }
.kg-page > .universe-breadcrumbs a { display:inline-block; padding:.3rem 0; }
.kg-page > .kg-link-note { margin:.2rem 0 .9rem; }
.kg-wayfinding { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; column-gap:2rem; margin:1rem 0 .5rem; border-bottom:1px solid var(--line); }
.kg-wayfinding .hiragana-subnav { display:flex; flex-wrap:wrap; gap:0 1.15rem; }
.kg-wayfinding .hiragana-subnav a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; color:var(--ink-soft); font-size:.8rem; text-decoration:none; }
.kg-wayfinding .hiragana-subnav a:hover { color:var(--accent-dark); text-decoration:underline; }
@media (max-width:999px) { .kg-wayfinding .hiragana-subnav { flex-basis:100%; border-top:1px dashed var(--line); } }
.kg-jump-links { display:flex; flex-wrap:wrap; gap:0 1.5rem; }
.kg-jump-links a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; font-size:.82rem; }

/* Identity: the heading, the answer, the facts and the study set (on one row on wide screens). */
.kg-intro .eyebrow { margin-bottom:.55rem; }
.kg-intro h1 { font-size:clamp(1.85rem,3.8vw,3rem); margin-bottom:.5rem; }
.kg-intro h1 [lang="ja"] { font-size:1.1em; margin-right:.04em; }
.kg-answer { max-width:680px; margin-bottom:.65rem; font-size:1.05rem; line-height:1.5; }
.kg-facts-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1.5rem; margin:0 0 1.1rem; }
.kg-facts { display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem 1.4rem; margin:0; }
.kg-facts > div { display:flex; align-items:baseline; gap:.45rem; }
.kg-facts dt { color:var(--ink-soft); font-size:.78rem; }
.kg-facts dd { margin:0; font-size:.98rem; font-weight:650; }
.kg-facts code { white-space:nowrap; }
.kg-facts .kg-also { font-weight:400; color:var(--ink-soft); font-size:.85rem; }
/* The links keep a 44px target without making every facts line 44px tall (visual panel). */
.kg-facts a { position:relative; }
.kg-facts a::after { content:""; position:absolute; inset:-12px -10px; }
.kg-marked-facts a + a { margin-left:.15rem; }
.kg-audio { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border:1px dashed var(--line-strong); border-radius:999px; color:var(--ink-soft); font-size:.78rem; font-weight:450; }
.kg-audio::before { content:"♪" / ""; font-size:.8rem; }
.kg-set { flex-wrap:wrap; align-items:center; gap:.25rem .9rem; margin:0; }
.kg-facts-row > .kg-set { flex-basis:100%; }
/* The study set (6 Oct 2026): a native checkbox in a 44px label, green when checked, and a line two lines high, so
   checking it moves nothing below. */
.kg-set-box { display:inline-flex; align-items:center; gap:.55rem; min-height:44px; padding:0 14px 0 12px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink); font-size:.85rem; font-weight:600; white-space:nowrap; cursor:pointer; }
.kg-set-box input { width:20px; height:20px; margin:0; accent-color:var(--green); cursor:pointer; }
.kg-set-box input:focus-visible { outline:none; }
.kg-set-form { display:contents; }
.kg-set-box:has(input:checked) { border-color:var(--green); background:var(--green-wash); box-shadow:inset 0 0 0 1px var(--green); }
.kg-set-box:has(input:focus-visible) { outline:3px solid var(--accent-dark); outline-offset:2px; }
.kg-set-line { margin:0; min-height:2.6em; font-size:.8rem; line-height:1.3; display:flex; align-items:center; }
.kg-set-line [lang="ja"] { font-size:1.1em; line-height:1; letter-spacing:.06em; }
.kg-set .kg-set-note { grid-column:1 / -1; margin:0; font-size:.76rem; line-height:1.3; }
@media (max-width:560px) { html.kg-js .kg-page [data-kg-set] { grid-template-columns:minmax(0,1fr); row-gap:.35rem; } .kg-set-box { justify-self:start; } }

/* The lead card: the model with the stepper in one column, the main confusion in the other. */
.kg-lead { padding:20px 24px 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.kg-lead-title { margin:0 0 14px; font-size:1.35rem; letter-spacing:-.02em; }
.kg-lead-grid { display:grid; grid-template-columns:23.75rem minmax(0,1fr); column-gap:36px; row-gap:14px; align-items:start; }
.kg-lead-main { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; row-gap:10px; align-content:start; }
.kg-lead-model { margin:0; text-align:center; }
.kg-lead-model figcaption { margin-top:4px; font-size:.78rem; line-height:1.4; color:var(--ink-soft); }
.kg-model-art { display:grid; place-items:center; }
.kg-model-art .universe-static-strokes { margin:0; width:auto; max-width:100%; }
.kg-model-art svg { display:block; width:216px; height:216px; overflow:visible; }
html.kg-js .kg-page .kg-lead-main [data-kg-stepper] { display:flex; flex-wrap:wrap; gap:6px; width:100%; }
.kg-stepper .button { flex:1 1 auto; min-height:44px; padding:0 8px; font-size:.85rem; border-radius:var(--radius-small); white-space:nowrap; }
.kg-stepper .button.secondary { background:var(--surface); }
.kg-stepper [data-kg-reset] { color:var(--ink-soft); }
.kg-stepper [data-kg-play] { min-width:9em; }
.kg-stepper .button { touch-action:manipulation; }
@media (hover:none) { .kg-stepper .button:not(.secondary):hover { background:var(--accent); border-color:var(--accent); } .kg-stepper .button.secondary:hover { background:var(--surface); border-color:var(--line-strong); } }
/* At the ends Back and Next stay focusable (accessibility panel): dashed and muted, never faded. */
.kg-stepper .button[aria-disabled="true"] { color:var(--muted); border-style:dashed; border-color:var(--line-strong); background:transparent; cursor:default; }
.kg-step-status { width:100%; margin:0; min-height:2.8em; font-size:.82rem; line-height:1.4; color:var(--ink-soft); text-align:center; overflow-wrap:anywhere; }
.kg-legend { width:100%; margin:0; font-size:.74rem; line-height:1.4; color:var(--ink-soft); text-align:center; }
.kg-legend > span { white-space:nowrap; margin-right:.6rem; }
.kg-key-icon { width:12px; height:12px; vertical-align:-1px; }
.kg-key-dot { fill:var(--accent); stroke:#fff; stroke-width:1; }
.kg-key-ring { fill:none; stroke:var(--accent-dark); stroke-width:1.4; }
.kg-lead-side { min-width:0; }
.kg-lead-alt { margin:0; text-align:left; }
.kg-lead-alt figcaption { display:flex; flex-direction:column; gap:.2rem; font-size:.82rem; line-height:1.4; color:var(--ink-soft); }
.kg-lead-alt figcaption strong { color:var(--ink); }
.kg-lead-alt-title { margin:0 0 8px; color:var(--ink-soft); font-size:.74rem; font-weight:650; letter-spacing:.07em; text-transform:uppercase; }
.kg-lead-art { display:grid; justify-items:start; margin-bottom:.4rem; }
.kg-lead-art img { width:216px; height:216px; object-fit:contain; padding:14px; background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius-small); }
.kg-alike-row { display:flex; justify-content:flex-start; gap:10px; flex-wrap:wrap; }
.kg-alike { display:flex; flex-direction:column; align-items:center; gap:.2rem; flex:0 1 172px; min-width:0; max-width:172px; padding:10px 10px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-small); background:var(--surface); color:var(--ink); text-decoration:none; }
a.kg-alike:hover { border-color:var(--accent); background:var(--accent-wash); }
.kg-alike .kg-drawing { width:132px; height:132px; }
.kg-alike-text { display:grid; justify-items:center; gap:2px; text-align:center; }
.kg-alike strong { font-size:.92rem; margin-top:4px; }
.kg-alike-text > span { font-size:.8rem; color:var(--ink-soft); line-height:1.35; }
.kg-lead-note { margin:12px 0 0; max-width:46ch; font-size:.85rem; color:var(--ink-soft); }
.kg-hook-line { margin:16px 0 0; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius-small); background:var(--paper); font-size:.9rem; line-height:1.5; }
/* The links in running text keep a 44px target without making their line taller, as the facts row's do; nowrap keeps
   the target whole (review 2, visual-5). */
.kg-hook-line a { position:relative; white-space:nowrap; margin-left:.25rem; font-size:.85rem; }
.kg-hook-line a::after, .kg-stroke-image a::after { content:""; position:absolute; inset:-14px -10px; }

/* KanjiVG strokes and the writing box (dashed centre lines, as in Japanese Grade-1 handwriting textbooks). The lines
   are 3:1 against the box because the stroke notes refer to them (accessibility panel). */
.kg-page .universe-static-strokes svg path { stroke:var(--ink); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.kg-page .universe-static-strokes svg text { fill:var(--accent-dark); font-size:9px; font-weight:700; paint-order:stroke; stroke:#fff; stroke-width:2.4px; stroke-linejoin:round; }
.kg-guides rect { fill:#fff; stroke:var(--kg-guide); stroke-width:.8; }
.kg-guides line { stroke:var(--kg-guide); stroke-width:.55; stroke-dasharray:2.4 2; }
.kg-drawing { display:block; color:var(--ink); }
.kg-drawing .kg-telling { stroke:var(--accent); stroke-width:6.6; }
.kg-drawing .kg-ring { fill:none; stroke:var(--accent); stroke-width:2.5px; stroke-dasharray:5 3; vector-effect:non-scaling-stroke; }

/* The stepper: the whole character faint, strokes already written in ink, the stroke being written in rust and a
   little thicker, a filled dot where it starts and a ring where it ends (the chart panel's language). Specific enough
   to beat ".kg-page .universe-static-strokes svg path", or the faint copy is drawn in full ink. */
/* The faint copy is 3:1 against the box, as the centre lines are, because the Ready line points to it (review 2, a11y-1). */
.kg-page .kg-model-art .kg-ghost path { stroke:var(--kg-guide); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.kg-page .kg-model-art.is-stepping svg path.kg-stroke.is-done { stroke:var(--ink); }
.kg-page .kg-model-art.is-stepping svg path.kg-stroke.is-current { stroke:var(--accent); stroke-width:3.6; }
.kg-model-art svg circle.kg-start { fill:var(--accent); stroke:#fff; stroke-width:1; }
.kg-model-art svg circle.kg-end { fill:none; stroke:var(--accent-dark); stroke-width:1.3; }

/* Sections. */
.kg-section { padding:2.25rem 0; border-bottom:1px solid var(--line); scroll-margin-top:1rem; }
.kg-section .eyebrow { margin-bottom:.5rem; }
.kg-section h2 { font-size:clamp(1.375rem,1.1rem + .9vw,1.75rem); letter-spacing:-.03em; margin-bottom:.9rem; }
.kg-section h3 { font-size:1.05rem; margin:1.4rem 0 .55rem; }
.kg-section p, .kg-section li { max-width:68ch; }
.kg-small { font-size:.82rem; color:var(--ink-soft); }
.kg-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-top:1rem; }
.kg-actions a:not(.button) { display:inline-flex; align-items:center; min-height:44px; font-size:.85rem; }
.kg-actions .button { min-height:44px; }
.kg-more-link { display:inline-flex; align-items:center; min-height:44px; }

/* Write it: a row per stroke, the one mistake, and a copy to keep. */
.kg-write { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr); gap:2.25rem; }
.kg-write-intro { padding:.7rem .9rem; border:1px solid var(--line); border-radius:var(--radius-small); background:var(--surface); }
.kg-outline { margin:.4rem 0 .8rem; }
.kg-endings-note { font-size:.82rem; color:var(--ink-soft); line-height:1.9; }
.kg-strokes { list-style:none; padding:0; margin:.6rem 0 .5rem; border-top:1px solid var(--line); max-width:640px; }
.kg-strokes li { display:grid; grid-template-columns:60px minmax(0,1fr); column-gap:14px; align-items:start; margin:0; padding:12px 0; border-bottom:1px solid var(--line); max-width:none; }
.kg-frame { display:block; width:60px; height:60px; }
.kg-frame .kg-guides rect { stroke-width:1.4; }
.kg-frame .kg-guides line { stroke-width:.9; stroke-dasharray:3 3; }
.kg-frame path { stroke-width:6; }
.kg-frame .kg-f-done { stroke:var(--ink); }
.kg-frame .kg-f-now { stroke:var(--accent); stroke-width:7; }
.kg-frame .kg-f-later { stroke:var(--line); }
.kg-frame .kg-f-dot { fill:var(--accent); stroke:#fff; stroke-width:2; }
.kg-frame .kg-f-ring { fill:none; stroke:var(--accent-dark); stroke-width:2.2; }
.kg-stroke-head { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:2px 0 4px; }
.kg-stroke-n { font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-dark); }
.kg-stroke-text { margin:0; font-size:.95rem; line-height:1.55; }
/* The stop/hook/sweep labels: an icon and words, with no border or fill, so they do not look like buttons
   (first-time learner review, 6 Oct 2026). */
.kg-ending { display:inline-flex; align-items:center; gap:4px; height:22px; padding:0; border:0; background:none; color:var(--ink-soft); font-size:.72rem; font-weight:650; line-height:1; white-space:nowrap; vertical-align:middle; }
.kg-ending [lang="ja"] { font-weight:450; color:var(--muted); }
.kg-icon { width:13px; height:13px; flex:none; color:var(--accent-dark); }
.kg-mistake { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 24px; align-items:start; max-width:640px; margin:22px 0 8px; padding:16px 18px; border:1px solid #ecd3c6; border-left:4px solid var(--accent); border-radius:var(--radius-small); background:var(--accent-wash); }
.kg-mistake h3 { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:1rem; }
.kg-mistake h3::before { content:"!" / ""; display:inline-grid; place-items:center; width:20px; height:20px; flex:none; border-radius:50%; background:var(--accent-dark); color:#fff; font-size:.75rem; font-weight:800; }
.kg-mistake dl { display:grid; grid-template-columns:78px minmax(0,1fr); gap:6px 10px; margin:0; }
.kg-mistake dt { padding-top:3px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.kg-mistake dd { margin:0; font-size:.95rem; line-height:1.5; }
.kg-becomes { display:grid; justify-items:center; gap:6px; width:min-content; min-width:116px; margin:0; text-align:center; }
.kg-becomes-art { display:flex; gap:6px; }
.kg-becomes-box { display:block; padding:4px; background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius-small); }
.kg-becomes .kg-drawing { width:76px; height:76px; }
.kg-becomes figcaption { font-size:.78rem; line-height:1.35; color:var(--ink-soft); }
.kg-write-aside { display:grid; gap:1.25rem; align-content:start; }
.kg-stroke-image { margin:0; }
.kg-stroke-image img { display:block; width:100%; max-width:260px; height:auto; border:1px solid var(--line); border-radius:var(--radius-small); background:#fff; }
.kg-stroke-image figcaption { margin-top:.4rem; font-size:.78rem; color:var(--ink-soft); }
.kg-stroke-image a { position:relative; white-space:nowrap; }
.kg-save-card { padding:1.2rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.kg-save-card h3 { margin-top:.3rem; }
.kg-save-card p { font-size:.9rem; }
.kg-pdf-links { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.65rem; }
.kg-pdf-links .button { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.2rem .6rem; min-height:44px; text-align:left; }
.kg-pdf-mark { padding:0 .4rem; border:1px solid currentColor; border-radius:4px; font-size:.72rem; font-weight:700; line-height:1.5; white-space:nowrap; }
.kg-pdf-links .button:not(.is-marked) .kg-pdf-mark { display:none; }
.kg-print-row { margin-bottom:.4rem; }
.kg-paper-line { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .65rem; }
.kg-print-row label { font-size:.82rem; color:var(--ink-soft); }
.kg-print-row select { min-height:44px; max-width:100%; padding:.4rem .6rem; border:1px solid var(--line-strong); border-radius:var(--radius-small); color:var(--ink); background:var(--surface); }
.kg-print-row .kg-small { margin:.35rem 0 0; }

/* Read it: the typefaces at one optical size, then words with the page's kana in rust. */
.kg-typefaces h3 { margin-top:.2rem; }
.kg-face-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; max-width:560px; margin:0; padding:0; list-style:none; }
.kg-face-row li { margin:0; }
.kg-face { margin:0; text-align:center; }
.kg-face-art { display:grid; place-items:center; aspect-ratio:1; border:1px solid var(--line); border-radius:var(--radius-small); background:#fff; container-type:inline-size; }
.kg-face-art .kg-drawing { width:70%; height:70%; }
.kg-sample { font-size:60cqi; line-height:1; color:var(--ink); }
.kg-face[data-kg-face="textbook"] .kg-sample, [data-kg-face-sample="textbook"] { font-family:"Klee One", "UD Digi Kyokasho N-R", "YuKyokasho", serif; font-weight:600; }
.kg-face[data-kg-face="gothic"] .kg-sample, [data-kg-face-sample="gothic"] { font-family:"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; font-weight:500; }
.kg-face[data-kg-face="mincho"] .kg-sample, [data-kg-face-sample="mincho"] { font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight:500; }
.kg-face figcaption { margin-top:.3rem; font-size:.76rem; color:var(--ink-soft); line-height:1.3; }
.kg-words { display:grid; grid-template-columns:repeat(var(--kg-words,4),minmax(0,1fr)); gap:12px; margin:.8rem 0; padding:0; list-style:none; }
.kg-word { overflow-wrap:anywhere; display:flex; flex-direction:column; gap:.15rem; margin:0; padding:14px 14px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-small); max-width:none; }
.kg-word .jp { font-size:1.75rem; line-height:1.3; letter-spacing:.03em; word-break:keep-all; margin-bottom:.4rem; }
.kg-word .jp b { color:var(--accent-dark); font-weight:700; }
.kg-word-long .jp { font-size:clamp(1rem,2vw,1.35rem); white-space:nowrap; }  /* fits four columns from 641px (review 2, visual-2) */
.kg-word > strong { font-size:.95rem; }
.kg-word > span:not(.jp) { font-size:.88rem; color:var(--ink-soft); }
.kg-word .kg-word-note { font-size:.76rem; }
.kg-readable { align-self:flex-start; margin-top:auto; padding:2px 8px; border-radius:4px; background:var(--surface-muted); color:var(--ink-soft)!important; font-size:.7rem!important; font-weight:650; line-height:1.55; }
.kg-word .kg-readable { margin-top:.5rem; }
.kg-readable::before { content:"✓ " / ""; }
.kg-examples { list-style:none; padding:0; margin:.4rem 0 1rem; }
.kg-examples li { display:grid; grid-template-columns:auto auto minmax(0,1fr); column-gap:14px; align-items:baseline; padding:.65rem .85rem; margin-bottom:.45rem; border:1px solid var(--line); border-radius:var(--radius-small); background:var(--surface); max-width:640px; }
.kg-examples .jp { font-size:1.35rem; }
.kg-ex-reading { color:var(--ink-soft); font-size:.88rem; }
.kg-ex-en { font-size:.9rem; }
.kg-read-next a, .kg-guide-links a { display:inline-flex; align-items:center; min-height:44px; margin-right:1.25rem; }
.kg-guide-links a { padding-block:.4rem; }

/* Sound: the particle note is neutral; rust is kept for the one mistake (visual panel). */
.kg-particle { padding:.8rem 1rem; border-left:3px solid var(--line-strong); border-radius:var(--radius-small); background:var(--surface-muted); }

/* Voiced forms: the mark that changes the sound in rust, both drawings in white boxes. */
/* A page's only marked form has no heading of its own: a link to it lands with the section's heading on screen (review 2, visual-4). */
.kg-voiced:only-of-type { scroll-margin-top:5.5rem; }
.kg-voiced { margin:1.1rem 0; padding:1rem 1.15rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); scroll-margin-top:1rem; }
.kg-voiced h3 { margin-top:0; font-size:1.15rem; }
.kg-voiced-body { display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.25rem; align-items:start; }
.kg-marked-models { display:flex; gap:10px; align-items:center; justify-content:center; }
.kg-marked-models figure { margin:0; text-align:center; }
.kg-marked-models > span[aria-hidden] { font-size:1.4rem; color:var(--muted); }
.kg-marked-models .kg-drawing { width:96px; height:96px; margin-bottom:.4rem; }
.kg-marked-models .kg-drawing > g:not(.kg-guides) { transform:translate(5.45px,5.45px) scale(.9); }
.kg-marked-models figcaption { font-size:.82rem; }
.kg-voiced-words { list-style:none; padding:0; margin:.3rem 0 .6rem; }
.kg-voiced-words li { margin-bottom:.3rem; }
.kg-voiced-words .jp { font-size:1.2rem; margin-right:.3rem; }
.kg-voiced a { display:inline-flex; align-items:center; min-height:44px; }

/* Tell them apart, and the check. */
.kg-comparison { display:grid; grid-template-columns:repeat(var(--kg-count,2),minmax(0,1fr)); gap:.85rem; max-width:720px; margin:1.3rem 0; }
.kg-comparison figure { display:flex; flex-direction:column; align-items:center; margin:0; padding:.9rem .6rem; border:1px solid var(--line); border-radius:var(--radius-small); background:var(--surface); }
.kg-comparison .kg-drawing { width:120px; height:120px; }
.kg-comparison figcaption { display:flex; flex-direction:column; gap:.3rem; text-align:center; line-height:1.4; }
.kg-comparison figcaption > span { font-size:.8rem; color:var(--ink-soft); }
.kg-check { padding:1.4rem; margin-top:1.4rem; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); max-width:640px; }
.kg-check > p { font-size:.88rem; }
.kg-check-last { padding:.45rem .75rem; border-radius:var(--radius-small); background:var(--surface-muted); color:var(--ink-soft); }
.kg-check [data-kg-round] { margin-top:1rem; }
.kg-check [data-kg-progress] { margin-bottom:.6rem; }
.kg-check h3 { margin-top:0; }
.kg-check h4 { font-size:1.1rem; }
.kg-question-art { display:flex; align-items:center; justify-content:center; min-height:180px; margin:1rem 0; }
.kg-question-art img, .kg-question-art svg { display:block; width:170px; height:170px; }
.kg-check-type { display:grid; place-items:center; width:170px; height:170px; font-size:128px; line-height:1; color:var(--ink); }
.kg-blank { text-align:center; }
.kg-blank-text { margin:0; font-size:2.2rem; line-height:1.4; letter-spacing:.04em; }
.kg-gap { display:inline-block; width:1.15em; height:1.15em; margin:0 .08em; vertical-align:-.18em; border:2px dashed var(--accent); border-radius:6px; background:#fff; }
.kg-blank-gloss { margin:.4rem 0 0; color:var(--ink-soft); }
.kg-nowrap { white-space:nowrap; }
/* Japanese inside English running text breaks only between words, as the word cards do (Wave A learner: ですか as で / すか). */
.kg-page p [lang="ja"], .kg-page li [lang="ja"], .kg-page dd [lang="ja"] { word-break:keep-all; }
.kg-compare-form img { width:120px; height:120px; object-fit:contain; }
.kg-chip-key { margin:-.4rem 0 .6rem; }
.kg-check-sync { margin:1rem 0 0; padding:.45rem .75rem; border-left:3px solid var(--accent); border-radius:var(--radius-small); background:var(--accent-wash); color:var(--ink); font-size:.82rem; }
.kg-answer-buttons { display:grid; grid-template-columns:repeat(var(--kg-choices,3),minmax(0,1fr)); gap:.5rem; margin-bottom:1rem; }
.kg-answer-buttons button { min-width:0; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem; min-height:64px; padding:.375rem .25rem; line-height:1.2; color:var(--ink); border:1px solid var(--line-strong); border-radius:var(--radius-small); background:var(--paper); font-size:1.15rem; font-weight:650; touch-action:manipulation; }
.kg-answer-buttons button:not(:disabled):hover { background:var(--accent-wash); }
.kg-answer-buttons button:disabled { opacity:1; cursor:default; color:var(--muted); border-color:var(--line); background:transparent; }
.kg-answer-buttons button.is-right { border:2px solid var(--green); background:var(--green-wash); color:var(--green); }
.kg-answer-buttons button.is-wrong { border:2px solid var(--accent-dark); background:var(--accent-wash); color:var(--accent-dark); }
.kg-answer-tag { font-size:.68rem; font-weight:600; white-space:normal; text-align:center; }  /* wraps at large text sizes (review 2, visual-7) */
.is-right .kg-answer-tag::before { content:"✓ " / ""; }
.kg-check-feedback { font-size:.9rem; }
.kg-fb-right { color:var(--green); }
.kg-fb-right::before { content:"✓ " / ""; }
.kg-fb-wrong { color:var(--accent-dark); }
.kg-result-chips { display:flex; gap:8px; margin:4px 0 12px; padding:0; list-style:none; }
.kg-result-chips li { display:grid; place-items:center; width:34px; height:34px; margin:0; border-radius:var(--radius-small); font-size:.9rem; font-weight:700; }
.kg-result-chips .first { background:var(--green-wash); color:var(--green); box-shadow:inset 0 0 0 1.5px var(--green); }
.kg-result-chips .fixed { background:var(--accent-wash); color:var(--accent-dark); box-shadow:inset 0 0 0 1.5px var(--accent-dark); }
.kg-result-chips .left { background:var(--surface); color:var(--ink-soft); box-shadow:inset 0 0 0 1.5px var(--line-strong); }

/* Your next step, the row, previous and next. */
.kg-next { border-bottom:0; }
.kg-row-practice { margin-top:.6rem; }
.kg-row-practice a { display:inline-flex; align-items:center; min-height:44px; }
.kg-row-practice .kg-small { display:block; }
.kg-around { margin-top:1.4rem; }
.kg-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:0 0 1rem; }
.kg-row-label { font-size:.8rem; color:var(--ink-soft); margin-right:.5rem; }
.kg-row a { display:flex; flex-direction:column; justify-content:center; align-items:center; width:56px; min-height:64px; padding:.3rem; border:1px solid var(--line); border-radius:var(--radius-small); text-decoration:none; background:var(--surface); }
.kg-row a[aria-current] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-wash); font-weight:700; }
.kg-row a > span[lang] { font-size:1.5rem; line-height:1.2; }
.kg-row a small { font-size:.7rem; }
.kg-neighbours { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kg-nb { display:grid; gap:2px; min-height:64px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-decoration:none; color:var(--ink); }
.kg-nb:hover { border-color:var(--line-strong); }
.kg-nb small { font-size:.7rem; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); }
.kg-nb b { font-size:.95rem; font-weight:650; }
.kg-nb b [lang] { font-size:1.35rem; font-weight:500; margin-right:.3rem; }
.kg-nb.next { grid-column:2; text-align:right; }
.kg-all { grid-column:1 / -1; justify-self:center; display:inline-flex; align-items:center; min-height:44px; font-size:.85rem; }
.kg-sources { font-size:.82rem; margin-top:1.25rem; }
.kg-sources summary { min-height:44px; align-content:center; }
.kg-sources li, .kg-sources p { overflow-wrap:anywhere; }
.kg-review-note { color:var(--ink-soft); font-size:.75rem; margin:1.25rem 0 0; }
.kg-print-only { display:none; }

/* The two obsolete-kana pages. */
.kg-obsolete .kg-qa { padding:.85rem 0; border-top:1px solid var(--line); }
.kg-obsolete .kg-qa h3 { margin:0 0 .35rem; font-size:1.02rem; }
.kg-obsolete .kg-qa p { margin:0; color:var(--ink-soft); }
.kg-list { padding-left:1.3rem; }
.kg-list li { margin-bottom:.4rem; }
.kg-then-now { display:flex; align-items:center; gap:18px; }
.kg-then-arrow { font-size:1.6rem; color:var(--muted); }
.kg-w-row { margin:1rem 0; }
.kg-w-row .kg-alike { flex:0 1 120px; }
.kg-w-row .kg-alike .kg-drawing { width:84px; height:84px; }
.kg-w-row .kg-alike[aria-current] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-wash); }
.kg-slot-empty { justify-content:flex-start; border-style:dashed; background:transparent; }
.kg-slot-box { display:block; width:84px; height:84px; border:1px dashed var(--line-strong); border-radius:var(--radius-small); }
.kg-related { margin-top:1rem; }
.kg-related a { display:inline-flex; align-items:center; min-height:44px; font-size:.85rem; }

@media (max-width:999px) {
  .kg-lead-grid { grid-template-columns:252px minmax(0,1fr); column-gap:24px; }
  .kg-model-art svg { width:184px; height:184px; }
  .kg-alike .kg-drawing { width:104px; height:104px; }
  .kg-lead-art img { width:184px; height:184px; }
  html.kg-js .kg-page .kg-lead-main [data-kg-stepper] { display:grid; grid-template-columns:1fr 1fr; }
  .kg-stepper [data-kg-play], .kg-stepper [data-kg-reset] { grid-column:1 / -1; }
  .kg-step-status { min-height:4.2em; }
}
/* At 200% text the write section and the word cards take one column and two: 40em is 640px at the default size, so
   the layout there is unchanged (review 2, a11y-2). */
@media (max-width:40em) {
  .kg-write { grid-template-columns:1fr; gap:1.25rem; }
  .kg-words { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
}
@media (max-width:640px) {
  .kg-intro .eyebrow { display:none; }
  .kg-wayfinding { column-gap:1rem; }
  .kg-wayfinding .hiragana-subnav { gap:0 1rem; }
  .kg-answer { font-size:.98rem; margin-bottom:.5rem; }
  .kg-facts { gap:0 1.1rem; }
  .kg-facts > div { gap:.35rem; }
  .kg-facts-row { margin-bottom:.8rem; }
  .kg-lead { padding:14px 12px; }
  /* On phones the lead card's heading is read, not shown (the H1 and the comparison's caption say the same), so the
     model, Play and the comparison reach the first screen (phone panel). */
  .kg-lead-title { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .kg-lead-grid { grid-template-columns:minmax(0,1fr); }
  .kg-lead-main { grid-template-columns:138px minmax(0,1fr); column-gap:12px; row-gap:6px; justify-items:stretch; align-items:start; }
  .kg-lead-model { grid-column:1; grid-row:1 / span 2; }
  .kg-model-art svg { width:138px; height:138px; }
  .kg-lead-model figcaption { font-size:.72rem; }
  html.kg-js .kg-page .kg-lead-main [data-kg-stepper] { grid-column:2; grid-row:1; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-self:start; }
  .kg-stepper .button { font-size:.8rem; padding:0 6px; white-space:normal; }
  .kg-stepper [data-kg-reset] { grid-column:1 / -1; }
  .kg-stepper [data-kg-play] { min-width:0; }
  .kg-step-status { grid-column:1 / -1; grid-row:3; font-size:.76rem; text-align:left; min-height:2.8em; }
  .kg-blank-text { font-size:clamp(1.5rem,8vw,2.2rem); }
  .kg-compare-form img { width:86px; height:86px; }
  /* The legend sits under the buttons, beside the model, so the comparison stays on the first screen. */
  .kg-legend { grid-column:2; grid-row:2; text-align:left; align-self:start; }
  .kg-alike-row { flex-wrap:nowrap; gap:8px; }
  .kg-alike { flex:1 1 0; max-width:none; padding:8px 6px 10px; }
  .kg-alike .kg-drawing { width:76px; height:76px; }
  .kg-alike strong { font-size:.82rem; }
  .kg-alike-text > span { font-size:.72rem; }
  .kg-lead-alt-title { font-size:.68rem; }
  /* A single tile (を, ゐ, ゑ) or form picture (き, そ) lies sideways on a phone. */
  .kg-lead-alt.is-single .kg-alike-row > .kg-alike { flex-direction:row; align-items:center; gap:12px; padding:8px 12px 8px 8px; }
  .kg-lead-alt.is-single .kg-alike-text { justify-items:start; text-align:left; }
  .kg-lead-alt.is-single .kg-alike .kg-drawing { width:88px; height:88px; flex:none; }
  .kg-lead-alt.is-single:has(.kg-lead-art) { display:grid; grid-template-columns:104px minmax(0,1fr); column-gap:12px; align-items:center; }
  .kg-lead-alt.is-single .kg-lead-art img { width:104px; height:104px; padding:8px; }
  .kg-lead-note { font-size:.78rem; margin-top:8px; }
  .kg-hook-line { font-size:.85rem; }
  .kg-then-now { display:block; }
  .kg-then-arrow { display:none; }
  .kg-section { padding:1.75rem 0; }
  .kg-jump-links { gap:0 1rem; }
  .kg-write { grid-template-columns:1fr; gap:1.25rem; }
  .kg-strokes li { grid-template-columns:56px minmax(0,1fr); }
  .kg-frame { width:56px; height:56px; }
  .kg-mistake { grid-template-columns:minmax(0,1fr); }
  .kg-becomes { grid-template-columns:auto minmax(0,1fr); width:auto; justify-items:start; text-align:left; align-items:center; }
  .kg-becomes .kg-drawing { width:64px; height:64px; }
  .kg-face-row { gap:.35rem; }
  .kg-face figcaption { font-size:.68rem; }
  .kg-words { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .kg-word { padding:.8rem .7rem; }
  .kg-word .jp { font-size:1.5rem; }
  .kg-word-long .jp { font-size:clamp(1rem,5vw,1.25rem); }
  .kg-question-art { min-height:clamp(132px,36vw,180px); margin:.5rem 0 .75rem; }
  .kg-question-art img, .kg-question-art svg, .kg-check-type { width:clamp(124px,34vw,170px); height:clamp(124px,34vw,170px); }
  .kg-check-type { font-size:clamp(96px,26vw,128px); }
  .kg-examples li { grid-template-columns:1fr; row-gap:2px; }
  .kg-voiced-body { grid-template-columns:1fr; gap:.6rem; }
  .kg-marked-models { justify-content:flex-start; }
  .kg-marked-models .kg-drawing { width:80px; height:80px; }
  .kg-comparison { gap:.45rem; }
  .kg-comparison .kg-drawing { width:86px; height:86px; }
  .kg-comparison figure { padding:.6rem .3rem; }
  .kg-comparison figcaption > span { font-size:.72rem; }
  .kg-check { padding:1rem; }
  .kg-row { gap:.45rem; row-gap:1rem; }
  .kg-row-label { flex-basis:100%; }
  .kg-row a { flex:1; width:auto; }
  .kg-w-row { flex-wrap:wrap; }
  .kg-w-row .kg-alike { flex:1 1 30%; }
  .kg-w-row .kg-alike .kg-drawing, .kg-slot-box { width:64px; height:64px; }
}
/* Mike's 600px pane: the model and the stepper side by side at a larger size (visual panel). */
@media (min-width:480px) and (max-width:640px) {
  .kg-voiced-body { grid-template-columns:auto minmax(0,1fr); gap:1rem; }
  .kg-marked-models .kg-drawing { width:84px; height:84px; }
  .kg-lead-main { grid-template-columns:184px minmax(0,300px); }
  .kg-model-art svg { width:184px; height:184px; }
  .kg-alike .kg-drawing { width:96px; height:96px; }
}
@media (max-width:360px) {
  body[data-route^="/hiragana/"] .kg-page { padding-top:0; }
  .kg-intro h1 { font-size:1.65rem; margin-bottom:.35rem; }
  .kg-answer { font-size:.92rem; margin-bottom:.4rem; }
  .kg-facts { row-gap:0; }
  .kg-step-status { min-height:4.2em; }
  .kg-alike .kg-drawing { width:60px; height:60px; }
}
/* The smallest phones: a 116px model, so Back keeps a 44px-wide target beside it. From 331px the 138px model stays,
   with its numbers at 11.4px (layout review, visual-8). */
@media (max-width:330px) {
  .kg-lead-main { grid-template-columns:116px minmax(0,1fr); }
  .kg-model-art svg { width:116px; height:116px; }
}
/* A phone turned sideways: the heading and facts beside the lead card, so the model is on the first screen. */
@media (max-height:450px) and (min-width:560px) {
  .kg-page { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); column-gap:1.25rem; align-items:start; }
  .kg-page > * { grid-column:1 / -1; }
  .kg-page > .kg-intro { grid-column:1; grid-row:2; }
  .kg-page > .kg-lead { grid-column:2; grid-row:2; }
  .kg-intro .eyebrow, .kg-lead-title { display:none; }
  .kg-intro h1 { font-size:1.5rem; }
  .kg-lead-grid { grid-template-columns:minmax(0,1fr); }
  .kg-lead-main { grid-template-columns:112px minmax(0,1fr); column-gap:10px; justify-items:stretch; }
  .kg-model-art svg { width:112px; height:112px; }
  html.kg-js .kg-page .kg-lead-main [data-kg-stepper] { grid-column:2; grid-row:1; }
  .kg-lead-model { grid-row:1 / span 2; }
  .kg-legend { grid-column:2; grid-row:2; text-align:left; }
  .kg-step-status { grid-column:1 / -1; grid-row:3; min-height:2.8em; }
  .kg-alike .kg-drawing { width:60px; height:60px; }
}
html:has([data-kana-guide]) { scroll-behavior:auto; }
/* Windows contrast themes: every drawing follows the theme's text colour (49 of 61 vanished in a dark theme before:
   accessibility panel), the box keeps its lines, the stroke being written is the highlight colour and thicker, and
   strokes still to come are GrayText, as in the stroke rows, so they never look current (review 2: hiding them left
   the Ready line pointing at an empty box). */
@media (forced-colors:active) {
  .kg-drawing, .kg-frame { color:CanvasText; }
  .kg-page .universe-static-strokes svg path, .kg-drawing path { stroke:CanvasText; }
  .kg-page .universe-static-strokes svg text { fill:CanvasText; stroke:Canvas; }
  .kg-guides rect { fill:Canvas; stroke:CanvasText; }
  .kg-guides line { stroke:GrayText; }
  .kg-drawing .kg-telling, .kg-drawing .kg-ring { stroke:Highlight; }
  .kg-page .kg-model-art .kg-ghost path { stroke:GrayText; }
  .kg-page .kg-model-art.is-stepping svg path.kg-stroke.is-done { stroke:CanvasText; }
  .kg-page .kg-model-art.is-stepping svg path.kg-stroke.is-current { stroke:Highlight; stroke-width:4.2; }
  .kg-model-art svg circle.kg-start, .kg-key-dot, .kg-frame .kg-f-dot { fill:CanvasText; stroke:Canvas; }
  .kg-model-art svg circle.kg-end, .kg-key-ring, .kg-frame .kg-f-ring { fill:none; stroke:CanvasText; }
  .kg-frame .kg-f-done { stroke:CanvasText; }
  .kg-frame .kg-f-now { stroke:Highlight; }
  .kg-frame .kg-f-later { stroke:GrayText; }
  .kg-icon { color:CanvasText; }
  .kg-gap { border-color:CanvasText; background:Canvas; }
  .kg-lead-art img, .kg-compare-form img { background:transparent; }
  /* a11y-8: the W row's current kana keeps a mark contrast themes do not remove (they drop shadows and fills). */
  .kg-w-row .kg-alike[aria-current] { border-width:3px; padding:8px 8px 10px; }
  .kg-w-row .kg-alike[aria-current] strong { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
}
@media (forced-colors:active) and (prefers-color-scheme:dark) {
  .kg-lead-art img, .kg-question-art img, .kg-compare-form img { filter:invert(1); }
}
@media print {
  @page { margin:15mm; }
  html:has([data-kana-guide]), body:has([data-kana-guide]) { background:white!important; color:#252a25; font-size:11pt; }
  body:has([data-kana-guide]) .site-header, body:has([data-kana-guide]) .site-footer,
  body:has([data-kana-guide]) .prototype-banner, body:has([data-kana-guide]) .page-tabs,
  body:has([data-kana-guide]) noscript, body:has([data-kana-guide]) .skip-link,
  body:has([data-kana-guide]) [data-storage-notice], body:has([data-kana-guide]) .storage-alert { display:none!important; }
  body:has([data-kana-guide]) #main { width:100%!important; max-width:none!important; margin:0!important; padding:0!important; }
  body:has([data-kana-guide]) [data-view-panel="preview"]:not([hidden]) > .kg-page { display:block!important; }
  .kg-page { width:100%; max-width:none; margin:0; }
  .kg-page > * { display:none!important; }
  .kg-page > .kg-print-only { display:block!important; font-size:9.5pt; line-height:1.4; }
  .kg-print-only h2 { font-size:28pt; margin:0 0 4pt; }
  .kg-print-only h3 { font-size:11pt; margin:9pt 0 5pt; }
  .kg-print-only p { margin:0 0 5pt; }
  .kg-print-brand { font-size:8pt; letter-spacing:.08em; color:#913622; margin-bottom:6pt!important; }
  .kg-print-forms { display:flex; justify-content:center; align-items:flex-end; gap:16mm; margin:6pt auto 8pt; }
  .kg-form { margin:0; text-align:center; }
  .kg-form-main .kg-form-art svg { width:46mm; height:46mm; }
  .kg-form-art svg, .kg-form-art img { width:34mm; height:34mm; }
  .kg-print-only .universe-static-strokes svg path { stroke:#252a25; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .kg-print-only .universe-static-strokes svg text { fill:#913622; font-size:9px; font-weight:700; paint-order:stroke; stroke:#fff; stroke-width:2.4px; }
  .kg-print-only .kg-guides rect { fill:white; stroke:#8f9385; stroke-width:.8; }
  .kg-print-only .kg-guides line { stroke:#8f9385; stroke-width:.5; }
  .kg-print-only .kg-drawing { color:#252a25; }
  .kg-print-only figcaption { font-size:8.5pt; margin-top:2pt; }
  .kg-print-steps { display:flex; justify-content:center; gap:4mm; margin:2pt 0 4pt; }
  .kg-print-steps figure { margin:0; text-align:center; }
  .kg-print-frame { width:15mm; height:15mm; }
  .kg-print-frame path { stroke-width:6; }
  .kg-print-frame .kg-f-done { stroke:#252a25; }
  .kg-print-frame .kg-f-now { stroke:#bd4c35; stroke-width:7; }
  .kg-print-frame .kg-f-later { stroke:#dddccf; }
  .kg-print-frame .kg-f-dot { fill:#bd4c35; stroke:#fff; stroke-width:2; }
  .kg-print-frame .kg-f-ring { fill:none; stroke:#913622; stroke-width:2.2; }
  .kg-print-steps figcaption { font-size:7pt; }
  .kg-print-only ol { margin:0 0 5pt; padding-left:14pt; }
  .kg-print-only li { margin-bottom:2pt; }
  .kg-print-only em { color:#4c554c; font-style:normal; }
  .kg-print-mistake { font-size:9pt; }
  .kg-print-words { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6pt; border-block:.5pt solid #dddccf; padding:5pt 0; margin:4pt 0; font-size:9.5pt; }
  .kg-print-words b { font-size:13pt; }
  .kg-copy-boxes { display:grid; grid-template-columns:repeat(7,1fr); gap:4mm; margin:4pt 0 6pt; }
  .kg-copy-boxes span { position:relative; display:block; aspect-ratio:1; border:1px solid #8f9385; }
  .kg-copy-boxes span::before { content:""; position:absolute; left:50%; top:0; height:100%; border-left:.5pt dashed #b7baaa; }
  .kg-copy-boxes span::after { content:""; position:absolute; top:50%; left:0; width:100%; border-top:.5pt dashed #b7baaa; }
  .kg-copy-boxes .kg-trace { position:absolute; inset:0; width:100%; height:100%; color:#cfd0c4; }
  .kg-print-attribution { font-size:8pt; line-height:1.4; overflow-wrap:anywhere; margin-top:5pt!important; }
  .kg-print-attribution a { color:inherit; white-space:nowrap; }
}

/* Let enlarged prose reflow within the existing model-first guide layout. */
.kg-page .kg-write>*,.kg-page .kg-lead-grid>*{min-width:0}.kg-page .kg-hook-line a{white-space:normal;overflow-wrap:anywhere}

.kg-page .kg-write-aside{grid-template-columns:minmax(0,1fr)}.kg-page .kg-write-aside>*{min-width:0}.kg-page .kg-stroke-image a{white-space:normal;overflow-wrap:anywhere}.kg-page .kg-save-card{overflow-wrap:anywhere}
.kg-page .kg-hook-line a,.kg-page .kg-stroke-image a{display:inline-flex;min-height:44px;max-width:100%;margin-left:0;align-items:center;vertical-align:middle;white-space:normal;overflow-wrap:anywhere}.kg-page .kg-hook-line a::after,.kg-page .kg-stroke-image a::after{content:none}

.kg-page .kg-face-row li,.kg-page .kg-face{min-width:0}.kg-page .kg-face figcaption{overflow-wrap:anywhere}
.kg-page .kg-word-long .jp{white-space:normal}.kg-page .kg-voiced-body>*{min-width:0}.kg-page .kg-voiced{overflow-wrap:anywhere}
@media(max-width:640px){.kg-page .kg-examples li{grid-template-columns:minmax(0,1fr)}.kg-page .kg-examples li>*{min-width:0;overflow-wrap:anywhere}}

/* Typefaces served from this site (assets/fonts): kana subsets of Klee One 600 and Noto Serif JP 500, SIL Open Font
   License 1.1. A face downloads only when a rule on the page uses it. */
@font-face { font-family: "Klee One"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/klee-one-600.woff2") format("woff2"); unicode-range: U+3001-3002, U+3041-3096, U+3099-309C, U+30A1-30FC; }
@font-face { font-family: "Noto Serif JP"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/noto-serif-jp-500.woff2") format("woff2"); unicode-range: U+3001-3002, U+3041-3096, U+3099-309C, U+30A1-30FC; }