.ide-skeleton {
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
    gap: 1rem;
    background:
        radial-gradient(circle at top left, var(--color-aqua-10), transparent 28%),
        radial-gradient(circle at top right, var(--color-violet-10), transparent 34%),
        linear-gradient(180deg, rgba(16, 16, 16, 0.92) 0%, rgba(16, 16, 16, 0.98) 100%);
}

.ide-skeleton__sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.ide-skeleton__workspace {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.ide-skeleton__toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 1rem;
}

.ide-skeleton__editors {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
    gap: 1rem;
    min-height: 0;
}

.ide-skeleton__canvas,
.ide-skeleton__code {
    padding: 1rem;
}

.ide-skeleton__canvas {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    justify-content: flex-start;
}

.ide-skeleton__code {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media screen and (max-width: 980px) {
    .ide-skeleton {
        grid-template-columns: 1fr;
    }

    .ide-skeleton__sidebar {
        display: none;
    }

    .ide-skeleton__editors {
        grid-template-columns: 1fr;
    }

    .ide-skeleton__code {
        min-height: 12rem;
    }
}