:root {
    --acnosol-updates-black: #101114;
    --acnosol-updates-navy: #0a1d3d;
    --acnosol-updates-blue: #0867f2;
    --acnosol-updates-yellow: #f4d52b;
    --acnosol-updates-text: #f7f9fc;
    --acnosol-updates-muted: #c7d3e3;
}

.acnosol-updates {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    background: linear-gradient(145deg, var(--acnosol-updates-black), var(--acnosol-updates-navy));
    color: var(--acnosol-updates-text);
    box-shadow: 0 22px 55px rgba(8, 24, 54, .18);
}

.acnosol-updates,
.acnosol-updates * {
    box-sizing: border-box;
}

.acnosol-updates__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 26px 20px;
}

.acnosol-updates__heading span {
    color: #71a7ff;
    font: 700 12px/1.2 Arial, sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.acnosol-updates__heading h2 {
    margin: 6px 0 0;
    color: #fff !important;
    font: 800 clamp(24px, 3vw, 34px)/1.12 Arial, sans-serif;
}

.acnosol-updates__arrows {
    display: flex;
    gap: 8px;
}

.acnosol-updates__arrows button {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: #fff !important;
    font: 700 20px/1 Arial, sans-serif;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.acnosol-updates__arrows button:hover,
.acnosol-updates__arrows button:focus-visible {
    border-color: var(--acnosol-updates-yellow);
    background: var(--acnosol-updates-yellow);
    color: #101114 !important;
    transform: translateY(-1px);
}

.acnosol-updates__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .14);
}

.acnosol-updates__tabs button {
    min-width: 0;
    padding: 15px 8px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #cbd8e9 !important;
    font: 700 13px/1.25 Arial, sans-serif;
    cursor: pointer;
}

.acnosol-updates__tabs button[aria-selected="true"] {
    border-color: var(--acnosol-updates-yellow);
    color: #fff !important;
}

.acnosol-updates__viewport {
    padding: 22px;
}

.acnosol-updates__panel[hidden] {
    display: none;
}

.acnosol-updates__slides {
    position: relative;
    min-height: 430px;
}

.acnosol-updates__slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: grid;
    align-content: start;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 17px;
    background: linear-gradient(145deg, #151a24, #0b2349);
    opacity: 0;
    transform: translateX(18px);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}

.acnosol-updates__slide.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.acnosol-updates__image {
    display: block;
    height: 210px;
    background: linear-gradient(135deg, #11151d, #09234b);
}

.acnosol-updates__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acnosol-updates__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, .05) 47%, rgba(255, 255, 255, .05) 53%, transparent 54%),
        linear-gradient(145deg, #101722, #0b2a58);
}

.acnosol-updates__body {
    padding: 20px;
}

.acnosol-updates__meta {
    margin: 0 0 6px !important;
    color: #79aaff !important;
    font: 700 12px/1.4 Arial, sans-serif;
}

.acnosol-updates__body h3 {
    margin: 0 0 10px;
    color: #fff !important;
    font: 800 clamp(22px, 2.4vw, 29px)/1.18 Arial, sans-serif;
}

.acnosol-updates__body h3 a,
.acnosol-updates__link {
    color: inherit !important;
    text-decoration: none !important;
}

.acnosol-updates__excerpt {
    margin: 0 0 16px !important;
    color: var(--acnosol-updates-muted) !important;
    font: 400 15px/1.55 Arial, sans-serif;
}

.acnosol-updates__link {
    display: inline-block;
    color: var(--acnosol-updates-yellow) !important;
    font: 700 14px/1.4 Arial, sans-serif;
}

.acnosol-updates__slide--review {
    position: absolute;
    align-content: center;
    min-height: 390px;
    padding: 34px;
}

.acnosol-updates__review-mark {
    position: absolute;
    top: 10px;
    right: 24px;
    color: rgba(255, 255, 255, .08);
    font: 800 130px/1 Georgia, serif;
}

.acnosol-updates__stars {
    position: relative;
    z-index: 1;
    color: var(--acnosol-updates-yellow) !important;
    font: 700 18px/1 Arial, sans-serif;
    letter-spacing: .1em;
}

.acnosol-updates__slide--review blockquote {
    position: relative;
    z-index: 1;
    margin: 18px 0;
    padding: 0;
    border: 0;
    color: #fff !important;
    font: 600 clamp(19px, 2.2vw, 26px)/1.45 Arial, sans-serif;
}

.acnosol-updates__author {
    margin: 0 0 14px !important;
    color: var(--acnosol-updates-muted) !important;
    font: 700 14px/1.4 Arial, sans-serif;
}

.acnosol-updates__badge {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: max-content;
    margin-bottom: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(8, 103, 242, .18);
    color: #8db7ff !important;
    font: 700 11px/1 Arial, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.acnosol-updates__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 17px;
}

.acnosol-updates__dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.acnosol-updates__dots button.is-active {
    width: 24px;
    background: var(--acnosol-updates-yellow);
}

.acnosol-updates__empty {
    display: grid;
    place-content: center;
    gap: 8px;
    min-height: 390px;
    padding: 30px;
    border: 1px dashed rgba(255, 255, 255, .2);
    border-radius: 16px;
    color: var(--acnosol-updates-muted);
    text-align: center;
}

.acnosol-updates__empty strong {
    color: #fff;
    font: 800 19px/1.3 Arial, sans-serif;
}

.acnosol-updates__empty span {
    font: 400 14px/1.5 Arial, sans-serif;
}

@media (max-width: 767px) {
    .acnosol-updates__heading {
        align-items: center;
        padding: 22px 18px 17px;
    }

    .acnosol-updates__heading h2 {
        font-size: 25px;
    }

    .acnosol-updates__arrows button {
        width: 38px;
        height: 38px;
    }

    .acnosol-updates__tabs button {
        padding-inline: 4px;
        font-size: 11px;
    }

    .acnosol-updates__viewport {
        padding: 16px;
    }

    .acnosol-updates__slides {
        min-height: 445px;
    }

    .acnosol-updates__image {
        height: 190px;
    }

    .acnosol-updates__slide--review,
    .acnosol-updates__empty {
        min-height: 405px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acnosol-updates__slide,
    .acnosol-updates__arrows button,
    .acnosol-updates__dots button {
        transition: none;
    }
}