:root { color: #e8f0ed; background: #17221f; font: 16px/1.5 system-ui, sans-serif; }
body { margin: 0; }
main { box-sizing: border-box; max-width: 52rem; margin: 0 auto; padding: 3rem 1.5rem; }
.eyebrow { color: #8bd4bf; letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; }
h1 { margin: .2rem 0 .75rem; font-size: clamp(2rem, 7vw, 4rem); line-height: 1; }
.stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
video, canvas { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; border: 1px solid #42665c; background: #0b1110; }
canvas { image-rendering: auto; }
button { border: 0; border-radius: 999px; padding: .8rem 1.2rem; color: #17221f; background: #8bd4bf; font-weight: 700; cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
.markers { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
output { border: 1px solid #42665c; border-radius: 999px; padding: .2rem .65rem; font-size: .8rem; }
output[data-state="complete"] { color: #8bd4bf; border-color: #8bd4bf; }
pre { min-height: 5rem; overflow: auto; color: #a9bcb6; font-size: .75rem; }