:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101216; color: #edf1f5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
main { width: min(100%, 1100px); padding: 24px; }
h1 { margin: 0 0 8px; font-size: 1.5rem; }
p { color: #b9c1cb; }
.bar { display:flex; flex-wrap:wrap; gap: 10px; align-items: center; margin: 18px 0; }
input, button { border-radius: 8px; border: 1px solid #3f4855; padding: 10px 12px; font: inherit; }
input { background: #191d24; color: inherit; width: 190px; text-transform: uppercase; }
button { background: #1677ff; color: white; border-color: #1677ff; cursor:pointer; font-weight: 600; }
button:disabled { opacity: .55; cursor: wait; }
.status { padding: 8px 10px; border-left: 3px solid #e0a300; color: #dce4ee; }
.ok { border-color: #23b26b; }.bad { border-color: #e54d57; }
.stage { position:relative; background:#050607; border-radius: 12px; overflow:hidden; aspect-ratio:16/9; display:grid; place-items:center; }
video { width:100%; height:100%; object-fit:contain; background:#050607; }
.hud { position:absolute; top:18px; left:18px; background:rgba(5,8,12,.78); padding:12px 14px; border-radius:9px; font-variant-numeric: tabular-nums; }
.speed { font-size:2.2rem; font-weight:800; line-height:1; }.unit { font-size:.8rem; color:#b9c1cb; }
.meta { margin-top:7px; font-size:.85rem; color:#cfd8e4; }
.note { font-size:.88rem; }