/* The remaining release templates. Screen-only rules preserve existing printable assets and layouts. */
@media screen {
  body[data-design-pilot] { --surface-warm:#edf6f4; }
  body[data-pilot-family="resource"] #main { padding-top:40px; }
  body[data-pilot-family="resource"] #main :is(.study-page,.dk-page,.ws-page,.so-page,.worksheets-page,.paired-page,.kb-page,.kr-page,.romaji-converter) { max-width:1140px; margin-inline:auto; }
  body[data-pilot-family="resource"] #main :is(.kb-page,.kr-page) { padding:0; }
  body[data-pilot-family="resource"] #main h1 { font-size:2.5rem; line-height:1.15; letter-spacing:-.035em; margin:0 0 18px; white-space:normal; }
  body[data-pilot-family="resource"] #main h2 { font-size:1.625rem; line-height:1.25; letter-spacing:-.025em; }
  body[data-pilot-family="resource"] #main h3 { font-size:1.3125rem; line-height:1.3; }
  body[data-pilot-family="resource"] #main p { font-size:1.0625rem; line-height:1.65; }
  body[data-pilot-family="resource"] #main :is(.learn-lead,.fc-lead,.rp-lead,.wp-lead,.mn-lead,.dk-answer,.pair-lead,.ws-answer,.so-heading>p,.w-intro>p,.converter-heading>p,.kb-page header>p,.kr-page header>p) { display:block; font-size:1.125rem; line-height:1.65; max-width:68ch; margin:0 0 28px; }
  body[data-pilot-family="resource"] #main :is(.universe-breadcrumbs,.ws-breadcrumb,nav[aria-label="Breadcrumb"]) { font-size:0.875rem; margin-bottom:20px; }
  body[data-pilot-family="resource"] #main :is(.study-page,.dk-page,.ws-page,.paired-page) > section { margin-top:44px; }
  body[data-pilot-family="resource"] #main :is(.hiragana-subnav,.study-reference-nav,.dk-toc,.dk-next,.pair-actions,.wp-links,.converter-links,.kb-next,.kr-next) { font-size:0.9375rem; gap:8px 20px; }

  /* Common control language. Drawing surfaces, inline reading tokens and flashcards retain their own geometry. */
  body[data-pilot-family="resource"] #main :is(button,select,input[type="text"],input[type="search"]) { font-family:var(--font); font-size:1rem; line-height:1.3; min-height:46px; padding:10px 14px; border-radius:6px; border-color:var(--line-strong); color:var(--ink); background:var(--surface); max-width:100%; }
  body[data-pilot-family="resource"] #main button:is([aria-pressed="true"],[aria-checked="true"],.so-primary,.converter-copy) { color:white; background:var(--accent); border-color:var(--accent); }
  body[data-pilot-family="resource"] #main button:disabled { color:var(--muted); background:var(--surface-muted); }
  body[data-pilot-family="resource"] #main :is(button,select,input,textarea,a,summary):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
  body[data-pilot-family="resource"] #main :is(.study-toolbar,.so-toolbar,.pair-toolbar) { gap:12px 18px; margin-bottom:20px; }
  body[data-pilot-family="resource"] #main :is(.study-set-label,.study-notice,.study-picker summary,.study-pick-grid label,.study-toolbar>label,.pair-toolbar label,.fc-links,.fc-print label,.w-paper-control span,.w-pages,.w-file-summary,.w-help,.w-study-text,.so-legend,.so-cell-caption,.pair-note,.pair-status,.dk-count) { font-size:0.9375rem; line-height:1.5; }
  body[data-pilot-family="resource"] #main :is(.study-picker[open],.w-study,.rp-filter) { background:var(--surface-muted); border:0; border-radius:6px; padding:18px; }
  body[data-pilot-family="resource"] #main :is(.scope-note,.converter-source,.kr-credit,.kb-credit,.wp-limit,.kana-audio-note) { font-size:0.875rem; line-height:1.55; color:var(--muted); }
  body[data-pilot-family="resource"] #main :is(table,.study-reference-table) { font-size:1rem; }
  body[data-pilot-family="resource"] #main :is(th,td) { border-color:var(--line); }
  body[data-pilot-family="resource"] #main th { font-size:0.875rem; color:var(--muted); letter-spacing:0; text-transform:none; }

  /* Lessons: open path navigation beside a single lesson surface. */
  [data-design-pilot] #main .learn-workspace { grid-template-columns:minmax(0,1fr) 270px; gap:48px; }
  [data-design-pilot] #main .learn-card { border:0; border-radius:8px; background:var(--surface-muted); padding:28px; }
  [data-design-pilot] #main .learn-path { border-left:1px solid var(--line); padding-left:28px; }
  [data-design-pilot] #main .learn-path a { border:0; border-bottom:1px solid var(--line); border-radius:0; padding:12px 0; font-size:1rem; }
  [data-design-pilot] #main .learn-path a[aria-current="step"] { color:var(--accent); font-weight:650; }
  [data-design-pilot] #main .learn-path small { font-size:0.8125rem; }
  [data-design-pilot] #main :is(.learn-progress,.learn-stage,.learn-set) { font-size:0.9375rem; }
  [data-design-pilot] #main .learn-tile { background:white; padding:10px 4px; border-radius:6px; }
  [data-design-pilot] #main .learn-tile span { font-size:1rem; }
  [data-design-pilot] #main .learn-line { height:auto; min-height:140px; overflow:visible; font-size:1.0625rem; line-height:1.65; margin-top:18px; }
  [data-design-pilot] #main .learn-prompt { min-height:120px; }
  [data-design-pilot] #main .learn-feedback { font-size:1.0625rem; line-height:1.6; min-height:64px; }
  [data-design-pilot] #main .learn-options { gap:10px; }
  [data-design-pilot] #main .learn-recovery { background:white; border-radius:6px; padding:18px; }

  /* Flashcards and reading: retain a clearly bounded task without stacking decorative boxes. */
  [data-design-pilot] #main .fc-first { grid-template-columns:minmax(0,1fr) 300px; gap:48px; }
  [data-design-pilot] #main .fc-print { border-left:1px solid var(--line); padding-left:28px; }
  [data-design-pilot] #main .fc-card { max-width:none; height:300px; padding:24px; border:0; border-radius:8px; background:var(--surface-muted); color:var(--ink); }
  [data-design-pilot] #main .fc-card[aria-pressed="true"] { background:var(--accent-wash); color:var(--ink); }
  [data-design-pilot] #main .fc-card [data-fc-front] small { font-size:1rem; }
  [data-design-pilot] #main .fc-card[aria-pressed="false"] [data-fc-back] { font-size:1rem; }
  [data-design-pilot] #main .fc-controls { max-width:none; gap:10px; margin-top:16px; }
  [data-design-pilot] #main .fc-instruction { font-size:1rem; }
  [data-design-pilot] #main :is(.rp-tool,.wp-tool) { max-width:850px; background:var(--surface-muted); border:0; border-radius:8px; padding:24px; }
  [data-design-pilot] #main .rp-item { background:white; font-size:2rem; padding:18px; margin-block:16px; }
  [data-design-pilot] #main .rp-item button { font:inherit; color:var(--ink); min-width:44px; padding:0 2px; border:0; background:transparent; }
  [data-design-pilot] #main .rp-item small { font-size:0.875rem; line-height:1.3; color:var(--muted); }
  [data-design-pilot] #main .rp-settings { font-size:1rem; gap:12px; margin-top:14px; }
  [data-design-pilot] #main :is(.rp-tabs,.rp-choices) { gap:10px; }
  [data-design-pilot] #main .rp-choices button { min-height:52px; }
  [data-design-pilot] #main :is(.rp-context,[data-rp-count]) { font-size:0.9375rem; }
  [data-design-pilot] #main .rp-reference :is(td,th) { font-size:1rem; padding:12px 8px; }
  [data-design-pilot] #main .rp-reference td:first-child { font-size:1.375rem; }
  [data-design-pilot] #main .rp-reference :is(.rp-model,.rp-alias,.rp-text) { padding-block:24px; }

  /* Writing keeps the exact teaching and input geometry; surrounding controls use the shared system. */
  [data-design-pilot] #main .wp-tool { gap:16px 28px; }
  [data-design-pilot] #main :is(.wp-modes,.wp-controls,.wp-advance) { gap:10px; }
  [data-design-pilot] #main .wp-box { background:white; border-color:var(--line-strong); }
  [data-design-pilot] #main .wp-ink { stroke:var(--accent); }
  [data-design-pilot] #main .wp-bad { stroke:#a43832; }
  [data-design-pilot] #main .wp-start { fill:var(--accent); }
  [data-design-pilot] #main .wp-reference { color:var(--ink); }
  [data-design-pilot] #main :is(.wp-model-grid,.wp-comparison-grid) article { border:0; border-top:1px solid var(--line); border-radius:0; padding:20px 0; }

  /* Reference matrices: larger readings and stable kana geometry, with scrolling rather than tiny type. */
  [data-design-pilot] #main :is(.dk-first,.ws-first) { gap:48px; }
  [data-design-pilot] #main :is(.dk-grid,.dk-combinations,.pair-grid,.pair-combos) { gap:5px; }
  [data-design-pilot] #main :is(.dk-cell,.pair-cell,.so-chart-area .so-cell) { min-height:68px; border:0; border-bottom:1px solid var(--line); border-radius:4px; background:var(--surface-muted); color:var(--ink); }
  [data-design-pilot] #main :is(.dk-reading,.pair-reading,.so-cell-caption) { font-size:0.875rem; line-height:1.3; }
  [data-design-pilot] #main :is(.dk-col,.dk-row,.pair-col,.pair-row-static) { font-size:0.8125rem; }
  [data-design-pilot] #main .dk-page .glyph { width:34px; height:34px; }
  [data-design-pilot] #main .dk-page .glyph-combo { width:58px; }
  [data-design-pilot] #main .dk-combinations { grid-template-columns:repeat(3,minmax(0,1fr)) 62px; }
  [data-design-pilot] #main .dk-sheet { font-size:0.875rem; }
  [data-design-pilot] #main .dk-check { border:0; background:var(--surface-muted); padding:24px; border-radius:8px; }
  [data-design-pilot] #main :is(.dk-first h2,.pair-block h2,.so-block h2) { font-size:1.125rem; letter-spacing:0; text-transform:none; margin-bottom:16px; }
  [data-design-pilot] #main .paired-page .kana-drawing { width:27px; height:34px; }
  [data-design-pilot] #main .paired-page .kana-combination { width:42px; }
  [data-design-pilot] #main .pair-cell:is(.is-current,[aria-pressed="true"]),[data-design-pilot] #main .so-cell.is-current { background:var(--accent-wash); outline:2px solid var(--accent); outline-offset:-2px; }
  [data-design-pilot] #main .pair-selection { border:0; border-radius:6px; background:var(--surface-muted); }
  [data-design-pilot] #main .pair-models figcaption { font-size:0.875rem; line-height:1.45; }
  [data-design-pilot] #main .pair-models button { font-size:0.875rem; }
  [data-design-pilot] #main .so-page { --so-muted:var(--muted); --so-look:#e8f1f7; --so-look-line:#466a89; }
  [data-design-pilot] #main .so-chart-area .so-cell { height:76px; padding:6px; }
  [data-design-pilot] #main .so-cell.is-selected { border:2px solid var(--accent); }
  [data-design-pilot] #main .so-cell.is-look { background:var(--so-look); outline:1px solid var(--so-look-line); }
  [data-design-pilot] #main .so-chart-area { gap:36px; }

  /* Mnemonic overview: the cue and reading have their own lines at every width. */
  [data-design-pilot] #main .mn-grid { grid-template-rows:repeat(11,106px); gap:6px; }
  [data-design-pilot] #main .mn-cell { grid-template-columns:1fr; grid-template-rows:42px 20px 32px; padding:4px; border:0; border-bottom:1px solid var(--line); border-radius:4px; background:var(--surface-muted); }
  [data-design-pilot] #main .mn-cell .glyph { width:38px; height:38px; grid-column:1; grid-row:1; }
  [data-design-pilot] #main .mn-reading { grid-column:1; grid-row:2; font-size:0.875rem; text-align:center; }
  [data-design-pilot] #main .mn-word { grid-column:1; grid-row:3; font-size:0.8125rem; line-height:1.2; white-space:normal; overflow-wrap:anywhere; }
  [data-design-pilot] #main .mn-set-mark { font-size:0.6875rem; color:var(--accent); }
  [data-design-pilot] #main .mn-cell.in-set { outline:2px solid var(--accent); outline-offset:-2px; }
  [data-design-pilot] #main .mn-panel { border:1px solid var(--line-strong); border-radius:8px 8px 0 0; padding:24px; }
  [data-design-pilot] #main .mn-panel p { font-size:1.0625rem; line-height:1.6; }
  [data-design-pilot] #main :is(.mn-own,.mn-panel-links a,.mn-found) { font-size:0.9375rem; }
  [data-design-pilot] #main .mn-own textarea { font-size:1.0625rem; min-height:74px; padding:10px; }
  [data-design-pilot] #main .mn-entry { padding-block:24px; }

  /* Download catalog and editorial explanations. */
  [data-design-pilot] #main .w-ready-grid { gap:28px; }
  [data-design-pilot] #main .w-download { border:0; border-top:1px solid var(--line); border-radius:0; padding:24px 0; background:transparent; }
  [data-design-pilot] #main .w-download p { font-size:1rem; line-height:1.6; }
  [data-design-pilot] #main .w-editor { border:0; border-radius:8px; background:var(--surface-muted); padding:28px; }
  [data-design-pilot] #main :is(.w-file,.w-save) { border-radius:6px; min-height:46px; font-size:0.9375rem; }
  [data-design-pilot] #main .ws-sentence { border:0; border-radius:8px; background:var(--surface-muted); padding:24px; }
  [data-design-pilot] #main .ws-legend { font-size:0.9375rem; }
  [data-design-pilot] #main .ws-page table { font-size:1rem; }

  /* Text tools: neutral task surfaces, generous text fields, consistent focus and action states. */
  [data-design-pilot] #main :is(.kb-tool,.kr-tool,.converter-tool) { border:0; border-radius:8px; background:var(--surface-muted); padding:24px; }
  [data-design-pilot] #main .kb-editor { background:var(--surface-muted); }
  [data-design-pilot] #main :is(.kb-tool,.kr-tool,.converter-tool) textarea { color:var(--ink); border-color:var(--line-strong); border-radius:6px; background:white; }
  [data-design-pilot] #main .kb-grid { gap:7px; }
  [data-design-pilot] #main .kb-grid button { padding:7px 3px; min-height:66px; }
  [data-design-pilot] #main .kb-grid span { font-size:1.625rem; line-height:1.25; }
  [data-design-pilot] #main .kb-grid small { font-size:0.875rem; }
  [data-design-pilot] #main .kb-page .kb-actions select { font-size:1rem; }
  [data-design-pilot] #main .kr-furigana .kr-check { font:inherit; min-height:44px; padding:0; border:0; border-bottom:2px dotted var(--accent); background:transparent; color:var(--ink); border-radius:0; }
  [data-design-pilot] #main .kr-furigana rt { font-size:0.875rem; }
  [data-design-pilot] #main :is(.kr-small,.kr-estimate,.kr-options label,.converter-help,.converter-note,.converter-status) { font-size:0.9375rem; color:var(--muted); }
  [data-design-pilot] #main :is(.kr-kanji-grid details,.kb-page details:not(.kb-more)) { border:0; border-bottom:1px solid var(--line); border-radius:0; padding:16px 0; }
  [data-design-pilot] #main .kr-panel { border-color:var(--line-strong); border-radius:8px 8px 0 0; }

  /* About and Privacy use the same reading rhythm as the teaching pages. */
  body[data-pilot-family="info"] #main { max-width:960px; }
  body[data-pilot-family="info"] .hero { display:block; padding:32px 0; border:0; }
  body[data-pilot-family="info"] h1 { font-size:2.75rem; max-width:20ch; }
  body[data-pilot-family="info"] #main :is(p,li) { font-size:1.0625rem; line-height:1.75; max-width:72ch; }
  body[data-pilot-family="info"] #main section { margin-bottom:40px; }
  body[data-pilot-family="info"] .callout { background:var(--surface-muted); border:0; border-left:3px solid var(--accent); border-radius:0; }

  @media(min-width:1000px) { [data-design-pilot] #main .mn-grid { grid-template-rows:repeat(5,106px); } }
  @media(max-width:1100px) {
    [data-design-pilot] #main :is(.learn-workspace,.fc-first) { gap:28px; }
    [data-design-pilot] #main .w-ready-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    [data-design-pilot] #main .wp-tool { display:block; }
  }
  @media(max-width:850px) {
    [data-design-pilot] #main :is(.learn-workspace,.fc-first) { display:grid; grid-template-columns:1fr; gap:36px; }
    [data-design-pilot] #main :is(.learn-path,.fc-print) { border-left:0; border-top:1px solid var(--line); padding:28px 0 0; }
  }
  @media(max-width:760px) {
    body[data-pilot-family="resource"] #main { padding-top:28px; }
    body[data-pilot-family="resource"] #main h1,body[data-pilot-family="info"] h1 { font-size:2rem; }
    body[data-pilot-family="resource"] #main h2 { font-size:1.5625rem; }
    body[data-pilot-family="resource"] #main :is(.learn-lead,.fc-lead,.rp-lead,.wp-lead,.mn-lead,.dk-answer,.pair-lead,.ws-answer,.so-heading>p,.w-intro>p,.converter-heading>p,.kb-page header>p,.kr-page header>p) { font-size:1.0625rem; margin-bottom:24px; }
    body[data-pilot-family="resource"] #main :is(button,select) { padding:10px; }
    [data-design-pilot] #main :is(.learn-card,.rp-tool,.wp-tool,.w-editor,.kb-tool,.kr-tool,.converter-tool,.ws-sentence) { padding:18px 14px; }
    [data-design-pilot] #main .learn-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
    [data-design-pilot] #main .learn-line { min-height:140px; }
    [data-design-pilot] #main .fc-card { height:264px; }
    [data-design-pilot] #main .fc-controls { grid-template-columns:1fr 1fr; }
    [data-design-pilot] #main .fc-controls button:first-child { grid-column:1/-1; }
    [data-design-pilot] #main :is(.dk-first,.ws-first) { grid-template-columns:1fr; gap:36px; }
    [data-design-pilot] #main .w-ready-grid { grid-template-columns:1fr; gap:12px; }
    [data-design-pilot] #main .w-download { grid-template-columns:86px minmax(0,1fr); gap:20px; }
    [data-design-pilot] #main .paired-page .kana-drawing { width:22px; height:30px; }
    [data-design-pilot] #main .paired-page .kana-combination { width:35px; }
    [data-design-pilot] #main :is(.pair-grid,.pair-combos,.dk-grid,.dk-combinations) { gap:4px; }
    [data-design-pilot] #main .mn-panel { padding:16px; }
    [data-design-pilot] #main .kb-grid button { min-height:64px; padding:5px 2px; }
    [data-design-pilot] #main .kb-grid { gap:5px; }
    [data-design-pilot] #main .rp-reference :is(td,th) { font-size:0.9375rem; padding:12px 4px; }
    [data-design-pilot] #main .rp-reference td:first-child { font-size:1.25rem; }
    [data-design-pilot] #main .wp-workspace { flex-wrap:wrap; }
  }
}

/* Print keeps the same teaching status and audio scope as the online chart. */
@media print {
  [data-design-pilot] .pair-chart::after {
    content:"MiniMachi · Shapes: KanjiVG by Ulrich Apel and contributors, CC BY-SA 3.0 · Teaching draft; educator review pending. Generated audio: see online chart.";
  }
}

/* Phones (14 Oct 2026): a shorter header and smaller titles on activity pages, so the task starts higher. */
@media screen and (max-width: 600px) {
  [data-design-pilot] .site-header.pilot-header { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
  body[data-pilot-family="resource"] #main, body[data-pilot-family="practice"] #main { padding-top: 14px; }
  body[data-pilot-family="resource"] #main h1, body[data-pilot-family="practice"] #main h1 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 8px; }
  body[data-pilot-family="resource"] #main h1 + p, body[data-pilot-family="resource"] #main .lede { margin-top: 0; }
}

/* Stability and target size (14 Oct 2026), found by the older suites:
   - worksheets: with an incoming study set the editor is placed above the ready-made PDFs by the script, so the PDFs
     stay out of sight until the page is ready (hidden elements do not count as layout shift);
   - phones: the header reserves the height it has once its Menu button appears;
   - 320px: the worksheet picker keeps 44px targets in the editorial's wider panel padding. */
html.ws-incoming:not(:has(.worksheets-ready)) [data-w-catalog] { visibility: hidden; }
@media screen and (max-width: 600px) {
  [data-design-pilot] .site-header.pilot-header { min-height: 57px; }
}
@media screen and (max-width: 360px) {
  [data-design-pilot] #main .w-editor { padding-left: 10px; padding-right: 10px; }
}

/* Guide status line (14 Oct 2026): reserve two lines so stepping never changes the page height. */
[data-design-pilot] .kg-step-status { min-height: 42px; }

/* Short landscape phones (14 Oct 2026): compact header, title and input, and no intro line on the three tools, so the
   input, result and Copy stay on the first screen. */
@media screen and (max-height: 480px) and (orientation: landscape) {
  [data-design-pilot] .site-header.pilot-header { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
  [data-design-pilot] .pilot-header .brand { font-size: 1.125rem; }
  body[data-pilot-family="resource"] #main { padding-top: 8px; padding-bottom: 24px; }
  body[data-pilot-family="resource"] #main h1 { font-size: 1.375rem; line-height: 1.2; margin: 0 0 4px; }
  html body[data-pilot-family="resource"] #main :is(.converter-heading, .kb-page header, .kr-page header) > p { display: none; }
  [data-design-pilot] #main :is(.converter-tool, .kb-tool, .kr-tool) { padding-top: 8px; padding-bottom: 8px; gap: 6px; }
  [data-design-pilot] #main [data-converter-input] { min-height: 48px; height: 48px; }
}

/* Stroke-order page (14 Oct 2026): denser chart cells keep the docked panel's room close to the original layout, and
   forced-colors keeps the open model's dashed outline (the editorial's solid outline replaced it). Screen only. */
@media screen {
  [data-design-pilot] #main .so-chart-area .so-cell { height: auto; min-height: 56px; padding: 3px; }
  [data-design-pilot] #main .so-chart-area { gap: 22px; }
  [data-design-pilot] #main .so-cell-caption { font-size: .75rem; line-height: 1.1; margin: 0; padding: 0; min-height: 0; }
}
@media screen and (forced-colors: active) {
  [data-design-pilot] #main .so-cell.is-current { outline: 2px dashed Highlight; outline-offset: -6px; }
}

/* Stroke-order docked panel (14 Oct 2026): the panel keeps the original compact header and footer text, so it leaves the
   chart as much room as before (the generic editorial heading and button sizes made it 20-50px taller). Screen only. */
@media screen {
  [data-design-pilot] #main .so-dialog-header h2 { font-size: 1.125rem; line-height: 1.2; letter-spacing: 0; margin: 0; }
  [data-design-pilot] #main .so-dialog-header button { font-size: .875rem; min-height: 44px; padding: 8px; }
  [data-design-pilot] #main .so-dialog .so-dialog-footer p { font-size: .8125rem; line-height: 1.4; }
  [data-design-pilot] #main .so-dialog-body { padding-top: 10px; padding-bottom: 10px; }
  /* The footer scrolls with the content, so it can never cover a focused control in a short panel. */
  [data-design-pilot] #main .so-dialog .so-dialog-footer { position: static; }
}

/* Short windows (14 Oct 2026): on viewports under 700px high, the activity pages' header, title and spacing tighten so a
   docked or side panel keeps enough room to show its controls. */
@media screen and (max-height: 700px) and (min-width: 601px) {
  [data-design-pilot] .site-header.pilot-header { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
  body[data-pilot-family="resource"] #main { padding-top: 14px; }
  body[data-pilot-family="resource"] #main h1 { font-size: 1.75rem; line-height: 1.15; margin: 0 0 6px; }
  body[data-pilot-family="resource"] #main :is(.so-heading, .w-intro, .learn-lead) > p, body[data-pilot-family="resource"] #main .lede { font-size: 1rem; line-height: 1.5; margin-bottom: 12px; }
}

/* Character guides (14 Oct 2026):
   - phones: a smaller title and model heading and tighter spacing bring the model and Play higher (the teaching text
     stays 17px and the model 224px, the design's own readability floor in editorial-check.py);
   - contrast themes: the current kana in the look-alike row keeps a heavy border (the editorial row has none). */
@media screen and (max-width: 600px) {
  [data-design-pilot] .kg-intro h1 { font-size: 1.75rem; margin-bottom: 10px; }
  [data-design-pilot] .kg-answer { margin-bottom: 14px; }
  [data-design-pilot] .kg-lead-title { font-size: 1.125rem; line-height: 1.25; margin-bottom: 10px; }
  [data-design-pilot] .kg-lead-grid { gap: 14px; }
}
@media screen and (forced-colors: active) {
  [data-design-pilot] .kg-w-row .kg-alike[aria-current] { border: 3px solid Highlight; }
}

/* Mnemonics dock on phones (14 Oct 2026): a more compact dock keeps the personal-hook field and the grid's bottom row
   reachable (the generic editorial heading, text and padding made it 60-80px taller). Screen only. */
@media screen and (max-width: 600px) {
  [data-design-pilot] #main .mn-panel { padding: 10px 12px; }
  [data-design-pilot] #main .mn-panel :is(h2, .mn-panel-top h2) { font-size: 1.125rem; line-height: 1.25; margin: 0; }
  [data-design-pilot] #main .mn-panel p { font-size: 1rem; line-height: 1.45; margin: 0; }
  [data-design-pilot] #main .mn-own textarea { min-height: 56px; padding: 8px; }
}