.vozr{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px;font-size:14px}
.vozr span{background:var(--paper2,#f3ead6);border:1px solid var(--line);border-radius:99px;padding:3px 11px}
.ochem{font-size:17px;line-height:1.55;margin:0 0 10px}
.rz-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:960px;margin:0 auto 10px}
.rz-nav a{border:1px solid var(--line);border-radius:99px;padding:6px 13px;font-size:14px;text-decoration:none;background:var(--paper2,#fffaf0)}
.razdel{max-width:960px;width:100%;margin:26px auto 0;scroll-margin-top:12px}
.razdel .toc-h{text-align:left}
.rz-n{font-size:13px;opacity:.6;font-weight:400}
.rz-sub{margin:-4px 0 12px;color:var(--ink2);font-size:14px}
.card .vz{font-weight:700;color:var(--kinovar)}
.card .cv.cv-pusto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
 background:radial-gradient(circle at 50% 45%,#fbf3df 0,#efe2c4 70%);box-shadow:inset 0 0 0 8px #f6edd8,inset 0 0 0 9px #c9a86a,inset 0 0 0 13px #f6edd8,inset 0 0 0 14px #c9a86a}
.card .cv-pusto .bukv{font-family:Georgia,'Times New Roman',serif;font-size:76px;line-height:1;color:var(--kinovar,#8b2a1c);text-shadow:2px 2px 0 #e6cf9c}
.card .cv-pusto .cv-orn{font-size:13px;letter-spacing:6px;color:#b08a4a}
[data-noch] .card .cv.cv-pusto{background:radial-gradient(circle at 50% 45%,#3a2f22 0,#2a221a 70%);box-shadow:inset 0 0 0 8px #2a221a,inset 0 0 0 9px #8a6a3a,inset 0 0 0 13px #2a221a,inset 0 0 0 14px #8a6a3a}
.eyebrow a{color:inherit}
.varianty{margin:22px 0;border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--paper2,#fffaf0)}
.varianty summary{cursor:pointer;font-weight:600}
.varianty .text{margin-top:14px;font-size:17px}
.varianty .text::first-letter{font-size:inherit;color:inherit;padding:0}
.vr{border:0;border-top:1px dashed var(--line);margin:18px 0}
@media(max-width:560px){.razdel .cards{grid-template-columns:1fr 1fr;gap:10px}.razdel .card .cv{aspect-ratio:1/1}
.razdel .card .cbody{padding:9px 10px 11px}.razdel .card .ct{font-size:14.5px}.razdel .card .cm{font-size:11px;gap:4px}}
.text .fig{white-space:normal;margin:22px 0}
.chast{display:block;font-weight:700;font-size:1.15em;color:var(--kinovar);margin:10px 0 4px;letter-spacing:.02em}
.zapis{display:block;font-size:14px;font-style:italic;color:var(--ink2);margin-bottom:6px}
.fig-note{display:block;font-style:normal;color:var(--ink);margin-bottom:4px}
.zametka{background:#fffbeb;border:1px dashed #b45309;border-radius:10px;padding:10px 12px;font-size:15px;line-height:1.5}
.zametka a{text-decoration:underline}
[data-noch] .zametka{background:#292524;color:#fde68a}

:root{
  --paper:#f7f0e3; --paper2:#efe4cf; --ink:#2b2118; --ink2:#5c4d3a;
  --kinovar:#8f2620; --line:rgba(90,70,40,0.28); --gold:#7a5c2c;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,"PT Serif",serif;
}
/* ── ночной режим для чтения на ночь: тёплая тёмная тема, не холодный чёрный ── */
html[data-noch="1"]{
  --paper:#241c14; --paper2:#2f2517; --ink:#efe2c8; --ink2:#cbb790;
  --kinovar:#e2685c; --line:rgba(230,205,160,0.16); --gold:#d7a75c;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--paper)}
html.modal-open{overflow:hidden}
body{margin:0;color:var(--ink);font-family:var(--serif);line-height:1.7;
  background:
    radial-gradient(ellipse 1000px 500px at 50% -5%, rgba(143,38,32,0.06), transparent 60%),
    var(--paper);
  min-height:100vh;padding:clamp(20px,5vw,52px) 16px 64px;display:flex;flex-direction:column;align-items:center}
/* переключатели (.toolbar) — фиксированный уголок 8/10px + ~30-34px кнопка: на узких экранах
   поднимаем верхний отступ страницы, чтобы уголок никогда не наезжал на заголовок */
@media (max-width:460px){ body{padding-top:58px} }
a{color:var(--kinovar);text-decoration:none}
a:hover{text-decoration:underline}
button{touch-action:manipulation}
.head{max-width:640px;width:100%;text-align:center;margin-bottom:clamp(14px,3vw,22px)}
.eyebrow{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
h1{font-weight:400;font-size:clamp(28px,6vw,42px);line-height:1.14;margin:8px 0 12px;text-wrap:balance}
.lede{font-size:15.5px;color:var(--ink2);font-style:italic;margin:0 0 6px;text-wrap:balance;line-height:1.6}
.count{font-size:12.5px;color:var(--ink2)}
.rule{width:120px;height:1px;background:var(--line);margin:24px auto}

/* ── «как этим пользоваться» ── */
.steps{max-width:560px;width:100%;display:flex;flex-direction:column;gap:12px;margin:4px 0 30px;text-align:left}
.step{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.step .no{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--kinovar);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;font-family:var(--serif)}
.step u{color:var(--ink);text-decoration:none;border-bottom:1.5px dotted var(--kinovar)}

/* ── азбука знаков (обложка) ── */
.azbuka-wrap{max-width:720px;width:100%;margin:0 0 8px}
.toc-h{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink2);margin:18px 0 10px;font-weight:600}
.azbuka{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.az-item{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper2);
  text-align:center;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.az-item:hover,.az-item:focus-visible{border-color:var(--gold);background:#f3e8d3;outline:none}
.az-item .az-ic{width:36px;height:36px;color:var(--kinovar)}
.az-item .az-ic svg{width:100%;height:100%;display:block}
.az-item .az-ru{font-size:14.5px}
.az-item .az-sense{font-size:11px;color:var(--ink2);line-height:1.35}
.az-item .az-cl{font-size:9.5px;letter-spacing:0.05em;color:var(--gold);text-transform:uppercase}

/* ── карточки сказок (обложка) ── */
.cards{max-width:960px;width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--paper2);color:var(--ink);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.card:hover{border-color:var(--gold);text-decoration:none;transform:translateY(-2px);
  box-shadow:0 14px 30px -18px rgba(50,30,10,0.5)}
.card .cv{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#e7dcc2}
.card .cbody{padding:13px 15px 15px;display:flex;flex-direction:column;gap:5px}
.card .ca{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);font-weight:600}
.card .ct{font-size:16px;line-height:1.35;margin:0}
.card .cm{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--ink2);margin-top:6px;
  padding-top:8px;border-top:1px solid var(--line)}

/* ── страница сказки ── */
.page{max-width:640px;width:100%}
.back{font-size:13.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:4px;margin-bottom:22px}
.fig{margin:26px 0}
.fig img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:3px;background:#fff}
.fig figcaption{font-size:12px;color:var(--ink2);line-height:1.55;margin-top:8px;font-style:italic}
.fig figcaption b{color:var(--ink);font-weight:600;font-style:normal}
.fig figcaption a{text-decoration:underline}
.hint{font-size:13.5px;color:var(--ink2);background:var(--paper2);border:1px solid var(--line);
  border-radius:8px;padding:11px 15px;margin:0 0 24px;text-align:center;line-height:1.5}
.hint b{color:var(--ink)}
.text{font-size:18px;white-space:pre-wrap;overflow-wrap:break-word}
.text::first-letter{font-size:2.7em;line-height:0.9;color:var(--kinovar);font-weight:400;padding-right:2px}
[data-font="big"] .text{font-size:21px}

/* ── знак в строке: подчёркнутое слово + значок, единая область нажатия ── */
.zn{cursor:pointer;border-bottom:1.5px dotted var(--kinovar);padding-bottom:1px;border-radius:2px;
  -webkit-tap-highlight-color:transparent;user-select:none}
.zn:focus-visible{outline:2px solid var(--kinovar);outline-offset:3px}
.zn .zic{display:inline-block;width:1.08em;height:1.08em;vertical-align:-0.2em;margin-left:0.18em;
  color:var(--kinovar);opacity:0.95}
.zn .zic svg{width:100%;height:100%;display:block}
@media (hover:hover){
  .zn:hover{border-bottom-color:var(--ink);background:rgba(143,38,32,0.06)}
  .zn:hover .zic{opacity:1;transform:scale(1.1)}
}

/* ── сводка знаков в конце сказки ── */
.zsum{margin:44px 0 0;padding:18px 18px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper2)}
.zsum-h{font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:600}
.zsum-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.zsum-list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.5}
.zsum-list .zic{width:1.35em;height:1.35em;flex:0 0 auto;color:var(--kinovar);margin-top:0.15em}
.zsum-list .zic svg{width:100%;height:100%;display:block}
.zsum-list b{color:var(--ink)}

.kto{margin:30px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2);line-height:1.6}
.foot{margin-top:16px;font-size:12.5px;color:var(--ink2);text-align:left;line-height:1.6;max-width:640px}
.foot + .foot{margin-top:10px}
.foot b{color:var(--ink)}

/* ── модальное окно раскрытия знака: снизу на телефоне, по центру на экране ── */
.mbg{position:fixed;inset:0;background:rgba(30,20,10,0.5);opacity:0;pointer-events:none;
  transition:opacity 0.18s ease;z-index:60}
.mbg.on{opacity:1;pointer-events:auto}
.modal{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--paper);
  border:1px solid var(--gold);border-left:none;border-right:none;border-bottom:none;
  border-radius:16px 16px 0 0;max-height:82vh;
  box-shadow:0 -16px 44px -16px rgba(40,25,5,0.4);
  opacity:0;pointer-events:none;transform:translateY(16px);
  transition:opacity 0.2s ease,transform 0.24s cubic-bezier(.2,.8,.3,1)}
.modal.on{opacity:1;pointer-events:auto;transform:translateY(0)}
.modal .mbody{padding:26px 22px calc(22px + env(safe-area-inset-bottom,0px));max-height:82vh;overflow:auto}
.modal .mclose{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper2);color:var(--ink);font-size:17px;line-height:1;
  cursor:pointer;font-family:var(--serif)}
.modal .mclose:hover{background:#f3e8d3;border-color:var(--gold)}
.modal .mgrip{width:38px;height:4px;border-radius:3px;background:var(--line);margin:0 auto 14px}
@media (min-width:680px){
  .modal{left:50%;right:auto;bottom:auto;top:50%;width:min(92vw,440px);border-radius:12px;border:1px solid var(--gold);
    transform:translate(-50%,-46%);max-height:min(80vh,560px)}
  .modal.on{transform:translate(-50%,-50%)}
  .modal .mbody{max-height:min(80vh,560px)}
  .modal .mgrip{display:none}
}
@media (min-width:0px){
  .mglyph.mshema{width:min(74vw,300px);height:auto;aspect-ratio:1/1}
  .mglyph.mshema svg{width:100%;height:100%}
}
.mglyph{width:min(30vw,108px);height:min(30vw,108px);margin:2px auto 12px;color:var(--kinovar)}
.mglyph svg{width:100%;height:100%;display:block}
.mru{text-align:center;font-size:20px;margin:0 0 4px}
.mword{text-align:center;font-size:13px;color:var(--ink2);margin:0 0 14px;font-style:italic}
.mold,.mgen{font-size:15px;line-height:1.62;margin:0 0 12px}
.mold b,.mgen b{color:var(--ink);font-weight:600}
.mbadge-wrap{text-align:center}
.mbadge{display:inline-block;font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;font-weight:600}
.mbadge.mA{background:rgba(143,38,32,0.1);color:var(--kinovar);border:1px solid rgba(143,38,32,0.35)}
.mbadge.mC{background:rgba(90,70,40,0.09);color:var(--ink2);border:1px solid var(--line)}

/* ═══ закладки, словарик, ночь/шрифт, родителям — v3 (18.08.2026) ═══ */

/* ── переключатели ночь/шрифт, видны на каждой странице ── */
.toolbar{position:fixed;top:10px;left:10px;z-index:45;display:flex;gap:8px}
.tbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--paper2);
  color:var(--ink);font-size:14px;line-height:1;cursor:pointer;font-family:var(--serif);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -8px rgba(40,25,5,0.5)}
.tbtn:hover{background:#f3e8d3;border-color:var(--gold)}
html[data-noch="1"] .tbtn:hover{background:#3d3018}
@media (max-width:420px){.toolbar{top:8px;left:8px;gap:6px}.tbtn{width:30px;height:30px;font-size:12.5px}}

/* ── закладка-ленточка на странице сказки (чисто декоративная, не мешает тапам) ── */
.ribbon{position:fixed;top:0;right:26px;width:20px;height:54px;background:var(--kinovar);z-index:40;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);box-shadow:0 4px 12px -6px rgba(0,0,0,0.4);
  opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .25s ease,transform .25s ease}
.ribbon.on{opacity:1;transform:translateY(0)}
@media (max-width:420px){.ribbon{right:14px;width:16px;height:42px}}

/* ── плашка «продолжить с закладки?» ── */
.bm-banner{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;background:var(--kinovar);color:#fff;
  font-size:13.5px;padding:10px 16px;transform:translateY(-100%);
  transition:transform .28s cubic-bezier(.2,.8,.3,1);box-shadow:0 6px 18px -8px rgba(0,0,0,0.4)}
.bm-banner.on{transform:translateY(0)}
.bm-banner .bm-actions{display:flex;gap:8px}
.bm-banner button{border:1px solid rgba(255,255,255,0.55);background:rgba(255,255,255,0.12);color:#fff;
  border-radius:16px;padding:5px 14px;font-size:12.5px;cursor:pointer;font-family:var(--serif)}
.bm-banner button:hover{background:rgba(255,255,255,0.24)}

/* ── «мы прочитали» ── */
.done-wrap{margin:32px 0 0;text-align:center}
.done-btn{font-family:var(--serif);font-size:15.5px;padding:12px 26px;border-radius:26px;
  border:1.5px solid var(--kinovar);background:var(--paper2);color:var(--kinovar);cursor:pointer;
  transition:background .15s ease,transform .1s ease}
.done-btn:hover{background:rgba(143,38,32,0.08)}
.done-btn:active{transform:scale(0.97)}
.done-btn.is-done{background:var(--kinovar);color:#fff}

/* ── «продолжить чтение» и «мой словарик» на обложке ── */
.continue-block{max-width:960px;width:100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  justify-content:center;background:var(--paper2);border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;margin:0 0 18px;font-size:14px;color:var(--ink2)}
.continue-block .cb-ic{font-size:18px}
.continue-block .cb-txt{color:var(--ink)}
.continue-block .cb-btn{margin-left:auto;font-size:13px;font-weight:600;color:var(--kinovar);
  border:1px solid var(--kinovar);border-radius:16px;padding:6px 14px;white-space:nowrap}
.continue-block .cb-btn:hover{background:rgba(143,38,32,0.08);text-decoration:none}
@media (max-width:480px){.continue-block{justify-content:flex-start}.continue-block .cb-btn{margin-left:0;width:100%;text-align:center}}

.slovarik-block{max-width:640px;width:100%;text-align:center;margin:0 0 18px}
.sv-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink2);
  border:1px solid var(--line);border-radius:20px;padding:7px 16px;background:var(--paper2)}
.sv-link:hover{border-color:var(--gold);text-decoration:none;color:var(--ink)}
.sv-n{color:var(--gold);font-weight:600}

/* ── страница «Мой словарик» ── */
.sv-list{max-width:640px;width:100%;display:flex;flex-direction:column;gap:12px;margin:0 auto}
.sv-item{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--paper2);text-align:left}
.sv-slovo{font-size:17px;margin-bottom:4px}
.sv-ru{font-size:12.5px;color:var(--ink2);font-weight:400}
.sv-smysl{font-size:14px;color:var(--ink2);line-height:1.5;margin-bottom:6px}
.sv-tale,.sv-tale-plain{font-size:12px;color:var(--gold)}
.sv-empty{text-align:center;color:var(--ink2);font-size:14.5px;line-height:1.6;max-width:420px;margin:20px auto}
.sv-clear{display:block;margin:26px auto 0;font-family:var(--serif);font-size:13.5px;padding:9px 20px;
  border-radius:20px;border:1px solid var(--line);background:var(--paper2);color:var(--ink2);cursor:pointer}
.sv-clear:hover{border-color:var(--kinovar);color:var(--kinovar)}

/* ── карточки сказок: значок закладки / «прочитано» ── */
.card{position:relative}
.card .cm{flex-wrap:wrap}
.card.has-bm::after{content:'';position:absolute;top:0;right:16px;width:12px;height:22px;z-index:2;
  background:var(--kinovar);clip-path:polygon(0 0,100% 0,100% 100%,50% 68%,0 100%);
  box-shadow:0 3px 8px -4px rgba(0,0,0,0.4)}
.done-badge{width:100%;margin-top:4px;font-size:11px;color:var(--kinovar);font-weight:600}

/* ── блок для родителей ── */
.parents{max-width:640px;width:100%;margin:28px 0 0;font-size:13.5px;color:var(--ink2)}
.parents summary{cursor:pointer;color:var(--ink);font-weight:600;padding:6px 0}
.parents summary::marker{color:var(--kinovar)}
.parents-body{padding:8px 2px 4px;line-height:1.6}
.parents-body p{margin:0 0 12px}
.parents-body p:last-child{margin-bottom:0}
.parents-body b{color:var(--ink)}

@media print{
  .no-print,.card.has-bm::after{display:none !important}
  body{padding:0;background:#fff !important}
  a{color:#000;text-decoration:underline}
  .text::first-letter{color:#000}
}

@media (prefers-reduced-motion: reduce){
  .zn,.zic,.card,.az-item,.modal,.mbg,.ribbon,.bm-banner,.tbtn,.done-btn,.continue-block{transition:none}
}