/* Four-route preview only. Original teaching SVGs and activity engines are retained. */
@media screen {
  html:has([data-design-pilot]) { background:#fff; }
  body[data-design-pilot] {
    --paper:#fff; --surface:#fff; --surface-muted:#f2f5f6;
    --ink:#1d3044; --ink-soft:#42576a; --muted:#526778; --muted-strong:#526778;
    --line:#dbe3e7; --line-strong:#a9bac5;
    --accent:#14675c; --accent-dark:#0d534a; --accent-wash:#edf6f4;
    --green:#14675c; --green-wash:#edf6f4; --radius:8px; --radius-small:6px;
    --shadow:none; --font:"Segoe UI",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
    background:var(--paper); color:var(--ink); font-family:var(--font); font-size:1.0625rem; line-height:1.65;
  }
  [data-design-pilot] :is(h1,h2,h3,h4) { font-family:var(--font); font-weight:650; letter-spacing:-.025em; line-height:1.2; }
  [data-design-pilot] h2 { font-size:1.75rem; }
  [data-design-pilot] h3 { font-size:1.3125rem; }
  [data-design-pilot] .shell { width:min(1200px,calc(100% - 80px)); }
  [data-design-pilot] #main { padding-top:40px; padding-bottom:72px; }
  [data-design-pilot] p { color:var(--ink-soft); }
  [data-design-pilot] a:hover { color:var(--accent-dark); }
  [data-design-pilot] :focus-visible { outline:3px solid #14675c; outline-offset:4px; }
  [data-design-pilot] .eyebrow { color:var(--accent); font-size:0.75rem; letter-spacing:.13em; font-weight:650; margin-bottom:16px; }
  [data-design-pilot] .button { min-height:48px; font-size:1rem; line-height:1.3; padding:12px 20px; border-radius:6px; background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:none; font-weight:600; }
  [data-design-pilot] .button.secondary { background:#fff; color:var(--ink); border-color:var(--line-strong); }
  [data-design-pilot] .button:hover { background:var(--accent-dark); color:#fff; }
  [data-design-pilot] .button.secondary:hover { background:var(--surface-muted); color:var(--ink); }
  [data-design-pilot] .scope-note { font-size:0.875rem; line-height:1.6; max-width:80ch; margin-top:40px; }
  [data-design-pilot] .site-header { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:18px; position:relative; border-color:var(--line); }
  [data-design-pilot] .brand { color:var(--ink); font-size:1.5625rem; font-weight:750; letter-spacing:-.06em; gap:10px; }
  [data-design-pilot] .brand-mark { background:var(--accent); border-radius:6px; width:30px; height:30px; font-size:0; }
  [data-design-pilot] .main-nav { display:flex; gap:30px; overflow:visible; mask-image:none; font-size:1rem; margin:0; flex:0 1 auto; }
  [data-design-pilot] .main-nav a { color:var(--ink-soft); font-size:1rem; min-height:44px; display:flex; align-items:center; padding:4px 0; text-decoration:none; }
  [data-design-pilot] .main-nav a[aria-current] { color:var(--accent); border-color:var(--accent); }
  [data-design-pilot] .pilot-menu-toggle { display:flex; align-items:center; gap:8px; border:1px solid var(--line-strong); border-radius:6px; background:#fff; color:var(--ink); min-height:44px; padding:8px 13px; font-size:1rem; }
  [data-design-pilot] .site-footer { font-size:0.875rem; padding-block:28px; border-color:var(--line); gap:18px; }
  [data-design-pilot] .site-footer .brand { font-size:1.25rem; }
  [data-design-pilot] .pilot-review { display:flex; align-items:center; flex-wrap:wrap; gap:16px 30px; border-top:1px solid var(--line); font-size:0.8125rem; color:var(--muted); padding-block:18px; }
  [data-design-pilot] .pilot-review>span { font-size:0.625rem; letter-spacing:.1em; }
  [data-design-pilot] .pilot-review nav { display:flex; flex-wrap:wrap; gap:16px; }
  [data-design-pilot] .pilot-review a { display:inline-flex; min-height:32px; align-items:center; }

  /* Home: a reading-led introduction, followed by open rows of resources. */
  [data-design-pilot] .pilot-home-intro { display:grid; grid-template-columns:1.15fr 1fr; gap:80px; align-items:center; padding:32px 0 64px; border-bottom:1px solid var(--line); }
  [data-design-pilot] .pilot-home-intro h1 { font-size:clamp(2.5rem,4.3vw,3.875rem); line-height:1.08; letter-spacing:-.045em; margin-bottom:24px; }
  [data-design-pilot] .pilot-home-intro h1 span { color:var(--accent); }
  [data-design-pilot] .pilot-home-lede { font-size:1.1875rem; line-height:1.7; max-width:44ch; margin-bottom:28px; }
  [data-design-pilot] .pilot-actions { display:flex; gap:16px 24px; flex-wrap:wrap; align-items:center; }
  [data-design-pilot] .pilot-actions .button { display:inline-flex; gap:22px; align-items:center; }
  [data-design-pilot] .pilot-text-link { display:inline-flex; align-items:center; gap:14px; min-height:44px; font-weight:550; font-size:1rem; text-decoration-thickness:1px; }
  [data-design-pilot] .pilot-home-free { margin:20px 0 0; font-size:0.875rem; color:var(--muted); }
  [data-design-pilot] .pilot-vowels { border-left:1px solid var(--line); padding:24px 0 24px 40px; }
  [data-design-pilot] .pilot-vowels h2 { font-size:1.125rem; font-weight:550; letter-spacing:0; margin-bottom:24px; }
  [data-design-pilot] .pilot-vowel-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:24px; }
  [data-design-pilot] .pilot-vowel-row a { display:grid; place-items:center; gap:10px; text-decoration:none; padding:10px 0; border-bottom:1px solid var(--line); border-radius:0; }
  [data-design-pilot] .pilot-vowel-row a:hover { background:var(--accent-wash); }
  [data-design-pilot] .pilot-vowel-row .glyph { width:56px; height:56px; fill:none; stroke:currentColor; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
  [data-design-pilot] .pilot-vowel-row span { font-size:1rem; color:var(--muted); }
  [data-design-pilot] .pilot-vowels>p { font-size:1rem; max-width:35ch; }
  [data-design-pilot] .pilot-vowels .pilot-text-link { font-size:0.875rem; }
  [data-design-pilot] .pilot-home-paths { margin-top:56px; }
  [data-design-pilot] .pilot-section-heading h2 { font-size:2rem; margin-bottom:36px; }
  [data-design-pilot] .pilot-path-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
  [data-design-pilot] .pilot-path-grid article { position:relative; padding-left:48px; }
  [data-design-pilot] .pilot-number { position:absolute; left:0; top:0; color:var(--accent); font-size:0.875rem; font-weight:600; }
  [data-design-pilot] .pilot-path-grid h3 { font-size:1.5rem; margin-bottom:12px; }
  [data-design-pilot] .pilot-path-grid p { max-width:42ch; margin-bottom:20px; }
  [data-design-pilot] .pilot-path-grid a,[data-design-pilot] .pilot-reference-links nav a { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); min-height:56px; padding-block:12px; font-size:1.0625rem; text-decoration:none; font-weight:550; }
  [data-design-pilot] .pilot-path-grid a span,[data-design-pilot] .pilot-reference-links a span { color:var(--accent); }
  [data-design-pilot] .pilot-reference-links { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:64px; padding-top:40px; border-top:1px solid var(--line); }
  [data-design-pilot] .pilot-reference-links h2 { font-size:1.75rem; }

  /* Character guide: an open teaching spread and a quiet contents rail. */
  [data-design-pilot] .kg-page { max-width:1140px; position:relative; }
  [data-design-pilot] .kg-page>.universe-breadcrumbs { font-size:0.875rem; margin-bottom:24px; }
  [data-design-pilot] .kg-intro { padding-right:190px; }
  [data-design-pilot] .kg-intro>.eyebrow { display:none; }
  [data-design-pilot] .kg-intro h1 { font-size:2.75rem; margin-bottom:18px; line-height:1.15; }
  [data-design-pilot] .kg-answer { font-size:1.125rem; line-height:1.65; max-width:65ch; margin-bottom:20px; }
  [data-design-pilot] .kg-facts-row { gap:18px; margin-bottom:28px; }
  [data-design-pilot] .kg-facts { gap:10px 24px; }
  [data-design-pilot] .kg-facts dt { font-size:0.875rem; }
  [data-design-pilot] .kg-facts dd { font-size:1.0625rem; }
  [data-design-pilot] .kg-set-box { border:0; border-radius:0; background:none; padding:0; font-size:0.9375rem; font-weight:500; }
  [data-design-pilot] .kg-set-box:has(input:checked) { border:0; box-shadow:none; background:transparent; color:var(--accent); }
  [data-design-pilot] .kg-set-line { font-size:0.875rem; line-height:1.5; }
  html.kg-js [data-design-pilot] .kg-page .kg-lead-main [data-kg-set] { grid-template-columns:1fr; width:100%; gap:4px; padding-top:12px; border-top:1px solid var(--line); }
  [data-design-pilot] .pilot-toc { position:absolute; right:0; top:32px; width:160px; margin:0; padding:0 0 0 24px; border:0; border-left:1px solid var(--line); border-radius:0; background:none; }
  [data-design-pilot] .pilot-toc>summary { font-size:0.875rem; margin-bottom:8px; color:var(--muted); cursor:pointer; }
  [data-design-pilot] .pilot-toc .kg-jump-links { display:flex; flex-direction:column; gap:0; }
  [data-design-pilot] .pilot-toc .kg-jump-links a { justify-content:flex-start; font-size:0.9375rem; min-height:40px; text-decoration:none; }
  [data-design-pilot] .kg-lead { border:0; border-block:1px solid var(--line); border-radius:0; background:none; padding:28px 0 24px; }
  [data-design-pilot] .kg-lead-title { font-size:1.75rem; margin-bottom:28px; }
  [data-design-pilot] .kg-lead-grid { grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:56px; }
  [data-design-pilot] .kg-lead-main { justify-items:start; row-gap:16px; max-width:440px; }
  [data-design-pilot] .kg-lead-model { margin:0; justify-self:start; }
  [data-design-pilot] .kg-model-art svg { width:264px; height:264px; }
  [data-design-pilot] .kg-lead-model figcaption { font-size:0.875rem; margin-top:12px; }
  html.kg-js [data-design-pilot] .kg-lead-main [data-kg-stepper] { display:flex; flex-wrap:wrap; gap:8px; }
  [data-design-pilot] .kg-stepper .button { font-size:0.9375rem; min-height:46px; padding:10px 14px; flex:0 1 auto; }
  [data-design-pilot] .kg-step-status { font-size:0.875rem; line-height:1.5; min-height:0; text-align:left; margin:0; }
  [data-design-pilot] .kg-legend { font-size:0.875rem; text-align:left; }
  [data-design-pilot] .pilot-loop-note { margin-bottom:28px; }
  [data-design-pilot] .pilot-loop-note h3 { font-size:1.5rem; margin-bottom:12px; }
  [data-design-pilot] .pilot-loop-note p { font-size:1.125rem; line-height:1.65; max-width:38ch; }
  [data-design-pilot] .kg-lead-alt-title { font-size:0.875rem; letter-spacing:0; text-transform:none; font-weight:600; margin-bottom:12px; }
  [data-design-pilot] .kg-alike-row { gap:28px; }
  [data-design-pilot] .kg-alike { border:0; border-radius:0; background:none; padding:0; }
  [data-design-pilot] .kg-alike-text,[data-design-pilot] .kg-alike-text>span { font-size:0.9375rem; line-height:1.5; }
  [data-design-pilot] .kg-hook-line { margin-top:28px; background:var(--surface-muted); border:0; border-radius:6px; font-size:1rem; padding:18px 20px; }
  [data-design-pilot] .pilot-more-activities { display:block; margin:16px 0 36px; border:0; padding:0; background:none; font-size:0.875rem; }
  [data-design-pilot] .pilot-more-activities summary { min-height:44px; padding:10px 0; cursor:pointer; color:var(--muted); }
  [data-design-pilot] .pilot-more-activities .hiragana-subnav { padding:12px 0; }
  [data-design-pilot] .kg-section { margin-top:48px; padding-top:24px; }
  [data-design-pilot] .kg-section p,[data-design-pilot] .kg-section li { font-size:1.0625rem; line-height:1.7; }
  [data-design-pilot] .kg-section h2 { font-size:1.75rem; }
  [data-design-pilot] .kg-section .kg-small,[data-design-pilot] .kg-page .kg-small { font-size:0.875rem; line-height:1.55; }
  [data-design-pilot] .kg-words { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 40px; max-width:1000px; margin-top:20px; }
  [data-design-pilot] .kg-word { border:0; border-top:1px solid var(--line); border-radius:0; padding:24px 0; gap:6px; }
  [data-design-pilot] .kg-word>.jp { font-size:1.875rem; white-space:normal; }
  [data-design-pilot] .kg-word>strong { font-size:1.0625rem; }
  [data-design-pilot] .kg-word>span:not(.jp) { font-size:1rem; }
  [data-design-pilot] .kg-word .kg-readable { font-size:0.8125rem!important; }
  [data-design-pilot] .kg-face figcaption { font-size:0.875rem; line-height:1.45; }
  [data-design-pilot] .kg-mistake { border-color:var(--line); border-left-color:var(--accent); }
  [data-design-pilot] .kana-audio-note { font-size:0.8125rem; color:var(--muted); }

  /* Chart: keep the matrix and docked panel, clarify typography and grouping. */
  [data-design-pilot].chart-lab { --cell-w:58px; --cell-h:66px; --glyph:36px; --gap:6px; }
  [data-design-pilot] #main.chart-page { padding-top:36px; }
  [data-design-pilot] .page-head { display:grid; grid-template-columns:1fr; grid-template-areas:"title" "lede" "toolbar" "status"; gap:14px; margin-bottom:26px; }
  [data-design-pilot] .page-title h1 { font-size:2.5rem; white-space:normal; }
  [data-design-pilot] .page-title .lede { font-size:1.125rem; line-height:1.6; max-width:70ch; }
  [data-design-pilot] .toolbar { justify-content:flex-start; gap:8px; }
  [data-design-pilot] .seg { border-radius:6px; background:var(--surface-muted); border-color:var(--line); }
  [data-design-pilot] .seg span { font-size:0.875rem; min-height:38px; display:flex; align-items:center; border-radius:4px; }
  [data-design-pilot] .toggle,[data-design-pilot] .menu>summary,[data-design-pilot] .field select { min-height:44px; font-size:0.875rem; border-radius:6px; }
  [data-design-pilot] .field { font-size:0.875rem; }
  [data-design-pilot] .chart-area { border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; padding:26px 0; }
  [data-design-pilot] .blocks { justify-content:space-between; gap:28px; }
  [data-design-pilot] .side { gap:28px; }
  [data-design-pilot] .block-title { font-size:0.875rem; color:var(--ink); letter-spacing:0; text-transform:none; margin-bottom:8px; }
  [data-design-pilot] .block-note { font-size:0.875rem; line-height:1.55; margin-top:14px; }
  [data-design-pilot] .cell { border-color:transparent; border-bottom:1px solid var(--line); border-radius:4px; background:var(--surface-muted); }
  [data-design-pilot] .cell.is-empty { background:none; border-color:transparent; }
  [data-design-pilot] .cell.is-current { background:#e8f1f7; border:1px solid #466a89; box-shadow:inset 0 0 0 1px #466a89; }
  [data-design-pilot] .cell.is-selected { background:var(--accent-wash); }
  [data-design-pilot] .romaji { font-size:0.875rem; line-height:1.2; font-weight:500; }
  [data-design-pilot] .col-head,[data-design-pilot] .row-head { font-size:0.8125rem; }
  [data-design-pilot] .lookalikes .chip { border-radius:5px; }
  [data-design-pilot] .kana-dialog { background:#fff; border-color:var(--line-strong); box-shadow:0 -6px 28px #1d304414; border-radius:10px 10px 0 0; }
  [data-design-pilot] .kd-title { font-size:1.5rem; }
  [data-design-pilot] .kd-btn { border-radius:6px; border-color:var(--line-strong); min-height:44px; }
  [data-design-pilot] .kd-controls .kd-btn { font-size:0.875rem; }
  [data-design-pilot] .kd-controls .kd-play { background:var(--accent); color:#fff; }
  [data-design-pilot] .kd-info p { font-size:1.0625rem; line-height:1.6; }
  [data-design-pilot] .kd-info h3 { font-size:0.875rem; text-transform:none; letter-spacing:0; }
  [data-design-pilot] .kd-progress,[data-design-pilot] .kd-set-line { font-size:0.875rem; }
  [data-design-pilot] .selbar { background:var(--ink); }
  [data-design-pilot] :is(.reading-guide,.downloads,.about,.faq,.next) { margin-top:48px; }
  [data-design-pilot] :is(.reading-guide,.downloads,.about,.faq,.next) h2 { font-size:1.75rem; margin-bottom:16px; }
  [data-design-pilot] .faq h3 { font-size:1.25rem; margin-top:24px; }
  [data-design-pilot] .about p,[data-design-pilot] .faq p { font-size:1.0625rem; line-height:1.7; }

  /* Practice: one distinct task surface, an open supporting column. */
  [data-design-pilot] #main:has(.practice-page) { max-width:1160px; padding-top:40px; }
  [data-design-pilot] #main .practice-page { --practice-green:#14675c; --practice-rust:#a43832; }
  [data-design-pilot] #main .practice-heading { margin-bottom:28px; }
  [data-design-pilot] #main .practice-heading h1 { font-size:2.5rem; }
  [data-design-pilot] #main .practice-heading>p { font-size:1.125rem; line-height:1.6; margin-top:14px; }
  [data-design-pilot] #main .practice-layout { grid-template-columns:minmax(0,1fr) 260px; gap:48px; }
  [data-design-pilot] #main .practice-page button,[data-design-pilot] #main .practice-page select,[data-design-pilot] #main .practice-page input { font-size:1rem; border-radius:6px; border-color:var(--line-strong); color:var(--ink); background:#fff; min-height:46px; padding:10px 14px; }
  [data-design-pilot] #main .practice-page button:is([aria-pressed=true],[aria-checked=true],.is-primary:not(:disabled)) { background:var(--accent); color:#fff; border-color:var(--accent); }
  [data-design-pilot] #main .practice-toolbar { margin-bottom:18px; }
  [data-design-pilot] #main .practice-toolbar strong { font-size:0.9375rem; font-weight:600; }
  [data-design-pilot] #main .practice-stage { border:0; background:var(--surface-muted); border-radius:8px; box-shadow:none; padding:24px; min-height:420px; }
  [data-design-pilot] #main .practice-progress { font-size:0.875rem; color:var(--muted); }
  [data-design-pilot] #main .practice-stage progress { height:3px; margin-block:14px 20px; accent-color:var(--accent); }
  [data-design-pilot] #main .practice-prompt-label { font-size:1rem; color:var(--ink-soft); }
  [data-design-pilot] #main .practice-prompt { height:144px; margin-block:8px 20px; }
  [data-design-pilot] #main .practice-choices { gap:12px; }
  [data-design-pilot] #main .practice-choices button { font-size:1.3125rem; min-height:58px; }
  [data-design-pilot] #main .practice-choices small { font-size:0.8125rem; color:var(--muted); }
  [data-design-pilot] #main .practice-feedback { font-size:1.0625rem; margin-top:20px; color:var(--accent-dark); }
  [data-design-pilot] #main .practice-feedback.is-miss { color:#a43832; }
  [data-design-pilot] #main .practice-round-options { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font-size:0.875rem; gap:12px; }
  [data-design-pilot] #main .practice-shortcuts { font-size:0.875rem; margin-top:14px; }
  [data-design-pilot] #main .practice-side { border-left:1px solid var(--line); padding-left:28px; }
  [data-design-pilot] #main .practice-side-note { font-size:1rem; line-height:1.65; margin-block:28px; }
  [data-design-pilot] #main .practice-side-note h2 { font-size:1.25rem; line-height:1.3; margin-bottom:14px; }
  [data-design-pilot] #main .practice-study { border:0; background:var(--surface-muted); border-radius:6px; }
  [data-design-pilot] #main .practice-study summary { font-size:0.9375rem; }
  [data-design-pilot] #main .practice-links { font-size:0.9375rem; }
  [data-design-pilot] #main .practice-print-controls { margin-top:48px; padding-top:32px; border-top:1px solid var(--line); }
  [data-design-pilot] #main .practice-print-controls p { max-width:65ch; }

  @media(max-width:1100px) {
    [data-design-pilot] .pilot-home-intro,[data-design-pilot] .pilot-path-grid,[data-design-pilot] .pilot-reference-links { gap:40px; }
    [data-design-pilot] .pilot-vowels { padding-left:28px; }
    [data-design-pilot] .kg-lead-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; }
    [data-design-pilot] .kg-intro { padding-right:0; }
    [data-design-pilot] .pilot-toc { position:static; width:auto; border:0; padding:0; margin:0 0 16px; }
    [data-design-pilot] .pilot-toc>summary { min-height:44px; display:flex; align-items:center; gap:10px; margin:0; }
    [data-design-pilot] .pilot-toc>summary::after { content:'+'; }
    [data-design-pilot] .pilot-toc[open]>summary::after { content:'−'; }
    [data-design-pilot] .pilot-toc .kg-jump-links { flex-direction:row; flex-wrap:wrap; gap:4px 20px; }
    [data-design-pilot] #main .practice-layout { grid-template-columns:minmax(0,1fr) 230px; gap:28px; }
  }
  @media(max-width:760px) {
    [data-design-pilot] .shell,[data-design-pilot].chart-lab .shell { width:calc(100% - 40px); }
    [data-design-pilot] #main,[data-design-pilot] #main.chart-page,[data-design-pilot] #main:has(.practice-page) { padding-top:28px; padding-bottom:48px; }
    [data-design-pilot] .site-header { min-height:72px; flex-wrap:wrap; gap:12px; padding-block:12px; }
    [data-design-pilot] .brand { font-size:1.4375rem; }
    [data-design-pilot] .main-nav { flex-basis:100%; gap:12px 28px; flex-wrap:wrap; font-size:1rem; padding-top:12px; border-top:1px solid var(--line); }
    [data-design-pilot] .pilot-menu-toggle { margin-left:auto; }
    [data-design-pilot] .main-nav::after { display:none; }
    html.pilot-js [data-design-pilot] .main-nav:not(.is-open) { display:none; }
    [data-design-pilot] .pilot-home-intro { grid-template-columns:1fr; gap:36px; padding-top:12px; padding-bottom:36px; }
    [data-design-pilot] .pilot-home-intro h1 { font-size:2.75rem; margin-bottom:20px; }
    [data-design-pilot] .pilot-home-lede { font-size:1.125rem; line-height:1.65; }
    [data-design-pilot] .pilot-vowels { border-left:0; border-top:1px solid var(--line); padding:28px 0 0; }
    [data-design-pilot] .pilot-vowels h2 { margin-bottom:16px; }
    [data-design-pilot] .pilot-vowel-row { max-width:420px; }
    [data-design-pilot] .pilot-vowel-row .glyph { width:48px; height:48px; }
    [data-design-pilot] .pilot-home-paths { margin-top:36px; }
    [data-design-pilot] .pilot-section-heading h2 { font-size:1.75rem; margin-bottom:28px; }
    [data-design-pilot] .pilot-path-grid { grid-template-columns:1fr; gap:36px; }
    [data-design-pilot] .pilot-path-grid article { padding-left:36px; }
    [data-design-pilot] .pilot-path-grid h3 { font-size:1.4375rem; }
    [data-design-pilot] .pilot-reference-links { grid-template-columns:1fr; gap:0; margin-top:40px; padding-top:32px; }
    [data-design-pilot] .site-footer { flex-wrap:wrap; }
    [data-design-pilot] .site-footer p { display:none; }
    [data-design-pilot] .pilot-review { gap:8px 20px; }
    [data-design-pilot] .pilot-review>span { flex-basis:100%; }
    [data-design-pilot] .kg-page>.universe-breadcrumbs { margin-bottom:14px; }
    [data-design-pilot] .pilot-toc { margin-bottom:20px; }
    [data-design-pilot] .pilot-toc .kg-jump-links { gap:0 16px; }
    [data-design-pilot] .pilot-toc .kg-jump-links a { font-size:0.875rem; }
    [data-design-pilot] .kg-intro h1 { font-size:2rem; margin-bottom:16px; }
    [data-design-pilot] .kg-answer { font-size:1.0625rem; line-height:1.65; }
    [data-design-pilot] .kg-facts { gap:8px 18px; }
    [data-design-pilot] .kg-facts-row { margin-bottom:24px; }
    [data-design-pilot] .kg-lead { padding-block:24px; }
    [data-design-pilot] .kg-lead-title { display:block; position:static; clip:auto; clip-path:none; width:auto; height:auto; overflow:visible; white-space:normal; font-size:1.5625rem; margin-bottom:20px; }
    [data-design-pilot] .kg-lead-grid { grid-template-columns:1fr; gap:32px; }
    [data-design-pilot] .kg-lead-main { width:100%; max-width:none; display:grid; grid-template-columns:1fr; }
    [data-design-pilot] .kg-lead-main>* { grid-column:auto; grid-row:auto; }
    [data-design-pilot] .kg-lead-model { justify-self:center; }
    [data-design-pilot] .kg-model-art svg { width:224px; height:224px; }
    html.kg-js [data-design-pilot] .kg-page .kg-lead-main [data-kg-stepper] { display:grid; grid-column:1; grid-row:auto; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
    [data-design-pilot] .kg-stepper [data-kg-play] { grid-column:1 / -1; width:100%; }
    [data-design-pilot] .kg-stepper [data-kg-reset] { grid-column:auto; }
    [data-design-pilot] .kg-stepper .button { font-size:0.875rem; padding-inline:6px; white-space:normal; }
    [data-design-pilot] .kg-step-status { text-align:center; }
    [data-design-pilot] .kg-lead-side { width:100%; }
    [data-design-pilot] .pilot-loop-note h3 { font-size:1.4375rem; }
    [data-design-pilot] .pilot-loop-note p { font-size:1.0625rem; }
    [data-design-pilot] .kg-alike-row { gap:24px; }
    [data-design-pilot] .kg-alike { flex:1; }
    [data-design-pilot] .kg-hook { margin-top:24px; font-size:1rem; }
    [data-design-pilot] .kg-section h2 { font-size:1.5625rem; }
    [data-design-pilot] .kg-words { grid-template-columns:1fr; }
    [data-design-pilot].chart-lab { --head:20px; --gap:4px; --cell-h:64px; --glyph:34px; }
    [data-design-pilot] .page-head { display:grid; gap:14px; margin-bottom:20px; }
    [data-design-pilot] .page-title h1 { font-size:2rem; }
    [data-design-pilot] .page-title .lede { display:block; font-size:1.0625rem; }
    [data-design-pilot] .toolbar { position:relative; padding:0; margin:0; gap:6px; }
    [data-design-pilot] .toolbar .seg span,[data-design-pilot] .toolbar .toggle { font-size:0.875rem; }
    [data-design-pilot] .toolbar .toggle { padding:10px; }
    [data-design-pilot] .tb-more { right:0; width:min(300px,100%); max-height:70vh; }
    [data-design-pilot] .chart-area { margin:0; padding:24px 0; }
    [data-design-pilot] .blocks { flex-direction:column; align-items:stretch; gap:36px; }
    [data-design-pilot] .grid { grid-template-columns:var(--head) repeat(var(--cols),minmax(0,1fr)); }
    [data-design-pilot] .block-title { font-size:0.875rem; }
    [data-design-pilot] .romaji { font-size:0.875rem; }
    [data-design-pilot] #main .practice-heading { margin-bottom:24px; }
    [data-design-pilot] #main .practice-heading h1 { font-size:2rem; }
    [data-design-pilot] #main .practice-heading>p { font-size:1.0625rem; }
    [data-design-pilot] #main .practice-layout { grid-template-columns:1fr; gap:32px; }
    [data-design-pilot] #main .practice-stage { padding:18px 14px; min-height:0; }
    [data-design-pilot] #main .practice-toolbar { gap:12px; }
    [data-design-pilot] #main .practice-prompt { height:128px; margin-bottom:16px; }
    [data-design-pilot] #main .practice-stage progress { margin-block:12px; }
    [data-design-pilot] #main .practice-side { border-left:0; border-top:1px solid var(--line); padding:28px 0 0; }
    [data-design-pilot] #main .practice-choices { gap:10px; }
    [data-design-pilot] #main .practice-choices button { font-size:1.25rem; min-height:56px; }
    [data-design-pilot] #main .practice-round-options { flex-wrap:wrap; }
  }
  @media (max-width:760px) and (max-height:680px) {
    [data-design-pilot] #main:has(.practice-page) { padding-top:16px; }
    [data-design-pilot] #main .practice-heading { margin-bottom:12px; }
    [data-design-pilot] #main .practice-heading>p { display:none; }
    [data-design-pilot] #main .practice-toolbar { margin-bottom:12px; }
    [data-design-pilot] #main .practice-stage { padding:12px; }
    [data-design-pilot] #main .practice-stage progress { margin-block:6px; }
    [data-design-pilot] #main .practice-prompt { height:100px; margin-bottom:8px; }
    [data-design-pilot] #main .practice-choices button { min-height:48px; }
  }
  @media (orientation:landscape) and (max-height:520px) {
    [data-design-pilot]:has(.practice-page) .site-header { min-height:56px; padding-block:6px; }
    [data-design-pilot]:has(.practice-page) .brand { font-size:1.375rem; }
    [data-design-pilot] #main:has(.practice-page) { padding-top:8px; }
    [data-design-pilot] #main .practice-heading { margin-bottom:6px; }
    [data-design-pilot] #main .practice-heading h1 { font-size:1.5rem; }
    [data-design-pilot] #main .practice-heading>p { display:none; }
    [data-design-pilot] #main .practice-toolbar { margin-bottom:6px; }
    [data-design-pilot] #main .practice-stage { min-height:206px; padding:8px 14px; }
    [data-design-pilot] #main .practice-progress { margin-bottom:0; }
    [data-design-pilot] #main .practice-stage progress { margin-block:0 4px; }
    [data-design-pilot] #main .practice-prompt { height:104px; margin-bottom:0; }
    [data-design-pilot] #main .practice-prompt .glyph { width:100px; height:100px; }
    [data-design-pilot] #main .practice-q.is-word .practice-prompt { height:auto; min-height:0; padding-block:2px; margin-block:0; }
    [data-design-pilot] #main .practice-q.is-word .practice-prompt .glyph { width:100%; height:auto; max-height:64px; }
    [data-design-pilot] #main .practice-choices { gap:8px; }
    [data-design-pilot] #main .practice-choices button { min-height:48px; }
  }
  @media(max-width:360px) {
    [data-design-pilot] .shell,[data-design-pilot].chart-lab .shell { width:calc(100% - 32px); }
    [data-design-pilot] .pilot-home-intro h1 { font-size:2.4375rem; }
    [data-design-pilot] .pilot-vowel-row { gap:8px; }
    [data-design-pilot] .pilot-vowel-row .glyph { width:42px; height:42px; }
    [data-design-pilot] .toolbar .toggle { padding-inline:8px; }
    [data-design-pilot] .toolbar .seg span { padding-inline:7px; }
  }
}
@media print {
  .pilot-review,.pilot-menu-toggle,.pilot-toc,.pilot-more-activities { display:none!important; }
  .pilot-vowel-row { display:flex; gap:20px; }
  .pilot-vowel-row a { display:grid; justify-items:center; text-decoration:none; }
  .pilot-vowel-row .glyph { width:48px; height:48px; fill:none; stroke:#111; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
  .pilot-home-intro h1 { font-size:28pt; }
  .pilot-home-intro,.pilot-home-paths,.pilot-reference-links { margin-bottom:24pt; }
  .pilot-number { margin-right:8pt; }
  .pilot-path-grid article { break-inside:avoid; }
}

/* Chart, wide screens (14 Oct 2026): title and toolbar share a row and the cells are a little shorter, so the whole
   matrix is on the first screen. Screen only. */
@media screen and (min-width: 1100px) {
  [data-design-pilot] #main.chart-page { padding-top: 24px; }
  [data-design-pilot] .page-head { grid-template-columns: auto 1fr; grid-template-areas: "title toolbar" "lede lede" "status status"; gap: 6px 24px; margin-bottom: 16px; align-items: center; }
  [data-design-pilot] .page-title h1 { font-size: 2.125rem; }
  [data-design-pilot] .page-title .lede { max-width: none; font-size: 1.0625rem; }
  [data-design-pilot] .toolbar { justify-content: flex-end; }
  [data-design-pilot].chart-lab { --cell-h: 54px; --gap: 4px; --glyph: 32px; }
}

/* Home, print (14 Oct 2026): compact spacing so the page is one sheet in Letter and A4. */
@media print {
  body[data-pilot-family="home"] .pilot-home-intro h1 { font-size: 22pt !important; margin-bottom: 6px !important; }
  body[data-pilot-family="home"] .pilot-home-intro { padding: 0 !important; gap: 14px !important; margin: 0 0 6px !important; }
  body[data-pilot-family="home"] .pilot-home-lede { font-size: 10.5pt !important; margin-bottom: 6px !important; }
  body[data-pilot-family="home"] .pilot-home-paths, body[data-pilot-family="home"] .pilot-reference-links { margin-top: 8px !important; padding-top: 6px !important; }
  body[data-pilot-family="home"] .pilot-section-heading { margin-bottom: 6px !important; }
  body[data-pilot-family="home"] .pilot-section-heading h2, body[data-pilot-family="home"] .pilot-reference-links h2 { font-size: 15pt !important; margin: 0 !important; }
  body[data-pilot-family="home"] .pilot-path-grid article { padding: 6px 8px !important; }
  body[data-pilot-family="home"] .pilot-vowels { padding: 8px !important; }
  body[data-pilot-family="home"] .scope-note { font-size: 8pt !important; margin-top: 6px !important; }
  body[data-pilot-family="home"] #main { padding-top: 0 !important; padding-bottom: 0 !important; }
}