@font-face {
        font-family: 'Source Serif 4';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url('fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
}
@font-face {
        font-family: 'Source Serif 4';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url('fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
}
@font-face {
        font-family: 'Source Serif 4';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url('fonts/source-serif-4-latin-400-italic.woff2') format('woff2');
}
@font-face {
        font-family: 'JetBrains Mono';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
        font-family: 'JetBrains Mono';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}
:root {
        color-scheme: dark;
        --ground: #0f1115;
        --surface: #161a22;
        --raised: #1c2330;
        --line: #2b3342;
        --text: #e6ebf4;
        --secondary: #b3bdd0;
        --muted: #8a96ab;
        --accent: #8fb6ff;
        --hover: #c3d7ff;
        --padding: #d9b36c;
        --layout-field: #1c2b45;
        --padding-ground: #2a2418;
        --padding-hatch: #3a3120;
        --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
        --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'DejaVu Sans Mono', monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--text); font: 18px/1.6 var(--serif); }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--hover); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.shell { max-width: 1088px; margin: auto; padding: 0 24px; min-height: 100vh; display: flex; flex-direction: column; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--text); font-size: 22px; font-weight: 600; line-height: 1; }
.mark { display: grid; grid-template-columns: repeat(4, 6px); gap: 2px; }
.mark i { height: 14px; background: var(--accent); }
.mark i:last-child { background: var(--padding); opacity: .55; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font: 14px/1 var(--mono); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--secondary); text-decoration: none; border-bottom: 2px solid transparent; }
.nav a[aria-current] { color: var(--text); border-bottom-color: var(--accent); }
.nav a:hover { color: var(--text); }
main { flex: 1; min-width: 0; }
h1, h2, h3, p { margin: 0; }
h1 { font: 600 48px/1.15 var(--serif); text-wrap: balance; overflow-wrap: anywhere; }
.hero { padding: 72px 0 56px; display: flex; flex-direction: column; gap: 18px; }
.hero h1 { max-width: 760px; }
.eyebrow { color: var(--muted); font: 500 13px/1.4 var(--mono); letter-spacing: .08em; }
.hero .eyebrow { letter-spacing: .06em; }
.intro { max-width: 640px; color: var(--secondary); font-size: 20px; }
.columns { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; padding-bottom: 72px; }
.columns > *, aside, article { min-width: 0; }
aside { display: flex; flex-direction: column; gap: 40px; }
aside section { display: flex; flex-direction: column; gap: 12px; }
.post-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 20px; padding: 22px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--text); }
.post-card:last-child { border-bottom: 1px solid var(--line); }
.post-card .topic-code { grid-row: span 3; }
.post-card h2 { font: 600 24px/1.3 var(--serif); overflow-wrap: anywhere; }
.post-card p { color: var(--secondary); overflow-wrap: anywhere; }
.post-card:hover h2 { color: var(--hover); }
.topic-code { color: var(--accent); font: 500 15px/1.9 var(--mono); }
.meta, .breadcrumb { color: var(--muted); font: 13px/1.6 var(--mono); }
.soon { border-style: dashed !important; background: transparent; }
.progress { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 2px; }
.progress i { height: 4px; background: var(--line); }
.progress .filled { background: var(--accent); }
.project-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 44px; text-decoration: none; color: var(--text); }
footer { margin-top: auto; border-top: 1px solid var(--line); padding: 24px 0 36px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--muted); font: 13px/1.6 var(--mono); }
footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.listing { padding-top: 48px; padding-bottom: 72px; }
.listing h1 { margin: 16px 0; }
.topics-list { margin-top: 32px; }
.unwritten { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-top: 1px dashed var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-style: italic; }
.post-layout { display: grid; grid-template-columns: minmax(0, 276px) minmax(0, 700px); gap: 64px; padding: 48px 0 72px; }
.rail { display: flex; flex-direction: column; align-self: start; gap: 2px; font-size: 16px; line-height: 1.4; }
.rail .rail-topic { display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 10px 12px; text-decoration: none; color: var(--secondary); border: 1px solid transparent; border-radius: 8px; }
.rail .rail-topic[aria-current] { color: var(--text); background: var(--raised); border-color: var(--line); }
.post-layout article { display: flex; flex-direction: column; gap: 22px; }
.post-layout h1 { font-size: 44px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.chips { display: none; }
.prose { overflow-wrap: anywhere; }
.prose > * + * { margin-top: 22px; }
.prose > h1, .prose > h2, .prose > h3 { margin-top: 32px; }
.prose h2 { font: 600 26px/1.3 var(--serif); }
.prose h3 { font: 600 22px/1.3 var(--serif); }
code { font: .84em/1.6 var(--mono); color: var(--text); }
p code, li code { padding: 2px 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
pre { max-width: 100%; min-width: 0; overflow-x: auto; margin: 0; padding: 18px 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); tab-size: 4; overflow-wrap: normal; scrollbar-color: var(--line) var(--ground); scrollbar-width: thin; font: 15px/1.6 var(--mono); }
pre code { font: inherit; }
.kw { color: var(--accent); }
.cm { color: var(--muted); font-style: italic; }
.num { color: var(--padding); }
.str { color: var(--secondary); }
blockquote { margin-left: 0; margin-right: 0; border-left: 3px solid var(--line); padding-left: 20px; color: var(--secondary); }
ul, ol { padding-left: 26px; }
li + li { margin-top: 6px; }
.neighbors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); margin-top: 28px; }
.neighbor { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text); }
.neighbor.next { text-align: right; }
.support { color: var(--secondary); font-size: 16px; }
.about { max-width: 700px; }
.skip { position: absolute; top: -100px; left: 20px; background: var(--surface); padding: 8px 16px; z-index: 1; }
.skip:focus { top: 10px; }
@media (max-width: 800px) {
        .columns { grid-template-columns: minmax(0, 1fr); gap: 40px; }
        .post-layout { display: block; }
        .rail { display: none; }
        .chips { display: flex; flex-direction: column; gap: 8px; }
        .chips .topic-links { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-color: var(--line) var(--ground); scrollbar-width: thin; }
        .chips .rail-topic { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
        .chips .rail-topic[aria-current] { background: var(--raised); border-color: var(--accent); }
        .chips .topic-code { font-size: 13px; }
}
@media (max-width: 520px) {
        body { font-size: 17px; line-height: 1.65; }
        .shell { padding: 0 20px; }
        header { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 0 0; }
        .nav { justify-content: space-between; gap: 4px 12px; font-size: 13px; }
        .nav a { padding: 0; }
        .hero { padding: 38px 0 36px; gap: 16px; }
        h1 { font-size: 34px; line-height: 1.2; }
        .intro { font-size: 18px; }
        .post-card { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 12px; padding: 20px 0; }
        .post-card h2 { font-size: 22px; }
        .topic-code { font-size: 13px; }
        .columns { padding-bottom: 40px; }
        .meta, .breadcrumb { font-size: 12px; }
        .eyebrow { font-size: 12px; }
        .listing { padding-top: 28px; padding-bottom: 40px; }
        .post-layout { padding: 28px 0 40px; }
        .post-layout article { gap: 18px; }
        .post-layout h1 { font-size: 32px; line-height: 1.2; }
        .post-meta { gap: 4px 16px; }
        .prose > * + * { margin-top: 18px; }
        .prose h2 { font-size: 23px; }
        pre { padding: 14px 16px; font-size: 13px; }
        .neighbors { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; padding-top: 22px; }
        .neighbor { padding: 14px 16px; }
        .neighbor.next { text-align: left; }
        .support { font-size: 15px; }
        footer { flex-direction: column-reverse; font-size: 12px; padding-bottom: 32px; }
}
.layout { margin: 22px 0 0; padding: 22px; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 14px; }
.layout figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; font: 13px/1.4 var(--mono); }
.layout-meta { color: var(--muted); }
.layout-cells, .layout-offsets { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; }
.layout-cell { min-width: 0; height: 52px; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; border: 1px solid var(--accent); border-radius: 3px; background: var(--layout-field); color: var(--text); font: 12px/1 var(--mono); }
.layout-cell.pad { border-color: var(--padding); color: var(--padding); background: repeating-linear-gradient(135deg, var(--padding-ground) 0 6px, var(--padding-hatch) 6px 12px); }
.layout-offsets { margin-top: 6px; text-align: center; color: var(--muted); font: 10px/1.3 var(--mono); }
.layout-note { color: var(--secondary); font-size: 16px; line-height: 1.5; }
.layout details { color: var(--secondary); font: 12px/1.5 var(--mono); }
.layout summary { cursor: pointer; padding: 6px 0; }
.layout-fields { table-layout: fixed; border-collapse: collapse; width: 100%; font: 12px/1.5 var(--mono); text-align: left; }
.layout-fields th, .layout-fields td { padding: 8px 4px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; font-weight: 400; }
.layout-fields thead, .layout-tail { color: var(--muted); }
.layout-fields th:first-child { width: 40%; }
.cache-line { border-top: 2px solid var(--padding); padding-top: 8px; }
.cache-label { display: block; margin-bottom: 8px; color: var(--padding); font: 11px/1.4 var(--mono); }
@media (max-width: 520px) {
        .layout { padding: 16px 14px; gap: 10px; }
        .layout figcaption { font-size: 12px; }
        .layout-cell { height: 40px; font-size: 12px; }
        .layout-offsets { font-size: 9px; letter-spacing: -.08em; }
        .layout-note { font-size: 15px; }
        .layout-fields { font-size: 10px; }
}

.contents { width: 100%; }
.contents h1 { margin-top: 0; }
.contents > div > .intro { margin-top: 16px; }
.contents-count { margin-top: 16px; }
.contents-section { margin-top: 48px; }
.contents-section > h2 { scroll-margin-top: 24px; font: 600 28px/1.3 var(--serif); overflow-wrap: anywhere; }
.contents-section .topics-list { margin-top: 24px; }
.contents-topic { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 20px; padding: 16px 0; }
.contents-topic .topic-code { grid-row: 1; }
.contents-topic .meta { grid-column: 3; grid-row: 1; }
.contents-topic h3 { grid-column: 2; grid-row: 1; font: 600 20px/1.3 var(--serif); overflow-wrap: anywhere; }
.contents-topic:hover h3 { color: var(--hover); }
.contents-topic.unwritten { font-style: normal; border-bottom: 0; }
.contents-topic.unwritten:last-child { border-bottom: 1px solid var(--line); }
.contents-topic.unwritten .topic-code { color: var(--muted); }
.contents-topic.unwritten h3 { font-weight: 400; }
.contents-topic.unwritten:hover h3 { color: inherit; }
.contents-topic .empty-note { grid-column: 2 / -1; grid-row: 2; font-style: italic; font-size: 16px; }
@media (max-width: 520px) {
        .contents-section { margin-top: 36px; }
        .contents-section > h2 { font-size: 25px; }
        .contents-topic { grid-template-columns: 52px minmax(0, 1fr); gap: 6px 12px; }
        .contents-topic h3 { font-size: 20px; }
        .contents-topic .meta { grid-column: 2; grid-row: 2; }
        .contents-topic .empty-note { font-size: 15px; }
}

.section-links { display: flex; flex-direction: column; }
.section-link { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--secondary); text-decoration: none; font-size: 16px; line-height: 1.35; }
.section-number, .section-count { color: var(--muted); font: 12px/1.6 var(--mono); }
.section-label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.section-heading > span:first-child { overflow-wrap: anywhere; }
.section-count { flex: none; }
.section-link:hover { color: var(--text); }
.every-topic, .all-sections { font: 13px/1.6 var(--mono); }
.sections-box { padding-top: 14px; gap: 10px; align-self: start; }
.sections-box .section-link { border: 0; padding: 8px 10px; border-radius: 8px; font-size: 15px; }
.sections-box .section-link:hover { background: var(--surface); }
.section-caption { text-transform: uppercase; margin-bottom: 12px; line-height: 1.8; }
.rail .topic-links { display: flex; flex-direction: column; }
.rail .topic-code { min-width: 40px; font-size: 12px; }
.rail .empty { color: var(--muted); }
.rail .empty .topic-code { color: inherit; }
.rail .all-sections { padding: 20px 12px 0; }
.chips .section-caption { margin: 0; }
.chips .empty { border-style: dashed; color: var(--muted); }
.chips .empty .topic-code { color: inherit; }
.empty-note { font-size: 16px; font-style: italic; color: var(--muted); }
.neighbor.soon { color: var(--secondary); }
@media (max-width: 800px) {
        .sections-box { display: none; }
}

.progress-sections { padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.progress-sections .section-link { border: 0; padding: 10px 12px; border-radius: 8px; }
.progress-sections .section-link:hover { background: var(--raised); }
.has-writing .section-number { color: var(--accent); }
.has-writing .section-heading > span:first-child { color: var(--text); }
@media (max-width: 520px) {
        .hero { padding: 36px 0 32px; gap: 12px; }
        .hero h1 { font-size: 32px; }
        .hero .intro { font-size: 17px; }
        .post-card:not(.contents-topic) { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; }
        .post-card:not(.contents-topic) h2 { font-size: 21px; }
        .post-card:not(.contents-topic) p { font-size: 16px; }
        .progress-sections { padding: 6px; background: transparent; }
        .progress-sections .section-link { padding: 10px; font-size: 15px; }
}