:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #182b2a; background: #f3f6f5; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 680px; margin: auto; padding: 24px 18px 40px; }
h1 { font-size: 2rem; margin: 4px 0 12px; }
.eyebrow { color: #476b62; font-size: .78rem; letter-spacing: .1em; }
.diagnostic { border-left: 5px solid #9b7414; padding: 12px; background: #fff7de; font-weight: 650; }
.diagnostic.pass { border-color: #087c58; background: #e1f5ea; }
.diagnostic.fail { border-color: #b22732; background: #ffe9eb; }
video { display: block; width: 100%; max-height: 50vh; min-height: 180px; background: #152523; border-radius: 12px; object-fit: contain; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
button { border: 0; border-radius: 8px; background: #166951; color: white; padding: 13px 16px; font: inherit; font-weight: 600; min-height: 48px; cursor: pointer; }
button:disabled { background: #697c76; opacity: .6; cursor: default; }
button:focus-visible, input:focus-visible { outline: 3px solid #cb8c13; outline-offset: 3px; }
dl { background: white; padding: 16px; border-radius: 12px; }
dt { color: #546b65; font-size: .85rem; margin-top: 12px; }
dt:first-child { margin-top: 0; }
dd { margin: 2px 0 0; overflow-wrap: anywhere; }
fieldset { border: 1px solid #b9cec7; padding: 14px; border-radius: 8px; margin: 20px 0; }
label { display: block; padding: 8px 0; }
input { width: 18px; height: 18px; vertical-align: middle; }
select {
  display: block; width: 100%; max-width: 28rem; margin: 8px 0 12px;
  min-height: 48px; font: inherit; padding: 10px 12px; border-radius: 8px;
  border: 1px solid #b9cec7; background: #fff;
}
#confirmDevice { margin-top: 4px; }
#deviceConfirmStatus { margin: 10px 0 0; font-size: .92rem; color: #546b65; }
#mediaDeviceStatus { margin: 10px 0 0; font-size: .92rem; color: #546b65; }
#mediaDeviceFieldset:disabled { opacity: .72; }
.live-badge {
  display: inline-block; background: #b00020; color: #fff; font-weight: 700;
  padding: 8px 12px; border-radius: 8px; margin: 8px 0;
}
.note { font-size: .9rem; color: #546b65; }
.stats { font-size: .75rem; background: #f3f6f5; padding: 8px; border-radius: 8px; overflow: auto; }
#viewerVideo, #preview { background: #152523; }
meter { width: 100px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: white; padding: 12px; font-size: .8rem; }
summary { cursor: pointer; margin-top: 18px; }
.footnote { font-size: .85rem; color: #546b65; }