*{box-sizing:border-box}body{margin:0;background:#eae9e3;color:#172b3c;font:15px/1.5 system-ui,sans-serif}main{max-width:900px;margin:26px auto;padding:0 18px}header{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;margin:0 0 18px;font-weight:700}a{color:#334f51}#stage{position:relative;width:100%;aspect-ratio:500/345;background:white;box-shadow:0 3px 15px #0003;border:1px solid #394d4c}canvas{display:block;width:100%;height:100%;touch-action:none}#controls{position:absolute;inset:0;pointer-events:none}#controls>*{position:absolute;pointer-events:auto}.hotspot{border:0;background:transparent;cursor:pointer;border-radius:5px;color:transparent}.hotspot:hover{outline:1px solid #ffe084}.hotspot:focus-visible,input:focus-visible{outline:3px solid #fcce43;outline-offset:2px}.storm{touch-action:none;cursor:grab;border-radius:50%}.storm:active{cursor:grabbing}#controls input[type=range]{opacity:0;cursor:ew-resize;margin:0}#controls input[type=range]:focus-visible{opacity:.65}#controls input[type=text]{font:clamp(10px,1.8vw,20px) Arial,sans-serif;padding:0 2px;border:1px solid #455d59;background:white;color:black;border-radius:0}#controls .result{margin:0;pointer-events:none;font:clamp(10px,1.8vw,20px)/1.18 Arial,sans-serif;color:#000}#status{min-height:1.5em;margin:12px 0}details{font-size:13px;color:#45575b}summary{cursor:pointer}button{font:inherit}@media(max-width:550px){main{padding:0 5px;margin:12px auto}header{font-size:12px}#controls .result{font-size:2.45vw}#controls input[type=text]{font-size:2.4vw}}

#stage .scene-layer{position:absolute;inset:0;pointer-events:none;z-index:1}#controls{z-index:2}

header{align-items:center}header img{display:block;max-width:35vw;height:auto}