.lmdb-lazy-wrapper {
    --lmdb-lazy-surface: var(--color-surface, oklch(0.965 0.004 230));
    --lmdb-lazy-surface-strong: var(--color-surface-strong, oklch(0.925 0.012 230));
    --lmdb-lazy-ink: var(--color-ink, oklch(0.185 0.018 235));
    --lmdb-lazy-primary: var(--color-primary, oklch(0.57 0.14 230));
    --lmdb-lazy-focus: var(--color-focus, oklch(0.67 0.18 230));
    container-type: inline-size;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-md, 1rem);
    box-sizing: border-box;
    min-width: 0;
    padding: clamp(1rem, 4cqi, 2rem);
    color: var(--lmdb-lazy-ink);
    background: var(--lmdb-lazy-surface);
    border-radius: var(--radius-md, 0.75rem);
}

.lmdb-lazy-wrapper--compact {
    min-height: clamp(12rem, 35cqi, 20rem);
}

.lmdb-lazy-wrapper--regular {
    min-height: clamp(20rem, 55cqi, 36rem);
}

.lmdb-lazy-wrapper--tall {
    min-height: clamp(28rem, 75cqi, 48rem);
}

.lmdb-lazy-wrapper.is-loaded {
    display: block;
    min-height: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.lmdb-lazy-placeholder {
    display: grid;
    width: min(100%, 74rem);
    gap: var(--space-lg, 1.5rem);
}

.lmdb-lazy-placeholder__line,
.lmdb-lazy-placeholder__grid > span {
    display: block;
    background: var(--lmdb-lazy-surface-strong);
    border-radius: var(--radius-sm, 0.5rem);
}

.lmdb-lazy-placeholder__line--title {
    width: min(22rem, 68%);
    height: 1.75rem;
}

.lmdb-lazy-placeholder__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
}

.lmdb-lazy-placeholder__grid > span {
    min-height: clamp(7rem, 24cqi, 14rem);
}

.lmdb-lazy-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm, 0.75rem);
    margin: 0;
    font-size: 0.875rem;
}

.lmdb-lazy-wrapper.is-loading .lmdb-lazy-status::before {
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border: 0.15rem solid var(--lmdb-lazy-surface-strong);
    border-block-start-color: var(--lmdb-lazy-primary);
    border-radius: 50%;
    content: "";
    animation: lmdb-lazy-spin 0.8s linear infinite;
}

.lmdb-lazy-wrapper.is-idle .lmdb-lazy-placeholder {
    opacity: 0.55;
}

.lmdb-lazy-action {
    min-height: 2.75rem;
    padding: var(--space-sm, 0.75rem) var(--space-lg, 1.5rem);
    color: oklch(1 0 0);
    font: inherit;
    font-weight: 700;
    background: var(--lmdb-lazy-primary);
    border: 0;
    border-radius: var(--radius-sm, 0.5rem);
    cursor: pointer;
}

.lmdb-lazy-action:focus-visible,
.lmdb-lazy-noscript a:focus-visible {
    outline: 0.2rem solid var(--lmdb-lazy-focus);
    outline-offset: 0.2rem;
}

.lmdb-lazy-error {
    max-width: 36rem;
    text-align: center;
}

.lmdb-lazy-error p,
.lmdb-lazy-noscript {
    margin-block: 0 var(--space-md, 1rem);
}

.lmdb-lazy-wrapper.has-error .lmdb-lazy-placeholder,
.lmdb-lazy-wrapper.has-error .lmdb-lazy-status,
.lmdb-lazy-wrapper.has-error > [data-lmdb-load] {
    display: none;
}

@keyframes lmdb-lazy-spin {
    to {
        transform: rotate(1turn);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lmdb-lazy-wrapper.is-loading .lmdb-lazy-status::before {
        animation: none;
        border-color: var(--lmdb-lazy-primary);
    }
}

@media (forced-colors: active) {
    .lmdb-lazy-placeholder__line,
    .lmdb-lazy-placeholder__grid > span {
        border: 1px solid CanvasText;
    }

    .lmdb-lazy-action {
        border: 1px solid ButtonText;
    }
}