:root { color-scheme: dark; --bg: #112320; --surface: #1c3931; --text: #f1faf3; --muted: #b5cdc0; --mint: #dfffad; --line: #426354; }
* { box-sizing: border-box; }
html, body, main { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font: inherit; cursor: pointer; border: 0; }
button:focus-visible, a:focus-visible { outline: .2rem solid var(--mint); outline-offset: .2rem; }
.hidden { display: none !important; }
.pairing { display: flex; min-height: 100dvh; padding: clamp(2rem, 6vw, 5rem); flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.brand { position: absolute; left: clamp(2rem, 6vw, 5rem); top: clamp(1.5rem, 4vw, 3rem); display: inline-flex; align-items: center; gap: .7rem; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: -.03em; }
.brand img { border-radius: .75rem; }
.eyebrow { color: var(--mint); font-size: clamp(.8rem, 1.5vw, 1rem); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: .5rem 0 1rem; font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -.06em; line-height: 1.05; }
.intro { max-width: 48rem; color: var(--muted); font-size: clamp(1.1rem, 2.2vw, 1.7rem); line-height: 1.4; }
.code { margin: 1.8rem 0 .3rem; padding: .7rem 1.8rem; border: .08rem solid var(--line); border-radius: 1.5rem; background: var(--surface); color: var(--mint); font-size: clamp(3rem, 9vw, 8rem); font-weight: 800; letter-spacing: .11em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.status { min-height: 2rem; color: var(--muted); font-size: clamp(1rem, 1.8vw, 1.3rem); }
#new-code, #play-video { margin-top: 1.2rem; padding: .85rem 1.4rem; border-radius: 100rem; background: var(--mint); color: var(--bg); font-weight: 800; }
.hint { max-width: 39rem; margin-top: 2.5rem; color: var(--muted); font-size: .9rem; }
.viewer { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #070d0b; }
.viewer video { width: 100%; height: 100%; object-fit: contain; }
.viewer-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--text); font-weight: 700; text-align: center; }
.viewer-status:empty { display: none; }
.viewer #play-video { position: absolute; left: 50%; bottom: 6rem; transform: translateX(-50%); }
.fullscreen { position: absolute; bottom: 1.5rem; right: 1.5rem; padding: .7rem 1rem; border-radius: .7rem; background: rgb(255 255 255 / 85%); color: #102422; font-weight: 700; }
@media (max-width: 42rem) { .brand { position: static; margin-bottom: 4rem; } .code { padding: .5rem 1rem; letter-spacing: .06em; } }