:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #0b1020;
  color: #f4f6ff;
}

* { box-sizing: border-box; }
body { margin: 0; line-height: 1.7; }
header, main, footer { width: min(100% - 2.5rem, 44rem); margin-inline: auto; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid #18224a; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 1rem; }
nav [aria-current="page"] { color: #f4f6ff; }
header img { display: block; width: 10rem; height: auto; }
.language-switcher { position: relative; flex-shrink: 0; font-size: 0.875rem; line-height: 1.4; }
.language-switcher summary { display: flex; align-items: center; gap: 0.625rem; min-height: 44px; padding: 0.625rem 0.75rem; border: 1px solid #18224a; border-radius: 0.75rem; color: #f4f6ff; cursor: pointer; list-style: none; }
.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher summary:hover, .language-switcher[open] summary { background: #141b33; }
.language-switcher summary:focus-visible { outline: 3px solid #f4f6ff; outline-offset: 4px; }
.language-icon { color: #5ee6a8; }
.language-chevron { color: #aab3d4; }
.language-switcher[open] .language-chevron { transform: rotate(180deg); }
.language-switcher nav { position: absolute; z-index: 1; top: calc(100% + 0.5rem); right: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; width: min(20rem, calc(100vw - 2.5rem)); padding: 0.5rem; border: 1px solid #18224a; border-radius: 0.75rem; background: #141b33; box-shadow: 0 0.75rem 2rem #0b1020; }
.language-switcher:not([open]) nav { display: none; }
.language-switcher nav a { justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem; color: #f4f6ff; text-decoration: none; }
.language-switcher nav a:hover { background: #18224a; }
.language-switcher nav a[aria-current="page"] { background: #5ee6a8; color: #06251a; font-weight: 700; }
.language-switcher nav a[aria-current="page"]::after { content: "✓"; }
@media (max-width: 30rem) {
  header { gap: 0.5rem; padding-block: 1rem; }
  header img { width: 7.5rem; }
}
main { padding-block: 1.5rem 3rem; }
h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.2; margin-block: 0 1.5rem; }
h2 { font-size: 1.4rem; line-height: 1.3; margin-top: 2.25rem; }
p, li { max-width: 65ch; }
li + li { margin-top: 0.75rem; }
ol, ul { padding-left: 1.5rem; }
a { color: #5ee6a8; text-underline-offset: 0.2em; }
a:focus-visible { outline: 3px solid #f4f6ff; outline-offset: 4px; }
header a, footer a { display: inline-flex; align-items: center; min-height: 44px; }
.intro { color: #aab3d4; font-size: 1.15rem; }
.play { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.65rem 1.5rem; border-radius: 0.75rem; background: #5ee6a8; color: #06251a; font-weight: 700; text-decoration: none; }
footer { padding-block: 1.25rem; border-top: 1px solid #18224a; color: #aab3d4; font-size: 0.875rem; }
footer p { margin-block: 0.5rem; }
footer a { justify-content: center; min-width: 44px; color: inherit; text-decoration: none; }
footer a:hover, footer a:focus-visible { text-decoration: underline; }
.info-page h2 { font-size: 1.15rem; margin-top: 1.75rem; }
.info-page .intro { margin-top: -0.5rem; }
.info-page address { color: #aab3d4; font-style: normal; }
.info-page .updated { margin-block: 1.75rem; color: #aab3d4; font-size: 0.8rem; }
.info-page .play { margin-top: 1rem; }
.contact-email { overflow-wrap: anywhere; }