body {
    padding: 64px 0;
}

/* ====================STATUS==================== */

.status {
    width: 100%;
    max-width: 1024px;
    margin: auto;

    padding: 0 calc(var(--sidepadding) + 8px );

    display: flex;
    flex-direction: column;
    gap: 24px;
}

.status-text {
    width: 100%;
    padding: 24px;

    display: flex;
    align-items: center;
    gap: 5px;

    background-color: hsl(from var(--green) h s l / 0.21);
    border: 1px dashed hsl(from var(--green) h s l / 0.32);
    border-radius: 6px;

    & svg { width: 18px; fill: var(--default); }
}

.status-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}

.cell {
    width: 12px;
    width: 12px;
    aspect-ratio: 1 / 1;

    border-radius: 1px;

    background-color: var(--accent);
}

.cell.not-yet {
    background-color: hsl(from var(--muted) h s l / 0.5);
}