.section{border:var(--border-size) solid var(--fill);z-index:var(--z-index);border-top:none}@container (width<320px){.section{background-color:var(--fill);-webkit-mask-image:radial-gradient(50% 100% at 50% 0,#0000 calc(var(--ring-hole) - .5px),#000 calc(var(--ring-hole) + .5px));mask-image:radial-gradient(50% 100% at 50% 0,#0000 calc(var(--ring-hole) - .5px),#000 calc(var(--ring-hole) + .5px));border-width:0}}.animate-fill-graph{transform:rotate(calc(var(--percentage)*1));animation:2.2s ease-in forwards fillGraphAnimation}@keyframes fillGraphAnimation{0%{transform:rotate(0)}50%{transform:rotate(var(--percentage))}}.scale-mark{transform-origin:bottom;position:absolute}.scale-mark span{transform:rotate(var(--angle)) translateX(-50%);transform-origin:top;position:absolute}