:root {
    --studio-grid-bg: #fafafa;
    --studio-grid-line: rgba(226, 232, 240, .58);
}

html,
body:not(.modal-mode) {
    background-color: var(--studio-grid-bg) !important;
    background-image:
        linear-gradient(var(--studio-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--studio-grid-line) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    background-position: -1px -1px !important;
}

body:not(.modal-mode) .app-shell,
body:not(.modal-mode) .stage {
    background-color: transparent !important;
    background-image:
        linear-gradient(var(--studio-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--studio-grid-line) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    background-position: -1px -1px !important;
}

html.studio-theme-dark,
html.studio-theme-dark body:not(.modal-mode),
html.theme-dark,
html.theme-dark body:not(.modal-mode),
body.studio-theme-dark:not(.modal-mode),
body.theme-dark:not(.modal-mode) {
    --studio-grid-bg: #08090c;
    --studio-grid-line: rgba(100, 116, 139, .16);
}

html.studio-theme-dark body:not(.modal-mode) .app-shell,
html.studio-theme-dark body:not(.modal-mode) .stage,
html.theme-dark body:not(.modal-mode) .app-shell,
html.theme-dark body:not(.modal-mode) .stage,
body.studio-theme-dark:not(.modal-mode) .app-shell,
body.studio-theme-dark:not(.modal-mode) .stage,
body.theme-dark:not(.modal-mode) .app-shell,
body.theme-dark:not(.modal-mode) .stage {
    background-color: transparent !important;
    background-image:
        linear-gradient(var(--studio-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--studio-grid-line) 1px, transparent 1px) !important;
}

body.modal-mode {
    background: transparent !important;
}