:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #202124; color: #e0e0e0; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
main { text-align: center; padding: 2rem; max-width: 32rem; }
h1 { font-size: 1.15rem; font-weight: 500; }
p { color: #b6b8bd; line-height: 1.5; }
button { font: inherit; color: inherit; background: #333539; border: 1px solid #686a70; border-radius: .4rem; padding: .7rem 1rem; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid #ddd; outline-offset: 3px; }
#pairing { display: grid; gap: .8rem; text-align: left; }
#pair-code { box-sizing: border-box; width: 100%; min-width: 0; font: inherit; font-size: 1rem; padding: .7rem; color: inherit; background: #292a2d; border: 1px solid #686a70; border-radius: .4rem; }
#pair-error { margin: 0; }
button:disabled { opacity: .6; cursor: wait; }
#spinner { width: 1.4rem; height: 1.4rem; margin: 0 auto 1rem; border: 2px solid #55575b; border-top-color: #ddd; border-radius: 50%; animation: spin 1s linear infinite; }
[hidden] { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #spinner { animation: none; } }