:root {
  --ink: #151515;
  --muted: #656565;
  --line: #dedede;
  --bs-link-color: #151515;
  --bs-link-hover-color: #151515;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", "Microsoft YaHei", monospace;
}
html { scroll-padding-top: 5rem; }
body {
  color: var(--ink);
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration-color: #aaa; text-underline-offset: .25em; }
a:hover { color: #000; text-decoration-color: #000; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #151515;
  outline-offset: 4px;
}
::selection { color: #fff; background: #151515; }
.navbar { border-bottom: 1px solid var(--line); padding: 1.05rem 0; }
.navbar-container { max-width: 1120px; margin: auto; padding-inline: 2rem; }
.navbar-brand { font-family: var(--mono); font-size: 1.18rem; font-weight: 700; letter-spacing: -.05em; }
.navbar .navbar-brand-logo { margin-right: .6rem; }
.navbar .navbar-logo { width: 34px; height: 34px; max-height: none; }
.navbar-nav { gap: 1.15rem; }
.nav-path { font-family: var(--mono); font-size: .85rem; }
.nav-caption { font-size: .72rem; margin-left: .45rem; color: var(--muted); }
.navbar .nav-link { font-size: .88rem; color: var(--muted); white-space: nowrap; }
.navbar .navbar-brand-container { flex: 0 0 auto; min-width: max-content; max-width: none; }
.navbar .navbar-brand, .navbar .navbar-title { flex-shrink: 0; overflow: visible; text-overflow: clip; white-space: nowrap; }
.navbar .menu-text { display: inline-flex; align-items: baseline; gap: .25rem; white-space: nowrap; }
.navbar .menu-text > span { white-space: nowrap; margin-left: 0; }
.navbar .nav-item { flex-shrink: 0; }
@media (min-width: 1200px) { .navbar-container { max-width: 1320px; padding-inline: 1.5rem; } .navbar-nav { gap: .5rem; } }
/* Collapse before the bilingual menu becomes narrower than its contents. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #quarto-header .navbar-container { flex-wrap: wrap; }
  #quarto-header .navbar-toggler { display: block; }
  #quarto-header .navbar-collapse { flex-basis: 100%; }
  #quarto-header .navbar-collapse.collapse:not(.show) { display: none !important; }
  #quarto-header .navbar-collapse.show, #quarto-header .navbar-collapse.collapsing { display: block !important; }
  #quarto-header .navbar-nav { flex-direction: column; gap: .25rem; }
}
.navbar .nav-link.active { color: #000; text-decoration: underline; text-underline-offset: .5em; }
#quarto-content { padding-top: 2.5rem; }
main { padding-bottom: 4rem; }
h1,h2,h3 { color: var(--ink); font-weight: 650; line-height: 1.45; }
h1 { letter-spacing: -.035em; }
h2 { margin-top: 2.8rem; border-bottom: 0; font-size: 1.5rem; }
h3 { font-size: 1.12rem; }
.quarto-title h1.title { font-size: clamp(1.9rem, 4vw, 2.65rem); }
.quarto-title .description { color: var(--muted); font-size: 1rem; margin-top: 1rem; }
.directory-page .quarto-title h1.title { font-family: var(--mono); font-size: clamp(1.65rem, 4vw, 2.4rem); overflow-wrap: anywhere; letter-spacing: -.05em; }
.directory-page .quarto-title .subtitle { font-size: .95rem; color: var(--muted); margin-top: .65rem; }
h2.directory-heading, .directory-heading > h2 { font-family: var(--mono); font-weight: 600; letter-spacing: -.025em; font-size: 1.15rem; }
.directory-page .quarto-title-meta { display: none; }
.article-path { font: .75rem/1.8 var(--mono); color: var(--muted); margin-bottom: 1.6rem; overflow-wrap: anywhere; }
.article-path a { color: var(--muted); text-decoration: none; }
.article-path a:hover { color: var(--ink); text-decoration: underline; }
.directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 3.4rem; }
.directory-tile { border-top: 1px solid var(--ink); padding-block: 1.3rem .3rem; }
.directory-tile h3 { font: 600 1.05rem/1.6 var(--mono); margin-top: 0; }
.directory-tile h3 a { text-decoration: none; }
.directory-tile h3 a:hover { text-decoration: underline; }
.directory-tile p { font-size: .88rem; color: var(--muted); }
.collection-heading { display: flex; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--ink); margin-top: 2.8rem; }
.collection-heading h2 { margin-top: 0; margin-bottom: .8rem; }
.collection-heading > p { color: var(--muted); font-size: .78rem; }
.project-entry, .link-entry { border-bottom: 1px solid var(--line); padding-block: 1.7rem; }
.entry-topline { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; }
.entry-topline h3, .entry-topline h3 a, .link-entry h3 { font: 600 1.1rem/1.6 var(--mono); margin: 0; overflow-wrap: anywhere; }
.entry-topline p { margin-bottom: .8rem; }
.repository-link { font: .8rem var(--mono); white-space: nowrap; }
.project-entry > p { font-size: .92rem; color: var(--muted); }
.project-entry > p:first-of-type { color: var(--ink); }
.entry-tags code { font-size: .7rem; background: transparent; color: var(--muted); border: 1px solid var(--line); padding: .15rem .4rem; }
.entry-tags p { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 0; }
.collection-note { font-size: .83rem; color: var(--muted); margin-top: 1.5rem; }
.empty-directory { padding: 2rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.empty-directory code { background: transparent; color: var(--muted); padding: 0; font-size: .8rem; }
.site-address { border-left: 2px solid var(--ink); padding-left: 1.2rem; font-size: .9rem; }
.site-address a { overflow-wrap: anywhere; }
.quarto-title-meta { padding-block: 1rem 1.7rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
.quarto-title-meta-heading, .quarto-title-meta-contents { font-family: var(--mono); }
.quarto-category { color: var(--muted) !important; border-color: var(--line) !important; border-radius: 0 !important; padding: .15em .5em !important; }
.home-page #title-block-header { display: none; }
.home-page main { max-width: 960px; margin-inline: auto; width: 100%; }
.home-intro { padding: 4.7rem 0 5rem; max-width: 700px; }
.eyebrow { font: .74rem var(--mono); letter-spacing: .16em; color: var(--muted); }
.eyebrow p { margin-bottom: 1.6rem; }
h1.hero-title, .hero-title > h1 { font-size: clamp(2.1rem, 5vw, 3.55rem); margin: 0 0 1.5rem; font-weight: 700; }
.home-intro > p, .home-intro .hero-title > p { max-width: 530px; color: var(--muted); font-size: 1.04rem; }
.home-links { margin-top: 2.2rem; font-family: var(--mono); font-size: .88rem; }
.home-links p { display: flex; flex-wrap: wrap; gap: 1.8rem; align-items: center; }
.primary-link { display: inline-block; border: 1px solid var(--ink); padding: .45rem 1rem; text-decoration: none; font-family: var(--mono); font-size: .88rem; }
.primary-link:hover { background: var(--ink); color: #fff; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ink); }
.section-heading h2 { margin: 0 0 1rem; font-size: 1.05rem; }
.section-heading > p { font-size: .8rem; font-family: var(--mono); }
.quarto-listing { margin-top: 0; }
.quarto-post { padding-block: 1.75rem !important; border-bottom: 1px solid var(--line) !important; gap: 1.5rem; }
.quarto-post .listing-title { font-size: 1.15rem; line-height: 1.65; margin-top: 0; font-weight: 600; }
.quarto-post .listing-description { color: var(--muted); font-size: .9rem; }
.quarto-post .metadata { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.quarto-post .listing-categories { margin-top: .5rem; }
.quarto-listing-category-title { font-size: .9rem; }
.quarto-listing-category { font-size: .83rem; }
.quarto-listing-category.active { color: #000; font-weight: 700; }
.quarto-listing-filter input { border-radius: 0; font-size: .85rem; }
.home-note { border-top: 1px solid var(--line); margin-top: 4rem; padding-top: 1.6rem; color: var(--muted); font-size: .82rem; }
.home-note code { background: transparent; color: var(--muted); padding: 0; }
pre, code { font-family: var(--mono); }
code { color: #222; background: #f4f4f4; border-radius: 0; }
div.sourceCode { border: 1px solid var(--line); border-radius: 0; background: #f8f8f8; }
div.sourceCode pre { padding: 1rem; }
blockquote { border-left: 2px solid #151515; color: var(--muted); padding-left: 1.2rem; }
.download-box { border: 1px solid var(--ink); padding: 1.5rem; margin-block: 2rem; }
.download-box > p:first-child { font: .8rem var(--mono); letter-spacing: .07em; }
.download-box > p:last-child { margin-bottom: 0; }
.comments-section { border-top: 1px solid var(--line); margin-top: 4rem; padding-top: 1.5rem; }
.comments-section h2 { margin-top: 0; font-size: 1.2rem; }
#comments-status, .comments-fallback { color: var(--muted); font-size: .85rem; }
.comments-fallback { display: inline-block; margin-bottom: 1rem; }
#TOC { font-size: .8rem; }
#TOC .nav-link.active { color: #000 !important; border-left-color: #000 !important; }
.nav-footer { border-top: 1px solid var(--line); font: .75rem var(--mono); color: var(--muted); padding-block: 1.3rem; }
.nav-footer a { color: var(--muted); }
.footer-repository { display: inline-flex; gap: .5rem; align-items: center; text-decoration: none; }
.footer-repository .bi-github { font-size: 1.05rem; }
.footer-repository:hover { color: var(--ink); }
.footer-builder { margin-left: 1.4rem; }
@media (max-width: 767px) {
  .navbar-container { padding-inline: 1rem; }
  .navbar-nav { gap: .25rem; padding-block: .7rem; }
  .nav-caption { margin-left: .7rem; }
  .directory-grid { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; }
  #quarto-content { padding-top: 1.5rem; }
  .home-intro { padding: 2.4rem 0 3rem; }
  .home-page main { padding-inline: .4rem; }
  .quarto-post { flex-direction: column; gap: .4rem; }
  .quarto-post .metadata { width: auto !important; flex-basis: auto !important; }
  .quarto-post .body { width: 100% !important; flex-basis: auto !important; }
  .quarto-title-meta { gap: 1rem; }
  .download-box { padding: 1.1rem; }
}
.log-console { border: 1px solid var(--line); padding: 1.2rem 1.4rem; margin: 1.5rem 0 2rem; }
.log-console p { margin-bottom: .6rem; font-size: .88rem; }
.log-console p:last-child { margin-bottom: 0; }
.log-console code { background: transparent; font-size: .75rem; }
.log-controls { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.log-search { display: flex; align-items: center; gap: .6rem; font: .75rem var(--mono); }
.log-search input { border: 0; border-bottom: 1px solid var(--line); padding: .4rem; max-width: 180px; background: white; }
.log-count { font: .7rem var(--mono); color: var(--muted); margin: 1rem 0; }
.log-entry { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.5rem; padding: 1.8rem 0; border-top: 1px solid var(--line); }
.log-entry[hidden] { display: none !important; }
.log-stamp { font: .72rem/1.8 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.log-request { font: .67rem/1.8 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.log-payload p { font-size: .9rem; color: var(--muted); }
@media (max-width: 767px) {
  .log-entry { grid-template-columns: 1fr; gap: .7rem; }
  .log-stamp { display: flex; flex-wrap: wrap; gap: .8rem; }
  .log-console { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  * { transition: none !important; }
}

.log-entry-title { font-size: 1rem !important; font-weight: 600; color: var(--ink) !important; margin: .7rem 0 1rem; }
.log-payload { min-width: 0; overflow-wrap: anywhere; }
.log-payload figure { margin: 1rem 0; }
.log-payload img { display: block; max-width: 100%; max-height: 560px; object-fit: contain; object-position: left; }
.log-payload a { overflow-wrap: anywhere; }
.library-entry { border-bottom: 1px solid var(--line); padding: 1.8rem 0; }
.library-book-meta { font: .72rem var(--mono); color: var(--muted); }
.library-book-title { font-size: 1.2rem; margin: .7rem 0; }
.library-author { color: var(--muted); font-size: .85rem; }
.library-actions { display: flex; flex-wrap: wrap; gap: 1.5rem; font: .76rem var(--mono); margin-top: 1rem; }
.homework-pdf { width: 100%; height: 75vh; min-height: 400px; border: 1px solid var(--line); }
.library-filters, .library-subjects { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.library-filters button, .library-subjects button { border: 1px solid var(--line); background: white; color: var(--muted); padding: .35rem .75rem; font: .8rem/1.6 var(--mono); }
.library-filters button[aria-pressed="true"], .library-subjects button[aria-pressed="true"] { color: white; background: var(--ink); border-color: var(--ink); }
.library-filter-count { font-size: .65rem; opacity: .7; margin-left: .3rem; }
.library-subject-label, .library-count { font: .72rem var(--mono); color: var(--muted); }
.library-entry[hidden], .library-subjects[hidden], #library-empty[hidden] { display: none !important; }
.log-comments { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.log-comments summary { width: fit-content; cursor: pointer; font: .76rem/1.8 var(--mono); color: var(--muted); }
.log-comments summary span { margin-left: .3rem; }
.log-comments summary:hover, .log-comments[open] summary { color: var(--ink); }
.log-comments summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.log-comments-body { padding-top: 1rem; }
.log-comments-status, .log-comments-fallback { font-size: .75rem !important; color: var(--muted); }
.log-comments-frame { width: 100%; min-height: 200px; border: 0; display: block; }
/* Giscus leaves its root transparent; give every embed an explicit light canvas. */
iframe.giscus-frame, iframe.log-comments-frame { background: #fff; color-scheme: light; }
.log-comments-fallback { display: inline-block; margin-top: .5rem; }
.log-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1.2rem 0; }
.log-photo-grid figure, .log-photo-grid p { margin: 0; }
.log-photo-grid img { width: 100%; height: 230px; object-fit: cover; }
.log-photo-grid figcaption { font-size: .72rem; }
@media (max-width: 767px) { .log-photo-grid { grid-template-columns: 1fr; } .log-photo-grid img { height: auto; max-height: 440px; object-fit: contain; } }
/* Directory filters and reading lists share the monochrome controls. */
.blog-search-block { display: block; font: .8rem/1.6 var(--mono); }
.blog-search-block input { display: block; border: 1px solid #ccc; padding: .45rem .7rem; background: white; color: black; width: 100%; margin-top: .4rem; }
.blog-page #title-block-header { position: relative; padding-right: 268px; }
.blog-page #title-block-header > .blog-search-block { position: absolute; right: 0; bottom: 0; width: 220px; }
.directory-buttons, #blog-tags, #blog-pages { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0; }
.blog-tools button, #blog-pages button, .blog-directory button { border: 1px solid #bbb; background: white; color: black; padding: .25rem .55rem; font-family: var(--mono); font-size: .8rem; }
.blog-tools button[aria-pressed="true"], #blog-pages button[aria-pressed="true"], .blog-directory button[aria-pressed="true"] { background: black; color: white; }
.blog-page #quarto-content { display: block; width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 2rem; }
.blog-page #quarto-content > main { width: 100%; min-width: 0; margin-inline: 0; }
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 3rem; align-items: start; }
.blog-main { min-width: 0; }
.blog-directory { position: sticky; top: 6rem; border-left: 1px solid var(--line); padding-left: 1rem; min-width: 0; }
.blog-directory button { white-space: nowrap; word-break: normal; overflow-wrap: normal; flex-shrink: 0; }
.directory-command { font: .8rem/1.6 var(--mono); white-space: nowrap; }
.directory-command code { display: inline-block; background: #f4f4f4; color: var(--ink); padding: .2rem .4rem; font: inherit; }
.directory-node { min-width: 0; }
.directory-children { display: flex; flex-direction: column; gap: .35rem; margin: .4rem 0 .4rem .65rem; padding-left: .5rem; border-left: 1px solid var(--line); }
.directory-root-list { display: flex; flex-direction: column; gap: .4rem; }
.directory-root-list button { text-align: left; border-color: transparent; }
@media (max-width: 800px) { .blog-page #quarto-content { padding-inline: 1rem; } .blog-page #title-block-header { padding-right: 0; } .blog-tools > .blog-search-block { max-width: 24rem; } .blog-layout { display: block; } .blog-directory { position: static; border-left: 0; padding: 1rem 0; } .directory-root-list { flex-direction: row; flex-wrap: wrap; } }
.blog-entry { border-bottom: 1px solid #ddd; padding: 1.3rem 0; }
.blog-entry h2 { font-size: 1.25rem; margin: .6rem 0; border: 0; }
.entry-path, .entry-tags, #blog-count { font-family: var(--mono); font-size: .78rem; color: #666; overflow-wrap: anywhere; }
.blog-entry[hidden], #blog-empty[hidden] { display: none !important; }
.reading-features, .reading-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; }
.reading-feature { border-left: 2px solid black; padding-left: 1rem; }
.reading-feature h3, .reading-list h3 { font-size: 1.1rem; }
.reading-feature p, .reading-columns small { color: #666; font-size: .85rem; }
.reading-columns h4 { font-size: 1rem; }
.reading-columns ul { list-style: none; padding: 0; }
.reading-columns li { margin: .8rem 0; overflow-wrap: anywhere; }
.reading-columns li > small { display: block; margin-top: .2rem; }
.reading-list { padding: .8rem 0; border-bottom: 1px solid #ddd; }
@media (max-width: 700px) { .reading-features, .reading-columns { grid-template-columns: 1fr; } }
.problem-filters { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.problem-filters { align-items: flex-start; }
.problem-category-picker { flex: 1 1 24rem; min-width: 0; }
.problem-category-picker > summary { cursor: pointer; font: .85rem/1.8 var(--mono); }
.problem-category-tree { margin-top: .6rem; }
.problem-category-tree button { white-space: nowrap; margin-bottom: .2rem; }
.problem-category-tree button[aria-pressed="true"] { background: var(--ink); color: white; }
.problem-category-node > button { border-color: transparent; text-align: left; }
.problem-category-tree .directory-root-list { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.problem-filters label { font: .8rem var(--mono); }
.problem-filters select { max-width: min(100%, 24rem); margin-left: .3rem; }
.problem-filters button, .calendar-toolbar button { background: white; color: var(--ink); border: 1px solid var(--line); padding: .3rem .65rem; font: .8rem/1.6 var(--mono); }
.problem-entry { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.problem-entry h3 { margin: .5rem 0; }
.problem-entry > .entry-tags { margin-bottom: 1rem; }
.problem-meta, .problem-source, #problem-status, .calendar-hint { color: var(--muted); font: .78rem/1.8 var(--mono); }
.problem-answer { margin: 1rem 0; padding: .7rem 0; }
.problem-answer summary { cursor: pointer; font: .85rem/1.8 var(--mono); }
.problem-discussion { margin-top: 2rem; padding: 1rem 0; }
.problem-discussion summary { color: var(--ink); font-size: .9rem; }
.problem-solution { margin-top: 1rem; border-left: 2px solid var(--line); padding-left: 1rem; }
.problem-calendar { margin-top: 3rem; max-width: 660px; }
.calendar-toolbar { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .35rem; }
.calendar-weekdays span { text-align: center; font: .8rem/2 var(--mono); }
.calendar-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 60px; padding: .35rem; background: white; color: var(--muted); border: 1px solid #eee; font: .85rem var(--mono); }
.calendar-day small { font-size: .65rem; }
.calendar-day.has-problems { color: var(--ink); border-color: #aaa; }
.calendar-day[aria-pressed="true"] { background: var(--ink); color: white; }
.calendar-day[aria-current="date"] { outline: 1px solid var(--ink); outline-offset: 2px; }
.calendar-day:disabled { opacity: .35; }
.problem-day[hidden], .problem-entry[hidden], #problem-empty[hidden], .problem-initial-empty[hidden] { display: none !important; }
@media (max-width: 600px) { .problem-category-picker { flex: initial; } .problem-filters { align-items: stretch; flex-direction: column; } .problem-filters label { display: flex; align-items: center; } .problem-filters select { flex: 1; min-width: 0; } .calendar-day { min-height: 48px; } }