.intro-bouncing-mosaic__area {
    max-width: 48rem;
}

.intro-bouncing-mosaic__decor--p1 {
    top: 0;
    left: 0;
    width: 2rem;
    height: 3rem;
    animation-duration: 2s;
}

.intro-bouncing-mosaic__decor--p2 {
    top: 0;
    left: 25%;
    width: 1.5rem;
    height: 2.5rem;
    animation-duration: 2.5s;
}

.intro-bouncing-mosaic__decor--p3 {
    top: 0;
    left: 50%;
    width: 2.5rem;
    height: 2rem;
    animation-duration: 1.8s;
}

.intro-bouncing-mosaic__decor--p4 {
    top: 0;
    left: 75%;
    width: 1.75rem;
    height: 2.75rem;
    animation-duration: 2.2s;
}

.intro-bouncing-mosaic__decor--p5 {
    top: 0;
    right: 0;
    width: 2.25rem;
    height: 2.25rem;
    animation-duration: 2.8s;
}

.intro-bouncing-mosaic__decor--p6 {
    top: 25%;
    left: 0;
    width: 1.5rem;
    height: 2rem;
    animation-duration: 3s;
}

.intro-bouncing-mosaic__decor--p7 {
    top: 25%;
    left: 25%;
    width: 2rem;
    height: 1.5rem;
    animation-duration: 1.5s;
}

.intro-bouncing-mosaic__decor--p8 {
    top: 25%;
    left: 50%;
    width: 1.25rem;
    height: 2.25rem;
    animation-duration: 2.3s;
}

.intro-bouncing-mosaic__decor--p9 {
    top: 25%;
    left: 75%;
    width: 1.75rem;
    height: 1.75rem;
    animation-duration: 2.7s;
}

.intro-bouncing-mosaic__decor--p10 {
    top: 25%;
    right: 0;
    width: 1.5rem;
    height: 2.5rem;
    animation-duration: 1.9s;
}

.intro-bouncing-mosaic__decor--p11 {
    top: 50%;
    left: 0;
    width: 2.25rem;
    height: 1.5rem;
    animation-duration: 2.1s;
}

.intro-bouncing-mosaic__decor--p12 {
    top: 50%;
    left: 25%;
    width: 1.75rem;
    height: 2rem;
    animation-duration: 2.6s;
}

.intro-bouncing-mosaic__decor--p13 {
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 1.75rem;
    animation-duration: 1.7s;
}

.intro-bouncing-mosaic__decor--p14 {
    top: 50%;
    left: 75%;
    width: 2rem;
    height: 1.25rem;
    animation-duration: 2.4s;
}

.intro-bouncing-mosaic__decor--p15 {
    top: 50%;
    right: 0;
    width: 1.25rem;
    height: 2rem;
    animation-duration: 2.9s;
}

.intro-bouncing-mosaic__decor--p16 {
    top: 75%;
    left: 0;
    width: 2rem;
    height: 1.75rem;
    animation-duration: 2.2s;
}

.intro-bouncing-mosaic__decor--p17 {
    top: 75%;
    left: 25%;
    width: 1.5rem;
    height: 2.25rem;
    animation-duration: 1.8s;
}

.intro-bouncing-mosaic__decor--p18 {
    top: 75%;
    left: 50%;
    width: 1.75rem;
    height: 1.5rem;
    animation-duration: 2.5s;
}

.intro-bouncing-mosaic__decor--p19 {
    top: 75%;
    left: 75%;
    width: 1.25rem;
    height: 2rem;
    animation-duration: 2.1s;
}

.intro-bouncing-mosaic__decor--p20 {
    top: 75%;
    right: 0;
    width: 2.25rem;
    height: 1.5rem;
    animation-duration: 2.7s;
}

.intro-bouncing-mosaic__decor--p21 {
    bottom: 0;
    left: 0;
    width: 1.5rem;
    height: 2rem;
    animation-duration: 2.3s;
}

.intro-bouncing-mosaic__decor--p22 {
    bottom: 0;
    left: 25%;
    width: 2rem;
    height: 1.25rem;
    animation-duration: 1.6s;
}

.intro-bouncing-mosaic__decor--p23 {
    bottom: 0;
    left: 50%;
    width: 1.75rem;
    height: 1.75rem;
    animation-duration: 2.8s;
}

.intro-bouncing-mosaic__decor--p24 {
    bottom: 0;
    left: 75%;
    width: 1.25rem;
    height: 2.25rem;
    animation-duration: 2s;
}

.intro-bouncing-mosaic__decor--p25 {
    bottom: 0;
    right: 0;
    width: 2rem;
    height: 1.5rem;
    animation-duration: 2.4s;
}

[class*="intro-bouncing-mosaic__decor--p"] {
    animation-name: intro-bouncing-mosaic__bounce;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes intro-bouncing-mosaic__bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25%); }
}

/* Аватар: однаковий фізичний розмір для TW/BS (у BS немає w-12/h-12) */
.dual-column-rating-quote__media {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    flex-shrink: 0;
}

/* quote v14 — nebula bento grid (BS fallback: CSS Grid row-span has no Bootstrap analog) */
.quote-nebula__bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quote-nebula__bento-item--feature {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
}

.quote-nebula__bento-item--wide {
    grid-column: span 2 / span 2;
}

.quote-nebula__bento-item--small {
    grid-column: span 1 / span 1;
}

@media (max-width: 767px) {
    .quote-nebula__bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-nebula__bento-item--feature {
        grid-row: span 1 / span 1;
    }
}

/* grunge torn-edge clip via jagged polygon (no BS/clip-path analog) */
.quote-nebula__torn {
    clip-path: polygon(
        0% 2%, 4% 0%, 12% 1.5%, 22% 0%, 33% 1.2%, 45% 0%, 58% 1.5%, 70% 0%, 82% 1%, 92% 0%, 100% 2%,
        100% 96%, 96% 100%, 88% 98%, 76% 100%, 64% 98.5%, 52% 100%, 40% 98%, 28% 100%, 16% 98.5%, 6% 100%, 0% 97%
    );
}

/* blurred background glow behind the featured quote, sharp content stays on top (no BS backdrop-filter analog) */
.quote-nebula__glow {
    filter: blur(48px);
}

/* fixed decorative arrow-icon sizing (no BS w/h utility for arbitrary rem sizes) */
.quote-nebula__arrow {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
}

/* terminal-style annotation block */
.quote-nebula__terminal {
    white-space: pre-wrap;
    word-break: break-word;
}

/* scroll-triggered slide-in reveal — root background stays a still, non-animated texture on purpose */
.quote-nebula__reveal {
    transition: transform 700ms ease, opacity 700ms ease;
}

.quote-nebula__reveal--left {
    transform: translateX(-2.5rem);
    opacity: 0;
}

.quote-nebula__reveal--right {
    transform: translateX(2.5rem);
    opacity: 0;
}

.quote-nebula__reveal.is-visible {
    transform: translateX(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .quote-nebula__reveal {
        transition: opacity 200ms ease;
        transform: none;
    }

    .quote-nebula__reveal--left,
    .quote-nebula__reveal--right {
        transform: none;
    }
}
/* hover + focus affordances (layout/outline via theme token) */
@media (hover: hover) {
    .quote-nebula-root [role="listitem"]:hover,
    .quote-nebula-root article:hover,
    .quote-nebula-root [class*="quote-nebula__card"]:hover,
    .quote-nebula-root .quote-nebula__book:hover,
    .quote-nebula-root .quote-nebula__step:hover,
    .quote-nebula-root .quote-nebula__index-card:hover,
    .quote-nebula-root .quote-nebula__pill:hover,
    .quote-nebula-root .quote-nebula__item:hover {
        transform: translateY(-0.125rem);
    }
}

.quote-nebula-root [role="listitem"],
.quote-nebula-root article,
.quote-nebula-root [class*="quote-nebula__card"],
.quote-nebula-root .quote-nebula__book,
.quote-nebula-root .quote-nebula__step,
.quote-nebula-root .quote-nebula__index-card,
.quote-nebula-root .quote-nebula__pill {
    transition: transform 200ms ease;
}

.quote-nebula-root a:focus-visible,
.quote-nebula-root button:focus-visible,
.quote-nebula-root [tabindex="0"]:focus-visible,
.quote-nebula-root input:focus-visible,
.quote-nebula-root summary:focus-visible,
.quote-nebula-root [role="slider"]:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

@media (hover: hover) {
    .quote-nebula-root button:hover,
    .quote-nebula-root a:hover,
    .quote-nebula-root summary:hover {
        opacity: 0.92;
    }
}

.content-ledger__label {
    letter-spacing: 0.05em;
}