:root { color-scheme: dark; }
body { margin: 0; font: 16px/1.4 system-ui, sans-serif; background: #121417; color: #e8eaed; }
main { max-width: 40rem; margin: 0 auto; padding: 2rem 1.25rem; }
h1 { font-size: 1.4rem; margin: 0 0 .4rem; }
p.meta { margin: 0 0 1.5rem; color: #9aa0a6; }
form { display: flex; gap: .5rem; }
input { flex: 1; font: inherit; padding: .6rem .75rem; border: 1px solid #3c4043; border-radius: 8px; background: #1f2328; color: inherit; }
button { font: inherit; padding: .6rem 1rem; border: 0; border-radius: 8px; background: #8ab4f8; color: #121417; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.hangup { background: #f28b82; }
#error { min-height: 1.4rem; margin: .6rem 0 0; color: #f28b82; }
.media { display: flex; gap: .75rem; margin-top: 1rem; }
video { width: 16rem; height: 12rem; background: #0d0f12; border-radius: 8px; object-fit: cover; }
pre { margin-top: 1.25rem; padding: 1rem; min-height: 12rem; max-height: 24rem; overflow: auto; background: #0d0f12; border-radius: 8px; white-space: pre-wrap; }