:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101825; color: #eef3fa; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header { padding: 1rem 5vw; background: #1b283b; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
h1, h2 { margin-top: 0; }
header h1 { margin: 0; font-size: 1.4rem; }
a { color: #a8caff; }
.admin { max-width: 72rem; margin: auto; padding: 2rem 1rem; }
.admin section, #login { background: #1b283b; border-radius: .75rem; padding: 1.25rem; margin: 0 0 1rem; }
form, .actions { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-bottom: 1rem; }
label { display: grid; gap: .3rem; }
input, textarea, select, button { font: inherit; padding: .55rem; border: 1px solid #687b97; border-radius: .4rem; }
button { cursor: pointer; }
article { border-top: 1px solid #687b97; margin: 1rem 0; padding-top: 1rem; }
li { margin-bottom: .5rem; }
li button, li input { margin-left: .4rem; }
#message { position: sticky; bottom: 0; padding: .65rem; background: #101825; }
#message:empty { display: none; }
.player { background: #05080c; }
#stage { height: 100vh; height: 100dvh; overflow: hidden; display: grid; place-items: center; }
#stage > video, #stage > img { width: 100%; height: 100%; object-fit: contain; }
.pair, .slide { text-align: center; padding: 5vw; max-width: 95vw; overflow-wrap: anywhere; }
.pair strong { font-size: clamp(2rem, 8vw, 6rem); letter-spacing: .12em; }
.pair-qr { display: block; width: min(13rem, 35vh); margin: 1rem auto; }
.slide h1 { font-size: clamp(2rem, 5vw, 5rem); }
.slide p { white-space: pre-wrap; font-size: clamp(1rem, 3vw, 3rem); max-height: 70dvh; overflow: auto; }