:root {
  --bg: #f7f7f5; --card: #ffffff; --text: #1d1d1f; --muted: #5a5a60; --line: #d9d9de;
  --accent: #1f5fbf; --accent-text: #ffffff; --bar: #1f5fbf; --bar-bg: #e6e9ef; --error: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121214; --card: #1c1c1f; --text: #ececf0; --muted: #a6a6ae; --line: #33333a;
    --accent: #7aa7ff; --accent-text: #0b1a33; --bar: #7aa7ff; --bar-bg: #2a2d35; --error: #ff8a80; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
header, main, footer { max-width: 40rem; margin: 0 auto; padding: 0 16px; }
header { padding-top: 24px; }
h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
.sub, footer { color: var(--muted); }
footer { font-size: .875rem; padding-bottom: 32px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 16px 0; }
ul { padding-left: 1.2rem; margin: 0 0 16px; }
li + li { margin-top: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
button { font: inherit; min-height: 44px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-text); cursor: pointer; }
button.secondary { background: transparent; color: var(--accent); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.video-wrap { aspect-ratio: 4 / 3; background: #000; border-radius: 8px; overflow: hidden; }
video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.status { color: var(--muted); min-height: 1.5em; }
.status.error { color: var(--error); }
.top { font-size: 1.4rem; font-weight: 600; margin: 4px 0 8px; }
.bars { list-style: none; padding: 0; margin: 0; }
.bars li { display: grid; grid-template-columns: 6.5rem 1fr 3.5rem; align-items: center; gap: 8px; margin: 4px 0; }
.bar { height: 10px; background: var(--bar-bg); border-radius: 5px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--bar); }
.pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
label { display: block; margin: 8px 0 4px; }
input[type=file] { max-width: 100%; margin-bottom: 12px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--card); padding: 8px; }
@media (prefers-reduced-motion: no-preference) { .bar span { transition: width .25s; } }