/* A continuous sculpted rim; its illuminated arc follows the smoothed reading. */
html .test #dial{background:transparent;filter:none;border-radius:50%;box-shadow:0 12px 36px #42677a13,inset 0 0 0 1px #ffffffb3}
html .test #dial::before,html .test #dial::after{display:none}
.dial-orbit{position:absolute;inset:-5%;width:110%;height:110%;overflow:visible;pointer-events:none;transform:rotate(135deg)}
.dial-orbit .track{stroke:#c9dbe3;stroke-width:12}
.dial-orbit .progress{stroke:#55a9ba;stroke-width:12;stroke-linecap:round;filter:drop-shadow(0 0 5px #65bcca66)}
html .test:not(.is-running):not(.is-complete) #dial #phase{visibility:hidden}
html .test.is-running #dial{animation:orb-press 900ms cubic-bezier(.2,.7,.25,1) both}
@keyframes orb-press{0%{transform:scale(1)}24%{transform:scale(.88)}62%{transform:scale(1.035)}100%{transform:scale(1)}}
html .test #dial::after{content:'';display:block;position:absolute;inset:-3%;border-radius:50%;border:2px solid #79cbd9;box-shadow:0 0 22px #68c5d955;opacity:0;pointer-events:none}
html .test.is-running #dial::after{animation:orb-wave 1000ms ease-out both}
@keyframes orb-wave{0%,12%{opacity:0;transform:scale(.92)}30%{opacity:.8}100%{opacity:0;transform:scale(1.16)}}
@media(prefers-reduced-motion:reduce){html .test.is-running #dial{animation-duration:180ms}html .test.is-running #dial::after{animation:none}@keyframes orb-press{0%{transform:scale(1)}50%{transform:scale(.985)}100%{transform:scale(1)}}}
html .test #dial .dial-inner{border:1px solid #ffffffbd;background:radial-gradient(circle at 32% 22%,#ffffff,#edf4f7 65%,#dce9ef);box-shadow:inset 0 2px 6px #fff,0 2px 12px #41667b15}
@media(prefers-color-scheme:dark){html .test #dial{box-shadow:0 14px 45px #0003,inset 0 0 0 1px #7597a324}html .test #dial .dial-inner{background:radial-gradient(circle at 32% 22%,#28424f,#172b37 65%,#12222d);border-color:#65899738;box-shadow:inset 0 2px 8px #a4d9e512,0 2px 15px #0002}.dial-orbit .track{stroke:#304b59}.dial-orbit .progress{stroke:#83d7e3;filter:drop-shadow(0 0 6px #65c9db80)}}

html .test.has-reading:not(.is-running) #dial #phase{visibility:visible}
html .test.has-reading:not(.is-running) #dial .dial-inner #start{top:auto;bottom:20px;transform:translateX(-50%);width:124px;height:44px;min-height:44px;border-radius:24px;font-size:13px}
html .test.has-reading:not(.is-running) #dial .dial-inner #live-unit{visibility:visible}
@media(max-width:780px){html .test.has-reading:not(.is-running) #dial .dial-inner #start{bottom:17px;width:112px;font-size:12px}}