:root { color-scheme: light; --ink:#18212d; --muted:#5f6c7b; --paper:#fffdf8; --surface:#fff; --line:#dce2e8; --accent:#176b87; --accent-soft:#e9f6fa; --callout:#fff5da; --shadow:0 5px 22px rgba(22,40,58,.08); font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
[data-theme="dark"] { color-scheme:dark; --ink:#edf2f5; --muted:#b9c5cc; --paper:#161b20; --surface:#222a31; --line:#44515a; --accent:#77d8f7; --accent-soft:#153845; --callout:#3b321d; --shadow:0 5px 22px rgba(0,0,0,.35); }
* { box-sizing:border-box; }
html { background:var(--paper); overflow-x:hidden; }
body { margin:0; min-width:0; color:var(--ink); font-size:clamp(1rem, 1rem + .12vw, 1.125rem); line-height:1.75; overflow-x:hidden; }
button, summary, a { -webkit-tap-highlight-color:transparent; }
button, summary { font:inherit; }
a { color:var(--accent); }
.skip-link { position:absolute; transform:translateY(-150%); background:var(--ink); color:#fff; padding:.5rem 1rem; z-index:4; }
.skip-link:focus { transform:translateY(0); }
.site-header { display:flex; gap:1rem; align-items:baseline; justify-content:space-between; padding:1rem max(1rem, calc((100% - 70rem)/2)); border-bottom:1px solid var(--line); background:var(--paper); }
.theme-picker { display:flex; gap:.35rem; align-items:center; color:var(--muted); font-size:.85em; white-space:nowrap; }
.theme-picker select { min-height:36px; border:1px solid var(--line); border-radius:.45rem; background:var(--surface); color:var(--ink); }
.brand { font-weight:800; text-decoration:none; color:var(--ink); white-space:nowrap; }
#site-status { margin:0; color:var(--muted); font-size:.85em; text-align:right; }
main { width:min(calc(100% - 2rem), 70rem); margin:1.25rem auto 4rem; }
.loading, .notice { padding:1.5rem; background:var(--surface); border:1px solid var(--line); border-radius:1rem; box-shadow:var(--shadow); }
.notice h1 { margin-top:0; }
.notice button { margin-top:.5rem; }
.notebook-cards { display:grid; gap:1rem; margin-top:1rem; }
.notebook-card { padding:1rem; border:1px solid var(--line); border-radius:.8rem; background:var(--surface); }
.notebook-card h2 { margin-top:0; }
.chapter-layout { display:grid; gap:1.25rem; }
.chapter-layout > * { min-width:0; }
.chapter-nav, .toc, .glossary, .section, .chapter-hero { background:var(--surface); border:1px solid var(--line); border-radius:1rem; box-shadow:var(--shadow); }
.chapter-hero, .section, .glossary { min-width:0; max-width:100%; padding:clamp(1rem, 3vw, 2rem); }
.eyebrow { margin:0; color:var(--accent); font-weight:700; font-size:.9em; }
h1,h2,h3 { line-height:1.25; overflow-wrap:anywhere; }
h1 { margin:.25rem 0 .65rem; font-size:clamp(1.7rem, 6vw, 2.7rem); }
h2 { margin:0 0 .75rem; font-size:clamp(1.25rem, 4vw, 1.65rem); }
p, li { overflow-wrap:anywhere; }
.chapter-meta, .caption, .source-note { color:var(--muted); font-size:.9em; }
.toc { padding:1rem 1.25rem; }
.toc h2 { font-size:1rem; margin:0 0 .5rem; }
.toc ol { margin:0; padding-left:1.25rem; }
.toc a { display:inline-block; padding:.2rem 0; }
.section + .section { margin-top:1.25rem; }
.section.story { border-left:5px solid #eaa65c; }
.section.project { border-left:5px solid #4b9c83; }
details.section { padding:0; overflow:hidden; }
details.section summary { cursor:pointer; font-weight:750; padding:1rem; list-style-position:inside; overflow-wrap:anywhere; }
details.section > .section-body { padding:0 clamp(1rem,3vw,2rem) clamp(1rem,3vw,2rem); }
.callout { margin:1rem 0; padding:1rem; border-radius:.75rem; background:var(--callout); border:1px solid #efd18a; }
pre { margin:1rem 0; padding:1rem; max-width:100%; overflow:auto; border-radius:.75rem; background:#15202b; color:#eef5fa; font-size:.85em; line-height:1.55; }
code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.code-caption { margin:0 0 -.5rem; color:var(--muted); font-size:.9em; }
figure { margin:1rem 0; }
figure img { display:block; max-width:100%; height:auto; border:1px solid var(--line); border-radius:.75rem; cursor:zoom-in; }
figcaption { color:var(--muted); font-size:.9em; }
.schematic { font-size:.85em; }
.glossary dl { margin:0; }
.glossary dt { font-weight:750; margin-top:.8rem; }
.glossary dd { margin:.15rem 0 0; }
.chapter-nav { display:flex; gap:.75rem; justify-content:space-between; padding:1rem; }
.chapter-nav a, button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:.45rem .8rem; border-radius:.65rem; border:1px solid var(--accent); background:var(--surface); color:var(--accent); text-decoration:none; cursor:pointer; }
.term-hint { display:inline; min-height:auto; padding:0 .15em; border:0; border-bottom:1px dashed currentColor; border-radius:0; background:transparent; color:var(--accent); font:inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.chapter-nav .disabled { visibility:hidden; }
dialog { width:min(96vw, 64rem); max-height:94vh; padding:1rem; border:0; border-radius:1rem; box-shadow:0 1rem 4rem rgba(0,0,0,.45); }
dialog { background:var(--surface); color:var(--ink); }
dialog::backdrop { background:rgba(0,0,0,.62); }
dialog img { display:block; max-width:100%; max-height:75vh; margin:auto; object-fit:contain; }
.dialog-close { float:right; font-size:1.4rem; }
#image-dialog-caption { margin:.5rem 0 0; }
@media (min-width: 860px) { .chapter-layout { grid-template-columns:minmax(0,1fr) 15rem; align-items:start; } .toc { position:sticky; top:1rem; grid-column:2; grid-row:1 / span 6; } }
@media (max-width: 380px) { main { width:min(calc(100% - 1rem), 70rem); } .site-header { padding:.75rem .5rem; gap:.5rem; } }
@media (max-width: 600px) { .chapter-nav { flex-direction:column; align-items:stretch; } .chapter-nav a { width:100%; } }
@media (max-width: 600px) { .site-header { flex-wrap:wrap; } .theme-picker { width:100%; justify-content:flex-end; } #term-dialog { position:fixed; inset:auto 0 0; width:100%; max-height:75vh; border-radius:1rem 1rem 0 0; } }