.temp {
    --angle: 0;
    --hue: 240;
    background-image:
            radial-gradient(
                    100% 100% at 50% 50%,
                    hsl(var(--hue),90%,17%) 56.8px,
                    hsla(var(--hue),90%,17%,0) 57.6px
            ),
            radial-gradient(
                    100% 100% at 50% 50%,
                    hsl(var(--hue),90%,10%),
                    hsl(var(--hue),90%,23%) 74.4px,
                    hsl(var(--hue),90%,55%) 77.6px 78.4px,
                    #17181c 81.6px 109.6px,
                    #17181c00 110.4px
            ),
            radial-gradient(100% 100% at 50% 0,#f1f2f4,#8f95a3);
    border-radius: 50%;
    box-shadow: 0 -4px 24px 8px #0004;
    display: flex;
    flex-direction: column;
    line-height: 1;
    padding: 16px;
    text-align: center;
    width: 240px;
    height: 240px;
    position: absolute;
    top: 162px;
    left: calc(50% + 12px);
    transform: translateX(-50%) scale(1.48);
}
.temp:after,
.temp__dial,
.temp__comet,
.temp__fizz {
    position: absolute;
}
.temp:after,
.temp__comet,
.temp__dial {
    border-radius: inherit;
}
.temp:after,
.temp__dial {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.temp:after {
    background:
            radial-gradient(100% 100% at 67% 17%,#fff3,#fff0 96px);
    content: "";
    display: block;
    z-index: 2;
}
.temp__logo {
    font-family: "Baloo Paaji 2", sans-serif;
    color: #abafba;
    letter-spacing: -1.6px;
    margin-bottom: 60px;
    text-transform: lowercase;
    transform: scaleY(1.1);
}
.temp__comet {
    background:
            radial-gradient(
                    100% 100% at 50% 50%,
                    hsl(var(--hue),90%,10%),
                    hsl(var(--hue),90%,20%) 52px,
                    hsl(var(--hue),90%,17%) 52.8px 53.6px,
                    hsla(var(--hue),90%,17%,0) 54.4px
            ),
            conic-gradient(#fff0,#fff calc(1deg * var(--angle)),#fff0 calc(1deg * var(--angle)));
    top: calc(50% - 56px);
    left: calc(50% - 56px);
    width: 112px;
    height: 112px;
    transform: rotate(-120deg);
}
.temp__fizz {
    display: block;
    top: calc(50% - 52.8px);
    left: calc(50% - 52.8px);
    width: 105.6px;
    height: 105.6px;
}
.temp__label,
.temp__value {
    color: #fff;
    font-family: "Unica One", monospace;
    position: relative;
    z-index: 1;
}
.temp__label {
    font-size: 9.6px;
    letter-spacing: 8px;
    text-transform: uppercase;
    transform: translateX(4px) scaleY(0.9);
}
.temp__value {
    font-size: 56px;
}
.temp__dial {
    cursor: grab;
    z-index: 3;
    transform: matrix(-0.5, -0.866025, 0.866025, -0.5, 0, 0);
}
.temp__dial:active {
    cursor: grabbing;
}