*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:radial-gradient(ellipse at 15% 0%,#1d3036 0,transparent 48%),#0b1119;color:#e9edf2;font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}.wrap{max-width:1192px;margin:auto;padding:0 36px}a{color:#e7c17c;text-underline-offset:4px}a:hover{color:#ffe2ac}a:focus-visible,summary:focus-visible{outline:2px solid #7fc4b6;outline-offset:5px}header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;border-bottom:1px solid #ffffff16}.brand{display:flex;align-items:center;gap:13px;color:#e9edf2;text-decoration:none;font-weight:750;font-size:15px;letter-spacing:1px}.brand img{border-radius:10px;border:1px solid #bca57470}.author{font-size:13px;color:#9dadc0}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;padding:65px 0 56px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:2px;color:#7fc4b6;margin:0 0 12px}h1{font-size:clamp(38px,5vw,62px);line-height:1.06;letter-spacing:-2px;margin:0 0 24px}h2{font-size:24px;line-height:1.3;margin:0 0 16px;letter-spacing:-.5px}h3{font-size:18px;line-height:1.4;margin:0 0 8px}p{color:#9dadc0;margin:0 0 16px}.lead{font-size:20px;line-height:1.5;color:#d2dce5}.facts{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;color:#b9cacd;padding-top:8px}.facts span:before{content:"✓";color:#7fc4b6;margin-right:6px}.download{padding:30px;background:linear-gradient(140deg,#1d2936,#111b27);border:1px solid #e7c17c40;border-radius:18px;box-shadow:0 16px 60px #0004}.download h2{font-size:28px}.button{display:block;text-align:center;background:#e7c17c;color:#191d24;font-size:17px;font-weight:750;text-decoration:none;border-radius:8px;padding:15px 12px;margin:24px 0 12px;box-shadow:0 5px 20px #0003}.button:hover{background:#f7d69b;color:#111}.version{font-size:12px;text-align:center}.small{font-size:12px}.download .small{margin:22px 0 10px}.secondary{font-size:13px}.install,.features,.help{border-top:1px solid #ffffff16;padding:32px 0}.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:8px 0 0;margin:0 0 16px}.steps p,.columns p{font-size:14px}.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-top:12px}.columns .eyebrow{display:block;margin-bottom:8px}details{border-bottom:1px solid #ffffff12;padding:15px 0}summary{cursor:pointer;font-size:15px;font-weight:600}details p{max-width:850px;font-size:14px;margin:14px 0 0}footer{border-top:1px solid #ffffff16;padding:25px 0 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:#9dadc0;font-size:12px}footer nav{display:flex;gap:22px}footer p{width:100%;font-size:11px;margin:0}@media(max-width:760px){.wrap{padding:0 22px}header{padding:20px 0;align-items:flex-start}.brand{font-size:12px;letter-spacing:.4px}.author{max-width:90px;font-size:11px}.hero{grid-template-columns:1fr;gap:26px;padding:36px 0}.download{padding:24px}.steps,.columns{grid-template-columns:1fr;gap:18px}.steps p,.columns p{margin-bottom:4px}.install,.features,.help{padding:26px 0}.facts{font-size:11px}h1{letter-spacing:-1px}}

.gallery{border-top:1px solid #ffffff16;padding:22px 0}.gallery-heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 20px}.gallery-heading h2{font-size:21px;margin-bottom:10px}.gallery-heading p{margin-bottom:10px}.screenshots figure{margin:0;display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);align-items:center;gap:26px;padding:12px;overflow:hidden;border:1px solid #ffffff20;border-radius:10px;background:#111b27}.screenshots figure[hidden]{display:none}.screenshots a{display:block;cursor:zoom-in}.screenshots img{display:block;width:100%;height:auto;max-height:200px;object-fit:contain}.screenshots a:hover{filter:brightness(1.12)}.screenshots figcaption{padding:12px 20px 12px 0}.screenshots h3{font-size:18px}.screenshots p{font-size:14px;max-width:390px;margin:0}.slider-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:10px}.slider-controls[hidden]{display:none}.slider-controls button{font:inherit;color:#e7c17c;background:#172331;border:1px solid #ffffff20;border-radius:6px;cursor:pointer;min-width:32px;min-height:30px}.slider-controls button:hover{background:#293b4d}.slide-dots{display:flex;gap:2px}.slide-dots button{border:0;background:transparent;min-width:26px;position:relative}.slide-dots button:after{content:"";display:block;width:7px;height:7px;border-radius:50%;background:#6b7a8b;margin:auto}.slide-dots button[aria-pressed="true"]:after{background:#e7c17c;width:9px;height:9px}.slide-status{color:#9dadc0;font-size:12px}.gallery button:focus-visible,.screenshots:focus-visible{outline:2px solid #7fc4b6;outline-offset:3px}@media(max-width:600px){.screenshots figure{grid-template-columns:1fr;gap:10px}.screenshots img{max-height:155px}.screenshots figcaption{padding:0 4px 4px}.screenshots h3{font-size:16px;margin-bottom:4px}.screenshots p{font-size:12px}.gallery{padding:20px 0}}

/* Give the screenshots the full gallery area. */
.gallery{padding:20px 0}
.screenshots figure{display:block;padding:0}
.screenshots a{display:flex;align-items:center;justify-content:center;width:100%;height:620px;background:#0b1119}
.screenshots img{width:100%;height:100%;max-height:none;object-fit:contain}
@media(max-width:760px){.screenshots a{height:440px}}

/* Match the app's Frozen Throne banner, with the crop on Arthas's eyes. */
header{padding:28px max(36px,calc((100% - 1120px)/2));background-image:linear-gradient(90deg,rgba(7,17,29,.85),rgba(7,17,29,.28) 65%,rgba(7,17,29,.6)),url("assets/frozen-throne.jpg");background-size:cover;background-position:center 20%;border-bottom-color:#38556b}
header .brand,header .author{text-shadow:0 1px 4px #000}
header .author{color:#d5e3ef}
@media(max-width:760px){header{padding:20px 22px;background-size:auto,900px auto;background-position:center,right 20%}}

/* "Everything it does": short feature lists, a check mark per line */
.feature-list{border-top:1px solid #ffffff16;padding:32px 0}
.feature-groups{columns:3 240px;column-gap:40px;padding-top:8px}
.feature-groups>div{break-inside:avoid;margin-bottom:26px}
.feature-groups h3{font-size:11px;font-weight:750;letter-spacing:2px;text-transform:uppercase;color:#7fc4b6;margin:0 0 10px}
.feature-groups ul{list-style:none;margin:0;padding:0}
.feature-groups li{font-size:14px;line-height:1.45;color:#c4d0db;padding:3px 0 3px 20px;position:relative}
.feature-groups li:before{content:"✓";position:absolute;left:0;color:#7fc4b6}
@media(max-width:760px){.feature-list{padding:26px 0}.feature-groups>div{margin-bottom:20px}}

.hero-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px}
.hero-heading h1{margin:0;flex-shrink:0}
.hero-logo{display:block;width:clamp(80px,11vw,150px);height:auto;min-width:0;object-fit:contain}
@media(max-width:400px){.hero-heading{gap:8px}.hero-heading h1{font-size:36px}.hero-logo{width:82px}}

/* Tighter vertical spacing: less empty space around the intro, the install steps and each section. */
.hero{padding:34px 0 26px}
.hero .facts{padding-top:0}
.install,.features,.feature-list{padding:22px 0}
.steps{padding:0;margin:0 0 10px}
.steps p,.columns p{margin:0}
.install .small{margin:0}
.columns{padding-top:4px}
.features h2,.feature-list h2{margin-bottom:12px}
.feature-groups>div{margin-bottom:18px}
@media(max-width:760px){.hero{padding:26px 0 20px}.install,.features,.feature-list{padding:20px 0}}

/* The app's name beside the Warcraft III logo: Rexxar icon and title at section-heading size */
.hero-heading{justify-content:flex-start;gap:22px}
.hero-heading .hero-title{display:flex;align-items:center;gap:13px;font-size:24px;line-height:1.3;letter-spacing:1px;font-weight:750;margin:0;flex-shrink:1;min-width:0}
.hero-title img{border-radius:10px;border:1px solid #bca57470;flex:none}
@media(max-width:760px){.hero-heading{flex-wrap:wrap;gap:12px 18px}.hero-heading .hero-title{font-size:20px;gap:10px}.hero-title img{width:36px;height:36px}}