:root { color-scheme:light dark; --bg:#f6f8fb; --panel:#fff; --ink:#24344b; --muted:#53667d; --line:#d9e2ed; --accent:#155c97; font:17px/1.85 system-ui,sans-serif; background:var(--bg); color:var(--ink); }
* { box-sizing:border-box; } body { margin:0; } header,main,footer { width:min(1080px,calc(100% - 40px)); margin:auto; } header { display:flex; justify-content:space-between; gap:20px; padding:24px 0; border-bottom:1px solid var(--line); } a { color:var(--accent); text-underline-offset:.18em; } a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; } main { padding:48px 0; } h1 { font-size:clamp(2rem,5vw,3.8rem); line-height:1.28; margin:.4em 0; letter-spacing:-.035em; } .lead { font-size:1.2rem; max-width:58em; } .eyebrow { color:var(--accent); font-weight:700; } h2 { font-size:1.65rem; line-height:1.5; } h3 { font-size:1.2rem; margin-top:2em; } section { margin-top:70px; scroll-margin-top:20px; } nav,aside { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 28px; margin:28px 0; } nav ol { columns:2; margin:0; } nav li { break-inside:avoid; margin:6px 0; } .table-scroll { overflow-x:auto; margin:24px 0; border:1px solid var(--line); border-radius:12px; } table { border-collapse:collapse; width:100%; background:var(--panel); min-width:650px; font-size:.92rem; } caption { text-align:left; padding:14px; font-weight:700; } th,td { border-bottom:1px solid var(--line); padding:14px; text-align:left; vertical-align:top; } thead { background:#e8f0f9; } tbody th { width:18%; } tr:last-child td,tr:last-child th { border-bottom:0; } .badge { display:inline-block; font-size:.75rem; font-weight:650; color:#125d52; background:#e2f3ee; border-radius:5px; padding:1px 6px; white-space:nowrap; } .optional { color:#775013; background:#fcf0d5; } figure { margin:30px 0; } figure img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:12px; } figcaption { font-size:.9rem; color:var(--muted); margin:10px 4px; } .flow { display:flex; align-items:center; gap:12px; padding:24px 18px; border:1px solid var(--line); border-radius:14px; margin:28px 0; background:var(--panel); } .flow div { flex:1; text-align:center; border:1px solid #afc9dd; background:#edf5fa; border-radius:10px; padding:16px 10px; line-height:1.5; font-weight:650; } .flow small { font-size:.78rem; font-weight:400; } .flow>span { color:var(--accent); font-size:1.3rem; } code { overflow-wrap:anywhere; background:var(--panel); border:1px solid var(--line); padding:1px 4px; border-radius:4px; } li { margin:.5em 0; } footer { border-top:1px solid var(--line); padding:24px 0 40px; font-size:.9rem; color:var(--muted); }
@media(max-width:700px) { :root { font-size:16px; } header,main,footer { width:calc(100% - 28px); } main { padding-top:26px; } nav ol { columns:1; padding-left:20px; } nav,aside { padding:18px; } .flow { flex-direction:column; gap:6px; } .flow div { width:100%; } .flow>span:not(.divider) { transform:rotate(90deg); } section { margin-top:46px; } }
@media(prefers-color-scheme:dark) { :root { --bg:#101c2b; --panel:#192a3f; --ink:#e9f1fb; --muted:#bdcada; --line:#3b5069; --accent:#a8d6ff; } thead { background:#263b54; } .flow div { background:#223c51; border-color:#507594; } .badge { color:#b6e6d7; background:#204b43; } .optional { color:#ffe1a0; background:#534326; } }

.chapter-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2rem; }
.chapter-nav h2 { margin:0; font-size:1rem; }
.chapter-nav ol { columns:1; padding-inline-start:1.65em; }
.chapter-group { margin-top:4rem; }
.chapter-group-label { padding-bottom:.5rem; border-bottom:1px solid var(--line); color:var(--accent); font-weight:700; }
.chapter-group section:first-of-type { margin-top:1.5rem; }
.planned { color:#414d85; background:#e9edff; }
.table-scroll:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media(max-width:700px) {
    .chapter-nav { grid-template-columns:1fr; }
    table { min-width:0; table-layout:fixed; font-size:.86rem; }
    th,td { padding:9px; overflow-wrap:anywhere; }
    thead th:first-child { width:28%; }
}
@media(prefers-color-scheme:dark) { .planned { color:#dbe2ff; background:#363f69; } }

.guide-detail { max-width:760px; }
.guide-detail img { width:auto; max-width:100%; }
.guide-flow .flow { margin:0; }
.schematic-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.schematic-panel { padding:12px 16px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.schematic-panel strong { display:block; margin-bottom:8px; }
.schematic-cells { display:flex; flex-wrap:wrap; gap:8px; }
.schematic-cells span { padding:4px 9px; background:var(--bg); border:1px solid var(--line); border-radius:6px; }
@media(max-width:700px) { .schematic-panels { grid-template-columns:1fr; } }
.guide-note { color:var(--muted); font-size:.9rem; }

/* Hierarchical guide: breadcrumbs, topic navigation, topic cards and pager. */
.breadcrumb { font-size:.9rem; color:var(--muted); margin:0 0 .5rem; }
.breadcrumb a { color:var(--accent); }
.topic-nav { margin:24px 0; padding:14px 18px; }
.topic-nav ul { display:flex; flex-wrap:wrap; gap:6px 8px; list-style:none; margin:0; padding:0; columns:auto; }
.topic-nav li { margin:0; }
.topic-nav a { display:inline-block; padding:3px 10px; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-size:.88rem; line-height:1.6; }
.topic-nav a[aria-current="page"] { background:var(--accent); border-color:var(--accent); color:var(--panel); font-weight:650; }
.page-toc ol { columns:2; }
.topic-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin:28px 0; }
.topic-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 22px; }
.topic-card h3 { margin:0 0 .3em; font-size:1.15rem; }
.topic-card p { margin:.2em 0 .6em; color:var(--muted); font-size:.92rem; }
.topic-card ol { margin:0; padding-inline-start:1.4em; font-size:.92rem; }
.topic-card li { margin:.15em 0; }
.pager { display:flex; justify-content:space-between; gap:16px; margin-top:64px; padding-top:20px; border-top:1px solid var(--line); }
.pager a { display:block; max-width:48%; text-decoration:none; }
.pager small { display:block; color:var(--muted); }
.pager .next { margin-left:auto; text-align:right; }
@media(max-width:700px) {
    .page-toc ol { columns:1; }
    .topic-cards { grid-template-columns:1fr; }
    .pager { flex-direction:column; }
    .pager a { max-width:none; }
}
@media(prefers-color-scheme:dark) { .topic-nav a[aria-current="page"] { color:#101c2b; } }
.page-toc ol { list-style:none; padding-inline-start:0; }
.topic-cards .topic-card { margin-top:0; scroll-margin-top:20px; }
pre { overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:24px 0; } pre code { border:0; padding:0; background:none; overflow-wrap:normal; }