:root { color-scheme: dark; font: 16px/1.5 system-ui, sans-serif; background: #11151b; color: #eef2f5; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { max-width: 640px; padding: 24px 20px; margin: auto; }
h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); line-height: 1.15; margin: 12px 0 20px; }
.eyebrow { letter-spacing: .16em; font-size: .7rem; color: #aebac6; }
header p, footer { color: #aebac6; }
section { margin-block: 20px; }
label { display: block; margin-block: 14px; font-weight: 600; }
input:not([type=checkbox]), textarea { display: block; width: 100%; margin-top: 6px; background: #1c232c; border: 1px solid #536170; border-radius: 6px; color: inherit; padding: 12px; font: inherit; }
button { font: inherit; font-weight: 600; padding: 11px 16px; border: 1px solid #91d8bb; border-radius: 6px; background: #91d8bb; color: #14271f; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 3px solid #eec579; outline-offset: 3px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.check { display: flex; gap: 10px; align-items: center; }
input[type=checkbox] { width: 20px; height: 20px; }
#status { font-size: clamp(1.3rem, 5vw, 1.65rem); line-height: 1.2; margin: 0 0 10px; }
#guidance { margin: 0; }
#connection-state { border-left: 4px solid #eec579; padding: 8px 0 8px 16px; margin-block: 24px; }
#connection-state[data-state=connected] { border-color: #91d8bb; color: #91d8bb; }
#connection-state[data-state=disconnected] { border-color: #ffaaa3; color: #ffaaa3; }
#route, #expiry { color: #aebac6; font-size: .85rem; }
#error { color: #ffaaa3; white-space: pre-wrap; }
#error:empty, #copy-status:empty, #route:empty { display: none; }
details { margin-block: 24px; }
summary { cursor: pointer; color: #aebac6; }
.secondary { background: transparent; color: #c4ced7; border-color: #536170; }
#room-code { font-size: 1.5rem; letter-spacing: .2em; max-width: 220px; }
#messages { border-block: 1px solid #536170; min-height: 80px; max-height: 300px; overflow: auto; padding: 12px 0; list-style: none; }
#messages li { padding: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#messages strong { display: block; color: #91d8bb; font-size: .8rem; }
textarea { resize: vertical; }
footer { font-size: .85rem; margin-top: 30px; }