:root{font-family:Arial,sans-serif;color:#111;background:transparent}body{margin:0}button{font:inherit;cursor:pointer}#shell{margin:auto;text-align:center}#toolbar{display:flex;justify-content:center;align-items:center;gap:24px;padding:12px}#toolbar button{border:0;background:transparent;color:inherit;font-weight:bold;padding:3px}#toolbar button:disabled{opacity:.5;cursor:default}#stage{position:relative;width:100%;aspect-ratio:4/3;background:#000;overflow:hidden}video,#buttons{position:absolute;inset:0;width:100%;height:100%}video{object-fit:contain}#buttons{pointer-events:none}.hotspot{position:absolute;pointer-events:auto;border:0;background:transparent;padding:0;color:transparent;overflow:hidden}.hotspot img{position:absolute;pointer-events:none;opacity:0}.hotspot.selected img{opacity:1}.hotspot:focus-visible{outline:2px solid white;outline-offset:-2px}.hotspot:active{filter:brightness(1.1)}#hint{position:absolute;top:12px;left:0;width:100%;color:white;text-shadow:0 1px 3px black;pointer-events:none}#status{margin:4px;font-size:14px}#shell:fullscreen{background:#000;color:#fff;width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center}#shell:fullscreen #stage{flex:none;margin:auto}#shell:fullscreen #toolbar{position:absolute;top:0;z-index:5;background:#0009;width:100%;box-sizing:border-box}

.hotspot:hover,.hotspot:focus-visible{outline:1px solid #fff;outline-offset:-1px}