:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #05070d; color: #e8eefc; font: 17px/1.5 system-ui, sans-serif; }
main { width: min(640px, 100% - 32px); margin: 0 auto; padding: 32px 0 48px; }
.logo { display: block; width: min(360px, 80%); height: auto; margin: 0 auto 28px; }
.card { background: #0c1222; border: 1px solid #1c2640; border-radius: 16px; padding: 22px; margin-bottom: 18px; }
.card.small p { color: #9fb0cf; margin: 0 0 10px; }
h2 { font-size: 18px; margin: 0 0 14px; }
.eyebrow { margin: 0 0 12px; color: #46afff; font-weight: 600; }
.btn { display: block; text-align: center; text-decoration: none; padding: 14px 18px; border-radius: 12px;
       background: #1f6fe0; color: #fff; font-weight: 600; border: 3px solid transparent; outline: none; }
.btn.alt { background: #1a2338; }
.btn.big { font-size: 26px; padding: 22px; }
/* TV remotes move focus with the D-pad: make it impossible to miss. */
.btn:focus, .btn:focus-visible, .btn:hover { background: #1e88e5; border-color: #fff; transform: scale(1.03); }
.meta { display: block; color: #7f8fb0; font-size: 14px; margin: 6px 2px 0; word-break: break-all; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps { color: #9fb0cf; margin: 14px 0 0; padding-left: 22px; }
.foot { text-align: center; color: #5d6b88; font-size: 13px; }
@media (min-width: 1200px) and (hover: none) { body { font-size: 22px; } .btn.big { font-size: 34px; } }