:root { color-scheme: light; font-family: Heebo, Arial, sans-serif; background: #faf6f0; color: #241f1a; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 0, #fff 0, #faf6f0 55%, #eee4d6 100%); }
.connect-shell { min-height: 100vh; display: grid; place-items: center; padding: 5vh 4vw; }
.connect-card { width: min(900px, 92vw); padding: clamp(42px, 6vw, 86px); text-align: center; background: rgba(255,255,255,.94); border: 1px solid #eae2d4; border-radius: 34px; box-shadow: 0 24px 80px rgba(69,43,35,.12); }
.connect-mark { width: 108px; height: 108px; margin: 0 auto 26px; display: grid; place-items: center; border-radius: 50%; background: #773341; color: #fff; font-size: 28px; font-weight: 800; }
.eyebrow { margin: 0; color: #b18c49; font-weight: 800; font-size: 22px; }
h1 { margin: 10px 0 24px; font-size: clamp(38px, 5vw, 66px); line-height: 1.1; }
.instructions, .expiry { color: #6e6151; font-size: clamp(21px, 2.3vw, 31px); }
.pairing-code { direction: ltr; margin: 30px auto 20px; color: #773341; font-size: clamp(62px, 10vw, 126px); font-weight: 900; line-height: 1; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.status { min-height: 1.5em; margin: 18px 0; font-size: clamp(20px, 2vw, 28px); font-weight: 700; }
button { border: 0; border-radius: 14px; padding: 16px 28px; background: #773341; color: white; font: inherit; font-size: 22px; font-weight: 800; cursor: pointer; }
button:focus-visible { outline: 4px solid #b18c49; outline-offset: 4px; }
@media (max-width: 640px) { .pairing-code { letter-spacing: .08em; } }