:root { color-scheme:light; --ink:#18374b; --teal:#157c80; --terra:#b65432; --paper:#f7f5f0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:6rem; }
body { margin:0; color:var(--ink); background:var(--paper); font:17px/1.75 system-ui,sans-serif; }
a { color:var(--teal); text-underline-offset:4px; }
:focus-visible { outline:3px solid var(--terra); outline-offset:4px; }
.skip { position:absolute; top:-100px; left:1rem; background:white; z-index:3; padding:1rem; }
.skip:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:2; padding:1rem 3vw; display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#f7f5f0f5; border-bottom:1px solid #d8e2e1; }
.site-header nav { display:flex; gap:1.3rem; font-size:.85rem; }
.brand { font-weight:800; color:var(--ink); text-decoration:none; letter-spacing:-.04em; }
.reading-layout { display:grid; grid-template-columns:220px minmax(0,1060px); gap:3rem; max-width:1430px; margin:auto; padding:2.5rem 2rem; }
.toc { position:sticky; top:6rem; max-height:80vh; overflow:auto; font-size:.82rem; line-height:1.5; }
.toc summary { cursor:pointer; font-weight:750; margin-bottom:1rem; }
.toc ul { list-style:none; padding-left:.7rem; }
.toc>details>nav>ul { padding-left:0; }
.toc li { margin:.55rem 0; }
.toc a { text-decoration:none; }
main { min-width:0; padding-bottom:3rem; }
h1,h2,h3 { line-height:1.2; letter-spacing:-.025em; }
h1 { font-size:clamp(2.2rem,4vw,3.7rem); margin:0 0 2rem; max-width:25ch; }
h2 { font-size:1.9rem; border-top:1px solid #c7d9d7; padding-top:1.8rem; margin-top:3rem; }
h3 { font-size:1.3rem; margin-top:2rem; }
p,li { max-width:85ch; }
li { margin:.5rem 0; }
img { max-width:100%; height:auto; border-radius:8px; }
figure { margin:1.5rem 0; }
figcaption { font-size:.9rem; }
table { display:block; overflow-x:auto; border-collapse:collapse; max-width:100%; font-size:.88rem; background:white; border:1px solid #d8e2e1; border-radius:8px; }
thead { background:#e4efed; }
th,td { padding:.65rem .8rem; border-bottom:1px solid #d8e2e1; text-align:left; min-width:90px; }
code { font-size:.85em; overflow-wrap:anywhere; background:#e7edeb; padding:.15em .3em; border-radius:3px; }
pre { overflow:auto; background:#e7edeb; padding:1.2rem; border-radius:8px; line-height:1.6; }
pre code { padding:0; overflow-wrap:normal; }
blockquote { margin:1.5rem 0; border-left:4px solid var(--teal); padding:.5rem 1.5rem; background:#edf3f0; }
math[display=block] { overflow-x:auto; padding:1rem; font-size:1.15rem; background:white; border-radius:6px; }
.interactive { margin:2rem 0; padding:1rem; border:2px solid var(--teal); border-radius:12px; background:white; }
.interactive h3 { margin-top:.5rem; }
.interactive p { font-size:.9rem; }
.explorer-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.explorer-actions a,button { font:inherit; font-size:.85rem; }
button { cursor:pointer; padding:.6rem 1rem; background:var(--teal); color:white; border:0; border-radius:6px; }
iframe { display:block; width:100%; height:1250px; border:1px solid #d8e2e1; border-radius:7px; background:var(--paper); }
iframe:fullscreen { width:100vw; height:100vh; border:0; }
@media(max-width:1000px) { .reading-layout { grid-template-columns:1fr; gap:1.5rem; padding:1.5rem; } .toc { position:static; max-height:300px; border:1px solid #d8e2e1; padding:1rem; border-radius:8px; } }
@media(max-width:600px) { body { font-size:16px; } .site-header { position:static; flex-direction:column; align-items:flex-start; } .reading-layout { padding:1rem; } .interactive { padding:.5rem; } iframe { height:1000px; } h2 { font-size:1.5rem; } .site-header nav { flex-wrap:wrap; } }
@media print { .site-header,.toc,.interactive { display:none; } .reading-layout { display:block; padding:0; } body { background:white; font-size:11pt; } h2 { break-before:page; } img { max-height:85vh; object-fit:contain; } }