.overall-strength-index-card {
    overflow: hidden;
    background: linear-gradient(150deg, #171719 0%, #111113 72%, #171012 100%);
}

#overall-strength-index-chart {
    display: block;
    height: 280px;
    margin-top: 12px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 17px;
    background: linear-gradient(155deg, #161417 0%, #111113 70%, #171012 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.022), 0 14px 32px rgba(0,0,0,.2);
}

.strength-index-summary {
    display:grid;
    gap:8px;
    margin-top:16px;
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
    background:linear-gradient(135deg, rgba(32,27,30,.92), rgba(18,17,19,.92));
}

.strength-index-summary__kicker {
    color:#ff555d;
    font-size:10px;
    font-weight:850;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.strength-index-summary__metrics {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
}

.strength-index-summary__metrics > strong {
    color:#fff;
    font-size:34px;
    line-height:1;
    letter-spacing:-.035em;
    font-variant-numeric:tabular-nums;
}

.strength-index-summary__change {
    display:grid;
    justify-items:end;
    gap:2px;
}

.strength-index-summary__change b {
    font-size:16px;
    font-variant-numeric:tabular-nums;
}

.strength-index-summary__change.is-positive b { color:#4bd180; }
.strength-index-summary__change.is-negative b { color:#ff6269; }
.strength-index-summary__change.is-neutral b { color:#d0d0d6; }

.strength-index-summary__change small,
.strength-index-summary__context {
    color:#8f8f99;
    font-size:11px;
}

@media (max-width: 520px) {
    #overall-strength-index-chart {
        height: 250px;
        border-radius: 15px;
    }
}