@charset "UTF-8";

:root {
  color-scheme: light dark;
  --paper: #f3f4f5;
  --ink: #171c22;
  --line: #c7cbd0;
  --accent: #78aaff;
  --link: #245ac1;
  --muted: #656d77;
  --folder-fill: #e4edfc;
  --serif: Charter, Georgia, "Times New Roman", "Songti SC", "Noto Serif CJK SC", STSong, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.7; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
a:hover { color: var(--link); }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 5px; }
::selection { background: var(--accent); color: var(--ink); }
.shell { max-width: 1120px; margin-inline: auto; padding: clamp(2rem, 7vw, 6rem) clamp(1.25rem, 5vw, 4rem) 4rem; }
h1 { display: flex; align-items: baseline; margin: 0 0 clamp(2.5rem, 7vw, 5rem); font-size: clamp(5.5rem, 17vw, 13.5rem); font-weight: 800; letter-spacing: -.095em; line-height: 1.2; }
.title-hyphen { font-weight: 400; margin-inline: .02em; }
.title-lab { position: relative; display: inline-block; padding-inline: .06em .12em; z-index: 0; color: #171c22; }
.title-lab::before { position: absolute; content: ""; inset: 24% 0 8%; background: var(--accent); transform: rotate(-3deg); z-index: -1; }
.title-star { display: inline-block; margin-left: .18em; font-size: .36em; vertical-align: top; padding-top: .36em; letter-spacing: 0; }
.project-list { list-style: none; padding: .65rem 0 0; margin: 0; border-top: 1px solid var(--line); }
.project-list li { margin: 0; }
.project-list a { display: inline-block; padding-block: .55rem; font-size: 1.125rem; overflow-wrap: anywhere; }
.not-found p { margin-block: 0 1rem; }

/* Native disclosure controls provide the catalogue's folder hierarchy. */
.catalogue { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.directory-tree, .directory-children { list-style: none; margin: 0; padding: 0; }
.directory-folder > summary { display: flex; align-items: center; gap: .65rem; min-height: 48px; cursor: pointer; list-style: none; }
.directory-folder > summary::-webkit-details-marker { display: none; }
.directory-folder > summary:hover .folder-title { color: var(--link); }
.folder-title { font-size: 1.125rem; font-weight: 500; }
.directory-chevron { flex: 0 0 8px; width: 8px; height: 8px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(-45deg); margin-right: .2rem; }
.directory-folder[open] > summary > .directory-chevron { transform: rotate(45deg) translateY(-2px); }
.directory-icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--link); fill: var(--folder-fill); }
.directory-icon--file { fill: none; color: var(--muted); }
.directory-children { margin: .35rem 0 .85rem 3px; padding-left: 1.5rem; border-left: 1px solid var(--line); }
.directory-children > li { position: relative; }
.directory-children > li::before { content: ""; position: absolute; left: -1.5rem; top: 24px; width: .85rem; height: 1px; background: var(--line); }
.directory-file { display: flex; align-items: center; gap: .65rem; min-height: 48px; }
.directory-file > a { display: flex; align-items: center; gap: .65rem; padding: .55rem 0; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; font-size: 1rem; }
.directory-file > a:hover { text-decoration: underline; }
.directory-state { margin-left: auto; padding-left: .75rem; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.catalogue .project-list { border-top: 0; padding: .5rem 0 0; }
.catalogue .project-list:empty { display: none; }

/* Small copies of the same mark anchor directory and reading pages. */
.inner-shell { max-width: 960px; padding-top: clamp(2rem, 5vw, 3.5rem); }
.inner-header { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; margin-bottom: clamp(3rem, 7vw, 5rem); }
.brand { display: inline-flex; align-items: baseline; font-size: 2.75rem; font-weight: 800; letter-spacing: -.095em; line-height: 1.2; text-decoration: none; }
.brand:hover { color: var(--ink); }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; color: var(--muted); font-size: .875rem; }
.breadcrumbs a { color: inherit; text-decoration: none; padding: .6rem 0; }
.breadcrumbs a:hover { color: var(--link); text-decoration: underline; }
.breadcrumbs .separator { color: var(--line); }
.page-title { display: block; font-size: 2rem; font-weight: 400; letter-spacing: 0; line-height: 1.35; margin: 0 0 2.5rem; }
.reading { max-width: 39.667rem; margin-inline: auto; font-family: var(--serif); }
.reading .page-title { font-family: var(--serif); overflow-wrap: anywhere; }
.writing-body { font-size: 1.0625rem; line-height: 1.78; overflow-wrap: anywhere; }
.writing-body p { margin: 0 0 1.15em; }
.writing-body h2, .writing-body h3 { font-weight: 400; line-height: 1.4; margin: 2em 0 1em; }
.writing-body h2 { font-size: 1.375rem; }
.writing-body h3 { font-size: 1.125rem; }
.writing-body a { color: var(--link); }
.writing-body ul, .writing-body ol { padding-left: 1.5em; margin: 0 0 1.15em; }
.writing-body li + li { margin-top: .5em; }
.writing-body img { display: block; max-width: 100%; height: auto; }
.writing-body pre, .writing-body table { overflow-x: auto; }
.writing-body pre { padding: 1rem; border: 1px solid var(--line); font-size: .875rem; line-height: 1.65; }
.writing-body table { display: block; }
.project-table { overflow-x: auto; margin: 1.5rem 0; }
.writing-body .project-table table { display: table; width: 100%; min-width: 32rem; border-collapse: collapse; font-size: .9375rem; line-height: 1.7; }
.project-table th, .project-table td { padding: .75rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.project-table th { font-family: var(--sans); font-weight: 500; }
.project-table th:first-child, .project-table td:first-child { padding-left: 0; min-width: 6rem; }
.project-table:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.writing-body blockquote { border-left: 1px solid var(--line); margin: 1.5rem 0; padding-left: 1.25rem; }
.writing-body hr { width: 4rem; margin: 2.5rem 0; border: 0; border-top: 1px solid var(--line); }

/* An opt-in, quiet contents row before the prose; native disclosure and links. */
.reading-toc { margin: -.75rem 0 2rem; border-bottom: 1px solid var(--line); font: .875rem/1.65 var(--sans); }
.reading-toc > summary { display: flex; align-items: center; gap: .6rem; min-height: 44px; width: fit-content; cursor: pointer; list-style: none; }
.reading-toc > summary::-webkit-details-marker { display: none; }
.reading-toc > summary::before { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); }
.reading-toc[open] > summary::before { transform: rotate(45deg) translateY(-2px); }
.reading-toc > summary:hover { color: var(--link); }
.reading-toc > summary:focus-visible, .math-display:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.reading-toc nav { padding: .25rem 0 .75rem 1rem; }
.writing-body .reading-toc ol { list-style: none; padding: 0; margin: 0; }
.writing-body .reading-toc li + li { margin: 0; }
.reading-toc a { display: block; padding: .55rem 0; text-decoration: none; }
.reading-toc a:hover { text-decoration: underline; }
.writing-body h2[id] { scroll-margin-top: 2rem; }
.writing-body h2[id]:target { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .3em; }

/* Browser-native MathML inherits the reading size and both colour schemes. */
.writing-body math { font-size: 1em; }
.math-display { overflow-x: auto; margin: 1.5rem 0; padding: .5rem 0; }
.math-display math { margin: 0; min-width: max-content; }

/* References remain in the sentence flow without increasing its line height. */
.writing-body sup { position: relative; top: -.45em; vertical-align: baseline; font-size: .7em; line-height: 0; }
.writing-body a[data-footnote-ref] { display: inline-block; min-width: 24px; padding: 6px 4px; text-align: center; font-family: var(--sans); line-height: 12px; text-indent: 0; text-decoration: none; scroll-margin-top: 6rem; }
.writing-body a[data-footnote-ref]:hover { text-decoration: underline; }
.writing-body a[data-footnote-ref]:target { outline: 1px solid var(--link); outline-offset: 2px; }
.footnotes { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.75; }
.writing-body .footnotes h2, .writing-body .further-reading h2 { margin: 0 0 1.25rem; font-family: var(--sans); font-size: 1rem; font-weight: 500; }
.footnotes li { padding-left: .25rem; scroll-margin-top: 2rem; }
.footnotes li + li { margin-top: 1rem; }
.footnotes li::marker { color: var(--muted); font-family: var(--sans); font-size: .8125rem; }
.footnotes li:target { outline: 1px solid var(--line); outline-offset: .5rem; }
.footnotes p { margin-bottom: .5rem; }
.writing-body a[data-footnote-backref] { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; font-family: var(--sans); text-decoration: none; }
.further-reading { margin-top: 2.5rem; font-size: .9375rem; line-height: 1.75; }
.writing-meta { margin: -1.25rem 0 2.5rem; color: var(--muted); font: .8125rem/1.6 var(--sans); }
.writing-pending { color: var(--muted); padding-block: .5rem 2rem; }
.writing-source { margin-top: 2.5rem; font-size: .875rem; line-height: 1.6; }
.writing-source::before { content: ""; display: block; width: 4rem; height: 1px; background: var(--line); margin-bottom: .75rem; }
.writing-source a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); text-decoration: none; }
.writing-source a:hover { text-decoration: underline; }
.writing-source .source-arrow { margin-left: .35em; }

@media (prefers-color-scheme: dark) {
  :root { --paper: #25282c; --ink: #e3e6eb; --line: #515966; --link: #a6c5ff; --muted: #b0b8c4; --folder-fill: #303f56; }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(4rem, 22vw, 9rem); }
  .directory-children { padding-left: 1.1rem; }
  .directory-children > li::before { left: -1.1rem; width: .55rem; }
  .directory-file, .directory-file > a { gap: .5rem; }
  .folder-title { font-size: 1rem; }
  .inner-header { gap: 1rem; margin-bottom: 3rem; }
  .brand { font-size: 2.25rem; }
  .page-title { font-size: 1.6rem; }
}