:root {color-scheme:dark;font-family:system-ui,sans-serif;color:#e2eaf4;background:#101722}
body {margin:0} a {color:#8cc8ff;text-underline-offset:3px} a:hover {color:#bdddff}
.site-nav {display:flex;gap:12px 24px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid #34445b;background:#172231;font-size:14px}
.skip {position:absolute;left:-9999px}.skip:focus {position:static}
.reading {max-width:1100px;margin:24px auto;padding:0 22px 50px;line-height:1.65;overflow-wrap:anywhere}
.reading h1 {font-size:28px;line-height:1.25}.reading h2 {margin-top:36px;border-bottom:1px solid #34445b;padding-bottom:8px;font-size:21px}.reading h3 {font-size:18px}
.reading li {margin:6px 0}.reading pre {overflow:auto;background:#172231;padding:16px;border-radius:5px;font-size:13px}.reading code {font-size:.9em}
.reading blockquote {margin:12px 0;padding:8px 16px;border-left:4px solid #779dc6;background:#172231}
.table-scroll {overflow:auto} table {width:100%;border-collapse:collapse;font-size:14px} th,td {text-align:left;vertical-align:top;padding:10px;border-bottom:1px solid #34445b} th {background:#1d2b3d}
.reading img,.reading svg {max-width:100%;height:auto} .reading :target {scroll-margin-top:20px;background:#393019}
.toc {background:#172231;padding:12px 18px;border:1px solid #34445b}.toc a {display:inline-block;margin:4px 14px 4px 0;font-size:14px}
.glossary-entry {border-bottom:1px solid #34445b;padding:14px 0;scroll-margin-top:16px}.glossary-entry h2 {margin:0;border:0;font-size:18px}.glossary-entry p {margin:8px 0}
.search {width:min(100%,650px);box-sizing:border-box;padding:10px;font:inherit;border:1px solid #647b96;border-radius:4px}
.learning-links {padding:10px 0;border-top:1px solid #34445b}.learning-links p {margin:4px 0}.learning-links ul {display:flex;flex-wrap:wrap;gap:8px 24px;padding:0;list-style:none}.learning-links li {font-size:14px;max-width:440px}
.badge {font-size:12px;color:#afbdd0}.private-note {padding:12px;background:#393019}
[hidden] {display:none!important} :focus-visible {outline:3px solid #93c5fd;outline-offset:3px}
@media(max-width:600px){.reading {padding:0 14px 30px}.site-nav {gap:10px 16px}.reading h1{font-size:24px}}
.reading table {min-width:640px;overflow-wrap:normal}

body.architecture {margin:16px}

body {background:#101722;color:#e2eaf4}
button,input,select {color:#e2eaf4;background:#172231;border:1px solid #647b96;border-radius:4px}
button {cursor:pointer} button:hover {background:#26374c} input::placeholder {color:#afbdd0}
::selection {background:#355578;color:#fff}
.reading .mermaid {background:#101722}
.architecture .diagram {background:#101722}
.architecture .inspector {background:#172231}