:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #07110c; color: #eef8e9; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 28px;
  background: radial-gradient(ellipse at 50% 0, #274b29 0, #102118 40%, #07110c 75%); }
main { max-width: 840px; width: 100%; padding: clamp(24px, 6vw, 64px) 0; }
.eyebrow { letter-spacing: .18em; font-weight: 700; font-size: 12px; color: #a6d78b; }
h1 { font-size: clamp(32px, 7vw, 66px); line-height: 1.04; letter-spacing: -.035em; margin: 24px 0; }
h1 span { color: #a4e653; }
.lead { color: #cedcc9; font-size: 19px; line-height: 1.5; max-width: 560px; }
.play { display: inline-flex; align-items: center; gap: 40px; background: #a4e653; color: #10200e;
  padding: 17px 24px; border-radius: 8px; margin: 22px 0; text-decoration: none; font-weight: 750; font-size: 18px; }
.play:hover { background: #b7f76a; }
.play:focus-visible { outline: 3px solid white; outline-offset: 5px; }
.controls { font-size: 14px; line-height: 1.9; color: #d5e2d0; }
.note { font-size: 12px; line-height: 1.8; color: #99ae96; margin-top: 38px; }