:root { color-scheme: dark; font: 16px/1.5 system-ui, sans-serif; --bg: #14171d; --fg: #dbdfe7; }
/* The colours of the client (app/src/app.css), so the loader, the client's boot screen and the client are one background, not three. */
@media (prefers-color-scheme: light) { :root { color-scheme: light; --bg: #f5f7fb; --fg: #3b3e44; } }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--fg); }
main { max-width: 28em; padding: 2em; }
h1 { font-weight: 600; margin: 0 0 .5em; }
[hidden] { display: none !important; }
main { width: min(28em, 100%); box-sizing: border-box; }
.muted { opacity: .7; font-size: .9em; }
button, input { font: inherit; box-sizing: border-box; border: 1px solid GrayText; border-radius: .5em; padding: .65em .9em; }
button { cursor: pointer; background: var(--fg); color: var(--bg); margin: .5em 0; }
button:disabled { opacity: .5; cursor: wait; }
label { display: block; margin-top: 1em; }
input { width: 100%; background: var(--bg); color: var(--fg); margin-top: .5em; }
/* A device that is paired is not shown the pairing form while its client opens; a spinner does for the moment it takes. */
.opening { display: flex; align-items: center; justify-content: center; gap: .75em; opacity: .8; }
/* While the client opens the page is the client's own boot screen to the eye: the name and a spinner, centred, the same size. */
main:has(#register[hidden]) { text-align: center; }
main:has(#register[hidden]) h1 { font-size: 1.17em; letter-spacing: .02em; margin-bottom: .8em; }
.spinner { width: 1.17em; height: 1.17em; border: 2px solid currentColor; opacity: .55; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
video { width: 100%; max-height: 45vh; object-fit: cover; border-radius: .5em; background: #16161a; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#say:empty { display: none; }