/* Статические страницы под поиск (ops/seo_pages.py): /trainer/<экзамен>/ и /trainer/<экзамен>/zadanie-N/ */
:root { --brand:#5941F2; --brand-2:#7663F2; --lav:#ABA0F2; --lav-3:#EEEBFF; --lav-4:#F6F4FF; --ink:#12102A; --ink-2:#3B3755; --muted:#7B7794; --line:#E7E4F3; --bg:#F2F2F2; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 'Rubik', system-ui, sans-serif; }
h1, h2, h3 { font-family: 'Geologica', 'Rubik', system-ui, sans-serif; line-height: 1.2; letter-spacing: -.01em; }
.wrap { max-width: 820px; margin: 0 auto; padding: 0 16px; }
.top { background: var(--brand); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; max-width: 980px; }
.logo img { height: 28px; display: block; }
.top nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.top nav a { color: #fff; text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.14); }
.top nav a:hover { background: rgba(255,255,255,.28); }
main.wrap { padding-top: 22px; padding-bottom: 40px; }
.bc { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.bc a { color: var(--brand); text-decoration: none; }
h1 { font-size: clamp(26px, 5vw, 38px); margin: 0 0 12px; }
h2 { font-size: clamp(21px, 3.6vw, 26px); margin: 34px 0 10px; }
h3 { font-size: 18px; margin: 18px 0 6px; }
.lead { font-size: 17px; color: var(--ink-2); margin: 0 0 18px; }
section { background: #fff; border-radius: 20px; padding: 6px 22px 20px; margin: 18px 0; box-shadow: 0 1px 0 var(--line); }
section > h2:first-child { margin-top: 18px; }
ul, ol { padding-left: 22px; }
li { margin: 5px 0; }
.cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0; }
.cta span { color: var(--muted); font-size: 13px; }
.btn { display: inline-block; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; text-decoration: none; font-weight: 600; padding: 13px 22px; border-radius: 14px; box-shadow: 0 10px 24px -12px rgba(89,65,242,.8); }
.btn:hover { filter: brightness(1.06); }
.ex { border-top: 1px solid var(--line); padding-top: 4px; }
.ex:first-of-type { border-top: 0; }
.cond { margin: 6px 0 10px; }
.task-fig { margin: 10px 0; }
.task-fig .fig { width: 100%; max-width: 340px; height: auto; max-height: 300px; display: block; }
details { background: var(--lav-4); border-radius: 14px; padding: 10px 16px; margin: 10px 0; }
summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.steps { padding-left: 20px; }
.ans { margin: 8px 0 2px; }
.types { columns: 2; column-gap: 28px; }
@media (max-width: 560px) { .types { columns: 1; } section { padding: 4px 16px 16px; } }
.nums { list-style: none; padding: 0; display: grid; gap: 8px; }
.nums a { display: block; text-decoration: none; color: var(--ink); background: var(--lav-4); border-radius: 14px; padding: 11px 16px; }
.nums a:hover { background: var(--lav-3); }
.nums a b { display: block; }
.nums a span { color: var(--muted); font-size: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips a { text-decoration: none; background: var(--lav-3); color: var(--brand); padding: 8px 16px; border-radius: 999px; font-weight: 500; }
.pn { display: flex; justify-content: space-between; gap: 10px; margin: 24px 0 6px; font-weight: 500; }
.pn a { color: var(--brand); text-decoration: none; }
.foot { color: var(--muted); font-size: 13px; padding: 10px 0 40px; }
.foot a { color: var(--brand); }
.nobr { white-space: nowrap; }
.katex { font-size: 1.05em; }
/* чертежи решения — те же правила, что в приложении */
.sfig { margin: 12px auto 6px; width: 100%; }
.sfig__box { position: relative; width: 100%; }
.sfig__box svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sfig__l { position: absolute; transform: translate(-50%, -50%); padding: 2px 3px; border-radius: 6px; background: rgba(255,255,255,.88); font-size: 13.5px; line-height: 1; white-space: nowrap; color: var(--ink); pointer-events: none; }
.sfig__l.end { color: var(--brand); }
.sfig__l.var { font-size: 15px; }
.sfig__l.txt { font-size: 12px; font-weight: 600; color: var(--brand); }
.sfig__l.txt.mute { color: var(--muted); font-weight: 500; }
.sfig__l.txt.ink { color: var(--ink); font-weight: 500; }
.sfig--circle { max-width: 300px; }
.sfig__l.tick { font-size: 12px; color: var(--ink-2); background: none; }
.sfig__l.lbl { font-size: 13px; color: var(--brand); }
.sfig__l.pt { font-size: 14px; background: none; }
.sfig--solid { max-width: 420px; }
.sfig figcaption { margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--muted); text-align: center; }