:root {
  color-scheme: dark;
  background: #11131a;
  color: #eceef5;
  font: 16px/1.65 Inter, system-ui, sans-serif;
}
body { margin: 0; }
.wrap { max-width: 900px; margin: auto; padding: 48px 22px 80px; }
a { color: #9bc1ff; text-underline-offset: 4px; }
h1 { font-size: clamp(2rem, 6vw, 2.55rem); line-height: 1.15; }
h2 { margin-top: 2rem; font-size: 1.25rem; }
.sub, .muted { color: #a6adbd; }
.nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid #2b3040;
}
.nav a:not([aria-current="page"]) { text-decoration: none; }
.nav a:hover, .nav a:focus-visible { text-decoration: underline; }
.nav a[aria-current="page"] { text-decoration: underline; }
.langs {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.langs button {
  min-width: 42px;
  padding: 7px 10px;
  border: 1px solid #343a4d;
  border-radius: 8px;
  background: #181b24;
  color: #c7ccda;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.langs button[aria-pressed="true"] {
  border-color: #8ab6ff;
  background: #25324a;
  color: #fff;
}
.langs button:focus-visible { outline: 2px solid #9bc1ff; outline-offset: 2px; }
.box {
  padding: 18px;
  border: 1px solid #343a4d;
  border-radius: 12px;
  background: #181b24;
}
li { margin: .45rem 0; }
[data-lang] { display: none; }
[data-lang].active { display: block; }
@media (max-width: 680px) {
  .wrap { padding-top: 26px; }
  .langs { width: 100%; margin-left: 0; }
}