*{box-sizing:border-box}html,body{touch-action:none;-webkit-user-select:none;user-select:none;background:#071018;width:100%;height:100%;margin:0;font-family:system-ui,sans-serif;overflow:hidden}#app{position:fixed;inset:0}canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.controls{pointer-events:none;justify-content:center;align-items:flex-end;gap:28px;display:flex;position:absolute;bottom:20px;left:0;right:0}.dial-block{text-align:center;color:#dbe9ef}.dial-title{letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-bottom:8px;font-size:15px}.dial{pointer-events:auto;touch-action:none;cursor:grab;background:radial-gradient(circle at 40% 35%,#538ea373,#0d2632d9 60%,#05141cf2);border:2px solid #bee1eb73;border-radius:50%;width:150px;height:150px;position:relative;box-shadow:inset 0 0 20px #ffffff0f,0 8px 30px #00000059}.dial:active{cursor:grabbing}.dial-marker{transform-origin:50% 100%;pointer-events:none;background:#ffad45;border-radius:2px;width:4px;height:58px;position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)rotate(0)}.dial-center{color:#f6fbfd;font-variant-numeric:tabular-nums;background:#0b2532;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:17px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 1px #ffffff1f}@media (width<=500px){.controls{gap:12px;bottom:12px}.dial{width:140px;height:140px}.dial-marker{height:54px}}