:root{
  --bg:#f7f5f0;--card:#ffffff;--ink:#1f2328;--muted:#5d6670;--line:#e3ddd2;
  --accent:#b8611d;--accent-soft:#f6e6d6;--warn:#a3322a;--warn-soft:#fbe7e4;
  --ok:#2f6b3d;--ok-soft:#e3f1e5;--info-soft:#e8eef7;--info:#2c4f86;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16181b;--card:#1f2226;--ink:#e8e6e3;--muted:#9aa3ad;--line:#33373d;
    --accent:#e39a5c;--accent-soft:#3a2a1d;--warn:#f08a80;--warn-soft:#3a2120;
    --ok:#7fc48f;--ok-soft:#1d3122;--info-soft:#1d2738;--info:#93b4ea;
  }
}
:root[data-theme="dark"]{
  --bg:#16181b;--card:#1f2226;--ink:#e8e6e3;--muted:#9aa3ad;--line:#33373d;
  --accent:#e39a5c;--accent-soft:#3a2a1d;--warn:#f08a80;--warn-soft:#3a2120;
  --ok:#7fc48f;--ok-soft:#1d3122;--info-soft:#1d2738;--info:#93b4ea;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
header.top{background:var(--card);border-bottom:1px solid var(--line);padding:20px 16px}
header.top .wrap{max-width:860px;margin:0 auto}
header.top h1{margin:0;font-size:1.5rem;line-height:1.25}
header.top p{margin:4px 0 0;color:var(--muted);font-size:.92rem}
nav.toc{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;padding:8px 16px}
nav.toc a{display:inline-block;margin-right:6px;padding:6px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);text-decoration:none;font-weight:600;font-size:.88rem}
main{max-width:860px;margin:0 auto;padding:8px 16px 48px}
section.topic{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 18px;margin:20px 0;scroll-margin-top:60px}
section.topic>h2{margin:0 0 2px;font-size:1.35rem;color:var(--accent)}
.pages{color:var(--muted);font-size:.85rem;margin:0 0 14px}
h3{font-size:1.08rem;margin:22px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--line)}
h4{font-size:.98rem;margin:16px 0 6px}
p{margin:8px 0}
ul{margin:6px 0;padding-left:22px}
li{margin:3px 0}
.box{border-radius:10px;padding:12px 14px;margin:12px 0}
.box.key{background:var(--accent-soft)}
.box.warn{background:var(--warn-soft)}
.box.warn strong:first-child{color:var(--warn)}
.box.ok{background:var(--ok-soft)}
.box.info{background:var(--info-soft)}
.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}
.tbl{width:100%;border-collapse:collapse;margin:10px 0;font-size:.93rem}
.tbl th,.tbl td{border:1px solid var(--line);padding:8px 10px;vertical-align:top;text-align:left}
.tbl th{background:var(--accent-soft);width:28%}
.tbl caption{caption-side:top;text-align:left;font-weight:700;padding:4px 0 6px}
.small{font-size:.85rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chips span{background:var(--info-soft);color:var(--info);border-radius:6px;padding:3px 9px;font-size:.88rem}
.num{font-weight:700;color:var(--accent)}
/* Algorithm */
.algo{border:1px solid var(--line);border-radius:12px;padding:14px;margin:12px 0}
.algo .start{text-align:center;font-weight:700;background:var(--accent-soft);border-radius:8px;padding:8px}
.algo .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.algo .col h5{margin:0 0 8px;font-size:.92rem;text-align:center;color:var(--muted)}
.step{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:.9rem}
.arrow{text-align:center;color:var(--muted);font-size:.82rem;padding:4px 0}
.arrow::before{content:"↓ ";font-weight:700}
@media (max-width:620px){.algo .cols{grid-template-columns:1fr}.tbl th{width:34%}}
footer{text-align:center;color:var(--muted);font-size:.82rem;padding:0 16px 32px}
nav.toc a.active{background:var(--accent);color:#fff}
.home-intro{margin:20px 0 8px;color:var(--muted)}
.tiles{display:grid;gap:14px;margin:12px 0 24px}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:14px;padding:18px;text-decoration:none;color:var(--ink)}
.tile:hover,.tile:focus-visible{border-color:var(--accent)}
.tile b{display:block;font-size:1.15rem;color:var(--accent)}
.tile span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}
.pager{display:flex;justify-content:space-between;gap:10px;margin:8px 0 24px;flex-wrap:wrap}
.pager a{flex:1;min-width:140px;text-align:center;padding:12px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:700;text-decoration:none}