html, body { overflow-x: hidden; margin: 0; background: #f6f7f9; }
.page-bg { background: #f6f7f9; }

/* тёмная тема */
[data-mantine-color-scheme="dark"] body,
[data-mantine-color-scheme="dark"] .page-bg { background: #18191c; }
[data-mantine-color-scheme="dark"] .answer-md code,
[data-mantine-color-scheme="dark"] .answer-md pre { background: #2c2e33; }
[data-mantine-color-scheme="dark"] .answer-md a { color: #91a7ff; }
[data-mantine-color-scheme="dark"] .answer-md th,
[data-mantine-color-scheme="dark"] .answer-md td { border-color: #373a40; }

/* на узких экранах — только стрелки, без подписей */
@media (max-width: 480px) { .arrow-label { display: none; } }

/* стартовая схема-подсказка */
.onboard { container-type: inline-size; }
.onboard-title { font-size: clamp(18px, 5.4cqw, 31px); font-weight: 800; letter-spacing: -.5px;
                 line-height: 1.04; color: #243049; }
[data-mantine-color-scheme="dark"] .onboard-title { color: #e9ecf1; }
.onboard-card { border-radius: 20px; transition: background .12s ease; }
.onboard-card:hover { background: rgba(28,156,141,.08); }
/* в тёмной теме белые карточки иллюстрации остаются светлыми — нормально читаются на тёмном фоне */

.answer-md { overflow-wrap: anywhere; word-break: break-word; line-height: 1.55; font-size: 14px; }
.answer-md > *:first-child { margin-top: 0; }
.answer-md > *:last-child { margin-bottom: 0; }
.answer-md h1, .answer-md h2, .answer-md h3 { font-size: 1.05rem; margin: .6em 0 .3em; }
.answer-md ul, .answer-md ol { padding-left: 1.2em; margin: .3em 0; }
.answer-md li { margin: .2em 0; }
.answer-md p { margin: .4em 0; }

/* длинное не должно ломать вёрстку */
.answer-md pre, .answer-md table { display: block; overflow-x: auto; max-width: 100%; }
.answer-md pre { background: #f1f3f5; padding: 8px 10px; border-radius: 6px; }
.answer-md code { background: #f1f3f5; padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.answer-md pre code { background: none; padding: 0; }
.answer-md table { border-collapse: collapse; }
.answer-md th, .answer-md td { border: 1px solid #dee2e6; padding: 4px 8px; text-align: left; }
.answer-md a { color: #3b5bdb; word-break: break-all; }
.answer-md img { max-width: 100%; height: auto; }
.answer-md blockquote { border-left: 3px solid #ced4da; margin: .4em 0; padding: .1em .8em; color: #495057; }