.sjyrs {
    --sjyrs-red: #d32323;
    --sjyrs-gold: #f4b400;
    --sjyrs-ink: #172033;
    --sjyrs-muted: #647084;
    --sjyrs-border: #dfe3ea;
    --sjyrs-bg: #ffffff;
    --sjyrs-card: #ffffff;
    --sjyrs-gap: 22px;
    box-sizing: border-box;
    width: 100%;
    margin: 2rem auto;
    padding: clamp(1.25rem, 3vw, 2rem);
    color: var(--sjyrs-ink);
    background: var(--sjyrs-bg);
    border: 1px solid var(--sjyrs-border);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(23, 32, 51, 0.08);
}

.sjyrs *, .sjyrs *::before, .sjyrs *::after { box-sizing: border-box; }
.sjyrs--dark {
    --sjyrs-ink: #f7f8fb;
    --sjyrs-muted: #c5ccd7;
    --sjyrs-border: #344159;
    --sjyrs-bg: #101827;
    --sjyrs-card: #182236;
}

.sjyrs__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.4rem;
}

.sjyrs__title { margin: 0; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.12; }
.sjyrs__eyebrow { margin: .35rem 0 0; color: var(--sjyrs-muted); font-size: .92rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sjyrs__rating-summary a,
.sjyrs__rating-summary > span { color: inherit; text-decoration: none; }
.sjyrs__rating-summary a {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: .65rem;
    row-gap: .2rem;
}
.sjyrs__rating-summary { flex: 0 0 auto; }
.sjyrs__yelp-wordmark { color: var(--sjyrs-red); font-size: 1.22rem; font-weight: 900; letter-spacing: -.035em; }
.sjyrs__rating-number { font-size: 1.35rem; font-weight: 900; }
.sjyrs__summary-stars,
.sjyrs__review-count { grid-column: 1 / -1; }
.sjyrs__review-count { color: var(--sjyrs-muted); font-size: .85rem; }
.sjyrs__stars { display: inline-flex; gap: 2px; line-height: 1; }
.sjyrs__star { position: relative; color: #cfd4dc; font-size: 1.05rem; }
.sjyrs__star--full { color: var(--sjyrs-red); }
.sjyrs__star--half { color: #cfd4dc; }
.sjyrs__star--half::before {
    content: "★";
    position: absolute;
    inset: 0;
    width: 50%;
    overflow: hidden;
    color: var(--sjyrs-red);
}
.sjyrs__viewport { overflow: hidden; outline: none; }
.sjyrs__viewport:focus-visible { outline: 3px solid rgba(211, 35, 35, .35); outline-offset: 4px; border-radius: 12px; }
.sjyrs__track { display: flex; gap: var(--sjyrs-gap); will-change: transform; transition: transform .45s ease; }
.sjyrs__slide { flex: 0 0 auto; min-width: 0; }
.sjyrs__card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.35rem;
    background: var(--sjyrs-card);
    border: 1px solid var(--sjyrs-border);
    border-top: 5px solid var(--sjyrs-red);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(23, 32, 51, .08);
}
.sjyrs__card-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sjyrs__source { color: var(--sjyrs-red); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sjyrs__quote { margin: 1rem 0; padding: 0; border: 0; font-size: 1rem; line-height: 1.65; }
.sjyrs__quote p { margin: 0; }
.sjyrs__reviewer { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .75rem; margin-top: auto; color: var(--sjyrs-muted); font-size: .88rem; }
.sjyrs__reviewer strong { color: var(--sjyrs-ink); }
.sjyrs__reviewer a { margin-left: auto; color: var(--sjyrs-red); font-weight: 800; text-decoration: none; }
.sjyrs__reviewer a:hover { text-decoration: underline; }
.sjyrs__controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; }
.sjyrs__button {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--sjyrs-border);
    border-radius: 999px;
    color: var(--sjyrs-ink);
    background: var(--sjyrs-card);
    font-size: 1.15rem;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.sjyrs__button:hover { transform: translateY(-2px); border-color: var(--sjyrs-red); }
.sjyrs__button:focus-visible { outline: 3px solid rgba(211, 35, 35, .35); outline-offset: 2px; }
.sjyrs__button:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.sjyrs__status { min-width: 4.5rem; text-align: center; color: var(--sjyrs-muted); font-size: .85rem; }
.sjyrs__empty { margin: 0; padding: 1rem; border: 1px dashed var(--sjyrs-border); border-radius: 10px; color: var(--sjyrs-muted); }

@media (max-width: 700px) {
    .sjyrs { padding: 1rem; border-radius: 12px; }
    .sjyrs__heading { align-items: flex-start; flex-direction: column; }
    .sjyrs__rating-summary a { grid-template-columns: auto auto auto; }
    .sjyrs__summary-stars { grid-column: auto; }
    .sjyrs__review-count { grid-column: 1 / -1; }
    .sjyrs__reviewer a { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sjyrs__track, .sjyrs__button { transition: none; }
}