:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; color: #f4f7ff; background: radial-gradient(circle at top, #102a52 0, #07101f 38%, #03070e 100%); }
.invite-card { width: min(100%, 390px); padding: 34px 28px; text-align: center; border: 1px solid rgba(117,169,255,.2); border-radius: 26px; background: rgba(10,19,35,.9); box-shadow: 0 22px 70px rgba(0,0,0,.4); }
.brand-mark { display: flex; justify-content: center; gap: 5px; margin-bottom: 16px; }
.brand-mark span { display: block; width: 28px; height: 20px; border: 3px solid #5d9dff; border-radius: 5px; }
h1 { margin: 0; font-size: 30px; letter-spacing: -.02em; }
#message { margin: 10px 0 26px; color: #aebbd0; line-height: 1.5; }
.label { margin: 0 0 6px; color: #8795aa; font-size: 13px; text-transform: uppercase; letter-spacing: .13em; }
.room-id { margin: 0 0 24px; font-size: 34px; font-weight: 700; letter-spacing: .15em; }
.open-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 24px; border-radius: 999px; color: white; background: #287cff; font-weight: 650; text-decoration: none; }
.open-button:focus-visible { outline: 3px solid #9bc2ff; outline-offset: 3px; }
.hint { margin: 18px 0 0; color: #7e8ca2; font-size: 13px; line-height: 1.4; }