:root {
  --orange: #d85a30;
  --orange-2: #c24e19;
  --brown: #2c1a0e;
  --brown-soft: #574437;
  --beige: #faf6ef;
  --bg: #f0ebe3;
  --line: #e3d8c8;
  --surface: #fff;
  --text: #2c1a0e;
  --muted: #6b5a47;
  --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: Unbounded, sans-serif;
  --jp: "Klee One", serif;
}

* { letter-spacing: 0 !important; }
html { background: var(--bg); color: var(--text); }
body { font: 16px/1.55 var(--font); }
.site-hdr { width: 100%; max-width: 100vw; overflow-x: hidden; }
.site-hdr-main-inner { width: 100%; max-width: 100vw; }
button, input { font: inherit; }
.jp, [lang="ja"] { font-family: var(--jp); }
ruby { font-family: var(--jp); ruby-align: center; ruby-position: over; white-space: nowrap; }
rt { color: #7a4a2c; font: 400 .48em/1 var(--jp); }

.wrap { max-width: 980px; padding: 22px 18px 72px; }
.page-intro { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--line); }
.brand h1 { margin: 0; font: 800 32px/1.5 var(--display); text-wrap: balance; }
.brand .kanji { display: inline-block; margin-left: 10px; color: var(--orange); font: 600 27px/1.5 var(--jp); }
.brand small { display: block; margin-top: 4px; color: var(--brown-soft); font-size: 14px; }
.lede { max-width: 68ch; margin: 12px 0 0; color: var(--brown-soft); font-size: 15.5px; }

nav.tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 5px;
  overflow-x: auto;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--beige);
  scrollbar-width: none;
}
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--brown-soft);
  font: 600 13px/1.35 var(--font);
  white-space: nowrap;
}
nav.tabs button:hover { border-color: transparent; background: #fff; color: var(--brown); }
nav.tabs button[aria-selected="true"] { border-color: var(--orange); background: var(--orange); color: #fff; }

.section-heading { max-width: 72ch; margin: 0 0 20px; }
.section-heading h2 { margin: 0; font: 700 21px/1.4 var(--display); text-wrap: balance; }
.section-heading > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.section-kicker { margin: 0 0 5px; color: var(--orange-2); font-size: 12px; font-weight: 700; }
.catalog-heading { display: flex; align-items: flex-end; justify-content: space-between; max-width: none; gap: 24px; }
.catalog-heading > p { max-width: 42ch; }

#view-say .secret, #view-persona .secret { padding: 15px 17px; border: 1px solid #e9c7b6; border-radius: 8px; background: #fbeee4; color: var(--brown-soft); }
#view-say .secret b, #view-persona .secret b { color: var(--brown); font: 700 14px/1.5 var(--font); }
.controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 12px; }
.cgroup .lbl { font-size: 11.5px; }
.chips { display: flex; width: fit-content; max-width: 100%; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--beige); }
.chip { min-height: 35px; padding: 6px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--brown-soft); font: 600 12px/1.3 var(--font); }
.chip:hover { border-color: transparent; background: #fff; }
.chip[aria-pressed="true"] { border-color: var(--orange); background: var(--orange); color: #fff; }
input.search { min-height: 42px; max-width: none; padding: 8px 11px; border-radius: 7px; font: 14px/1.4 var(--font); }

#view-say .sec-title, #view-persona .sec-title { margin: 25px 0 11px; font: 700 17px/1.45 var(--display); }
#view-say .sec-hint, #view-persona .sec-hint { color: var(--muted); font: 400 13px/1.5 var(--font); }
.tier-group, .persona-group { overflow: hidden; margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.tier-group > summary, .persona-group > summary { cursor: pointer; list-style: none; }
.tier-group > summary::-webkit-details-marker, .persona-group > summary::-webkit-details-marker { display: none; }
.tier-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; gap: 10px; align-items: center; padding: 14px 15px; }
.tier-group > summary::after, .persona-group > summary::after { content: "+"; color: var(--orange-2); font-size: 22px; line-height: 1; }
.tier-group[open] > summary::after, .persona-group[open] > summary::after { content: "−"; }
.tier-group > summary > span:first-child { display: grid; gap: 2px; }
.tier-group > summary b { font-size: 15px; }
.tier-group > summary small { color: var(--muted); font-size: 12px; }
.group-count { min-width: 26px; padding: 2px 7px; border-radius: 5px; background: var(--beige); color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; }
.tier-group > summary .group-count { grid-column: 2; grid-row: 1; }
.tier-group > summary::after { grid-column: 3; grid-row: 1; text-align: center; }
.tier-group > .grid-cards, .persona-group > .grid-cards { padding: 0 14px 14px; }
.grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pc { min-width: 0; min-height: 178px; padding: 15px; gap: 8px; border-radius: 8px; box-shadow: none; }
.pc:hover { transform: translateY(-1px); box-shadow: none; }
.pc .w { min-height: 49px; font-size: 27px; line-height: 1.5; }
.pc .kana { display: block; margin: -5px 0 0; color: var(--muted); font: 12px/1.35 var(--jp); }
.pc .gloss { color: var(--brown); font: 700 13px/1.45 var(--font); }
.pc .summary { color: var(--brown-soft); font: 13px/1.5 var(--font); }
.pc .meta { margin-top: auto; }
.view:not(#view-kosoado) .badge, #dlg:not(.is-demonstrative) .badge { max-width: 100%; border-radius: 5px; white-space: normal; overflow-wrap: anywhere; }
.b-m, .b-f, .b-n { background: #eee9e0; color: var(--brown-soft); }

.avoid details { padding: 5px 15px 15px; border-radius: 8px; }
.avoid summary { font-size: 14px; }
.avoid details > p { max-width: 70ch; color: var(--brown-soft); }
.avoid .dcase { position: relative; margin: 0; padding: 15px 0 4px 22px; border-top: 1px solid var(--line); }
.avoid .dcase::before { content: ""; position: absolute; top: 22px; left: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.avoid .dcase .t { max-width: 70ch; margin-bottom: 8px; color: var(--brown); font-weight: 700; }
.avoid .ex { max-width: 72ch; margin: 7px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--beige); }
.avoid .ex .j { font-size: 16px; line-height: 1.85; }
.avoid .ex .r { color: var(--brown-soft); font: 13px/1.55 var(--font); }

#view-plural { --plural-ink: #221f1d; --plural-muted: #45413e; --plural-line: #d9dde1; --plural-subtle: #f6f7f8; scroll-margin-top: 16px; color: var(--plural-ink); }
.plural-principle { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr); gap: 24px; align-items: start; padding: 18px; border: 1px solid #df9c84; border-radius: 8px; background: #fff; }
.plural-principle > div:first-child { position: relative; padding-left: 36px; }
.plural-mark { position: absolute; top: 0; left: 0; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--orange); color: #fff; font-size: 12px; font-weight: 800; }
.plural-principle h3 { margin: 0; font: 700 16px/1.45 var(--display); }
.plural-principle p { margin: 6px 0 0; color: var(--plural-ink); font-size: 13.5px; line-height: 1.65; }
.plural-section { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.plural-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 8px; }
.plural-heading h3 { margin: 0; font: 700 19px/1.45 var(--display); }
.plural-heading p { max-width: 48ch; margin: 0; color: var(--plural-muted); font-size: 13.5px; }
.plural-suffix { display: grid; grid-template-columns: minmax(145px, .36fr) minmax(0, 1.64fr); gap: 28px; margin-top: 10px; padding: 18px; border: 1px solid var(--plural-line); border-radius: 8px; background: #fff; }
.plural-term { align-self: start; }
.plural-form { color: var(--orange-2); font-size: 30px; line-height: 1.6; }
.plural-term > span { display: block; color: var(--plural-muted); font: 700 11.5px/1.45 var(--font); }
.plural-copy h4, .plural-contrast h4, .plural-related h4 { margin: 0; color: var(--plural-ink); font-size: 15px; line-height: 1.5; }
.plural-copy > p, .plural-contrast > p, .plural-related p { max-width: 70ch; margin: 5px 0 0; color: var(--plural-ink); font-size: 13.5px; line-height: 1.65; }
.plural-copy dl { margin: 10px 0 12px; }
.plural-copy dl > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; }
.plural-copy dt { color: var(--brown); font-size: 11.5px; font-weight: 700; }
.plural-copy dd { margin: 0; color: var(--plural-muted); font-size: 12.5px; }
.plural-examples { display: grid; gap: 6px; }
.plural-example { padding: 9px 11px; border: 1px solid var(--plural-line); border-radius: 5px; background: var(--plural-subtle); }
.plural-example .j { font-size: 15.5px; line-height: 1.9; }
.plural-example .r { color: #383532; font: 12.5px/1.55 var(--font); }
.plural-contrasts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plural-contrast { min-width: 0; padding: 15px; border: 1px solid var(--plural-line); border-radius: 8px; background: #fff; }
.plural-contrast h4 { color: var(--orange-2); font-size: 18px; font-weight: 500; }
.plural-contrast .plural-example { margin-top: 10px; }
.plural-related { display: grid; grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr); gap: 24px; margin-top: 10px; padding: 16px; border: 1px solid var(--plural-line); border-radius: 8px; background: #fff; }
.plural-related-head h4 { color: var(--orange-2); font-size: 20px; font-weight: 500; }
.plural-related-head > span { display: block; margin-top: 2px; color: var(--plural-muted); font: 700 12px/1.5 var(--font); }
.plural-related .plural-example { margin-top: 10px; }

#view-kosoado { scroll-margin-top: 16px; }
.koso-subnav { display: flex; gap: 6px 18px; margin: 0 0 8px; padding: 0 0 12px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.koso-subnav::-webkit-scrollbar { display: none; }
.koso-subnav a { flex: 0 0 auto; min-height: 38px; padding: 8px 0 6px; border-bottom: 2px solid transparent; color: var(--brown-soft); font: 600 13px/1.5 var(--font); text-decoration: none; }
.koso-subnav a:hover { border-bottom-color: var(--orange); color: var(--brown); }
.koso-subnav a:focus-visible { border-radius: 4px; }
.koso-section { padding: 28px 0 6px; scroll-margin-top: 18px; }
.koso-section + .koso-section { margin-top: 16px; border-top: 1px solid var(--line); }
.koso-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.koso-heading h3 { margin: 0; font: 700 19px/1.45 var(--display); text-wrap: balance; }
.koso-heading p { max-width: 52ch; margin: 0; color: var(--muted); font-size: 13.5px; }
.kdesc { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kdesc div { min-width: 0; padding: 11px; border-radius: 8px; background: var(--surface); }
.kdesc .k { font-size: 24px; line-height: 1.45; }
.kdesc div > span:last-child { display: block; color: var(--brown-soft); font: 12px/1.45 var(--font); }

.family-group { overflow: hidden; margin-top: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.family-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.family-group > summary::-webkit-details-marker { display: none; }
.family-group > summary::after { content: "+"; color: var(--orange-2); font-size: 21px; line-height: 1; text-align: center; }
.family-group[open] > summary::after { content: "−"; }
.family-group > summary > span:first-child { display: flex; align-items: baseline; gap: 8px; }
.family-group > summary b { font-size: 14px; }
.family-group > summary small { color: var(--muted); font-size: 12px; }
.family-table-wrap { padding: 0 9px 9px; overflow-x: auto; }
.family-group .ktable { min-width: 650px; border-collapse: separate; border-spacing: 0; }
.family-group .ktable th, .family-group .ktable td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.family-group .ktable th:first-child, .family-group .ktable td:first-child { border-left: 1px solid var(--line); }
.family-group .ktable thead th { border-top: 1px solid var(--line); }
.family-group .ktable th { padding: 8px; background: var(--beige); }
.family-group .ktable th.axis { width: 155px; text-align: left; text-transform: none; }
.family-group .ktable td { min-width: 110px; padding: 9px 8px; border-radius: 0; background: #fff; }
.family-group .ktable td:hover { position: relative; z-index: 1; transform: none; outline: 2px solid var(--orange); outline-offset: -2px; }
.family-group .ktable td.is-empty { cursor: default; opacity: .45; }
.family-group .ktable td.is-empty:hover { outline: 0; }

#kosoado-space { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.spatial-model { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.spatial-model h4, .k-concept h4 { margin: 0; color: var(--brown); font: 700 15px/1.45 var(--font); }
.spatial-model > p, .k-concept-copy > p { max-width: 68ch; margin: 6px 0 0; color: var(--brown-soft); font-size: 13.5px; line-height: 1.6; }
.distance-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--beige); }
.distance-row > div { min-width: 0; padding: 8px 5px; text-align: center; }
.distance-row > div + div { border-left: 1px solid var(--line); }
.distance-row b { display: block; color: var(--orange-2); font-size: 19px; }
.distance-row span { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.k-examples { display: grid; gap: 6px; }
.k-example { padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--beige); }
.k-example .j { font-size: 16px; line-height: 1.9; }
.k-example .r { color: var(--brown-soft); font: 13px/1.5 var(--font); }

.k-concept { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr); gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.k-concept:first-child { padding-top: 0; border-top: 0; }
.k-concept-copy { position: relative; padding-left: 42px; }
.k-concept-copy .dk { position: absolute; top: -4px; left: 0; margin: 0; font-size: 25px; }
.comparison-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.comparison-list .k-concept { display: block; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.comparison-list .k-concept-copy { padding-left: 0; }
.comparison-list .k-examples { margin-top: 12px; }
.special-list { margin-top: 24px; padding-top: 4px; border-top: 1px solid var(--line); }
.persona-group { margin-top: 12px; }
.persona-group > summary { display: block; position: relative; }
.persona-group > summary::after { position: absolute; top: 24px; right: 16px; }
.phead { align-items: start; margin: 0; padding: 13px 56px 13px 13px; }
.pimg { width: 68px; height: 68px; border-radius: 8px; }
.phead .sec-title { margin: 2px 0 0; }
.pspeech { margin-top: 7px; border-radius: 0; background: transparent; color: var(--muted); }
.phead > .group-count { position: absolute; top: 47px; right: 47px; }

.cat { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); border-collapse: separate; border-spacing: 0; }
.cat th { position: static; background: var(--beige); }
.cat td { vertical-align: top; }
.cat .cw { line-height: 1.65; }

dialog.card:not(.is-demonstrative) { max-height: calc(100vh - 32px); overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
#dlg:not(.is-demonstrative) #cc { padding: 28px; }
#dlg:not(.is-demonstrative) #cc .hw { font-size: 38px; line-height: 1.5; }
#dlg:not(.is-demonstrative) #cc .close { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
#dlg:not(.is-demonstrative) #cc .ex { padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; }
#dlg:not(.is-demonstrative) #cc .ex .j { line-height: 1.9; }

/* Training follows the same component grammar as the suffix reference. */
.training-toolbar { display: grid; gap: 13px; margin-bottom: 14px; }
.training-mode-nav { display: flex; width: 100%; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--beige); }
.training-mode-nav button { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 8px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--brown-soft); cursor: pointer; font: 600 12px/1.3 var(--font); }
.training-mode-nav button[lang="ja"], .training-mode-nav .jp-label { font-family: var(--jp); font-size: 14px; }
.training-mode-nav button:hover { background: #fff; color: var(--brown); }
.training-mode-nav button[aria-pressed="true"] { background: var(--orange); color: #fff; }
.training-filters { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.training-advanced-control { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; color: var(--brown-soft); font-size: 13px; font-weight: 700; }
.training-advanced-control[hidden] { display: none; }
.training-advanced-control input { width: 18px; height: 18px; accent-color: var(--orange); }

.training-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--brown); }
.training-status { min-height: 44px; margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line); color: var(--muted); font: 700 12px/1.55 var(--font); }
.training-question { padding: 23px 24px 14px; outline: none; }
.training-context { max-width: 74ch; margin: 0 0 13px; color: var(--brown-soft); font: 15px/1.6 var(--font); }
.training-persona { display: flex; width: 116px; height: 116px; align-items: center; justify-content: center; margin: 0 0 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--beige); }
.training-persona[hidden] { display: none; }
.training-persona img { display: block; width: 100%; height: 100%; padding: 7px; object-fit: contain; }
.training-question.is-image-only { padding-bottom: 12px; }
.training-persona.is-image-only { width: min(240px, 100%); height: 240px; margin: 0 auto; border: 0; background: transparent; }
.training-persona.is-image-only img { padding: 0; }
.training-persona.is-scene { width: min(620px, 100%); height: auto; aspect-ratio: 4 / 3; margin-bottom: 18px; overflow: hidden; background: #fff; }
.training-persona.is-scene img { padding: 0; object-fit: cover; }
.training-prompt { max-width: 100%; min-height: 56px; color: var(--brown); font: 29px/1.7 var(--jp); overflow-wrap: anywhere; }
.training-prompt:not(.jp) { font: 600 20px/1.55 var(--font); }
.training-translation-toggle { min-height: 36px; margin-top: 6px; padding: 5px 0; border: 0; border-bottom: 1px dashed var(--muted); background: transparent; color: var(--muted); cursor: pointer; font: 700 13px var(--font); }
.training-translation { max-width: 70ch; margin: 10px 0 0; color: var(--muted); font: 14px/1.5 var(--font); }

.training-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 24px 16px; }
.training-option { min-width: 0; min-height: 58px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--beige); color: var(--brown); cursor: pointer; font: 16px/1.45 var(--font); text-align: left; overflow-wrap: anywhere; transition: border-color .15s, background-color .15s, color .15s; }
.training-option[lang="ru"] { font-family: var(--font); }
.training-option[lang="ja"] { font: 20px/1.5 var(--jp); }
.training-option:hover:not(:disabled) { border-color: var(--orange); background: #fbeee4; }
.training-option:disabled { cursor: default; opacity: 1; }
.training-option:disabled[data-result="neutral"] { border-color: var(--line); background: var(--beige); color: var(--brown); }
.training-option.is-correct { border-color: #2e7d43; background: #e7f1e9; color: #225f34; }
.training-option.is-wrong { border-color: #b33a32; background: #fbe9e7; color: #8e2c26; }

.training-response { min-height: 112px; padding: 0 24px 20px; }
.training-feedback { min-height: 52px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--brown-soft); font: 14px/1.6 var(--font); }
.training-feedback:empty { min-height: 0; padding-top: 0; border-top: 0; }
.training-feedback strong { display: block; margin-bottom: 3px; color: var(--brown); }
.training-feedback p { max-width: 72ch; margin: 0; }
.training-feedback.is-correct strong { color: #2e7d43; }
.training-feedback.is-wrong strong { color: #b33a32; }
.training-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.training-button, .training-restart { min-height: 42px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--brown); cursor: pointer; font: 700 13px/1.35 var(--font); }
.training-button { padding: 9px 13px; }
.training-button.is-primary { border-color: var(--orange); background: var(--orange); color: #fff; }
.training-restart { width: 42px; padding: 0; font-size: 20px; line-height: 1; }
.training-button:hover:not(:disabled), .training-restart:hover { border-color: var(--orange); }
.training-button.is-primary:hover:not(:disabled) { border-color: var(--orange-2); background: var(--orange-2); }
.training-button:disabled { cursor: default; opacity: .45; }

@media (max-width: 820px) {
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-heading { display: block; }
  .cat { display: block; overflow-x: auto; }
  #kosoado-space { grid-template-columns: 1fr; }
  .k-concept { grid-template-columns: 1fr; gap: 12px; }
  .plural-principle { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .wrap { padding-inline: 14px; }
  .brand h1 { font-size: 26px; }
  .brand .kanji { display: block; margin: 2px 0 0; font-size: 23px; }
  .controls, .grid-cards { grid-template-columns: 1fr; }
  .chips { width: 100%; overflow-x: auto; }
  .chip { flex: 1 0 auto; }
  .pc { min-height: 0; }
  .plural-heading { display: block; }
  .plural-heading p { margin-top: 5px; }
  .plural-suffix, .plural-related { grid-template-columns: 1fr; gap: 8px; }
  .plural-copy dl > div { grid-template-columns: 1fr; gap: 2px; }
  .plural-contrasts { grid-template-columns: 1fr; }
  .phead { gap: 11px; }
  .pimg { width: 54px; height: 54px; }
  .phead .sec-title { font-size: 15px; }
  #dlg:not(.is-demonstrative) #cc { padding: 22px 18px; }
  .koso-heading { display: block; }
  .koso-heading p { margin-top: 5px; }
  .koso-subnav { flex-wrap: wrap; gap: 2px 15px; }
  .koso-subnav a { min-height: 34px; padding-block: 6px 4px; }
  .kdesc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-group > summary > span:first-child { display: grid; gap: 1px; }
  .comparison-list { grid-template-columns: 1fr; }
  .distance-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .distance-row > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .distance-row > div:nth-child(4) { border-top: 1px solid var(--line); }
  .training-mode-nav { display: grid; grid-template-columns: 1fr; border-radius: 8px; }
  .training-mode-nav button { border-radius: 6px; }
  .training-filters { align-items: stretch; flex-direction: column; }
  .training-question { padding: 20px 15px 12px; }
  .training-prompt { font-size: 24px; }
  .training-persona.is-image-only { width: 190px; height: 190px; }
  .training-persona.is-scene { width: 100%; height: auto; }
  .training-options { grid-template-columns: 1fr; padding: 0 15px 13px; }
  .training-response { padding: 0 15px 17px; }
  .training-actions .training-button { flex: 1 1 135px; }
  .training-actions .training-restart { flex: 0 0 42px; }
}

@media (max-width: 360px) {
  .site-hdr-top-inner { padding-inline: 10px !important; gap: 7px !important; }
  .site-hdr-logo { gap: 7px !important; min-width: 0; }
  .site-hdr-logo img { width: 38px !important; height: 38px !important; }
  .site-hdr-logo-text .site-hdr-name { max-width: 120px; font-size: 11.5px !important; line-height: 1.2 !important; }
  .site-hdr-logo-text .site-hdr-tagline { display: none !important; }
  .site-hdr-btn { padding: 8px 9px !important; font-size: 11px !important; }
}