:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f5f7fa; background: #10151b; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #f1b05d; outline-offset: 5px; }
.topbar { height: 82px; padding: 0 clamp(20px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #29313a; }
.wordmark { font-size: 17px; font-weight: 850; letter-spacing: .1em; }
.text-button, .text-link { border: 0; background: none; padding: 12px 0; color: #aeb8c5; cursor: pointer; font-size: 15px; }
.text-button:hover, .text-link:hover { color: white; }
.menu, .login { width: min(560px, calc(100% - 40px)); margin: clamp(56px, 12vh, 140px) auto; }
.eyebrow { color: #aeb8c5; font-size: 13px; font-weight: 700; letter-spacing: .12em; margin: 0 0 12px; }
h1 { font-size: clamp(32px, 5vw, 46px); letter-spacing: -.035em; line-height: 1.1; margin: 0 0 32px; }
.menu-button { display: flex; align-items: center; gap: 22px; border: 1px solid #3c4754; background: #1b242e; padding: 28px; border-radius: 14px; }
.menu-button:hover { border-color: #f1b05d; background: #212c37; }
.menu-button strong { display: block; font-size: 25px; font-weight: 700; }
.play-icon { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; background: #eaa759; color: #171b20; border-radius: 50%; font-size: 20px; padding-left: 3px; }
.subtext { display: block; color: #afbccb; margin-top: 5px; font-size: 16px; }
.watch { max-width: 1584px; padding: 36px clamp(16px, 4vw, 64px) 48px; margin: 0 auto; }
.watch-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.watch h1 { font-size: 32px; margin: 0; }
.watch-heading p, .caption { color: #aeb8c5; font-size: 15px; line-height: 1.6; margin: 0; }
video { display: block; width: 100%; aspect-ratio: 9 / 5; background: #080b10; border: 1px solid #303a45; border-radius: 8px; }
.wide-comparison { aspect-ratio: 1920 / 644; }
.results { width: 100%; margin-top: 24px; border-collapse: collapse; text-align: left; }
.results th, .results td { padding: 12px 8px; border-bottom: 1px solid #303a45; }
.caption { margin-top: 16px; }
.login label { display: block; margin-bottom: 10px; font-size: 16px; }
.login input { width: 100%; padding: 15px; border: 1px solid #5b6878; border-radius: 8px; background: #1b242e; color: white; font-size: 18px; }
.primary { margin-top: 18px; width: 100%; min-height: 50px; padding: 14px 22px; border: 0; border-radius: 8px; background: #eaa759; color: #171b20; font-weight: 750; cursor: pointer; }
.primary:hover { background: #f1b971; }
.error { color: #ffb7b1; margin: 20px 0 0; line-height: 1.5; }
@media (max-width: 600px) { .topbar { height: 68px; } .watch { padding-top: 26px; } .watch-heading { display: block; } .watch-heading p { margin-top: 10px; } .caption { font-size: 14px; } }