body.grid-page { height: 100dvh; min-height: 0; overflow: hidden; padding-bottom: 0 !important; }
.grid-page .app-main { display: flex; flex-direction: column; width: 100%; max-width: none; height: 100dvh; min-height: 0; padding: 32px 28px 20px; gap: 20px; }
.grid-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex: 0 0 auto; }
.grid-heading h1 { font-size: 28px; line-height: 1.3; font-weight: 650; letter-spacing: -.5px; margin: 0; }
.grid-heading p { font-size: 13px; color: var(--t-muted); margin: 7px 0 0; }
.grid-heading .text-link { flex-shrink: 0; font-size: 12px; }
.grid-stage { flex: 1; min-height: 0; position: relative; border: 1px solid var(--ln-soft); border-radius: 16px; overflow: hidden; background: var(--surface); }
#grid-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--surface); }
.grid-loading { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--surface); color: var(--t-muted); font-size: 14px; }
.grid-loading[hidden] { display: none; }
@media (min-width:769px) and (min-height:451px) {
    html:not(.mobile-ready) .grid-page .app-main { width: 100%; max-width: none; padding: 30px 28px 24px; }
}
@media (max-width:768px), (max-width:1024px) and (max-height:450px) and (orientation:landscape) {
    html.mobile-ready .grid-page .app-main { padding: 8px 8px 0 !important; margin: 0; gap: 8px; height: auto; }
    .grid-heading { padding: 0 5px; gap: 10px; }
    .grid-heading h1 { font-size: 19px; }
    .grid-heading p { display: none; }
    .grid-stage { border-radius: 12px 12px 0 0; border-bottom: 0; }
    html.mobile-ready .grid-page .site-nav { gap: 1px; }
    html.mobile-ready .grid-page .nav-btn-capsule { padding: 6px; gap: 3px; }
    html.mobile-ready .grid-page .nav-btn-capsule span { font-size: 10px; }
    html.mobile-ready .grid-page .music-player { bottom: 12px; }
}