/* ==========================================================
   Почтальон Ссылкин — тема «Почта и марки»
   Один CSS-файл на все страницы: главная, площадка, статья.
   ========================================================== */

/* ---------- 1. Цвета и размеры ---------- */
:root {
  --bg: #D9C3A3;          /* крафтовая бумага */
  --bg-dot: #CDB491;      /* точки фактуры */
  --card: #F5EBDD;        /* бумажная карточка / конверт */
  --field: #FFF9F0;       /* поле ввода */
  --ink: #203A5B;         /* чернила: основной текст */
  --ink-soft: #4E5D6E;    /* второстепенный текст */
  --blue: #325C8A;        /* почтовый синий */
  --red: #A9443A;         /* сургуч */
  --red-dark: #8A3229;
  --green: #B7C9A8;       /* бледно-зелёный */
  --green-ink: #2F4A2A;
  --line: #6C5847;        /* линии, рамки, штемпели */
  --on-accent: #FFF9F0;   /* текст на красной/синей кнопке */
  --shadow: 0 2px 0 rgba(60, 40, 20, .18), 0 8px 18px rgba(60, 40, 20, .14);

  --radius: 6px;
  --wrap: 720px;
  --gap: 16px;

  --font-head: "Old Standard TT", "Times New Roman", serif;
  --font-text: "PT Sans", "Segoe UI", Arial, sans-serif;

  color-scheme: light;
}

/* тёмная тема — «вечер на почте», не инверсия */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2A2621; --bg-dot: #332E28; --card: #3A342D; --field: #4A433A;
    --ink: #F2E7D5; --ink-soft: #CBBEA9; --blue: #8FB0D8; --red: #C25B4F;
    --red-dark: #A34A3F; --green: #4F5E48; --green-ink: #E3EBD9; --line: #8C7A67;
    --on-accent: #FFF9F0;
    --shadow: 0 2px 0 rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #2A2621; --bg-dot: #332E28; --card: #3A342D; --field: #4A433A;
  --ink: #F2E7D5; --ink-soft: #CBBEA9; --blue: #8FB0D8; --red: #C25B4F;
  --red-dark: #A34A3F; --green: #4F5E48; --green-ink: #E3EBD9; --line: #8C7A67;
  --on-accent: #FFF9F0;
  --shadow: 0 2px 0 rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}

/* ---------- 2. Основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 17px/1.55 var(--font-text);
  color: var(--ink);
  background-color: var(--bg);
  /* лёгкая бумажная фактура без картинок */
  background-image:
    radial-gradient(var(--bg-dot) 1px, transparent 1.4px),
    radial-gradient(var(--bg-dot) 1px, transparent 1.4px);
  background-size: 23px 23px, 31px 31px;
  background-position: 0 0, 11px 17px;
  min-height: 100vh;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--red); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; margin: 0 0 .4em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* ---------- 3. Общие «почтовые» детали ---------- */

/* Конверт авиапочты: полосатая кайма */
.envelope {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 18px;
}
.envelope::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none;
  padding: 6px;
  background: repeating-linear-gradient(-45deg,
    var(--red) 0 10px, transparent 10px 16px, var(--blue) 16px 26px, transparent 26px 32px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85;
}

/* Простая бумажная карточка */
.paper { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }

/* Марка: зубчатый край через маску */
.stamp {
  --perf: 5px;
  position: relative;
  background: var(--card);
  padding: 10px 12px;
  -webkit-mask:
    radial-gradient(circle var(--perf) at center, #0000 98%, #000) calc(var(--perf) * -1) calc(var(--perf) * -1) / calc(var(--perf) * 3) calc(var(--perf) * 3) round,
    linear-gradient(#000 0 0) center / calc(100% - var(--perf) * 3) calc(100% - var(--perf) * 3) no-repeat;
          mask:
    radial-gradient(circle var(--perf) at center, #0000 98%, #000) calc(var(--perf) * -1) calc(var(--perf) * -1) / calc(var(--perf) * 3) calc(var(--perf) * 3) round,
    linear-gradient(#000 0 0) center / calc(100% - var(--perf) * 3) calc(100% - var(--perf) * 3) no-repeat;
  filter: drop-shadow(0 2px 2px rgba(60,40,20,.2));
}

/* Круглый штемпель (декор) */
.postmark {
  position: absolute; width: 74px; height: 74px; border-radius: 50%;
  border: 2px solid var(--line); color: var(--line); opacity: .55;
  display: grid; place-items: center; text-align: center;
  font: 700 9px/1.1 var(--font-text); letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-14deg); pointer-events: none;
}
.postmark::before { content: ""; position: absolute; inset: 5px; border: 1px solid currentColor; border-radius: 50%; }
.postmark b { font-size: 13px; display: block; margin: 2px 0; letter-spacing: 0; }

/* Сургучная печать (декор) */
.seal {
  width: 46px; height: 46px; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #d06a5e, var(--red) 55%, var(--red-dark));
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.25);
  display: grid; place-items: center; color: rgba(255,240,230,.85);
}
.seal svg { width: 20px; height: 20px; }

/* ---------- 4. Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px;
  font: 700 18px/1.1 var(--font-head);
  border: 0; border-radius: 4px; cursor: pointer; text-decoration: none;
  transition: transform .08s, filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn-red {
  background: var(--red); color: var(--on-accent);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 3px 0 var(--red-dark);
}
.btn-red:hover { filter: brightness(1.07); color: var(--on-accent); }
.btn-blue { background: var(--blue); color: var(--on-accent); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
:root[data-theme="dark"] .btn-blue { color: #1E2A38; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-blue { color: #1E2A38; } }
.btn-blue:hover { filter: brightness(1.08); }
.btn-ghost {
  background: var(--green); color: var(--green-ink);
  border: 2px dashed color-mix(in srgb, var(--green-ink) 35%, transparent);
}
.btn-block { width: 100%; }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ---------- 5. Шапка ---------- */
.site-header { padding: 14px 0 6px; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  font: 700 22px/1 var(--font-head);
}
.logo img { width: 40px; height: 40px; }
.logo span { display: block; }
.logo small { display: block; font: 400 12px/1.2 var(--font-text); color: var(--ink-soft); margin-top: 3px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.tg-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: var(--card); border-radius: 4px; text-decoration: none; font-weight: 700; font-size: 15px;
  box-shadow: var(--shadow);
}
.tg-link { white-space: nowrap; }
.tg-link svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 400px) {
  .logo { font-size: 19px; gap: 8px; }
  .logo img { width: 34px; height: 34px; }
  .tg-link { padding: 8px 10px; font-size: 14px; }
}
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); background: var(--card);
  color: var(--ink); cursor: pointer; display: grid; place-items: center;
}
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }

/* ---------- 6. Главный блок ---------- */
.hero { position: relative; padding: 8px 0 0; }
.hero-art {
  position: relative; height: 200px; margin: 0 auto -18px; display: flex; justify-content: center; align-items: flex-end;
}
.hero-art img.hero-char { height: 100%; width: auto; position: relative; z-index: 2; }
.hero-art .bubble {
  position: absolute; left: calc(50% + 58px); top: 14px; max-width: 150px; z-index: 3;
  background: var(--field); color: var(--ink); padding: 8px 10px; border-radius: 10px;
  font: italic 15px/1.3 var(--font-head); box-shadow: var(--shadow);
  transform: rotate(3deg);
}
.hero-art .bubble::after {
  content: ""; position: absolute; left: -8px; bottom: 14px; border: 8px solid transparent; border-right-color: var(--field); border-left: 0;
}
.hero-art .postmark { right: calc(50% + 80px); top: 30px; }
@media (min-width: 560px) { .hero-art .bubble { left: calc(50% + 80px); } }

/* главная: Ссылкин крупно, по пояс — выглядывает из-за конверта с полем (просьба Саши 15.10).
   Пояс — на ~60% высоты фигуры, поэтому картинка в 1,68 раза выше окна, лишнее прячется за конвертом. */
.hero-art.waist { height: 210px; overflow: hidden; align-items: flex-start; }
.hero-art.waist img.hero-char { height: 168%; max-width: none; }
.hero-art picture { display: contents; }  /* картинка — прямо в ряду .hero-art, иначе 168% не от чего считать */
.hero-art.waist .postmark { right: auto; left: 2px; top: 34px; }
.hero-art.waist .bubble { left: auto; right: 0; top: 6px; max-width: 124px; font-size: 14px; }
@media (min-width: 560px) {
  .hero-art.waist { height: 280px; }
  .hero-art.waist .postmark { left: auto; right: calc(50% + 120px); top: 46px; }
  .hero-art.waist .bubble { right: auto; left: calc(50% + 112px); top: 18px; max-width: 160px; font-size: 15px; }
}

.deliver { position: relative; z-index: 4; text-align: center; padding-top: 26px; }
.deliver h1 { font-size: clamp(28px, 7.4vw, 40px); color: var(--ink); }
.deliver .lead { margin: 0 auto 18px; max-width: 30em; color: var(--ink-soft); font-size: 16px; }

.url-form { display: flex; flex-direction: column; gap: 10px; }
.url-field { position: relative; }
.url-field svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--line); }
.url-field input {
  width: 100%; min-height: 54px; padding: 12px 14px 12px 44px;
  font: 17px var(--font-text); color: var(--ink);
  background: var(--field); border: 2px solid var(--line); border-radius: 4px;
}
.url-field input::placeholder { color: var(--ink-soft); opacity: .85; }
.url-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent); }
.url-form .btn { min-height: 54px; font-size: 21px; }
.platforms-line { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }

@media (min-width: 560px) {
  .url-form { flex-direction: row; }
  .url-field { flex: 1; }
  .url-form .btn { padding: 0 28px; }
  .hero-art { height: 240px; }
}

/* ---------- 7. Карточка результата ---------- */
.result { margin-top: 22px; }
.result .postmark { right: 10px; top: 8px; width: 64px; height: 64px; }
.result:not([data-state="idle"]):not([data-state="search"]) .postmark { display: none; }
.result-body { min-height: 180px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.result-char { height: 130px; width: auto; }
.result-title { font: 700 19px/1.25 var(--font-head); margin: 0; }
.result-note { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* каждое состояние показывается только в своём data-state */
.state { display: none; width: 100%; }
.result[data-state="idle"] .state-idle,
.result[data-state="search"] .state-search,
.result[data-state="choose"] .state-choose,
.result[data-state="loading"] .state-loading,
.result[data-state="ready"] .state-ready,
.result[data-state="error"] .state-error { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.result[data-state="choose"] .state-choose { align-items: stretch; text-align: left; }

/* пустое состояние: посылочка-контур */
.empty-box { width: 64px; height: 64px; color: var(--line); opacity: .8; }

/* поиск: Ссылкин едет */
.state-search .result-char { animation: ride 1s ease-in-out infinite; }
@keyframes ride { 0%,100% { transform: translateX(-6px) rotate(-1deg); } 50% { transform: translateX(6px) rotate(1deg); } }
.dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* выбор качества */
.video-meta { display: flex; gap: 12px; width: 100%; text-align: left; align-items: center; }
.thumb { flex: none; width: 128px; aspect-ratio: 16 / 10; padding: 6px; }
.thumb .thumb-img:not([src]), .thumb .thumb-img[src=""] { visibility: hidden; }
.thumb { background: linear-gradient(#9cc0d8, #cfe0c3 60%, #8fae72 61%) content-box, var(--card); }
.thumb .thumb-img { width: 100%; height: 100%; border-radius: 2px; object-fit: cover; background: linear-gradient(#9cc0d8, #cfe0c3 60%, #8fae72 61%); }
.video-meta .result-title { font-size: 17px; }
.duration { font-size: 14px; color: var(--ink-soft); }

.quality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.q-btn {
  --perf: 4px;
  position: relative; border: 0; cursor: pointer; min-height: 50px; padding: 8px 6px;
  font: 700 16px/1.2 var(--font-text); color: var(--ink); background: var(--field);
}
.q-btn small { font-weight: 400; color: var(--ink-soft); }
.q-btn:hover, .q-btn[aria-pressed="true"] { background: var(--green); color: var(--green-ink); }
.q-btn:hover small, .q-btn[aria-pressed="true"] small { color: var(--green-ink); }
.q-btn .bolt { color: #C98A00; margin-left: 2px; }
:root[data-theme="dark"] .q-btn .bolt { color: #F7C531; }
.q-hint { font-size: 13px; color: var(--ink-soft); margin: 0; }

/* загрузка */
.progress { width: 100%; height: 20px; border-radius: 10px; background: var(--field); border: 2px solid var(--line); overflow: hidden; }
.progress-bar {
  height: 100%; width: 0; background: repeating-linear-gradient(-45deg, #5E8A5A 0 10px, #6F9C6A 10px 20px);
  transition: width .3s ease;
}
.percent { font: 700 30px/1 var(--font-head); }

/* готово и ошибка */
.state-ready .btn, .state-error .btn { width: 100%; }
.err-title { color: var(--red); }

/* картинка + текст внутри состояния: столбиком на телефоне, рядом на компьютере */
.state-row { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.state-row > div { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
@media (min-width: 560px) {
  .state-row { flex-direction: row; text-align: left; gap: 20px; }
  .state-row > div { align-items: flex-start; flex: 1; }
  .state-row .btn { width: 100%; }
  .result-char { height: 160px; flex: none; }
}

/* ---------- 8. Блок Telegram ---------- */
.tg-block {
  margin-top: 22px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: var(--green); color: var(--green-ink);
  border: 2px dashed color-mix(in srgb, var(--green-ink) 30%, transparent);
}
.tg-block h2 { font-size: 24px; margin: 0 0 4px; }
.tg-block p { margin: 0; font-size: 15px; }
.tg-block .tg-text { flex: 1 1 220px; }
.tg-plane { width: 48px; height: 48px; color: var(--blue); flex: none; }
:root[data-theme="dark"] .tg-plane { color: #A9C4E6; }
.tg-block .btn { flex: 1 1 100%; }
@media (min-width: 560px) { .tg-block .btn { flex: 0 0 auto; } }

/* ---------- 8½. Блок расширения и страница /rasshirenie ---------- */
.ext-block { margin-top: 22px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ext-block h2 { font-size: 24px; margin: 0 0 4px; }
.ext-block p { margin: 0; font-size: 15px; }
.ext-block .ext-text { flex: 1 1 220px; }
.ext-icon { width: 48px; height: 48px; color: var(--red); flex: none; }
.ext-block .btn { flex: 1 1 100%; }
@media (min-width: 560px) { .ext-block .btn { flex: 0 0 auto; } }
.ext-page .lead { font-size: 18px; color: var(--ink-soft); }
.browser-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.browser-tab {
  border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer;
  font: inherit; font-size: 16px; padding: 8px 14px; border-radius: 4px;
}
.browser-tab[aria-selected="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.browser-panel { padding: 16px; background: var(--bg); border-radius: 4px; margin-bottom: 14px; }
.browser-panel h3 { margin-top: 0; }
.ext-download { margin: 4px 0 6px; max-width: 100%; white-space: normal; }
.ext-steps { padding-left: 1.4em; }
.ext-steps li { margin: .5em 0; }
.ext-address { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 2px; }
.ext-copy {
  border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer;
  font: inherit; font-size: 13px; padding: 2px 8px; border-radius: 3px;
}
.logo-inline { display: inline-block; vertical-align: -5px; width: 1.25em; height: 1.25em; margin: 0 1px; }
.ext-note { font-size: 15px !important; color: var(--ink-soft); margin-bottom: 0; }

/* ---------- 9. Списки площадок и статей ---------- */
.lists { margin-top: 22px; display: grid; gap: 18px; }
@media (min-width: 640px) { .lists { grid-template-columns: 1fr 1fr; } }
.lists h2 { font-size: 22px; }
/* Частые вопросы: строка-вопрос, «+» справа; открыт — «×» и ответ */
.faq-block { margin-top: 22px; }
.faq-block h2 { font-size: 24px; margin: 0 0 8px; }
.faq-item { border-bottom: 1px dashed var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 2px; font-weight: 700; font-size: 17px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; color: var(--ink-soft); font-weight: 400; }
.faq-item[open] summary { color: var(--red); }
.faq-item[open] summary::after { content: "×"; color: var(--red); }
.faq-item summary:hover { color: var(--red); }
.faq-item p { margin: 0 2px 16px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.stamp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stamp-list a {
  --perf: 4px;
  display: block; text-decoration: none; color: var(--ink); background: var(--field);
  padding: 10px 10px; font-size: 15px; line-height: 1.25;
}
.stamp-list a b { display: block; font: 700 16px var(--font-head); color: var(--red); }
/* марки в одном ряду — одной высоты, даже если подпись переносится */
.stamp-list li { display: flex; }
.stamp-list li > a { flex: 1; }
.stamp-list a:hover { background: var(--green); }
/* «Ещё» — марка без площадки: по нажатию всплывашка с остальными сайтами */
.stamp-list .more-btn {
  --perf: 4px; flex: 1; display: block; text-align: left; border: 0; cursor: pointer;
  color: var(--ink); background: var(--field); padding: 10px; font: inherit; font-size: 15px; line-height: 1.25;
}
.stamp-list .more-btn b { display: block; font: 700 16px var(--font-head); color: var(--ink); }
.stamp-list .more-btn:hover { background: color-mix(in srgb, var(--ink) 8%, var(--field)); }
.more-pop {
  border: 0; padding: 20px 18px 16px; width: min(420px, calc(100vw - 32px));
  color: var(--ink); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
}
.more-pop::backdrop { background: rgba(32, 24, 16, .35); }
.more-pop h3 { font: 700 20px var(--font-head); margin: 0 28px 12px 0; }
.more-pop ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.more-pop .more-other { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.more-close {
  position: absolute; top: 6px; right: 8px; border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-soft); padding: 4px 8px;
}
.article-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.article-list a {
  display: block; padding: 10px 12px; text-decoration: none; color: var(--ink);
  background: var(--field); border-left: 4px solid var(--red); border-radius: 2px; font-weight: 700;
}
.article-list a small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 14px; }

/* ---------- 10. Подвал ---------- */
.site-footer { margin: 28px 0 0; padding: 18px 0 30px; border-top: 2px dashed var(--line); font-size: 14px; color: var(--ink-soft); }
.site-footer .wrap { display: flex; align-items: center; gap: 14px; }

/* ---------- 11. Страница статьи ---------- */
.crumbs { font-size: 14px; color: var(--ink-soft); margin: 8px 0 12px; }
.article { padding: 24px 20px; }
.article h1 { font-size: clamp(28px, 7vw, 38px); }
.article .meta { font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; }
.article h2 { font-size: 24px; margin-top: 1.6em; }
.article p, .article li { font-size: 18px; line-height: 1.65; }
.article .mini-form { margin: 18px 0 8px; padding: 16px; background: var(--bg); border-radius: 4px; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps li { counter-increment: step; position: relative; padding: 4px 0 14px 58px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--red); color: var(--red); display: grid; place-items: center;
  font: 700 20px var(--font-head); transform: rotate(-8deg);
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--red);
}
.tip {
  margin: 20px 0; padding: 14px 16px; border-radius: 2px;
  background-color: var(--field);
  background-image: linear-gradient(color-mix(in srgb, var(--blue) 14%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--blue) 14%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
  transform: rotate(-.6deg); box-shadow: var(--shadow);
}
.tip strong { font-family: var(--font-head); color: var(--red); }

/* ---------- 12. Наши тексты в статьях и на площадках: таблицы, вопросы, код ---------- */
.article table { width: 100%; border-collapse: collapse; margin: 12px 0 4px; font-size: 16px; background: var(--field); }
.article th, .article td { text-align: left; padding: 9px 10px; border-bottom: 1px dashed var(--line); vertical-align: top; }
.article th { font-family: var(--font-head); color: var(--red); }
.article h3 { font-size: 19px; margin: 1.2em 0 .3em; }
.article h3 + p { margin-top: 0; }
.article code { background: var(--field); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; font-size: .9em; }
.article ul { padding-left: 1.2em; }
.platform-text { margin-top: 22px; }
.platform-text > h2:first-child { margin-top: 0; }
.result-note a { font-weight: 700; }

/* ---------- 13. Страница 404 ---------- */
.not-found { margin-top: 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.not-found img { height: 180px; width: auto; }

/* ---------- 14. «Почтовый стол»: марки, штемпели, конверт, печать, перо по краям ---------- */
/* Всё — HTML/CSS/инлайн-SVG, без картинок. Видно, где по бокам от колонки 720 px есть место. */
body { position: relative; overflow-x: hidden; }
.site-header, main, .site-footer { position: relative; z-index: 1; }
.desk { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; display: none; color: var(--line); }
@media (min-width: 1100px) { .desk { display: block; } }
.desk > * { position: absolute; }
.desk .l { right: calc(50% + 392px); }
.desk .r { left: calc(50% + 392px); }
@media (min-width: 1400px) { .desk .l { right: calc(50% + 440px); } .desk .r { left: calc(50% + 440px); } }

/* марка: лицо — надпись и номинал, оборот — шутка; переворот при наведении или нажатии */
.desk-stamp { width: 134px; height: 162px; perspective: 700px; pointer-events: auto; cursor: pointer; transform: rotate(var(--turn, 0deg)); }
.desk-stamp .face {
  --perf: 5px;
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px 16px; text-align: center; background: var(--field); color: var(--c);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s ease;
}
.desk-stamp .face::before { content: ""; position: absolute; inset: 11px; border: 2px solid var(--c); opacity: .75; }
.desk-stamp .front small { font: 700 11px/1.1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; }
.desk-stamp .front b { font: 700 30px/1 var(--font-head); }
.desk-stamp .back { transform: rotateY(180deg); font: italic 15px/1.3 var(--font-head); color: var(--ink); }
.desk-stamp:hover .front, .desk-stamp.flipped .front { transform: rotateY(180deg); }
.desk-stamp:hover .back, .desk-stamp.flipped .back { transform: rotateY(360deg); }
.c-red { --c: var(--red); }
.c-blue { --c: var(--blue); }
.c-green { --c: color-mix(in srgb, var(--green-ink) 70%, var(--green)); }

.desk-mark { position: absolute; width: 96px; height: 96px; font-size: 10px; opacity: .5; }
.desk-mark b { font-size: 15px; }
.desk-waves { width: 150px; opacity: .35; }
.desk-envelope { width: 150px; opacity: .45; transform: rotate(-6deg); }
.desk-seal { width: 64px; height: 64px; transform: rotate(12deg); }
.desk-seal svg { width: 26px; height: 26px; }
.desk-quill { width: 48px; opacity: .45; transform: rotate(18deg); }

/* зима (20.12–10.01, класс ставит app.js): на марках лежит снег */
.winter .desk-stamp .front::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: 2px; height: 14px; border-radius: 10px 10px 6px 6px;
  background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.08); opacity: .95;
}

/* телефон и узкий экран: стола нет — только волнистые линии гашения в углу */
@media (max-width: 1099px) {
  body::before {
    content: ""; position: absolute; top: 64px; right: -10px; width: 170px; height: 56px; opacity: .22; pointer-events: none;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 44' fill='none' stroke='%236C5847' stroke-width='2'%3E%3Cpath d='M0 6q17-8 35 0t35 0 35 0 35 0M0 18q17-8 35 0t35 0 35 0 35 0M0 30q17-8 35 0t35 0 35 0 35 0M0 42q17-8 35 0t35 0 35 0 35 0'/%3E%3C/svg%3E");
  }
}

/* 404: штемпель «Адресат выбыл» поверх Ссылкина */
.not-found { position: relative; }
.not-found .postmark.returned {
  position: absolute; left: calc(50% + 40px); top: 26px; width: 104px; height: 104px; z-index: 2;
  color: var(--red); border-color: var(--red); opacity: .8; font-size: 11px; transform: rotate(16deg);
}
.not-found .postmark.returned b { font-size: 16px; }


/* ---------- 15. Марки площадок: форма марки, лёгкий оттенок своего сервиса (просьба Саши 15.10) ----------
   Только едва заметный оттенок фона и цвет названия — без рамок и логотипов (чужие товарные знаки).
   Цвет названия — контраст ≥ 4,5 в обеих темах (WCAG AA). */
.stamp-list a.stamp { background: color-mix(in srgb, var(--p-brand, var(--field)) 7%, var(--field)); }
.stamp-list a.stamp b { color: var(--p-text, var(--red)); }
.stamp-list a.stamp:hover { background: color-mix(in srgb, var(--p-brand, var(--green)) 15%, var(--field)); }
.stamp-list .p-youtube { --p-brand: #E0302A; --p-text: #B03236; }
.stamp-list .p-vk { --p-brand: #2A6BD8; --p-text: #285FB9; }
.stamp-list .p-tiktok { --p-brand: #1FB5BA; --p-text: #207186; }
.stamp-list .p-rutube { --p-brand: #3D45B8; --p-text: #3743A5; }
.stamp-list .p-dzen { --p-brand: #3C3C3C; --p-text: #363C42; }
.stamp-list .p-ok { --p-brand: #EE8208; --p-text: #875E32; }
.stamp-list .p-pinterest { --p-brand: #C8232C; --p-text: #A62835; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stamp-list .p-youtube { --p-brand: #E0302A; --p-text: #ECA799; }
  :root:not([data-theme="light"]) .stamp-list .p-vk { --p-brand: #5E93EA; --p-text: #B7C5DD; }
  :root:not([data-theme="light"]) .stamp-list .p-tiktok { --p-brand: #4FD3D7; --p-text: #80D9D6; }
  :root:not([data-theme="light"]) .stamp-list .p-rutube { --p-brand: #8A90E8; --p-text: #C3C0DE; }
  :root:not([data-theme="light"]) .stamp-list .p-dzen { --p-brand: #D0D0D0; --p-text: #D7D5D1; }
  :root:not([data-theme="light"]) .stamp-list .p-ok { --p-brand: #F5A13D; --p-text: #F4C081; }
  :root:not([data-theme="light"]) .stamp-list .p-pinterest { --p-brand: #E2545B; --p-text: #ECB4AA; }
}
:root[data-theme="dark"] .stamp-list .p-youtube { --p-brand: #E0302A; --p-text: #ECA799; }
:root[data-theme="dark"] .stamp-list .p-vk { --p-brand: #5E93EA; --p-text: #B7C5DD; }
:root[data-theme="dark"] .stamp-list .p-tiktok { --p-brand: #4FD3D7; --p-text: #80D9D6; }
:root[data-theme="dark"] .stamp-list .p-rutube { --p-brand: #8A90E8; --p-text: #C3C0DE; }
:root[data-theme="dark"] .stamp-list .p-dzen { --p-brand: #D0D0D0; --p-text: #D7D5D1; }
:root[data-theme="dark"] .stamp-list .p-ok { --p-brand: #F5A13D; --p-text: #F4C081; }
:root[data-theme="dark"] .stamp-list .p-pinterest { --p-brand: #E2545B; --p-text: #ECB4AA; }

.read-also { margin-top: 22px; }
.read-also h2 { font-size: 22px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}