:root{font-family:system-ui,sans-serif;color:#202020;background:#fff4f6}body{margin:0}main{max-width:760px;margin:auto;padding:1rem}header,.toolbar,.tools{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}header h1{margin-right:auto}.toolbar button,button{padding:.7rem 1rem;border:0;border-radius:.65rem;background:#7b2453;color:white;font-weight:600;cursor:pointer}.toolbar button[data-v].active{background:#3a0f28}.figure{position:relative;max-width:100%}.figure img{display:block;width:100%;height:auto}.figure svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hotspot{fill:#5e214a;fill-opacity:.12;stroke:#5e214a;stroke-width:2}.hotspot.active{fill:#ff9e00;fill-opacity:.55;stroke:#cb5500;stroke-width:5}.hotspot.done{fill:#2b9b62;fill-opacity:.42;stroke:#12633a}.hotspot{pointer-events:auto;cursor:pointer}#gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem}#gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.7rem}.share{font-size:.85rem;border-top:1px solid #ddd;padding:.5rem 0}@media(max-width:520px){main{padding:.7rem}button{flex:1}.toolbar button:last-child{flex-basis:100%}}
#overlay circle{fill:#ffe500!important;stroke:#111!important}
video,#snapshot{width:100%;max-height:70vh;background:#111;border-radius:.7rem}