/* Подсказки «что это, зачем, как работать»: кнопка-значок рядом с заголовком блока и всплывающая карточка.
   Цвета только из токенов темы (кабинет: --surface, --ink, --accent; витрина: --w-*). Последняя подстановка - системные цвета. */
.hint-btn{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:8px;padding:0;vertical-align:middle;flex:none;
  border:1px solid var(--rule, var(--w-line, GrayText));border-radius:50%;background:transparent;color:var(--ink-2, var(--w-ink2, GrayText));
  cursor:pointer;position:relative;transition:color .16s cubic-bezier(.23,1,.32,1),border-color .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}
.hint-btn::after{content:"";position:absolute;inset:-9px}
.hint-btn svg{width:12px;height:12px;display:block}
.hint-btn:active{transform:scale(.94)}
.hint-btn:focus-visible{outline:2px solid var(--accent, var(--w-acc, Highlight));outline-offset:2px}
.hint-btn[aria-expanded="true"]{color:var(--accent, var(--w-acc, Highlight));border-color:var(--accent, var(--w-acc, Highlight));background:var(--accent-soft, var(--w-acc-soft, transparent))}
@media (hover:hover) and (pointer:fine){.hint-btn:hover{color:var(--accent, var(--w-acc, Highlight));border-color:var(--accent, var(--w-acc, Highlight))}}
h1 .hint-btn,h2 .hint-btn,h3 .hint-btn,h4 .hint-btn{margin-left:10px}

.hint-pop{position:fixed;z-index:2147483000;width:min(360px,calc(100vw - 24px));max-height:min(70vh,520px);overflow:auto;padding:16px 18px 14px;
  background:var(--surface, var(--w-surf, Canvas));color:var(--ink, var(--w-ink, CanvasText));border:1px solid var(--rule, var(--w-line, GrayText));border-radius:14px;
  box-shadow:0 22px 48px -24px rgba(0,0,0,.55),0 4px 12px -6px rgba(0,0,0,.28);font:14.5px/1.5 var(--f-body, var(--w-f-body, system-ui, sans-serif));text-align:left;
  opacity:0;transform:translateY(4px) scale(.985);transform-origin:var(--ox,50%) var(--oy,0);transition:opacity .16s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1)}
.hint-pop[hidden]{display:none}
.hint-pop.on{opacity:1;transform:none}
.hint-pop:focus{outline:none}
.hint-pop h4{margin:0 24px 8px 0;font-size:15.5px;line-height:1.3;font-weight:600;letter-spacing:0;text-transform:none}
.hint-pop dl{margin:0;display:grid;gap:10px}
.hint-pop dt{font-size:12.5px;font-weight:600;color:var(--accent, var(--w-acc, Highlight));letter-spacing:0;text-transform:none}
.hint-pop dd{margin:2px 0 0;color:var(--ink, var(--w-ink, CanvasText))}
.hint-pop .hint-x{position:absolute;top:8px;right:8px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--ink-2, var(--w-ink2, GrayText));cursor:pointer}
.hint-pop .hint-x:focus-visible{outline:2px solid var(--accent, var(--w-acc, Highlight));outline-offset:1px}
.hint-pop .hint-x svg{width:14px;height:14px}
@media (hover:hover) and (pointer:fine){.hint-pop .hint-x:hover{background:var(--surface-2, var(--w-fill, transparent))}}
@media (max-width:560px){
  .hint-pop{left:8px!important;right:8px;bottom:8px;top:auto!important;width:auto;max-height:62vh;border-radius:18px 18px 14px 14px;transform:translateY(12px)}
}
@media (prefers-reduced-motion:reduce){.hint-pop,.hint-btn{transition:none}.hint-pop{transform:none}}