/* Page-specific responsive rules moved from desktop stylesheets. */
@media (max-width: 650px) {
    :where(body[data-page^="/text-tools/special-fonts/"]) .app-shell {
        width: min(100% - 28px, 960px);
    }
    :where(body[data-page^="/text-tools/special-fonts/"]) .hero-utility-row {
        min-height: 0;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
        padding-bottom: 8px;
    }
    :where(body[data-page^="/text-tools/special-fonts/"]) .site-preferences {
        align-self: flex-end;
    }
    :where(body[data-page^="/text-tools/special-fonts/"]) .hero-actions {
        padding-top: 0;
    }
    :where(body[data-page^="/text-tools/special-fonts/"]) .tool-actions button {
        flex: 1 1 100%;
    }
}