*{box-sizing:border-box}html,body{margin:0;background:transparent;overflow:hidden}body{font-family:Arial,sans-serif}nav{display:flex;justify-content:center;gap:28px;padding:10px}nav button{font:inherit;font-weight:bold;border:0;background:none;color:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:default}#viewport{position:relative;margin:auto;overflow:hidden}#stage{position:absolute;width:800px;height:600px;transform-origin:top left;background:black;overflow:hidden}canvas,#media,#buttons{position:absolute;inset:0;width:800px;height:600px}#media{pointer-events:none}#media>*{position:absolute;object-fit:fill}#buttons{pointer-events:none}.hotspot{position:absolute;padding:0;border:0;background:transparent;pointer-events:auto;cursor:pointer}.hotspot:focus-visible{outline:2px solid white;outline-offset:3px}#status{text-align:center;margin:0;padding:3px;font:14px Arial}#escape{position:fixed;top:10px;left:0;right:0;text-align:center;color:white;pointer-events:none}#shell:fullscreen{background:black;color:white;display:flex;flex-direction:column;justify-content:center}#shell:fullscreen #viewport{flex-shrink:0}