:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101116; color: #f4f4f7; }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; }
main { max-width: 880px; margin: auto; }
.brand { color: #c2a8ff; font-weight: 700; }
h1 { font-size: clamp(28px, 5vw, 40px); margin-bottom: 8px; }
header p, footer { color: #c0c1cc; }
.recording-note { padding: 14px; border-left: 3px solid #aa80ff; background: #20212c; border-radius: 8px; }
form { max-width: 480px; }
label { display: block; margin: 14px 0 6px; }
input, select, button { font: inherit; border-radius: 8px; min-height: 44px; }
input, select { width: 100%; padding: 10px; color: inherit; background: #20212c; border: 1px solid #666878; }
button { cursor: pointer; padding: 10px 18px; margin: 12px 8px 0 0; color: white; border: 1px solid #aaa0d9; background: #534183; }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 3px solid #d3b5ff; outline-offset: 3px; }
video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #08090d; border-radius: 10px; margin-top: 14px; }
#participants { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
figure { margin: 0; }
figcaption { padding: 6px; }
footer { margin-top: 32px; padding: 16px 0; font-size: 14px; }
a { color: #d3b5ff; }
[hidden] { display: none !important; }