/* Claude v3: рассказчик гидов (assets/guide-mascot.js) и интерактивные схемы разделов (assets/guide-widgets.js, inc/guide-v3.php).
   Подключает inc/guide-v3.php на страницах гидов последним слоем. Цвета — токены hub.css (день и ночь), движение — только transform/opacity,
   prefers-reduced-motion — без движения. Прежний пустой блок фигуры панели (.hg-guide__mascot) не используется: скрыт правилом :empty. */

/* --- Desktop: карточка рассказчика в колонке оглавления --- */
.hg-narr{display:none}
@media (min-width:1000px){
 .hg-narr{--hg-narr-h:172px;display:grid;grid-template-columns:84px minmax(0,1fr);align-items:start;gap:4px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--hg-line)}
 .hg-narr__fig{position:relative;height:var(--hg-narr-h)}
 .hg-narr__img{position:absolute;left:0;right:0;bottom:0;width:auto;max-width:none;height:100%;margin:0 auto;opacity:0;pointer-events:none;transform-origin:50% 100%}
 .hg-narr__img:not([src]){display:none}
 .hg-narr__img.is-on{opacity:1;animation:hg-narr-in .48s cubic-bezier(.2,.8,.2,1) both}
 .hg-narr__img.is-off{opacity:0;animation:hg-narr-out .2s ease-in both}
 .hg-narr__img.is-instant{animation:none}
 /* Режим «лицо»: другая крупная фигура на экране или мало высоты — фигура уходит, лицо в круге остаётся у пузыря (как аватар в переписке). */
 .hg-narr__face{position:absolute;left:10px;top:0;width:64px;height:64px;border-radius:50%;background:var(--hg-white);box-shadow:0 0 0 1px var(--hg-line),0 6px 16px rgb(0 0 0 / .08);opacity:0;transform:scale(.6);transition:opacity .22s ease,transform .32s cubic-bezier(.34,1.56,.64,1)}
 .hg-narr[data-mode=face] .hg-narr__face{opacity:1;transform:none}
 .hg-narr[data-mode=face] .hg-narr__img.is-on{opacity:0;animation:none;transform:translateY(8px) scale(.96);transition:opacity .22s ease,transform .22s ease}
 .hg-narr[data-mode=full] .hg-narr__img.is-on{transition:opacity .3s ease}
 .hg-narr__bubble{position:relative;margin-top:6px;padding:12px 14px 12px;border-radius:16px;background:var(--hg-soft);color:var(--hg-ink)}
 .hg-narr__bubble::before{content:"";position:absolute;left:-8px;top:18px;width:10px;height:16px;background:inherit;clip-path:polygon(0 50%,100% 0,100% 100%)}
 .hg-narr__bubble:not(:has(>:not([hidden]))){visibility:hidden}
 .hg-narr .hg-guide__hint{margin:0;font-size:13px;line-height:1.75}
 .hg-narr .hg-guide__action{min-height:40px;margin-top:4px;font-size:13px}
 .hg-narr__bubble.is-say>*{animation:hg-narr-say .34s ease-out both}
 /* Длинное оглавление (guide-mascot.js: больше 7 разделов) — плотнее, чтобы в колонке поместилась фигура рассказчика. */
 .hg-guide.hg-guide--dense{--hg-guide-item-pad:5px;--hg-guide-dot:30px}
 .hg-guide.hg-guide--dense .hg-guide__link{min-height:40px;font-size:12.5px}
 .hg-guide.hg-guide--dense .hg-guide__num{font-size:11px}
 .hg-guide.hg-guide--dense .hg-narr{margin-top:12px;padding-top:12px}
}
@keyframes hg-narr-in{0%{opacity:0;transform:translateY(12px) scale(.96)}60%{opacity:1;transform:translateY(-3px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes hg-narr-out{to{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes hg-narr-say{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* --- Телефон и планшет: чип рассказчика над нижней панелью (у desktop его нет) --- */
.hg-narr-dock{display:none}
@media (max-width:999px){
 .hg-narr-dock{display:block;position:fixed;z-index:58;right:calc(12px + var(--hg-safe-right,0px));bottom:calc(var(--hg-bottom-stack,env(safe-area-inset-bottom,0px)) + 14px);width:58px;height:58px;pointer-events:none}
 .hg-narr-dock [hidden]{display:none!important}
 .hg-narr-chip{position:relative;display:block;width:58px;height:58px;margin:0;padding:0;border:0;border-radius:50%;background:var(--hg-white);box-shadow:0 0 0 2px var(--hg-white),0 0 0 4px var(--hg-red),0 10px 24px rgb(0 0 0 / .2);cursor:pointer;pointer-events:auto;opacity:0;visibility:hidden;transform:translateY(18px) scale(.55);transition:transform .38s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,visibility 0s linear .38s;-webkit-tap-highlight-color:transparent}
 .hg-narr-dock[data-shown=true] .hg-narr-chip{opacity:1;visibility:visible;transform:none;transition:transform .38s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,visibility 0s}
 .hg-narr-dock .hg-narr-chip:is(:hover,:focus,:active){background:var(--hg-white)}
 .hg-narr-chip:focus-visible{outline:3px solid var(--hg-red);outline-offset:4px}
 .hg-narr-chip:active{transform:scale(.94)}
 .hg-narr-chip__face{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
 .hg-narr-chip.is-swap .hg-narr-chip__face{animation:hg-narr-pop .36s cubic-bezier(.34,1.56,.64,1)}
 .hg-narr-chip__dot{position:absolute;right:-1px;top:-1px;width:14px;height:14px;border-radius:50%;background:var(--hg-red);box-shadow:0 0 0 2px var(--hg-white)}
 .hg-narr-chip__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--hg-red);animation:hg-narr-ping 1.6s cubic-bezier(0,0,.2,1) 3}
 .hg-narr-pop{position:absolute;right:0;bottom:calc(100% + 12px);width:min(320px,calc(100vw - 24px - var(--hg-safe-left,0px) - var(--hg-safe-right,0px)));box-sizing:border-box;padding:12px 44px 6px 16px;border-radius:18px 18px 6px 18px;background:var(--hg-white);color:var(--hg-ink);box-shadow:0 0 0 1px var(--hg-line),0 16px 36px rgb(0 0 0 / .18);pointer-events:auto;opacity:0;visibility:hidden;transform:translateY(10px) scale(.94);transform-origin:calc(100% - 29px) 100%;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .18s ease,visibility 0s linear .26s}
 .hg-narr-pop[data-open=true]{opacity:1;visibility:visible;transform:none;transition:transform .3s cubic-bezier(.34,1.4,.64,1),opacity .18s ease,visibility 0s}
 .hg-narr-pop::after{content:"";position:absolute;right:22px;bottom:-9px;width:16px;height:10px;background:inherit;clip-path:polygon(0 0,100% 0,50% 100%)}
 .hg-narr-pop.is-say>:not(.hg-narr-pop__close){animation:hg-narr-say .32s ease-out both}
 .hg-narr-pop__where{margin:0 0 4px;color:var(--hg-muted);font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.02em}
 .hg-narr-pop__text{margin:0;font-size:14px;line-height:1.75;overflow-wrap:anywhere}
 .hg-narr-pop__row{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin:2px 0 0}
 .hg-narr-pop .hg-narr-pop__action{display:inline-flex;align-items:center;min-height:44px;color:var(--hg-red);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
 .hg-narr-pop .hg-narr-pop__toc{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--hg-ink);font:inherit;font-size:13px;font-weight:600;text-decoration:underline;text-decoration-color:var(--hg-line);text-underline-offset:3px;cursor:pointer}
 .hg-narr-pop .hg-narr-pop__toc:is(:hover,:focus,:active){background:none;color:var(--hg-red)}
 .hg-narr-pop .hg-narr-pop__close{position:absolute;right:2px;top:2px;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--hg-muted);cursor:pointer}
 .hg-narr-pop .hg-narr-pop__close:is(:hover,:focus,:active){background:none;color:var(--hg-ink)}
 .hg-narr-pop__close::before,.hg-narr-pop__close::after{content:"";position:absolute;left:15px;top:21px;width:14px;height:1.5px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
 .hg-narr-pop__close::after{transform:rotate(-45deg)}
 .hg-narr-pop :focus-visible{outline:2px solid var(--hg-red);outline-offset:2px}
 /* Реплики в потоке на телефоне не перекрываются чипом: правый отступ под него у последних строк не нужен — чип прозрачен для прокрутки. */
}
/* Телефон: оглавление гида — нижний лист под большой палец (с затемнением), а не список под верхней полосой. Открывается той же кнопкой
   полосы и «項目一覧» в реплике чипа; касание затемнения закрывает (guide-mascot.js). Пока лист открыт, блок гида выше нижней панели. */
@media (max-width:680px){
 .hg-guide[data-hg-guide-open=true]{z-index:70}
 .hg-guide[data-hg-guide-open=true]::before{content:"";position:fixed;inset:0;background:rgb(10 12 16 / .4);animation:hg-sheet-fade .2s ease-out both}
 .hg-store .hg-guide .hg-guide__list{position:fixed;top:auto;bottom:0;left:0;right:0;max-height:min(72svh,560px);margin:0;padding:6px 16px calc(14px + env(safe-area-inset-bottom,0px));border:0;border-radius:22px 22px 0 0;background:var(--hg-white);box-shadow:0 -14px 40px rgb(0 0 0 / .24)}
 .hg-guide .hg-guide__list::before{content:"";display:block;width:42px;height:4px;margin:6px auto 12px;border-radius:2px;background:var(--hg-line)}
 .hg-guide[data-hg-guide-open=true] .hg-guide__list{animation:hg-sheet-up .3s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes hg-sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes hg-sheet-fade{from{opacity:0}to{opacity:1}}
@keyframes hg-narr-pop{0%{transform:scale(.8)}60%{transform:scale(1.07)}100%{transform:none}}
@keyframes hg-narr-ping{75%,100%{transform:scale(2.1);opacity:0}}

@media (prefers-reduced-motion:reduce){
 .hg-narr__img.is-on,.hg-narr__img.is-off,.hg-narr__bubble.is-say>*,.hg-narr-chip.is-swap .hg-narr-chip__face,.hg-narr-pop.is-say>*,.hg-narr-chip__dot::after{animation:none!important}
 .hg-narr__face,.hg-narr-chip,.hg-narr-dock[data-shown=true] .hg-narr-chip,.hg-narr-pop,.hg-narr-pop[data-open=true],.hg-narr[data-mode] .hg-narr__img.is-on{transition:none!important}
 .hg-narr-chip,.hg-narr-pop{transform:none!important}
 .hg-guide[data-hg-guide-open=true]::before,.hg-guide[data-hg-guide-open=true] .hg-guide__list{animation:none!important}
}
@media print{.hg-narr-dock{display:none!important}}

/* --- Интерактивные схемы разделов (guide-widgets.js, inc/guide-v3.php) --- */
.hg-store .jp-editorial .hg-gw{container-type:inline-size;max-width:760px;margin:24px 0 0;padding:20px 20px 18px;border:1px solid var(--hg-line);border-radius:18px;background:var(--hg-white);box-sizing:border-box}
.hg-store .jp-editorial .hg-gw p{margin:0}
.hg-gw__head{margin:0 0 14px}
.hg-store .jp-editorial .hg-gw .hg-gw__eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 6px;color:var(--hg-red);font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.08em}
.hg-gw__eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent)}
.hg-store .jp-editorial .hg-gw .hg-gw__title{color:var(--hg-ink);font-size:17px;font-weight:700;line-height:1.5;text-wrap:balance}
.hg-store .jp-editorial .hg-gw .hg-gw__lead{margin-top:4px;color:var(--hg-muted);font-size:14px;line-height:1.7}
.hg-gw__grid{display:grid;gap:16px}
@container (min-width:600px){.hg-gw__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;gap:24px}}
.hg-gw__visual{min-width:0}
.hg-gw__svg{display:block;width:100%;height:auto;overflow:visible}
.hg-gw__controls{display:grid;gap:12px;min-width:0;align-content:start}
.hg-gw__field{display:grid;gap:6px;color:var(--hg-muted);font-size:13px;font-weight:600;line-height:1.5}
.hg-gw .hg-gw__field input[type=text]{width:100%;min-height:52px;margin:0;padding:0 16px;border:1px solid var(--hg-line);border-radius:12px;background:var(--hg-paper);color:var(--hg-ink);font:inherit;font-size:22px;font-weight:700;letter-spacing:.14em;font-variant-numeric:tabular-nums;box-sizing:border-box}
.hg-gw .hg-gw__field select{min-height:44px;min-width:112px;margin:0;padding:0 12px;border:1px solid var(--hg-line);border-radius:10px;background:var(--hg-paper);color:var(--hg-ink);font:inherit;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.hg-gw__field--inline{grid-template-columns:auto auto auto;align-items:center;justify-content:start;gap:10px}
.hg-gw .hg-gw__field :is(input,select):focus-visible{outline:2px solid var(--hg-red);outline-offset:2px;border-color:var(--hg-red)}
/* Ползунок: своя дорожка с заполнением до значения (--v ставит JS) и круглый бегунок; рамка полей темы к нему не применяется. */
.hg-gw .hg-gw__field--range input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer;--v:30%}
.hg-gw__field--range input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(to right,var(--hg-red) var(--v),var(--hg-line) var(--v))}
.hg-gw__field--range input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--hg-line)}
.hg-gw__field--range input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:var(--hg-red)}
.hg-gw__field--range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-10px;border:3px solid var(--hg-white);border-radius:50%;background:var(--hg-red);box-shadow:0 2px 8px rgb(0 0 0 / .25);transition:transform .15s ease}
.hg-gw__field--range input[type=range]::-moz-range-thumb{width:22px;height:22px;border:3px solid var(--hg-white);border-radius:50%;background:var(--hg-red);box-shadow:0 2px 8px rgb(0 0 0 / .25)}
.hg-gw__field--range input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.hg-gw__field--range input[type=range]:focus-visible{outline:2px solid var(--hg-red);outline-offset:2px;border-radius:8px}
.hg-gw__ghost rect{fill:none;stroke:var(--hg-muted);stroke-width:1;stroke-dasharray:3 4;opacity:.55}
.hg-gw__speed{font-size:15px;font-weight:800;fill:var(--hg-ink);font-variant-numeric:tabular-nums}
.hg-store .jp-editorial .hg-gw .hg-gw__chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--hg-muted);font-size:12px;font-weight:600}
.hg-gw .hg-gw__chip{min-height:40px;margin:0;padding:0 14px;border:1px solid var(--hg-line);border-radius:999px;background:var(--hg-white);color:var(--hg-ink);font:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s ease,color .15s ease,transform .15s ease}
.hg-gw .hg-gw__chip:is(:hover,:focus){background:var(--hg-white);border-color:var(--hg-red);color:var(--hg-red)}
.hg-gw .hg-gw__chip:active{transform:scale(.95)}
.hg-gw__seg{display:inline-flex;flex-wrap:wrap;gap:4px;justify-self:start;padding:4px;border-radius:12px;background:var(--hg-soft)}
.hg-gw .hg-gw__seg button{min-width:48px;min-height:40px;margin:0;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--hg-muted);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.hg-gw .hg-gw__seg button:is(:hover,:focus){background:transparent;color:var(--hg-ink)}
.hg-gw .hg-gw__seg button[aria-pressed=true]{background:var(--hg-white);color:var(--hg-ink);box-shadow:0 1px 3px rgb(0 0 0 / .14)}
.hg-gw button:focus-visible{outline:2px solid var(--hg-red);outline-offset:2px}
.hg-gw__out{min-height:92px;padding:12px 14px;border-radius:12px;background:var(--hg-soft);color:var(--hg-ink);font-size:14px;line-height:1.7;box-sizing:border-box}
.hg-gw__out{display:flex;align-items:flex-start;gap:12px}
.hg-gw__face{flex:none;width:44px;height:44px;border-radius:50%;background:var(--hg-white);box-shadow:0 0 0 1px var(--hg-line);object-fit:cover}
.hg-gw__face.is-pop{animation:hg-narr-pop .36s cubic-bezier(.34,1.56,.64,1)}
.hg-gw__text{min-width:0;flex:1}
.hg-gw__text>p{animation:hg-narr-say .3s ease-out both}
.hg-store .jp-editorial .hg-gw .hg-gw__text>p{color:var(--hg-ink)}
.hg-store .jp-editorial .hg-gw .hg-gw__out .is-big{font-size:18px;font-weight:700;line-height:1.55}
.hg-store .jp-editorial .hg-gw .hg-gw__out .is-note{color:var(--hg-muted);font-size:13px}
.hg-store .jp-editorial .hg-gw .hg-gw__out .is-err{color:var(--hg-red);font-weight:600}
.hg-store .jp-editorial .hg-gw .hg-gw__out .is-warn{color:#8f5600;font-weight:600}
.hg-store .jp-editorial .hg-gw .hg-gw__out .is-ok{color:#17703f;font-weight:600}
html[data-theme=dark] .hg-store .jp-editorial .hg-gw .hg-gw__out .is-warn{color:#f2b65a}
html[data-theme=dark] .hg-store .jp-editorial .hg-gw .hg-gw__out .is-ok{color:#63d494}
.hg-store .jp-editorial .hg-gw .hg-gw__note,.hg-store .jp-editorial .hg-gw .hg-gw__scale{color:var(--hg-muted);font-size:12px;line-height:1.7}
.hg-store .jp-editorial .hg-gw .hg-gw__scale{margin-top:6px;text-align:center}
/* код на боковине */
.hg-gw__emboss{font:700 22px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;fill:#80868e;letter-spacing:.06em}
.hg-gw__emboss--dim{fill:#5c6167}
.hg-gw__digit{font:800 30px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;fill:#f3f4f6;text-anchor:middle;transform-box:fill-box;transform-origin:50% 50%}
.hg-gw__digit.is-week{fill:#ff6b57}
.hg-gw__digit.is-flip{animation:hg-gw-flip .38s cubic-bezier(.2,.8,.2,1)}
@keyframes hg-gw-flip{0%{opacity:0;transform:translateY(-10px) scale(.9)}100%{opacity:1;transform:none}}
.hg-gw__cap{font-size:12px;font-weight:700;text-anchor:middle;fill:#c8cdd3}
.hg-gw__cap.is-week{fill:#ff8a7a}
.hg-gw__timeline{position:relative;height:8px;margin:2px 0 20px;border-radius:99px;background:var(--hg-line)}
.hg-gw__tl-fill{position:absolute;inset:0;border-radius:inherit;background:var(--hg-ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.hg-gw--dot[data-over=true] .hg-gw__tl-fill{background:var(--hg-red)}
.hg-gw__tl-tick{position:absolute;left:var(--at);top:-4px;width:2px;height:16px;border-radius:1px;background:var(--hg-red);transform:translateX(-1px)}
.hg-gw__tl-label{position:absolute;left:var(--at);top:14px;color:var(--hg-ink);font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap;transform:translateX(-50%)}
/* метки износа */
.hg-gw__carcass{fill:#3b3f45}
.hg-gw__blocks{transform-box:fill-box;transform-origin:50% 100%;transition:transform .12s linear}
.hg-gw__blocks rect{fill:#2a2d32;stroke:#4c5158;stroke-width:1}
.hg-gw__surface{stroke:var(--hg-red);stroke-width:1.5;stroke-dasharray:4 4;transition:transform .12s linear}
.hg-gw__bump{fill:#6b7078;transition:fill .25s ease,opacity .25s ease}
.hg-gw__bump.is-plat.is-out{fill:#e3a21a}
.hg-gw__bump.is-slip.is-out{fill:var(--hg-red)}
.hg-gw__tick{font-size:12px;font-weight:700;fill:var(--hg-muted);transition:opacity .25s ease}
.hg-gw__tick.is-slip{fill:var(--hg-red)}
.hg-gw__tick.is-plat{fill:#b07400}
html[data-theme=dark] .hg-gw__tick.is-plat{fill:#f2b65a}
.hg-gw--wear[data-kind=summer] :is(.hg-gw__bump.is-plat,.hg-gw__tick.is-plat){opacity:0}
.hg-gw__axis path{fill:none;stroke:var(--hg-muted);stroke-width:1.5}
/* PCD */
.hg-gw__disc{fill:var(--hg-soft);stroke:var(--hg-line);stroke-width:2}
.hg-gw__bore{fill:var(--hg-white);stroke:var(--hg-line);stroke-width:2}
.hg-gw__pcdcircle{fill:none;stroke:var(--hg-muted);stroke-width:1.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke;transform-origin:120px 120px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hg-gw__dimline{fill:none;stroke:var(--hg-ink);stroke-width:1.5;vector-effect:non-scaling-stroke;transform-origin:120px 120px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hg-gw__dimtext{font-size:13px;font-weight:700;text-anchor:middle;fill:var(--hg-ink)}
.hg-gw__hole{transform-origin:120px 120px;transition:transform .55s cubic-bezier(.34,1.3,.64,1),opacity .25s ease,stroke .25s ease}
.hg-gw__hole.is-car{fill:var(--hg-ink)}
.hg-gw__hole.is-wheel{fill:none;stroke-width:3}
.hg-gw--pcd[data-match=true] .hg-gw__hole.is-wheel{stroke:#1f9d55}
.hg-gw--pcd[data-match=false] .hg-gw__hole.is-wheel{stroke:var(--hg-red)}
html[data-theme=dark] .hg-gw--pcd[data-match=true] .hg-gw__hole.is-wheel{stroke:#4fd18a}
.hg-gw__hole.is-intro{transform:none!important;opacity:0!important;transition:none}
.hg-gw__pcdrow{display:grid;gap:8px;padding:12px;border:1px solid var(--hg-line);border-radius:14px}
.hg-store .jp-editorial .hg-gw .hg-gw__rowtitle{display:flex;align-items:center;gap:8px;color:var(--hg-ink);font-size:13px;font-weight:700;line-height:1.5}
.hg-gw__swatch{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;box-sizing:border-box}
.hg-gw__swatch.is-car{background:var(--hg-ink)}
.hg-gw__swatch.is-wheel{border:3px solid var(--hg-red)}
.hg-gw--pcd[data-match=true] .hg-gw__swatch.is-wheel{border-color:#1f9d55}
/* LI и индекс скорости */
.hg-gw__arc{fill:none;stroke:var(--hg-line);stroke-width:10;stroke-linecap:round}
.hg-gw__arcfill{fill:none;stroke:var(--hg-red);stroke-width:10;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset .75s cubic-bezier(.2,.8,.2,1)}
.hg-gw__ticks path{stroke:var(--hg-muted);stroke-width:1.5}
.hg-gw__ticks text{font-size:9px;font-weight:600;fill:var(--hg-muted);text-anchor:middle}
.hg-gw__needle{transform-origin:100px 96px;transform:rotate(-90deg);transition:transform .85s cubic-bezier(.34,1.25,.64,1)}
.hg-gw__needle path{stroke:var(--hg-ink);stroke-width:3;stroke-linecap:round}
.hg-gw__needle circle{fill:var(--hg-ink)}
.hg-gw__unit{font-size:11px;font-weight:700;fill:var(--hg-muted);text-anchor:middle}
.hg-gw__bar{display:flex;align-items:center;gap:10px;margin-top:12px}
.hg-gw__barlabel{color:var(--hg-muted);font-size:12px;font-weight:700}
.hg-gw__bartrack{position:relative;flex:1;height:10px;border-radius:99px;background:var(--hg-line);overflow:hidden}
.hg-gw__barfill{position:absolute;inset:0;border-radius:inherit;background:var(--hg-ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .75s cubic-bezier(.2,.8,.2,1)}
@media (max-width:680px){
 .hg-store .jp-editorial .hg-gw{margin-top:20px;padding:16px 14px 14px;border-radius:16px}
 .hg-store .jp-editorial .hg-gw .hg-gw__title{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
 .hg-gw *,.hg-gw__out>p{animation:none!important;transition:none!important}
}

/* Claude v3: 3D-вид посадки в калькуляторе гида (parts/fit-tools.php, assets/fit-tools.js, модуль assets/fit3d).
   Место под холст занято заранее (без сдвига); пока модуль грузится — мягкий блик, выбор ракурса запоминается до монтирования.
   С 3D (класс has-3d ставится сразу) SVG-схемы скрыты, цифры остаются. Без WebGL2 весь блок 3D убирается (hidden), SVG возвращается. */
html:not(.hg-guide-js) .hg-store .jp-editorial .hg-fit-3d{display:none}
.hg-store .jp-editorial .hg-fit-3d{margin-top:18px}
.hg-store .jp-editorial .hg-fit-3d__stage{position:relative;aspect-ratio:1/1;max-height:min(62svh,520px);width:100%;border-radius:14px;overflow:hidden;background:linear-gradient(110deg,var(--hg-soft) 30%,var(--hg-paper) 50%,var(--hg-soft) 70%) 0 0/250% 100%}
.hg-store .jp-editorial .hg-fit-3d__stage:empty{animation:hg-fit3d-wait 1.6s linear infinite}
@keyframes hg-fit3d-wait{from{background-position:100% 0}to{background-position:-150% 0}}
@container hg-fit (min-width:600px){.hg-store .jp-editorial .hg-fit-3d__stage{aspect-ratio:16/10;max-height:none}}
.hg-store .jp-editorial .hg-fit-3d__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:10px}
.hg-store .jp-editorial .hg-fit-3d__views{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--hg-soft)}
.hg-store .jp-editorial .hg-fit-3d__views button{min-height:38px;margin:0;padding:6px 16px;border:0;border-radius:999px;background:transparent;color:var(--hg-muted);font-size:13px;font-weight:700;line-height:1.2;cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.hg-store .jp-editorial .hg-fit-3d__views button:is(:hover,:focus,:active){background:transparent;color:var(--hg-ink)}
.hg-store .jp-editorial .hg-fit-3d__views button[aria-pressed=true]{background:var(--hg-white);color:var(--hg-ink);box-shadow:0 0 0 1px var(--hg-line),0 2px 6px #0000000f}
.hg-store .jp-editorial .hg-fit .hg-fit-3d__hint{font-size:12px;line-height:1.5;color:var(--hg-muted)}
.hg-store .jp-editorial .hg-fit .hg-fit-3d__note{margin-top:6px;font-size:12px;line-height:1.6;color:var(--hg-muted)}
.hg-store .jp-editorial .hg-fit.has-3d :is(.hg-fit-svg--top,.hg-fit-svg--round){display:none}
.hg-store .jp-editorial .hg-fit.has-3d .hg-fit-compare{grid-template-columns:minmax(0,1fr)}
/* у сравнения шин обод и вылет условные — сводку «наружу» в общем виде не показываем */
.hg-store .jp-editorial .hg-fit-3d[data-fit-mode=speed] .hgf3d__lab[data-v=quarter]{display:none!important}
@media (pointer:coarse){.hg-store .jp-editorial .hg-fit-3d__views button{min-height:44px}}
@media (max-width:520px){.hg-store .jp-editorial .hg-fit-3d__views{display:flex;width:100%}.hg-store .jp-editorial .hg-fit-3d__views button{flex:1 1 0;padding:6px 8px}}
@media (prefers-reduced-motion:reduce){.hg-store .jp-editorial .hg-fit-3d__stage:empty{animation:none}}
.hg-store .jp-editorial .hg-fit:not(.has-3d) .hg-fit-3d__note{display:none}

/* Lead v3 (аудит M-05/M-32): чип рассказчика при прокрутке уходит к краю язычком и не закрывает текст.
   Сдвиг — свойством translate: правило reduced motion обнуляет transform у чипа (там сдвиг просто без анимации). */
@media (max-width:999px){
 .hg-narr-dock[data-shown=true] .hg-narr-chip{transition:transform .38s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,visibility 0s,translate .34s cubic-bezier(.2,.8,.2,1)}
 .hg-narr-dock[data-tucked=true] .hg-narr-chip{translate:46px 0}
 .hg-narr-dock[data-tucked=true] .hg-narr-chip__dot{right:auto;left:-1px}
}

/* Lead v3 (аудит M-06): на телефоне картинка остаётся на экране, пока работаешь с управлением, — 3D-сцена калькулятора
   и рисунок каждой схемы «試してみる» липкие под шапкой и полосой гида. Кнопки шага, ползунки и сегменты — 44 px. */
@media (max-width:680px){
 .hg-store .jp-editorial .hg-fit.has-3d .hg-fit-3d{position:sticky;top:calc(var(--hg-guide-header-h,0px) + var(--hg-guide-compact-h,52px));z-index:4;margin:14px -16px 0;padding:8px 16px;background:var(--hg-white);box-shadow:0 12px 14px -14px rgb(0 0 0 / .35)}
 .hg-store .jp-editorial .hg-fit .hg-fit-3d__hint{display:none}
 .hg-store .jp-editorial .hg-fit-3d__bar{margin-top:6px}
 .hg-store .jp-editorial .hg-fit-range__row{grid-template-columns:44px minmax(0,1fr) 44px}
 .hg-store .jp-editorial .hg-fit-step{width:44px;height:44px}
 .hg-store .jp-editorial .hg-fit input[type=range]{height:44px}
}
/* холст на телефоне квадратный: раскладка подписей модуля рассчитана на высокий холст (на 4:3 подписи RU/EN наезжали);
   на низком экране сцена не липкая — иначе управлению не остаётся места */
@media (max-width:680px) and (max-height:700px){.hg-store .jp-editorial .hg-fit.has-3d .hg-fit-3d{position:static;box-shadow:none}}
/* длинные строки подписей 3D переносятся, а не обрезаются краем холста */
.hg-store .jp-editorial .hg-fit-3d .hgf3d__lab .s{white-space:normal}
@container (max-width:599px){
 .hg-store .jp-editorial .hg-gw .hg-gw__visual{position:sticky;top:calc(var(--hg-guide-header-h,0px) + var(--hg-guide-compact-h,52px));z-index:3;margin-inline:-14px;padding:6px 14px 8px;background:var(--hg-white);box-shadow:0 12px 14px -14px rgb(0 0 0 / .35)}
 .hg-store .jp-editorial .hg-gw--pcd .hg-gw__svg{width:min(100%,250px);margin-inline:auto}
 .hg-store .jp-editorial .hg-gw--pcd .hg-gw__controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hg-store .jp-editorial .hg-gw--pcd .hg-gw__controls>:not(.hg-gw__pcdrow){grid-column:1/-1}
 .hg-store .jp-editorial .hg-gw--pcd .hg-gw__pcdrow .hg-gw__seg{justify-self:stretch;justify-content:space-between}
 .hg-store .jp-editorial .hg-gw--pcd .hg-gw__pcdrow .hg-gw__seg button{flex:1 1 0;min-width:0;padding:0 6px}
 .hg-store .jp-editorial .hg-gw--pcd .hg-gw__pcdrow .hg-gw__field select{min-width:0;width:100%}
 .hg-store .jp-editorial .hg-gw--pcd .hg-gw__pcdrow .hg-gw__field--inline{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 6px}
 .hg-store .jp-editorial .hg-gw--pcd .hg-gw__pcdrow .hg-gw__field--inline>span:first-child{grid-column:1/-1;font-size:12px}
 .hg-store .jp-editorial .hg-gw--pcd .hg-gw__pcdrow .hg-gw__field select{padding:0 6px 0 10px}
 .hg-store .jp-editorial .hg-gw--pcd .hg-gw__pcdrow{padding:10px}
 .hg-store .jp-editorial .hg-gw .hg-gw__seg button{min-height:44px}
 .hg-store .jp-editorial .hg-gw .hg-gw__chip{min-height:44px}
}