*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#171711}body{min-height:100svh;display:grid;place-items:center}.scene{position:relative;width:min(100%,1000px);container-type:inline-size;user-select:none}.scene>img{display:block;width:100%;height:auto;image-rendering:pixelated}.lcd{position:absolute;left:53%;top:33.4%;width:27.2%;height:14.6%;background:#291b10}#display{display:block;width:100%;height:100%;image-rendering:pixelated}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.dial{position:absolute;left:55.7%;top:56.7%;width:6.25%;aspect-ratio:1;border-radius:50%;border:.35cqw solid #6b5030;background:#d6b77e;box-shadow:inset .4cqw .25cqw #f6d9a0,inset -.4cqw -.35cqw #b18a52;cursor:grab;touch-action:none}.tuner{left:68.5%;top:53.8%;width:8.7%}.dial:focus-visible{outline:.3cqw solid #ffc761;outline-offset:.5cqw}.pointer{position:absolute;inset:0;transform:rotate(var(--angle,0deg))}.pointer:after{content:"";position:absolute;left:47%;top:7%;width:7%;height:31%;background:#392919}.signal{position:absolute;left:63.6%;top:53.5%;width:1.55%;aspect-ratio:1;border-radius:50%;background:#6a350b;border:.2cqw solid #9c5f18}.signal.on{background:#ffdf75;box-shadow:0 0 1cqw #ffb934}.volume-label{position:absolute;left:55%;top:66%;width:8%;font:bold 1cqw monospace;text-align:center;color:#37281a;opacity:0}.dial:focus~.volume-label,.dial:hover~.volume-label{opacity:1}.hint{position:absolute;left:10%;right:10%;bottom:2%;margin:0;text-align:center;color:#ffe0a5;font:13px system-ui;text-shadow:0 1px 3px #000,0 0 6px #000}@media(max-width:600px){body{overflow-x:hidden;display:block;padding-top:12vh}.scene{width:clamp(520px,145vw,650px);margin-left:calc((100vw - clamp(520px,145vw,650px))/2)}.hint{left:18%;right:18%;font-size:12px}}@media(prefers-reduced-motion:reduce){.signal.on{box-shadow:none}}

.dial:active{cursor:grabbing}

.volume-label{display:none!important}