.degree-dial{--size: 120px;--pointer-size: 10px;--font-size: 14px;--number-color: var(--main-100);--pointer-bg: #3b82f6;--dial-bg: var(--main-800);--center-bg: var(--main-500);font-family:Arial,sans-serif;display:flex;align-items:center;justify-content:center;margin-top:10px;margin-bottom:10px}.degree-dial .dial{width:var(--size);height:var(--size);border-radius:50%;background:var(--dial-bg);position:relative;user-select:none;touch-action:none}.degree-dial canvas{position:absolute;inset:6px;border-radius:50%}.degree-dial .pointer{position:absolute;width:50%;height:calc(var(--pointer-size)/4);top:50%;left:50%;transform-origin:0% 50%;background:var(--pointer-bg)}.degree-dial .pointer:after{content:"";position:absolute;right:calc(-1 * var(--pointer-size)/2);top:calc(-1 * var(--pointer-size)/2 + var(--pointer-size)/8);width:var(--pointer-size);height:var(--pointer-size);border-radius:50%;background:var(--pointer-bg)}.degree-dial .hub{position:absolute;width:3.2em;height:3.2em;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--center-bg);display:flex;align-items:center;justify-content:center;color:var(--number-color);font-size:var(--font-size)}