@font-face {
  font-family: 'Source Sans 3';
  /* Keep this content revision in sync with the font preload in _Layout.cshtml. */
  src: url('/fonts/SourceSans3.woff2?v=5f16566f7a40') format('woff2');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: light-dark(#f5f2f8, #17121d);
  --ink: light-dark(#292130, #ece5f0);
  --muted: light-dark(#65596e, #bcb0c7);
  --accent: light-dark(#74328c, #cf9bec);
  --line: light-dark(#d6ccdf, #47394f);
  --white: light-dark(#fcfaff, #221a2a);
  --selection: light-dark(#e0c9ed, #653b7e);
  --field-border: light-dark(#8b7997, #8d779c);
  --soft: light-dark(#e9e1f0, #302338);
  --button: light-dark(#703181, #c493df);
  --button-text: light-dark(#ffffff, #211329);
  --negative: light-dark(#972c45, #ffabc2);
  --negative-surface: light-dark(#fce9ee, #3c1c2b);
  --positive: light-dark(#31592e, #b3dea9);
  --positive-surface: light-dark(#e8f0e4, #20321f);
  --warning: light-dark(#734309, #f1cc92);
  --warning-surface: light-dark(#f4e3c8, #3b2b18);
  --caution: light-dark(#575011, #e4dda3);
  --caution-surface: light-dark(#f2efcc, #323016);
  --sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: var(--sans);
}

html[data-theme='light'] { color-scheme: light; }
html[data-theme='dark'] { color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
::selection { background: var(--selection); color: var(--ink); }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
button, input, textarea, select { font: inherit; accent-color: var(--accent); }
button, a, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
input:focus-visible, textarea:focus-visible { outline-offset: 1px; }
input, textarea { caret-color: var(--accent); }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
h1 { font-family: var(--sans); font-weight: 650; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.025em; margin-bottom: 1.2rem; }
h2 { font-weight: 600; }
p { text-wrap: pretty; }
.shell { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.accent { color: var(--accent); }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 10; background: var(--ink); color: var(--paper); padding: .8rem; }
.skip:focus { top: 1rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.65rem; font-weight: 650; letter-spacing: -.025em; text-decoration: none; line-height: 1.15; }
.wordmark:hover { color: var(--ink); }
.wordmark img { width: 64px; height: 62px; object-fit: contain; flex-shrink: 0; }
.wordmark > span > span { color: var(--accent); }
.site-header nav { display: flex; align-items: center; gap: 1.5rem; font-size: .9rem; }
.site-header nav a { text-decoration: none; padding-block: .5rem; }
.site-header nav svg { vertical-align: -.13em; margin-left: .25rem; }
.theme-toggle { flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); }
.theme-toggle:hover { background: var(--soft); color: var(--accent); }
.theme-toggle:focus:not(:focus-visible) { outline: none; }
.site-header nav .theme-toggle svg { width: 21px; height: 21px; margin: 0; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.index-heading { padding-block: 2.4rem 2rem; }
.index-heading h1 { max-width: 950px; }
.index-heading > p { color: var(--muted); font-size: 1.1rem; }
.personal-intro { padding-block: 1.7rem 2rem; }
.personal-intro > p { font-size: 1rem; margin: 0; line-height: 1.7; }
.index-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 0 6rem; padding-block: 1.7rem 5rem; }
.index-grid > .index-heading { grid-column: 1; padding-top: 0; }
.index-grid > section { grid-column: 1; }
.section-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-block: 1px solid var(--ink); padding-block: .8rem; }
.section-line h2 { font-size: .85rem; margin: 0; }
.section-line > span { font-size: .8rem; color: var(--muted); }
.post-row { padding-block: 2.4rem 2rem; border-bottom: 1px solid var(--line); }
.post-meta { display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.post-row h2 { font-family: var(--sans); font-weight: 650; font-size: clamp(1.5rem, 2.8vw, 2rem); letter-spacing: -.02em; line-height: 1.25; margin-block: .75rem .8rem; }
.post-row h2 a { text-decoration: none; }
.post-row > p { color: var(--muted); font-size: .96rem; margin-bottom: 1.3rem; max-width: 66ch; }
.row-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .75rem; }
.tags a { color: var(--accent); text-decoration: none; }
.tags a:hover { text-decoration: underline; }
.read-link { flex-shrink: 0; font-size: .8rem; text-decoration: none; }
.read-link span { margin-left: .6rem; }
.sidebar { grid-column: 2; padding-top: .9rem; }
.sidebar section { border-top: 1px solid var(--line); padding-block: 1.2rem 1.5rem; margin-bottom: 1.5rem; }
.sidebar section:first-child { border-top: 0; padding-top: 0; }
.sidebar h2 { font-size: .9rem; margin-bottom: .9rem; }
.sidebar p { font-size: .87rem; color: var(--muted); }
.sidebar > section > a { font-size: .8rem; }
.topic-list { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.topic-list a { font-size: .82rem; text-decoration-color: var(--line); }
.topic-list [aria-current=page] { color: var(--accent); text-decoration-color: currentColor; }
.project-links { padding: 0; margin: 0; list-style: none; font-size: .83rem; }
.project-links li + li { margin-top: .5rem; }
.project-links a { text-decoration: none; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 2rem; font-size: .9rem; }
.pagination span { color: var(--muted); }
.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; padding-block: 2.5rem; border-top: 1px solid var(--ink); font-size: .8rem; }
.footer-name { font-weight: 650; text-decoration: none; }
.site-footer p { color: var(--muted); margin-block: .4rem 0; }
.site-footer nav { display: flex; align-items: baseline; gap: 1.5rem; }
.site-footer nav a { text-decoration: none; }
.site-footer form { margin: 0; }
.site-footer .text-button { text-decoration: none; line-height: inherit; }
.copyright { grid-column: 1 / -1; font-size: .72rem; }
.site-footer .profiles { grid-column: 1 / -1; font-size: .76rem; }
.article-wrap { max-width: 45rem; margin-inline: auto; padding-block: 2.7rem 4rem; }
.back-link { font-size: .85rem; color: var(--muted); text-decoration: none; }
.article-header { padding-block: 2.5rem 2rem; border-bottom: 1px solid var(--line); margin-bottom: 2.3rem; }
.article-header h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.2; margin-block: 1rem 1.6rem; }
.article-header .post-meta { font-size: .83rem; }
.prose { overflow-wrap: anywhere; font-size: 1.1875rem; line-height: 1.8; }
.prose > :first-child { margin-top: 0; }
.prose p { margin-bottom: 1.4rem; }
.prose h2 { font-family: var(--serif); font-size: 2rem; font-weight: 550; margin-block: 2.8rem 1rem; letter-spacing: -.02em; }
.prose h3 { font-size: 1.3rem; margin-block: 2rem 1rem; }
.prose ul, .prose ol { padding-left: 1.5rem; margin-block: 1rem 1.6rem; }
.prose li + li { margin-top: .4rem; }
.prose a { color: var(--accent); }
.prose blockquote { border-left: 1px solid var(--accent); margin-inline: 0; padding-inline: 1.5rem 0; font-family: var(--serif); font-size: 1.35rem; }
code, pre { font-family: 'Cascadia Code', 'SFMono-Regular', Consolas, monospace; font-size: .86em; }
code { background: var(--soft); padding: .12em .3em; border-radius: 3px; }
pre { position: relative; background: #1d1527; color: #eee5f7; border-radius: 6px; padding: 1.4rem; line-height: 1.65; overflow-x: auto; overflow-wrap: normal; tab-size: 2; }
pre code { background: none; padding: 0; color: inherit; border-radius: 0; font-size: 1em; }
pre .copy-code { position: sticky; float: right; right: 0; top: 0; border-color: #9f89b2; color: #eee5f7; background: #1d1527; font-size: .7rem; padding: .15rem .5rem; }
/* Syntax colors share the existing dark code surface in both reading themes. */
pre .hljs-comment, pre .hljs-quote { color: #b9a8c9; font-style: italic; }
pre .hljs-keyword, pre .hljs-selector-tag, pre .hljs-literal { color: #d9a6f5; }
pre .hljs-string, pre .hljs-regexp, pre .hljs-addition { color: #b9dfad; }
pre .hljs-number, pre .hljs-symbol, pre .hljs-bullet { color: #f3c592; }
pre .hljs-title, pre .hljs-section, pre .hljs-selector-id, pre .hljs-selector-class { color: #f1d594; }
pre .hljs-type, pre .hljs-built_in, pre .hljs-name { color: #9ddde4; }
pre .hljs-attr, pre .hljs-attribute, pre .hljs-variable, pre .hljs-template-variable { color: #c5c0ff; }
pre .hljs-meta, pre .hljs-doctag { color: #b2c9f5; }
pre .hljs-deletion { color: #ffb0bd; }
pre .hljs-emphasis { font-style: italic; }
pre .hljs-strong { font-weight: 700; }
.prose img { display: block; margin-block: 1.8rem; border-radius: 3px; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .9rem; margin-block: 1.5rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; min-width: 6rem; }
.prose :is(th, td):is(.table-pass, .pass, .a-rating), .prose :is(th, td):has(> .table-pass) { background: var(--positive-surface); color: var(--positive); }
.prose :is(th, td):is(.table-fail, .fail, .f-rating), .prose :is(th, td):has(> .table-fail) { background: var(--negative-surface); color: var(--negative); }
.prose :is(th, td):is(.table-warning, .partial, .b-rating), .prose :is(th, td):has(> .table-warning) { background: var(--warning-surface); color: var(--warning); }
.prose :is(th, td):is(.table-caution, .c-rating), .prose :is(th, td):has(> .table-caution) { background: var(--caution-surface); color: var(--caution); }
.prose :is(th, td):is(.table-pass, .table-fail, .table-warning, .table-caution, .a-rating, .b-rating, .c-rating, .f-rating) a { color: inherit; }
.prose :is(th, td):is(.table-pass, .table-fail, .table-warning, .table-caution) { white-space: nowrap; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5rem; }
.article-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-block: 1.4rem; margin-top: 3rem; font-size: .85rem; }
.comments { margin-top: 3rem; }
.comments .section-line { margin-bottom: 1rem; }
.comment { padding-block: 1.3rem; border-bottom: 1px solid var(--line); }
.comment header { display: flex; gap: .8rem; flex-wrap: wrap; align-items: baseline; font-size: .85rem; margin-bottom: .5rem; }
.comment header > a { margin-left: auto; font-size: .75rem; color: var(--muted); text-decoration: none; }
.comment-content { font-size: .95rem; }
.comment-content p:last-child { margin-bottom: 0; }
#comment-form-target { margin-top: 1.7rem; }
.related { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--ink); }
.related h2 { font-family: var(--serif); font-size: 1.8rem; }
.related ul { list-style: none; padding: 0; }
.related li { padding-block: .65rem; }
.related a { text-decoration: none; }
.archive { padding-bottom: 5rem; max-width: 940px; }
.archive-year { display: grid; grid-template-columns: 100px 1fr; border-top: 1px solid var(--line); padding-block: 1.8rem; gap: 2rem; }
.archive-year h2 { font-family: var(--serif); font-size: 2rem; font-weight: 450; }
.archive-year ul { padding: 0; margin: 0; list-style: none; }
.archive-year li { display: grid; grid-template-columns: 65px 1fr; gap: 1.2rem; padding-block: .6rem; }
.archive-year time { color: var(--muted); font-size: .8rem; padding-top: .1rem; font-variant-numeric: tabular-nums; }
.archive-year a { text-decoration: none; }
.search-form { display: flex; gap: .6rem; max-width: 700px; margin-top: 2rem; }
input, textarea { width: 100%; min-width: 0; color: var(--ink); background: var(--white); border: 1px solid var(--field-border); border-radius: 4px; padding: .65rem .8rem; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { resize: vertical; line-height: 1.6; }
label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
button, .button { display: inline-flex; justify-content: center; align-items: center; gap: .4rem; border: 1px solid var(--button); background: var(--button); color: var(--button-text); border-radius: 4px; font-weight: 600; font-size: .88rem; padding: .7rem 1.1rem; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.5; }
button:hover, .button:hover { background: var(--accent); border-color: var(--accent); color: var(--button-text); }
button:disabled { cursor: wait; opacity: .6; }
button.secondary { background: transparent; color: var(--ink); border-color: var(--field-border); }
button.secondary:hover { background: var(--soft); }
.text-button { background: transparent; padding: 0; border: 0; color: inherit; font-size: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: .2em; }
.text-button:hover { background: transparent; color: var(--accent); }
.stack-form { display: grid; gap: 1.3rem; }
.stack-form > button { justify-self: start; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-hint { color: var(--muted); font-size: .75rem; margin-block: .4rem 0; }
.validation-summary-valid { display: none; }
.validation-summary-errors { color: var(--negative); padding: 1rem; background: var(--negative-surface); border: 1px solid var(--negative); border-radius: 4px; }
.validation-summary-errors ul { margin-block: 0; padding-left: 1.2rem; }
.input-validation-error { border-color: var(--negative); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.empty { padding-block: 3rem; }
.empty h3 { font-family: var(--serif); font-size: 2rem; }
.error-page { min-height: 50vh; padding-block: 6rem; }
.admin-main { padding-bottom: 5rem; }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; padding-block: 1.2rem; font-size: .85rem; border-bottom: 1px solid var(--line); }
.admin-nav a { text-decoration: none; }
.admin-nav form { margin-left: auto; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 3rem 2rem; }
.admin-heading h1 { font-size: 3.3rem; }
.admin-heading p { color: var(--muted); margin-bottom: 0; }
.manage-row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-block: 1.6rem; border-top: 1px solid var(--line); }
.manage-row h2 { font-family: var(--serif); font-size: 1.8rem; font-weight: 500; margin-block: .5rem; }
.manage-row h2 a { text-decoration: none; }
.manage-row p { margin: 0; font-size: .78rem; overflow-wrap: anywhere; }
.manage-row > a { font-size: .85rem; flex-shrink: 0; }
.badge { display: inline-block; font-size: .68rem; border: 1px solid var(--field-border); border-radius: 3px; padding: .1rem .5rem; font-weight: 500; }
.login-wrap { max-width: 460px; margin: 4rem auto; }
.login-wrap h1 { font-size: 3.1rem; }
.login-wrap > p { color: var(--muted); margin-bottom: 2rem; }
.login-wrap .stack-form button { justify-self: stretch; }
.notice { background: var(--positive-surface); color: var(--positive); border: 1px solid var(--positive); border-radius: 4px; padding: 1rem; }
.editor-grid { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 3rem; }
.editor-main { display: grid; gap: 1.5rem; align-content: start; }
.editor-settings { display: grid; gap: 1.2rem; align-content: start; }
.markdown-editor { font-family: 'Cascadia Code', Consolas, monospace; font-size: .9rem; min-height: 600px; border-top-left-radius: 0; border-top-right-radius: 0; tab-size: 2; }
.editor-toolbar { display: flex; gap: .6rem; background: var(--soft); padding: .45rem; border: 1px solid var(--field-border); border-bottom: none; border-radius: 4px 4px 0 0; }
.editor-toolbar button { font-size: .75rem; background: var(--paper); color: var(--ink); border-color: var(--line); padding: .25rem .6rem; }
.editor-toolbar button:hover { border-color: var(--accent); }
.checkbox { display: flex; align-items: center; gap: .7rem; margin: 0; }
.checkbox input { width: 1.1rem; height: 1.1rem; }
.editor-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.upload-section { margin-top: 2rem; border-top: 1px solid var(--line); padding-block: 1.7rem; }
.upload-section h2 { font-size: 1.2rem; }
.upload-section p { font-size: .85rem; color: var(--muted); }
.upload-section form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.upload-section input { width: auto; max-width: 100%; }
.upload-section output { display: block; flex-basis: 100%; overflow-wrap: anywhere; }
.preview { border-top: 1px solid var(--ink); }
.delete-section { margin-top: 3rem; }
summary { cursor: pointer; font-size: .85rem; padding-block: .5rem; }
.danger { color: var(--negative) !important; background: transparent; border-color: var(--negative); }
.danger:hover { color: var(--paper) !important; background: var(--negative); }
.moderation-comment { border-top: 1px solid var(--line); padding-block: 1.7rem; }
.moderation-comment header p { font-size: .8rem; color: var(--muted); }
.moderation-comment .prose { max-width: 72ch; font-size: .95rem; margin-block: 1rem; }
.moderation-comment form { display: flex; gap: .6rem; margin-top: 1rem; }
dl { display: grid; grid-template-columns: 90px minmax(0,1fr); max-width: 800px; gap: .4rem 1rem; font-size: .8rem; overflow-wrap: anywhere; }
dd { margin: 0; }
.account-api { margin-top: 3rem; font-size: .9rem; }

@media (max-width: 1000px) {
  .shell { width: calc(100% - 64px); }
  .index-grid { grid-template-columns: minmax(0,1fr) 210px; gap: 0 3rem; }
  .editor-grid { grid-template-columns: minmax(0,1fr) 250px; gap: 1.5rem; }
}

@media (max-width: 720px) {
  .shell { width: calc(100% - 40px); }
  .site-header { flex-wrap: wrap; padding-block: 1.1rem; gap: .8rem; }
  .wordmark { font-size: 1.55rem; }
  .wordmark img { width: 50px; height: 49px; }
  .site-header nav { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: .7rem; font-size: .9rem; }
  .site-header nav a svg { display: none; }
  .index-heading { padding-block: 1.5rem; }
  .index-grid { grid-template-columns: 1fr; gap: 0; padding-block: 1.5rem 3rem; }
  .post-row { padding-block: 1.8rem; }
  .row-bottom { flex-wrap: wrap; gap: .8rem; }
  .sidebar { grid-column: 1; grid-row: auto; padding-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .sidebar section { margin-bottom: 0; }
  .site-footer { grid-template-columns: 1fr; gap: 1.2rem; }
  .site-footer nav { flex-wrap: wrap; }
  .article-wrap { padding-block: 2rem 3rem; }
  .article-header { padding-block: 2rem 1.7rem; }
  .prose { font-size: 1.125rem; line-height: 1.8; }
  pre { padding: 1rem; margin-inline: -5px; }
  .archive-year { grid-template-columns: 1fr; gap: .3rem; padding-block: 1.3rem; }
  .archive-year h2 { margin-bottom: .5rem; }
  .archive-year li { grid-template-columns: 54px 1fr; gap: .7rem; }
  .admin-heading { align-items: flex-start; flex-direction: column; gap: .6rem; }
  .admin-heading h1 { font-size: 2.6rem; }
  .admin-nav { gap: .8rem 1.2rem; }
  .editor-grid { grid-template-columns: 1fr; }
  .markdown-editor { min-height: 450px; }
  .editor-settings { grid-template-columns: 1fr 1fr; }
  .editor-settings > div:has(textarea), .editor-actions { grid-column: 1 / -1; }
  .form-pair { grid-template-columns: 1fr; }
  .manage-row { gap: 1rem; }
  .search-form { gap: .4rem; }
}

@media (max-width: 400px) {
  .site-header nav { gap: .65rem; }
  .wordmark { font-size: 1.5rem; }
  .editor-settings, .sidebar { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  :root { color-scheme: light !important; }
  body { background: white; color: black; font-size: 11pt; }
  .site-header nav, .site-footer, .back-link, .sidebar, .article-end, #comment-form-target, .admin-nav, button, .related { display: none !important; }
  .shell { width: 100%; }
  .article-wrap { max-width: none; padding: 0; }
  .article-header h1 { font-size: 30pt; }
  pre { white-space: pre-wrap; color: black; background: #eee; break-inside: avoid; }
  pre [class] { color: inherit; }
  a { color: black !important; }
  img { break-inside: avoid; max-height: 18cm; object-fit: contain; }
}