@font-face{font-family:"Nunito";src:url("fonts/nunito/Nunito-var.ttf") format("truetype");font-weight:200 1000;font-style:normal;font-display:block}
/* Octomark — токены дизайна. Собрано из design/tokens.ts (node tools/build-tokens.ts); руками не править. */
:root{--font:Nunito,"system-ui",-apple-system,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei","sans-serif";--fs-display:1.6471rem;--lh-display:1.2;--fw-display:800;--fs-title:1.2941rem;--lh-title:1.25;--fw-title:800;--fs-heading:1.1765rem;--lh-heading:1.3;--fw-heading:800;--fs-subheading:1rem;--lh-subheading:1.4;--fw-subheading:700;--fs-lead:1.0588rem;--lh-lead:1.45;--fw-lead:400;--fs-body:1rem;--lh-body:1.5;--fw-body:400;--fs-button:1rem;--lh-button:1.2;--fw-button:700;--fs-small:0.8824rem;--lh-small:1.4;--fw-small:400;--fs-caption:0.7647rem;--lh-caption:1.4;--fw-caption:400;--fs-micro:0.7059rem;--lh-micro:1.35;--fw-micro:400;--fs-price:2rem;--lh-price:1.15;--fw-price:800;--fw-regular:400;--fw-semibold:600;--fw-bold:700;--fw-heavy:800;--sp-x1:4px;--sp-x2:8px;--sp-x3:12px;--sp-x4:16px;--sp-x5:20px;--sp-x6:24px;--sp-x8:32px;--sp-x10:40px;--sp-x12:48px;--r-card:20px;--r-small:14px;--r-button:16px;--r-chip:999px;--r-sheet:24px;--sz-touch:48px;--sz-button:50px;--sz-row:56px;--sz-icon:24px;--sz-icon-small:18px;--sz-gutter-phone:20px;--sz-gutter-tablet:32px;--sz-measure:620px;--sz-tablet-from:768px;--sz-border:1.5px;--sz-border-selected:2px;--sz-focus:2px;--sz-focus-offset:2px;--t-fast:120ms;--t-base:200ms;--t-slow:320ms;--ease:cubic-bezier(0.2, 0.7, 0.2, 1);--contrast-text:4.5;--contrast-graphic:3}
:root{--bg:#F5FAF8;--surface:#FFFFFF;--work:#F5FAF8;--text:#1E2A2E;--muted:#58686D;--disabled:#8A9293;--line:#C9D7D3;--accent:#6D4AC9;--on-accent:#FFFFFF;--accent-pressed:#5D3FAB;--accent-text:#5B3BB5;--accent-soft:#EDE9F9;--ok:#1F6B33;--ok-bg:#E3F5E8;--bad:#A61E14;--bad-bg:#FCE8E5;--water:#2F7FB0;--water-bg:#E2EFF7;--sun:#FFC83D;--scrim:rgba(30, 42, 46, 0.45);--shadow:0 2px 10px rgba(30, 42, 46, 0.06);color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#16151D;--surface:#211F2B;--work:#2A2836;--text:#EEEDF5;--muted:#ADA9C4;--disabled:#828189;--line:#3A3750;--accent:#9B82F0;--on-accent:#140F2A;--accent-pressed:#846FCC;--accent-text:#BFB0FF;--accent-soft:#3C3556;--ok:#6FD48A;--ok-bg:#14301E;--bad:#F39A8B;--bad-bg:#3B1714;--water:#6FB6E0;--water-bg:#17293A;--sun:#FFD45E;--scrim:rgba(0, 0, 0, 0.6);--shadow:none;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#16151D;--surface:#211F2B;--work:#2A2836;--text:#EEEDF5;--muted:#ADA9C4;--disabled:#828189;--line:#3A3750;--accent:#9B82F0;--on-accent:#140F2A;--accent-pressed:#846FCC;--accent-text:#BFB0FF;--accent-soft:#3C3556;--ok:#6FD48A;--ok-bg:#14301E;--bad:#F39A8B;--bad-bg:#3B1714;--water:#6FB6E0;--water-bg:#17293A;--sun:#FFD45E;--scrim:rgba(0, 0, 0, 0.6);--shadow:none;color-scheme:dark}
html{font-size:17px}
html[data-text="large"]{font-size:22.1px}
/* Цвета предметов: класс .subj-<id> на экране, карточке или картинке; роли внутри — --subj (заливка под белый текст),
   --subj-text (текст и линии), --subj-soft (плашка). Тёмная тема переключает роли сама. */
.subj-lal{--subj:#7B3FA0;--subj-text:#7B3FA0;--subj-soft:#F0E4F7}
.subj-ins{--subj:#8A5A00;--subj-text:#8A5A00;--subj-soft:#F5ECD8}
.subj-sci{--subj:#4E7D1A;--subj-text:#4E7D1A;--subj-soft:#E7F0DA}
.subj-math{--subj:#3B5BB5;--subj-text:#3B5BB5;--subj-soft:#E3E8F8}
.subj-art{--subj:#B0266A;--subj-text:#B0266A;--subj-soft:#F9E2EC}
.subj-phe{--subj:#BF4A0F;--subj-text:#BF4A0F;--subj-soft:#FBE7DB}
.subj-des{--subj:#4F5D75;--subj-text:#4F5D75;--subj-soft:#E7EBF1}
.subj-pp{--subj:#8E2B2B;--subj-text:#8E2B2B;--subj-soft:#F6E3E3}
.subj-cp{--subj:#1F6F4A;--subj-text:#1F6F4A;--subj-soft:#E1F1EA}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) :is(.subj-lal,.subj-ins,.subj-sci,.subj-math,.subj-art,.subj-phe,.subj-des,.subj-pp,.subj-cp){--subj-text:var(--subj-on);--subj-soft:var(--subj-soft-dark)}}
:root[data-theme="dark"] :is(.subj-lal,.subj-ins,.subj-sci,.subj-math,.subj-art,.subj-phe,.subj-des,.subj-pp,.subj-cp){--subj-text:var(--subj-on);--subj-soft:var(--subj-soft-dark)}
.subj-lal{--subj-on:#CFA3E8;--subj-soft-dark:#473C55}
.subj-ins{--subj-on:#E3B960;--subj-soft-dark:#4C4137}
.subj-sci{--subj-on:#A4D061;--subj-soft-dark:#3E4637}
.subj-math{--subj-on:#A2B8F2;--subj-soft-dark:#3D4157}
.subj-art{--subj-on:#F293C3;--subj-soft-dark:#4F394C}
.subj-phe{--subj-on:#F5A077;--subj-soft-dark:#503B3C}
.subj-des{--subj-on:#B8BFC9;--subj-soft-dark:#43444E}
.subj-pp{--subj-on:#EBA0A0;--subj-soft-dark:#4D3B45}
.subj-cp{--subj-on:#7CCFA6;--subj-soft-dark:#354646}
/* Картинки (content/figures): классы из draw.ts */
.fig{display:block;width:100%;height:auto}
.fig text{font-family:var(--font);font-size:15px;fill:var(--text)}
.fig .tb{font-weight:700}
.fig .tm{fill:var(--muted)}
.fig .ta{fill:var(--subj-text)}
.fig .tw{fill:#FFFFFF}
.fig .tok{fill:var(--ok)}
.fig .tbad{fill:var(--bad)}
.fig .sm{font-size:12px}
.fig .lg{font-size:18px}
.fig .s{fill:none;stroke:var(--text);stroke-width:2}
.fig .sg{fill:none;stroke:var(--line);stroke-width:1}
.fig .sa{fill:none;stroke:var(--subj-text);stroke-width:2.5}
.fig .sok{fill:none;stroke:var(--ok);stroke-width:2.5}
.fig .sbad{fill:none;stroke:var(--bad);stroke-width:2.5}
.fig .dash{stroke-dasharray:6 4}
.fig .sw{fill:none;stroke:var(--water);stroke-width:2.5}
.fig .fa{fill:var(--subj)}
.fig .fa2{fill:var(--subj-text)}
.fig .fs{fill:var(--subj-soft)}
.fig .fp{fill:var(--surface)}
.fig .fm{fill:var(--muted)}
.fig .fl{fill:var(--line)}
.fig .fok{fill:var(--ok)}
.fig .fbad{fill:var(--bad)}
.fig .fsok{fill:var(--ok-bg)}
.fig .fsbad{fill:var(--bad-bg)}
.fig .fy{fill:var(--sun)}
.fig .fw{fill:var(--water-bg)}

/* Octomark — стиль сайта. Только переменные design/tokens.css (обе темы по настройке устройства) и правила
   design/DESIGN.md: текст 17 px, колонка 620 px, поля 20 / 32 px, карточки surface с радиусом 20.
   Новых цветов нет; сборка склеивает этот файл с tokens.css в один assets/site.<хеш>.css. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-regular);overflow-wrap:break-word}
[lang="zh-Hans"]{font-family:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",var(--font)}

.wrap{max-width:calc(var(--sz-measure) + 2 * var(--sz-gutter-phone));margin-inline:auto;padding-inline:var(--sz-gutter-phone)}
@media (min-width:768px){.wrap{max-width:calc(var(--sz-measure) + 2 * var(--sz-gutter-tablet));padding-inline:var(--sz-gutter-tablet)}}

a{color:var(--accent-text);font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:var(--sz-focus) solid var(--accent-text);outline-offset:var(--sz-focus-offset);border-radius:4px}

.skip{position:absolute;inset-inline-start:var(--sp-x2);top:-100px;background:var(--surface);padding:var(--sp-x2) var(--sp-x4);border-radius:var(--r-small);z-index:10}
.skip:focus{top:var(--sp-x2)}

/* шапка: заглушка иконки (плитка accent с буквой O, DESIGN §6) и название */
.top{padding-block:var(--sp-x4)}
.brand{display:inline-flex;align-items:center;gap:var(--sp-x3);min-height:var(--sz-touch);color:var(--text);text-decoration:none;font-weight:var(--fw-heavy);font-size:var(--fs-subheading)}
.mark{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:22.5%;background:var(--accent);color:var(--on-accent);font-weight:var(--fw-heavy);font-size:22px;line-height:1}

main{padding-block:var(--sp-x2) var(--sp-x10)}
h1,h2,h3{hyphens:manual;overflow-wrap:normal}
h1{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:var(--fw-display);margin:0 0 var(--sp-x3)}
h2{font-size:var(--fs-heading);line-height:var(--lh-heading);font-weight:var(--fw-heading);margin:var(--sp-x6) 0 var(--sp-x2)}
h3{font-size:var(--fs-subheading);line-height:var(--lh-subheading);font-weight:var(--fw-subheading);margin:var(--sp-x5) 0 var(--sp-x2)}
p,ul,ol,blockquote,pre{margin:0 0 var(--sp-x3)}
ul,ol{padding-inline-start:1.4em}
li+li{margin-top:var(--sp-x2)}
strong{font-weight:var(--fw-bold)}
code{font-family:inherit;font-weight:var(--fw-semibold)}

.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--muted)}
.meta{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--muted)}
.hero{padding-block:var(--sp-x4) var(--sp-x2)}
.soon{display:inline-block;margin-top:var(--sp-x1);padding:var(--sp-x1) var(--sp-x3);border-radius:var(--r-chip);background:var(--accent-soft);color:var(--accent-text);font-weight:var(--fw-bold);font-size:var(--fs-small)}

.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);padding:var(--sp-x5);margin-block:var(--sp-x3)}
.card>h2:first-child{margin-top:0}
.card>:last-child{margin-bottom:0}

/* плашки предметов: капсула subjectSoft; текст — основной в светлой теме и цвет предмета в тёмной */
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-x2)}
.chips li+li{margin-top:0}
.chip{background:var(--subj-soft);color:var(--text);border-radius:var(--r-chip);padding:var(--sp-x1) var(--sp-x3);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-semibold)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip{color:var(--subj-text)}}

/* список с галочками («Why this is 7–8» в статье): галочка нарисована рамкой, цвет ok */
.ticks{list-style:none;padding:0}
.ticks li{position:relative;padding-inline-start:var(--sp-x8)}
.ticks li::before{content:"";position:absolute;inset-inline-start:6px;top:.35em;width:7px;height:13px;border:solid var(--ok);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--sz-button);padding:0 var(--sp-x6);border-radius:var(--r-button);background:var(--accent);color:var(--on-accent);font-size:var(--fs-button);font-weight:var(--fw-button);text-decoration:none}
.btn:active{background:var(--accent-pressed)}

/* юридические страницы */
.doc h2{scroll-margin-top:var(--sp-x4)}
.doc blockquote{margin-inline:0;padding:var(--sp-x3) var(--sp-x4);background:var(--work);border-radius:var(--r-small)}
.ph{background:var(--accent-soft);border-radius:6px;padding:0 4px;font-weight:var(--fw-semibold)}
.toc{padding-block:0}
.toc summary{display:flex;align-items:center;min-height:var(--sz-touch);padding-block:var(--sp-x1);cursor:pointer;font-size:var(--fs-subheading);font-weight:var(--fw-subheading);list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";margin-inline-start:auto;width:9px;height:9px;border:solid var(--accent-text);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px)}
.toc details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.toc ul{list-style:none;padding:0 0 var(--sp-x3);margin:0}
.toc li+li{margin-top:0}
.toc a{display:flex;align-items:center;min-height:var(--sz-touch)}
.licence{white-space:pre-wrap;font-family:inherit;font-size:var(--fs-small);line-height:var(--lh-small);background:var(--work);border-radius:var(--r-small);padding:var(--sp-x4);overflow-wrap:anywhere}

/* подвал: ссылки на юридические страницы, поддержка, Книга жалоб, оговорка IB целиком (ib-disclaimer.md §1) */
.foot{border-top:var(--sz-border) solid var(--line);padding-block:var(--sp-x6) var(--sp-x10);font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}
.foot nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--sp-x5)}
.foot nav li+li{margin-top:0}
.foot nav a{display:inline-flex;align-items:center;min-height:var(--sz-touch)}
.foot .disclaimer{background:var(--surface);border-radius:var(--r-small);padding:var(--sp-x4);margin-block:var(--sp-x4)}
.foot .disclaimer p:last-child{margin-bottom:0}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}