:root {
  color-scheme: dark;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color: #ffffff;
  background: #142a40;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  --muted-light: #becbd5;
  --paper: #f7f8f5;
  --ink: #142a40;
  --slate: #526371;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
.wrap { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 40px; }
.brand { display: inline-flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; font-size: 23px; font-weight: 650; letter-spacing: -.5px; }
.brand img { display: block; border-radius: 12px; }
.brand:focus-visible { outline: 3px solid #9be4eb; outline-offset: 8px; border-radius: 4px; }
.launch-status { display: inline-flex; align-items: center; gap: 10px; color: #ead399; font-size: 15px; font-weight: 500; white-space: nowrap; }
.launch-status > span { width: 7px; height: 7px; background: #deb958; border-radius: 50%; }
.hero { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(340px, 1fr); align-items: center; gap: clamp(40px, 6vw, 96px); padding-block: 64px 80px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(42px, 4.8vw, 66px); font-weight: 600; line-height: 1.12; letter-spacing: -2.7px; }
.lead { margin-top: 29px; max-width: 28ch; font-size: 23px; line-height: 1.48; color: #e0eaf1; }
.description { margin-top: 23px; max-width: 44ch; font-size: 17px; line-height: 1.75; color: var(--muted-light); }
.release-note { margin-top: 28px; max-width: 42ch; font-size: 13px; line-height: 1.65; color: var(--muted-light); }
.availability { color-scheme: light; color: var(--ink); background: var(--paper); border-radius: 20px; padding: 34px 34px 25px; }
.availability-heading h2 { font-size: 28px; line-height: 1.28; font-weight: 600; letter-spacing: -.8px; }
.availability-heading p { margin-top: 13px; font-size: 15px; line-height: 1.6; color: var(--slate); }
.platform-list { list-style: none; margin: 27px 0 0; padding: 0; }
.platform-list li { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-block: 19px; border-top: 1px solid #d6dde0; }
.platform-list svg { width: 29px; height: 29px; color: #2c5369; }
.platform-name { font-size: 18px; font-weight: 600; }
.platform-status { font-size: 13px; color: #526371; white-space: nowrap; }
.availability-note { margin-top: 4px; padding-top: 17px; border-top: 1px solid #d6dde0; font-size: 12px; line-height: 1.65; color: var(--slate); }
.resource-note { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; border-top: 1px solid #395065; padding-block: 30px; }
.resource-note h2 { font-size: 19px; font-weight: 550; line-height: 1.5; letter-spacing: -.2px; }
.resource-note p { max-width: 54ch; color: var(--muted-light); font-size: 15px; line-height: 1.7; }
.site-footer { display: flex; justify-content: space-between; gap: 24px; padding-block: 30px 36px; color: #b0c1ce; font-size: 12px; line-height: 1.6; }

@media (min-width: 1450px) {
  .site-header { padding-top: 54px; }
  .hero { padding-block: 90px 110px; }
}
@media (max-width: 860px) {
  .wrap { width: calc(100% - 56px); max-width: 600px; }
  .site-header { padding-block: 26px; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 38px 48px; }
  h1 { font-size: clamp(42px, 8vw, 60px); letter-spacing: -2px; }
  .lead { max-width: 32ch; font-size: 21px; }
  .description { max-width: 50ch; }
  .resource-note { grid-template-columns: 1fr; gap: 12px; padding-block: 28px; }
  .site-footer { flex-direction: column; gap: 7px; padding-block: 20px 30px; }
}
@media (max-width: 420px) {
  .wrap { width: calc(100% - 40px); }
  .brand { gap: 9px; font-size: 19px; }
  .brand img { width: 38px; height: 38px; border-radius: 9px; }
  .launch-status { gap: 6px; font-size: 12px; }
  h1 { font-size: 39px; letter-spacing: -1.7px; }
  .lead { font-size: 20px; }
  .availability { padding: 27px 23px 21px; border-radius: 16px; }
  .availability-heading h2 { font-size: 25px; }
  .platform-list li { gap: 11px; grid-template-columns: 28px minmax(0, 1fr) auto; }
  .platform-name { font-size: 17px; }
  .platform-status { font-size: 12px; }
}
@media (max-width: 320px) {
  .site-header { align-items: flex-start; flex-direction: column; gap: 16px; }
  h1 { font-size: 34px; }
  .platform-list li { grid-template-columns: 28px 1fr; }
  .platform-status { grid-column: 2; }
}
@media print {
  :root { color-scheme: light; background: #ffffff; color: #142a40; }
  .wrap { width: 100%; }
  .hero { padding-block: 24px; gap: 30px; }
  .lead, .description, .release-note, .resource-note p, .site-footer { color: #526371; }
  .launch-status { color: #526371; }
  .availability { break-inside: avoid; border: 1px solid #d6dde0; }
}