:root { color: #152033; background: #f6f8fc; font: 16px/1.45 system-ui, sans-serif; } body { margin: 0; } main { max-width: 580px; margin: auto; padding: 20px; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } h1 { margin: 0; font-size: 1.6rem; } h1 + p { margin: 2px 0 16px; color: #52647a; }
button, select { border: 1px solid #c4cfdf; border-radius: 8px; padding: 9px 12px; font: inherit; cursor: pointer; background: white; } button.primary { background: #0b5cff; border-color: #0b5cff; color: white; }
.controls { display: grid; gap: 12px; } label { display: grid; gap: 5px; font-weight: 600; } .status, .demo { padding: 10px 12px; border-radius: 8px; background: #e8f1ff; } .error { background: #fff0f0; color: #9c2020; }
.captions, .invite-panel { margin-top: 14px; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 1px 4px #15203318; } .captions h2 { margin-top: 0; font-size: 1rem; } .caption { font-size: 1.2rem; margin: 10px 0; } .empty { color: #52647a; }
.invite-panel { display: grid; gap: 9px; } .invite-panel label { display: block; font-weight: 400; } footer { margin-top: 18px; flex-wrap: wrap; } .feedback.selected { border-color: #0b5cff; color: #0b5cff; }