:root {
  color-scheme: light;
  color: #172033;
  background: #f4f7fb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; overflow-x: clip; }
a { color: #2458a6; }
a:focus-visible { border-radius: .25rem; outline: 3px solid #73a7f2; outline-offset: 3px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 30;
  padding: .65rem .9rem;
  border-radius: .5rem;
  color: #172033;
  background: #fff;
}

.skip-link:focus { top: .5rem; }

.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(220, 227, 238, .55);
  color: #fff;
  background: rgba(17, 26, 44, .92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.app-bar-inner,
main,
footer {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
}

.app-bar-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 4.25rem;
  align-items: center;
  gap: 1rem;
}

.app-bar-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.app-bar-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  border-radius: .6rem;
  color: #111a2c;
  background: #9fc3f7;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .24);
}

.app-bar-sections {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-width: 0;
  overflow: hidden;
  font-size: .92rem;
}

.app-bar-sections a {
  color: #d8e5f7;
  text-decoration: none;
  white-space: nowrap;
}

.app-bar-sections a:hover { color: #fff; }

.app-bar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  min-width: 0;
}

.app-bar-github {
  padding: .38rem .58rem;
  border-radius: .65rem;
  color: #d8e5f7;
  font-size: .82rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.app-bar-github:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.app-bar-languages {
  display: inline-flex;
  padding: .2rem;
  border: 1px solid rgba(216, 229, 247, .45);
  border-radius: 99rem;
  background: rgba(255, 255, 255, .08);
}

.app-bar-languages a {
  padding: .26rem .6rem;
  border-radius: 99rem;
  color: #d8e5f7;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.app-bar-languages a:hover,
.app-bar-languages a[aria-current="page"] { color: #111a2c; background: #d8e5f7; }

.hero { padding: 5rem 0 3rem; }
.eyebrow { color: #2e65b0; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { max-width: 18ch; margin: .3rem 0 1.2rem; font-size: clamp(2.3rem, 7vw, 4.8rem); line-height: 1.04; }
.lead { max-width: 48rem; color: #46536a; font-size: 1.2rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.card, .section {
  border: 1px solid #dce3ee;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 .6rem 1.8rem rgba(28, 43, 69, .07);
}
.card { padding: 1.4rem; }
.section { margin: 1.2rem 0; padding: clamp(1.3rem, 4vw, 2.4rem); }
.section h2, .card h2, .card h3 { margin-top: 0; }

pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: .7rem;
  color: #e7eefc;
  background: #172033;
}

.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; color: #234f8d; background: #e5eefc; font-weight: 700; }
footer { padding: 2rem 0 3rem; color: #5a6679; }

@media (max-width: 56rem) {
  .app-bar-sections { display: none; }
}

@media (max-width: 40rem) {
  .app-bar-inner,
  main,
  footer {
    width: min(100% - 1.2rem, 72rem);
  }

  .app-bar-inner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .5rem;
  }

  .app-bar-label { display: none; }

  .app-bar-actions { grid-column: 2; }

  .app-bar-languages a {
    padding-inline: .5rem;
    font-size: .78rem;
  }

  .hero { padding-top: 3rem; }
}