.eqs-blocks-root {
    --eqs-blocks-red: #861719;
    --eqs-blocks-red-hover: #a12a2d;
    --eqs-blocks-red-soft: rgba(134, 23, 25, .08);
    --eqs-blocks-red-line: rgba(134, 23, 25, .35);
    --eqs-blocks-navy: #1d293d;
    --eqs-blocks-navy-deep: #121a2a;
    --eqs-blocks-gray: #667085;
    --eqs-blocks-bg: #dce2ec;
    --eqs-blocks-surface: #f7f8fb;
    --eqs-blocks-field: #fff;
    --eqs-blocks-line: #c8d0dc;
    --eqs-blocks-line-strong: #98a2b3;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    color: var(--eqs-blocks-navy);
    background-color: var(--eqs-blocks-bg);
}

.eqs-blocks-root--overlay {
    position: fixed;
    z-index: 1000;
    inset: 0;
    opacity: 1;
    visibility: visible;
    transition: opacity 260ms ease, visibility 260ms ease;
}

.eqs-blocks-root--overlay.is-finished {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.eqs-blocks-card {
    display: flex;
    width: 100%;
    max-width: 384px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px 32px;
    border: 1px solid var(--eqs-blocks-line);
    border-radius: 12px;
    background-color: var(--eqs-blocks-surface);
    box-shadow: 0 1px 2px rgba(18, 26, 42, .04), 0 12px 32px rgba(18, 26, 42, .06);
    animation: eqs-blocks-fade-up .5s ease-out both;
}

.eqs-blocks-card--compact {
    max-width: 260px;
    gap: 16px;
    padding: 24px 20px;
    box-shadow: 0 1px 2px rgba(18, 26, 42, .04);
}

.eqs-blocks-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eqs-blocks-brand-mark {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 3px;
    background-color: var(--eqs-blocks-red);
}

.eqs-blocks-brand-text {
    color: var(--eqs-blocks-navy-deep);
    font: 600 12px 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.eqs-blocks-grid {
    display: grid;
    grid-template-columns: repeat(3, 12px);
    min-height: 56px;
    align-content: center;
    gap: 6px;
}

.eqs-blocks-square {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background-color: var(--eqs-blocks-red);
    animation: eqs-blocks-pulse 1.2s ease-in-out infinite;
    animation-delay: var(--eqs-block-delay);
}

.eqs-blocks-text {
    text-align: center;
}

.eqs-blocks-title {
    margin: 0;
    color: var(--eqs-blocks-navy);
    font: 600 16px 'Space Grotesk', system-ui, sans-serif;
}

.eqs-blocks-message {
    margin: 4px 0 0;
    color: var(--eqs-blocks-gray);
    font: 400 14px 'Space Grotesk', system-ui, sans-serif;
}

.eqs-blocks-card--compact .eqs-blocks-title {
    font-size: 14px;
}

.eqs-blocks-card--compact .eqs-blocks-message {
    font-size: 12px;
}

@keyframes eqs-blocks-pulse {
    0%, 100% {
        opacity: .25;
        transform: scale(.85);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes eqs-blocks-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
    .eqs-blocks-card {
        max-width: 320px;
        padding: 32px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eqs-blocks-card,
    .eqs-blocks-square {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
    .eqs-blocks-root--overlay { transition-duration: .01ms; }
}