/* Интерактив кейсов (28.10.2026): «Суть проекта» — схемы из site/case-viz.json, «Как это выглядит» — экраны с листанием.
   Генератор — sitegen.py case_viz() и case_screens(), анимации — case-kit.js (класс .is-in, когда блок на экране).
   Токены нового стиля: чернила, приглушённый, акцент #3d12fc, цифры — Unbounded. */
.cx-grid{display:grid;gap:clamp(28px,3.4vw,48px)}
@media (min-width:900px){.cx-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-grid--3>.cx:first-child{grid-column:1/-1}}
.cx{position:relative;display:grid;gap:20px;align-content:start;padding-top:22px;border-top:1px solid rgba(14,13,22,.12);min-width:0}
.cx__t{margin:0;color:var(--r-ink);font:600 clamp(18px,1.5vw,22px)/1.2 var(--r-d);letter-spacing:-.025em}
.cx__note{margin:0;color:var(--r-mute);font-size:14.5px;line-height:1.5}
.cx-big{display:grid;gap:6px;margin:0}
.cx-big b{color:var(--r-acc);font:600 clamp(44px,5vw,76px)/.95 var(--r-d);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.cx-big--s b{font-size:clamp(34px,3.4vw,52px)}
.cx-big span{max-width:30em;color:var(--r-mute);font-size:15px;line-height:1.45}

/* было / стало */
.cx-cmp__row{display:grid;gap:10px}
.cx-cmp__l{margin:0;color:var(--r-ink);font-weight:600;font-size:15px}
.cx-cmp__bars{display:grid;gap:8px}
.cx-cmp__b{position:relative;display:flex;align-items:center;height:38px}
.cx-cmp__b i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.cx-cmp__b em{position:relative;z-index:1;padding:0 12px;font:600 14px/1 var(--r-d);font-style:normal;letter-spacing:-.01em;white-space:nowrap}
/* ширины: «было» — эталон; «стало» — в долях эталона (--r): меньше — время сократилось, больше — рост */
.cx-cmp__b--a i{width:calc(100% / max(1, var(--r)));background:rgba(14,13,22,.12)}
.cx-cmp__b--a em{color:var(--r-ink)}
.cx-cmp__b--b i{width:calc(100% * min(1, var(--r)));background:var(--r-acc)}
.cx-cmp__b--b em{color:#fff}
.cx-cmp:not(.is-in) .cx-cmp__b i,.cx-cmp.is-before .cx-cmp__b--b i{transform:scaleX(0)}
.cx-cmp__btn{justify-self:start;padding:8px 14px;border:1px solid rgba(14,13,22,.18);border-radius:99px;background:none;color:var(--r-ink);font:500 14px/1 inherit;cursor:pointer;transition:border-color .2s,color .2s}
.cx-cmp__btn:hover{border-color:var(--r-acc);color:var(--r-acc)}
.cx-cmp__btn:focus-visible{outline:2px solid var(--r-acc);outline-offset:3px}

/* клетки: N клеток заполняются */
.cx-tiles__g{display:grid;grid-template-columns:repeat(auto-fill,minmax(14px,1fr));gap:5px;max-width:560px}
.cx-tiles__g i{aspect-ratio:1;border-radius:3px;background:rgba(14,13,22,.08);transition:background .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.cx-tiles.is-in .cx-tiles__g i{background:var(--r-acc);transition-delay:calc(var(--k,0) * 12ms)}
.cx-tiles__g i:hover{transform:scale(1.4)}

/* сегменты: карточки частей проекта */
.cx-seg__l{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:700px){.cx-seg__l--2,.cx-seg__l--4{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-seg__l--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cx-seg__l li{display:grid;gap:8px;align-content:start;padding:18px;border:1px solid rgba(14,13,22,.1);border-radius:12px;background:#fff;
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s;transition-delay:calc(var(--i) * 90ms)}
.cx-seg.is-in .cx-seg__l li{opacity:1;transform:none}
.cx-seg__l li:hover{border-color:var(--r-acc);box-shadow:0 20px 40px -26px rgba(61,18,252,.45)}
.cx-seg__l b{color:var(--r-ink);font:600 clamp(18px,1.6vw,24px)/1.1 var(--r-d);letter-spacing:-.03em}
.cx-seg__l li:hover b{color:var(--r-acc)}
.cx-seg__l span{color:var(--r-mute);font-size:14.5px;line-height:1.45}

/* полосы по значениям */
.cx-bars ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.cx-bars li{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:14px;color:var(--r-mute);font-size:14px}
.cx-bars li span{color:var(--r-ink);font-weight:600}
.cx-bars li i{height:14px;border-radius:99px;background:var(--r-acc);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.16,1,.3,1);width:calc(var(--w) * 100%)}
.cx-bars.is-in li i{transform:none}
.cx-bars li b{color:var(--r-ink);font:600 16px/1 var(--r-d);font-variant-numeric:tabular-nums}
@media (max-width:599px){.cx-bars li{grid-template-columns:86px minmax(0,1fr) auto}}

/* слияние: три сайта сходятся в одну платформу */
.cx-mg__st{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:150px;align-items:start}
.cx-mg__f{padding:14px 12px;border:1px solid rgba(14,13,22,.14);border-radius:10px;background:#fff;color:var(--r-ink);font-size:13.5px;font-weight:600;text-align:center;
  transition:transform 1s cubic-bezier(.65,0,.35,1),opacity .6s ease .6s}
.cx-mg__to{position:absolute;left:50%;bottom:0;padding:16px 22px;border-radius:12px;background:var(--r-acc);color:#fff;font:600 15px/1.2 var(--r-d);letter-spacing:-.02em;white-space:nowrap;
  transform:translate(-50%,12px) scale(.9);opacity:0;transition:transform .8s cubic-bezier(.16,1,.3,1) .9s,opacity .5s ease .9s}
.cx-mg.is-in .cx-mg__f:nth-child(1){transform:translate(100%,70px) scale(.7)}
.cx-mg.is-in .cx-mg__f:nth-child(2){transform:translate(0,70px) scale(.7)}
.cx-mg.is-in .cx-mg__f:nth-child(3){transform:translate(-100%,70px) scale(.7)}
.cx-mg.is-in .cx-mg__f{opacity:0}
.cx-mg.is-in .cx-mg__to{transform:translate(-50%,0) scale(1);opacity:1}

/* воронка: точки сводятся */
.cx-fn__dots{display:flex;flex-wrap:wrap;gap:8px;min-height:30px}
.cx-fn__dots i{width:16px;height:16px;border-radius:50%;background:rgba(14,13,22,.18);transition:background .4s,transform .5s cubic-bezier(.16,1,.3,1),opacity .4s;transition-delay:calc(var(--i) * 40ms)}
.cx-fn.is-in .cx-fn__dots i{opacity:.25;transform:scale(.7)}
.cx-fn.is-in .cx-fn__dots i.is-keep{opacity:1;transform:scale(1.35);background:var(--r-acc)}
.cx-fn__nums{display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.cx-fn__arr{color:var(--r-acc);font:600 32px/1 var(--r-d)}

/* рост команды: точки появляются */
.cx-gr__dots{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.cx-gr__dots i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--r-acc);background:transparent;opacity:0;transform:scale(.4);
  transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1),background .3s;transition-delay:calc(var(--i) * 70ms)}
.cx-gr__dots i.is-base{background:var(--r-acc)}
.cx-gr.is-in .cx-gr__dots i{opacity:1;transform:none}

/* круговая шкала */
.cx-ring{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:24px}
.cx-ring svg{width:clamp(110px,10vw,150px);height:auto;transform:rotate(-90deg)}
.cx-ring circle{fill:none;stroke:rgba(14,13,22,.1);stroke-width:10}
.cx-ring .cx-ring__v{stroke:var(--r-acc);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1)}
.cx-ring.is-in .cx-ring__v{stroke-dashoffset:calc(100 - var(--p))}
.cx-ring .cx__note{grid-column:1/-1}

/* экраны проекта */
.cx-scr{display:grid;gap:16px}
.cx-scr__stage{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:14px;background:#f1f1f5;box-shadow:0 0 0 1px rgba(14,13,22,.08),0 40px 80px -50px rgba(14,13,22,.5)}
.cx-scr__f{position:absolute;inset:0;display:block;opacity:0;transition:opacity .6s ease;cursor:zoom-in}
.cx-scr__f.is-on{opacity:1}
.cx-scr__f img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.cx-scr__f.is-on.is-tall img{animation:cxpan var(--dur,7s) cubic-bezier(.45,0,.25,1) .8s both}
.cx-scr__f.is-on:not(.is-tall) img{animation:cxzoom 7s ease-out both}
@keyframes cxpan{to{object-position:50% 100%}}
@keyframes cxzoom{from{transform:scale(1.04)}to{transform:none}}
.cx-scr__prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(14,13,22,.08)}
.cx-scr__prog i{display:block;height:100%;background:var(--r-acc);transform-origin:0 50%;transform:scaleX(0)}
.cx-scr__prog i.is-run{animation:cxprog var(--dur,6s) linear both}
@keyframes cxprog{to{transform:none}}
.cx-scr.is-paused .cx-scr__prog i{animation-play-state:paused}
.cx-scr__bar{display:flex;align-items:center;gap:16px}
.cx-scr__n{flex:none;color:var(--r-mute);font:500 14px/1 var(--r-d);font-variant-numeric:tabular-nums}
.cx-scr__n b{color:var(--r-ink)}
.cx-scr__th{flex:1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.cx-scr__th::-webkit-scrollbar{display:none}
.cx-scr__th button{flex:none;width:clamp(64px,8vw,104px);aspect-ratio:16/10;padding:0;border:0;border-radius:6px;overflow:hidden;background:#eee;cursor:pointer;opacity:.5;
  box-shadow:0 0 0 1px rgba(14,13,22,.1);transition:opacity .25s,box-shadow .25s}
.cx-scr__th button.is-on,.cx-scr__th button:hover{opacity:1;box-shadow:0 0 0 2px var(--r-acc)}
.cx-scr__th img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.cx-scr__arr{flex:none;display:flex;gap:6px}
.cx-scr__arr button{width:40px;height:40px;border:1px solid rgba(14,13,22,.16);border-radius:50%;background:none;color:var(--r-ink);font-size:16px;cursor:pointer;transition:border-color .2s,color .2s}
.cx-scr__arr button:hover{border-color:var(--r-acc);color:var(--r-acc)}
:is(.cx-scr__th button,.cx-scr__arr button):focus-visible{outline:2px solid var(--r-acc);outline-offset:2px}
@media (max-width:599px){.cx-scr__arr{display:none}.cx-scr__stage{aspect-ratio:4/3}}

@media (prefers-reduced-motion:reduce){
  .cx *{transition:none!important;animation:none!important}
  .cx-scr__f img,.cx-scr__prog i{animation:none!important}
}

/* правки по снимкам: клетки — по ширине колонки; подпись полосы «было/стало» — справа от полосы, не обрезается; единица часов — рядом с числом */
.cx-tiles__g{width:100%;max-width:560px}
.cx-cmp__b{display:flex;align-items:center;gap:12px;height:auto}
.cx-cmp__b i{position:static;flex:none;height:36px}
.cx-cmp__b em{padding:0;color:var(--r-ink)!important;font-size:14px}
.cx-cmp__b--b em{color:var(--r-acc)!important}
.cx-bars li em{font-style:normal;color:var(--r-mute);white-space:nowrap}
.cx-mg__f{opacity:1}
.cx-mg.is-in .cx-mg__f{opacity:.0}
/* вылеты по проверке 28.10: полоса + подпись умещаются в блок; крупная подпись и экраны — не шире колонки на телефоне */
.cx-cmp__b--a i{width:calc((100% - 11em) / max(1, var(--r)))}
.cx-cmp__b--b i{width:calc((100% - 11em) * min(1, var(--r)))}
.cx-big span{max-width:min(30em,100%)}
.cx-grid,.cx-scr,.cx-scr__stage{min-width:0;max-width:100%}
.cx-scr__stage{width:100%}
.cx-scr__f img{max-width:100%}
.cx,.cx-big,.cx-scr{grid-template-columns:minmax(0,1fr)}
.cx-ring{grid-template-columns:auto minmax(0,1fr)}
/* «3 → 1» (Легенда): три сайта остаются сверху, от каждого — стрелка вниз к общей платформе */
.cx-mg__st{min-height:170px}
.cx-mg__f{position:relative}
.cx-mg__f::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:0;background:repeating-linear-gradient(var(--r-acc) 0 4px,transparent 4px 8px);transition:height .7s cubic-bezier(.16,1,.3,1) .4s}
.cx-mg.is-in .cx-mg__f:nth-child(n){transform:none;opacity:1;border-color:rgba(61,18,252,.35)}
.cx-mg.is-in .cx-mg__f::after{height:62px}
.cx-mg.is-in .cx-mg__f:nth-child(1)::after{transform-origin:top;transform:skewX(-34deg) translateX(-46%)}
.cx-mg.is-in .cx-mg__f:nth-child(3)::after{transform-origin:top;transform:skewX(34deg) translateX(46%)}
@media (max-width:599px){.cx-mg__f{font-size:12px;padding:10px 6px}}
/* платформа — на всю ширину под тремя сайтами, стрелки прямые вниз */
.cx-mg__to{left:0;right:0;text-align:center;transform:translateY(12px) scale(.98)}
.cx-mg.is-in .cx-mg__to{transform:none}
.cx-mg.is-in .cx-mg__f:nth-child(1)::after,.cx-mg.is-in .cx-mg__f:nth-child(3)::after{transform:none}
.cx-mg.is-in .cx-mg__f::after{height:58px}
@media (max-width:599px){.cx-mg__to{white-space:normal}}

/* ---------- подробности со старых страниц кейсов (28.10.2026): case-more/<slug>.json ---------- */
/* главное о проекте */
.cm-about{display:grid;gap:14px;max-width:46em}
.cm-about p{margin:0;color:var(--r-ink);font-size:clamp(17px,1.35vw,20px);line-height:1.55}
.cm-sides{display:grid;gap:14px;margin-top:28px}
@media (min-width:700px){.cm-sides{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cm-side{display:grid;gap:10px;padding:22px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(14,13,22,.08)}
.cm-side:nth-child(2){background:var(--r-ink)}
.cm-side b{color:var(--r-acc);font:600 15px/1.2 var(--r-d);letter-spacing:-.01em}
.cm-side:nth-child(2) b{color:#b4a8ff}
.cm-side p{margin:0;color:var(--r-ink);font-size:16px;line-height:1.55}
.cm-side:nth-child(2) p{color:#e6e4f5}

/* списки, шаги, карточки */
.cm-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.cm-list li{position:relative;padding-left:22px;color:var(--r-ink);font-size:15.5px;line-height:1.5}
.cm-list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--r-acc)}
.cm-steps{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:s}
.cm-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid rgba(14,13,22,.1)}
.cm-steps li>span{color:var(--r-acc);font:600 15px/1.4 var(--r-d);font-variant-numeric:tabular-nums}
.cm-steps li p{margin:0;color:var(--r-ink);font-size:15.5px;line-height:1.5}
.cm-cards{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:700px){.cm-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}.cm-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cm-cards li{display:grid;gap:8px;align-content:start;padding:20px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(14,13,22,.08);transition:box-shadow .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.cm-cards li:hover{box-shadow:0 0 0 1px var(--r-acc),0 20px 40px -26px rgba(61,18,252,.45);transform:translateY(-2px)}
.cm-cards b{color:var(--r-ink);font:600 clamp(16px,1.3vw,19px)/1.2 var(--r-d);letter-spacing:-.02em}
.cm-cards span{color:var(--r-mute);font-size:14.5px;line-height:1.5}

/* подпроекты вкладками */
.cm-pj{display:grid;gap:28px}
.cm-pj__tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.cm-pj__tabs::-webkit-scrollbar{display:none}
.cm-pj__tabs button{flex:none;display:flex;align-items:center;gap:10px;max-width:300px;padding:12px 18px;border:1px solid rgba(14,13,22,.14);border-radius:12px;background:#fff;color:var(--r-ink);
  font:600 15px/1.25 inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.cm-pj__tabs button .n{color:var(--r-acc);font:600 13px/1 var(--r-d)}
.cm-pj__tabs button[aria-selected="true"]{background:var(--r-ink);border-color:var(--r-ink);color:#fafafa}
.cm-pj__tabs button[aria-selected="true"] .n{color:#b4a8ff}
.cm-pj__tabs button:hover{border-color:var(--r-acc)}
.cm-pj__tabs button:focus-visible{outline:2px solid var(--r-acc);outline-offset:2px}
.cm-pj__p{display:none;gap:22px}
.cm-pj__p.is-on{display:grid;animation:cmfade .45s ease both}
@keyframes cmfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cm-pj__t{margin:0;color:var(--r-ink);font:600 clamp(22px,2.2vw,34px)/1.1 var(--r-d);letter-spacing:-.035em}
.cm-pj__lead{margin:0;max-width:46em;color:var(--r-ink);font-size:16.5px;line-height:1.6}
.cm-pj__stack{margin:0}
.cm-pj__cols{display:grid;gap:28px}
@media (min-width:900px){.cm-pj__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}}
.cm-pj__h{margin:0 0 12px;color:var(--r-mute);font:600 13px/1 inherit;text-transform:lowercase;letter-spacing:.02em}

/* комментарии команды */
.cm-qs{display:grid;gap:20px}
.cm-qs__tabs{display:flex;flex-wrap:wrap;gap:8px}
.cm-qs__tabs button{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid rgba(14,13,22,.14);border-radius:99px;background:#fff;color:var(--r-ink);font:600 14px/1 inherit;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.cm-qs__tabs button img,.cm-qs__tabs button span{width:32px;height:32px;border-radius:50%;object-fit:cover}
.cm-qs__tabs button span{display:grid;place-items:center;background:rgba(61,18,252,.1);color:var(--r-acc)}
.cm-qs__tabs button[aria-selected="true"]{border-color:var(--r-acc);background:rgba(61,18,252,.06);color:var(--r-acc)}
.cm-qs__p{display:none}
.cm-qs__p.is-on{display:block;animation:cmfade .45s ease both}
.cm-q{position:relative;display:grid;gap:22px;margin:0;padding:clamp(24px,3vw,40px);border-radius:16px;background:var(--r-ink);color:#fafafa}
.cm-q::before{content:"“";position:absolute;right:clamp(18px,2.4vw,32px);top:-.12em;color:rgba(180,168,255,.25);font:600 clamp(110px,12vw,180px)/1 Georgia,serif}
.cm-q blockquote{position:relative;margin:0;font-size:clamp(17px,1.5vw,22px);line-height:1.55}
.cm-q figcaption{display:flex;align-items:center;gap:14px}
.cm-q__ph{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#2a2838}
.cm-q__ph--i{display:grid;place-items:center;color:#b4a8ff;font:600 22px/1 var(--r-d)}
.cm-q figcaption b{display:block;font:600 16px/1.2 var(--r-d);letter-spacing:-.02em}
.cm-q figcaption span span{display:block;margin-top:4px;color:#b9b5d6;font-size:14px}

/* результаты: галочки по очереди */
.cm-res{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:700px){.cm-res{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cm-res li{position:relative;padding:18px 18px 18px 56px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(14,13,22,.08);color:var(--r-ink);font-size:15.5px;line-height:1.5}
.cm-res li::before{content:"";position:absolute;left:18px;top:18px;width:24px;height:24px;border-radius:50%;background:#12b76a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat;
  transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i) * 120ms + 200ms)}
.cm-res.in li::before,.cm-res.is-in li::before{transform:none}

/* отзыв клиента */
.cm-rv{display:grid;gap:18px;margin:0;padding:clamp(24px,3vw,44px);border-left:3px solid var(--r-acc);background:#fff;border-radius:0 16px 16px 0}
.cm-rv blockquote{margin:0;color:var(--r-ink);font:500 clamp(18px,1.7vw,24px)/1.5 inherit}
.cm-rv b{display:block;color:var(--r-ink);font:600 16px/1.2 var(--r-d)}
.cm-rv figcaption span{color:var(--r-mute);font-size:14px}
@media (prefers-reduced-motion:reduce){.cm-pj__p.is-on,.cm-qs__p.is-on{animation:none}.cm-res li::before{transition:none}}

/* «Как устроен проект»: темы слева, содержание справа (4 и больше разделов) */
.cm-dt{display:grid;gap:20px}
.cm-dt__nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.cm-dt__nav::-webkit-scrollbar{display:none}
.cm-dt__nav button{flex:none;display:flex;align-items:baseline;gap:10px;max-width:280px;padding:12px 16px;border:1px solid rgba(14,13,22,.14);border-radius:12px;background:#fff;
  color:var(--r-ink);font:600 14.5px/1.3 inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.cm-dt__nav button .n{color:var(--r-acc);font:600 12px/1 var(--r-d);font-variant-numeric:tabular-nums}
.cm-dt__nav button[aria-selected="true"]{background:var(--r-ink);border-color:var(--r-ink);color:#fafafa}
.cm-dt__nav button[aria-selected="true"] .n{color:#b4a8ff}
.cm-dt__nav button:hover{border-color:var(--r-acc)}
.cm-dt__nav button:focus-visible{outline:2px solid var(--r-acc);outline-offset:2px}
.cm-dt__p{display:none;gap:16px;align-content:start}
.cm-dt__p.is-on{display:grid;animation:cmfade .45s ease both}
.cm-dt__p h3{margin:0;color:var(--r-ink);font:600 clamp(20px,1.9vw,28px)/1.15 var(--r-d);letter-spacing:-.03em}
.cm-dt__lead{margin:0;max-width:44em;color:var(--r-ink);font-size:16px;line-height:1.6}
@media (min-width:1024px){
  .cm-dt{grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start}
  .cm-dt__nav{flex-direction:column;gap:6px;overflow:visible;position:sticky;top:100px}
  .cm-dt__nav button{max-width:none;width:100%}
}

/* тематические контурные чертежи разделов (28.10.2026, Фёдор: «побольше тематических картинок»): sitegen.py _cmpic().
   На широком экране — справа от текста, на телефоне — небольшим блоком над текстом */
.cm-pic{display:block;width:100%;height:auto}
.cm-wpic{display:grid;gap:16px;align-items:center}
.cm-wpic__t{display:grid;gap:18px;align-content:start}
.cm-wpic>.cm-pic{order:-1;max-width:240px;margin:0 auto}
.cm-dt__p--pic>.cm-pic{order:-1;max-width:220px;margin:0 auto 4px}
@media (min-width:900px){
  .cm-wpic{grid-template-columns:minmax(0,1fr) minmax(240px,360px);gap:56px}
  .cm-wpic>.cm-pic{order:0;max-width:none;margin:0}
}
@media (min-width:1100px){
  .cm-dt__p--pic.is-on{grid-template-columns:minmax(0,1fr) minmax(160px,210px);column-gap:36px}
  .cm-dt__p--pic>:not(.cm-pic){grid-column:1}
  .cm-dt__p--pic>.cm-pic{order:0;grid-column:2;grid-row:1/span 8;align-self:start;max-width:none;margin:0}
}