/*
  The word and kanji pages (PLAN-word-pages §2.8): tangoya.app/words/ and
  /kanji/, generated at release by tool/landing/word_pages.dart. The look is
  the app's: the palette of both themes, the surfaces, tags, marks and
  buttons are the tables of lib/app/surface_roles.dart and button_roles.dart,
  and the pages follow the system's dark preference, as the app does.

  Three blocks are GENERATED and between markers:
    pages-tokens   the two themes' tokens (test/web_home/sync_test.dart)
    button-roles   rolesCss() (lib/app/button_roles.dart)
    surfaces       surfacesCss() (lib/app/surface_roles.dart)
  `flutter test test/web_home/sync_test.dart --update-goldens` rewrites them,
  and the test fails when one is out of date.

  The rest copies a widget each (the widget is named at its rule).
*/

/* pages-tokens:start */
    :root {
      color-scheme: light;
      --surface: #f4efe4;
      --on-surface: #1e1e1c;
      --on-surface-variant: #625f5a;
      --surface-container-lowest: #fffdf8;
      --surface-container-low: #fffdf8;
      --surface-container-high: #fffdf8;
      --primary: #1b2e5a;
      --on-primary: #fffdf8;
      --primary-container: #1b2e5a;
      --on-primary-container: #fffdf8;
      --secondary-container: #1b2e5a;
      --on-secondary-container: #fffdf8;
      --tertiary: #3b5a8c;
      --tertiary-container: #1b2e5a;
      --on-tertiary-container: #fffdf8;
      --outline: #1b2e5a73;
      --outline-variant: #1b2e5a2e;
      --error: #a8243a;
      --on-error: #fffdf8;
      --error-container: #f5e3e1;
      --on-error-container: #a8243a;
      --game-correct: #2f6b4f;
      --game-wrong: #a8243a;
      --game-amber: #9c5a12;
      --shop-ground: #f4efe4;
      --shop-card: #fffdf8;
      --shop-ink: #1e1e1c;
      --shop-muted: #625f5a;
      --shop-ai: #1b2e5a;
      --shop-line: #1b2e5a;
      --shop-noren: #1b2e5a;
      --shop-on-noren: #fffdf8;
      --shop-fill: #1b2e5a;
      --shop-rod: #1e1e1c;
      --shop-hanada: #3b5a8c;
      --shop-track: #1b2e5a1f;
      --shop-tint: #1b2e5a1a;
      --shop-on-ai: #fffdf8;
      --shop-shu: #b5402a;
      --shop-shu-fill: #b5402a;
      --shop-on-shu: #fffdf8;
      --shop-right: #2f6b4f;
      --shop-wrong: #a8243a;
      --shop-between: #9c5a12;
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        color-scheme: dark;
        --surface: #12161f;
        --on-surface: #e9e5dc;
        --on-surface-variant: #a2a6b0;
        --surface-container-lowest: #1b2130;
        --surface-container-low: #1b2130;
        --surface-container-high: #1b2130;
        --primary: #a9bbe3;
        --on-primary: #12161f;
        --primary-container: #2c4a88;
        --on-primary-container: #f4efe4;
        --secondary-container: #2c4a88;
        --on-secondary-container: #f4efe4;
        --tertiary: #8faae0;
        --tertiary-container: #2c4a88;
        --on-tertiary-container: #f4efe4;
        --outline: #a9bbe373;
        --outline-variant: #a9bbe32e;
        --error: #f07a8a;
        --on-error: #12161f;
        --error-container: #4a3544;
        --on-error-container: #f07a8a;
        --game-correct: #6cc49a;
        --game-wrong: #f07a8a;
        --game-amber: #f0a85a;
        --shop-ground: #12161f;
        --shop-card: #1b2130;
        --shop-ink: #e9e5dc;
        --shop-muted: #a2a6b0;
        --shop-ai: #a9bbe3;
        --shop-line: #a9bbe3;
        --shop-noren: #2c4a88;
        --shop-on-noren: #f4efe4;
        --shop-fill: #7c96d0;
        --shop-rod: #596070;
        --shop-hanada: #8faae0;
        --shop-track: #a9bbe32e;
        --shop-tint: #a9bbe31a;
        --shop-on-ai: #12161f;
        --shop-shu: #e8765a;
        --shop-shu-fill: #b5402a;
        --shop-on-shu: #fff8ee;
        --shop-right: #6cc49a;
        --shop-wrong: #f07a8a;
        --shop-between: #f0a85a;
      }
    }
    :root[data-theme="dark"] {
      color-scheme: dark;
      --surface: #12161f;
      --on-surface: #e9e5dc;
      --on-surface-variant: #a2a6b0;
      --surface-container-lowest: #1b2130;
      --surface-container-low: #1b2130;
      --surface-container-high: #1b2130;
      --primary: #a9bbe3;
      --on-primary: #12161f;
      --primary-container: #2c4a88;
      --on-primary-container: #f4efe4;
      --secondary-container: #2c4a88;
      --on-secondary-container: #f4efe4;
      --tertiary: #8faae0;
      --tertiary-container: #2c4a88;
      --on-tertiary-container: #f4efe4;
      --outline: #a9bbe373;
      --outline-variant: #a9bbe32e;
      --error: #f07a8a;
      --on-error: #12161f;
      --error-container: #4a3544;
      --on-error-container: #f07a8a;
      --game-correct: #6cc49a;
      --game-wrong: #f07a8a;
      --game-amber: #f0a85a;
      --shop-ground: #12161f;
      --shop-card: #1b2130;
      --shop-ink: #e9e5dc;
      --shop-muted: #a2a6b0;
      --shop-ai: #a9bbe3;
      --shop-line: #a9bbe3;
      --shop-noren: #2c4a88;
      --shop-on-noren: #f4efe4;
      --shop-fill: #7c96d0;
      --shop-rod: #596070;
      --shop-hanada: #8faae0;
      --shop-track: #a9bbe32e;
      --shop-tint: #a9bbe31a;
      --shop-on-ai: #12161f;
      --shop-shu: #e8765a;
      --shop-shu-fill: #b5402a;
      --shop-on-shu: #fff8ee;
      --shop-right: #6cc49a;
      --shop-wrong: #f07a8a;
      --shop-between: #f0a85a;
    }
    /* pages-tokens:end */

/* button-roles:begin */
:is([data-role], [data-icon-role], [data-link]) { position: relative; box-sizing: border-box; border-radius: 4px; cursor: pointer; text-decoration: none; }
[data-role] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; line-height: 1.3; border: 0 solid transparent; background: transparent; }
[data-role][data-placement=bar] { min-height: 52px; padding: 0 12px; font-size: calc(15px * var(--fs)); font-weight: 800; }
[data-role][data-placement=inline] { min-height: 44px; padding: 0 14px; font-size: calc(14px * var(--fs)); font-weight: 700; }
:is([data-role=text], [data-role=destructive])[data-placement] { display: inline-flex; flex-direction: row; padding: 0 12px; font-size: calc(15px * var(--fs)); font-weight: 700; }
[data-role=main] { background: var(--shop-noren); color: var(--shop-on-noren); }
[data-role=step] { background: var(--shop-shu-fill); color: var(--shop-on-shu); }
[data-role=suggest] { background: var(--shop-noren); color: var(--shop-on-noren); }
[data-role=offer] { background: var(--shop-card); color: var(--shop-ai); border: 1px solid color-mix(in srgb, var(--shop-line) 55%, transparent); }
[data-role=outline] { color: var(--shop-ai); border: 1px solid color-mix(in srgb, var(--shop-line) 55%, transparent); }
[data-role=text] { color: var(--shop-hanada); }
[data-role=destructive] { color: var(--error); }
[data-role=destructiveConfirm] { background: var(--error); color: var(--on-error); }
[data-role] small { font-size: calc(12px * var(--fs)); font-weight: 500; opacity: 0.8; }
[data-role]:disabled { color: color-mix(in srgb, var(--shop-ink) 38%, transparent); pointer-events: none; }
[data-icon-role] { display: inline-grid; place-items: center; flex: none; border: 0 solid transparent; background: transparent; }
[data-icon-role][data-placement=bar] { width: 52px; height: 52px; }
[data-icon-role][data-placement=inline] { width: 44px; height: 44px; }
[data-icon-role=plain] { color: var(--shop-muted); }
[data-icon-role=plain][data-selected] { color: var(--shop-ai); }
[data-icon-role=tool] { color: var(--shop-ai); border: 1px solid color-mix(in srgb, var(--shop-line) 55%, transparent); }
[data-icon-role=offer] { color: var(--shop-ai); background: var(--shop-card); border: 1px solid color-mix(in srgb, var(--shop-line) 55%, transparent); }
[data-link] { display: inline-flex; align-items: center; min-height: 44px; color: var(--shop-hanada); font-weight: 700; }
:is([data-role], [data-icon-role], [data-link]).pending::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 2px; background: currentColor; opacity: 0.5; }
/* button-roles:end */

/* surfaces:begin */
[data-surface] { box-sizing: border-box; border-radius: 4px; }
[data-surface=card] { background: var(--shop-card); border: 1px solid color-mix(in srgb, var(--shop-line) 30%, transparent); }
[data-surface=inset] { background: var(--shop-ground); border: 1px solid color-mix(in srgb, var(--shop-line) 30%, transparent); }
[data-surface=chosen] { background: var(--shop-card); border: 1.5px solid var(--shop-ai); }
[data-surface=ringed] { background: transparent; border: 1px solid color-mix(in srgb, var(--shop-line) 45%, transparent); }
[data-surface=field] { background: var(--shop-card); border: 1px solid color-mix(in srgb, var(--shop-line) 45%, transparent); }
[data-surface=field][aria-expanded=true] { border: 1.5px solid var(--shop-ai); }
[data-surface=pending] { background: transparent; border: 1px dashed color-mix(in srgb, var(--shop-line) 45%, transparent); }
[data-surface=bar] { background: var(--shop-ground); border: 0 solid transparent; border-radius: 0; box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.14); }
[data-surface=placeholder] { background: var(--shop-track); border: 0 solid transparent; }
[data-surface=plain] { background: transparent; border: 0 solid transparent; }
[data-surface=alert] { background: var(--error-container); border: 0 solid transparent; }
[data-surface=right] { background: var(--shop-card); border: 1.5px solid var(--shop-right); }
[data-surface=segment] { background: var(--shop-noren); border: 0 solid transparent; color: var(--shop-on-noren); }
[data-surface=attention] { background: var(--shop-card); border: 1.5px solid var(--shop-shu); }
[data-surface=solid] { background: var(--shop-ai); border: 0 solid transparent; color: var(--shop-on-ai); }
[data-tag] { display: inline-flex; align-items: center; box-sizing: border-box; border-radius: 4px; border: 0 solid transparent; }
[data-tag=ai] { color: var(--shop-ai); background: transparent; border: 1px solid color-mix(in srgb, var(--shop-line) 45%, transparent); }
[data-tag=muted] { color: var(--shop-muted); background: transparent; border: 1px solid color-mix(in srgb, var(--shop-line) 30%, transparent); }
[data-tag=shu] { color: var(--shop-shu); background: transparent; border: 1px solid color-mix(in srgb, var(--shop-shu) 45%, transparent); }
[data-tag=filled] { color: var(--shop-on-ai); background: var(--shop-ai); border: 0 solid transparent; }
[data-tag][data-place=inline] { font-size: calc(10px * var(--fs)); font-weight: 800; letter-spacing: 0.8px; padding: 1px 8px; }
[data-tag][data-place=row] { font-size: calc(12px * var(--fs)); font-weight: 600; padding: 2px 9px; }
[data-tag][data-place=head] { font-size: calc(11px * var(--fs)); font-weight: 800; letter-spacing: 0.6px; padding: 4px 10px; }
[data-mark] { display: inline-grid; place-items: center; flex: none; box-sizing: border-box; border-radius: 4px; border: 0 solid transparent; }
[data-mark][data-shape=circle] { border-radius: 50%; }
[data-mark][data-size=day] { width: 8px; height: 8px; }
[data-mark][data-size=legend] { width: 11px; height: 11px; }
[data-mark][data-size=status] { width: 18px; height: 18px; }
[data-mark][data-size=statusLarge] { width: 26px; height: 26px; }
[data-mark][data-size=number] { width: 24px; height: 24px; }
[data-mark][data-size=step] { width: 28px; height: 28px; }
[data-mark][data-size=face] { width: 30px; height: 30px; }
[data-mark][data-size=tile] { width: 32px; height: 32px; }
[data-mark][data-size=lead] { width: 40px; height: 40px; }
[data-mark][data-size=key] { width: 26px; height: 18px; }
[data-mark=ring][data-tone=ai] { color: var(--shop-ai); border: 1px solid color-mix(in srgb, var(--shop-line) 45%, transparent); }
[data-mark=ring][data-tone=shu] { color: var(--shop-shu); border: 1px solid color-mix(in srgb, var(--shop-shu) 45%, transparent); }
[data-mark=ring][data-tone=muted] { color: var(--shop-muted); border: 1px solid color-mix(in srgb, var(--shop-line) 30%, transparent); }
[data-mark=filled] { background: var(--shop-ai); color: var(--shop-on-ai); }
[data-mark=chosen] { background: var(--shop-noren); color: var(--shop-on-noren); }
[data-mark=toLearn] { background: var(--shop-shu); color: var(--shop-on-shu); }
[data-mark=right] { background: var(--shop-right); }
[data-mark=wrong] { background: var(--shop-wrong); }
[data-mark=hanada] { background: var(--shop-hanada); }
[data-mark=played] { background: var(--shop-shu); }
[data-mark=dashed] { color: var(--shop-muted); border: 1px dashed color-mix(in srgb, var(--shop-line) 45%, transparent); }
[data-track] { box-sizing: border-box; overflow: hidden; background: var(--shop-track); }
[data-track=slim] { height: 4px; border-radius: 2px; }
[data-track=regular] { height: 6px; border-radius: 3px; }
[data-track=bar] { height: 10px; border-radius: 4px; }
[data-track=wide] { height: 14px; border-radius: 4px; }
[data-track] > [data-track-fill] { height: 100%; background: var(--shop-fill); }
[data-track-part=known] { background: var(--shop-ai); }
[data-track-part=likelyKnown] { background: color-mix(in srgb, var(--shop-ai) 60%, transparent); }
[data-track-part=toLearn] { background: var(--shop-shu); }
[data-track-part=fill] { background: var(--shop-fill); }
[data-track-part=rest] { background: var(--shop-track); }
[data-track-part=met] { background: color-mix(in srgb, var(--shop-line) 45%, transparent); }
[data-track-part=none] { background: color-mix(in srgb, var(--shop-line) 18%, transparent); }
[data-track-part=pick] { background: color-mix(in srgb, var(--shop-shu) 45%, transparent); }
[data-track-part=mixListenWrite] { background: color-mix(in srgb, var(--shop-ai) 62%, transparent); }
[data-track-part=mixListen] { background: color-mix(in srgb, var(--shop-ai) 45%, transparent); }
[data-track-part=mixWrite] { background: var(--shop-hanada); }
[data-track-part=mixRecall] { background: color-mix(in srgb, var(--shop-ai) 26%, transparent); }
#home .rows .mk { font-size: calc(19px * var(--fs)); min-width: calc(max(40px, var(--mk-n, 2) * 19px) * var(--fs)); color: var(--shop-ai); }
/* surfaces:end */

/* The brand's own faces, the landing's cuts (landing/build_font.py). The
   Japanese of the pages is 'Tangoya Pages JP' (/fonts/pages/jp.css). */
@font-face { font-family: 'Tangoya Mincho'; src: url('/fonts/tangoya-landing-mincho.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Tangoya Brush'; src: url('/fonts/tangoya-landing-brush.woff2') format('woff2'); font-weight: 400; font-display: block; }

:root { --fs: 1; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--shop-ground); color: var(--on-surface);
  font-family: 'Tangoya Pages JP', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased;
}
[lang="ja"] { font-feature-settings: 'palt' 0; }
.ja { white-space: nowrap; }
h1, h2, h3, p { margin: 0; }
a { color: var(--shop-hanada); }
:focus-visible { outline: 3px solid var(--shop-hanada); outline-offset: 2px; border-radius: 4px; }
.mincho { font-family: 'Tangoya Mincho', system-ui, 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-weight: 600; }
.brush { font-family: 'Tangoya Brush', 'Tangoya Mincho', serif; font-weight: 400; }

/* The shell. */
.top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; max-width: 880px; margin: 0 auto; padding: 12px 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: var(--shop-ink); }
.brand .panel { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 18px; background: var(--shop-noren); color: var(--shop-on-noren); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.brand .nm { font-size: 18px; }
.brand .en { color: var(--shop-muted); font-weight: 500; font-size: 13px; }
.top nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; }
.top nav a { color: var(--shop-ink); text-decoration: none; font-weight: 600; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.top nav a.open { padding: 0 14px; color: var(--shop-ai); font-weight: 700; }
main { max-width: 680px; margin: 0 auto; padding: 0 20px 40px; }
footer { max-width: 680px; margin: 0 auto; padding: 8px 20px 56px; font-size: 12.5px; line-height: 1.6; color: var(--shop-muted); }
footer p { margin: 0 0 10px; }
footer a { color: inherit; }
.page { padding-top: 8px; }

/* The breadcrumb of the mockup. */
.crumb { font-size: 13px; color: var(--shop-muted); margin: 4px 0 12px; }
.crumb a { color: var(--shop-hanada); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* PageSection (lib/widgets/word_page/common.dart): a section, its eyebrow, its body. */
.sec { margin-top: 26px; container-type: inline-size; }
.eb { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; color: var(--primary); line-height: 1.3; margin: 0 0 10px; }
.sec > .eb { display: block; }
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.note { font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
p.note { font-weight: 400; margin-top: 8px; }
.src { font-size: 11px; color: var(--on-surface-variant); padding-top: 22px; }

/* WordHero (lib/widgets/word_page/hero.dart): the card, 20 px each side. */
.hero { padding: 18px 20px 20px; container-type: inline-size; }
.hw { margin: 16px 0 0; font-size: 50px; font-weight: 800; line-height: 1.08; letter-spacing: -.5px; overflow-wrap: anywhere; }
@supports (font-size: 1cqi) {
  .hw { font-size: clamp(24px, calc((100cqi - 8px) / var(--n)), 50px); }
}
.rrow { display: flex; align-items: center; gap: 6px; margin-top: 10px; min-width: 0; }
.rrow .rd { font-size: 20px; }
.hw.kana { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: 0; min-width: 0; }
.hero .pat { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
.hero .gloss { margin-top: 16px; font-size: 20px; line-height: 1.25; font-weight: 600; }

/* PitchAccent (lib/widgets/pitch_accent.dart): a rule above each high mora, a
   line under each low one, a vertical where the pitch moves, a tail past an
   odaka word's last mora, then the accent number. The widget's stroke (2),
   gap (1.5) and tail (9) at 20 px, kept in em so they follow the size. */
.pitch { display: inline-flex; align-items: stretch; font-size: 20px; font-weight: 700; line-height: 1.3; --s: .1em; --c: var(--primary); color: var(--on-surface); }
.pitch.big { font-size: 40px; }
@supports (font-size: 1cqi) {
  .pitch.big { font-size: clamp(16px, calc((100cqi - 116px) / (var(--m) + 1)), 40px); }
}
.pitch .hi, .pitch .lo, .pitch .tail { padding: .175em 0; }
.pitch .hi { box-shadow: inset 0 var(--s) 0 var(--c); }
.pitch .lo { box-shadow: inset 0 calc(-1 * var(--s)) 0 var(--c); }
.pitch .hi.turn { box-shadow: inset 0 var(--s) 0 var(--c), inset var(--s) 0 0 var(--c); }
.pitch .lo.turn { box-shadow: inset 0 calc(-1 * var(--s)) 0 var(--c), inset var(--s) 0 0 var(--c); }
.pitch .tail { width: .45em; box-shadow: inset var(--s) 0 0 var(--c), inset 0 calc(-1 * var(--s)) 0 var(--c); }
.pitch .pn { align-self: flex-end; margin-left: 8px; padding-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--on-surface-variant); }

/* The play, slow and info glyphs: Material's, drawn as masks in the text colour. */
.ico::before, .pb::before { content: ""; display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.pb::before { width: 18px; height: 18px; margin-right: 6px; flex: none; }
.vol { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E"); }
.slo { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.05 9.79L10 7.5v9l3.05-2.29L16 12l-2.95-2.21zM11 4.07V2.05c-2.01.2-3.84 1-5.32 2.21L7.1 5.69c1.11-.86 2.44-1.44 3.9-1.62zM5.69 7.1L4.26 5.68C3.05 7.16 2.25 8.99 2.05 11h2.02c.18-1.46.76-2.79 1.62-3.9zM4.07 13H2.05c.2 2.01 1 3.84 2.21 5.32l1.43-1.43c-.86-1.1-1.44-2.43-1.62-3.89zm1.61 6.74C7.16 20.95 9 21.75 11 21.95v-2.02c-1.46-.18-2.79-.76-3.9-1.62l-1.42 1.43zM22 12c0 5.16-3.92 9.42-8.95 9.95v-2.02C16.93 19.42 20 16.07 20 12s-3.07-7.42-6.95-7.93V2.05C18.08 2.58 22 6.84 22 12z'/%3E%3C/svg%3E"); }
.inf { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E"); }
.ico { cursor: pointer; }
.rrow .ico { flex: none; }
button.ico { font: inherit; }

/* WordKanjiSection and KanjiCell (kanji_section.dart): two columns, three
   from 560 px, one under 300 px, of the section's width. */
.cells { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@container (min-width: 560px) { .cells { grid-template-columns: repeat(3, 1fr); } }
@container (max-width: 299px) { .cells { grid-template-columns: 1fr; } }
.cell { display: flex; align-items: flex-start; gap: 10px; padding: 10px; color: inherit; text-decoration: none; min-width: 0; }
.cell:hover { border-color: var(--shop-ai); }
.cell .sq { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; font-size: 36px; line-height: 1; color: var(--on-surface); }
.cx { display: flex; flex-direction: column; min-width: 0; }
.cx .lb { font-size: 15px; line-height: 1.25; font-weight: 700; color: var(--on-surface); overflow-wrap: anywhere; }
.cx .lb.snd { font-style: italic; color: var(--on-surface-variant); }
.cx .rd { font-size: 12px; line-height: 1.3; color: var(--on-surface-variant); }
.cx .ct { margin-top: 2px; font-size: 12px; line-height: 1.3; font-weight: 700; color: var(--primary); }

/* The box where the app has YOUR PROGRESS: the way into the test. */
.box { margin-top: 26px; padding: 16px; }
.box .bh { font-size: 17px; font-weight: 800; line-height: 1.3; }
.box .bt { margin: 4px 0 12px; font-size: 14px; color: var(--on-surface-variant); }
.box [data-role] { display: inline-flex; padding: 0 22px; }

/* WordStyleNote (lib/widgets/word_style_note.dart). */
.sec > .pills { padding: 0; }

/* ExampleSentence and ClipRow (sentence_credit_sheet.dart, clip_row.dart). */
.ex { padding: 16px; }
.ex .jp { font-size: 16px; line-height: 2.2; color: var(--on-surface); }
.ex ruby { ruby-align: center; }
.ex rt { font-size: .5em; font-weight: 400; color: var(--on-surface-variant); }
.ex .t { color: var(--primary); font-weight: 700; }
.ex .en { margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--on-surface-variant); }
.ex .cap { margin-top: 2px; font-size: 12px; padding: 3px 0; color: var(--on-surface-variant); }
.ex .cap a { color: inherit; text-decoration-color: color-mix(in srgb, var(--shop-line) 45%, transparent); }
.clips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pb { font: inherit; font-size: calc(15px * var(--fs)); font-weight: 700; }

/* MeaningsList (meanings.dart): numbered rows on one card, divided. */
.list { padding: 0; }
.mr { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 10px 12px 14px; }
.mr + .mr::before, .sr + .sr::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: color-mix(in srgb, var(--shop-line) 18%, transparent); }
.mr [data-mark] { margin-top: 0; font-size: 12px; font-weight: 800; line-height: 1; }
.mt { min-width: 0; }
.mt .gl { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.mt .sub { font-size: 12px; color: var(--on-surface-variant); }
.mt .ask { margin: 4px 0 0; }

/* SoundsTheSame (details.dart). */
.sr { position: relative; display: block; padding: 11px 10px 11px 16px; color: inherit; text-decoration: none; }
a.sr:hover { background: color-mix(in srgb, var(--shop-ai) 6%, transparent); }
.sr .w { display: block; font-size: 16px; font-weight: 700; }
.sr .g { display: block; font-size: 13px; color: var(--on-surface-variant); }
.sr .sd { display: block; font-size: 11px; color: var(--on-surface-variant); }

/* DetailsCard (details.dart): a 96 px label column. */
.det { padding: 16px; }
.det p { display: flex; gap: 0; }
.det p + p { margin-top: 10px; }
.dk { flex: none; width: 96px; padding-right: 8px; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
.dv { font-size: 14px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }

/* KanjiScreen (lib/screens/kanji_screen.dart): the 108 px square and the lines
   beside it; a column under 360 px. */
.khead { display: flex; align-items: flex-start; gap: 18px; container-type: inline-size; }
.kglyph { margin: 0; font-weight: 400; flex: none; display: flex; align-items: center; justify-content: center; width: 108px; height: 108px; font-size: 76px; line-height: 1.1; color: var(--on-surface); }
/* KanjiModel (kanji_model.dart): the strokes, the meaning part blue, a sound part that carries the sound red. */
.kmodel path { fill: none; stroke: var(--shop-ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.kmodel path.mean { stroke: var(--shop-hanada); }
.kmodel path.sound { stroke: var(--shop-shu); }
.eb .mean { color: var(--shop-hanada); }
.eb .sound { color: var(--shop-shu); }
.klines { min-width: 0; flex: 1; }
@media (max-width: 399px) { .khead { flex-direction: column; gap: 14px; } }
.km { font-size: 24px; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.kl { margin-top: 6px; font-size: 15px; line-height: 1.35; }
.kk { font-size: 12px; font-weight: 800; color: var(--on-surface-variant); }
.kf { margin-top: 8px; font-size: 13px; color: var(--on-surface-variant); }
.kf.sp { margin-top: 0; }
.km + .kf.sp { margin-top: 8px; }
.gh { margin: 12px 0 8px; font-size: 13px; font-weight: 400; color: var(--on-surface-variant); }
.gh .gk { font-size: 15px; font-weight: 700; color: var(--on-surface); }
.gh .gk.rd { font-size: 18px; }

/* SearchRow (lib/screens/search_screen.dart): a word as a card row. */
.row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 11px 12px 11px 16px; color: inherit; text-decoration: none; }
.row:hover { border-color: var(--shop-ai); }
.row .rk { flex: none; min-width: 3.2em; font-size: 12px; font-weight: 600; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.row .body { min-width: 0; }
.row .w { display: block; }
.row .w b { font-size: 16px; font-weight: 700; }
.row .w .r { font-size: 13px; font-weight: 500; color: var(--on-surface-variant); white-space: pre-wrap; }
.row .g { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13px; color: var(--on-surface-variant); }
.lst .row { margin-bottom: 8px; }

/* KanjiTile and KanjiTileGrid (kanji_tiles.dart): equal columns of at least 72 px. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 72px; padding: 6px; color: inherit; text-decoration: none; text-align: center; min-width: 0; }
a.tile:hover { border-color: var(--shop-ai); }
.tile .g { font-size: 30px; line-height: 1.2; font-weight: 500; color: var(--on-surface); }
.tile .g.mean { color: var(--shop-hanada); }
.tile .g.sound, .tile .m.sound { color: var(--shop-shu); }
.tile .m { margin-top: 2px; font-size: 12px; line-height: 1.25; color: var(--on-surface-variant); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* The index pages. */
.ih { font-size: 28px; line-height: 1.2; font-weight: 800; margin: 4px 0 8px; }
.lead { font-size: 15px; line-height: 1.5; color: var(--on-surface-variant); }
.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.kind { display: block; padding: 12px 14px; color: inherit; text-decoration: none; }
.kind:hover { border-color: var(--shop-ai); }
.kind .kj { font-size: 20px; font-weight: 800; margin-right: 8px; }
.kind .ke { font-size: 14px; font-weight: 700; }
.kind .kt { display: block; margin-top: 2px; font-size: 12px; color: var(--on-surface-variant); }
.kind .kc { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--primary); }
.more { margin-top: 16px; font-size: 14px; font-weight: 700; }
.pager { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0; font-size: 13px; }
.pager [aria-current] { font-weight: 800; color: var(--on-surface); }

/* PitchInfoSheet (lib/widgets/pitch_info.dart), as a section of /words/. */
.ph { font-size: 24px; font-weight: 800; line-height: 1.2; margin-bottom: 8px; }
.pp { font-size: 15px; line-height: 1.45; margin-top: 8px; }
.pp.mu { font-size: 14px; color: var(--on-surface-variant); margin-top: 12px; }
.pex { padding: 14px; margin-top: 14px; }
.pt + .pt { margin-top: 14px; }
.pn2 { font-size: 15px; font-weight: 800; }
.pr { margin-top: 4px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; }
.pm { font-size: 14px; color: var(--on-surface-variant); }
.pw { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--on-surface-variant); }

@media (max-width: 420px) {
  .brand .en { display: none; }
  .ih { font-size: 24px; }
}
@media print { .top nav, .box { display: none; } }