:root {
  color-scheme: dark;
  --bg: #16131f;
  --paper: #f8f5ff;
  --muted: #c4bcd2;
  --lime: #d9ff55;
  --violet: #c8a7ff;
  --edge: #3c344a;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--paper);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.shell { width: min(calc(100% - 5rem), 1232px); margin-inline: auto; }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; top: 1rem; left: 1rem; z-index: 5; padding: .75rem; background: var(--bg); }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--edge); }
.wordmark, .nav-actions { display: flex; align-items: center; gap: .75rem; }
.wordmark { font-size: .93rem; font-weight: 850; letter-spacing: .075em; white-space: nowrap; }
.wordmark svg { width: 36px; height: 36px; }
.dot { color: var(--lime); }
.nav-actions { gap: 1.55rem; font-size: .9rem; }
.nav-link:hover, .footer a:hover { color: var(--lime); }
.language { position: relative; z-index: 2; }
.language summary { display: flex; gap: .6rem; align-items: center; cursor: pointer; list-style: none; border: 1px solid var(--edge); padding: .65rem .85rem; border-radius: .35rem; }
.language summary::-webkit-details-marker { display: none; }
.language ul { position: absolute; right: 0; top: 100%; min-width: 9.75rem; padding: .3rem; margin: .4rem 0 0; list-style: none; background: #251d35; border: 1px solid var(--edge); border-radius: .35rem; }
.language a { display: block; padding: .6rem .8rem; border-radius: .2rem; }
.language a:hover, .language a[aria-current] { color: var(--lime); background: #342944; }
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(2.5rem, 5vw, 4.7rem); }
.kicker, .hero-image figcaption, .index, .footer { font: 650 .72rem/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .11em; }
.kicker { color: var(--violet); display: flex; align-items: center; gap: .62rem; margin: 0 0 1.15rem; }
.status { display: inline-block; width: .5rem; height: .5rem; background: var(--lime); border-radius: 50%; flex: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.1rem, 6.9vw, 6.6rem); letter-spacing: -.086em; line-height: .92; margin-bottom: 1.55rem; font-weight: 840; }
h1 em { color: var(--violet); font-style: normal; }
.intro { max-width: 34rem; font-size: clamp(1.025rem, 1.45vw, 1.22rem); line-height: 1.6; color: var(--muted); margin-bottom: 1.7rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: .85rem; padding: .88rem 1.12rem; border: 1px solid transparent; border-radius: .36rem; font-size: .91rem; font-weight: 750; min-height: 46px; }
.button span { font-size: 1.08em; flex: none; }
.button-lime { background: var(--lime); color: #15121d; }
.button-lime:hover { background: #efffbc; }
.button-outline { border-color: #554966; }
.button-outline:hover { border-color: var(--violet); color: var(--violet); }
.hero-image { margin: 0; background: #553378; border: 1px solid #675185; border-radius: .65rem; overflow: hidden; position: relative; }
.hero-image img { width: 100%; height: auto; aspect-ratio: 1; display: block; object-fit: cover; }
.hero-image figcaption { background: #21182d; color: #e4d5f5; display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; font-size: .64rem; }
.directory { background: #211a2c; border-block: 1px solid var(--edge); }
.directory-inner { padding-block: clamp(2.6rem, 5.5vw, 5.3rem); }
.directory-heading { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 2rem; margin-bottom: 1.8rem; }
h2 { font-size: clamp(2rem, 4.3vw, 4rem); line-height: 1.02; letter-spacing: -.065em; margin-bottom: 0; }
.directory-heading > p { color: var(--muted); line-height: 1.55; max-width: 29rem; margin-bottom: .15rem; }
.picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; padding: 1rem; margin-bottom: 1rem; border: 1px solid #564666; border-radius: .55rem; background: #2b2139; }
.picker label { display: block; margin-bottom: .45rem; color: var(--paper); font-size: .88rem; font-weight: 650; }
.picker select { min-height: 46px; width: 100%; padding: .45rem .7rem; background: var(--bg); color: var(--paper); border: 1px solid #6e5c82; border-radius: .35rem; font: inherit; }
.categories { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.categories li { display: flex; }
.category { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .9rem; padding: 1rem; border: 1px solid var(--edge); border-radius: .35rem; background: #241c31; }
.category:hover { border-color: #9d7bc8; background: #30233f; }
.category h3 { font-size: 1rem; margin: 0 0 .18rem; overflow-wrap: anywhere; }
.category p { font-size: .87rem; line-height: 1.5; color: var(--muted); margin-bottom: 0; }
.category > span { color: var(--violet); }
.index { margin-top: .2rem; }
.closing { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; padding-block: 3.5rem; }
.closing h2 { max-width: 40rem; }
.closing .button { flex-shrink: 0; }
.footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.35rem; color: var(--muted); border-top: 1px solid var(--edge); }
@media (max-width: 850px) {
  .shell { width: calc(100% - 3rem); }
  .hero { gap: 1.45rem; }
  h1 { font-size: clamp(2.7rem, 7vw, 5rem); }
}
@media (max-width: 650px) {
  .shell { width: calc(100% - 2rem); }
  .nav-link { display: none; }
  .hero, .directory-heading, .categories { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 1.55rem; }
  h1 { font-size: clamp(2.75rem, 12.4vw, 4.85rem); }
  .directory-heading { gap: .75rem; }
  .closing { flex-wrap: wrap; align-items: start; padding-block: 2.5rem; }
  .closing .button { flex-shrink: 1; }
}
@media (max-width: 425px) {
  .picker { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .wordmark { font-size: .83rem; }
  .wordmark svg { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}