[hidden] { display: none !important; }
body { margin: 0; background: #fff; color: #111; font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
main { max-width: 960px; margin: 0 auto; padding: 32px 16px 48px; }
h1 { margin: 0 0 4px; font-size: 24px; line-height: 1.3; font-weight: 600; }
.meta { margin: 0 0 24px; color: #555; }
.clips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.clips button.is-active { background: #111; color: #fff; border-color: #111; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; font-weight: 600; }
.stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.stage video, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage video { object-fit: contain; }
.stage canvas { pointer-events: none; }
.start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(0, 0, 0, .6); color: #fff; }
.load p { margin: 0; }
.controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 12px; }
.people { display: flex; flex-wrap: wrap; gap: 8px; }
button { font: inherit; font-size: 14px; color: #111; background: #fff; border: 1px solid #bbb; border-radius: 4px; padding: 4px 10px; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
.video-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; }
.video-person.is-active { border-color: var(--person-color, #111); box-shadow: inset 0 0 0 1px var(--person-color, #111); }
.video-person.is-absent { opacity: .45; }
.video-person-portrait { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; background: var(--person-color, #888); color: #fff; font-size: 12px; }
.video-person-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.segmented { display: flex; }
.segmented button { border-radius: 0; }
.segmented button + button { border-left: 0; }
.segmented button.is-active { background: #111; color: #fff; border-color: #111; }
.status, .note { margin: 8px 0 0; color: #555; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.card:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 16px; background: #fff; }
.card:fullscreen .stage { width: min(100%, calc((100vh - 140px) * 16 / 9)); margin: 0 auto; }