/* ═════════ СТРАНИЦА МОДУЛЯ (/modules/<модуль>/<страница>/) ═════════
   Собирается генератором `SITES/DOC/06-mta-hub/pages/_tools/site_module.py` из материала страницы кабинета.
   Система — общая (main.css): шкала --u, палитры --ink-* / --paper-*, медь, кнопки .button и финал .closing-section.
   Свои здесь только раскладка и элементы страницы модуля, с префиксом mm-. */

.mm-page{font-family:var(--t-text);color:var(--ink-fg)}
/* Тема пишет заголовки «Каждым Словом С Заглавной», а кнопки — капителью; у нас обычный регистр. */
.mm-page h1,.mm-page h2,.mm-page h3,.mm-page h4{text-transform:none;font-family:var(--t-head);font-weight:800}
.mm-page .button{text-transform:none;letter-spacing:normal;font-family:var(--t-text);font-weight:800}
.mm-title,.mm-tagline,.mm-h2,.mm-group,.mm-block-title>span,.mm-card h3,.closing-section h2{text-wrap:balance}
.mm-page code{font-family:var(--mono);font-size:.88em;padding:.08em .4em;border-radius:5px;white-space:nowrap}

/* ───────── первый экран ───────── */
.mm-hero{position:relative;overflow:hidden;isolation:isolate;background:#0b1014}
.mm-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 70% at 78% 46%,#e7964b1f,transparent 70%),radial-gradient(40% 60% at 8% 0,#915737 -40%,transparent 60%)}
.mm-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:calc(56 * var(--u));
  padding-block:calc(54 * var(--u)) calc(86 * var(--u))}
.mm-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 calc(44 * var(--u));
  font-size:var(--t-list);color:#8d9aa6}
.mm-crumbs a{color:#b8c3cd;transition:color .18s}
.mm-crumbs a:hover{color:var(--copper-light)}
.mm-crumb-sep{color:#4b5964}
.mm-crumbs [aria-current]{color:#dfe5eb}
.mm-eyebrow{margin:0 0 calc(22 * var(--u));color:var(--copper);font-size:var(--t-caption);
  line-height:1.4;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mm-title{margin:0;font-size:var(--t-h1);line-height:1.07;font-weight:800;letter-spacing:-.03em;color:var(--ink-fg);font-family:var(--t-head)}
.mm-tagline{margin:calc(18 * var(--u)) 0 0;max-width:24em;font-size:var(--t-h3);line-height:1.22;font-weight:800;
  letter-spacing:-.02em;color:#e99b53;background:linear-gradient(180deg,#ffc078 0%,#f19746 70%,#c87235);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-family:var(--t-head)}
/* Длинное название и длинный подзаголовок — кеглем меньше: «Журнал прокси-гейта» крупным кеглем занимал две строки,
   подзаголовок — три, и первый экран вырастал на полстраницы. */
.mm-title-long{font-size:var(--t-h1);line-height:1.07;font-family:var(--t-head);font-weight:800;letter-spacing:-.03em}
.mm-tagline-long{font-size:var(--t-lead);line-height:1.65;max-width:28em}
.mm-intro{margin-top:calc(26 * var(--u));max-width:60ch}
.mm-intro p{margin:0 0 .8em;color:var(--ink-muted);font-size:var(--t-lead);line-height:1.65}
.mm-intro p:last-child{margin-bottom:0}
.mm-actions{display:flex;flex-wrap:wrap;gap:calc(14 * var(--u));margin-top:calc(38 * var(--u))}
.mm-actions .button-primary{min-width:0}

/* Кадр кабинета под наклоном — место будущего главного изображения (его сделает GPT). */
.mm-hero-art{position:relative;margin:0;justify-self:stretch;perspective:2200px}
.mm-hero-art::before{content:'';position:absolute;inset:8% -6% -4% 6%;z-index:-1;border-radius:40px;
  background:radial-gradient(closest-side,#e7964b33,transparent);filter:blur(30px)}
.mm-hero-art picture{display:block;border-radius:14px;overflow:hidden;border:1px solid #ffffff1f;background:#16191c;
  box-shadow:0 40px 80px -30px #000c,0 0 0 1px #00000040;transform:rotateY(-11deg) rotateX(3deg) translateX(calc(30 * var(--u)));
  transform-origin:left center;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.mm-hero-art img{display:block;width:100%;height:auto}

/* ───────── вкладки модуля: те же разделы, что в меню кабинета ───────── */
.mm-tabs{background:#0f161b;border-bottom:1px solid #1d272e}
.mm-tabs-row{display:flex;align-items:center;gap:6px;overflow-x:auto;padding-block:12px;scrollbar-width:thin}
.mm-tabs-name{flex:none;margin-right:14px;color:var(--copper);font-size:var(--t-caption);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mm-tab{flex:none;padding:9px 15px;border-radius:7px;color:#b9c4ce;font-size:var(--t-body);line-height:1.65;white-space:nowrap;transition:background .2s,color .2s}
.mm-tab:hover{background:#ffffff0a;color:#fff}
.mm-tab[aria-current]{background:linear-gradient(135deg,#995f3d,#77452e);color:#fff;box-shadow:inset 0 1px 0 #d1946940}

/* ───────── зачем ───────── */
.mm-why{background:var(--paper);color:var(--paper-fg);color-scheme:light;font-family:var(--t-text);
  padding-block:calc(92 * var(--u)) calc(96 * var(--u))}
.mm-h2{margin:0;font-family:var(--t-head);font-size:var(--t-h2);line-height:1.08;font-weight:800;letter-spacing:-.03em}
.mm-why .mm-h2{color:var(--paper-fg)}
/* Текст разделов — во всю ширину своей колонки, без предела в знаках: справа не остаётся пустоты (Шелест, 24.10.2026). */
.mm-why-lead{margin:calc(22 * var(--u)) 0 0;color:var(--paper-secondary);font-size:var(--t-intro);line-height:1.65}
.mm-cards{list-style:none;margin:calc(44 * var(--u)) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:clamp(14px,calc(22 * var(--u)),22px)}
.mm-card{position:relative;padding:clamp(22px,calc(30 * var(--u)),30px);background:#fff;border:1px solid var(--paper-line);
  border-radius:16px;box-shadow:0 1px 2px #0d141808,0 14px 34px -24px #0d141830}
.mm-card .icon{width:28px;height:28px;padding:5px;border-radius:9px;color:#fff;background:linear-gradient(135deg,#a36743,#7f492f);stroke-width:2.4}
.mm-card h3{margin:18px 0 0;font-family:var(--t-head);font-size:var(--t-h3s);line-height:1.22;font-weight:800;color:var(--paper-fg);letter-spacing:-.01em}
.mm-card p{margin:10px 0 0;color:var(--paper-secondary);font-size:var(--t-body);line-height:1.65}
.mm-card code,.mm-screen code{background:var(--paper-2);color:var(--paper-fg)}

/* ───────── откуда данные и прочее о странице ───────── */
.mm-band{background:linear-gradient(180deg,#10171c,#0d1317);padding-block:calc(78 * var(--u))}
.mm-band+.mm-band{padding-top:0}
.mm-band+.mm-band .mm-band-grid{padding-top:calc(64 * var(--u));border-top:1px solid #ffffff14}
.mm-band-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:calc(64 * var(--u));align-items:start}
.mm-band .mm-h2{font-size:var(--t-h2);color:var(--ink-fg);font-family:var(--t-head);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.mm-prose{color:var(--ink-muted);font-size:var(--t-body);line-height:1.65}
.mm-prose p{margin:0 0 1em}
.mm-prose p:last-child{margin-bottom:0}
.mm-prose strong{color:var(--ink-fg);font-weight:600}
.mm-prose code{background:#1b262e;color:#e7ecf0}
.mm-prose .mm-list,.mm-prose .mm-terms,.mm-prose .mm-steps{margin:0 0 1em}
.mm-prose .mm-terms li{border-color:#ffffff14}

/* ───────── что на экране ───────── */
.mm-screen{background:var(--paper);color:var(--paper-fg);color-scheme:light;font-family:var(--t-text);
  padding-block:calc(40 * var(--u)) calc(110 * var(--u));border-top:1px solid var(--paper-line)}
.mm-why+.mm-screen{border-top:0}
.mm-screen-grid{display:grid;grid-template-columns:clamp(220px,calc(280 * var(--u)),300px) minmax(0,1fr);gap:clamp(36px,calc(72 * var(--u)),88px);align-items:start}

.mm-toc{position:sticky;top:calc(var(--header-height) + 28px);max-height:calc(100vh - var(--header-height) - 56px);overflow:auto;
  padding:calc(52 * var(--u)) 6px 8px 0;scrollbar-width:thin}
.mm-toc-title{margin:0 0 14px;color:var(--brown);font-family:var(--t-text);font-size:var(--t-caption);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mm-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--paper-line)}
.mm-toc li a{display:flex;gap:10px;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;
  color:var(--paper-muted);font-size:var(--t-list);line-height:1.55;transition:color .15s,border-color .15s}
/* Номера — Roboto с цифрами одной ширины: моноширинного шрифта сайт не грузит, и Windows подставил бы Courier. */
.mm-toc li a b{flex:none;min-width:20px;font-family:var(--t-text);font-variant-numeric:tabular-nums;font-size:var(--t-caption);font-weight:500;color:#9aa6b0;padding-top:1px}
.mm-toc li a:hover{color:var(--paper-fg)}
.mm-toc li a.is-active{color:var(--paper-fg);border-left-color:var(--copper)}
.mm-toc li a.is-active b{color:var(--brown)}
.mm-toc .mm-toc-group a,.mm-toc .mm-toc-sub a{margin-top:12px;color:var(--brown);font-family:var(--t-text);font-size:var(--t-caption);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}
.mm-toc .mm-toc-sub a{font-size:var(--t-label);color:#8a6a55}
.mm-toc li:first-child a{margin-top:0}

.mm-blocks{min-width:0;padding-top:calc(52 * var(--u))}
.mm-group{margin:calc(110 * var(--u)) 0 calc(26 * var(--u));padding-top:calc(48 * var(--u));border-top:1px solid var(--paper-line);
  font-family:var(--t-head);font-size:var(--t-h2);line-height:1.08;font-weight:800;letter-spacing:-.03em;color:var(--paper-fg)}
.mm-blocks>.mm-group:first-child{margin-top:0;padding-top:0;border-top:0}
.mm-sub{margin:calc(86 * var(--u)) 0 calc(6 * var(--u));color:var(--brown);font-family:var(--t-text);font-size:var(--t-caption);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}
.mm-group+.mm-sub,.mm-group-intro+.mm-sub{margin-top:calc(26 * var(--u))}
.mm-group-intro{margin:0 0 calc(30 * var(--u));color:var(--paper-secondary);font-size:var(--t-intro);line-height:1.65}
.mm-group-intro p{margin:0 0 .8em}

.mm-block{margin:0 0 calc(104 * var(--u));scroll-margin-top:calc(var(--header-height) + 20px)}
.mm-block:last-child{margin-bottom:0}
.mm-group,.mm-sub{scroll-margin-top:calc(var(--header-height) + 20px)}
.mm-block-title{display:flex;align-items:baseline;gap:16px;margin:0 0 calc(22 * var(--u));font-family:var(--t-head);
  font-size:var(--t-h3);line-height:1.22;font-weight:800;letter-spacing:-.02em;color:var(--paper-fg)}
.mm-block-num{flex:none;transform:translateY(-.22em);display:inline-grid;place-items:center;min-width:40px;height:30px;padding:0 8px;border-radius:8px;
  background:#fff;border:1px solid var(--paper-line);color:var(--brown);font-family:var(--t-text);font-variant-numeric:tabular-nums;font-size:var(--t-body);font-weight:700;letter-spacing:0;line-height:1.65}
.mm-block>p{margin:0 0 1em;color:var(--paper-secondary);font-size:var(--t-body);line-height:1.65}
.mm-block strong{color:var(--paper-fg);font-weight:700}

/* Снимок — div, а не figure: Elementor обнуляет отступы figure в своих виджетах, и текст прилипал к снимку. */
.mm-page .mm-shot{width:min(100%,var(--w,100%));margin:calc(8 * var(--u)) 0 clamp(22px,calc(32 * var(--u)),34px)}
.mm-zoom{position:relative;display:block;border-radius:14px;overflow:hidden;background:#16191c;border:1px solid #0d141824;
  box-shadow:0 2px 4px #0d141814,0 26px 56px -28px #0d141873;cursor:zoom-in}
.mm-zoom img{display:block;width:100%;height:auto}
.mm-zoom-hint{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:#0b1014d9;border:1px solid #ffffff26;color:#fff;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
.mm-zoom-hint .icon{width:18px;height:18px}
.mm-zoom:hover .mm-zoom-hint,.mm-zoom:focus-visible .mm-zoom-hint{opacity:1;transform:none}

.mm-terms,.mm-list,.mm-steps{margin:0 0 1.1em;padding:0;list-style:none;color:var(--paper-secondary);
  font-size:var(--t-list);line-height:1.55}
.mm-terms li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--paper-line)}
.mm-terms li:last-child{border-bottom:1px solid var(--paper-line)}
.mm-terms li::before{content:'';position:absolute;left:2px;top:22px;width:8px;height:8px;border-radius:2px;background:var(--copper);transform:rotate(45deg)}
.mm-list li{position:relative;padding:4px 0 4px 22px}
.mm-list li::before{content:'';position:absolute;left:4px;top:.95em;width:7px;height:7px;border-radius:50%;background:var(--copper)}
.mm-steps{counter-reset:mm-step}
.mm-steps li{position:relative;padding:6px 0 6px 40px;counter-increment:mm-step}
.mm-steps li::before{content:counter(mm-step);position:absolute;left:0;top:5px;width:27px;height:27px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:1px solid var(--paper-line);color:var(--brown);font-weight:700;font-size:var(--t-small);line-height:1;font-family:var(--t-text);font-variant-numeric:tabular-nums}
.mm-note{margin:0 0 1.1em;padding:14px 18px;border-radius:10px;background:#fff;border:1px solid var(--paper-line);
  border-left:3px solid var(--copper);color:var(--paper-secondary);font-size:var(--t-body);line-height:1.65}

/* ───────── соседние страницы ───────── */
.mm-pager{background:#0d1317;border-top:1px solid #1d272e}
.mm-pager-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-block:calc(34 * var(--u))}
.mm-pager a{display:flex;flex-direction:column;gap:6px;padding:20px 24px;border-radius:12px;border:1px solid #223039;background:#10171c;
  transition:border-color .2s,background .2s}
.mm-pager a:hover{border-color:#ae794c;background:#131b21}
.mm-pager small{color:var(--copper);font-size:var(--t-caption);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mm-pager span{color:var(--ink-fg);font-size:var(--t-intro);font-weight:700;letter-spacing:normal;line-height:1.65}
.mm-pager .mm-pager-next{text-align:right;align-items:flex-end;grid-column:2}
.mm-pager .mm-pager-prev small::before{content:'← '}
.mm-pager .mm-pager-next small::after{content:' →'}

/* ───────── узкие экраны ───────── */
@media(max-width:1100px){
  .mm-hero-grid{grid-template-columns:minmax(0,1fr);gap:34px;padding-block:28px 56px}
  .mm-crumbs{margin-bottom:28px}
  .mm-title{font-size:var(--t-h1)}
  .mm-title-long{font-size:var(--t-h1)}
  .mm-tagline{font-size:var(--t-h3)}
  .mm-tagline-long{font-size:var(--t-lead)}
  .mm-intro p{font-size:var(--t-lead)}
  .mm-actions{margin-top:28px}
  .mm-actions .button{height:54px;font-size:var(--t-btn);padding:0 22px;gap:14px}
  .mm-actions .button .icon{width:22px;height:22px}
  .mm-hero-art picture{transform:none;-webkit-mask-image:none;mask-image:none}
  .mm-why{padding-block:56px}
  .mm-h2{font-size:var(--t-h2)}
  .mm-band{padding-block:52px}
  .mm-band-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .mm-band .mm-h2{font-size:var(--t-h2)}
  .mm-screen{padding-block:20px 64px}
  .mm-screen-grid{grid-template-columns:minmax(0,1fr)}
  .mm-toc{display:none}
  .mm-blocks{padding-top:24px}
  .mm-group{font-size:var(--t-h2);margin-top:64px;padding-top:30px}
  .mm-sub{margin-top:52px}
  .mm-block{margin-bottom:64px}
  .mm-block-title{font-size:var(--t-h3);gap:12px}
}
@media(max-width:600px){
  .mm-tab{font-size:var(--t-body);padding:8px 12px}
  .mm-tabs-name{display:none}
  .mm-actions .button{width:100%;justify-content:space-between}
  .mm-cards{grid-template-columns:minmax(0,1fr)}
  .mm-block-num{min-width:34px;height:26px;font-size:var(--t-body)}
  .mm-page .mm-shot{margin-inline:-8px;width:calc(100% + 16px)}
  .mm-zoom{border-radius:10px}
  .mm-pager-row{grid-template-columns:minmax(0,1fr)}
  .mm-pager .mm-pager-next{grid-column:1}
}
@media(prefers-reduced-motion:reduce){.mm-zoom-hint,.mm-toc li a{transition:none}}

/* ───────── Первый экран по образцу страниц модулей в новом дизайне («Установка», «Спецификации») ─────────
   Шелест 24.10.2026: «приведи к подобному виду и структуре все остальные страницы модулей». Выводится, когда в
   материале страницы есть раздел «Первый экран» (pages/_tools/site_module.py); без него — прежний .mm-hero. Значения —
   с первого экрана «Установки» (module-install.css), размеры — роли type.css. */
.mmh{position:relative;overflow:hidden;isolation:isolate;padding-top:28px;color:#f0f3f4;
  background:radial-gradient(ellipse at 78% 35%,#67482e24,transparent 48%),linear-gradient(135deg,#151b1f,#192227 68%,#141c20)}
.mmh-layout{display:grid;grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);gap:48px;align-items:center;min-height:550px;padding-bottom:43px}
.mmh-copy{position:relative;z-index:1;min-width:0;padding-block:12px 20px}
.mmh .mm-crumbs{margin:0 0 39px;font-size:var(--t-caption);color:#758690}
.mmh .mm-crumbs a{color:#9fadb6}
.mmh .mm-crumbs [aria-current]{color:#b0bbc2}
.mmh-kicker{display:flex;align-items:center;gap:10px;margin:0 0 19px;font-size:var(--t-label);font-weight:800;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:#ca9973}
.mmh-kicker::before{content:"";flex:none;width:22px;height:1px;background:#b78d6b}
.mm-page .mmh-title{margin:0 0 24px;font-family:var(--t-head);font-size:var(--t-h1);font-weight:800;line-height:1.07;letter-spacing:-.03em;color:#f0f3f4}
.mmh-title span{color:#d8a279}
.mmh-lead{max-width:485px;margin:0 0 14px;font-size:var(--t-lead);line-height:1.65;color:#bac5cd}
.mmh-second{max-width:450px;margin:0;font-size:var(--t-list);line-height:1.65;color:#8395a2}
.mmh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin:29px 0 24px}
.mmh-btn{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:49px;padding:14px 19px;border:1px solid #bb855d;border-radius:6px;
  background:linear-gradient(110deg,#a46b45,#895030);box-shadow:0 10px 26px #0000002e;color:#fff;font-size:var(--t-btn);font-weight:800;line-height:1.2;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.mmh-btn:hover,.mmh-btn:focus-visible{background:linear-gradient(110deg,#b67a51,#995b36);box-shadow:0 10px 32px #0003;transform:translateY(-2px);color:#fff}
.mmh-btn .icon{width:18px;height:18px}
.mmh-link{display:inline-flex;align-items:center;gap:10px;color:#b9c4cb;font-size:var(--t-small);font-weight:700;text-decoration:none}
.mmh-link:hover,.mmh-link:focus-visible{color:#e2af87}
.mmh-link .icon{width:17px;height:17px}
.mmh-meta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;color:#7d919e;font-size:var(--t-caption)}
.mmh-meta strong{color:#b8c4cc;font-weight:700}
.mmh-meta i{width:1px;height:12px;background:#52667466}
.mmh-product{position:relative;isolation:isolate;min-width:0;padding-top:28px}
.mmh-orbit{position:absolute;inset:7% -17% -4%;z-index:-1;background:radial-gradient(ellipse,#b17b4a15,transparent 68%)}
.mmh-orbit::after{content:"";position:absolute;inset:3% 8%;border:1px solid #bd926625;border-radius:30px;transform:rotate(-5deg)}
.mmh-frame{position:relative;overflow:hidden;border:1px solid #59636a88;border-radius:12px;background:#1a2228;box-shadow:0 30px 65px #0006,0 1px 0 #d6b28d45 inset}
.mmh-top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #82929b20;background:#212c32;color:#d5dfe5;font-size:var(--t-small)}
.mmh-top small{margin-left:auto;font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#82939e}
.mmh-dots{display:flex;gap:4px}
.mmh-dots i{width:4px;height:4px;border-radius:50%;background:#6d5c4e}
.mmh-dots i:first-child{background:#bf906b}
.mmh-switch{display:flex;gap:24px;padding:0 17px;border-bottom:1px solid #81939f1c}
/* тема задаёт всем button центровку, обрезку и переходы — здесь поведение браузера */
.mmh-switch button{position:relative;display:flex;align-items:center;justify-content:normal;gap:8px;overflow:visible;z-index:auto;padding:13px 0;border:0;background:none;
  font:inherit;font-size:var(--t-micro);color:#6b7e8c;cursor:pointer;transition:none;text-transform:none;letter-spacing:normal}
.mmh-switch button span{font-size:var(--t-caption);color:#91a2ad}
.mmh-switch button[aria-selected="true"]{color:#d6a780}
.mmh-switch button[aria-selected="true"] span{color:#e0b797}
.mmh-switch button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#c5946c}
.mmh-switch button:focus-visible{outline:2px solid #c5946c;outline-offset:2px}
.mmh-stage{display:grid;align-items:center;min-height:332px;padding:13px;background:#141b1f}
/* Высота окна — по самой высокой вкладке (--mmh-r — её высота к ширине): шаги под окном не прыгают при переключении. */
.mmh-stage::before{content:"";grid-area:1/1;padding-top:calc(var(--mmh-r,0)*100%)}
.mmh-panel{grid-area:1/1;display:grid}
.mmh-panel[hidden]{display:none}
.mmh-shot{position:relative;display:block;overflow:hidden;border:1px solid #62707922;border-radius:4px}
.mmh-shot picture,.mmh-shot img{display:block;width:100%;height:auto}
.mmh-hint{position:absolute;right:6px;bottom:6px;display:flex;align-items:center;gap:6px;padding:5px 7px;border:1px solid #ffffff29;border-radius:5px;background:#1a2229e8;
  color:#e1e7eb;font-size:var(--t-micro);opacity:0;transition:opacity .2s;pointer-events:none}
.mmh-hint .icon{width:13px;height:13px}
.mmh-shot:hover .mmh-hint,.mmh-shot:focus-visible .mmh-hint{opacity:1}
.mmh-caption{display:flex;align-items:center;gap:7px;padding:13px 16px;border-top:1px solid #8d9ba51c;color:#8fa0aa;font-size:var(--t-micro)}
.mmh-caption>span:last-child{margin-left:auto;color:#b69376}
.mmh-dot{flex:none;width:4px;height:4px;border-radius:50%;background:#bc9472;box-shadow:0 0 0 3px #c99d7112}
.mmh-rail{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:35px;padding-block:24px 27px;border-top:1px solid #8194a329}
.mmh-rail>div{position:relative;display:grid;grid-template-columns:25px minmax(0,1fr);gap:2px 13px}
.mmh-rail>div:not(:last-child)::after{content:"→";position:absolute;right:4px;top:10px;color:#715d4c;font-size:var(--t-lead)}
.mmh-rail>div>span{grid-row:1/3;padding-top:3px;font-size:var(--t-caption);color:#b69070}
.mmh-rail strong{font-size:var(--t-list);font-weight:700;line-height:1.4;color:#d1dbe1}
.mmh-rail small{font-size:var(--t-caption);line-height:1.5;color:#798d9d}
@media (max-width:1200px){
  .mmh-layout{gap:30px}
  .mmh-lead{font-size:var(--t-intro)}
  .mmh-top{padding:13px}
  .mmh-switch{gap:19px}
  .mmh-stage{min-height:285px;padding:10px}
}
@media (max-width:1020px){
  .mmh-layout{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:27px}
  .mmh-actions{gap:18px}
  .mmh-stage{min-height:260px}
  .mmh-caption{flex-wrap:wrap;gap:6px;padding:10px}
  .mmh-caption>span:last-child,.mmh-top small{display:none}
  .mmh-rail{gap:26px}
  .mmh-rail>div:not(:last-child)::after{display:none}
}
@media (max-width:900px){
  .mmh-layout{grid-template-columns:minmax(0,1fr);gap:22px;padding-bottom:36px}
  .mmh-copy{max-width:650px;padding-bottom:0}
  .mmh .mm-crumbs{margin-bottom:25px}
  .mmh-lead{font-size:var(--t-lead);max-width:600px}
  .mmh-second{max-width:560px}
  .mmh-product{width:100%;max-width:750px;justify-self:center;padding-top:0}
  .mmh-stage{min-height:0}
  .mmh-top small,.mmh-caption>span:last-child{display:block}
  .mmh-actions{margin:24px 0 18px}
  .mmh-rail{gap:20px;padding-block:21px}
  .mmh-rail>div{grid-template-columns:20px minmax(0,1fr);gap:2px 7px}
}
@media (max-width:700px){
  .mmh{padding-top:18px}
  .mmh-layout{gap:31px;padding-bottom:32px}
  .mmh .mm-crumbs{margin-bottom:24px}
  .mmh-kicker{margin-bottom:16px}
  .mm-page .mmh-title{margin-bottom:21px}
  .mmh-lead{font-size:var(--t-body)}
  .mmh-second{font-size:var(--t-small)}
  .mmh-stage{padding:8px}
  .mmh-switch{gap:20px;padding:0 12px}
  .mmh-switch button{gap:6px;padding:11px 0}
  .mmh-top{padding:12px;gap:9px;font-size:var(--t-caption)}
  .mmh-top small,.mmh-caption>span:last-child{display:none}
  .mmh-frame{border-radius:9px}
  .mmh-orbit::after{inset:0 12%;border-radius:17px}
  .mmh-hint{opacity:1}
  .mmh-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 27px;padding-block:22px}
}