:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #101012; color: #faf8f9; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 81% 19%, #32161c 0, transparent 40%); }
.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
header { padding-block: 32px; border-bottom: 1px solid #ffffff1c; }
header img { display: block; max-height: 46px; object-fit: contain; object-position: left; }
.hero { min-height: 490px; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 48px; padding-block: 60px; }
.platform { margin: 0 0 16px; color: #e2b2b6; font-size: .85rem; font-weight: 650; }
h1 { margin: 0; font-size: clamp(3.2rem, 8vw, 7rem); line-height: .94; letter-spacing: -.07em; }
.intro { max-width: 36ch; margin-block: 25px; color: #dfd2d5; font-size: 1.14rem; line-height: 1.55; }
.download { display: inline-flex; align-items: center; gap: 25px; padding: 15px 22px; border-radius: 10px; background: #bd1731; color: #fff; text-decoration: none; font-weight: 750; }
.download:hover { background: #a90e26; }
a:focus-visible { outline: 3px solid #f7d3d9; outline-offset: 5px; }
.file, .note { color: #c5b7bd; font-size: .88rem; }
.art { display: grid; min-height: 330px; place-items: center; border: 1px solid #ffffff1c; border-radius: 22px; background: radial-gradient(ellipse, #4a161e, #171114 75%); }
.art img { width: min(64%, 260px); height: auto; }
.instructions { border-top: 1px solid #ffffff1c; padding-block: 30px; }
h2 { margin: 0 0 12px; font-size: 1.25rem; }
.instructions p { max-width: 72ch; line-height: 1.6; }
footer { padding-block: 21px; border-top: 1px solid #ffffff1c; }
footer a { color: #c5b7bd; text-underline-offset: 4px; }
@media (max-width: 660px) {
  header { padding-block: 22px; }
  .hero { grid-template-columns: 1fr; gap: 28px; padding-block: 40px; }
  .art { min-height: 220px; }
  .art img { width: min(55%, 180px); }
}