/* Shared notebook visual language; all selectors are isolated to notebook pages. */
html:has(body[data-notebook]){--bg:#f3f1f8;--surface:#fff;--paper:#fff;--card:#fff;--surface-soft:#f8f6fb;--bg-soft:#f8f6fb;--surface-2:#eee9f5;--ink:#343044;--text:#343044;--muted:#70667f;--text-dim:#70667f;--text-faint:#70667f;--accent:#8060af;--primary:#8060af;--accent-dark:#6d4e9b;--deep:#433455;--accent-soft:#eee7f7;--tint:#eee7f7;--border:#e3dcea;--line:#e3dcea;--accent-2:#af86b6;--accent-3:#9782bb;--border-strong:#baa9ce;--shadow:0 8px 28px #45405e08}
html.dark:has(body[data-notebook]),html[data-theme=dark]:has(body[data-notebook]){--bg:#201d2a;--surface:#2b2737;--paper:#2b2737;--card:#2b2737;--surface-soft:#322d40;--bg-soft:#322d40;--surface-2:#3b334b;--ink:#eeeaf5;--text:#eeeaf5;--muted:#b9afc9;--text-dim:#b9afc9;--text-faint:#b9afc9;--accent:#bca3e5;--primary:#bca3e5;--accent-dark:#d0b8ed;--deep:#e3d5f4;--accent-soft:#3b304f;--tint:#3b304f;--border:#484052;--line:#484052;--border-strong:#8b789f;--shadow:none;color-scheme:dark}
body[data-notebook]{font-family:"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;font-size:16px;line-height:1.85;background:var(--bg);color:var(--text);scrollbar-color:var(--border-strong) var(--bg)}
body[data-notebook] :is(button,input,select,textarea){font-family:inherit}
body[data-notebook] :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
body[data-notebook] :is(.eyebrow,.nav-label,.nav-group,.side-footer,.side-bottom,.page-foot,.hero-meta,.hero-caption){font-size:12px}
body[data-notebook] :is(.small,.nav-item,.chapter-link,.chapter-nav a,.toc-link,.pill,.card p,.route-row p,.sidebar-intro,.lab-hint){font-size:14px}
body[data-notebook] :is(.hero p,.page-header p,.hero-copy>p,.lead){font-size:16px;line-height:1.9}
body[data-notebook] :is(.hero h1,.hero h2){font-size:clamp(27px,2.6vw,36px);line-height:1.5;letter-spacing:0}
body[data-notebook] :is(.main,main#main){max-width:1440px}
body[data-notebook] .hero{gap:28px;border:1px solid var(--border);border-radius:20px;background:var(--surface);padding:28px;box-shadow:var(--shadow);isolation:isolate}
body[data-notebook] .hero:after{display:none}
body[data-notebook] img.notebook-scene{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;border:1px solid var(--border)}
body[data-notebook=agent] .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.85fr);align-items:center;min-height:0}
body[data-notebook=agent] .hero-copy{max-width:none;grid-column:1;grid-row:1}
body[data-notebook=agent] .hero-art{position:static;grid-column:2;grid-row:1;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;opacity:1;filter:none}
body[data-notebook=agent] .hero :is(h2,p){max-width:none}
body[data-notebook=agent] .side-character img{width:100%;height:145px;object-fit:cover;object-position:65% 35%}
body[data-notebook=agent] .side-character :is(summary,p){font-size:12px}
body[data-notebook=agent] .project-cover img{object-fit:cover;object-position:center;opacity:.65}
body[data-notebook=agent] .avatar img{object-fit:cover;object-position:65% 30%}
body[data-notebook=voice] .sidebar{background:var(--surface)}
body[data-notebook=voice] .sidebar .brand{color:var(--text)}
body[data-notebook=voice] .sidebar :is(.sidebar-intro,.search-trigger,.chapter-link,.nav-group,.sidebar-bottom,.nav-number){color:var(--muted)}
body[data-notebook=voice] .sidebar .search-trigger{background:var(--surface-soft);border-color:var(--border)}
body[data-notebook=voice] .sidebar .chapter-link.active{background:var(--accent-soft);color:var(--accent-dark)}
body[data-notebook=voice] .sidebar .nav-sections a{color:var(--muted);border-color:var(--line)}
body[data-notebook=voice] .sidebar :is(.chapter-link:hover,.nav-sections a:hover,.nav-sections a.active){color:var(--accent-dark);background:var(--accent-soft)}
body[data-notebook=voice] :is(.hero h1 span,.quiet-link,.eyebrow,.sound-caption,.sound-note){color:var(--accent)}
body[data-notebook=voice] :is(.hero-copy>p,.hero-meta,.sound-top,.sound-bottom){color:var(--muted)}
body[data-notebook=voice] .primary-button{background:var(--accent);color:var(--bg)}
body[data-notebook=voice] .hero{grid-template-columns:minmax(0,1fr) minmax(230px,.9fr)}
body[data-notebook=voice] .sound-illustration{padding:0;background:var(--surface-soft);transform:none}
body[data-notebook=voice] .sound-illustration .notebook-scene{border:0;border-radius:0}
body[data-notebook=voice] .sound-illustration :is(.sound-top,.sound-bottom,.sound-caption){margin:12px 16px;font-size:12px}
body[data-notebook=voice] .sound-illustration svg{height:50px;margin:8px 0}
body[data-notebook=voice] .sound-caption{padding-top:12px}
body[data-notebook=voice] .chapter-sections :is(p,ul,ol){font-size:16px;line-height:1.95}
body[data-notebook=voice] :is(.code-view,.code-editor){font-size:13px;line-height:1.7}
body[data-notebook=voice] :is(.jumpbar select,.jumpbar button,.editor-toolbar button,.run-code,.primary-button,.quiet-link){font-size:14px}
body[data-notebook=frontend] .aurora{opacity:.12}
body[data-notebook=frontend] .grid-overlay{opacity:.1}
body[data-notebook=frontend] .hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(230px,.8fr);margin:32px 0;align-items:center}
body[data-notebook=frontend] .hero-copy{min-width:0}
body[data-notebook=frontend] .hero h1{margin-top:16px}
body[data-notebook=frontend] .hero .stats{grid-column:1/-1;margin:0}
body[data-notebook=frontend] .stat b [data-count]{font:inherit;color:inherit}
body[data-notebook=frontend] .hero .lead{max-width:none}
body[data-notebook=frontend] .grad{background:none;color:var(--accent);-webkit-text-fill-color:currentColor}
body[data-notebook=literature] .hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(230px,.9fr);align-items:center}
body[data-notebook=literature] .hero-art{display:block;position:relative;inset:auto;width:auto;height:auto;padding-bottom:26px;opacity:1;pointer-events:none}
body[data-notebook=literature] .hero-art img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;mix-blend-mode:normal;opacity:1}
body[data-notebook=literature] .hero-caption{bottom:0;right:4px}
body[data-notebook=literature] :is(.hero h1,.page-head h1){font-family:inherit;font-weight:650}
body[data-notebook=literature] :is(.nav a,.card p,.card .meta,.row-links,.route-row p){font-size:14px}
body[data-notebook=literature] .reading-paper{line-height:1.95}
body[data-notebook=frontend-reader]{--bg-color:var(--paper);--text-color:var(--text);padding:28px 24px 80px}
body[data-notebook=frontend-reader] #write{max-width:960px;background:var(--paper);border:1px solid var(--border);border-radius:18px;padding:38px;margin:28px auto;font-size:17px;line-height:1.95}
body[data-notebook=frontend-reader] #write :is(h1,h2,h3){color:var(--deep);line-height:1.6}
body[data-notebook=frontend-reader] #write h1{font-size:32px}
body[data-notebook=frontend-reader] #write h2{font-size:24px;border-color:var(--border)}
body[data-notebook=frontend-reader] #write h3{font-size:20px}
body[data-notebook=frontend-reader] #write :is(pre,code,.CodeMirror){font-size:13px}
body[data-notebook=frontend-reader] .reader-banner{max-width:960px;margin:auto;display:grid;grid-template-columns:1fr 260px;gap:25px;align-items:center;color:var(--text)}
body[data-notebook=frontend-reader] .reader-banner h1{font-size:30px;color:var(--deep)}
body[data-notebook=frontend-reader] .reader-banner a{color:var(--accent)}
@media(max-width:900px){body[data-notebook] .hero{padding:22px;gap:20px}body[data-notebook=agent] .hero,body[data-notebook=voice] .hero,body[data-notebook=frontend] .hero,body[data-notebook=literature] .hero{grid-template-columns:1fr}body[data-notebook=agent] .hero-art{grid-column:1;grid-row:2}body[data-notebook] .hero-art,body[data-notebook] img.notebook-scene{max-height:300px;object-fit:cover}body[data-notebook=literature] .hero-art img{max-height:300px}body[data-notebook=frontend] .hero .stats{grid-column:1}body[data-notebook=frontend-reader] .reader-banner{grid-template-columns:1fr}body[data-notebook=frontend-reader] .reader-banner img{max-height:230px}body[data-notebook=frontend-reader] #write{padding:22px}}
@media(max-width:600px){body[data-notebook] .hero{padding:18px}body[data-notebook] :is(.hero h1,.hero h2){font-size:27px}body[data-notebook=voice] .learning-strip{flex-wrap:wrap}body[data-notebook=voice] .learning-strip :is(b,small){font-size:12px}body[data-notebook=voice] .jumpbar select{font-size:12px}body[data-notebook=frontend-reader]{padding:18px 12px 75px}body[data-notebook=frontend-reader] #write{padding:18px;font-size:16px}body[data-notebook=frontend-reader] #write h1{font-size:27px}}
@media print{body[data-notebook] .hero-art,body[data-notebook] .notebook-scene,body[data-notebook] #study-plush{display:none}body[data-notebook=frontend-reader] #write{padding:0;border:0;max-width:none}}