:root { --bg:#f2efe8; --fg:#1c1917; --muted:#6f6a62; --card:#f9f7f2; --line:#ddd8cc; --accent:#2563eb; --tip:#e6f2e9; --warn:#f6ecce; --note:#e4ebf5; color-scheme:light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#1c1917; --fg:#f5f5f4; --muted:#a8a29e; --card:#292524; --line:#44403c; --accent:#60a5fa; --tip:#064e3b; --warn:#451a03; --note:#172554; color-scheme:dark; }
}
:root[data-theme="dark"] { --bg:#1c1917; --fg:#f5f5f4; --muted:#a8a29e; --card:#292524; --line:#44403c; --accent:#60a5fa; --tip:#064e3b; --warn:#451a03; --note:#172554; color-scheme:dark; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.7 system-ui,sans-serif; background:var(--bg); color:var(--fg); }
main { max-width:860px; margin:0 auto; padding:28px 20px 72px; }
a { color:var(--accent); }
h1 { font-size:30px; line-height:1.25; margin:8px 0 6px; } h2 { font-size:22px; line-height:1.3; margin:44px 0 12px; border-bottom:1px solid var(--line); padding-bottom:6px; } h3 { font-size:17px; margin:28px 0 6px; }
.sub { color:var(--muted); margin:0 0 16px; }
.crumbs { font-size:13px; color:var(--muted); } .crumbs a { color:var(--muted); }
ol.steps, main ul, main ol { padding-left:24px; } ol.steps li { margin:10px 0; } main li { margin:8px 0; } main li > ul, main li > ol { margin:6px 0 2px; } main p { margin:14px 0; }
.tip,.warn,.note { padding:10px 14px; border-radius:8px; margin:12px 0; border:1px solid var(--line); }
.tip { background:var(--tip); } .warn { background:var(--warn); } .note { background:var(--note); }
table { border-collapse:collapse; width:100%; margin:16px 0; font-size:14.5px; line-height:1.55; }
th,td { border:1px solid var(--line); padding:6px 10px; text-align:left; vertical-align:top; } th { background:var(--card); }
code,kbd { background:var(--card); border:1px solid var(--line); border-radius:4px; padding:0 5px; font-size:13px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.card { display:block; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--card); text-decoration:none; color:var(--fg); }
.card b { display:block; } .card span { color:var(--muted); font-size:13px; }
@media print { body { background:#fff; color:#000; font-size:12px; } main { max-width:none; padding:0; } a { color:#000; text-decoration:none; } h2 { break-after:avoid; } .tip,.warn,.note,table,ol.steps li { break-inside:avoid; } .noprint { display:none; } }
figure.shot { margin:16px 0; break-inside:avoid; }
figure.shot img { width:100%; height:auto; border:1px solid var(--line); border-radius:8px; display:block; }
figure.shot figcaption { font-size:13px; color:var(--muted); margin-top:4px; }
.nav { font-weight:600; white-space:nowrap; }
.search { position:relative; margin:0 0 16px; }
.search input { width:100%; padding:10px 14px; font:inherit; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:10px; }
.search input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.search .results { position:absolute; z-index:10; left:0; right:0; top:calc(100% + 4px); max-height:70vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.15); }
.search .results[hidden] { display:none; }
.search .hit { display:block; padding:10px 14px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--fg); }
.search .hit:last-child { border-bottom:0; }
.search .hit:hover, .search .hit:focus { background:var(--bg); }
.search .hit b { display:block; } .search .hit small { color:var(--muted); display:block; }
.search .hit span { display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.search mark { background:#fde68a; color:#1c1917; border-radius:2px; padding:0 1px; }
.search .none { padding:12px 14px; color:var(--muted); }
.theme-toggle { position:fixed; top:12px; right:12px; z-index:20; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--fg); font-size:18px; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.theme-toggle:hover { border-color:var(--accent); }
@media print { .theme-toggle { display:none; } }
.yt-footer { margin-top:40px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }

/* readable measure: prose is capped near 72 characters; tables and figures use the full column */
main p, main li, main summary, .note, .warn, .tip, .glance { max-width:72ch; }
td p, td li, th p { max-width:none; }
.tip,.warn,.note { padding:12px 16px; margin:18px 0; }
.glance { margin:18px 0 8px; padding:12px 16px; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; background:var(--card); }
.glance ul { margin:6px 0 0; padding-left:20px; } .glance li { margin:4px 0; }
details.more { margin:14px 0; border:1px solid var(--line); border-radius:8px; background:var(--card); max-width:72ch; }
details.more summary { cursor:pointer; padding:10px 14px; font-weight:600; color:var(--accent); }
details.more > :not(summary) { margin-left:14px; margin-right:14px; }
details.more[open] { padding-bottom:6px; }
/* "On this page" outline: only when there is room beside the column */
.toc { display:none; }
@media (min-width:1380px) {
  .toc { display:block; position:fixed; top:84px; left:calc(50% + 450px); width:210px; max-height:calc(100vh - 120px); overflow:auto; font-size:13px; line-height:1.4; border-left:1px solid var(--line); padding:2px 0 2px 14px; }
  .toc b { display:block; margin-bottom:6px; color:var(--muted); font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
  .toc a { display:block; padding:4px 0; color:var(--muted); text-decoration:none; }
  .toc a:hover, .toc a.on { color:var(--accent); }
  .toc a.on { font-weight:600; }
}
@media print { .toc { display:none !important; } details.more { border:0; } details.more > summary { display:none; } }