:root {
    --font-display: "Sora", sans-serif;
    --font-sans: "Manrope", sans-serif;
    --radius: .5rem;
    --background: oklch(22.8% .052 281);
    --foreground: oklch(95% .01 240);
    --card: oklch(27.8% .055 281);
    --panel: oklch(31.5% .058 278);
    --primary: oklch(78% .14 172);
    --primary-glow: oklch(90% .16 158);
    --primary-foreground: oklch(22.5% .05 281);
    --secondary: oklch(35% .07 160);
    --muted: oklch(30% .052 281);
    --muted-foreground: oklch(76% .028 265);
    --gold: oklch(85% .15 90);
    --border: oklch(39.5% .048 278)
}

*,:before,:after {
    box-sizing: border-box;
    border: 0 solid var(--border);
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5
}

h1,h2,h3 {
    font-family: var(--font-display);
    letter-spacing: -.02em
}

a {
    color: inherit;
    text-decoration: none
}

img,svg {
    max-width: 100%;
    display: block
}

ol,ul {
    list-style: none
}

.container-page {
    width: 100%;
    max-width: 1260px;
    margin-inline:auto;padding-inline:1rem}

.section {
    position: relative;
    overflow: hidden
}

.section-inner {
    z-index: 10;
    position: relative
}

.hero-stage {
    background-color: var(--background);
    background-repeat: no-repeat;
    background-image: conic-gradient(from 180deg at 50% -14%, transparent 0 118deg, color-mix(in oklab, var(--primary) 9%, transparent) 148deg, color-mix(in oklab, var(--primary-glow) 20%, transparent) 180deg, color-mix(in oklab, var(--primary) 9%, transparent) 212deg, transparent 242deg 360deg), radial-gradient(58% 64% at 50% 44%, color-mix(in oklab, var(--primary) 15%, transparent) 0, transparent 72%), radial-gradient(40% 72% at 4% 92%, color-mix(in oklab, var(--primary) 16%, transparent) 0, transparent 70%), radial-gradient(36% 68% at 98% 8%, color-mix(in oklab, var(--gold) 13%, transparent) 0, transparent 72%), radial-gradient(100% 46% at 50% 120%, color-mix(in oklab, var(--primary-glow) 22%, transparent) 0, transparent 70%)
}

.site-header {
    z-index: 60;
    background: var(--background);
    border-bottom-width: 1px;
    position: relative
}

.site-header__inner {
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-block:.75rem;display: flex
}

.brand {
    min-width: 0;
    font-family: var(--font-display);
    align-items: center;
    gap: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    display: flex
}

.brand__mark {
    background: var(--primary);
    border-radius: 2px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    display: flex;
    transform: rotate(45deg)
}

.brand__mark span {
    color: var(--primary-foreground);
    font-size: .875rem;
    transform: rotate(-45deg)
}

.brand__accent {
    color: var(--primary)
}

.site-nav {
    align-items: center;
    gap: 1.5rem;
    display: flex
}

.site-nav__list {
    align-items: center;
    gap: 1.25rem;
    display: flex
}

.site-nav__link {
    color: var(--muted-foreground);
    font-size: .875rem;
    font-weight: 600;
    transition: color .2s
}

.site-nav__link:hover,.site-nav__link[aria-current=page] {
    color: var(--primary)
}

.btn-outline {
    border: 1px solid var(--primary);
    border-radius: calc(var(--radius) - 2px);
    color: var(--primary);
    padding: .375rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    transition: background .2s,color .2s
}

.btn-outline:hover {
    background: var(--primary);
    color: var(--primary-foreground)
}

.nav-toggle {
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    background: var(--card);
    color: var(--foreground);
    font: 600 .8125rem var(--font-sans);
    cursor: pointer;
    align-items: center;
    gap: .5rem;
    padding: .4rem .625rem;
    display: none
}

.nav-toggle__box {
    width: 1.125rem;
    height: .875rem;
    display: block;
    position: relative
}

.nav-toggle__line {
    background: var(--primary);
    border-radius: 999px;
    width: 100%;
    height: 2px;
    transition: transform .2s,opacity .2s;
    position: absolute;
    left: 0
}

.nav-toggle__line:first-child {
    top: 0
}

.nav-toggle__line:nth-child(2) {
    margin-top: -1px;
    top: 50%
}

.nav-toggle__line:nth-child(3) {
    bottom: 0
}

.nav-toggle[aria-expanded=true] .nav-toggle__line:first-child {
    transform: translateY(.375rem)rotate(45deg)
}

.nav-toggle[aria-expanded=true] .nav-toggle__line:nth-child(2) {
    opacity: 0
}

.nav-toggle[aria-expanded=true] .nav-toggle__line:nth-child(3) {
    transform: translateY(-.375rem)rotate(-45deg)
}

@media (width<=1023px) {
    .site-nav,.site-nav__list {
        gap: .875rem
    }

    .site-nav__link {
        font-size: .8125rem
    }
}

@media (width<=767px) {
    .nav-toggle {
        display: inline-flex
    }

    .site-nav {
        background: var(--card);
        border-bottom-width: 1px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .25rem 1rem 1rem;
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        box-shadow: 0 18px 30px -18px #0009
    }

    .site-nav--open {
        display: flex
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    .site-nav__link {
        color: var(--foreground);
        border-bottom-width: 1px;
        padding: .8125rem .25rem;
        font-size: 1rem;
        display: block
    }

    .site-nav__cta {
        text-align: center;
        margin-top: .875rem;
        padding-block:.75rem}
}

.hero {
    border-bottom-width: 1px
}

.hero:after {
    content: "";
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--primary) 55%, transparent) 22%, color-mix(in oklab, var(--primary-glow) 85%, transparent) 50%, color-mix(in oklab, var(--primary) 55%, transparent) 78%, transparent);
    inset-inline: 0;
    height: 1px;
    position: absolute;
    bottom: -1px
}

.hero__inner {
    text-align: center;
    flex-direction: column;
    align-items: center;
    padding-block:2.5rem;display: flex
}

.hero__badge {
    border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
    background: var(--card);
    color: var(--primary);
    border-radius: 999px;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    padding: .25rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    display: inline-flex
}

.hero__dot {
    background: var(--primary-glow);
    border-radius: 999px;
    width: .5rem;
    height: .5rem
}

.hero__title {
    width: 100%;
    max-width: 48rem;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.25
}

.hero__title span {
    color: var(--primary);
    display: block
}

.stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.5rem;
    display: flex
}

.stat {
    border-radius: calc(var(--radius) - 2px);
    background: var(--card);
    text-align: center;
    border-width: 1px;
    padding: .5rem 1rem
}

.stat__value {
    font-family: var(--font-display);
    color: var(--primary-glow);
    font-size: 1.25rem;
    font-weight: 700
}

.stat__label {
    color: var(--muted-foreground);
    font-size: .75rem
}

@media (width>=768px) {
    .hero__inner {
        padding-block: 3.5rem
    }

    .hero__title {
        max-width: 56rem;
        font-size: 2.5rem
    }
}

.toc {
    text-align: left;
    border-radius: var(--radius);
    background: var(--card);
    border-width: 1px;
    width: 100%;
    max-width: 48rem;
    margin-top: 1.5rem
}

.toc[open] {
    border-color: var(--primary)
}

.toc__summary {
    cursor: pointer;
    font-family: var(--font-display);
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.25rem;
    font-weight: 600;
    list-style: none;
    display: flex
}

.toc__summary::-webkit-details-marker {
    display: none
}

.toc__toggle {
    color: var(--primary);
    font-size: .875rem;
    font-weight: 700
}

.toc__toggle:after {
    content: "Show ▾"
}

.toc[open] .toc__toggle:after {
    content: "Hide ▴"
}

.toc__list {
    border-top-width: 1px;
    column-gap: 1.5rem;
    padding: 1rem 1.25rem;
    font-size: .875rem
}

.toc__list>li {
    break-inside: avoid;
    margin-bottom: .5rem
}

.toc__link {
    color: var(--muted-foreground);
    gap: .5rem;
    transition: color .2s;
    display: flex
}

.toc__link:hover,.toc__sub a:hover {
    color: var(--primary)
}

.toc__num {
    color: var(--primary);
    font-weight: 700
}

.toc__sub {
    gap: .25rem;
    margin: .25rem 0 0 1.25rem;
    display: grid
}

.toc__sub a {
    color: var(--muted-foreground)
}

@media (width>=768px) {
    .toc__list {
        columns: 2
    }
}

.toplist-block {
    padding-bottom: 4.5rem
}

.toplist {
    border-bottom-width: 1px;
    padding-block:3rem}

.toplist__head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: 1.5rem;
    display: flex
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--primary);
    font-size: .75rem;
    font-weight: 700
}

.section-title {
    margin-top: .25rem;
    font-size: 1.5rem;
    font-weight: 700
}

.muted {
    color: var(--muted-foreground)
}

.small {
    font-size: .875rem
}

.toplist__list {
    gap: .75rem;
    display: grid
}

.casino {
    border-radius: var(--radius);
    background: var(--card);
    border-width: 1px;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    display: grid
}

.casino--top {
    border-color: var(--primary)
}

.casino__rank {
    border-radius: calc(var(--radius) - 2px);
    background: var(--secondary);
    width: 2.5rem;
    height: 2.5rem;
    font-family: var(--font-display);
    color: var(--primary-glow);
    justify-content: center;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 700;
    display: flex
}

.casino__logo {
    border-radius: calc(var(--radius) - 2px);
    background: var(--muted);
    object-fit: contain;
    width: 8rem;
    height: 3.5rem
}

.casino__col {
    grid-column: span 2
}

.casino__name {
    font-family: var(--font-display);
    font-weight: 600
}

.casino__rating {
    color: var(--gold);
    font-weight: 700
}

.casino__reviews {
    color: var(--muted-foreground);
    margin-left: .5rem
}

.casino__playing {
    color: var(--muted-foreground);
    font-size: .75rem
}

.casino__playing span {
    color: var(--primary);
    font-weight: 600
}

.casino__label {
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted-foreground);
    font-size: .75rem
}

.casino__bonus {
    font-family: var(--font-display);
    color: var(--primary-glow);
    font-weight: 700
}

.casino__pays {
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .5rem;
    display: flex
}

.casino__pays img {
    background: var(--foreground);
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
    width: auto;
    height: 1.25rem;
    padding-inline:.25rem}

.casino__cta {
    text-align: center
}

.btn-play {
    border-radius: calc(var(--radius) - 2px);
    background: var(--primary);
    font-family: var(--font-display);
    color: var(--primary-foreground);
    padding: .75rem 1.5rem;
    font-weight: 700;
    transition: background .2s;
    display: block
}

.btn-play:hover {
    background: var(--primary-glow)
}

.casino__terms {
    color: var(--muted-foreground);
    margin-top: .25rem;
    font-size: 10px
}

@media (width>=768px) {
    .section-title {
        font-size: 1.875rem
    }

    .casino {
        grid-template-columns: 3rem 9rem 1fr 1.3fr auto
    }

    .casino__logo {
        width: 9rem
    }

    .casino__col {
        grid-column: span 1
    }
}

.article {
    border-bottom-width: 1px;
    padding-bottom: 5rem
}

.article__inner {
    padding-top: 2.5rem
}

.intro-box {
    border-radius: var(--radius);
    background: var(--card);
    border-width: 1px;
    margin-bottom: 2.5rem;
    padding: 1.5rem
}

.content-section {
    margin-bottom: 3rem;
    scroll-margin-top: 1.5rem
}

.content-section__title {
    border-bottom-width: 1px;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    font-size: 1.5rem;
    font-weight: 700
}

@media (width>=768px) {
    .content-section__title {
        font-size: 1.875rem
    }
}

.prose-flat p {
    color: var(--muted-foreground);
    margin: 0 0 1rem;
    line-height: 1.75
}

.prose-flat strong {
    color: var(--foreground);
    font-weight: 700
}

.prose-flat a {
    color: var(--primary);
    text-underline-offset: 3px;
    text-decoration: underline
}

.prose-flat ul,.prose-flat ol {
    gap: .5rem;
    margin: 0 0 1.25rem;
    display: grid
}

.prose-flat li {
    color: var(--muted-foreground);
    padding-left: 1.5rem;
    line-height: 1.65;
    position: relative
}

.prose-flat ul>li:before {
    content: "";
    background: var(--primary);
    width: .5rem;
    height: .5rem;
    position: absolute;
    top: .65em;
    left: .25rem;
    transform: rotate(45deg)
}

.prose-flat ol {
    counter-reset: n
}

.prose-flat ol>li {
    counter-increment: n
}

.prose-flat ol>li:before {
    content: counter(n);
    color: var(--primary);
    font-weight: 800;
    position: absolute;
    left: 0
}

.prose-flat__h3 {
    align-items: center;
    gap: .75rem;
    margin: 2rem 0 .75rem;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex
}

.prose-flat__h3:before {
    content: "";
    background: var(--primary);
    border-radius: 999px;
    width: .25rem;
    height: 1.25rem
}

@media (width>=768px) {
    .prose-flat__h3 {
        font-size: 1.25rem
    }
}

.review {
    border-radius: var(--radius);
    background: var(--card);
    border-width: 1px;
    margin-bottom: 1.25rem;
    overflow: hidden
}

.review__head {
    background: var(--panel);
    border-bottom-width: 1px;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    display: flex
}

.review__num {
    font-family: var(--font-display);
    color: var(--primary);
    font-size: 1.875rem;
    font-weight: 700
}

.review__name {
    font-size: 1.25rem;
    font-weight: 700
}

.review__tag {
    color: var(--primary-glow);
    font-size: .875rem;
    font-weight: 600
}

.review__body {
    padding: 1.25rem
}

.faq {
    gap: .75rem;
    display: grid
}

.faq__item {
    border-radius: var(--radius);
    background: var(--card);
    border-width: 1px
}

.faq__item[open] {
    border-color: var(--primary)
}

.faq__q {
    cursor: pointer;
    font-family: var(--font-display);
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    list-style: none;
    display: flex
}

.faq__q::-webkit-details-marker {
    display: none
}

.faq__icon {
    color: var(--primary);
    font-size: 1.25rem;
    transition: transform .2s
}

.faq__item[open] .faq__icon {
    transform: rotate(45deg)
}

.faq__a {
    border-top-width: 1px;
    padding: 1rem 1.25rem 0
}

.site-footer {
    text-align: center;
    color: var(--muted-foreground);
    border-top-width: 1px;
    padding-block:2rem;font-size: .875rem
}

.site-footer__links {
    color: var(--foreground);
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    display: flex
}

.site-footer a:hover,.site-footer a[aria-current=page] {
    color: var(--primary)
}

.site-footer .section-inner {
    padding-inline:5rem}

.information-back {
    color: var(--primary);
    margin-bottom: 1.25rem;
    font-size: .875rem
}

.information-hero__subtitle {
    max-width: 48rem;
    color: var(--muted-foreground);
    margin-top: 1rem
}

.information-page .content-section {
    margin-bottom: 2.5rem
}

.information-notice {
    border-left: 3px solid var(--gold);
    background: var(--card);
    margin-bottom: 2rem;
    padding: 1rem 1.25rem
}

.information-notice strong {
    color: var(--gold)
}

.information-notice p {
    color: var(--muted-foreground);
    margin-top: .5rem
}

.information-index {
    border-block:1px solid var(--border);flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-bottom: 2.5rem;
    padding-block:1.25rem;display: flex
}

.information-index a {
    gap: .5rem;
    font-size: .875rem;
    display: flex
}

.information-index span,.information-index a:hover {
    color: var(--primary)
}

a:focus-visible,summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px
}

@media (width<=767px) {
    .brand {
        gap: .375rem;
        font-size: .875rem
    }

    .site-footer .section-inner {
        padding-inline:1rem}

    .information-index {
        flex-direction: column;
        gap: .75rem
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .decor *,.clip {
        animation: none
    }
}

.status-page {
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding-inline:1rem;display: flex
}

.status-page__box {
    text-align: center;
    max-width: 28rem
}

.status-page__code {
    font-size: 4.5rem;
    font-weight: 700
}

.status-page__title {
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 600
}

.status-page__text {
    color: var(--muted-foreground);
    margin-top: .5rem;
    font-size: .875rem
}

.status-page__actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.5rem;
    display: flex
}

.btn-solid {
    border-radius: calc(var(--radius) - 2px);
    background: var(--primary);
    color: var(--primary-foreground);
    font: 500 .875rem var(--font-sans);
    cursor: pointer;
    padding: .5rem 1rem;
    display: inline-flex
}

.decor {
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.decor__spark {
    background: var(--primary-glow);
    opacity: .55;
    clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
    width: 1.125rem;
    height: 1.125rem;
    animation: 4.5s ease-in-out infinite twinkle;
    display: none;
    position: absolute
}

.decor__spark--a {
    width: 1.5rem;
    height: 1.5rem;
    top: 20%;
    left: 11%
}

.decor__spark--b {
    animation-delay: 1.1s;
    top: 28%;
    right: 13%
}

.decor__spark--c {
    width: .875rem;
    height: .875rem;
    animation-delay: 2.2s;
    bottom: 16%;
    left: 21%
}

.decor__spark--d {
    background: var(--gold);
    width: 1.25rem;
    height: 1.25rem;
    animation-delay: 3s;
    bottom: 22%;
    right: 19%
}

.decor__spark--e {
    width: .75rem;
    height: .75rem;
    animation-delay: .6s;
    top: 62%;
    left: 5%
}

.decor__spark--f {
    background: var(--gold);
    width: .875rem;
    height: .875rem;
    animation-delay: 2.6s;
    top: 66%;
    right: 5%
}

.decor__suit {
    font-family: var(--font-display);
    font-size: 9rem;
    line-height: 1;
    display: none;
    position: absolute
}

.decor__suit--spade {
    color: color-mix(in oklab, var(--primary) 12%, transparent);
    margin-top: -4.5rem;
    top: 50%;
    left: -1.75rem
}

.decor__suit--diamond {
    color: color-mix(in oklab, var(--gold) 12%, transparent);
    margin-top: -4.5rem;
    top: 50%;
    right: -1.75rem
}

.decor__card {
    border: 2px solid color-mix(in oklab, var(--primary-glow) 70%, transparent);
    border-radius: calc(var(--radius) - 2px);
    background: var(--card);
    width: 2.5rem;
    height: 3.5rem;
    font-family: var(--font-display);
    color: var(--primary-glow);
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    animation: 7s ease-in-out infinite float-slow;
    display: none;
    position: absolute;
    top: 3rem
}

.decor__card--l {
    --rot: -6deg;
    left: 1.75rem
}

.decor__card--r {
    --rot: 6deg;
    animation-delay: 1.5s;
    right: 1.75rem
}

.decor__gem {
    border: 2px solid color-mix(in oklab, var(--gold) 70%, transparent);
    --rot: 45deg;
    width: 2rem;
    height: 2rem;
    animation: 7s ease-in-out infinite float-slow;
    display: none;
    position: absolute;
    bottom: 1.5rem
}

.decor__gem--l {
    animation-delay: 2s;
    left: 2.25rem
}

.decor__gem--r {
    animation-delay: 3.2s;
    right: 2.25rem
}

@media (width>=640px) {
    .decor__spark {
        display: block
    }
}

@media (width>=768px) {
    .decor__gem {
        display: block
    }

    .decor__card {
        display: flex
    }
}

@media (width>=1024px) {
    .decor__suit {
        display: block
    }
}

.clip {
    display: none;
    position: absolute
}

.clip-card {
    border: 2px solid color-mix(in oklab, var(--primary-glow) 60%, transparent);
    background: var(--card);
    width: 1.5rem;
    height: 2.25rem;
    font-family: var(--font-display);
    color: var(--primary-glow);
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    font-size: .625rem;
    animation: 7s ease-in-out infinite float-slow
}

.clip-gem {
    border: 2px solid color-mix(in oklab, var(--gold) 65%, transparent);
    --rot: 45deg;
    width: 1.125rem;
    height: 1.125rem;
    animation: 8s ease-in-out infinite float-slow
}

.clip-suit {
    font-family: var(--font-display);
    color: color-mix(in oklab, var(--primary) 22%, transparent);
    font-size: 2.25rem;
    line-height: 1
}

.clip-dots {
    width: 2.25rem;
    height: 2.25rem;
    color: color-mix(in oklab, var(--gold) 30%, transparent)
}

@media (width>=768px) {
    .clip-card {
        display: flex
    }

    .clip-gem,.clip-suit,.clip-dots {
        display: block
    }
}

.article .clip-card {
    top: .25rem;
    left: 2rem
}

.article .clip-gem {
    top: .6rem;
    right: 2.5rem
}

.article .clip-suit {
    bottom: 1.25rem;
    left: 2.25rem
}

.article .clip-dots {
    bottom: 1.5rem;
    right: 2rem
}

.site-footer .clip-card {
    margin-top: -1.125rem;
    top: 50%;
    left: 2rem
}

.site-footer .clip-gem {
    margin-top: -.5625rem;
    top: 50%;
    right: 2.25rem
}

.site-footer .clip-suit {
    margin-top: -1.125rem;
    top: 50%;
    right: 5rem
}

.site-footer .clip-dots {
    display: none
}

@keyframes float-slow {
    0%,to {
        transform: translateY(0) rotate(var(--rot,0deg))
    }

    50% {
        transform: translateY(-10px) rotate(calc(var(--rot,0deg) + 6deg))
    }
}

@keyframes twinkle {
    0%,to {
        opacity: .18;
        transform: scale(.8)
    }

    50% {
        opacity: .7;
        transform: scale(1.15)
    }
}

.author {
    background: var(--card);
    text-align: left;
    border-width: 1px;
    border-radius: 999px;
    align-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
    padding: .5rem 1rem .5rem .5rem;
    display: flex
}

.author__avatar {
    background: var(--primary);
    width: 2.5rem;
    height: 2.5rem;
    color: var(--primary-foreground);
    font-family: var(--font-display);
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 700;
    display: flex
}

.author__name {
    font-size: .9375rem;
    font-weight: 700
}

.author__role {
    color: var(--muted-foreground);
    font-size: .75rem
}

.intro-box__tone {
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: .75rem;
    font-weight: 700;
    display: inline-block
}

.intro-box__text {
    color: var(--muted-foreground);
    margin-bottom: 1rem;
    line-height: 1.75
}

.intro-box__text:first-of-type {
    color: var(--foreground);
    font-size: 1.125rem
}

.intro-box__note {
    border-left: 3px solid var(--gold);
    background: var(--muted);
    color: var(--muted-foreground);
    padding: .875rem 1rem;
    font-size: .875rem
}

.intro-box__note strong {
    color: var(--gold)
}

.chapter__label {
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--primary);
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 700
}

.callout {
    border: 1px dashed color-mix(in oklab, var(--primary) 55%, transparent);
    border-radius: var(--radius);
    background: color-mix(in oklab, var(--primary) 7%, var(--background));
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.25rem 1rem;
    position: relative
}

.callout__label {
    background: var(--primary);
    color: var(--primary-foreground);
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: 999px;
    margin-bottom: .5rem;
    padding: .125rem .625rem;
    font-size: .7rem;
    font-weight: 800;
    display: inline-block
}

.prose-flat .callout p {
    color: var(--foreground);
    margin: 0
}

.verdict {
    gap: 1rem;
    margin-top: .5rem;
    display: grid
}

.verdict__col {
    border-radius: calc(var(--radius) - 2px);
    background: var(--background);
    border-width: 1px;
    padding: 1rem 1.125rem
}

.verdict__col--pro {
    border-top: 3px solid var(--primary)
}

.verdict__col--con {
    border-top: 3px solid var(--gold)
}

.verdict__title {
    font-family: var(--font-display);
    margin-bottom: .625rem;
    font-weight: 700
}

.verdict__col--pro .verdict__title {
    color: var(--primary)
}

.verdict__col--con .verdict__title {
    color: var(--gold)
}

.verdict ul {
    gap: .5rem;
    display: grid
}

.verdict li {
    color: var(--muted-foreground);
    padding-left: 1.5rem;
    font-size: .9rem;
    line-height: 1.55;
    position: relative
}

.verdict__col--pro li:before {
    content: "+";
    color: var(--primary);
    font-weight: 800;
    position: absolute;
    left: .25rem
}

.verdict__col--con li:before {
    content: "!";
    color: var(--gold);
    font-weight: 800;
    position: absolute;
    left: .4rem
}

.final-check {
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    background: var(--card);
    text-align: center;
    padding: 2rem 1.5rem
}

.final-check__eyebrow {
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--primary);
    font-size: .75rem;
    font-weight: 700
}

.final-check__lead {
    max-width: 44rem;
    font-family: var(--font-display);
    margin: .75rem auto 1rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.35
}

.final-check__text {
    max-width: 48rem;
    color: var(--muted-foreground);
    margin: 0 auto .75rem;
    line-height: 1.7
}

@media (width>=768px) {
    .verdict {
        grid-template-columns: 1fr 1fr
    }
}

.rating-table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    font-size: .95rem
}

.rating-table th,.rating-table td {
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    padding: .7rem .8rem
}

.rating-table th {
    background: var(--muted);
    font-family: var(--font-display)
}

.rating-table td:nth-child(2) {
    color: var(--primary);
    white-space: nowrap;
    font-weight: 700
}