.analog {
    position: relative;
    aspect-ratio: 1;
    border: 3px solid var(--face-border);
    border-radius: 50%;
    background: var(--face-bg);
    box-shadow: var(--face-shadow);
}

.mark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-clock);
    font-size: clamp(16px, 3vh, 30px);
    font-weight: 500;
    color: var(--face-fg);
}

.hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% 100%;
    border-radius: 10px;
    background: var(--hand-color);
}

.hour {
    width: 9px;
    height: 27%;
    margin-left: -4.5px;
}

.minute {
    width: 6px;
    height: 37%;
    margin-left: -3px;
}

.second {
    width: 2px;
    height: 42%;
    margin-left: -1px;
    background: var(--second-hand-color);
}

.pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pin-color);
    transform: translate(-50%, -50%);
}