/* Чтение (21.10.2026): только /spanish/reading/ и страницы тем (body.tw-read). Общий site.css не трогаем.
   21.10, вечер («почти всё сплошным текстом», пункты 1–8): текст на листе со скотчем, слова справа и не уезжают,
   над текстом одна строка и кнопка английского, «Before you read», объяснение к ответу, карточки слов, в конце одна
   большая ссылка; в списке — карточки-листы в сетке с уровнем под линией карандаша цвета уровня (--lv). */
/* 22.10 (вечер, design 7): отступы и скругления — токены шкалы из site.css (--tw-s1…s9, --tw-r-s/l/pill), верх липких
   блоков — --tw-stick (inner.css); значения вне таблицы, 1–3 px, отрицательные и места, где сдвиг вышел бы больше 4 px, — числами */

/* шапка: H1 меньше, чем у гидов, — главное здесь испанский текст */
.tw-read:has(.tw-reader) .tw-head h1{font-size:var(--tw-fs-h2)}
/* 22.10 (вечер, design 12): ответ-абзац — общая ширина строки (было 40em, больше 65 знаков) */
.tw-read .tw-answer{font-size:var(--tw-fs-lead);max-width:var(--tw-measure)}
/* 22.10 (финальная проверка, design 2): с вещью в шапке текст под заголовком не заходит под неё (на 768 закрывала строки) */
@media (min-width:761px){.tw-read .tw-head-o .tw-answer{max-width:min(var(--tw-measure),calc(100% - min(330px,23vw)))}}

/* ---------- список: группы по уровню, карточки ---------- */
.tw-rgroups{margin-top:clamp(18px,2vw,28px)}
.tw-rgroup[hidden]{display:none}
.tw-rgroup+.tw-rgroup{margin-top:clamp(36px,4vw,60px)}
.tw-rgroup h3{display:flex;align-items:baseline;gap:var(--tw-s3);margin:0;font-size:var(--tw-fs-h3);font-weight:600;letter-spacing:-.015em;color:var(--tw-ink-2)}
.tw-rgroup h3 b{padding-bottom:3px;font-size:var(--tw-fs-title);font-weight:800;letter-spacing:-.03em;color:var(--tw-ink);background:var(--lv) no-repeat 0 100%/100% 7px}
.tw-rcards{list-style:none;padding:0;margin:var(--tw-s4) 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(16px,1.8vw,24px)}
.tw-rcard{position:relative;display:flex;flex-direction:column;background:var(--tw-sheet);box-shadow:var(--tw-sh-thing);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.tw-rcard[hidden]{display:none}
.tw-rcard-a{display:flex;flex:1;flex-direction:column;gap:6px;padding:var(--tw-s5) var(--tw-s5) var(--tw-s4);color:var(--tw-ink);text-decoration:none}
.tw-rcard-top{display:flex;align-items:baseline;gap:var(--tw-s3);font-size:var(--tw-fs-label);font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-ink-3)}
.tw-rcard-lv{flex:none;white-space:nowrap;padding-bottom:3px;font-size:var(--tw-fs-title);font-weight:800;letter-spacing:-.03em;text-transform:none;color:var(--tw-ink);background:var(--lv) no-repeat 0 100%/100% 6px}
/* 21.10, ночь: вещь рубрики в углу карточки и подпись рубрики цветом рубрики (src/lib/things.mjs) */
.tw-rcard-top{padding-right:84px}
.tw-rcard-top>span{min-width:0;text-wrap:balance}
.tw-rcard-th{position:absolute;top:12px;right:14px;width:auto;height:auto;max-width:76px;max-height:76px;transform:rotate(5deg);filter:drop-shadow(0 6px 6px rgba(60,40,20,.18));pointer-events:none}
/* 22.10 (решение по цветам, design 16): цвет на карточке — только у линии уровня (A1 зелёный, A2 синий, B1 сиреневый, B2 красный);
   тему показывают вещица и подпись — серым, как остальные пометки карточки */
.tw-rcard-rub{margin-top:var(--tw-s3);font-size:var(--tw-fs-label);font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-ink-3)}
.tw-rcard-rub+.tw-rcard-t{margin-top:2px}
.tw-rcard-t{margin-top:var(--tw-s2);font-size:var(--tw-fs-h3);font-weight:750;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.tw-rcard-es{font-size:var(--tw-fs-ui);line-height:1.4;color:var(--tw-ink-2)}
.tw-rcard-go{margin-top:auto;padding-top:var(--tw-s4);font-size:var(--tw-fs-ui);font-weight:700}
/* 22.10 (вечер, design 14): «Opens in week N» у выпуска — своей строкой под испанским названием (parts.mjs), а не в
   строке уровня, где она ломалась на 2–3 строки рядом с крупным «A2–B1» */
.tw-rcard-soon{margin-top:var(--tw-s2);font-size:var(--tw-fs-label);font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--tw-ink-3)}
.tw-rcard-pair{display:flex;align-items:center;margin:-8px 0 0;padding:0 var(--tw-s3) var(--tw-s3);font-size:var(--tw-fs-ui);color:var(--tw-ink-3)}
.tw-rcard-pair i{font-style:normal;opacity:.6}
.tw-rcard-pair a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--tw-s3);font-weight:600;color:var(--tw-ink-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (hover:hover){
  .tw-rcard:hover{transform:translateY(-3px) rotate(-.35deg);box-shadow:0 0 0 1px rgba(23,20,15,.08),0 22px 30px -20px rgba(60,40,20,.6)}
  .tw-rcard-a:hover .tw-rcard-go{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--tw-pen)}
}

/* ---------- статья: строка над текстом ---------- */
.tw-read .tw-level{padding-top:clamp(18px,2.2vw,30px)}
.tw-read .tw-level.tw-field{padding-top:clamp(22px,2.4vw,36px)}
.tw-rbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--tw-s3) var(--tw-s5);margin-bottom:clamp(18px,2vw,26px)}
.tw-rmeta{margin:0;font-size:var(--tw-fs-ui);font-weight:600;color:var(--tw-ink-2)}
.tw-rmeta b{display:inline-block;min-width:34px;padding:1px var(--tw-s2);border-radius:6px;background:var(--tw-ink);color:var(--tw-paper);font-weight:700;text-align:center}
.tw-rmeta .tw-badge-draft{margin-left:var(--tw-s2)}
/* английский: одна кнопка-переключатель */
.tw-entog{margin:0}
.tw-entog[hidden]{display:none}
.tw-entog-b{display:inline-flex;align-items:center;gap:var(--tw-s3);min-height:44px;padding:0 var(--tw-s4) 0 var(--tw-s3);border:0;border-radius:var(--tw-r-pill);background:rgba(23,20,15,.06);font:inherit;font-size:var(--tw-fs-ui);font-weight:600;color:var(--tw-ink-2);cursor:pointer}
.tw-entog-b::before{content:"";flex:none;width:36px;height:22px;border-radius:var(--tw-r-pill);background:radial-gradient(circle at 11px 50%,#fff 7.5px,transparent 8px),rgba(23,20,15,.28);transition:background .2s}
.tw-entog-b[aria-pressed="true"]{color:var(--tw-ink)}
.tw-entog-b[aria-pressed="true"]::before{background:radial-gradient(circle at 25px 50%,#fff 7.5px,transparent 8px),var(--tw-ink)}
.tw-entog-b:hover{background:rgba(23,20,15,.1)}
.tw-text.has-entog .tw-en summary{display:none}
.tw-text.is-en .tw-en p{margin-top:var(--tw-s2)}

/* лист с текстом слева, справа — записка «Before you read» (колонки слов нет с 21.10, вечер: каждое слово — касанием) */
.tw-rgrid{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-areas:"sheet before";gap:var(--tw-s6) clamp(28px,3vw,48px);align-items:start}
.tw-rgrid-1{grid-template-columns:minmax(0,1fr);grid-template-areas:"sheet"}
.tw-rgrid>.tw-reader{grid-area:sheet}
.tw-rgrid>.tw-before{grid-area:before;position:sticky;top:var(--tw-stick)}

/* «Before you read»: жёлтая записка, подпись карандашом, 2–3 фразы, ключевые слова — касанием */
.tw-before{position:relative;margin-top:var(--tw-s4);padding:var(--tw-s4) var(--tw-s4) var(--tw-s4);background:var(--tw-y);box-shadow:0 10px 18px -14px rgba(60,40,20,.6);transform:rotate(-1deg)}
.tw-before-l{margin:0 0 var(--tw-s1);font-size:var(--tw-pen-fs-m);line-height:1.1;color:var(--tw-pen-ink)}
.tw-before-t{font-size:var(--tw-fs-ui);line-height:1.5;color:var(--tw-ink)}
.tw-kw{margin-top:var(--tw-s3);font-size:var(--tw-fs-ui);line-height:1.6;color:var(--tw-ink-2)}
.tw-kw-l{margin-right:var(--tw-s1);font-weight:650;color:var(--tw-ink-3)}
.tw-kw .tw-w{font-weight:700;color:var(--tw-ink)}
.tw-kw i{font-style:normal;opacity:.5}

/* текст на листе со скотчем (site.css снимает лист у .tw-level .tw-reader — здесь возвращаем) */
.tw-read .tw-level .tw-reader{margin:0;padding:0;border-top:0;background:none;box-shadow:none}
.tw-read .tw-reader .tw-sub{font-size:var(--tw-fs-lead);color:var(--tw-ink-2)}
.tw-src{margin-top:var(--tw-s6);padding-top:var(--tw-s4);border-top:1px dashed rgba(23,20,15,.25);line-height:1.6}

/* новые слова — свёрнутой строкой внизу листа */
.tw-wbox{margin-top:var(--tw-s4)}
.tw-wbox>summary{display:inline-flex;align-items:center;gap:var(--tw-s2);min-height:44px;list-style:none;font-size:var(--tw-fs-ui);font-weight:650;color:var(--tw-ink-2);cursor:pointer}
.tw-wbox>summary::-webkit-details-marker{display:none}
.tw-wbox>summary::after{content:"+";font-size:var(--tw-fs-icon,30px);font-weight:300;line-height:1}/* 22.10, вечер, design 18: как у подразделов и вопросов */
.tw-wbox[open]>summary::after{content:"–"}
.tw-wbox>summary small{font-size:var(--tw-fs-small);font-weight:600;color:var(--tw-ink-3)}
.tw-read .tw-words{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 28px;margin-top:var(--tw-s1)}
.tw-read .tw-words>div{padding:var(--tw-s2) 0}
.tw-read .tw-words dt{font-size:var(--tw-fs-ui)}
.tw-read .tw-words dd{font-size:var(--tw-fs-small)}

/* слова текста: каждое — касанием (reading.js); новые слова (tr.words) — с пунктиром, как раньше */
.tw-t{cursor:pointer;border-radius:.2em;transition:background-color .15s}
.tw-t.is-new{background-image:linear-gradient(to right,rgba(23,20,15,.36) 50%,transparent 0);background-size:4px 1px;background-repeat:repeat-x;background-position:0 94%}
@media (hover:hover){.tw-t:hover{background-color:rgba(245,192,12,.3)}}
.tw-t.is-hot,.tw-t.is-sel{background-color:rgba(245,192,12,.5)}
/* 21.10, ночь: «Listen» (listen.js) — кнопка над текстом, полоса снизу экрана, звучащее предложение подчёркнуто */
.tw-rbar-r{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tw-s3) var(--tw-s4)}
.tw-listen audio{width:min(320px,calc(100vw - 32px))}
.tw-listen-b{display:inline-flex;align-items:center;gap:var(--tw-s2);min-height:44px;padding:0 var(--tw-s4) 0 var(--tw-s3);border-radius:var(--tw-r-pill);box-shadow:inset 0 0 0 1.5px var(--tw-ink);font-size:var(--tw-fs-ui);font-weight:700}
.tw-listen-b svg,.tw-lbar svg{width:22px;height:22px}
.tw-listen-b small{font-size:var(--tw-fs-small);font-weight:600;color:var(--tw-ink-3);font-variant-numeric:tabular-nums}
.tw-listen-b.is-on{background:var(--tw-ink);color:var(--tw-sheet)}
.tw-listen-b.is-on small{color:inherit;opacity:.75}
.tw-t.is-say{background-image:linear-gradient(transparent 62%,rgba(155,127,214,.38) 62%)}
.tw-t.is-word{background-color:rgba(155,127,214,.32);border-radius:3px;box-shadow:0 0 0 2px rgba(155,127,214,.32)}
.tw-lbar{position:fixed;z-index:50;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:var(--tw-s2);width:min(560px,calc(100vw - 16px));padding:var(--tw-s2) var(--tw-s2);border-radius:var(--tw-r-pill);background:var(--tw-ink);color:var(--tw-sheet);box-shadow:0 14px 28px -12px rgba(20,20,30,.55)}
.tw-lbar[hidden]{display:none}
.tw-lbar button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:var(--tw-r-pill);font-weight:700;color:inherit}
.tw-lbar button:focus-visible{outline-color:var(--tw-sun)}
.tw-lbar-p{background:var(--tw-sun);color:var(--tw-sun-ink)!important}
.tw-lbar-s{flex:1;min-width:0;accent-color:var(--tw-sun)}
.tw-lbar-t{font-size:var(--tw-fs-small);font-variant-numeric:tabular-nums;opacity:.85;white-space:nowrap}
.tw-lbar-r{font-size:var(--tw-fs-small)}
.tw-lbar-x{font-size:24px;line-height:1}
body.has-lbar{padding-bottom:80px}
@media (max-width:420px){.tw-lbar-t{display:none}}
.tw-t.is-gap{border-radius:.2em 0 0 .2em;box-shadow:.3em 0 0 rgba(245,192,12,.5)}
.tw-text ::selection{background:rgba(47,91,211,.22)}
/* карточка перевода (reader-card.js): вкладки Word / Phrase / Sentence, словарная форма, значение здесь,
   грамматика, фраза вокруг, «Why this form?» и «Example» — жёлтой запиской, «Listen»; на телефоне — шторка снизу */
.tw-text.is-live{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tw-rc{position:absolute;z-index:60;width:min(380px,calc(100vw - 16px));padding:var(--tw-s3) var(--tw-s4) var(--tw-s4);border-radius:var(--tw-r-s);background:var(--tw-sheet);box-shadow:0 0 0 1px rgba(23,20,15,.09),0 18px 34px -16px rgba(60,40,20,.55);color:var(--tw-ink)}
.tw-rc[hidden]{display:none}
.tw-rc.is-sheet{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:min(62vh,540px);overflow:auto;overscroll-behavior:contain;padding:var(--tw-s2) var(--tw-s4) calc(18px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;box-shadow:0 0 0 1px rgba(23,20,15,.08),0 -12px 30px -12px rgba(60,40,20,.45)}
.tw-rc.is-sheet::before{content:"";display:block;width:40px;height:4px;margin:0 auto var(--tw-s2);border-radius:2px;background:rgba(23,20,15,.2)}
.tw-rc-top{display:flex;align-items:center;justify-content:space-between;gap:var(--tw-s2)}
.tw-rc-tabs{display:inline-flex;flex-wrap:wrap;padding:3px;border-radius:var(--tw-r-pill);background:rgba(23,20,15,.06)}
.tw-rc-tab{min-height:44px;padding:0 13px;border:0;border-radius:var(--tw-r-pill);background:none;font:inherit;font-size:var(--tw-fs-small);font-weight:600;color:var(--tw-ink-2);cursor:pointer}
.tw-rc-tab[aria-selected="true"]{background:var(--tw-ink);color:var(--tw-paper)}
.tw-rc-x{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:none;font:inherit;font-size:26px;line-height:1;color:var(--tw-ink-2);cursor:pointer}
.tw-rc-x:hover{background:rgba(23,20,15,.06)}
.tw-rc-body{margin-top:var(--tw-s3)}
.tw-rc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--tw-s3)}
.tw-rc-es{font-size:var(--tw-fs-title);font-weight:780;line-height:1.12;letter-spacing:-.02em}
.tw-rc-es.is-mid{font-size:var(--tw-fs-h3);font-weight:720;line-height:1.25;letter-spacing:-.01em}
.tw-rc-es.is-long{font-size:var(--tw-fs-read);font-weight:620;line-height:1.4;letter-spacing:0}
.tw-rc-say{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(23,20,15,.07);color:var(--tw-ink);cursor:pointer}
.tw-rc-say:hover{background:rgba(23,20,15,.12)}
.tw-rc-say svg{width:20px;height:20px}
.tw-rc-mean{margin-top:var(--tw-s1);font-size:var(--tw-fs-lead);font-weight:600;line-height:1.35}
.tw-rc-here,.tw-rc-ctx{margin-top:var(--tw-s3);padding-top:var(--tw-s3);border-top:1px dashed rgba(23,20,15,.2);font-size:var(--tw-fs-ui);line-height:1.45}
.tw-rc-here span,.tw-rc-ctx span,.tw-rc-lbl{color:var(--tw-ink-3)}
.tw-rc-note{margin-top:2px;font-size:var(--tw-fs-small);color:var(--tw-ink-3)}
.tw-rc-lbl{margin-top:var(--tw-s3);font-size:var(--tw-fs-label);font-weight:650;letter-spacing:.06em;text-transform:uppercase}
.tw-rc-wbw{margin-top:var(--tw-s1);font-size:var(--tw-fs-ui);line-height:1.6}
.tw-rc-wbw b,.tw-rc-row b{font-weight:700}
.tw-rc-wbw i{font-style:normal;opacity:.45}
.tw-rc-row{margin-top:var(--tw-s1);font-size:var(--tw-fs-ui);line-height:1.45}
.tw-rc-links{display:flex;flex-wrap:wrap;gap:var(--tw-s2);margin-top:var(--tw-s4)}
.tw-rc-link{min-height:44px;padding:0 var(--tw-s4);border:0;border-radius:var(--tw-r-pill);background:#F1EBDF;box-shadow:inset 0 0 0 1px rgba(23,20,15,.14);font:inherit;font-size:var(--tw-fs-small);font-weight:650;color:var(--tw-ink);cursor:pointer}
.tw-rc-cp{display:block;margin-top:var(--tw-s4)}
.tw-rc-link[aria-expanded="true"]{background:var(--tw-ink);color:var(--tw-paper);box-shadow:none}
.tw-rc-more:not(:empty){margin-top:var(--tw-s3);padding:var(--tw-s3) var(--tw-s4);border-radius:2px;background:var(--tw-y);font-size:var(--tw-fs-ui);line-height:1.5}
.tw-rc-exes{font-weight:650}
.tw-rc-exen{margin-top:var(--tw-s1);color:var(--tw-ink-2)}

/* ---------- после текста: вопросы с объяснением, карточки ---------- */
.tw-after{max-width:880px;margin-top:clamp(44px,5vw,72px)}
.tw-qs>li.is-live ul{display:grid;gap:2px;max-width:720px;margin-top:var(--tw-s3);counter-reset:o}
.tw-qs>li.is-live ul>li{counter-increment:o}
.tw-qs>li.is-live ul li::before{content:none}
.tw-qopt{display:flex;align-items:center;gap:var(--tw-s3);width:100%;min-height:var(--tw-btn-h);padding:var(--tw-s2) var(--tw-s3) var(--tw-s2) var(--tw-s1);border:0;border-radius:var(--tw-r-s);background:none;font:inherit;font-size:var(--tw-fs-ui);line-height:1.35;text-align:left;color:var(--tw-ink);cursor:pointer}
.tw-qopt:hover:not([aria-disabled]){background:rgba(23,20,15,.05)}
.tw-qopt[aria-disabled]{cursor:default}
.tw-qopt.is-ok{color:var(--tw-ok);font-weight:650}
.tw-qopt.is-no{color:var(--tw-no);text-decoration:line-through;text-decoration-thickness:1px}
.tw-qres{max-width:720px;margin:var(--tw-s3) 0 var(--tw-s2);font-weight:650}
.tw-qres:empty{display:none}
.is-right .tw-qres{color:var(--tw-ok)}
.is-wrong .tw-qres{color:var(--tw-no)}
.tw-qwhy{margin-top:var(--tw-s2);font-size:var(--tw-fs-ui);font-weight:450;line-height:1.5;color:var(--tw-ink)}
.tw-qres .tw-qwhy{padding:var(--tw-s3) var(--tw-s4);background:var(--tw-y);border-radius:2px}

.tw-cards{margin-top:clamp(44px,5vw,68px)}
.tw-cards[hidden]{display:none}
.tw-deck{position:relative;max-width:560px;margin-top:var(--tw-s5)}
.tw-deck::before{content:"";position:absolute;inset:6px -6px -8px 8px;background:var(--tw-sheet-2);box-shadow:var(--tw-shadow);transform:rotate(2deg)}
.tw-card{position:relative;display:flex;flex-direction:column;gap:var(--tw-s3);min-height:270px;padding:var(--tw-s5) var(--tw-s5) var(--tw-s5);background:var(--tw-sheet);box-shadow:var(--tw-shadow)}
.tw-card-n{font-size:var(--tw-fs-label);font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--tw-ink-3)}
.tw-card-es{font-size:var(--tw-fs-title);font-weight:780;line-height:1.05;letter-spacing:-.03em}
.tw-card-es b{font-weight:inherit}
.tw-card-s{font-size:var(--tw-fs-body);line-height:1.5;color:var(--tw-ink-2)}
.tw-card-s q{quotes:none}
.tw-card-s mark{padding:0 2px;color:var(--tw-ink);background:linear-gradient(transparent 52%,rgba(245,192,12,.55) 0)}
.tw-card-en{align-self:flex-start;padding-bottom:var(--tw-s1);font-size:var(--tw-fs-h3);font-weight:650;color:var(--tw-ink);background:var(--tw-u3) no-repeat 0 100%/100% 6px;animation:tw-card-in .35s cubic-bezier(.2,.8,.2,1)}
.tw-card-act{display:flex;flex-wrap:wrap;gap:var(--tw-s3);margin-top:auto;padding-top:var(--tw-s3)}
.tw-card-act .tw-btn{min-height:var(--tw-btn-h);padding:0 20px;font-size:var(--tw-fs-ui)}
.tw-card.is-done{align-items:flex-start;justify-content:center}
.tw-card-done{font-size:var(--tw-fs-h3);font-weight:650}
@keyframes tw-card-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.tw-card-en{animation:none}.tw-rcard{transition:none}}
/* 22.10 (сравнение с русскими разделами, C2): карточка переворачивается целиком; обе стороны в одной клетке сетки —
   высота по большей; касание по карточке — тоже переворот (reading.js) */
.tw-flip{position:relative;perspective:1400px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tw-flip-in{display:grid;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tw-flip.is-turned .tw-flip-in{transform:rotateY(180deg)}
.tw-face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.tw-face-b{transform:rotateY(180deg)}
.tw-face-b .tw-card-en{animation:none}
.tw-card-t{font-size:var(--tw-fs-ui);line-height:1.45;color:var(--tw-ink-3)}
@media (hover:hover){.tw-flip:hover .tw-flip-in{transform:rotateY(-4deg)}.tw-flip.is-turned:hover .tw-flip-in{transform:rotateY(176deg)}}
@media (prefers-reduced-motion:reduce){.tw-flip-in{transition:none}.tw-flip:hover .tw-flip-in{transform:none}.tw-flip.is-turned:hover .tw-flip-in{transform:rotateY(180deg)}}

/* ---------- «Read next»: одна большая ссылка, ещё две строкой ---------- */
.tw-next h2{font-size:var(--tw-fs-title)}
.tw-next-more{margin-top:var(--tw-s4);font-size:var(--tw-fs-ui);line-height:1.7;color:var(--tw-ink-2)}
.tw-next-more a{font-weight:650;color:var(--tw-ink)}
.tw-next-more small{margin-left:var(--tw-s1);font-size:var(--tw-fs-small);font-weight:650;color:var(--tw-ink-3)}
.tw-next-more i{font-style:normal}

/* ---------- узкий экран: слова — свёрнутый блок перед текстом ---------- */
@media (max-width:999px){
  .tw-rgrid,.tw-rgrid-1{grid-template-columns:minmax(0,1fr);grid-template-areas:"before" "sheet";gap:var(--tw-s4)}
  .tw-rgrid>.tw-before{position:static;margin-top:0;transform:none}
}
@media (max-width:760px){
  .tw-read:has(.tw-reader) .tw-head h1{line-height:1.02}
  .tw-read .tw-answer{margin-top:var(--tw-s3);font-size:var(--tw-fs-ui)}
  .tw-read .tw-crumbs li:last-child{display:none}
  .tw-read .tw-tabs{margin-top:var(--tw-s4)}
  .tw-read .tw-sec{padding-top:var(--tw-s6)}
  .tw-read .tw-filter{gap:var(--tw-s3) var(--tw-s5);margin-top:var(--tw-s4)}
  .tw-rgroup h3 b{font-size:var(--tw-fs-title)}
  /* карточки списка ниже: вся карточка — ссылка, строка «Read →» на телефоне лишняя */
  .tw-rcard-a{padding:var(--tw-s4) var(--tw-s4) var(--tw-s4)}
  .tw-rcard-go{display:none}
  .tw-rcard-pair{margin-top:-4px;padding:0 var(--tw-s2) var(--tw-s2)}
  .tw-before-l{font-size:var(--tw-pen-fs-m)}
  .tw-card{padding:var(--tw-s5) var(--tw-s4) var(--tw-s4);min-height:250px}
  .tw-next-main{padding:var(--tw-s5) var(--tw-s5) var(--tw-s5)}
}

/* ---------- 21.10 (Павел: «перегружено — уровень, ещё раз уровень, слушать, переключатель, перед чтением») ----------
   строки «уровень · вариант · минуты» больше нет (уровень — во вкладках); на узком экране reading.js сворачивает
   «Before you read» в полоску над листом (.is-shut), а на телефоне ставит Listen и English в полосу внизу (.is-dock),
   пока лист текста на экране; полоса уходит, когда играет звук (своя полоса listen.js) или открыта шторка перевода.
   22.10 (финальная проверка, qa 3): свёрнутый вид и полоса внизу — сразу из CSS под .tw-js, до скрипта (иначе страница
   прыгала на медленной сети); скрипт только открывает записку (.is-open) и прячет полосу (.is-off) */
.tw-penhint[hidden]{display:none}
.tw-before-b{display:inline-flex;align-items:center;gap:var(--tw-s3);min-height:44px;margin:-10px 0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.tw-before-ar{display:none;width:0;height:0;border:6px solid transparent;border-left:8px solid currentColor;border-right:0;transition:transform .2s}
.tw-before-b[aria-expanded="true"] .tw-before-ar{transform:rotate(90deg)}
@media (max-width:999px){
  .tw-before-ar{display:inline-block}
  .tw-js .tw-rgrid>.tw-before[data-before]:not(.is-open){justify-self:start;z-index:2;margin-bottom:0;padding:var(--tw-s2) var(--tw-s4);transform:rotate(-1.2deg)}
  .tw-js .tw-before[data-before]:not(.is-open) .tw-before-l{margin:0}
  .tw-js .tw-rgrid:has(.tw-before[data-before]:not(.is-open)) .tw-reader>.tw-tape{display:none}
  .tw-js .tw-before[data-before]:not(.is-open) .tw-before-t,.tw-js .tw-before[data-before]:not(.is-open) .tw-kw{display:none}
}
@media (max-width:760px){
  .tw-entog-x{display:none}
  .tw-js .tw-rbar:has([data-dock]){margin:0}
  .tw-js .tw-rbar-r[data-dock]{position:fixed;z-index:45;left:0;right:0;bottom:0;flex-wrap:nowrap;justify-content:space-between;gap:var(--tw-s3);padding:var(--tw-s2) var(--tw-s4) calc(8px + env(safe-area-inset-bottom));background:var(--tw-sheet);box-shadow:0 -14px 26px -18px rgba(60,40,20,.6);transition:transform .25s ease}
  .tw-js .tw-rbar-r[data-dock].is-off,.tw-js body.has-lbar .tw-rbar-r[data-dock],.tw-js body:has(.tw-rc.is-sheet:not([hidden])) .tw-rbar-r[data-dock]{transform:translateY(130%)}
  .tw-js body:has([data-dock]){padding-bottom:var(--tw-s8)}
}
@media (prefers-reduced-motion:reduce){.tw-rbar-r[data-dock],.tw-before-ar{transition:none}}
/* 22.10 (вечер, ux 4, qa 9): фокус с клавиатуры не уходит под нижнюю полосу (док Listen/English, полоса Listen) */
@media (max-width:760px){html:has(.tw-rbar-r[data-dock]){scroll-padding-bottom:96px}}
html:has(body.has-lbar){scroll-padding-bottom:96px}
/* ux 13: уехавший док не держит фокус за краем экрана — прячется после выезда, возвращается сразу */
@media (max-width:760px){
  .tw-js .tw-rbar-r[data-dock].is-off,.tw-js body.has-lbar .tw-rbar-r[data-dock],.tw-js body:has(.tw-rc.is-sheet:not([hidden])) .tw-rbar-r[data-dock]{visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
}
/* 21.10: «Listen» у слова на карточке — в углу */
.tw-card-say{position:absolute;top:16px;right:16px;min-height:44px!important;padding:0 var(--tw-s4)!important;font-size:var(--tw-fs-small)!important}
/* 22.10 (финальная проверка, qa 3): колода карточек видна сразу под .tw-js и держит место — на flashcards страница не прыгает */
.tw-js [data-cards][hidden]{display:block!important}/* 22.10 (вечер): !important — сильнее общего [hidden] в site.css */
.tw-js .tw-deck:empty{min-height:270px}

/* 22.10 (design 6): одна большая карточка «дальше» — «Read next» в статье, «Keep going» у выпуска */
.tw-rcards-1{grid-template-columns:minmax(0,560px)}
.tw-rcards-1 .tw-rcard-t{font-size:var(--tw-fs-h3)}
/* 22.10 (design 7): «Check yourself» в статье — на листе со скотчем, как вопросы выпуска и тест; варианты не шире 560 */
.tw-read .tw-level .tw-qs{position:relative;max-width:820px;padding:0;border-top:0;background:none;box-shadow:none}
.tw-read .tw-level .tw-qs>li:last-child{border-bottom:0}
.tw-read .tw-qs>li.is-live ul{max-width:560px}

/* 22.10 (финальная проверка, qa 18): печать статьи — чистый лист: заголовок, «Before you read», текст выбранного уровня,
   вопросы; без шапки, вкладок, звука, карточек, формы и вещиц. Английский печатается, если он открыт под абзацами. */
@media print{
  #tw-top,#tw-foot,#notify,.tw-bg,.tw-head-obj,.tw-crumbs,.tw-tabs,.tw-rbar,.tw-listen,.tw-entog,.tw-penhint,.tw-cards,.tw-next,.tw-rc,.tw-tape,.tw-slotbar,.tw-fly{display:none!important}
  body{background:#fff!important;color:#000}
  .tw-js .tw-main{padding-top:0!important}
  .tw-read .tw-level,.tw-read .tw-level .tw-reader,.tw-before,.tw-read .tw-level .tw-qs{margin:0!important;padding:0!important;background:none!important;box-shadow:none!important;transform:none!important}
  .tw-rgrid{display:block!important}
  .tw-before{margin-bottom:var(--tw-s4)!important}
  .tw-before .tw-before-t,.tw-before .tw-kw{display:revert!important}
  .tw-t{background:none!important;border:0!important;text-decoration:none!important}
  .tw-para,.tw-qs>li{break-inside:avoid}
  .tw-qopt{border:1px solid #999!important;background:none!important}
  a{color:inherit;text-decoration:none}
}
/* 22.10: слово с клавиатуры (Tab, ← →) — видимая рамка */
.tw-t:focus-visible{outline:2.5px solid var(--tw-ink);outline-offset:2px;border-radius:.2em}