.article-rating {
    margin-top: 3rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid rgba(15, 39, 71, .14);
    border-radius: 1rem;
    background: linear-gradient(145deg, #f7fafc, #fff);
    color: #13263a;
    text-align: center;
}

.article-rating__eyebrow {
    margin: 0 0 .45rem;
    color: #5d6b7b;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.article-rating h2 {
    margin: 0;
    color: #071522;
}

.article-rating__intro {
    margin: .6rem auto 1rem;
    max-width: 46rem;
    color: #536170;
}

.article-rating__stars {
    display: inline-flex;
    direction: ltr;
    gap: .15rem;
}

.article-rating__star {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1.12em;
    padding: .1rem;
    border: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1;
    transition: color .15s ease, transform .15s ease;
}

.article-rating__star::after,
.article-rating__star::before {
    position: absolute;
    inset: .1rem;
    content: '★';
    color: #cbd2da;
}

.article-rating__star::before {
    z-index: 1;
    color: #f4b400;
    clip-path: inset(0 100% 0 0);
}

.article-rating__star.rating-fill-1::before { clip-path: inset(0 90% 0 0); }
.article-rating__star.rating-fill-2::before { clip-path: inset(0 80% 0 0); }
.article-rating__star.rating-fill-3::before { clip-path: inset(0 70% 0 0); }
.article-rating__star.rating-fill-4::before { clip-path: inset(0 60% 0 0); }
.article-rating__star.rating-fill-5::before { clip-path: inset(0 50% 0 0); }
.article-rating__star.rating-fill-6::before { clip-path: inset(0 40% 0 0); }
.article-rating__star.rating-fill-7::before { clip-path: inset(0 30% 0 0); }
.article-rating__star.rating-fill-8::before { clip-path: inset(0 20% 0 0); }
.article-rating__star.rating-fill-9::before { clip-path: inset(0 10% 0 0); }
.article-rating__star.rating-fill-10::before { clip-path: inset(0 0 0 0); }

.article-rating__star:hover,
.article-rating__star:focus-visible {
    transform: translateY(-2px);
}

.article-rating__star:focus-visible {
    outline: 2px solid #0f2747;
    outline-offset: 3px;
    border-radius: .2rem;
}

.article-rating__star:disabled {
    cursor: wait;
    opacity: .65;
}

.article-rating__status {
    min-height: 1.5em;
    margin: .9rem 0 0;
    color: #26384b;
}

.article-rating__status small {
    color: #2f7852;
}

.article-rating__note {
    margin: .35rem 0 0;
    color: #72808e;
    font-size: .82rem;
}

:root[data-theme='dark'] .article-rating,
[data-theme='dark'] .article-rating,
html.dark .article-rating,
body.dark .article-rating,
body.dark-mode .article-rating {
    border-color: #293846;
    background: linear-gradient(145deg, #101923, #0b121a);
    color: #dbe7f3;
}

:root[data-theme='dark'] .article-rating h2,
[data-theme='dark'] .article-rating h2,
html.dark .article-rating h2,
body.dark .article-rating h2,
body.dark-mode .article-rating h2 {
    color: #f3f7fb;
}

:root[data-theme='dark'] .article-rating__eyebrow,
:root[data-theme='dark'] .article-rating__intro,
:root[data-theme='dark'] .article-rating__status,
:root[data-theme='dark'] .article-rating__note,
[data-theme='dark'] .article-rating__eyebrow,
[data-theme='dark'] .article-rating__intro,
[data-theme='dark'] .article-rating__status,
[data-theme='dark'] .article-rating__note,
html.dark .article-rating__eyebrow,
html.dark .article-rating__intro,
html.dark .article-rating__status,
html.dark .article-rating__note,
body.dark .article-rating__eyebrow,
body.dark .article-rating__intro,
body.dark .article-rating__status,
body.dark .article-rating__note,
body.dark-mode .article-rating__eyebrow,
body.dark-mode .article-rating__intro,
body.dark-mode .article-rating__status,
body.dark-mode .article-rating__note {
    color: #9dadbd;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .article-rating {
        border-color: #293846;
        background: linear-gradient(145deg, #101923, #0b121a);
        color: #dbe7f3;
    }

    :root:not([data-theme='light']) .article-rating h2 {
        color: #f3f7fb;
    }

    :root:not([data-theme='light']) .article-rating__eyebrow,
    :root:not([data-theme='light']) .article-rating__intro,
    :root:not([data-theme='light']) .article-rating__status,
    :root:not([data-theme='light']) .article-rating__note {
        color: #9dadbd;
    }
}