@media (max-width: 760px) {
    :where(body[data-page="/programmer-tools/text-html/"]) .app-shell {
        width: calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)));
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .topbar {
        min-height: 64px;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-block: 10px;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .tool-brand-tagline {
        order: 3;
        flex-basis: 100%;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .local-badge {
        min-height: 40px;
        padding-inline: 9px;
        font-size: 11px;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .hero {
        padding-block: 30px 12px;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .hero h1 {
        font-size: clamp(32px, 9vw, 43px);
        letter-spacing: -1.2px;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .settings-grid,
    :where(body[data-page="/programmer-tools/text-html/"]) .settings-subgrid,
    :where(body[data-page="/programmer-tools/text-html/"]) .advanced-grid,
    :where(body[data-page="/programmer-tools/text-html/"]) .workspace-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .utility-button {
        min-height: 44px;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .workspace-grid {
        gap: 20px;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .editor-pane textarea {
        min-height: 220px;
        padding: 12px;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .card-topline {
        align-items: flex-start;
        flex-direction: column;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .output-actions {
        width: 100%;
        justify-content: flex-start;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .text-button {
        min-height: 44px;
        padding-inline: 10px;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .action-row {
        align-items: stretch;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .action-button {
        flex: 1 1 140px;
        min-height: 48px;
    }

    :where(body[data-page="/programmer-tools/text-html/"]) .footer {
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
}

@media (any-pointer: coarse) {
    :where(body[data-page="/programmer-tools/text-html/"]) :where(.text-button, .action-button, select, .check-option) {
        min-height: 44px;
    }
}