body { font-family: system-ui, sans-serif; max-width: 42rem; margin: 0 auto; padding: 1rem; }
header { display: flex; gap: .5rem; align-items: center; }
header h1 { flex: 1; margin: 0; }
form { display: flex; flex-direction: column; gap: .5rem; }
form.row, .row { display: flex; flex-direction: row; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
label { display: flex; flex-direction: column; font-size: .9rem; }
input { padding: .5rem; font-size: 1rem; }
button { padding: .5rem 1rem; font-size: 1rem; cursor: pointer; }
.error { color: #b00020; min-height: 1.2em; }
.videos { display: flex; gap: .5rem; }
.videos video { width: 50%; background: #222; border-radius: 6px; aspect-ratio: 4 / 3; }
#messages { list-style: none; padding: 0; max-height: 18rem; overflow-y: auto; border: 1px solid #ccc; min-height: 4rem; }
#messages li { padding: .25rem .5rem; }
#messages li.me { text-align: right; color: #0b5; }
#messages li.system { color: #888; font-style: italic; }
#ribbon { display: none; background: #c00; color: #fff; text-align: center; font-weight: bold; padding: .25rem; }
body[data-env] #ribbon { display: block; }