:root {
  color-scheme: dark;
  font: 100%/1.55 "Segoe UI", system-ui, sans-serif;
  color: #f5f5f0;
  background: #0b1813;
}
* { box-sizing: border-box; }
body { margin: 0; padding: clamp(1rem, 4vw, 3rem); }
main { max-width: 60rem; margin-inline: auto; }
.banner { display: block; width: 100%; height: auto; border: 1px solid #8a7749; }
.intro { padding-block: clamp(1.6rem, 4vw, 3rem); }
.platform { color: #f0cc73; font-weight: 600; }
h1 { margin: .15em 0; font-size: clamp(2rem, 6vw, 4rem); line-height: 1.08; }
h2 { margin-top: 0; line-height: 1.2; }
h3 { margin-bottom: .2rem; }
p { margin: .5rem 0 1rem; color: #d9e6de; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); gap: 1rem; }
section { min-width: 0; padding: clamp(1rem, 3vw, 1.65rem); background: #102b20; border: 1px solid #426354; border-radius: .65rem; }
ol { padding-inline-start: 1.4rem; }
li + li { margin-top: .45rem; }
.address { display: block; overflow-wrap: anywhere; background: #092016; color: #ffdc8b; padding: .65rem; border-radius: .3rem; }
a { color: #ffdc8b; text-underline-offset: .25em; }
a:focus-visible { outline: 3px solid #ffdc8b; outline-offset: 4px; }
.download { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }
.skip { position: absolute; top: 1rem; left: 1rem; padding: .5rem; background: #092016; transform: translateY(-200%); }
.skip:focus { transform: none; }