@media (max-width: 920px) {
            .comic-strip {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .extra-mode-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .extra-header {
                align-items: flex-start;
                flex-direction: column;
            }

            header {
                align-items: flex-start;
                flex-direction: column;
            }

            .top-actions {
                justify-content: flex-start;
            }

            .mode-grid,
            .home-dashboard,
            .training-layout,
            .section-grid {
                grid-template-columns: 1fr;
            }

            .home-backup {
                padding-left: 0;
                padding-top: 18px;
                border-left: 0;
                border-top: 1px solid rgba(24, 92, 46, 0.12);
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .stage {
                min-height: 620px;
            }
        }

        @media (max-width: 620px) {
            .comic-strip {
                grid-template-columns: 1fr;
            }

            .extra-mode-grid {
                grid-template-columns: 1fr;
            }

            .app {
                width: min(100% - 22px, 1200px);
                padding-top: 16px;
            }

            .brand h1 {
                font-size: 24px;
            }

            .logo {
                width: 58px;
                height: 52px;
            }

            .mode-grid {
                grid-template-columns: 1fr;
            }

            .mode-card {
                min-height: 168px;
            }

            .mode-illustration img {
                max-width: 138px;
            }

            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }

            .stat-card {
                padding: 16px;
            }

            .home-dashboard {
                padding: 18px;
            }

            .hero-copy {
                grid-template-columns: 1fr;
            }

            .hero-copy .note {
                grid-column: auto;
            }

            .stage-top,
            .instruction {
                align-items: flex-start;
                flex-direction: column;
            }

            .timer {
                font-size: 34px;
            }

            .training-area {
                min-height: 390px;
            }

            .progress-wrap {
                width: 100%;
            }
        }