.tuner-meter {
    position: relative;
    margin-top: 1.35rem;
    padding-top: 1.25rem;
}

.tuner-meter-scale {
    position: absolute;
    z-index: 7;
    top: 1.25rem;
    left: 50%;
    display: block;
    width: min(100%, 600px);
    height: 15rem;
    padding: 0;
    transform: translateX(-50%);
    pointer-events: none;
    color: rgba(255, 255, 255, .58);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

.tuner-meter-scale span {
    position: absolute;
    min-width: 2.4rem;
    text-align: center !important;
    font-weight: 750;
    letter-spacing: .035em;
    transform: translate(-50%, -50%);
}

.tuner-meter-scale span:nth-child(1) { left: 10%; top: 73%; }
.tuner-meter-scale span:nth-child(2) { left: 24%; top: 29%; }
.tuner-meter-scale span:nth-child(3) {
    left: 50%;
    top: 5%;
    color: rgba(218, 255, 236, .92);
}
.tuner-meter-scale span:nth-child(4) { left: 76%; top: 29%; }
.tuner-meter-scale span:nth-child(5) { left: 90%; top: 73%; }

.tuner-meter-track {
    position: relative;
    width: min(100%, 600px);
    height: 15rem;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-bottom-color: rgba(255, 255, 255, .04);
    border-radius: 50% 50% 1.25rem 1.25rem / 94% 94% 1.25rem 1.25rem;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(214, 189, 131, .055) 0 38%, transparent 39%),
        linear-gradient(180deg, #0d1420 0%, #090e16 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        inset 0 -24px 42px rgba(0, 0, 0, .28),
        0 14px 34px rgba(0, 0, 0, .2);
}

.tuner-meter-track::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from 300deg at 50% 100%,
        rgba(239, 91, 91, .68) 0deg 42deg,
        rgba(244, 163, 64, .72) 42deg 54deg,
        rgba(57, 217, 138, .82) 54deg 66deg,
        rgba(244, 163, 64, .72) 66deg 78deg,
        rgba(239, 91, 91, .68) 78deg 120deg,
        transparent 120deg 360deg
    );
    opacity: .78;
}

.tuner-meter-track::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 10.5%;
    right: 10.5%;
    bottom: -1px;
    height: 78%;
    border: 1px solid rgba(255, 255, 255, .045);
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background:
        radial-gradient(circle at 50% 100%, rgba(214, 189, 131, .06), transparent 42%),
        linear-gradient(180deg, #0d131d 0%, #0a0f17 100%);
    box-shadow: 0 -7px 18px rgba(0, 0, 0, .18);
}

.tuner-zone {
    display: none;
}

.tuner-center-line {
    z-index: 3;
    left: 50%;
    top: 14%;
    bottom: 1.35rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(57, 217, 138, .78), rgba(57, 217, 138, .1));
    box-shadow: 0 0 12px rgba(57, 217, 138, .16);
}

.tuner-center-line::before {
    top: -.18rem;
    width: .38rem;
    height: .38rem;
    border: 0;
    background: rgba(57, 217, 138, .92);
    box-shadow: 0 0 12px rgba(57, 217, 138, .42);
}

.tuner-needle {
    position: absolute;
    z-index: 6;
    top: 1.4rem;
    right: auto;
    bottom: 1.35rem;
    left: 50%;
    width: 3px;
    height: auto;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f4ec 58%, #d6bd83 100%);
    box-shadow: 0 0 8px rgba(255, 255, 255, .5);
    transform: translateX(-50%) rotate(var(--needle-angle, 0deg));
    transform-origin: 50% 100%;
    transition: none;
    will-change: transform;
    pointer-events: none;
}

.tuner-needle::before {
    content: "";
    position: absolute;
    top: -.32rem;
    left: 50%;
    width: .72rem;
    height: .72rem;
    background: #ffffff;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, .55));
    transform: translateX(-50%);
}

.tuner-needle span {
    position: absolute;
    z-index: 2;
    top: auto;
    bottom: -.52rem;
    left: 50%;
    width: 1.08rem;
    height: 1.08rem;
    border: 2px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
    background: #d6bd83;
    box-shadow:
        0 0 0 5px rgba(214, 189, 131, .12),
        0 0 18px rgba(214, 189, 131, .32);
    transform: translateX(-50%);
}

.tuner-meter-track::selection,
.tuner-meter-scale::selection {
    background: transparent;
}

@media (max-width: 640px) {
    .tuner-meter {
        padding-top: .9rem;
    }

    .tuner-meter-scale {
        top: .9rem;
        height: 10.75rem;
        font-size: .63rem;
    }

    .tuner-meter-track {
        height: 10.75rem;
        border-radius: 50% 50% 1rem 1rem / 92% 92% 1rem 1rem;
    }

    .tuner-meter-scale span:nth-child(1) { left: 9%; top: 75%; }
    .tuner-meter-scale span:nth-child(2) { left: 24%; top: 31%; }
    .tuner-meter-scale span:nth-child(4) { left: 76%; top: 31%; }
    .tuner-meter-scale span:nth-child(5) { left: 91%; top: 75%; }

    .tuner-needle {
        top: 1.1rem;
        bottom: .95rem;
    }

    .tuner-center-line {
        bottom: .95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tuner-needle {
        transition: none;
    }
}