:root {
  color-scheme: light;
  --page: #fff;
  --ink: #242527;
  --muted: #686b71;
  --line: #e5e6e8;
  --blue: #4e57ae;
  --teal: #087b70;
  --berry: #85517d;
  --amber: #95621b;
  --surface: #f7f7f8;
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  color: var(--ink);
  background: var(--page);
  line-height: 1.55;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; }
button, input { font: inherit; }
a { color: inherit; text-underline-offset: 4px; }
button, summary { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #205baf; outline-offset: 4px; }
.shell { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 32px; min-height: 76px; border-bottom: 1px solid var(--line); background: var(--page); box-shadow: 0 0 0 1px var(--page); }
.brand { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 800; text-decoration: none; letter-spacing: -.7px; }
.brand-logo { width: 32px; height: 32px; }
.brand-accent { color: var(--teal); }
nav { display: flex; gap: 25px; margin-left: auto; }
nav a { font-size: 13px; text-decoration: none; color: var(--muted); padding-block: 12px; border-bottom: 2px solid transparent; }
nav a[aria-current="location"] { color: var(--ink); border-bottom-color: var(--teal); }
nav a:hover, .language:hover { color: var(--blue); }
.top-actions { display: flex; align-items: center; gap: 2px; }
.language { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 6px; text-decoration: none; font-size: 12px; font-weight: 550; }
.repo-link { display: inline-flex; align-items: center; gap: 5px; height: 44px; margin-left: 7px; padding: 0 9px; border: 0; border-radius: 6px; font-size: 12px; text-decoration: none; font-weight: 550; }
.repo-link span { color: var(--muted); font-size: 12px; }
.repo-link:hover, .language:hover { background: var(--surface); }
.hero { padding-block: 30px 24px; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
.eyebrow { margin: 0 0 8px; font-size: 12px; color: var(--teal); }
.eyebrow i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--teal); }
h1 { grid-column: 1; margin: 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 650; line-height: 1.2; letter-spacing: -1.6px; }
.lede { grid-column: 1; margin: 12px 0 0; font-size: 14px; color: var(--muted); max-width: 65ch; }
.hero-actions { grid-column: 2; grid-row: 2 / 4; align-self: center; display: flex; gap: 10px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 14px; font-size: 13px; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; font-weight: 650; }
.button.primary { color: #fff; background: #242527; border-color: #242527; }
.button.primary:hover { background: #43464b; }
.button.quiet:hover { background: var(--surface); }
.stats { display: grid; grid-template-columns: 1fr 1fr 1fr 1.1fr; padding-block: 18px; background: #fafafa; border: 0; border-radius: 8px; }
.stats > div { padding-inline: 24px; border-right: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.stats > div:last-child { border: 0; }
.stats strong { font-size: 23px; line-height: 1.2; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.stats span, .stats small { color: var(--muted); font-size: 11px; }
.stats .stats-note { display: block; font-size: 12px; }
.site-visits { display: flex; width: fit-content; max-width: 100%; margin-top: 8px; text-decoration: none; }
.site-visits img { display: block; max-width: 100%; height: 20px; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); margin-right: 6px; }
.brief { display: flex; gap: 20px; padding-block: 17px 0; font-size: 12px; }
.brief-kicker { width: fit-content; flex-shrink: 0; align-self: flex-start; color: #17685c; background: #e5f1ed; border-radius: 5px; padding: 3px 8px; font-size: 11px; font-weight: 650; }
.brief-kicker span { margin-inline: 5px; }
.brief p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.brief a { color: var(--ink); }
.section, .papers-section { padding-top: 36px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
h2 { margin: 0; font-size: 25px; line-height: 1.25; font-weight: 650; letter-spacing: -.7px; }
.section-intro { margin: 0; font-size: 12px; color: var(--muted); max-width: 54ch; }
.papers-section > .shell { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 24px 12px; }
.papers-section .section-heading { display: block; margin: 0; }
.papers-section .section-intro { margin-top: 14px; max-width: 24ch; line-height: 1.8; }
.papers-status { grid-column: 2; margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.papers-section .section-heading { grid-row: 1 / span 2; }
.papers-list { grid-column: 2; }
.papers-more { grid-column: 2; justify-self: start; border: 0; background: transparent; color: var(--blue); padding: 10px 0 0; font-size: 12px; font-weight: 650; min-height: 44px; }
.papers-more:hover { text-decoration: underline; }

.papers-section h2 { color: var(--ink); }
.papers-section .section-intro, .papers-section .empty { color: var(--muted); }
.papers-section :focus-visible { outline-color: var(--blue); }
.papers-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.paper { padding: 14px 0; border-top: 1px solid var(--line); min-width: 0; }
.paper:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.paper-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.paper-label { color: #68638a; font-weight: 550; }
.paper a { display: block; font-size: 15px; font-weight: 600; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.paper a:hover { color: var(--blue); text-decoration: underline; }
.paper p { margin: 6px 0 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.paper details { margin-top: 7px; font-size: 12px; color: var(--blue); }
.paper details p { font-size: 13px; line-height: 1.7; padding: 12px 14px; background: #f6f5fa; border-radius: 7px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 16px; }
.search { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; max-width: 350px; border: 1px solid #bacbd6; border-radius: 7px; padding: 10px 12px; background: var(--page); }
.search:focus-within { border-color: var(--blue); outline: 2px solid #c8dcf5; }
.search span { font-size: 20px; line-height: 1; color: var(--muted); }
.search input { width: 100%; min-width: 0; border: 0; outline: 0; font-size: 14px; background: transparent; color: var(--ink); }
.filters { display: flex; gap: 5px; flex-wrap: wrap; }
.filter { border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); padding: 8px 9px; font-size: 12px; }
.filter span { margin-left: 4px; font-size: 10px; }
.filter:hover { background: var(--surface); }
.filter.active { background: #eaf1fa; color: #164d94; border-color: #c6d8ee; font-weight: 700; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.project-card { --category: var(--teal); --tint: #eaf6f3; min-width: 0; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--page); }
.project-card[data-category="official"] { --category: #205baf; --tint: #edf3fc; }
.project-card[data-category="research"] { --category: #85517d; --tint: #f7eff6; }
.project-card[data-category="tools"] { --category: #087b70; --tint: #eaf6f3; }
.project-card[data-category="resources"] { --category: #95621b; --tint: #fcf4e6; }
.project-card:hover { border-color: #a8afb8; background: #fafbfc; }
.project-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.category { color: var(--category); background: var(--tint); border-radius: 4px; padding: 3px 7px; font-size: 11px; font-weight: 650; }
.stars { font-size: 12px; white-space: nowrap; color: #765721; font-variant-numeric: tabular-nums; }
.card-title { margin-top: 13px; }
.repo-owner { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-bottom: 3px; }
.card-title a { font-size: 18px; font-weight: 650; text-decoration: none; overflow-wrap: anywhere; line-height: 1.4; }
.card-title a:hover { color: var(--blue); text-decoration: underline; }
.description { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 9px 0 16px; overflow-wrap: anywhere; }
.card-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid #edf1f4; font-size: 11px; color: var(--muted); }
.result-count { font-size: 12px; color: var(--muted); margin: 12px 0; }
.load-more { display: block; margin: 18px auto 0; padding: 10px 22px; font-size: 13px; border: 1px solid #bacbd6; border-radius: 7px; background: var(--page); color: var(--ink); }
.load-more:hover { background: var(--surface); }
.radar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.radar-card { min-width: 0; padding: 18px; border-radius: 12px; border: 1px solid var(--line); background: #fafbfa; }
.radar-card:nth-child(2) { border-color: var(--line); background: #fcfaf9; }
.radar-card:nth-child(3) { border-color: var(--line); background: #fcfbf7; }
.radar-card h3 { font-size: 16px; margin: 0; }
.radar-card > p { font-size: 11px; margin: 6px 0 12px; color: var(--muted); }
.radar-card a { display: block; font-size: 13px; text-decoration: none; padding-block: 10px; border-top: 1px solid #d3ddd9; overflow-wrap: anywhere; }
.radar-card a:hover { text-decoration: underline; }
.resources-section { padding-bottom: 36px; }
.resources-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.resource { display: flex; align-items: center; gap: 15px; padding-block: 16px; border-top: 1px solid var(--line); min-width: 0; }
.resource > div { min-width: 0; }
.resource a { font-size: 14px; font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.resource a:hover { color: var(--blue); text-decoration: underline; }
.resource p { margin: 6px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.resource-arrow { margin-left: auto; color: var(--muted); }
.text-link { font-size: 12px; color: var(--blue); }
.empty { grid-column: 1 / -1; padding: 20px 0; color: var(--muted); font-size: 14px; }
.footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-block: 22px; font-size: 11px; color: var(--muted); }
@media (max-width: 1000px) {
  html { scroll-padding-top: 130px; }
  .topbar { flex-wrap: wrap; gap: 0 20px; padding-top: 16px; }
  .top-actions { margin-left: auto; }
  nav { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; gap: 24px; }
  .hero-copy { display: block; }
  .hero-actions { margin-top: 18px; }
  .stats > div { flex-direction: column; gap: 3px; padding-inline: 16px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .shell { width: calc(100% - 32px); }
  .brand { font-size: 20px; }.brand-logo { width: 28px; height: 28px; }
  .top-actions { gap: 2px; }
  nav { justify-content: space-between; gap: 8px; }
  nav a { font-size: 12px; }
  .hero { padding-block: 22px; }
  h1 { font-size: 30px; letter-spacing: -.8px; }
  .lede { font-size: 13px; }
  .hero-actions { margin-top: 16px; }
  .button { min-height: 44px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 0; }
  .stats > div { padding: 12px 16px; }
  .stats > div:nth-child(2) { border-right: 0; }
  .stats strong { font-size: 23px; }
  .brief { display: block; padding-top: 14px; }
  .brief p { margin-top: 6px; line-height: 1.7; }
  .section, .papers-section { padding-top: 28px; }
  .section-heading { display: block; margin-bottom: 16px; }
  h2 { font-size: 23px; }
  .section-intro, .section-heading > .text-link { display: block; margin-top: 8px; }
  .papers-section > .shell { display: block; padding: 22px 0 12px; }
  .papers-section .section-heading { margin-bottom: 18px; }
  .papers-section .section-intro { max-width: none; margin-top: 8px; }
  .paper:nth-child(2) { border-top: 1px solid var(--line); padding-top: 13px; }
  .papers-list, .project-grid, .radar-grid, .resources-list { grid-template-columns: minmax(0, 1fr); }
  .paper { padding-block: 13px; }
  .paper a { font-size: 14px; }
  .paper summary { padding-block: 6px; }
  .paper p { font-size: 12px; }
  .toolbar { gap: 10px; }
  .search { flex-basis: 100%; max-width: none; min-height: 44px; }
  .search input { font-size: 16px; }
  .filter { padding: 10px 8px; min-height: 44px; }
  .project-card { padding: 16px; }
  .footer { display: block; font-size: 11px; }
  .footer > span { display: block; margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The two themes share layout and category meanings. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 13px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; }
.theme-toggle:hover { background: var(--surface); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] { color-scheme: dark; --page: #181a1e; --ink: #eaebee; --muted: #a8adb7; --line: #343840; --surface: #25282e; --blue: #aab3ff; --teal: #7dd6c5; --berry: #d4abd0; --amber: #e3c18a; }
[data-theme="dark"] .theme-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
[data-theme="dark"] :focus-visible { outline-color: var(--blue); }
[data-theme="dark"] .stats { background: #202328; }
[data-theme="dark"] .button.primary { color: #202328; background: #e5e7ec; border-color: #e5e7ec; }
[data-theme="dark"] .button.primary:hover { background: #fff; }
[data-theme="dark"] .brief-kicker { color: #9addcd; background: #243b36; }
[data-theme="dark"] .paper-label { color: #c0b4e3; }
[data-theme="dark"] .paper details p { background: #282733; }
[data-theme="dark"] .search, [data-theme="dark"] .load-more { border-color: #525964; }
[data-theme="dark"] .search:focus-within { outline-color: #4a5384; }
[data-theme="dark"] input::placeholder { color: var(--muted); }
[data-theme="dark"] .filter.active { color: #c5d9ff; border-color: #4e6485; background: #29374b; }
[data-theme="dark"] .project-card { background: #202328; --category: #8fdbcb; --tint: #273c37; }
[data-theme="dark"] .project-card[data-category="official"] { --category: #b3cdff; --tint: #2a374d; }
[data-theme="dark"] .project-card[data-category="research"] { --category: #e0b5d9; --tint: #3d2d3c; }
[data-theme="dark"] .project-card[data-category="tools"] { --category: #8fdbcb; --tint: #273c37; }
[data-theme="dark"] .project-card[data-category="resources"] { --category: #e7c58f; --tint: #3c3427; }
[data-theme="dark"] .project-card:hover { background: #262a30; border-color: #666e7b; }
[data-theme="dark"] .stars { color: #e3c18a; }
[data-theme="dark"] .card-foot, [data-theme="dark"] .radar-card a { border-color: var(--line); }
[data-theme="dark"] .radar-card { background: #202724; }
[data-theme="dark"] .radar-card:nth-child(2) { background: #292422; }
[data-theme="dark"] .radar-card:nth-child(3) { background: #28271f; }

.brief { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; align-items: start; gap: 12px 20px; }
.brief > #brief-text { padding-top: 3px; }
.brief-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -8px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); }
.brief-toggle:hover { color: var(--ink); background: var(--surface); }
.brief-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brief-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.brief-projects { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; padding: 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.brief-project { min-width: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.brief-project:nth-child(-n+2) { border-top: 0; }
.brief-project > div { display: flex; justify-content: space-between; gap: 12px; }
.brief-project a { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.brief-project p { margin-top: 6px; font-size: 12px; line-height: 1.7; }
@media (max-width: 600px) {
  .brief { grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; }
  .brief-toggle { grid-column: 2; grid-row: 1; }
  .brief > #brief-text { grid-column: 1 / -1; margin-top: 0; }
  .brief-projects { grid-template-columns: minmax(0, 1fr); }
  .brief-project:nth-child(2) { border-top: 1px solid var(--line); }
}

#show-all-projects { border-color: transparent; margin-top: 4px; color: var(--blue); }
.radar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.radar-entry p { margin: -4px 0 10px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.radar-more summary { padding-block: 12px; color: var(--blue); font-size: 12px; }
.retry-data { padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
@media (max-width: 600px) { .radar-grid { grid-template-columns: minmax(0, 1fr); } }
