@media (max-width: 640px) {
    .shell {
        padding: 32px 18px 64px;
    }
    .topbar {
        margin-bottom: 32px;
    }
    .hero p {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .hero p code {
        overflow-wrap: anywhere;
    }
    .input-row .suffix {
        font-size: 18px;
    }
    .input-row input {
        font-size: 22px;
    }
    .item {
        grid-template-columns: 14px 1fr 34px;
    }
    .item .right {
        grid-column: 2;
        text-align: left;
        margin-top: 4px;
    }
    .item .item-delete {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
    }
    .modal {
        padding: 0;
    }
    .modal .box {
        height: 100vh;
        border-radius: 0;
        max-width: none;
    }
    .confirm {
        padding: 18px;
    }
    .confirm-message {
        padding-left: 0;
    }
    .confirm-actions {
        flex-direction: column-reverse;
    }
    .confirm-btn {
        width: 100%;
    }
}