/* Компоненты блога. Значения только из tokens.css. */
@import url("../fonts/fonts.css");
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }

/* Ссылки: подчёркнуты, цветом текста (bar.md, механика 6) */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* Шапка */
.site-head { border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--s-8); }
.brand { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-small); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.nav { display: flex; gap: var(--s-3); font-family: var(--font-sans); font-size: var(--fs-small); }
.nav a { text-decoration: none; color: var(--ink-muted); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav .nav-cta { color: var(--ink); text-decoration: underline; }
/* Гамбургер: до 720 px пункты разделов свёрнуты, кнопка слева от названия, «Установка под ключ» видна всегда */
.nav-toggle { display: none; align-items: center; justify-content: center; width: var(--s-6); height: var(--s-6); margin-left: calc(-1 * var(--s-1)); padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.nav-toggle svg { width: var(--s-3); height: var(--s-3); }
@media (max-width: 720px) {
  .site-head .wrap { flex-wrap: wrap; justify-content: flex-start; }
  .nav-toggle { display: inline-flex; }
  .brand { margin-right: auto; }
  .nav a:not(.nav-cta) { display: none; }
  .site-head[data-nav-open] .nav { flex-basis: 100%; flex-direction: column; gap: var(--s-2); padding: var(--s-1) 0 var(--s-3); }
  .site-head[data-nav-open] .nav a { display: block; }
}

/* Хлебные крошки */
.crumbs { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--ink-muted); margin: var(--s-4) 0 var(--s-2); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-1); color: var(--rule); }
.crumbs a { text-decoration: none; color: var(--ink-muted); }

/* Заголовок страницы: H1 и лид гротеском */
.page-head { display: grid; grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-2) 0 var(--s-6); border-bottom: 1px solid var(--rule); }
.page-head .mark { width: var(--mark-sm); height: var(--mark-sm); color: var(--ink); }
.page-head .mark svg { width: 100%; height: 100%; display: block; }
.page-head .mark .fill-accent { fill: var(--accent); stroke: none; }
.page-head .mark .fill-ink { fill: currentColor; stroke: none; }
@media (min-width: 1000px) {
  .page-head { grid-template-columns: var(--rail) minmax(0, var(--measure)); column-gap: var(--s-8); align-items: end; }
  .page-head .mark { width: var(--mark-lg); height: var(--mark-lg); }
}
h1, h2, h3 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); margin: 0 0 var(--s-3); }
.lead { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: 1.4; margin: 0; font-weight: 400; }
@media (max-width: 720px) {
  :root { --fs-h1: 2.5rem; --fs-lead: 1.25rem; --fs-h2: 1.5rem; --fs-body: 1.0625rem; }  /* телефон: текст 17 px (v2, 07.10.2026; было 16), H1 2,5 и H2 1,5 rem */
}

/* Сетка статьи: служебная полоса слева, колонка текста */
.article-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-6) 0 var(--s-12); }
@media (min-width: 1000px) {
  .article-grid { grid-template-columns: var(--rail) minmax(0, var(--measure)); column-gap: var(--s-8); }
}
.rail { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--ink-muted); }
.rail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-2); }
@media (min-width: 1000px) { .rail dl { grid-template-columns: 1fr; gap: 0; } .rail dd { margin: 0 0 var(--s-2); color: var(--ink); } .rail .toc { position: sticky; top: var(--s-4); } }
.rail dt { color: var(--ink-muted); }
.rail dd { margin: 0; color: var(--ink); }
.toc { margin-top: var(--s-4); }
.toc p { margin: 0 0 var(--s-1); color: var(--ink-muted); }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin: 0 0 var(--s-1); }
.toc a { text-decoration: none; color: var(--ink); }
@media (max-width: 999px) { .toc { display: none; } }

/* Текст статьи: ритм H2 не меньше двух межабзацных (bar.md, механика 7) */
.prose { min-width: 0; }
.prose > * { margin: 0 0 var(--s-3); }
.prose > h2:first-child { margin-top: 0; }
.prose h2 { font-size: var(--fs-h2); line-height: 1.25; margin: var(--s-8) 0 var(--s-2); scroll-margin-top: var(--s-4); }
.prose h3 { font-size: var(--fs-body); margin: var(--s-4) 0 var(--s-1); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: var(--s-1); }
.prose code { font-family: var(--font-mono); font-size: var(--fs-small); background: var(--code-inline-bg); border-radius: var(--radius); padding: 0 var(--s-05); white-space: nowrap; }
.prose strong { font-weight: 600; }

/* Ответ в начале: первый абзац после H1, отделён линией слева */
.answer { border-left: 2px solid var(--ink); padding-left: var(--s-2); font-size: var(--fs-body); }
.answer p { margin: 0; }

/* Блок кода */
/* Код и терминал одного вида: тёмная плашка в обеих темах, без светлой карточки на светлом фоне */
.code { margin: 0 0 var(--s-3); border: 1px solid var(--code-rule); border-radius: var(--radius); background: var(--term-bg); color: var(--term-ink); overflow: hidden; }
.code figcaption { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: var(--fs-small); color: var(--term-muted); padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--term-rule); }
.code pre { margin: 0; padding: var(--s-2); overflow-x: auto; font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.55; }

/* Вывод терминала: тёмный в обеих темах */
.term { margin: 0 0 var(--s-3); border: 1px solid var(--code-rule); border-radius: var(--radius); background: var(--term-bg); color: var(--term-ink); overflow: hidden; }
.term figcaption { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--term-muted); padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--term-rule); }
.term pre { margin: 0; padding: var(--s-2); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.55; }
.term .p { color: var(--term-muted); user-select: none; }
.term .ok { color: var(--term-ok); }
.term .err { color: var(--term-err); }

/* След применения: фирменный элемент. Версия, дата, среда, где лежит лог */
.trace { margin: 0 0 var(--s-3); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: var(--s-2) 0; font-family: var(--font-sans); font-size: var(--fs-small); }
.trace-label { display: block; color: var(--ink); font-weight: 600; margin-bottom: var(--s-1); }
.trace dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-05) var(--s-2); margin: 0; }
.trace dt { color: var(--ink-muted); }
.trace dd { margin: 0; overflow-wrap: anywhere; }

/* Таблицы и сравнения */
.table-wrap { margin: 0 0 var(--s-3); overflow-x: auto; }
.prose .hub-list, .prose .steps, .prose .term-index { padding-left: 0; }
@media (max-width: 720px) {
  /* На телефоне таблица и код переносятся по ширине экрана, а не уходят за край */
  th, td { padding-right: var(--s-1); }
  /* Код не переносится (ломает отступы YAML), а прокручивается; тень у края показывает, что строка длиннее экрана */
  .code pre {
    background:
      linear-gradient(to right, var(--term-bg) 30%, transparent) left / var(--s-4) 100% no-repeat local,
      linear-gradient(to left, var(--term-bg) 30%, transparent) right / var(--s-4) 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--term-rule), transparent) left / var(--s-1) 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--term-rule), transparent) right / var(--s-1) 100% no-repeat scroll;
  }
}
table { border-collapse: collapse; width: 100%; font-family: var(--font-sans); font-size: var(--fs-small); }
caption { text-align: left; color: var(--ink-muted); padding-bottom: var(--s-1); }
th, td { text-align: left; vertical-align: top; padding: var(--s-1) var(--s-2) var(--s-1) 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; border-bottom-color: var(--ink); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Призыв к услуге: строка с линией, без карточки */
.cta { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: var(--s-3) 0; margin: var(--s-6) 0; display: grid; gap: var(--s-2); }
.cta p { margin: 0; }
.cta .cta-title { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body); }
.button { display: inline-block; justify-self: start; background: var(--fill); color: var(--on-fill); font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-small); text-decoration: none; padding: var(--s-1) var(--s-3); border-radius: var(--radius); }
.button:hover { color: var(--accent-ink); filter: brightness(1.08); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--rule); padding: var(--s-2) 0; }
.faq summary { font-family: var(--font-sans); font-weight: 600; cursor: pointer; }
.faq details p { margin: var(--s-1) 0 0; }

/* Автор в конце статьи */
.byline { display: grid; grid-template-columns: var(--s-8) 1fr; gap: var(--s-2); align-items: start; border-top: 1px solid var(--rule); padding-top: var(--s-3); margin-top: var(--s-8); }
.avatar { width: var(--s-8); height: var(--s-8); border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; font-family: var(--font-sans); font-weight: 600; color: var(--ink-muted); }
.byline p { margin: 0 0 var(--s-1); }

/* Хаб: список страниц раздела с ответом в одну строку */
.hub-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.hub-list li { display: grid; grid-template-columns: 1fr; gap: var(--s-05); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) {
  .hub-list li { grid-template-columns: 1fr max-content; column-gap: var(--s-4); }
  .hub-list li > a { grid-column: 1; grid-row: 1; }
  .hub-list li > .meta { grid-column: 2; grid-row: 1; }
  .hub-list li > p { grid-column: 1 / -1; grid-row: 2; }
}
.hub-list a { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body); text-decoration: none; }
.hub-list a:hover { text-decoration: underline; }
.hub-list .meta { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--ink-muted); white-space: nowrap; }
.hub-list p { margin: 0; }
.section-title, .prose h2.section-title { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: 1.25; color: var(--ink); margin: var(--s-8) 0 var(--s-2); font-weight: 600; letter-spacing: -0.015em; }

/* Глоссарий: определение крупно, затем пример */
.definition { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: 1.4; margin: 0; }
.term-index { columns: 2 var(--term-col); column-gap: var(--s-4); padding: 0; list-style: none; font-family: var(--font-sans); font-size: var(--fs-small); }
.term-index li { margin-bottom: var(--s-1); break-inside: avoid; }

/* Страница услуги: шаги, состав, цена */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.steps li { counter-increment: step; display: grid; grid-template-columns: var(--s-6) 1fr; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: var(--fs-small); color: var(--ink-muted); padding-top: var(--s-05); }
.steps h3 { margin: 0 0 var(--s-1); font-size: var(--fs-body); }
.steps p { margin: 0; }
.price { font-family: var(--font-sans); display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin: var(--s-6) 0; }
.price .amount { font-size: var(--fs-h2); font-weight: 600; }
.price p { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); }

/* Подвал */
.site-foot { border-top: 1px solid var(--rule); padding: var(--s-4) 0 var(--s-6); font-family: var(--font-sans); font-size: var(--fs-small); color: var(--ink-muted); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between; }
.site-foot a { color: var(--ink-muted); }

.theme-toggle { font: inherit; font-family: var(--font-sans); font-size: var(--fs-small); background: none; border: 1px solid var(--rule); color: var(--ink-muted); border-radius: var(--radius); padding: var(--s-05) var(--s-1); cursor: pointer; }

/* Вкладки «Статья / Гайд»: смысл и результат отдельно от команд (решение Дмитрия 06.10.2026, образец comandos). Без скрипта: радиокнопки и соседние селекторы */
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tabs-bar { display: flex; gap: 0; border-bottom: 1px solid var(--rule); margin: var(--s-4) 0 var(--s-3); }
.tabs-bar label { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body); padding: var(--s-1) var(--s-3); cursor: pointer; color: var(--ink-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs-bar label:hover { color: var(--ink); }
#vk-statya:checked ~ .tabs-bar label[for="vk-statya"], #vk-gayd:checked ~ .tabs-bar label[for="vk-gayd"] { color: var(--ink); border-bottom-color: var(--ink); }
#vk-statya:focus-visible ~ .tabs-bar label[for="vk-statya"], #vk-gayd:focus-visible ~ .tabs-bar label[for="vk-gayd"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.tab-panel { display: none; }
#vk-statya:checked ~ .tab-statya, #vk-gayd:checked ~ .tab-gayd { display: block; }
.to-guide { font-family: var(--font-sans); font-weight: 600; }
@media (max-width: 600px) { .tabs-bar label { flex: 1; text-align: center; padding: var(--s-1) var(--s-1); } }
.trace dl { grid-template-columns: max-content minmax(0, 1fr); } .trace code { white-space: normal; overflow-wrap: anywhere; }
.tabs { scroll-margin-top: 5rem; }

/* Ссылки в тексте синие (правило Дмитрия 05.10.2026, ТЗ главной 08.10.2026): акцент темы, 6,3:1 в светлой, 9,5:1 в тёмной */
p a[href], li a[href], dd a[href], td a[href], .site-foot a { color: var(--accent); }

/* Главная, 08.10.2026: три входа, тарифы, автор, связь. Рамка карточек --edge не ниже 3:1 (kp-site-standards) */
.home-head { padding: var(--s-6) 0 var(--s-4); border-bottom: 1px solid var(--rule); }
.home-head h1 { font-family: var(--font-sans); font-weight: 800; font-size: clamp(2rem, 5vw, var(--fs-h1)); line-height: var(--lh-tight); margin: 0 0 var(--s-3); max-width: 22ch; }
.home-head .lead { font-family: var(--font-sans); font-size: clamp(1.125rem, 2.4vw, var(--fs-lead)); line-height: 1.45; color: var(--ink-muted); margin: 0; max-width: 40rem; }
.home-sec { padding: var(--s-6) 0 0; }
.home-sec > h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-tight); margin: 0 0 var(--s-1); }
.home-sec > .sub { margin: 0 0 var(--s-3); color: var(--ink-muted); max-width: var(--measure); }
.entries, .tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 800px) { .entries, .tiers { grid-template-columns: repeat(3, 1fr); } }
.entry { display: flex; flex-direction: column; gap: var(--s-1); height: 100%; padding: var(--s-3); border: 1px solid var(--edge); border-radius: var(--radius); background: var(--paper-raised); text-decoration: none; color: var(--ink); }
.entry:hover { border-color: var(--accent); color: var(--ink); }
.entry .k { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.entry b { font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.3; }
.entry span:last-child { margin-top: auto; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--accent); }
.tier { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border: 1px solid var(--edge); border-radius: var(--radius); background: var(--paper-raised); }
.tier h3 { font-family: var(--font-sans); font-size: var(--fs-body); margin: 0; }
.tier .amount { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); line-height: 1.2; }
.tier ul { margin: 0; padding-left: 1.1em; }
.tier p { margin: 0; }
.home-note { color: var(--ink-muted); max-width: var(--measure); }
.author-card { display: grid; grid-template-columns: 1fr; gap: var(--s-3); align-items: start; }
@media (min-width: 700px) { .author-card { grid-template-columns: 12rem 1fr; } }
.author-card img { width: 12rem; height: 12rem; object-fit: cover; border-radius: 50%; border: 1px solid var(--edge); }
.author-card p { margin: 0 0 var(--s-2); max-width: var(--measure); }
.msgr { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
.msgr a { display: inline-flex; align-items: center; min-height: var(--s-6); padding: 0 var(--s-3); border-radius: var(--radius); color: #FFFFFF; font-family: var(--font-sans); font-weight: 700; font-size: 1.1875rem; text-decoration: none; }
.msgr a:hover { color: #FFFFFF; filter: brightness(1.1); }
/* Цвета мессенджеров по правилу messenger-buttons-in-brand-colors: Telegram 3,02:1 с белым при крупном жирном тексте, MAX градиент логотипа, WhatsApp #128C7E как на dmitryrost.ru, 4,14:1 */
.msgr .tg { background: #229ED9; }
.msgr .max { background: linear-gradient(135deg, #1B0B5E 0%, #400CAC 55%, #6B0F8F 100%); }
.msgr .wa { background: #128C7E; }
.msgr .tel { background: transparent; color: var(--ink); border: 1px solid var(--edge); }
.msgr .tel:hover { color: var(--ink); }
.hub-soon { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body); color: var(--ink-muted); }
.site-foot .legal { flex-basis: 100%; }
.policy h2 { font-family: var(--font-sans); font-size: 1.25rem; margin: var(--s-4) 0 var(--s-1); }
.policy p { margin: 0 0 var(--s-1); }
.entries .entry, .entries .entry:hover { color: var(--ink); }
.home-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); max-width: 48rem; }
.home-points li { padding-left: var(--s-2); border-left: 3px solid var(--fill); }
.tier .tier-note { color: var(--ink-muted); font-family: var(--font-sans); font-size: var(--fs-small); }

/* Первый экран главной со схемой справа, 08.10.2026 (скилл infographic). Выделение одно: кнопка «Да» цветом --fill */
@media (min-width: 1000px) {
  .home-head.has-demo { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--s-6); align-items: center; }
  .home-head.has-demo h1 { font-size: 2.5rem; max-width: none; }
}
.home-head.has-demo .tg-demo { margin: var(--s-4) 0 0; }
@media (min-width: 1000px) { .home-head.has-demo .tg-demo { margin: 0; } }
.tg-demo { max-width: 26rem; font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.45; }
.tg-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--edge); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--paper-raised); }
.tg-ava { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--paper-raised); border: 1px solid var(--edge); color: var(--ink); display: grid; place-items: center; }
.tg-ava svg { width: 1.75rem; height: 1.75rem; }
.tg-ava .fill-accent, .tg-ava .fill-ink { fill: currentColor; stroke: none; }
.tg-who { display: grid; }
.tg-who b { font-size: 1rem; }
.tg-status { font-size: var(--fs-small); color: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px; }
.tg-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }
.tg-body { display: grid; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--edge); border-radius: 0 0 var(--radius) var(--radius); background: var(--accent-soft); }
.tg-day { margin: 0; justify-self: center; font-size: var(--fs-small); color: var(--ink-muted); }
.tg-msg { position: relative; padding: var(--s-1) var(--s-2) var(--s-2); border-radius: 10px; background: var(--paper-raised); border: 1px solid var(--rule); }
.tg-msg p { margin: 0; padding-right: 2.75rem; }
.tg-t { position: absolute; right: var(--s-2); top: var(--s-1); font-size: 0.75rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tg-ok { color: var(--ok); font-weight: 700; }
.tg-tag { display: inline-block; margin-top: var(--s-1); font-size: 0.75rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-muted); }
.tg-tag-hl { color: var(--ink); }
.tg-ask { border: 2px solid var(--accent); }
.tg-btns { display: flex; gap: var(--s-1); margin-top: var(--s-2); }
.tg-btns button { min-height: 2.5rem; padding: 0 var(--s-3); border-radius: var(--radius); font: 700 1rem var(--font-sans); cursor: pointer; }
.tg-yes { background: var(--fill); color: var(--on-fill); border: 2px solid var(--accent); }
.tg-yes:hover { filter: brightness(1.15); }
.tg-edit { background: transparent; color: var(--ink); border: 1px solid var(--edge); }
.tg-edit:hover { border-color: var(--accent); }
.tg-draft { color: var(--ink); }
.tg-sent { font-weight: 700; color: var(--ok); }
.tg-demo figcaption { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--ink-muted); }
.tg-anim .tg-msg { opacity: 0; transform: translateY(8px); }
.tg-anim.tg-in .tg-msg { opacity: 1; transform: none; transition: opacity 400ms ease var(--d), transform 400ms ease var(--d); }
@media (prefers-reduced-motion: reduce) { .tg-anim .tg-msg { opacity: 1; transform: none; } }
@media print { .tg-anim .tg-msg { opacity: 1; transform: none; } }