/*
 * Знакомство с сайтом: помощник, экскурсия с подсветкой, вопрос, обучение,
 * тест уровня и карточка «Ваши задачи» (ui/onboarding-guide.js).
 *
 * Цвета берутся только из токенов темы (steppe-light / steppe-night /
 * charcoal-gold), своих палитр здесь нет. Материал — полупрозрачный слой с
 * размытием, на «пониженной прозрачности» он становится сплошным. Движение
 * идёт без перелёта (критическое демпфирование), нажатие откликается сразу, а
 * при «уменьшить движение» остаётся только короткое проявление.
 */

.onb-root {
    --onb-accent: var(--accent, #176C68);
    --onb-accent-hover: var(--accent-hover, #115653);
    --onb-on-accent: var(--accent-ink, #17120a);
    --onb-ink: var(--text-primary, #272922);
    --onb-muted: var(--text-secondary, #625F55);
    --onb-bg: var(--product-bg, #F3EFE4);
    --onb-surface: var(--surface-1, #FAF6EC);
    --onb-surface-2: var(--surface-2, #EEE8DB);
    --onb-raised: var(--surface-raised, #E5DFD2);
    --onb-line: var(--border-subtle, #D5CEBF);
    --onb-danger: var(--danger, #A43D32);
    --onb-ok: var(--success, #3F6645);
    --onb-scrim: rgba(12, 10, 8, .56);
    --onb-ease: cubic-bezier(.22, .9, .27, 1);
    position: fixed;
    inset: 0;
    z-index: 10090;
    pointer-events: none;
    font-family: inherit;
    color: var(--onb-ink);
    -webkit-tap-highlight-color: transparent;
}
.onb-root > * { pointer-events: auto; }
.onb-root *, .onb-root *::before, .onb-root *::after { box-sizing: border-box; }

/* ── Помощник ─────────────────────────────────────────────────────────── */
.onb-guide {
    --guide-size: 52px;
    display: inline-grid;
    flex: none;
    width: var(--guide-size);
    height: var(--guide-size);
    color: var(--onb-accent);
}
.onb-guide svg { width: 100%; height: 100%; overflow: visible; display: block; }
.onb-guide__body { fill: currentColor; }
.onb-guide__face { fill: var(--onb-bg); }
.onb-guide__stem { stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.onb-guide__stroke { fill: none; stroke: var(--onb-accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.onb-guide__fill { fill: var(--onb-accent); stroke: none; }
.onb-guide__soft { fill: var(--onb-accent); opacity: .22; }
.onb-guide__spark { fill: var(--onb-accent); }
.onb-ex { opacity: 0; transition: opacity .2s ease; }
.onb-guide[data-emotion="greet"] .onb-ex--greet,
.onb-guide[data-emotion="explain"] .onb-ex--explain,
.onb-guide[data-emotion="think"] .onb-ex--think,
.onb-guide[data-emotion="celebrate"] .onb-ex--celebrate,
.onb-guide[data-emotion="encourage"] .onb-ex--encourage { opacity: 1; }
.onb-guide__head { transform-box: fill-box; transform-origin: 50% 100%; }
.onb-guide__eyes { transform-box: fill-box; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference) {
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="greet"] .onb-guide__head { animation: onb-bob 2.6s ease-in-out infinite; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="explain"] .onb-guide__head { animation: onb-lean 3.2s ease-in-out infinite; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="think"] .onb-guide__head { animation: onb-sway 3.6s ease-in-out infinite; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="celebrate"] .onb-guide__head { animation: onb-hop .9s var(--onb-ease) 2; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="encourage"] .onb-guide__head { animation: onb-nod 3.4s ease-in-out infinite; }
    body:not([data-reduced-motion="true"]) .onb-guide .onb-ex--explain .onb-guide__eyes,
    body:not([data-reduced-motion="true"]) .onb-guide .onb-ex--think .onb-guide__eyes { animation: onb-blink 5s infinite; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="greet"] .onb-guide__wave { animation: onb-wave 1.4s ease-in-out infinite; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="explain"] .onb-guide__point { animation: onb-point 1.5s ease-in-out infinite; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="think"] .onb-guide__dot { animation: onb-dot 1.5s ease-in-out infinite; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="think"] .onb-guide__dot:nth-child(2) { animation-delay: .2s; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="think"] .onb-guide__dot:nth-child(3) { animation-delay: .4s; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="celebrate"] .onb-guide__spark { animation: onb-spark 1.2s var(--onb-ease) infinite; transform-box: fill-box; transform-origin: 50% 50%; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="celebrate"] .onb-guide__spark:nth-child(2) { animation-delay: .25s; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="celebrate"] .onb-guide__spark:nth-child(3) { animation-delay: .5s; }
    body:not([data-reduced-motion="true"]) .onb-guide[data-emotion="encourage"] .onb-guide__heart { animation: onb-beat 2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
}
@keyframes onb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }
@keyframes onb-lean { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
@keyframes onb-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes onb-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
@keyframes onb-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.2px); } }
@keyframes onb-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes onb-wave { 0%, 100% { opacity: .35; transform: translateX(0); } 50% { opacity: 1; transform: translateX(1.4px); } }
@keyframes onb-point { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes onb-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes onb-spark { 0%, 100% { transform: scale(.55); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes onb-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* ── Кнопки ───────────────────────────────────────────────────────────── */
.onb-btn {
    min-height: 48px;
    min-width: 48px;
    padding: 0 20px;
    border: 1px solid var(--onb-line);
    border-radius: 14px;
    background: var(--onb-surface-2);
    color: var(--onb-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.2;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .1s ease-out, background-color .15s ease, border-color .15s ease;
}
.onb-btn:active { transform: scale(.97); }
.onb-btn:focus-visible, .onb-skip:focus-visible, .onb-choice:focus-visible, .onb-pit:focus-visible, .onb-link:focus-visible {
    outline: 2px solid var(--onb-accent);
    outline-offset: 2px;
}
.onb-btn--primary {
    border-color: var(--onb-accent);
    background: var(--onb-accent);
    color: var(--onb-on-accent);
}
.onb-btn--primary:hover { background: var(--onb-accent-hover); border-color: var(--onb-accent-hover); }
.onb-btn[disabled] { opacity: .45; cursor: default; }
.onb-btn[disabled]:active { transform: none; }
.onb-skip, .onb-link {
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--onb-muted);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .1s ease-out, color .15s ease, background-color .15s ease;
}
.onb-skip:hover, .onb-link:hover { color: var(--onb-ink); background: color-mix(in srgb, var(--onb-ink) 7%, transparent); }
.onb-skip:active, .onb-link:active { transform: scale(.96); }

/* ── Подсветка экскурсии ──────────────────────────────────────────────── */
.onb-blocker { position: absolute; inset: 0; background: transparent; touch-action: none; }
.onb-spot {
    position: absolute;
    left: 0; top: 0;
    border-radius: 18px;
    box-shadow: 0 0 0 100vmax var(--onb-scrim);
    outline: 2px solid var(--onb-accent);
    outline-offset: 0;
    pointer-events: none;
    transition: left .42s var(--onb-ease), top .42s var(--onb-ease), width .42s var(--onb-ease), height .42s var(--onb-ease), border-radius .42s var(--onb-ease), outline-color .3s ease;
}
.onb-spot.is-none { outline-color: transparent; }

/* ── Пузырь помощника ─────────────────────────────────────────────────── */
.onb-bubble, .onb-sheet {
    background: color-mix(in srgb, var(--onb-surface) 86%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--onb-line);
    border-top-color: color-mix(in srgb, #fff 38%, var(--onb-line));
    box-shadow: 0 18px 48px rgba(10, 8, 6, .28), 0 2px 8px rgba(10, 8, 6, .12);
    color: var(--onb-ink);
}
@media (prefers-reduced-transparency: reduce) {
    .onb-bubble, .onb-sheet { background: var(--onb-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .onb-bubble, .onb-sheet { background: var(--onb-surface); border-color: var(--onb-ink); }
}
.onb-bubble {
    position: absolute;
    left: 0; top: 0;
    width: min(420px, calc(100vw - 24px));
    padding: 12px 16px 16px;
    border-radius: 24px;
    opacity: 0;
    transform: translate3d(12px, 100vh, 0);
    transition: transform .46s var(--onb-ease), opacity .24s ease;
    will-change: transform;
}
.onb-bubble.is-in { opacity: 1; }
.onb-bubble__top { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.onb-bubble__meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.onb-kicker { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--onb-muted); }
.onb-bubble__title {
    margin: 4px 0 6px;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.onb-bubble__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    color: var(--onb-ink);
    opacity: .9;
    text-wrap: pretty;
}
.onb-bubble__title, .onb-bubble__text { transition: opacity .16s ease; }
.onb-bubble.is-swapping .onb-bubble__title, .onb-bubble.is-swapping .onb-bubble__text { opacity: 0; }
.onb-bubble__foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.onb-dots { display: flex; gap: 6px; flex: 1; min-width: 0; }
.onb-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--onb-line); transition: background-color .25s ease, width .25s var(--onb-ease); }
.onb-dots i.is-on { background: var(--onb-accent); width: 18px; border-radius: 4px; }
.onb-bubble__foot .onb-btn { min-height: 48px; padding: 0 18px; }

/* ── Листы: вопрос, обучение, тест ────────────────────────────────────── */
.onb-scrim { position: absolute; inset: 0; background: var(--onb-scrim); opacity: 0; transition: opacity .3s ease; }
.onb-scrim.is-in { opacity: 1; }
.onb-sheet {
    position: absolute;
    left: 50%; bottom: 0;
    width: min(560px, 100vw);
    max-height: min(94dvh, 880px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 28px 28px 0 0;
    opacity: 0;
    transform: translate3d(-50%, 28px, 0);
    transition: transform .46s var(--onb-ease), opacity .26s ease;
}
.onb-sheet.is-in { opacity: 1; transform: translate3d(-50%, 0, 0); }
.onb-grab { display: block; width: 38px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--onb-line); }
@media (min-width: 700px) {
    .onb-sheet { bottom: auto; top: 50%; border-radius: 28px; padding-bottom: 20px; transform: translate3d(-50%, calc(-50% + 20px), 0); }
    .onb-sheet.is-in { transform: translate3d(-50%, -50%, 0); }
    .onb-grab { display: none; }
}
.onb-sheet__head { display: grid; justify-items: start; gap: 10px; margin-bottom: 14px; }
.onb-sheet__head--row { display: flex; align-items: center; gap: 12px; justify-items: initial; }
.onb-sheet__title {
    margin: 0;
    font-size: 26px;
    line-height: 1.12;
    font-weight: 750;
    letter-spacing: -.022em;
    text-wrap: balance;
}
.onb-sheet__title--sm { font-size: 20px; letter-spacing: -.018em; }
.onb-sheet__lead { margin: 4px 0 0; font-size: 16px; line-height: 1.45; color: var(--onb-muted); text-wrap: pretty; }
.onb-sheet__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.onb-choices { display: grid; gap: 10px; margin: 4px 0 8px; }
.onb-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 16px;
    border: 1px solid var(--onb-line);
    border-radius: 18px;
    background: var(--onb-surface-2);
    color: var(--onb-ink);
    font: inherit;
    text-align: start;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .1s ease-out, background-color .15s ease, border-color .15s ease;
}
.onb-choice:hover { border-color: var(--onb-accent); }
.onb-choice:active { transform: scale(.98); }
.onb-choice strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.onb-choice small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--onb-muted); }
.onb-choice svg { width: 18px; height: 18px; stroke: var(--onb-muted); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.onb-choice--accent { border-color: var(--onb-accent); background: color-mix(in srgb, var(--onb-accent) 12%, var(--onb-surface-2)); }
.onb-sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.onb-sheet__foot .onb-btn--primary { margin-inline-start: auto; }
.onb-sheet__text { margin: 0 0 12px; font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.onb-feedback {
    min-height: 44px;
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--onb-surface-2);
    font-size: 15px;
    line-height: 1.4;
    color: var(--onb-muted);
    transition: background-color .2s ease, color .2s ease;
}
.onb-feedback[data-tone="ok"] { background: color-mix(in srgb, var(--onb-ok) 16%, var(--onb-surface-2)); color: var(--onb-ink); }
.onb-feedback[data-tone="bad"] { background: color-mix(in srgb, var(--onb-danger) 14%, var(--onb-surface-2)); color: var(--onb-ink); }
.onb-progress { height: 4px; border-radius: 2px; background: var(--onb-line); overflow: hidden; margin: 0 0 14px; }
.onb-progress > i { display: block; height: 100%; background: var(--onb-accent); transition: width .4s var(--onb-ease); }

/* ── Мини-доска ───────────────────────────────────────────────────────── */
.onb-board { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--onb-line); border-radius: 20px; background: color-mix(in srgb, var(--onb-raised) 55%, var(--onb-surface)); }
.onb-kazan { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; min-height: 34px; border-radius: 12px; background: var(--onb-surface); font-size: 13px; font-weight: 600; color: var(--onb-muted); }
.onb-kazan b { font-size: 18px; font-weight: 750; color: var(--onb-ink); font-variant-numeric: tabular-nums; transition: transform .25s var(--onb-ease); }
.onb-kazan b.is-bump { transform: scale(1.25); }
.onb-row { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; }
.onb-pit {
    position: relative;
    display: grid;
    place-items: center;
    height: 56px;
    min-width: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--onb-ink) 16%, transparent);
    border-radius: 14px 14px 18px 18px;
    background: radial-gradient(120% 90% at 50% 18%, color-mix(in srgb, var(--onb-raised) 70%, var(--onb-surface)), color-mix(in srgb, var(--onb-raised) 92%, #000));
    box-shadow: inset 0 2px 5px rgba(10, 8, 6, .16);
    color: var(--onb-ink);
    font: inherit;
    font-size: 17px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    transition: transform .1s ease-out, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
div.onb-pit { cursor: default; }
button.onb-pit { cursor: pointer; touch-action: manipulation; }
button.onb-pit:active { transform: scale(.94); }
button.onb-pit[aria-disabled="true"] { opacity: .5; cursor: default; }
.onb-pit__idx { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 600; color: var(--onb-muted); line-height: 1; }
.onb-row--opp .onb-pit__idx { bottom: auto; top: 3px; }
.onb-pit.is-selected { border-color: var(--onb-accent); box-shadow: inset 0 2px 5px rgba(10, 8, 6, .16), 0 0 0 2px var(--onb-accent); }
.onb-pit.is-hit { background: color-mix(in srgb, var(--onb-accent) 30%, var(--onb-raised)); transform: scale(1.06); }
.onb-pit.is-capture { background: color-mix(in srgb, var(--onb-ok) 38%, var(--onb-raised)); }
.onb-pit.is-shake { animation: onb-shake .32s ease; }
.onb-pit.is-tuzdyk { border-color: var(--onb-accent); background: color-mix(in srgb, var(--onb-accent) 22%, var(--onb-raised)); }
.onb-pit__star { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; fill: var(--onb-accent); }
.onb-row--opp .onb-pit__star { top: auto; bottom: 3px; }
@keyframes onb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (max-width: 380px) { .onb-pit { height: 52px; font-size: 15px; } }

/* ── Результат теста ──────────────────────────────────────────────────── */
.onb-result { display: grid; gap: 8px; margin: 0 0 12px; padding: 14px 16px; border-radius: 18px; background: var(--onb-surface-2); }
.onb-result p { margin: 0; font-size: 16px; line-height: 1.4; }
.onb-result .onb-muted { color: var(--onb-muted); font-size: 15px; }
.onb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.onb-chip { padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--onb-accent) 14%, var(--onb-surface)); border: 1px solid color-mix(in srgb, var(--onb-accent) 32%, var(--onb-line)); font-size: 13px; font-weight: 650; color: var(--onb-ink); }

/* ── Карточка «Ваши задачи» (главная и «Учиться») ─────────────────────── */
.onb-plan {
    display: grid;
    gap: 12px;
    margin: 12px 0;
    padding: 16px;
    border: 1px solid var(--border-subtle, #D5CEBF);
    border-radius: 22px;
    background: var(--surface-1, #FAF6EC);
    color: var(--text-primary, #272922);
    box-shadow: var(--tp-shadow-sm, 0 3px 12px rgba(53, 44, 29, .07));
}
.onb-plan__head { display: flex; align-items: flex-start; gap: 14px; }
.onb-plan__copy { display: grid; gap: 3px; min-width: 0; }
.onb-plan .onb-guide { --guide-size: 48px; color: var(--accent, #176C68); }
.onb-plan .onb-guide__face { fill: var(--product-bg, #F3EFE4); }
.onb-plan .onb-guide__stroke { stroke: var(--accent, #176C68); }
.onb-plan .onb-guide__fill, .onb-plan .onb-guide__soft, .onb-plan .onb-guide__spark { fill: var(--accent, #176C68); }
.onb-plan__title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.018em; line-height: 1.2; }
.onb-plan__meta { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-secondary, #625F55); }
.onb-plan__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.onb-plan__chips .onb-chip { background: color-mix(in srgb, var(--accent, #176C68) 12%, transparent); color: var(--text-primary, #272922); border-color: color-mix(in srgb, var(--accent, #176C68) 30%, var(--border-subtle, #D5CEBF)); }
.onb-plan__steps { display: flex; gap: 6px; }
.onb-plan__steps i { flex: 1; height: 6px; border-radius: 3px; background: var(--border-subtle, #D5CEBF); }
.onb-plan__steps i.is-done { background: var(--accent, #176C68); }
.onb-plan__action { width: 100%; }
.onb-plan .onb-btn { min-height: 48px; border-radius: 14px; border: 1px solid var(--accent, #176C68); background: var(--accent, #176C68); color: var(--accent-ink, #17120a); font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; touch-action: manipulation; }
.onb-plan .onb-btn:active { transform: scale(.97); }
.onb-plan .onb-btn:focus-visible { outline: 2px solid var(--accent, #176C68); outline-offset: 2px; }

/* ── Настройки: повтор знакомства ─────────────────────────────────────── */
button.tp-onb-replay {
    width: 100%;
    min-height: 66px;
    padding: 11px 16px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid var(--tp-product-border, var(--border-subtle));
    background: transparent;
    color: var(--tp-product-text, var(--text-primary));
    font: inherit;
    text-align: start;
    cursor: pointer;
}
button.tp-onb-replay:hover { background: var(--tp-color-surface-raised, var(--surface-raised)); }
button.tp-onb-replay:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
button.tp-onb-replay > span:first-child { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
button.tp-onb-replay .onb-guide { --guide-size: 26px; }
button.tp-onb-replay > span:nth-child(2) { display: grid; gap: 3px; }
button.tp-onb-replay strong { font-weight: 700; }
button.tp-onb-replay small { color: var(--tp-product-muted, var(--text-secondary)); font-size: 11px; }
button.tp-onb-replay svg.onb-chev { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Желаемое движение ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .onb-spot, .onb-bubble, .onb-sheet, .onb-scrim, .onb-progress > i, .onb-dots i { transition: opacity .2s ease !important; }
    .onb-pit.is-shake { animation: none; }
}
body[data-reduced-motion="true"] .onb-spot,
body[data-reduced-motion="true"] .onb-bubble,
body[data-reduced-motion="true"] .onb-sheet,
body[data-reduced-motion="true"] .onb-scrim { transition: opacity .2s ease !important; }
body[data-reduced-motion="true"] .onb-pit.is-shake { animation: none; }