:root {
  color-scheme: dark;
  --ink: #f6f1df;
  --muted: #9da6b8;
  --night: #07090d;
  --panel: #111722;
  --line: #293244;
  --yellow: #ffd62e;
  --blue: #39a9ff;
  --red: #ff3c4f;
  font-family: "Bahnschrift", "DIN Alternate", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--night); color: var(--ink); }
a { color: inherit; }
.halftone { position: fixed; inset: 0; pointer-events: none; opacity: .12; z-index: 10; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px); background-size: 9px 9px; mask-image: linear-gradient(to bottom, #000, transparent 70%); }
.topbar { width: min(1320px, calc(100% - 40px)); height: 88px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.wordmark { display: flex; align-items: center; gap: 13px; text-decoration: none; font-family: Impact, "Bahnschrift Condensed", sans-serif; font-size: 23px; letter-spacing: .055em; transform: skew(-5deg); }
.wordmark > span:last-child span { color: var(--yellow); }
.mark { width: 48px; height: 48px; display: grid; place-items: center; border: 3px solid var(--ink); background: var(--red); color: white; font-size: 16px; box-shadow: 5px 5px 0 var(--yellow); }
.server { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .09em; }
.server i { width: 9px; height: 9px; border-radius: 50%; background: #5ee386; box-shadow: 0 0 14px #5ee386; }
main { width: min(1320px, calc(100% - 40px)); margin: auto; }
.hero { min-height: 680px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; position: relative; }
.hero-copy { min-width: 0; padding: 80px 0 66px; position: relative; z-index: 5; }
.kicker { margin: 0 0 15px; color: var(--yellow); font-size: 12px; font-weight: 900; letter-spacing: .2em; }
h1, h2 { margin: 0; font-family: Impact, "Bahnschrift Condensed", sans-serif; font-weight: 500; text-transform: uppercase; line-height: .94; letter-spacing: .025em; }
h1 { max-width: 780px; font-size: clamp(58px, 7.4vw, 112px); }
h1 em { color: var(--blue); font-style: normal; -webkit-text-stroke: 1px #92d3ff; text-shadow: 5px 5px 0 #123a69; }
.lead { max-width: 650px; margin: 28px 0 36px; color: #bdc4d0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; }
.download-card { max-width: 760px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 18px; border: 1px solid #313d52; background: rgba(17,23,34,.92); box-shadow: 12px 12px 0 rgba(57,169,255,.11); }
.platform-icon { width: 52px; height: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: perspective(80px) rotateY(-7deg); }
.platform-icon span { background: var(--blue); }
.download-copy { min-width: 0; }
.download-copy small, .download-copy span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.download-copy strong { display: block; margin: 4px 0; font-size: 23px; }
.download-button { min-width: 222px; padding: 15px 20px; display: flex; flex-direction: column; align-items: center; border: 0; background: var(--yellow); color: #101318; text-decoration: none; font-weight: 900; text-transform: uppercase; transform: skew(-3deg); transition: transform .15s, box-shadow .15s; }
.download-button:hover { transform: skew(-3deg) translateY(-3px); box-shadow: 7px 7px 0 var(--blue); }
.download-button small { margin-top: 4px; opacity: .7; font-size: 10px; }
.download-button.disabled { opacity: .55; pointer-events: none; }
.checksum { max-width: 750px; margin: 18px 0 0; color: #727d91; font-size: 11px; overflow-wrap: anywhere; }
.checksum code { color: #9da6b8; }
.hero-art { align-self: stretch; position: relative; min-height: 620px; overflow: hidden; }
.moon { position: absolute; width: 390px; height: 390px; top: 80px; right: 8%; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 90px rgba(255,214,46,.18); }
.hero-silhouette { position: absolute; left: 50%; bottom: 85px; width: 210px; height: 420px; transform: translateX(-45%); filter: drop-shadow(18px 10px 0 rgba(255,60,79,.8)); z-index: 3; }
.hero-silhouette .head { position: absolute; left: 72px; top: 0; width: 73px; height: 78px; border-radius: 46% 48% 42% 42%; background: #0a1019; }
.hero-silhouette .body { position: absolute; left: 42px; top: 65px; width: 135px; height: 310px; clip-path: polygon(31% 0,70% 0,100% 22%,80% 48%,72% 100%,52% 100%,47% 58%,38% 100%,17% 100%,13% 46%,0 22%); background: #0a1019; }
.hero-silhouette .cape { position: absolute; left: -15px; top: 64px; width: 210px; height: 265px; clip-path: polygon(43% 0,73% 7%,100% 100%,52% 84%,0 100%,25% 10%); background: #111c2d; z-index: -1; }
.skyline { position: absolute; inset: auto 0 0; background-repeat: repeat-x; }
.skyline-back { height: 210px; opacity: .65; background: linear-gradient(90deg, transparent 0 4%, #17243a 4% 14%, transparent 14% 17%, #17243a 17% 25%, transparent 25% 30%, #17243a 30% 46%, transparent 46% 50%, #17243a 50% 61%, transparent 61% 64%, #17243a 64% 79%, transparent 79% 83%, #17243a 83% 96%, transparent 96%); }
.skyline-front { height: 125px; background: linear-gradient(90deg, #0b111b 0 12%, transparent 12% 14%, #0b111b 14% 29%, transparent 29% 32%, #0b111b 32% 51%, transparent 51% 55%, #0b111b 55% 70%, transparent 70% 74%, #0b111b 74% 100%); }
.issue { position: absolute; right: 4px; bottom: 28px; z-index: 5; padding: 11px 15px; border: 2px solid var(--ink); background: var(--red); color: white; font-size: 10px; letter-spacing: .16em; transform: rotate(-3deg); }
.issue b { font-size: 18px; letter-spacing: .04em; }
.releases { padding: 94px 0; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
h2 { font-size: clamp(40px, 5vw, 72px); }
.section-heading > span { max-width: 360px; color: var(--muted); text-align: right; line-height: 1.45; }
.release-list { display: grid; gap: 12px; }
.release { display: grid; grid-template-columns: 130px 170px 1fr auto; gap: 20px; align-items: start; padding: 26px 28px; border-left: 4px solid var(--blue); background: var(--panel); }
.release.current { border-left-color: var(--yellow); }
.release-version { font-family: Impact, "Bahnschrift Condensed", sans-serif; font-size: 28px; }
.release-date { color: var(--muted); font-size: 13px; }
.release ul { margin: 0; padding-left: 20px; color: #c4cad4; line-height: 1.6; }
.release a { color: var(--yellow); font-size: 12px; font-weight: 800; text-transform: uppercase; text-decoration: none; }
.loading { display: block; color: var(--muted); }
.platforms { display: grid; grid-template-columns: 1fr 250px 250px; gap: 16px; align-items: stretch; padding: 80px 0 100px; border-top: 1px solid var(--line); }
.platform { min-height: 190px; padding: 23px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); background: #101621; }
.platform b { margin-bottom: auto; color: var(--blue); font-size: 14px; }
.platform span { font-family: Impact, "Bahnschrift Condensed", sans-serif; font-size: 32px; text-transform: uppercase; }
.platform small { margin-top: 5px; color: var(--muted); }
.platform.windows { border-color: var(--blue); }
.platform.coming { opacity: .5; }
footer { width: min(1320px, calc(100% - 40px)); margin: auto; padding: 25px 0 40px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
  .hero { display: block; }
  .hero-copy { padding-bottom: 20px; }
  .hero-art { min-height: 490px; }
  .moon { width: 330px; height: 330px; }
  .platforms { grid-template-columns: 1fr 1fr; }
  .platforms > div:first-child { grid-column: 1 / -1; margin-bottom: 20px; }
}

@media (max-width: 640px) {
  .topbar, main, footer { width: min(100% - 28px, 1320px); }
  .topbar { height: 70px; }
  .server { font-size: 0; }
  .wordmark { font-size: 18px; }
  .mark { width: 40px; height: 40px; font-size: 13px; }
  .hero-copy { padding-top: 55px; }
  h1 { font-size: clamp(50px, 16vw, 82px); }
  .download-card { width: 100%; min-width: 0; grid-template-columns: 46px minmax(0, 1fr); }
  .download-copy strong, .download-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .platform-icon { width: 42px; height: 42px; }
  .download-button { grid-column: 1 / -1; width: 100%; }
  .hero-art { min-height: 430px; }
  .moon { top: 30px; right: -30px; width: 300px; height: 300px; }
  .section-heading { display: block; }
  .section-heading > span { display: block; margin-top: 14px; text-align: left; }
  .release { grid-template-columns: 1fr auto; padding: 20px; }
  .release-date { text-align: right; }
  .release ul { grid-column: 1 / -1; }
  .release a { grid-column: 1 / -1; }
  .platforms { grid-template-columns: 1fr; }
  .platforms > div:first-child { grid-column: auto; }
}