:root { color-scheme: light; }
/* Circular gauge using conic-gradient */
.gauge {
--size: 260px; /* adjust as needed */
--track: #FFEBC8; /* light orange */
--progress: #FF9F1C; /* primary */
width: var(--size);
height: var(--size);
border-radius: 9999px;
position: relative;
display: grid;
place-items: center;
background:
radial-gradient(circle at 50% 50%, white 62%, transparent 63%),
conic-gradient(var(--progress) 310deg, var(--track) 0);
box-shadow: inset 0 2px 10px rgba(0,0,0,.03);
}
.gauge::after{ /* subtle ticks */
content: "";
position: absolute; inset: 10px;
border-radius: 9999px; background:
repeating-conic-gradient(from 0deg, rgba(255,159,28,.35) 0 4deg, transparent 4deg 8deg);
-webkit-mask: radial-gradient(circle, transparent 62%, black 63%);
mask: radial-gradient(circle, transparent 62%, black 63%);
pointer-events: none;
}

.gauge{
      --size:260px; --track:#FFEBC8; --progress:#FF9F1C;
      width:var(--size); height:var(--size); border-radius:9999px;
      display:grid; place-items:center; position:relative;
      background:
        radial-gradient(circle at 50% 50%, white 62%, transparent 63%),
        conic-gradient(var(--progress) 310deg, var(--track) 0);
      box-shadow: inset 0 2px 10px rgba(0,0,0,.03);
    }
    .gauge::after{
      content:""; position:absolute; inset:10px; border-radius:9999px;
      background:repeating-conic-gradient(from 0deg, rgba(255,159,28,.35) 0 4deg, transparent 4deg 8deg);
      -webkit-mask: radial-gradient(circle, transparent 62%, black 63%);
              mask: radial-gradient(circle, transparent 62%, black 63%);
      pointer-events:none;
    }