Wobbling gauge needle

Show the average of the scores on a half-circle gauge. 0–50 is pink, 50–75 is yellow and 75–100 is green. The needle springs from 0 to the average, stops, and keeps wobbling very slightly, while the average number counts up below it.

[paste your table here]

The first row is the header. Put CSS and JavaScript in a single HTML file and draw with canvas or SVG, without external libraries. Dark background, crisp numbers and text, and no overlapping text even at phone width. If prefers-reduced-motion is on, show the finished chart without motion.

점수들의 평균을 반원 게이지로 보여 주세요. 0~50은 분홍, 50~75는 노랑, 75~100은 초록 구간이에요. 바늘은 0에서 튕기듯 평균까지 가서 멈춘 뒤에도 아주 조금씩 흔들리고, 아래에 평균 숫자가 함께 올라가요.

[여기에 표 붙여넣기]

첫 줄은 머리글이에요. HTML 파일 하나에 CSS와 JavaScript를 넣고, 외부 라이브러리 없이 canvas나 SVG로 그려 주세요. 어두운 배경에 숫자와 글자는 또렷하게, 휴대폰 폭에서도 글자가 겹치지 않게 해 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 다 그려진 차트를 보여 주세요.