/* Оформление по IBM Carbon (productive): токены тем Gray 10 / Gray 100 из @carbon/themes, шрифты IBM Plex (лежат в fonts/) */
@font-face{font-family:"IBM Plex Sans";font-weight:400;src:url(fonts/ibm-plex-sans-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+2200-22FF}
@font-face{font-family:"IBM Plex Sans";font-weight:400;src:url(fonts/ibm-plex-sans-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Sans";font-weight:600;src:url(fonts/ibm-plex-sans-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+2200-22FF}
@font-face{font-family:"IBM Plex Sans";font-weight:600;src:url(fonts/ibm-plex-sans-cyrillic-600.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-weight:400;src:url(fonts/ibm-plex-mono-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+2200-22FF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;src:url(fonts/ibm-plex-mono-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-weight:600;src:url(fonts/ibm-plex-mono-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+2200-22FF}
@font-face{font-family:"IBM Plex Mono";font-weight:600;src:url(fonts/ibm-plex-mono-cyrillic-600.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{ /* Gray 10 */
  --bg:#f4f4f4;--layer:#ffffff;--layer2:#f4f4f4;--hover:#e8e8e8;--selected:#e0e0e0;
  --line:#e0e0e0;--line-strong:#8d8d8d;--text:#161616;--text2:#525252;--help:#6f6f6f;
  --accent:#0f62fe;--link:#0f62fe;--focus:#0f62fe;--hi:#d0e2ff;--hi-text:#0043ce;
  --ok:#24a148;--err:#da1e28;--on-accent:#ffffff;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{ /* Gray 100 */
  --bg:#161616;--layer:#262626;--layer2:#393939;--hover:#333333;--selected:#393939;
  --line:#393939;--line-strong:#6f6f6f;--text:#f4f4f4;--text2:#c6c6c6;--help:#a8a8a8;
  --accent:#4589ff;--link:#78a9ff;--focus:#ffffff;--hi:#001d6c;--hi-text:#a6c8ff;
  --ok:#42be65;--err:#fa4d56;--on-accent:#161616;
}
*{box-sizing:border-box}
html{color-scheme:light}:root[data-theme="dark"]{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:400 14px/1.43 var(--sans);letter-spacing:.16px}
:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
[hidden]{display:none!important}
h2{margin:0 0 8px;font:600 20px/1.3 var(--sans)}
h3{margin:24px 0 8px;font:600 14px/1.3 var(--sans)}
p{margin:0 0 8px;max-width:72ch}
code,pre,td.m,td.b,.tag,#cnt{letter-spacing:0}
code{font:400 13px var(--mono)}
p code,li code,summary code{background:var(--layer2);padding:0 4px}
.note{color:var(--text2)}

/* шапка: как Carbon UI Shell — всегда тёмная */
header{display:flex;min-width:0;align-items:stretch;gap:24px;height:48px;background:#161616;color:#f4f4f4;border-bottom:1px solid #393939;padding-left:16px}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}.brand span{font-weight:400;color:#c6c6c6}
#labs{display:flex;flex:1;overflow-x:auto;scrollbar-width:none}#labs::-webkit-scrollbar{display:none}
#labs button{height:48px;padding:0 16px;border:0;border-bottom:3px solid transparent;background:none;color:#c6c6c6;font:inherit;cursor:pointer;white-space:nowrap}
#labs button:hover{background:#2c2c2c;color:#f4f4f4}
#labs button.on{color:#fff;border-bottom-color:#4589ff;font-weight:600}
#theme{padding:0 16px;border:0;border-left:1px solid #393939;background:none;color:#c6c6c6;font:inherit;cursor:pointer}#theme:hover{background:#2c2c2c}
header :focus-visible{outline-color:#fff}

/* вкладки заданий (Carbon tabs, line) */
#tasks{display:flex;overflow-x:auto;background:var(--layer);border-bottom:1px solid var(--line);padding:0 16px}
#tasks button{height:40px;padding:0 16px;border:0;border-bottom:2px solid transparent;background:none;color:var(--text2);font:inherit;cursor:pointer;white-space:nowrap}
#tasks button:hover{background:var(--hover);color:var(--text)}
#tasks button.on{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}

main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 32px;padding:24px 16px 48px;max-width:1584px;margin:0 auto}
@media (max-width:900px){main{grid-template-columns:minmax(0,1fr)}}

/* листинг */
pre{margin:0;font:400 14px/1.7 var(--mono);overflow:auto}
#code{background:var(--layer);border:1px solid var(--line);padding:8px 0}
#code div{display:flex;padding-right:16px;white-space:pre;min-height:24px;border-left:3px solid transparent}
#code .n{flex:none;width:36px;text-align:right;padding-right:12px;color:var(--help);user-select:none}
#code .a{flex:none;width:112px;color:var(--help);font-size:12px;user-select:none}
#code .cur{background:var(--hi);border-left-color:var(--accent)}
.pseudo{background:var(--layer2);padding:12px 16px;font-size:13px;line-height:1.6}
#algo{margin:0;padding-left:20px;max-width:72ch}#algo li{margin:0 0 8px}

/* управление шагом */
.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:1px}
.ctl button{height:40px;padding:0 16px;border:0;background:var(--accent);color:var(--on-accent);font:inherit;cursor:pointer}
.ctl button:hover:not(:disabled){filter:brightness(1.12)}
.ctl button.sec{background:var(--layer2);color:var(--text)}.ctl button.sec:hover:not(:disabled){background:var(--hover);filter:none}
.ctl button:disabled{background:var(--layer2);color:var(--help);cursor:not-allowed}
.ctl button:focus-visible{outline-offset:-4px}
#cnt{margin-left:auto;padding-left:16px;color:var(--text2)}

/* что произошло: Carbon inline notification */
.what{min-height:48px;margin:16px 0;padding:12px 16px;background:var(--layer);border-left:3px solid var(--accent);max-width:none}
.res{display:none;margin:0 0 16px;padding:12px 16px;background:var(--layer);border-left:3px solid var(--ok);max-width:none}.res.show{display:block}

/* состояние процессора */
.state{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:560px){.state{grid-template-columns:minmax(0,1fr)}}
table{border-collapse:collapse;width:100%;background:var(--layer)}
th,td{height:32px;padding:0 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:var(--layer2);font-weight:600;font-size:12px;color:var(--text2);height:32px}
td.m,td code{font:400 14px var(--mono)}td.b{font:400 12px var(--mono);color:var(--help)}
td.chg{background:var(--hi);color:var(--hi-text);font-weight:600;animation:flash .9s ease-out}
@keyframes flash{from{background:var(--accent);color:var(--on-accent)}}
@media (prefers-reduced-motion:reduce){td.chg{animation:none}}
.tags{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 0}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:12px;background:var(--layer2);color:var(--text2);font:400 13px var(--mono)}
.tag.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.tag.chg{outline:2px solid var(--hi-text);outline-offset:1px}
.flags{background:var(--layer);padding:0 16px 16px}.flags h3{margin:0;padding:8px 0;font-size:12px;color:var(--text2)}

/* вопросы / теория: Carbon accordion */
details{background:var(--layer);border-top:1px solid var(--line);max-width:none}
details:last-child{border-bottom:1px solid var(--line)}
summary{display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 16px;cursor:pointer;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .11s}
details[open]>summary::before{transform:rotate(45deg)}
summary:hover{background:var(--hover)}
details>:not(summary){margin-left:16px;margin-right:16px}details>:last-child{margin-bottom:16px}

/* страницы «Теория» и «Команды» */
.doc{max-width:1056px;margin:0 auto;padding:24px 16px 48px}
.doc table{margin:8px 0 16px}.doc td{height:auto;padding:8px 16px}
.doc tr.grp td{background:var(--layer2);font-weight:600;height:32px;padding:0 16px}
.doc ul{margin:0 0 8px;padding-left:20px;max-width:72ch}
#used{margin-top:0}#used td{height:auto;padding:8px 16px}
main>section{min-width:0;overflow-x:auto}

/* окно дампа памяти (ЛР5) */
td.cell{padding:0 4px;text-align:center}
#mem th[colspan]{text-align:left}
.ctl button{padding:0 14px}

/* статья «Теория» */
.doc h2{margin:40px 0 8px;font:600 28px/1.25 var(--sans)}.doc h2:first-child{margin-top:0}
.doc h3{margin:32px 0 8px;font:600 18px/1.35 var(--sans)}
.doc p,.doc ul,.doc ol{max-width:80ch;line-height:1.6}.doc p{margin:0 0 12px}
.doc li{margin:0 0 4px}
.doc .lead{font-size:16px;color:var(--text2)}
.doc pre.lst{background:var(--layer);border-left:3px solid var(--accent);padding:12px 16px;margin:0 0 16px;font-size:13px;line-height:1.6;max-width:100%}
.doc table{margin:8px 0 16px;display:block;overflow-x:auto}
.doc th[scope]{white-space:nowrap}
.doc td,.doc th{line-height:1.45}
.doc nav.toc{background:var(--layer);border-left:3px solid var(--accent);padding:16px 24px;margin:16px 0 24px;max-width:80ch}
.doc nav.toc ol{margin:8px 0 8px;padding-left:20px}.doc nav.toc li{margin:0 0 4px}
.doc nav.toc ol ol{margin:4px 0 8px}
.doc nav.toc a{color:var(--link)}
.doc h2[id],.doc h3[id]{scroll-margin-top:16px}
.doc td,.doc th{padding:6px 10px;height:auto}
.doc th{white-space:normal}