body:has(> .sandbox-banner) {
    --sandbox-banner-height: 48px;
    padding-top: var(--sandbox-banner-height);
}
.sandbox-banner {
    position: fixed;
    inset: 0 0 auto;
    z-index: 30;
    box-sizing: border-box;
    min-height: var(--sandbox-banner-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    padding: 10px 16px;
    border-bottom: 1px solid #e4b33b;
    background: #fff3cd;
    color: #654700;
    font:
        600 14px/1.5 system-ui,
        sans-serif;
    text-align: center;
}
body:has(> .sandbox-banner) .sidebar {
    top: var(--sandbox-banner-height);
}
body:has(> .sandbox-banner) .dashboard-body,
body:has(> .sandbox-banner) #root > .min-h-screen {
    min-height: calc(100vh - var(--sandbox-banner-height));
}
@media (max-width: 600px) {
    body:has(> .sandbox-banner) {
        --sandbox-banner-height: 72px;
    }
    .sandbox-banner {
        flex-wrap: wrap;
        align-content: center;
        gap: 0 0.35em;
    }
}
@media print {
    body:has(> .sandbox-banner) {
        padding-top: 0;
    }
    #sandbox-learning-notice {
        display: block !important;
        position: static;
    }
    #sandbox-learning-notice * {
        display: inline !important;
    }
}