/* Тема «Комната» для внутренних страниц (поверх style.css) — тот же язык, что у героев и главной:
   чернильный контур, плоские заливки, бумага, мел, сплошная тень тушью вместо свечения.
   Заменяет neon.css: те же селекторы, другой вид. Логику страниц не трогает. */

:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
  --ink: #2b2523; --ink-soft: #5d5047;
  --paper: #fbf6ec; --paper-2: #f3ead7; --kraft: #efe0bd;
  --wall: #f1e6cf; --wall-2: #dcc59c; --wood: #7c4d33; --wood-2: #5b3826;
  --shu: #c8402a; --shu-2: #b8371f;
  --n1: #ffe07a; --n2: #ffb1cd; --n3: #a9ebfa; --leaf: #8fca7a; --leaf-2: #3f7a58;
  --chalk: #ece8dc; --board: #26392f;
  --bg: var(--wall);
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --muted: #6e5f53;
  --line: #2b2523;
  --accent: #2f6a8a;
  --accent-ink: #fff8ee;
  --accent-soft: #dcecf1;
  --good: #3f7a58; --good-soft: #dff0d2;
  --bad: #b8371f; --bad-soft: #fbe0d6;
  --m0: #f1e7d3; --m1: #f6d3c6; --m2: #f6e2a6; --m3: #d9eab9; --m4: #b5dcb7; --m5: #8fca7a;
  --radius: 14px;
  --shadow: 0 4px 0 var(--ink);
  --font-ui: 'Zen Kaku Gothic New', 'Manrope', system-ui, sans-serif;
  --font-display: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif;
  --font-kana: 'Klee One', 'Zen Kaku Gothic New', serif;
  --font-hand: 'Neucha', 'Zen Kaku Gothic New', sans-serif;
  --font-chalk: 'Caveat', 'Neucha', sans-serif;
  --spring: cubic-bezier(.3, 1.5, .5, 1);
  color-scheme: light;
}

/* один фон на всех страницах (разделы и тренажёры): бумага с бледным узором асаноха, как в edge.css */
html { background: var(--wall); }
body { background: var(--wall) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%237c4d33' stroke-opacity='.12' stroke-width='1.2'%3E%3Cpath d='M30 0L60 17.3V52L30 69.3 0 52V17.3Z M30 69.3V104 M0 52L30 34.7 60 52 M0 17.3L30 34.7 60 17.3 M30 0V34.7 M30 34.7L15 8.7 M30 34.7L45 8.7 M30 34.7L0 34.7 M30 34.7L60 34.7 M30 34.7L15 60.6 M30 34.7L45 60.6 M30 69.3L15 95.3 M30 69.3L45 95.3 M0 86.7L30 69.3 60 86.7'/%3E%3C/g%3E%3C/svg%3E"); color: var(--ink); font-family: var(--font-ui); }
/* японские слова не рвутся посередине («こんにち/は»): перенос — по пробелам; слишком длинное всё же переносится */
body { word-break: keep-all; overflow-wrap: break-word; }
a { color: var(--shu-2); }
::selection { background: var(--n1); }
.wrap { max-width: 1100px; padding-left: 20px; padding-right: 20px; } /* только бока: вертикальные отступы main из style.css остаются */
/* подвал всегда внизу, даже на коротких страницах */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }

/* ---------- Шапка: деревянная балка, на ней бумажные ярлыки ---------- */
.top { background: var(--wood); border-bottom: 3px solid var(--ink); box-shadow: inset 0 -8px 0 var(--wood-2); backdrop-filter: none; }
.top .wrap { height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--paper); }
.logo img { width: 42px; height: 40px; display: block; filter: drop-shadow(0 2px 0 rgba(43, 37, 35, .55)); }
.logo span:last-child { font: 700 31px/1 var(--font-chalk); color: var(--paper); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; transform: rotate(-2deg) translateY(-1px); }
.hanko { width: 38px; height: 38px; border-radius: 8px; background: var(--shu); color: var(--paper); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: 600 20px var(--font-kana); transform: rotate(-5deg); }
.nav { gap: 8px; padding: 4px 2px 7px; background: none; border: 0; }
.nav a { padding: 6px 14px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--ink); background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); transition: transform .3s var(--spring); }
.nav a:nth-child(2n) { transform: rotate(1deg); } .nav a:nth-child(2n+1) { transform: rotate(-1deg); }
.nav a:hover { color: var(--ink); background: var(--paper); transform: translateY(-2px); }
.nav a[aria-current="page"] { background: var(--n1); color: var(--ink); box-shadow: 0 3px 0 var(--ink); transform: rotate(-2deg) translateY(2px); }
.acc-btn { color: var(--ink); background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); border-radius: 9px; }
.acc-btn:hover { color: var(--ink); }
.acc-btn.signed { color: var(--ink); background: var(--n3); border-color: var(--ink); }

/* ---------- Типографика ---------- */
h1 { font: 900 clamp(30px, 4.6vw, 48px)/1.08 var(--font-display); letter-spacing: 0; margin-bottom: 12px; }
h2 { font: 700 clamp(21px, 2.6vw, 26px)/1.2 var(--font-display); letter-spacing: 0; }
h3 { letter-spacing: 0; }
.lead { color: var(--ink-soft); font: 19px/1.35 var(--font-hand); } /* как подводки разделов (.pr-lead, .pg-lead) */
.muted { color: var(--muted); }
.field-label { text-transform: none; letter-spacing: 0; font: 20px/1.1 var(--font-hand); color: #6a5446; }

/* ---------- Бумажные листы ---------- */
.card, .plan-step, .course-card, .row-card, .tool, .stat, details.card {
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: none; color: var(--ink); }
.card:hover { border-color: var(--ink); }
.tool, .course-card, a.stat, .row-card { transition: transform .3s var(--spring), box-shadow .3s; }
.tool:hover, .course-card:hover, a.stat:hover, a.row-card:hover { border-color: var(--ink); transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 7px 0 var(--ink); }

/* ---------- Кнопки — «печати»: контур тушью, сплошная тень, нажатие вдавливает ---------- */
.btn { background: var(--paper); border: 2.5px solid var(--ink); color: var(--ink); border-radius: 12px; font-weight: 700; box-shadow: 0 4px 0 var(--ink); transition: transform .25s var(--spring), box-shadow .25s; }
.btn:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); transition-duration: .06s; }
.btn.primary { background: var(--shu); color: #fff8ee; border-color: var(--ink); box-shadow: 0 4px 0 var(--ink), inset 0 -4px 0 var(--shu-2); }
.btn.primary:hover { box-shadow: 0 6px 0 var(--ink), inset 0 -4px 0 var(--shu-2); }
.btn.big { padding: 15px 26px; font-size: 18px; border-radius: 14px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: none; border-style: dashed; }
.btn.ghost:hover { box-shadow: none; background: rgba(255, 255, 255, .35); }
.btn:disabled { opacity: .45; transform: none; }
.seg { background: var(--kraft); border: 2px solid var(--ink); border-radius: 12px; }
.seg button { color: var(--ink-soft); border-radius: 9px; font-weight: 700; }
.seg button[aria-pressed="true"] { background: var(--n1); color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.chip, .lesson-chip { background: var(--paper); border: 2px solid var(--ink); color: var(--ink); }
.chip[aria-pressed="true"], .lesson-chip[aria-pressed="true"] { background: var(--n1); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.subnav { background: var(--kraft); border: 2px solid var(--ink); border-radius: 12px; }
.subnav a { color: var(--ink-soft); border-radius: 9px; font-weight: 700; }
.subnav a[aria-current="page"] { color: var(--ink); background: var(--n1); box-shadow: 0 2px 0 var(--ink); }
/* подменю «Курса» (Уроки · Азбука · Практика) — крупные бирки со значками, чтобы разделы было видно сразу */
.subnav[data-group="course"] { gap: 8px; padding: 6px; border-width: 2.5px; box-shadow: 0 3px 0 var(--ink); }
.subnav[data-group="course"] a { gap: 8px; padding: 0 16px 0 7px; font: 700 16px var(--font-ui); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); transition: transform .25s var(--spring); }
.subnav[data-group="course"] a::before { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 46% 52% 48%; border: 2px solid var(--ink); background: var(--paper-2); font: 600 17px/1 var(--font-kana); }
.subnav[data-group="course"] a[href="course.html"]::before { content: '課'; }
.subnav[data-group="course"] a[href="learn.html"]::before { content: 'あ'; }
.subnav[data-group="course"] a[href="practice.html"]::before { content: '練'; }
.subnav[data-group="course"] a:hover { transform: translateY(-2px); }
.subnav[data-group="course"] a[aria-current="page"] { background: var(--n1); transform: rotate(-1.5deg); }
.subnav[data-group="course"] a[aria-current="page"]::before { background: #fff; }
@media (max-width: 560px) {
  .subnav[data-group="course"] { width: 100%; }
  .subnav[data-group="course"] a { flex: 1 1 0; justify-content: center; gap: 6px; padding: 0 8px 0 5px; font-size: 15px; }
  .subnav[data-group="course"] a::before { width: 26px; height: 26px; font-size: 15px; }
}
.icon-btn { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.icon-btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.pill { background: var(--n3); color: var(--ink); border: 2px solid var(--ink); }
.pill.good { background: var(--leaf); color: var(--ink); border-color: var(--ink); }
input, select, textarea { background: #fffdf7; border: 2px solid var(--ink); color: var(--ink); border-radius: 10px; }

/* ---------- Полоски прогресса: контур тушью, заливка маркером ---------- */
.bar, .lesson-bar, .stage-bar, .test-progress { background: #fff8e6; border: 2px solid var(--ink); min-height: 12px; border-radius: 8px; overflow: hidden; }
.stage-bar i { border-right: 2px solid var(--ink); } .stage-bar i:last-child { border-right: 0; }
.bar i, .lesson-bar i, .test-progress i { background: var(--shu); box-shadow: none; }
.stage-bar .mature, .legend .mature { background: var(--leaf-2); box-shadow: none; }
.stage-bar .known, .legend .known { background: var(--leaf); }
.stage-bar .learning, .legend .learning { background: var(--n1); }

/* ---------- Тренажёр: задание — лист тетради в клетку ---------- */
.trainer { grid-template-columns: minmax(0, 760px); justify-content: center; position: relative; }
.quiz { position: relative; border-radius: 16px; padding: 26px clamp(18px, 4vw, 44px) 32px; overflow: visible; border: 3px solid var(--ink); box-shadow: 0 7px 0 var(--ink);
  background: linear-gradient(rgba(159, 184, 214, .35) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, rgba(159, 184, 214, .35) 1px, transparent 1px) 0 0 / 26px 26px, var(--paper); }
.quiz-meta { color: var(--muted); }
.prompt { color: var(--ink); text-shadow: none; }
.sub-prompt { color: var(--muted); }
.options { gap: 14px; }
.option, .tile { border: 2.5px solid var(--ink); background: #fffdf7; color: var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); transition: transform .3s var(--spring), box-shadow .3s, background .2s; }
.option:hover:not(:disabled), .tile:hover:not(:disabled) { border-color: var(--ink); background: #fff; transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); }
.option:active:not(:disabled), .tile:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.option kbd, .tile kbd { color: var(--muted); }
.option.correct { border-color: var(--ink); color: var(--ink); text-shadow: none; background: var(--leaf); box-shadow: 0 4px 0 var(--ink); animation: paper-pop .5s var(--spring); }
.option.wrong { border-color: var(--ink); color: var(--ink); background: var(--n2); animation: paper-shake .35s; }
@keyframes paper-pop { from { transform: scale(.92) rotate(-2deg); } to { transform: none; } }
@keyframes paper-shake { 25% { transform: translateX(-5px) rotate(-1deg); } 75% { transform: translateX(5px) rotate(1deg); } }
.answer-form input { background: #fffdf7; border: 2.5px solid var(--ink); color: var(--ink); box-shadow: inset 0 3px 0 rgba(43, 37, 35, .08); }
.answer-form input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px var(--n1); outline: none; }
.answer-form input.correct { border-color: var(--ink); background: #e9f6df; box-shadow: 0 0 0 4px var(--leaf); }
.answer-form input.wrong { border-color: var(--ink); background: #fde8ee; box-shadow: 0 0 0 4px var(--n2); }
.feedback-box { border: 2px solid var(--ink); border-radius: 12px; }
.feedback-box.good { background: #e9f6df; border-color: var(--ink); }
.feedback-box.good b { color: var(--leaf-2); }
.feedback-box.bad { background: #fde8ee; border-color: var(--ink); }
.feedback-box.bad b { color: var(--shu-2); }
.quiz.flash::before { content: ''; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; border: 4px solid var(--leaf); animation: paper-flash .7s ease-out forwards; }
@keyframes paper-flash { from { opacity: 1; } to { opacity: 0; } }
.quiz.shake { animation: paper-shake .4s; }
/* второстепенное — в выдвижную панель справа (лист на краю стола) */
.trainer > .side { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(360px, 92vw); padding: 84px 18px 24px; overflow-y: auto;
  background: var(--kraft); border-left: 3px solid var(--ink); box-shadow: -8px 0 0 rgba(43, 37, 35, .18); transform: translateX(105%); transition: transform .45s var(--spring); }
body.side-open .trainer > .side { transform: none; }
.trainer > .side { align-content: start; padding-bottom: 96px; } /* блоки панели — сверху, внизу место под кнопку «Закрыть» */
.side-toggle { position: fixed; z-index: 61; left: 20px; right: auto; bottom: 20px; display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 12px; border: 2.5px solid var(--ink); background: var(--paper); color: var(--ink); font: 700 14px var(--font-ui); cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .3s var(--spring); }
.side-toggle:hover { transform: translateY(-2px); }
.side-toggle b { font: 900 15px var(--font-display); color: var(--shu); }
/* Цуки сидит на верхнем крае карточки задания, справа; над карточкой — место под неё (--tw — ширина сцены героя 400×360,
   низ рисунка — на .795 ширины от верха сцены, видимая высота ≈ .66 ширины) */
.trainer > :is(.quiz, .session-done):has(> .trainer-hero) { --tw: 260px; position: relative; margin-top: calc(var(--tw) * .6); }
.trainer-hero { position: absolute; z-index: 3; width: var(--tw); height: calc(var(--tw) * .9); right: calc(16% - var(--tw) / 2); top: calc(var(--tw) * -.795 + 3px); cursor: pointer; }
.trainer-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trainer-hero .say-ja { font-size: calc(22px * 400 / 260); } .trainer-hero .say-ru { font-size: calc(16px * 400 / 260); }
@media (max-width: 640px) {
  .trainer > :is(.quiz, .session-done):has(> .trainer-hero) { --tw: 150px; }
  .trainer-hero .say-ja { font-size: 38px; stroke-width: 10px; } .trainer-hero .say-ru { font-size: 28px; stroke-width: 8px; } /* крупнее — строки наезжали друг на друга */
}
.say-ja { font-family: 'Yomogi', sans-serif; font-size: 32px; fill: #fff6ee; paint-order: stroke; stroke: var(--ink); stroke-width: 8px; stroke-linejoin: round; }
.say-ru { font-family: 'Neucha', sans-serif; font-size: 23px; fill: #ffe1a6; paint-order: stroke; stroke: var(--ink); stroke-width: 8px; stroke-linejoin: round; }
.fx { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; } .fx-fill { fill: var(--ink); } .fx-blue { fill: none; stroke: #3f6fb5; stroke-width: 2.2; stroke-linecap: round; }
svg .shade, svg .rim, svg .hatch, svg .guide { display: none; }

/* ---------- Линия занятия: кружки тушью, текущий обведён жёлтым ---------- */
.session-bar { display: block; background: transparent; border: 0; padding: 0; margin: 14px 0 20px; }
.metro { display: flex; align-items: flex-start; gap: 0; position: relative; }
.metro .st { flex: 1; position: relative; display: grid; justify-items: center; gap: 5px; text-decoration: none; color: var(--ink-soft); font: 16px/1.1 var(--font-hand); text-align: center; min-width: 0; padding: 0 2px; }
.metro .st::before { content: ''; position: absolute; top: 12px; left: -50%; right: 50%; height: 3px; z-index: -1; background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 13px); opacity: .5; }
.metro .st:first-child::before { display: none; }
.metro .st.done::before, .metro .st.now::before { opacity: 1; background: var(--ink); }
.metro .st i { width: 26px; height: 26px; border-radius: 50% 46% 52% 48%; border: 2.5px solid var(--ink); background: var(--paper); display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; transition: transform .3s var(--spring); }
.metro a.st:hover i { transform: translateY(-2px) rotate(-4deg); }
.metro .st.done { color: var(--ink); } .metro .st.done i { background: var(--leaf); }
.metro .st.now { color: var(--ink); font-weight: 700; } .metro .st.now i { background: var(--n1); transform: scale(1.15) rotate(-4deg); box-shadow: 0 3px 0 var(--ink); }
.session-top { display: flex; align-items: center; gap: 16px; }
.session-top .metro { flex: 1; }
.session-top .exit { flex: none; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; padding: 7px 12px; border-radius: 10px; border: 2.5px solid var(--ink); background: var(--paper); box-shadow: 0 3px 0 var(--ink); }
.session-top .exit:hover { transform: translateY(-1px); }
.session-progress { height: 10px; border-radius: 6px; background: #fff8e6; border: 2px solid var(--ink); margin-top: 14px; overflow: hidden; }
.session-progress i { display: block; height: 100%; width: 0; background: var(--shu); transition: width .6s var(--spring); }

/* итог занятия */
.done-card { background: var(--paper); }
.done-check { color: var(--ink) !important; background: var(--leaf) !important; border: 2.5px solid var(--ink); text-shadow: none; box-shadow: 0 3px 0 var(--ink); }
.hard-list span { background: var(--n2); border: 2px solid var(--ink); color: var(--ink); font-family: var(--font-ui); } /* в Klee One нет кириллицы */

/* ---------- Разделы: «следующий урок», ряды, уроки ---------- */
.next-card { position: relative; overflow: hidden; border-radius: 16px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 0 7px 0 var(--ink); }
.next-glyphs, .row-glyphs, .done-glyphs { color: var(--ink); text-shadow: none; }
.next-card .next-glyphs { color: var(--shu); }
.row-card.done { border-color: var(--ink); background: #eef7e4; }
.row-card.done .row-glyphs { text-shadow: none; color: var(--leaf-2); }
.row-card.next { border-color: var(--ink); background: #fff6d6; box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--n1); }
.row-card:not(.done):not(.next) .row-glyphs { color: #8a7868; text-shadow: none; }
.course-card.current { border-color: var(--ink); background: #fff6d6; box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--n1); }
.course-num { background: var(--paper); border: 2.5px solid var(--ink); color: var(--ink); font-family: var(--font-display); font-weight: 900; }
.course-card.current .course-num { border-color: var(--ink); color: #fff8ee; background: var(--shu); text-shadow: none; box-shadow: 0 3px 0 var(--ink); }
.course-card.ahead { opacity: .6; }
.tool .glyph, .kj-big { color: var(--ink); text-shadow: none; }
.kana-cell { background: #fffdf7; border: 2px solid var(--ink); }
.kana-cell .k { color: var(--ink); }
.kana-cell[data-m="4"] .k, .kana-cell[data-m="5"] .k { color: var(--leaf-2); text-shadow: none; }

/* ---------- Прогресс ---------- */
.stats .stat b, .mini-stats b { font: 900 44px/1 var(--font-display); color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; letter-spacing: 0; }
.stats .stat:nth-child(1) { background: var(--n1); } .stats .stat:nth-child(2) { background: var(--n2); } .stats .stat:nth-child(3) { background: var(--n3); }
.stats .stat:nth-child(1) { transform: rotate(-1deg); } .stats .stat:nth-child(3) { transform: rotate(1deg); }
.stats .stat span { font-family: var(--font-hand); font-size: 17px; color: var(--ink-soft); }
.mini-stats b { font-size: 30px; }
.row-chip { background: #fffdf7; border: 2px solid var(--ink); color: #786a5c; }
.row-chip.on { color: var(--ink); border-color: var(--ink); text-shadow: none; box-shadow: 0 2px 0 var(--ink); background: var(--leaf); }
.progress-table th { color: var(--muted); }
.progress-table td, .progress-table th, .word-table td, .ref-table td { border-color: rgba(43, 37, 35, .2); }
.progress-table tr.ahead { opacity: .5; }
.conf-pair { background: #fde8ee; border: 2px solid var(--ink); }

footer { border-top: 3px solid var(--ink); color: #e8d6bd; background: #2a1a10; font: 16px var(--font-hand); }
footer a { color: #ffe1a6; padding-block: 12px; } /* зона нажатия выше строки, раскладку не меняет */

@media (max-width: 640px) {
  .top .wrap { height: 60px; gap: 8px; } .logo span:last-child { display: none; }
  .nav { gap: 4px; padding-right: 6px; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); }
  .nav a { padding: 4px 7px; font-size: 12.5px; border-width: 2px; }
  .session-top { gap: 8px; }
  .session-top .exit { font-size: 0; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; }
  .session-top .exit::before { content: '✕'; font-size: 15px; }
  .metro .st { font-size: 13px; }
  .side-toggle span { display: none; } .side-toggle { padding: 10px 15px; }
}
/* .wrap из style.css (класс сильнее тега) обнулял вертикальные отступы main — возвращаем */
main.wrap { padding-top: 28px; padding-bottom: 64px; }
/* смена страниц без белой вспышки: браузер плавно сводит старую и новую (первый кадр новой — комната в прошлом ракурсе) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* разбор фразы по словам (тренажёр грамматики; на странице урока — свои в paper-course.css) */
.g-idea { margin: 4px 0 14px; font: 19px/1.45 var(--font-hand); text-align: left; }
.g-gloss { display: grid; gap: 8px; justify-items: start; width: 100%; padding: 14px 16px 12px; margin: 0 0 12px; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.g-gloss .gl-row { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.g-gloss .gl { display: inline-grid; justify-items: center; gap: 4px; padding: 6px 10px 5px; border-radius: 10px; background: #f6f1e6; }
.g-gloss .gl b { font: 600 24px/1.15 'Klee One', serif; }
.g-gloss .gl small { font: 15px/1.1 var(--font-hand); color: var(--ink-soft); text-align: center; }
.g-gloss .gl.fix { background: #fff1b8; }
.g-gloss .gl.p-wa { background: #a9dcf5; } .g-gloss .gl.p-no { background: #e9c98f; } .g-gloss .gl.p-mo { background: #9fe6d8; } .g-gloss .gl.p-ka { background: #ffb1cd; } .g-gloss .gl.p-ga { background: #ffb4a8; }
.g-gloss .gl.p-wo { background: #b9e4a3; } .g-gloss .gl.p-ni { background: #ffd08a; } .g-gloss .gl.p-he { background: #ffe07a; } .g-gloss .gl.p-de { background: #d9c8ff; } .g-gloss .gl.p-to { background: #ffc6e1; }
.g-gloss .gl-tr { font: 17px var(--font-hand); }
.g-tip { margin: 0 0 10px; padding: 10px 14px; background: #fff7d6; border-left: 5px solid var(--n1); border-radius: 0 10px 10px 0; font-size: 15px; line-height: 1.5; text-align: left; }
.g-intro details { text-align: left; margin-bottom: 10px; } .g-intro summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); }
.g-intro .g-gloss b, .g-intro .g-tip > b { background: none; padding: 0; } /* выделение маркером — только в тексте «Подробнее» */
/* подсказка «отметьте выученные ряды» — только если выбрано «Знаю часть рядов» */
#onboard .onboard-some { display: none; }
#onboard:has(.seg [data-v="some"][aria-pressed="true"]) .onboard-some { display: block; }
/* на телефоне «наведение» залипает после нажатия: прошлая кнопка ответа выглядит приподнятой */
@media (hover: none) { .option:hover, .btn:hover, .rs-tile:hover, .w:hover { transform: none; } }