:root {
  --topic-red-soft: #F8E9E7;
  --topic-red-ink: #9E1B20;
  --topic-warning-bg: #F6EDD9;
  --topic-warning-ink: #704300;
  --topic-success-bg: #E5F1EB;
  --topic-success-ink: #176747;
  --topic-info-bg: #E7EDF3;
  --topic-info-ink: #345978;
  --topic-neutral-bg: #EDEAF0;
  --topic-neutral-ink: #5D5862;
  --topic-cover-stage: #EBE7DF;
  --topic-cover-lettering: #28444E;
  --topic-card-tint: #F7F4F0;
  --topic-link-ink: #7D171B;
}
:root[data-theme="dark"] {
  --topic-red-soft: #382728; --topic-red-ink: #FF8D89;
  --topic-warning-bg: #352D1D; --topic-warning-ink: #E8C584;
  --topic-success-bg: #1D3A31; --topic-success-ink: #8FC7AD;
  --topic-info-bg: #24313E; --topic-info-ink: #ADC9E3;
  --topic-neutral-bg: #302C37; --topic-neutral-ink: #C8BDD3;
  --topic-cover-stage: #313431;
  --topic-cover-lettering: #2D4C55;
  --topic-card-tint: #252429;
  --topic-link-ink: #FF9A95;
}
.topic-hero { position: relative; isolation: isolate; padding-block: var(--s12) var(--s8); }
.topic-hero h1 { max-width: 18ch; }
.topic-inkblot { position: absolute; z-index: -1; right: 10%; top: -.5rem; width: min(50%, 31rem); height: 23rem; object-fit: contain; opacity: .09; filter: grayscale(1); pointer-events: none; }
.topic-scope p, .topic-lede p { max-width: 66ch; color: var(--muted); font-size: 1.1rem; }
.topic-hero-label { font-size: .75em; font-variant: small-caps; font-weight: 700; letter-spacing: .04em; }
.topic-reviewed { color: var(--muted); font-size: .875rem; border-top: 1px solid var(--line); padding-top: var(--s3); }
.topic-block { padding-block: var(--s8); border-top: 1px solid var(--line); scroll-margin-top: 6.5rem; }
.topic-block > h2 { margin-bottom: var(--s5); }
.topic-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.topic-route, .topic-finding { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s5); }
.topic-finding { border-inline-start: 4px solid var(--topic-neutral-ink); }
.topic-finding-hold { border-inline-start-color: var(--topic-success-ink); }
.topic-finding-cont { border-inline-start-color: var(--topic-warning-ink); }
.topic-finding-re { border-inline-start-color: var(--topic-info-ink); }
.topic-finding-no { border-inline-start-color: var(--topic-neutral-ink); }
.topic-route h3, .topic-finding h3, .topic-books h3, .topic-courses h3 { margin: var(--s3) 0; font-size: 1.35rem; }
.topic-route-kind { color: var(--topic-red-ink); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.topic-route-resource { margin-top: var(--s4); }
.topic-cover { width: 5rem; aspect-ratio: 2 / 3; margin: var(--s3) 0; background: var(--topic-cover-stage); border: 1px solid var(--line); border-radius: var(--r1); display: grid; place-items: center; overflow: hidden; }
.topic-cover img { width: 100%; height: 100%; object-fit: cover; }
.topic-cover--lettering { padding: .35rem; background: var(--topic-cover-lettering); }
.topic-cover--lettering img { height: auto; object-fit: contain; }
.topic-cover--empty { padding: var(--s2); color: var(--muted); font: .7rem/1.3 var(--serif); text-align: center; }
.topic-jump { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--s2); padding: var(--s2); margin-block: var(--s4); border: 1px solid var(--line); border-radius: var(--r2); background: color-mix(in srgb, var(--topic-red-soft) 82%, var(--canvas)); }
.topic-jump > span { padding-inline: var(--s2); color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.topic-jump a { min-width: 0; padding: var(--s2) var(--s3); border-radius: var(--r1); text-decoration: none; font-size: .85rem; }
.topic-jump a[aria-current="true"] { background: var(--canvas); box-shadow: inset 0 -2px var(--topic-red-ink); }
.topic-section { margin-block: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); scroll-margin-top: 7rem; }
.topic-section > summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s3); padding: var(--s4); }
.topic-number { color: var(--topic-red-ink); font-weight: 700; }
.topic-summary { grid-column: 2; color: var(--muted); font-size: .875rem; font-weight: 400; }
.topic-section-body { max-width: 82ch; padding: var(--s5); }
.topic-first-resource { display: flex; align-items: center; gap: var(--s4); margin-block: var(--s4); padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-inline-start: 3px solid var(--topic-red-ink); border-radius: var(--r1); }
.topic-first-resource > div:last-child { min-width: 0; }
.topic-first-why p { margin-block: var(--s2) 0; color: var(--muted); font-size: .9rem; }
.topic-mini-cover { flex: 0 0 3.8rem; min-height: 5.3rem; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s1); padding: var(--s2); color: var(--topic-cover-lettering); background: var(--topic-cover-stage); border: 1px solid var(--line); border-radius: var(--r1); font: .62rem/1.2 var(--serif); }
.topic-mini-cover span { color: var(--muted); font: .5rem/1.2 var(--sans); text-transform: uppercase; }
.topic-resources { padding-left: 1.25rem; }
.topic-resources li { margin-block: var(--s3); }
.topic-resources li p { margin: var(--s1) 0; color: var(--muted); font-size: .9rem; }
.topic-minutes { color: var(--muted); font-size: .8rem; }
.topic-terms { padding: var(--s3) var(--s4); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r1); }
.topic-terms div { padding-block: var(--s2); border-bottom: 1px solid var(--line); }
.topic-terms div:last-child { border: 0; }
.topic-terms dt { font-weight: 700; }
.topic-terms dd { margin: 0; color: var(--muted); }
.topic-practice { padding: var(--s4); border: 1px solid var(--line); background: var(--canvas); border-radius: var(--r1); }
.topic-practice summary { color: var(--topic-red-ink); }
.topic-answer { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.topic-help { padding: var(--s4); background: var(--topic-warning-bg); border-left: 3px solid var(--topic-warning-ink); }
.topic-concept-links { display: flex; flex-wrap: wrap; gap: var(--s3); }
.topic-findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.topic-status, .topic-update-status { display: inline-flex; padding: var(--s1) var(--s2); border-radius: var(--r1); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.topic-status-hold { background: var(--topic-success-bg); color: var(--topic-success-ink); }
.topic-status-cont, .topic-update-contested { background: var(--topic-warning-bg); color: var(--topic-warning-ink); }
.topic-status-re { background: var(--topic-info-bg); color: var(--topic-info-ink); }
.topic-status-no, .topic-status-ref, .topic-update-superseded { background: var(--topic-neutral-bg); color: var(--topic-neutral-ink); }
.topic-update-current { background: var(--topic-success-bg); color: var(--topic-success-ink); }
.topic-update-contested { background: var(--topic-warning-bg); color: var(--topic-warning-ink); }
.topic-update { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s2) var(--s5); padding-block: var(--s5); border-top: 1px solid var(--line); scroll-margin-top: 7rem; }
.topic-update:last-child { border-bottom: 1px solid var(--line); }
.topic-update > *:not(.topic-date) { grid-column: 2; }
.topic-date { grid-row: 1 / span 5; color: var(--muted); font-size: .8rem; }
.topic-update h3 { margin: 0; font-size: 1.35rem; }
.topic-connects, .topic-background, .topic-source { font-size: .875rem; }
.topic-updates-note { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.topic-books, .topic-courses { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.topic-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.topic-books li, .topic-courses li { min-width: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
.topic-legacy-lists { margin-top: var(--s12); padding-top: var(--s8); border-top: 2px solid var(--line); }
.topic-legacy-lists > h2 { margin-bottom: var(--s5); }
.topic-concept-hero { padding-bottom: var(--s5); }
.topic-concept-block { padding-block: var(--s6); border-top: 1px solid var(--line); scroll-margin-top: 7rem; }
.topic-question { border-bottom: 1px solid var(--line); }
.topic-question > summary { padding: var(--s4) 0; }
.topic-question p { color: var(--muted); }
.topic-part-of { padding: var(--s4); background: var(--surface); }
.topic-intro { max-width: 78ch; }
.topic-hero--tinted { padding-inline: var(--s5); background: var(--topic-card-tint); border: 1px solid var(--line); border-radius: var(--r2); }
.topic-intro p { color: var(--muted); }
.topic-subtopics, .topic-related { display: flex; flex-wrap: wrap; gap: var(--s3); }
.topic-subtopic-card { display: flex; flex: 1 1 16rem; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s4); color: inherit; text-decoration: none; background: var(--topic-card-tint); border: 1px solid var(--line); border-radius: var(--r2); }
.topic-subtopic-card strong { color: var(--topic-link-ink); font-size: 1.1rem; }
.topic-subtopic-card span { color: var(--muted); }
.topic-subtopic-card p { margin: 0; }
.topic-subtopic-count, .topic-latest-count { font-size: .8rem; }
.topic-chip { display: inline-flex; max-width: 100%; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: 99rem; color: var(--topic-link-ink); background: var(--surface); }
.topic-latest-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.topic-latest-card { display: grid; gap: var(--s2); min-width: 0; padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); }
.topic-latest-card > a { overflow-wrap: anywhere; font-weight: 700; }
.topic-latest-card p { margin: 0; color: var(--muted); font-size: .875rem; }
.topic-latest-kind { width: fit-content; color: var(--topic-red-ink); font-size: .75rem; font-weight: 700; text-transform: capitalize; }
.topic-latest-cluster { color: var(--topic-info-ink); font-size: .8rem; }
.topic-feed-state, .topic-latest-quiet { color: var(--muted); font-size: .875rem; }
.topic-new-items { margin-block: var(--s3); padding: var(--s2) var(--s3); color: var(--topic-link-ink); background: var(--topic-red-soft); border: 1px solid var(--line); border-radius: var(--r1); cursor: pointer; }
.topic-books .topic-book-cover { float: inline-start; width: 5rem; min-height: 7rem; margin: 0 var(--s3) var(--s2) 0; display: grid; place-items: center; overflow: hidden; color: var(--muted); background: var(--topic-cover-stage); border: 1px solid var(--line); border-radius: var(--r1); }
.topic-book-cover img { width: 100%; height: auto; }
.topic-book-cover > .book-cover { display: block; width: 100%; aspect-ratio: 2 / 3; }
.topic-book-cover > .book-cover img { height: 100%; object-fit: cover; }
.topic-cover--fallback { padding: var(--s2); text-align: center; font: .75rem/1.3 var(--serif); }
.topic-glossary-letter { padding-block: var(--s4); border-top: 1px solid var(--line); scroll-margin-top: 7rem; }
.topic-glossary-entry { padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.topic-glossary-entry dt { font-weight: 700; }
.topic-glossary-entry dd { margin-inline-start: 0; }
.topic-glossary-entry dd > p { margin-block: var(--s2); }
.topic-glossary-aliases, .topic-glossary-in { color: var(--muted); font-size: .85rem; }
.topic-glossary-in a { color: var(--topic-link-ink); }
.topic-glossary-letter dl { margin: 0; }
@media (max-width: 600px) { .topic-latest-items { grid-template-columns: 1fr; } }
@media (max-width: 959px) {
  .topic-routes, .topic-books, .topic-courses { grid-template-columns: 1fr; }
  .topic-jump { overflow-x: auto; justify-content: flex-start; }
  .topic-jump a, .topic-jump > span { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  .topic-inkblot { right: 2%; width: 85%; height: 17rem; opacity: .08; }
  .topic-findings { grid-template-columns: 1fr; }
  .topic-update { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .topic-date { grid-row: auto; }
  .topic-update > *:not(.topic-date) { grid-column: 1; }
  .topic-courses { grid-template-columns: 1fr; }
}