.micro-main {
    max-width:
        1040px;

    margin:
        0 auto;

    padding:
        0 18px;
}

.micro-hero {
    max-width:
        800px;

    margin:
        70px auto 30px;

    text-align:
        center;
}

.micro-hero h1 {
    margin:
        12px 0;
}

.micro-hero p {
    max-width:
        720px;

    margin:
        0 auto;

    color:
        var(--muted);

    line-height:
        1.65;
}

.micro-input-card,
.micro-results {
    padding:
        20px;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}

.micro-input-card {
    margin-bottom:
        22px;
}

.micro-input-card label {
    display:
        block;

    margin-bottom:
        8px;

    font-size:
        12px;

    font-weight:
        850;
}

.micro-text-input,
.micro-record-input {
    width:
        100%;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    outline:
        none;

    background:
        var(--bg-soft);

    color:
        var(--text);
}

.micro-text-input {
    min-height:
        50px;

    padding:
        0 13px;

    font-size:
        15px;
}

.micro-record-input {
    min-height:
        180px;

    padding:
        13px;

    resize:
        vertical;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    line-height:
        1.6;
}

.micro-text-input:focus,
.micro-record-input:focus {
    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(113,104,255,.12);
}

.micro-two-column {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        12px;
}

.micro-actions {
    display:
        flex;

    gap:
        8px;

    margin-top:
        12px;
}

.micro-results {
    margin-bottom:
        70px;
}

.micro-summary {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        10px;

    margin:
        18px 0;
}

.micro-summary-card {
    padding:
        13px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        var(--surface-2);
}

.micro-summary-card span {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--muted);

    font-size:
        10px;

    text-transform:
        uppercase;
}

.micro-summary-card strong {
    font-size:
        14px;

    overflow-wrap:
        anywhere;
}

.micro-json-view {
    margin-top:
        16px;

    padding:
        14px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        var(--bg-soft);

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        11px;

    line-height:
        1.6;
}

@media (max-width:700px) {

    .micro-two-column {
        grid-template-columns:
            1fr;
    }

    .micro-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .micro-actions {
        flex-direction:
            column;
    }

    .micro-actions button {
        width:
            100%;
    }
}